/* ============================================================================
   The signed-out / onboarding surface — login, signup, invite, reset,
   recover, and the setup wizard.

   WHY THIS FILE EXISTS. Every one of those pages carried its own near-identical
   copy of the same twenty lines in a <head> <style> block: centred card, 20px
   text "MinuteBridge" heading, one accent button, nothing else. Six copies is
   why the surface stayed sterile — no one is going to hand-edit six blocks to
   add character, and the copies had already drifted (three different card
   widths, two different label treatments). Same reasoning that moved the review
   UI out of index.html's head into review.css on 2026-08-06: a rule in one
   page's <head> can't be reused, so it doesn't get improved.

   THE TWO SHAPES (Tom, 2026-08-15). Brand presence is split by how often a
   screen is seen:

     .auth-split — signup, invite, wizard. Seen ONCE. A full brand panel in the
       chrome gradient carries the mark, the promise, and three call rows in the
       product's own idiom, so the marketing site's pitch continues into the
       product instead of stopping at a grey form.

     .auth-card — login, reset, recover. Seen every morning by a working firm.
       A gradient cap on a cream sheet: branded, not loud.

   Under 900px the split collapses to the same thing — the brand panel contracts
   to its mark-and-wordmark row, which reads as the card's cap.

   COLOUR. Every value here is a token or a color-mix() of tokens (plus black
   and white at alpha, which are depth, not palette — see themeTokens.test.js).
   The wash on the ground and the tints in the panel move with the scheme; there
   is no second palette hiding in this file.
   ============================================================================ */

/* ---- the ground ------------------------------------------------------------
   Flat --bg is what read as sterile: a near-white sheet on a near-white ground
   with a single blue button. Two very low-opacity washes — accent from the top
   left, the "ready to log" green from the bottom right — give the page depth
   without becoming a colour in their own right. They are derived, so a scheme
   change carries them. */
/* Scoped to `body` on purpose. Everything else in this file is written as
   `.auth-page <thing>` — a descendant vocabulary — so the pattern page can put
   the class on a specimen frame and get the components WITHOUT inheriting a
   full-viewport tinted ground. Only the real pages, where .auth-page IS the
   body, get the painting. */
body.auth-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1100px 620px at 8% -12%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    radial-gradient(900px 560px at 104% 112%, color-mix(in srgb, var(--ok) 11%, transparent), transparent 58%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================================
   SHAPE 1 — the branded card (login, reset, recover)
   ============================================================================ */

.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.auth-card {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  /* the one place this surface spends elevation — the sheet has to lift off a
     ground that is now tinted rather than flat */
  box-shadow: var(--shadow-open), var(--shadow);
  overflow: hidden;
}

/* the cap: the app's own title bar, on the card. Same two declarations the
   product's <header> and the marketing site's .topbar carry, so all three are
   recognisably one object. */
.auth-cap {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 22px;
  background: var(--chrome);
  color: var(--chrome-fg);
}
.auth-cap img { width: 30px; height: 30px; flex: none; display: block; }
.auth-cap b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
/* the right-hand slot: "Early access", "Step 2 of 3" — a chip that reads on the
   gradient in both themes, which is why it is a white veil and not a token */
.auth-cap .cap-tag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
}

.auth-body { padding: 26px 26px 28px; }

/* ============================================================================
   SHAPE 2 — the split (signup, invite, wizard)
   ============================================================================ */

.auth-split {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* the brand panel. Below 900px this is just the gradient cap, full width. */
.auth-brand {
  position: relative;
  overflow: hidden;
  padding: 15px 20px;
  background: var(--chrome);
  color: var(--chrome-fg);
  display: flex;
  align-items: center;
  gap: 11px;
}
.auth-brand-mark { display: flex; align-items: center; gap: 11px; }
.auth-brand-mark img { width: 30px; height: 30px; flex: none; display: block; }
.auth-brand-mark b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }

/* everything below the wordmark is desktop-only — on a phone the form is the
   whole job and the pitch is what the user just came from */
.auth-pitch { display: none; }

.auth-form-col {
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 18px 40px;
}
.auth-form { width: min(400px, 100%); }
/* the wizard's column is a scrolling list of step cards, not a centred form —
   it wants the top of the column, and its cards need the tinted ground to read
   as cards rather than as one continuous sheet */
.auth-form-col.top { align-items: flex-start; background: var(--bg); }
.auth-form-col.top .auth-form { width: min(520px, 100%); }

