/* ══════════════════════════════════════════════════════════════════════════
   auth.css — the shared layer behind sign-in and sign-up.

   plenum.css supplies the Airflow tokens and the base; this adds the auth
   composition on top. Load order is plenum.css → auth.css → the page's own
   short block for the parts only it has (login: tabs, MFA, guest, invite-only;
   signup: pips, steps, industry cards, region pills).

   It exists because signup.html had re-declared its own parallel palette
   ("mirrors plenum tokens exactly") and drifted. One layer, one place to fix.

   Airflow is binding here: FLAT. No gradients, no radial washes, no coloured
   glows, no gradient headlines. Depth is background lifts and hairlines. Cold
   ice-blue is the only interactive accent; warm red is danger and lateness.
   Sora for words, Inter for figures, JetBrains Mono for identifiers only.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --num: 'Inter', system-ui, sans-serif;   /* Sora has no tabular numerals */
  --gut: clamp(26px, 4.4vw, 60px);
  --devbar: 0px;                           /* mockup dev bar; 0 in production */
}

/* ── browser surfaces: the parts we did not draw still carry the design ── */
html { scrollbar-color: var(--hair-2) transparent; }
body { min-height: 100vh; caret-color: var(--accent); padding-bottom: var(--devbar); }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--ink); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 99px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
a { text-underline-offset: 3px; }
h1, h2, p { text-wrap: pretty; }

