:root {
  --color-evergreen: #12452F;
  --color-evergreen-strong: #0B2E1F;
  --color-brass: #A07A2C;
  --color-brass-ink: #76591C;
  --color-paper: #F5F6F3;
  --color-surface: #FFFFFF;
  --color-mist: #E4EBE6;
  --color-ink: #14201A;
  --color-muted: #55615A;
  --color-line: #D7DDD8;
  --color-positive: #1D7350;
  --color-caution: #8F5400;
  --color-critical: #A0261B;
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-10: 40px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --type-display-size: 34px;
  --type-display-line-height: 40px;
  --type-display-weight: 600;
  --type-display-family: var(--font-serif);
  --type-page-title-size: 26px;
  --type-page-title-line-height: 32px;
  --type-page-title-weight: 600;
  --type-page-title-family: var(--font-serif);
  --type-heading-size: 17px;
  --type-heading-line-height: 24px;
  --type-heading-weight: 600;
  --type-heading-family: var(--font-sans);
  --type-body-size: 15px;
  --type-body-line-height: 22px;
  --type-body-weight: 400;
  --type-body-family: var(--font-sans);
  --type-small-size: 13px;
  --type-small-line-height: 18px;
  --type-small-weight: 400;
  --type-small-family: var(--font-sans);
  --type-label-size: 12px;
  --type-label-line-height: 16px;
  --type-label-weight: 500;
  --type-label-family: var(--font-sans);
  --type-amount-size: 15px;
  --type-amount-line-height: 22px;
  --type-amount-weight: 500;
  --type-amount-family: var(--font-mono);
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-evergreen: #6FB892;
    --color-evergreen-strong: #9AD2B2;
    --color-brass: #CDA75C;
    --color-brass-ink: #E2C68C;
    --color-paper: #0D1411;
    --color-surface: #151E1A;
    --color-mist: #22302A;
    --color-ink: #E7ECE8;
    --color-muted: #A1ADA6;
    --color-line: #2B3832;
    --color-positive: #7FCFA4;
    --color-caution: #F0B45E;
    --color-critical: #F28B7E;
  }
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/auth/fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/auth/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/auth/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/auth/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/auth/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
/*
 * Intent 0019, stream hosted: the sign-in, invitation, enroll and
 * recovery-code pages (src/web/pages/auth.ts), from the approved boards in
 * design/mockups/0019-login-and-demo/. Served at /auth/auth.css, without a
 * session (plan finding 12), so it can't use the screen's app.css (ruling
 * hosted-10). Instead the served stylesheet is the generated tokens, the
 * brand's font faces (files under /auth/fonts/), then this file
 * verbatim (ruling hosted-17, src/web/pages/auth.ts).
 *
 * Colors and type: plan 0005 rule B1 allows no hard-coded color anywhere
 * under src/web/ outside tokens.generated.ts. So every color and family here
 * is a design token's custom property (the names TOKENS_CSS defines, light
 * and dark), falling back to the browser's system colors and the system
 * font stack only if the tokens ever fail to load.
 *
 * Scope: the hosted accounts page links this stylesheet too, after the
 * screen's app.css, for the rules at the end (the coordinator's ruling on
 * the screenshots: the note's CSS lives in a stylesheet this stream owns).
 * So every sign-in page rule is under body.auth, and nothing here but the
 * :root aliases (names app.css never uses) and those last rules reaches a
 * framed page.
 */

