/*
  Shared interface components — anything signed-in or sign-in shaped.

  Loaded by the admin console, the tenant app and the workspace chooser.
  `site.css` owns the colour and type tokens; nothing here defines a colour of
  its own, so all three surfaces stay in step across both themes.

  Extracted from admin.css once a second page needed buttons and fields. The
  split is "would a non-admin page want this?" — `.btn` yes, the tenant table
  no.
*/

/* ------------------------------------------------------------------ chrome */

.bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem clamp(1rem, 4vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: var(--card);
  flex-wrap: wrap;
}

.bar-mark { font-weight: 700; letter-spacing: -0.01em; }

.bar-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper);
  border: 1px solid var(--copper);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

/* Only rendered off prod. If you can see it, you are not on the live system. */
.bar-env {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--signal);
  color: var(--paper);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
}

.bar-spacer { flex: 1 1 auto; }

.bar-who {
  font-size: 0.8125rem;
  color: var(--muted);
  /* An email can be long; it must not push the sign-out button off-screen. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 16rem;
}

/* ------------------------------------------------------------------ layout */

.shell {
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  padding-block: 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.shell--narrow { max-width: 32rem; padding-block: clamp(2rem, 10vh, 5rem) 4rem; }

.panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: clamp(1rem, 3vw, 1.5rem);
}

.panel--centred { max-width: 34rem; margin-inline: auto; }

.panel--bad {
  border-color: var(--copper);
  /* A tinted ground as well as a coloured border, so the failure state does
     not depend on colour discrimination alone. */
  box-shadow: inset 0 0 0 100vmax color-mix(in oklab, var(--copper) 7%, transparent);
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.panel h1, .panel h2 { margin: 0 0 0.5rem; font-size: 1.125rem; }
.panel--centred h1 { font-size: 1.5rem; }
.panel-head h2 { margin: 0; }

.muted { color: var(--muted); margin: 0; }
.note { font-size: 0.8125rem; color: var(--muted); margin: 0 0 0.75rem; }
.hint { font-size: 0.8125rem; color: var(--muted); margin: 0.3rem 0 0; }

.error:empty { display: none; }
.error {
  margin: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--copper);
  font-weight: 500;
}

code, .mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

code {
  background: color-mix(in oklab, var(--line) 50%, transparent);
  padding: 0.05em 0.3em;
  border-radius: 3px;
}

/* ---------------------------------------------------------------- controls */

.btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.5rem 1rem;
  border-radius: 7px;
  border: 1px solid transparent;
  background: var(--signal);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.55; cursor: progress; }

.btn--quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
  font-weight: 500;
  padding: 0.3rem 0.7rem;
  font-size: 0.8125rem;
}

.btn--quiet:hover { border-color: var(--muted); filter: none; }

.btn--block { display: block; width: 100%; text-align: center; }