.tnum { font-family: var(--num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* plenum.css rings focus with a box-shadow at :where() specificity (0,0,0), so
   any component carrying its own box-shadow beats it on source order and the
   keyboard ring never renders. An outline cannot lose that fight, and it reads
   on every ground these pages use — --ring's inner band is var(--panel), which
   matches none of them. */
.btn-primary:focus-visible, .oauth-btn:focus-visible, .tab:focus-visible,
.guest-btn:focus-visible, .btn-link:focus-visible, .back-link:focus-visible,
.peek:focus-visible, .theme-fab:focus-visible, .btn:focus-visible,
.ind-card:focus-visible, .pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  min-height: calc(100vh - var(--devbar));
}
.theme-fab { position: fixed; top: 16px; right: 16px; z-index: 30; }

/* ══════════════════════════════════════════════════════════════════════════
   LEFT — the product, not a picture of it.

   This panel is always the INVERSE of the page ground: dark panel on the light
   theme, light panel on the dark one. It is the canon's own value break, taken
   from the landing page's proof band. Two near-identical greys side by side is
   what made the first build read washed out.
   ══════════════════════════════════════════════════════════════════════════ */
.showside {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(20px, 3.4vh, 34px);
  padding: clamp(40px, 5vh, 64px) var(--gut);
  background: #0e0f12; color: #f2f4f8;
  --paper: #0e0f12; --panel: #1b1e25; --panel-2: #23272f; --sunken: #15171c;
  --ink: #f2f4f8; --ink-2: #aeb6c4; --ink-3: #8b95a7; --hair: #2c313b; --hair-2: #3a404c;
  --accent: #33b1ff; --accent-2: #5cc0ff; --accent-wash: #0a2233; --hot: #ff5c5c;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .42);
  --sh-2: 0 1px 2px rgba(0, 0, 0, .42), 0 18px 40px -12px rgba(0, 0, 0, .6);
}
:root[data-theme="dark"] .showside {
  background: #f4f6fa; color: #131722;
  --paper: #f4f6fa; --panel: #ffffff; --panel-2: #eef2f7; --sunken: #e9edf3;
  --ink: #131722; --ink-2: #4a5568; --ink-3: #6b7585; --hair: #e4e9f1; --hair-2: #d5dce8;
  --accent: #1493e6; --accent-2: #0f76bf; --accent-wash: #dcecfb; --hot: #e23b3b;
  --sh-1: 0 1px 1.5px rgba(28, 26, 22, .05);
  --sh-2: 0 2px 8px rgba(28, 26, 22, .07), 0 22px 50px -14px rgba(28, 26, 22, .24);
}

.mark {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 600; letter-spacing: var(--track-snug);
  align-self: flex-start; color: var(--ink);
}
.mark img { width: 26px; height: 26px; object-fit: contain; display: block; }

/* display type at the strength the landing page uses — a 31px ceiling is what
   made this read timid the first time */
.pitch-t {
  font-size: clamp(30px, 3.9vw, 54px); font-weight: 600;
  letter-spacing: -.038em; line-height: 1.02;
  max-width: 13ch; text-wrap: balance; color: var(--ink);
}
.pitch-p { margin-top: 15px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 48ch; }

/* ══ THE RECORD CARD ══════════════════════════════════════════════════════
   One customer as a physical card in a filing tray. The tray is recessed, the
   dividers stand behind, and the card sits proud of both — depth from real
   surfaces and hairlines, never a coloured halo.

   Sign-in shows a finished card. Sign-up builds this same card as the visitor
   answers, so the two pages are one object and one story.
   ═══════════════════════════════════════════════════════════════════════════ */
.tray {
  position: relative; max-width: 600px;
  padding: 0 14px 15px; border-radius: 16px;
  background: var(--sunken); border: 1px solid var(--hair);
}

/* dividers: tabs standing behind the card, clipped by it */
.divs { display: flex; align-items: flex-end; gap: 5px; padding: 0 6px; height: 31px; overflow: hidden; }
.div-t {
  flex: 0 1 auto; min-width: 0; height: 25px; padding: 0 10px;
  border-radius: 7px 7px 0 0;
  background: var(--panel-2); border: 1px solid var(--hair); border-bottom: 0;
  font-size: 11.5px; line-height: 23px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.div-t.on {
  flex: none;   /* the open record's tab names what you are reading */
  height: 31px; line-height: 29px;
  background: var(--panel); border-color: var(--hair-2);
  color: var(--ink); font-weight: 600;
}
.div-t.more { margin-left: auto; flex: none; font-size: 10.5px; color: var(--ink-2); }

.rec {
  position: relative; border: 1px solid var(--hair-2); border-radius: 12px;
  background: var(--panel); box-shadow: var(--sh-2); padding: 15px 17px 17px;
}
.motion .rec { opacity: 0; transform: translateY(10px); }
.motion .tray.run .rec {
  opacity: 1; transform: none;
  transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .55s cubic-bezier(.16, 1, .3, 1);
}

.rec-top { display: flex; align-items: center; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid var(--hair); }
.rec-ref {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-2);
  border: 1px solid var(--hair-2); border-radius: 99px; padding: 3px 9px;
}
.rec-since { margin-left: auto; font-size: 11.5px; color: var(--ink-2); }
.rec-name { font-size: 19px; font-weight: 600; letter-spacing: -.026em; margin-top: 12px; }

.rec-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 16px; margin-top: 11px; }
.rec-meta dt {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
.rec-meta dd { font-size: 12.5px; color: var(--ink); margin-top: 3px; line-height: 1.4; }
.rec-meta dd small { display: block; color: var(--ink-2); font-size: 11.5px; }

/* the spine: documents hanging off ONE record, not four cards. This is the
   thesis of both pages — one hairline, no per-row border, fill or radius. */
.att { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--hair); }
.att-h {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px;
}
.att-l { list-style: none; position: relative; margin-left: 5px; padding-left: 17px; }
.att-l::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 8px; width: 1px; background: var(--hair-2); }
.att-i {
  position: relative;
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 4px 11px;
  align-items: baseline; padding: 6px 0;
}
/* the node is 7px + 2x1.5px border = 10px wide, so its left edge sits 5px left
   of the spine's centre: -17px (the list padding) - 4.5px. */