:root {
  --paper: var(--color-paper, Canvas);
  --surface: var(--color-surface, Canvas);
  --mist: var(--color-mist, color-mix(in srgb, CanvasText 7%, Canvas));
  --ink: var(--color-ink, CanvasText);
  --muted: var(--color-muted, GrayText);
  --line: var(--color-line, color-mix(in srgb, CanvasText 18%, Canvas));
  --green: var(--color-evergreen, CanvasText);
  --on-green: var(--color-surface, Canvas);
  --brass-ink: var(--color-brass-ink, GrayText);
  --positive: var(--color-positive, CanvasText);
  --caution: var(--color-caution, CanvasText);
  --critical: var(--color-critical, CanvasText);
  --sans: var(--font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
  --serif: var(--font-serif, Georgia, "Times New Roman", serif);
  --mono: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

body.auth [hidden] { display: none !important; }

body.auth *, body.auth *::before, body.auth *::after { box-sizing: border-box; }

body.auth {
  color-scheme: light dark;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 22px;
}

body.auth .auth-header {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 8px clamp(16px, 4vw, 24px);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

body.auth .wordmark {
  color: var(--green);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}

body.auth .auth-main {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(40px, 10vh, 96px) clamp(16px, 4vw, 24px) 40px;
}

body.auth .auth-column {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.auth .auth-column-wide { max-width: 560px; }

/* The enrollment page's column is wide enough for the recovery codes; its
   other cards keep the Invite board's narrow width, centred in it. */
body.auth .auth-card-narrow { width: 100%; max-width: 440px; align-self: center; }
body.auth .auth-card-wide { width: 100%; max-width: 560px; }
/* The failure line keeps the width of the card it sits over. */
body.auth .auth-column-wide:not(:has([data-panel="codes"]:not([hidden]))) .auth-alert { width: 100%; max-width: 440px; align-self: center; }

body.auth .auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.auth .auth-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 32px;
  font-weight: 600;
}

body.auth .auth-card p { margin: 0; }

body.auth .eyebrow {
  color: var(--brass-ink);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.auth .muted { color: var(--muted); font-size: 14px; line-height: 20px; }
body.auth .small { font-size: 13px; line-height: 18px; }

body.auth .icon { flex: none; }

body.auth .auth-notice,
body.auth .auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
}

body.auth .auth-notice { border: 1px solid var(--line); background: var(--mist); color: var(--ink); }
body.auth .auth-alert { border: 1px solid var(--critical); background: var(--surface); color: var(--critical); }
body.auth .auth-notice .icon, body.auth .auth-alert .icon { margin-top: 1px; }

body.auth .auth-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--caution);
  font-size: 14px;
  font-weight: 500;
}

body.auth .auth-tag-positive { color: var(--positive); }

body.auth .auth-form { display: flex; flex-direction: column; gap: 24px; }

body.auth .field { display: flex; flex-direction: column; gap: 8px; }
body.auth .field label { font-size: 14px; font-weight: 500; }

body.auth .input {
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

body.auth .input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
body.auth .input[readonly] { background: var(--mist); }
body.auth .input-code { font-family: var(--mono); font-size: 17px; letter-spacing: 0.08em; }

body.auth .actions { display: flex; flex-direction: column; gap: 8px; }
body.auth .actions-row { flex-direction: row; flex-wrap: wrap; }

body.auth .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

body.auth .button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
body.auth .button:disabled { cursor: default; opacity: 0.55; }

body.auth .button-primary { width: 100%; background: var(--green); color: var(--on-green); }
body.auth .button-secondary { min-height: 44px; border-color: var(--line); background: var(--surface); color: var(--ink); }

body.auth .button-link {
  align-self: center;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--green);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.auth .codes {
  list-style: none;
  margin: 8px 0 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--mist);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 8px 24px;
}

body.auth .codes li { display: flex; align-items: baseline; gap: 12px; min-height: 32px; }
body.auth .code-n { width: 20px; text-align: right; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
body.auth .code { font-family: var(--mono); font-size: 17px; font-weight: 500; letter-spacing: 0.06em; }

body.auth .codes-confirm {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.auth .check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 500; }
body.auth .check input { width: 22px; height: 22px; margin: 0; accent-color: var(--green); cursor: pointer; }

/* Recovery codes are print-only (accepted default): the sheet carries the codes and nothing else. */
@media print {
  body.auth { color-scheme: light; background: Canvas; color: CanvasText; }
  body.auth .auth-header, body.auth .auth-alert, body.auth .actions, body.auth .codes-confirm { display: none !important; }
  body.auth .auth-main { padding: 0; }
  body.auth .auth-card { border: 0; padding: 0; }
  body.auth .codes { background: Canvas; border-color: CanvasText; }
}

/* The hosted accounts page (src/web/hosted/accounts-page.ts), a framed page
   that links this stylesheet after app.css: so the screen's tokens
   (--color-*, --space-*) apply here, not the aliases above. */

/* Accounts board: "Linking or reconnecting a bank happens on Sam's desktop."
   A bordered mist box, the icon spaced from the text, then the cards. The
   board's 12px vertical padding is three of the 4px steps (no --space-3 token). */
.hosted-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: calc(var(--space-1) * 3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-mist);
  color: var(--color-ink);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line-height);
}

.hosted-note .icon { flex: none; margin-top: 1px; }

/* Accounts board: the mask after the account's name, muted and mono. */
.account-mask {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--type-small-size);
}

/* ---- The security page (plan PR 8; board 5c, src/web/pages/security.ts) ----
   A framed page like the accounts page: app.css's tokens, .card, .button
   and .dialog apply; these rules add the board's layout. */

.security { display: flex; flex-direction: column; gap: var(--space-6); }
.security .page-head { margin-bottom: 0; }
.security .error { margin: 0; }

.security-section { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }

.security-heading {
  margin: 0;
  font-family: var(--type-heading-family);
  font-size: var(--type-heading-size);
  line-height: var(--type-heading-line-height);
  font-weight: var(--type-heading-weight);
}

.security-text { margin: 0; }

.security-meta {
  color: var(--color-muted);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line-height);
}
p.security-meta { margin: 0; }

.security-credentials { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

/* Board 5c: a rule above each credential; the remove control wraps beneath on a phone. */
.security-credential {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
}

.security-credential-main { display: flex; align-items: flex-start; gap: calc(var(--space-1) * 3); min-width: 0; flex: 1 1 240px; }

.security-tile {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-mist);
  color: var(--color-evergreen);
}

.security-credential-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.security-label { font-weight: var(--type-label-weight); }

.security-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }

.security-new-codes { display: flex; flex-direction: column; gap: var(--space-4); }
.security-new-codes[hidden] { display: none; }

.security-codes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  column-gap: var(--space-10);
  row-gap: var(--space-2);
}

/* Each code numbered once, as on the enrol page: passkey.js's number span, not the list's marker. */
.security-codes li { display: flex; align-items: baseline; gap: calc(var(--space-1) * 3); min-height: 32px; }
.security-codes .code-n { width: 20px; text-align: right; color: var(--color-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.security-codes .code { font-family: var(--font-mono); font-size: 17px; font-weight: 500; letter-spacing: 0.06em; }

/* SecurityConfirm: one narrow card, the button full width, Cancel beneath it. */
.security-confirm {
  max-width: 400px;
  margin: var(--space-10) auto 0;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.security-confirm .error { margin: 0; }
.security-confirm-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.security-wide { width: 100%; gap: var(--space-2); min-height: 48px; }
.security-cancel {
  align-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 calc(var(--space-1) * 3);
  color: var(--color-evergreen);
  font-size: var(--type-small-size);
  font-weight: var(--type-label-weight);
  text-underline-offset: 3px;
}

@media (max-width: 480px) {
  .security-codes { grid-template-columns: minmax(0, max-content); }
}