.form { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.form--block { align-items: stretch; }

.field { display: flex; flex-direction: column; gap: 0.3rem; width: 100%; max-width: 26rem; }

label { font-size: 0.8125rem; font-weight: 600; }

input[type="text"], input[type="email"] {
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  min-width: 0;
}

/*
  `:user-invalid`, NOT `:invalid`.

  `:invalid` matches a `required` field the moment it exists, so every empty
  required input rendered with the error border before anyone had typed
  anything — the sign-in form opened looking as though it had already been
  filled in wrongly. `:user-invalid` only matches after the field has been
  interacted with or the form submitted, which is when "this is wrong" is
  actually true.
*/
input:user-invalid { border-color: var(--copper); }

/* A field that reads as the address it becomes. */
.affix { display: flex; align-items: stretch; }
.affix input { border-radius: 6px 0 0 6px; flex: 1 1 auto; text-align: right; }

.affix-suffix {
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  background: color-mix(in oklab, var(--line) 35%, transparent);
  color: var(--muted);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* -------------------------------------------------------------------- state */

/* State encoded in shape as well as colour, so it survives greyscale. */
.pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.pill--ok   { color: var(--signal); }
.pill--warn { color: var(--copper); }

/* -------------------------------------------------------------- definitions */

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  font-size: 0.9375rem;
}

.facts dt { color: var(--muted); font-size: 0.8125rem; align-self: baseline; }
.facts dd { margin: 0; font-weight: 500; }

/* ------------------------------------------------------------------ atoms */

/*
  These exist because the CSP has no `unsafe-inline`, which blocks `style=`
  attributes as well as <style> blocks — silently, with the reason only in the
  browser console. So every one-off tweak has to be a class. That is a real
  constraint and worth the trade: it is also the reason an injected attribute
  cannot restyle a page into something misleading.
*/

/* A link that should read as text, not as a link. */
.plain-link { color: inherit; text-decoration: none; }
.plain-link:hover { text-decoration: underline; }

.centred { text-align: center; }

/* A field that should fill its panel rather than stop at the reading measure. */
.field--wide { max-width: none; }

/* A list rendered inside .facts, which is otherwise a two-column grid. */
.stack-list {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.stack-list li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}

.stack-list li:last-child { border-bottom: 0; }

/* --------------------------------------------------------------- sign-in */

/*
  The sign-in form. Deliberately the same panel, type and controls as the rest
  of the site — which is the whole reason it exists rather than a redirect to
  a Cognito-hosted page.
*/

.login { display: flex; flex-direction: column; gap: 1rem; }
.login h2 { margin: 0; font-size: 1.0625rem; }

/* A button that reads as a link: these are secondary routes out of the form
   ("forgotten your password", "start again"), not primary actions, and a
   second filled button would compete with the one that matters. A <button> and
   not an <a> because they go nowhere — they change the step. */
.linkish {
  font: inherit;
  font-size: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--signal);
  text-decoration: underline;
  cursor: pointer;
}

.linkish:hover { text-decoration: none; }

input[type="password"] {
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  min-width: 0;
}

/* One-time codes: monospaced, spaced out and large, because they are read off
   a phone screen and typed under mild time pressure. */
.otp {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.25rem;
  letter-spacing: 0.25em;
  text-align: center;
}

/* ------------------------------------------------------------ MFA enrolment */

.qr-wrap {
  display: flex;
  justify-content: center;
  padding: 0.85rem;
  /* A white ground regardless of theme. A QR code inverted by a dark palette
     is not reliably scannable, and this is the one place in the site where
     correctness beats consistency. */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  align-self: center;
}

.qr-wrap img { display: block; width: 200px; height: 200px; }

.secret-details { font-size: 0.875rem; }
.secret-details summary { cursor: pointer; color: var(--signal); }

.secret {
  margin: 0.35rem 0 0;
  padding: 0.5rem 0.6rem;
  background: color-mix(in oklab, var(--line) 40%, transparent);
  border-radius: 6px;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  /* A base32 secret is 52 characters and must not force a sideways scroll. */
  word-break: break-all;
  user-select: all;
}

/* ------------------------------------------------------- the sign-in screens */

/*
  One header, rewritten per step, above one visible panel. See login.js.

  `.auth` is a grid rather than a flex column so the gap between the header and
  whichever panel is showing stays identical on every step — with margins it
  drifted, because the panels have different first children.
*/
.auth { display: grid; gap: 1.25rem; }

.auth-head { display: grid; gap: 0.4rem; }

/* The step title. Smaller than the marketing h1: this is a form, and a 3rem
   heading over two input fields reads as a landing page. */
.auth-title {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 650;
  text-wrap: balance;
}

.auth-lede { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }
.auth-lede:empty { display: none; }

/* Who is signing in — shown from the second step on, so what you are
   confirming is never ambiguous. */
.auth-account {
  margin: 0.25rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in oklab, var(--line) 28%, transparent);
  font-size: 0.875rem;
}

.auth-account-label {
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.auth-account-value { font-weight: 600; word-break: break-all; }

/* The enrolment step is the only one with more than fields in it. */
.enrol { display: grid; gap: 1rem; justify-items: stretch; }