@media (min-width: 900px) {
  .auth-split { grid-template-columns: minmax(360px, 44%) 1fr; }
  .auth-brand {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 48px 44px;
    /* the panel is the tall thing on the page; the form column scrolls past it */
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
  }
  /* a soft light source in the panel's upper left, so a 44%-wide slab of
     gradient reads as lit rather than as a flat fill */
  .auth-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(680px 460px at 14% 8%, rgba(255, 255, 255, .10), transparent 66%);
    pointer-events: none;
  }
  .auth-brand > * { position: relative; }
  .auth-pitch { display: block; margin-top: 34px; max-width: 400px; }
  .auth-form-col { padding: 48px 40px; }
  .auth-form-col.top { padding: 44px 40px 12vh; }
}

/* the pitch */
/* Fully specified rather than inheriting: on the pattern page this h2 lands
   inside a harness that styles bare h2 as a small-caps section divider with a
   border-bottom, and a half-stated rule lets those through. */
.auth-pitch h2 {
  font-size: clamp(23px, 2.3vw, 30px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: none;
  color: inherit;
  border: 0;
  padding: 0;
  margin: 0 0 12px;
}
.auth-pitch p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: var(--chrome-fg);
  opacity: .82;
}

/* the proof: three call rows in the product's real idiom. They use .dir-tile
   and .pill straight from theme.css — the same classes the review queue
   renders — laid on cream sheets so they read as the product floating over the
   chrome, which is the marketing hero's move. Nothing here is a screenshot to
   go stale. */
.auth-proof { display: flex; flex-direction: column; gap: 8px; margin-top: 26px; }
.auth-proof-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  /* the hairline, not the shadow, is what makes these read as sheets on DARK:
     there the row (--surface) and the gradient's teal end are close enough in
     value that a black drop shadow does nothing */
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .7);
}
.auth-proof-row .grow { flex: 1; min-width: 0; }
/* display:block, not the span default — these are two stacked lines, and
   inline spans would run them together on one */
.auth-proof-row .who,
.auth-proof-row .meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-proof-row .who { font-size: 13px; font-weight: 650; line-height: 1.25; }
.auth-proof-row .meta { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
/* the row's tile is a size down from the review queue's — this is a specimen,
   not a target */
.auth-proof-row .dir-tile { width: 30px; height: 30px; font-size: 13px; }

.auth-panel-foot {
  margin-top: 26px;
  font-size: 12.5px;
  line-height: 1.55;
  opacity: .72;
  max-width: 400px;
}

/* ============================================================================
   The form vocabulary — shared by both shapes
   ============================================================================ */

.auth-page * { box-sizing: border-box; }

.auth-page h1 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0 0 5px;
}
.auth-page .sub {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 20px;
}

/* labels read as small-caps legends rather than as more body copy — it is the
   cheapest thing that makes a form look designed instead of defaulted */
.auth-page label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin: 15px 0 5px;
}

.auth-page input,
.auth-page select {
  width: 100%;
  padding: 10px 12px;
  /* 16px: anything smaller makes iOS Safari zoom the page on focus */
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--field-line);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.auth-page input:hover:not(:focus):not([readonly]),
.auth-page select:hover:not(:focus) { border-color: var(--line-strong); }
.auth-page input:focus,
.auth-page select:focus {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-page input[readonly] { background: var(--surface-2); color: var(--muted); }
/* the split's form column IS --surface, so a field on it needs the recessed
   ground to read as a well rather than as part of the sheet */
.auth-form-col .auth-form input:not([type=checkbox]),
.auth-form-col .auth-form select { background: var(--surface-2); }
.auth-form-col .auth-form input:focus,
.auth-form-col .auth-form select:focus { background: var(--surface); }

.auth-page button {
  width: 100%;
  margin-top: 20px;
  padding: 11px;
  font-size: 15px;
  font-weight: 650;
  font-family: inherit;
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .12s, box-shadow .12s;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset,
              0 8px 18px -12px color-mix(in srgb, var(--accent) 82%, transparent);
}
.auth-page button:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.auth-page button:disabled { opacity: .6; box-shadow: none; }
.auth-page button.secondary {
  color: var(--accent-text);
  background: var(--surface);
  border: 1px solid var(--field-line);
  box-shadow: none;
}
.auth-page button.secondary:hover { background: var(--surface-2); border-color: var(--line-strong); }
/* a button straight after the "or" rule is the divider's other half — the
   button's own top margin would double the gap */
.auth-page .divider + button { margin-top: 0; }

.auth-page .err { color: var(--stop); font-size: 13px; margin-top: 12px; min-height: 18px; }
.auth-page .okmsg { color: var(--ok); font-size: 14px; margin-top: 12px; line-height: 1.6; }
.auth-page .hint { color: var(--muted); font-size: 12.5px; margin-top: 16px; line-height: 1.55; }
.auth-page .ok-note { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 6px; }

/* the "or" between password and passkey — a rule with the word in it, rather
   than a floating grey word */
.auth-page .divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 16px 0 10px;
}
.auth-page .divider::before,
.auth-page .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