.att-i::before {
  content: ""; position: absolute; left: -21.5px; top: 11px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--panel); border: 1.5px solid var(--accent);
}
/* raised or sent is hollow; money landed is filled. The row's own word carries
   the state too, so identity never rests on the drawing alone. */
.att-i.settled::before { background: var(--accent); width: 9px; height: 9px; left: -22.5px; top: 10px; }
.att-i.pending::before { border-color: var(--hair-2); }
.att-i.pending { color: var(--ink-3); }
.motion .att-i { opacity: 0; }
.motion .tray.run .att-i { opacity: 1; transition: opacity .42s cubic-bezier(.16, 1, .3, 1); }
.motion .tray.run .att-i:nth-child(1) { transition-delay: .34s; }
.motion .tray.run .att-i:nth-child(2) { transition-delay: .50s; }
.motion .tray.run .att-i:nth-child(3) { transition-delay: .66s; }
.motion .tray.run .att-i:nth-child(4) { transition-delay: .82s; }
.att-i b { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.att-i .ref { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
.att-i .st { font-size: 11.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-i .amt {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; text-align: right;
}
.att-i .amt small { font-size: 11.5px; font-weight: 400; color: var(--ink-2); }

/* NAMESPACE TRAP: this was .foot, and plenum.css:_ ships .foot as the page
   footer (max-width:1160px; margin:0 auto; padding:0 26px 48px), so the panel's
   foot line silently inherited 26px of left padding and 48px below it. Same
   family as .empty (an empty-state utility) and .stage (a pipeline cell) —
   check any new class name against plenum before using it.

   one foot line, not stacked blocks — the panel has to clear the fold at 900px
   tall and the display type earns the room. No separator rules: the row wraps,
   and a rule that ends a wrapped line dangles with nothing after it. */
.panel-foot { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.panel-foot i { font-size: 15px; color: var(--ink-3); flex: none; }
.panel-foot .std {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  border: 1px solid var(--hair-2); border-radius: 99px; padding: 4px 10px;
}

/* ══════════════════════════════════════════════════════════════════════════
   RIGHT — the task. No card, no glass: the form sits on the page ground so the
   record is the only object on the page.
   ══════════════════════════════════════════════════════════════════════════ */
.authside {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 6vh, 72px) var(--gut); background: var(--paper);
}
.auth { width: 100%; max-width: 376px; margin: 0 auto; }
.mobile-brand { display: none; }

.lead { margin-bottom: 20px; }
.lead h1 { font-size: 25px; font-weight: 600; letter-spacing: -.03em; line-height: 1.14; }
.lead p { margin-top: 7px; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }

/* secondary actions — Google, passkey */
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 42px; border-radius: 10px;
  border: 1px solid var(--hair-2); background: var(--panel); cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  box-shadow: var(--sh-1);
  transition: border-color var(--dur) var(--out), background var(--dur);
}
.oauth-btn:hover { border-color: var(--ink-3); background: var(--panel-2); }
.oauth-btn:disabled { opacity: .6; cursor: default; }
.oauth-btn svg { width: 17px; height: 17px; }
.oauth-btn i { font-size: 18px; color: var(--ink-2); }

.divider { display: flex; align-items: center; gap: 11px; margin: 16px 0; color: var(--ink-2); font-size: 11.5px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

/* ── fields ── */
.form-group { margin-bottom: 13px; }
.form-group label { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.form-group label .optional { font-weight: 400; color: var(--ink-2); }
.inp { position: relative; }
.inp > i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-2); font-size: 16px; pointer-events: none;
}
.inp input, .inp select {
  width: 100%; height: 44px; padding: 0 12px 0 38px; border-radius: 10px;
  border: 1px solid var(--hair-2); background: var(--panel); color: var(--ink);
  font: inherit; font-size: 13.5px;
  transition: border-color var(--dur) var(--out), box-shadow var(--dur);
}
.inp input::placeholder { color: var(--ink-2); opacity: 1; }
.inp input:focus, .inp select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.inp input[aria-invalid="true"] { border-color: var(--neg); }
.inp input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--neg) 24%, transparent); }
.inp .peek {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; border-radius: 8px; background: none;
  color: var(--ink-2); cursor: pointer; display: grid; place-items: center; font-size: 16px;
}
.inp .peek:hover { color: var(--ink); background: var(--panel-2); }
.field-hint { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.45; }