/* "Keep me signed in" — a checkbox row, not a label in the field vocabulary */
.auth-page .keep {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}
.auth-page .keep input { width: auto; margin: 0; accent-color: var(--accent); }

/* click-wrap: an UNCHECKED box the user must tick, with the documents
   conspicuously linked at the moment of the act (never pre-checked) */
.auth-page .clickwrap {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 0 4px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--ink);
  cursor: pointer;
}
.auth-page .clickwrap input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }

/* the emailed verification code */
.auth-page input.code {
  letter-spacing: 6px;
  text-align: center;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

/* signup's three-step progress. The done steps carry the accent; the current
   one is half-lit, so the bar says "two to go" at a glance. */
.auth-page .steps { display: flex; gap: 6px; margin: 0 0 20px; }
.auth-page .steps span {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  transition: background .2s;
}
.auth-page .steps span.on { background: var(--accent); }

/* ============================================================================
   The setup wizard's step cards (wizard.html)
   ============================================================================ */

.wz-head { margin-bottom: 20px; }
.wz-head h1 { font-size: 23px; margin: 0 0 6px; }
.wz-head .sub { margin: 0; font-size: 14px; }

.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
/* the live step is the only one that gets elevation and an accent edge — the
   page should answer "what do I do now" without being read */
.step.current { border-color: var(--accent-line); box-shadow: var(--shadow-open), var(--shadow); }
.step.done { background: var(--surface); }
.step.locked { opacity: .55; box-shadow: none; }

.step-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.step.current .step-head { background: var(--accent-tint); }
.step.done .step-head { background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }

.badge {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
}
.step.done .badge { background: var(--ok); border-color: var(--ok); color: var(--on-accent); }
.step.current .badge { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.step-title { font-size: 15px; font-weight: 700; flex: 1; }
.step-state { font-size: 12px; color: var(--muted); flex: none; }
.step.done .step-state { color: var(--ok); font-weight: 700; }

.step-body { border-top: 1px solid var(--line); padding: 14px 16px 16px; display: none; }
.step.current .step-body { display: block; }
.help { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0 0 12px; }

/* the step's primary action. Prefixed with .auth-page for the same reason
   .crm-card is: it has to outrank the generic `.auth-page button` above, which
   would otherwise hand it that rule's 20px top margin. */
.auth-page button.go { margin-top: 4px; padding: 12px; }

.crm-pick { display: flex; flex-direction: column; gap: 10px; }
/* a CRM choice is a <button>, so without the .auth-page prefix the generic
   button rule wins on specificity and paints all three of them accent-filled */
.auth-page .crm-card {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  margin: 0; padding: 13px 14px; font-size: 14px; font-weight: 400; font-family: inherit; cursor: pointer;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: none;
  transition: border-color .12s, background .12s;
}
.auth-page .crm-card:hover { border-color: var(--accent-line); background: var(--accent-tint); }
.crm-card .nm { font-weight: 700; font-size: 15px; }
.crm-card .ds { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.crm-card .grow { flex: 1; min-width: 0; }

.callwait {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  background: var(--surface-2); border: 1px dashed var(--dashed-line);
  border-radius: var(--r-sm); font-size: 13px; color: var(--muted);
}
.spinner {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.callcard {
  padding: 12px 14px; font-size: 14px;
  border: 1px solid var(--ok); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--ok) 7%, var(--surface));
}
.callcard .who { font-weight: 700; }
.callcard .when { font-size: 12px; color: var(--muted); margin-top: 2px; }

.skip { display: block; text-align: center; font-size: 13px; color: var(--muted); margin-top: 14px; }