/* the fill is a full-width bar scaled from its left edge, not an animated
   width — same meter, no layout pass per keystroke */
.pw-strength { height: 4px; border-radius: 99px; background: var(--hair-2); overflow: hidden; margin: 10px 0 6px; }
.pw-strength i {
  display: block; height: 100%; width: 100%; border-radius: 99px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .4s var(--out), background .4s;
}
.pw-hint { font-size: 12.5px; color: var(--ink-2); min-height: 16px; line-height: 1.4; }

.form-footer { text-align: right; margin: 2px 0 14px; }
.btn-link {
  background: none; border: 0; font: inherit; font-size: 12.5px; font-weight: 600;
  color: #0b5f9b; cursor: pointer; padding: 2px; border-radius: 6px;
}
.btn-link:hover { text-decoration: underline; }
:root[data-theme="dark"] .btn-link { color: var(--accent); }

.cf-turnstile { margin-bottom: 14px; min-height: 0; }
.cf-turnstile:empty { display: none; }

/* ── primary action ──
   plenum ships .btn-accent as #fff on --accent: 3.28:1 light, 2.37:1 dark. Both
   fail AA, and on an auth page this is the only action. Darken the fill on
   light; put ink on the ice-blue in dark. Flat fill, ink-tinted shadow. */
.btn-primary {
  width: 100%; height: 46px; border: 0; border-radius: 11px;
  background: #0f76bf; color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--sh-1); text-decoration: none;
  transition: background var(--dur) var(--out), box-shadow var(--dur) var(--out), transform var(--dur) var(--out);
}
.btn-primary:hover { background: #0b5f9b; box-shadow: var(--sh-2); }
.btn-primary:active { transform: scale(.99); }
.btn-primary:disabled { opacity: .62; cursor: default; box-shadow: var(--sh-1); }
.btn-primary i { font-size: 17px; }
/* signup.js toggles .busy rather than replacing the label, so the spinner and
   the label trade places instead of the button resizing mid-submit. */
.btn-primary .spin2 { display: none; }
.btn-primary.busy .lbl, .btn-primary.busy > i:first-child { display: none; }
.btn-primary.busy .spin2 { display: inline-block; animation: spin .7s linear infinite; }
:root[data-theme="dark"] .btn-primary { background: var(--accent); color: #0e0f12; }
:root[data-theme="dark"] .btn-primary:hover { background: var(--accent-2); }

.btn-ghost {
  height: 46px; padding: 0 16px; border-radius: 11px;
  border: 1px solid var(--hair-2); background: var(--panel); color: var(--ink-2);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: border-color var(--dur), color var(--dur);
}
.btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); }

/* currentColor so the spinner survives both inks (white on light, near-black on dark) */
.spinner {
  display: inline-block; width: 15px; height: 15px;
  border: 2px solid color-mix(in srgb, currentColor 32%, transparent);
  border-top-color: currentColor; border-radius: 50%;
  animation: spin .7s linear infinite; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── alert: names the problem and the recovery ── */
.alert {
  padding: 10px 12px; border-radius: 10px; font-size: 12.5px; margin-top: 14px;
  display: none; align-items: flex-start; gap: 9px; line-height: 1.5;
}
.alert i { margin-top: 1px; font-size: 16px; flex: none; }
.alert.error, .alert.err {
  display: flex;
  background: color-mix(in srgb, var(--neg) 10%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--neg) 30%, var(--panel));
  color: #b32626;
}
.alert.success {
  display: flex; background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--panel));
  color: #0b5f9b;
}
:root[data-theme="dark"] .alert.error,
:root[data-theme="dark"] .alert.err { color: var(--hot); }
:root[data-theme="dark"] .alert.success { color: var(--accent-2); }

.back-link {
  background: none; border: 0; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center;
  gap: 6px; margin-bottom: 16px; padding: 2px; border-radius: 6px;
}
.back-link:hover { color: var(--ink); }

.legal { margin-top: 20px; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.legal a { color: var(--ink); text-decoration: underline; }
.legal a:hover { color: var(--accent-2); }

/* ══ responsive ══════════════════════════════════════════════════════════
   On a phone the task leads and the record FOLLOWS it. Hiding the panel
   outright ships the plain centred form the whole design exists to replace;
   Operate justifies demoting it, never deleting it.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .theme-fab { top: 12px; right: 12px; }
  .authside { padding: 56px 22px 34px; min-height: auto; }
  .showside { order: 2; justify-content: flex-start; gap: 15px; padding: 30px 22px 36px; border: 0; }
  .mark { display: none; }
  .pitch-t { font-size: 27px; letter-spacing: -.032em; max-width: 18ch; }
  .pitch-p { display: none; }
  .tray { max-width: none; padding: 0; background: none; border: 0; }
  .divs { display: none; }
  /* one line of meta, not none: a record card with no site, contact or terms
     is not a record card, and mobile may not break the rule the rest keeps */
  .rec-meta { grid-template-columns: 1fr; gap: 0; }
  .rec-meta > div:nth-child(2), .rec-meta > div:nth-child(3) { display: none; }
  .panel-foot .rls { display: none; }   /* .mob-trust already says this beside the form */
  .auth { max-width: 420px; }
  .mobile-brand {
    display: flex; align-items: center; gap: 9px; margin-bottom: 24px;
    font-size: 15px; font-weight: 600; letter-spacing: var(--track-snug);
  }
  .mobile-brand img { width: 25px; height: 25px; object-fit: contain; display: block; }
  .mob-trust {
    display: flex; align-items: center; gap: 8px; margin-top: 22px; padding-top: 16px;
    border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--ink-2);
  }
  .mob-trust i { font-size: 15px; color: var(--ink-3); flex: none; }
}
@media (min-width: 901px) { .mob-trust { display: none; } }

/* Laptop widths: the record's three meta columns get too narrow for the address
   to sit on two lines, and the attachment rows lose their status clause before
   they lose their reference or their amount. The OPEN record's tab must never
   ellipsis — it names the thing being read — so neighbours drop instead. */
@media (max-width: 1180px) and (min-width: 901px) {
  .rec-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .div-t.more { margin-left: 0; }
  .div-t:nth-child(2), .div-t:nth-child(4) { display: none; }
}
@media (max-width: 1080px) and (min-width: 901px) {
  .pitch-p { display: none; }
  .att-i .st { display: none; }
}

/* Short viewports stand the display line down, then COMPACT the record rather
   than gutting it: hiding .rec-meta outright left a dead band between the name
   and the attachments. Fit here is load-bearing — re-check 1920x1080,
   1512x760, 1440x900, 1180x760 and 390x844 after anything is added. */
@media (min-width: 901px) and (max-height: 900px) {
  .pitch-t { font-size: clamp(28px, 3.1vw, 42px); }
  .showside { gap: clamp(14px, 2.4vh, 24px); }
}
@media (min-width: 901px) and (max-height: 800px) {
  .pitch-p { display: none; }
  .rec-meta dd small { display: none; }
  .rec-meta { gap: 0 16px; margin-top: 9px; }
  .rec-name { margin-top: 9px; }
  .att { margin-top: 11px; padding-top: 10px; }
  .att-i { padding: 4px 0; }
  .rec { padding: 13px 15px 14px; }
  .showside { gap: 12px; padding-top: clamp(24px, 3vh, 40px); padding-bottom: clamp(24px, 3vh, 40px); }
}