/* Trusty Pigeon — account and unlock pages. No inline styles; CSP-safe.

   Brand source of truth: docs/brand/ (tokens.json, app.md, clear-mode.md).
   Four themes from tokens.json:
     Everyday light   :root                                   (default)
     Everyday dark    :root + prefers-color-scheme: dark
     Clear light      :root[data-mode="clear"]
     Clear dark       :root[data-mode="clear"] + prefers-color-scheme: dark
   data-mode is set before first paint by mode.js (cached choice → OS asks for
   more contrast / forced colors → Everyday); the account's saved choice
   (mode-ui.js) wins once it loads. prefers-contrast: more adds pure
   black/white on top; forced-colors uses the system palette.

   Contrast (WCAG 2.x, computed against bg and surface): body text (--text)
   >= 7:1 in every theme; muted >= 4.5:1 (>= 7:1 in Clear); borders and focus
   >= 3:1. Ratios against bg noted inline. */

/* Atkinson Hyperlegible Next and Mono (Braille Institute), SIL OFL 1.1, self-
   hosted: the Google Fonts latin subsets of the variable fonts (one file per
   family covers weights 200-800). Licenses: /account/fonts/*-OFL.txt */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/account/fonts/atkinson-hyperlegible-next-latin-v7.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/account/fonts/atkinson-hyperlegible-mono-latin-v8.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Everyday light (default) ---------- */
:root {
  color-scheme: light dark;

  --bg: #ffffff;              /* bg */
  --surface: #f5f3f9;         /* surface */
  --text: #211d2e;            /* ink: 16.4 on bg, 15.0 on surface */
  --muted: #5b566b;           /* muted: 7.0 on bg, 6.4 on surface */
  --border: #8f8aa0;          /* border: 3.3 on bg, 3.0 on surface */
  --primary: #4e3f86;         /* violet: 8.8 on bg; also links */
  --primary-hover: #3b2f68;   /* violet-deep */
  --primary-text: #ffffff;    /* on-violet: 8.8 on primary */
  --primary-weak: #ece8f5;    /* wash: selected state only in Everyday */
  --danger: #a10e0e;          /* 8.1 on bg */
  --danger-hover: #7e0b0b;
  --danger-text: #ffffff;     /* 8.1 on danger */
  --danger-bg: #fdecea;
  --danger-strong: #5c0a0a;   /* 12.2 on danger-bg */
  --success: #0b4f1e;         /* 9.8 on bg */
  --success-bg: #e7f4ea;      /* success 8.6 on it */
  --warning: #5a3a00;
  --warning-bg: #fff4d1;      /* warning 9.4 on it */
  --focus: #0b0c0c;           /* outline */
  --focus-halo: #ffdd00;      /* GOV.UK-style yellow band */
  /* Status messages: wash is for the selected state in Everyday (app.md). */
  --info-bg: var(--surface);

  /* Type (tokens.json "Everyday"): 17px body on a 16px root. */
  --font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --root-size: 100%;
  --fs-body: 1.0625rem;       /* 17px */
  --lh-body: 1.5294;          /* 26px */
  --fs-small: 0.9375rem;      /* 15px, 22px leading */
  --lh-small: 1.4667;
  --fs-label: 0.9375rem;      /* 15px bold, 20px leading */
  --lh-label: 1.3333;
  --fs-title: 1.4375rem;      /* site title: the h2 token, 23px/30px */
  --lh-title: 1.3043;
  --fs-h2: 1.875rem;          /* screen heading: the h1 token, 30px/38px */
  --lh-h2: 1.2667;
  --fs-h3: 1.25rem;
  --fs-h4: 1.125rem;
  --fs-time: 2.3125rem;       /* "Until 3:45 PM": clear-time, 37px/44px */
  --lh-time: 1.1892;
  --fs-code: 1.5rem;
  --measure: 36rem;

  /* Spacing: tokens.json 6/10/16/26/42/68px at the 16px root (the golden-
     ratio scale below: each step x1.618). */
  --gr-1: 0.382rem;
  --gr-2: 0.618rem;
  --gr-3: 1rem;
  --gr-4: 1.618rem;
  --gr-5: 2.618rem;
  --gr-6: 4.236rem;
  --gap-targets: 0.625rem;

  /* Shape & size */
  --radius: 0.5rem;           /* radius-md: buttons, inputs, cards */
  --radius-lg: 1rem;          /* radius-lg: app sheets / panels */
  --radius-pill: 999px;
  --line-w: 1px;              /* panel, card and section dividers (calmer) */
  --border-w: 2px;            /* controls */
  --border-w-strong: 3px;
  --border-w-selected: 4px;
  --tap-min: 2.75rem;         /* 44px floor in Everyday */
  --tap-primary: 3.5rem;      /* 56px for the one big action */
  --focus-w: 3px;
  --focus-offset: 3px;
  --mark-size: 2.5rem;        /* 40px logo */

  /* Aliases used by component rules below */
  --link: var(--primary);
  --secondary-bg: var(--bg);
  --secondary-text: var(--primary);
  --secondary-border: var(--primary);
  --error-bg: var(--danger-bg);
  --error-border: var(--danger);
  --error-text: var(--danger-strong);
  --ok-text: var(--success);
  --ok-bg: var(--success-bg);
  --code-bg: var(--warning-bg);
  --code-border: var(--warning);
}

/* ---------- Everyday dark ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17151f;
    --surface: #211e2b;
    --text: #ece9f3;          /* 15.1 on bg, 13.7 on surface */
    --muted: #b3aec2;         /* 8.4 on bg, 7.6 on surface */
    --border: #6c6780;        /* 3.3 on bg */
    --primary: #b9a9ec;       /* 8.6 on bg */
    --primary-hover: #d2c7f3;
    --primary-text: #17151f;  /* 8.6 on primary */
    --primary-weak: #2a2140;
    --danger: #ffb0a6;        /* 10.1 on bg */
    --danger-hover: #ffd2cc;
    --danger-text: #3d0000;   /* 10.0 on danger */
    --danger-bg: #3a1414;
    --danger-strong: #ffdad5; /* 12.6 on danger-bg */
    --success: #a6e3b5;
    --success-bg: #122e1a;
    --warning: #ffe08a;
    --warning-bg: #2e2508;    /* 11.8 */
    --focus: #ffdd00;
    --focus-halo: #141414;
  }
}

/* ---------- Clear light: AAA contrast, bigger type and targets ---------- */
:root[data-mode="clear"] {
  --bg: #ffffff;
  --surface: #f3f1f8;
  --text: #0b0c0c;            /* 19.6 on bg */
  --muted: #3d3a47;           /* 11.1 on bg, 9.9 on surface */
  --border: #5e5a6b;          /* 6.7 on bg */
  --primary: #4a2e8c;         /* 10.2 on bg */
  --primary-hover: #371f6e;   /* 13.3 with white */
  --primary-text: #ffffff;
  --primary-weak: #ece7f8;    /* wash, text 16.5 */
  --danger: #a10e0e;
  --danger-hover: #7e0b0b;
  --danger-text: #ffffff;
  --danger-bg: #fdecea;
  --danger-strong: #5c0a0a;
  --success: #0b4f1e;
  --success-bg: #e7f4ea;
  --warning: #5a3a00;
  --warning-bg: #fff4d1;
  --focus: #0b0c0c;
  --focus-halo: #ffdd00;
  --info-bg: var(--primary-weak);

  /* Type: the 18px root and golden-ratio scale (docs/DESIGN.md). */
  --root-size: 112.5%;
  --fs-body: 1rem;            /* clear-body 18px/27px */
  --lh-body: 1.5;
  --fs-small: 1rem;
  --lh-small: 1.5;
  --fs-label: 1rem;
  --lh-label: 1.5;
  --fs-title: 1.618rem;       /* clear-h1 29px */
  --lh-title: 1.236;
  --fs-h2: 1.618rem;
  --lh-h2: 1.236;
  --fs-h3: 1.272rem;
  --fs-h4: 1.1rem;
  --fs-time: 2.058rem;        /* clear-time 37px */
  --lh-time: 1.25;
  --fs-code: 1.75rem;
  --gap-targets: 0.75rem;     /* >= 12px between targets */

  --radius-lg: 0.5rem;
  --line-w: 2px;
  --tap-min: 3rem;            /* tap-min 54px at the 18px root */
  --tap-primary: 4rem;        /* tap-primary 72px */
  --mark-size: 2.5rem;        /* 45px */
}

/* ---------- Clear dark ---------- */
@media (prefers-color-scheme: dark) {
  :root[data-mode="clear"] {
    --bg: #141414;            /* near-black: less halation than #000 */
    --surface: #1f1d24;
    --text: #ededed;          /* 15.7 on bg */
    --muted: #c8c4d2;         /* 10.8 on bg */
    --border: #918c9e;        /* 5.7 on bg */
    --primary: #cdbdff;       /* 10.8 on bg */
    --primary-hover: #e2d9ff;
    --primary-text: #1c1233;  /* on-violet */
    --primary-weak: #2a2140;
    --danger: #ffb0a6;
    --danger-hover: #ffd2cc;
    --danger-text: #3d0000;
    --danger-bg: #3a1414;
    --danger-strong: #ffdad5;
    --success: #a6e3b5;
    --success-bg: #122e1a;
    --warning: #ffe08a;
    --warning-bg: #2e2508;
    --focus: #ffdd00;
    --focus-halo: #141414;
  }
}

/* iOS "Increase Contrast" and similar: pure black/white, thicker lines. The
   page opens in Clear (mode.js); if someone chose Everyday anyway, they still
   get these colors, since the OS asked for them. */
@media (prefers-contrast: more) {
  :root,
  :root[data-mode="clear"] {
    --bg: #ffffff; --surface: #ffffff;
    --text: #000000; --muted: #000000; --border: #000000;
    --primary: #371f6e; --primary-hover: #1f0f45; --primary-text: #ffffff; /* 13.3 */
    --primary-weak: #ffffff; --info-bg: #ffffff;
    --danger: #7a0000; --danger-hover: #520000; --danger-text: #ffffff;   /* 11.5 */
    --danger-bg: #ffffff; --danger-strong: #7a0000;
    --success: #003d14; --success-bg: #ffffff;                            /* 12.5 */
    --warning: #000000; --warning-bg: #ffffff;
    --focus: #000000; --focus-halo: #ffdd00;
    --line-w: 3px; --border-w: 3px; --border-w-strong: 4px; --focus-w: 4px;
  }
  a { text-decoration-thickness: 2px; }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root,
  :root[data-mode="clear"] {
    --bg: #000000; --surface: #000000;
    --text: #ffffff; --muted: #ffffff; --border: #ffffff;                 /* 21 */
    --primary: #e2d9ff; --primary-hover: #ffffff; --primary-text: #000000; /* 15.9 */
    --primary-weak: #000000; --info-bg: #000000;
    --danger: #ffd0ca; --danger-hover: #ffffff; --danger-text: #000000;   /* 15.1 */
    --danger-bg: #000000; --danger-strong: #ffd0ca;
    --success: #c2f0cd; --success-bg: #000000;                            /* 16.6 */
    --warning: #ffe08a; --warning-bg: #000000;
    --focus: #ffdd00; --focus-halo: #000000;                              /* 15.6 */
  }
}

/* Everyday: 16px root (17px body). Clear: 112.5% = 18px by default. Both
   grow with the user's text size. */
html {
  font-size: var(--root-size);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-wrap: break-word;
}

.wrap {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 var(--gr-3);
}
@media (min-width: 40rem) {
  .wrap { padding: 0 var(--gr-4); }
}

/* Type scale. Clear: steps of sqrt(phi) = 1.272 (1, 1.272, 1.618, 2.058).
   Everyday: tokens.json (h1 30px, h2 23px, body 17px, small 15px). */
h1, h2, h3, h4 {
  line-height: 1.25;
  margin: 0 0 var(--gr-2);
  font-weight: 700;
}
h1 { font-size: var(--fs-title); line-height: var(--lh-title); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--gr-3); max-width: var(--measure); }
/* No trailing gap at the bottom of boxes. */
.panel > :last-child,
.card > :last-child,
.view > :last-child,
.other-fields > :last-child { margin-bottom: 0; }

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

strong { font-weight: 700; }

/* ---------- Focus ---------- */
:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 calc(var(--focus-w) + var(--focus-offset)) var(--focus-halo);
}
:focus:not(:focus-visible) {
  outline: none;
}
h2[tabindex="-1"]:focus,
h3[tabindex="-1"]:focus,
main:focus {
  outline: none;
  box-shadow: none;
}
h2[tabindex="-1"]:focus-visible,
h3[tabindex="-1"]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -10rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--bg);
  color: var(--link);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
}
.skip-link:focus {
  top: 0.5rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Header / footer ---------- */
.site-header {
  border-bottom: var(--line-w) solid var(--border);
  padding: var(--gr-3) 0;
  background: var(--surface);
}
.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gr-3);
}
/* The mark is decorative (aria-hidden); the h1 text is the accessible name. */
.brand {
  display: flex;
  align-items: center;
  gap: var(--gr-2);
  flex: 1 1 14rem;
  min-width: 0;
}
.brand-mark {
  flex: none;
  width: var(--mark-size);
  height: var(--mark-size);
  color: var(--primary);
}
.site-header h1 { margin: 0; min-width: 0; }
.account-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-targets) var(--gr-3);
  flex: 1 1 auto;
}
.signed-in-as { margin: 0; flex: 1 1 12rem; min-width: 0; }
.user-email { overflow-wrap: anywhere; }
.header-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-targets);
}

/* main also has .wrap (horizontal padding), so set vertical padding separately. */
main.wrap {
  padding-top: var(--gr-5);
  padding-bottom: var(--gr-6);
}

.site-footer {
  border-top: var(--line-w) solid var(--border);
  padding: var(--gr-4) 0;
  color: var(--muted);
  background: var(--surface);
}
.site-footer p { margin: 0; }

/* ---------- Status & errors ---------- */
.status:not(:empty) {
  margin: 0 0 var(--gr-4);
  padding: var(--gr-2) var(--gr-3);
  background: var(--info-bg);
  color: var(--text);
  border: var(--border-w) solid var(--primary);
  border-left-width: var(--gr-1);
  border-radius: var(--radius);
  font-weight: 600;
}

.status.visually-hidden { margin: -1px; padding: 0; border: 0; }

.error-box:not(:empty) {
  margin: 0 0 var(--gr-4);
  padding: var(--gr-2) var(--gr-3);
  background: var(--error-bg);
  color: var(--error-text);
  border: 2px solid var(--error-border);
  border-left-width: 0.5rem;
  border-radius: var(--radius);
  font-weight: 600;
}
.error-box:not(:empty)::before {
  content: "\26A0\FE0E  ";
  content: "\26A0\FE0E  " / "";
}

/* ---------- Panels & cards ---------- */
.view > p { max-width: 38rem; }

.view > h2 { margin-bottom: var(--gr-4); }

.panel {
  margin: 0 0 var(--gr-4);
  padding: var(--gr-4);
  border: var(--line-w) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.card-list {
  list-style: none;
  margin: 0 0 var(--gr-3);
  padding: 0;
}
.card {
  margin: 0 0 var(--gr-3);
  padding: var(--gr-3);
  border: var(--line-w) solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.card p { margin-bottom: var(--gr-1); }
.card-title { overflow-wrap: anywhere; }
.label-text { font-weight: 700; }
.break { overflow-wrap: anywhere; }
/* Addresses in mono so 1/l/I and 0/O differ (app.md: accounts). */
.account-address { font-family: var(--font-mono); }

.account-result {
  padding: var(--gr-2) var(--gr-3);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  font-weight: 600;
}
.result-ok {
  color: var(--ok-text);
  background: var(--ok-bg);
  border-color: var(--ok-text);
}
.result-bad {
  color: var(--error-text);
  background: var(--error-bg);
  border-color: var(--error-border);
}

/* Gmail / Microsoft sign-in (oauth-ui.js) */
.oauth-connect {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: var(--border-w) solid var(--border);
}
.oauth-or { color: var(--muted); margin-top: 1rem; margin-bottom: 0; }
.oauth-status-reauth,
.oauth-pending-note {
  padding: 0.5rem 0.75rem;
  color: var(--warning);
  background: var(--warning-bg);
  border: var(--border-w-strong) solid var(--warning);
  border-left-width: 0.5rem;
  border-radius: var(--radius);
}

.lock-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gr-3);
}
.unlocked-until {
  margin: 0;
  flex: 1 1 14rem;
  font-weight: 600;
}

.hint {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  margin: 0 0 var(--gr-2);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  border: var(--border-w) solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.btn-primary {
  background: var(--primary);
  color: var(--primary-text);
  border-color: var(--primary);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
/* Clear: the one primary action per view is at least tap-primary (72px). */
:root[data-mode="clear"] .btn-primary { min-height: var(--tap-primary); }
.btn-secondary {
  background: var(--secondary-bg);
  color: var(--secondary-text);
  border-color: var(--secondary-border);
}
.btn-secondary:hover { text-decoration: underline; }
.btn-danger {
  background: var(--danger);
  color: var(--danger-text);
  border-color: var(--danger);
}
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }

/* Unavailable: dashed outline + muted text (>= 9.49:1), never faded opacity.
   Buttons only paused while a request runs (data-busy-disabled) keep their look. */
.btn[aria-disabled="true"]:not([data-busy-disabled]),
.btn:disabled,
.btn-primary[aria-disabled="true"]:not([data-busy-disabled]):hover,
.btn-danger[aria-disabled="true"]:not([data-busy-disabled]):hover {
  cursor: not-allowed;
  background: transparent;
  color: var(--muted);
  border-style: dashed;
  border-color: var(--border);
  text-decoration: none;
}

/* Pressed toggle: shown by a check mark and a thicker border, not just color. */
.btn-toggle[aria-pressed="true"] {
  border-width: 4px;
  padding: 0.5rem 1rem;
}
.btn-toggle[aria-pressed="true"]::before {
  content: "\2713";
  content: "\2713" / "";
  margin-right: 0.4em;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-targets) var(--gr-3);
  margin: var(--gr-4) 0 0;
}

.button-row + .hint,
.button-row + p { margin-top: var(--gr-2); }

body.is-busy,
body.is-busy .btn { cursor: progress; }

/* ---------- Forms ---------- */
.field { margin: 0 0 var(--gr-4); }
.field > label,
legend {
  display: block;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 700;
  margin-bottom: var(--gr-1);
}

.input {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
}
.input-short { max-width: 9rem; }
.input-code {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Native select styling ignores height/padding in Safari; draw our own so it
   matches the text inputs. The chevron uses currentColor (works in every mode). */
select.input {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 3rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1.6rem) 50%,
    calc(100% - 1.1rem) 50%;
  background-size: 0.5rem 0.5rem;
  background-repeat: no-repeat;
}

.input[aria-invalid="true"] {
  border-color: var(--error-border);
  border-width: 3px;
}

.field-error {
  margin: var(--gr-2) 0 0;
  color: var(--error-text);
  background: var(--error-bg);
  border-left: var(--gr-1) solid var(--error-border);
  padding: var(--gr-1) var(--gr-2);
  font-weight: 600;
}
.field-error::before {
  content: "Error: ";
}

.password-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.password-row .input {
  flex: 1 1 12rem;
  width: auto;
  min-width: 0;
}

.field-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.field-check input[type="checkbox"] {
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  flex: none;
  accent-color: var(--primary);
  cursor: pointer;
}
.field-check label {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-weight: 700;
  cursor: pointer;
  flex: 1 1 10rem;
}
.field-check .field-error { flex-basis: 100%; }

.other-fields {
  margin: 0 0 var(--gr-4);
  padding: var(--gr-3);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
}
.other-fields legend { padding: 0 var(--gr-1); }

.provider-help {
  margin: calc(-1 * var(--gr-3)) 0 var(--gr-4);
}
.provider-help p { margin: var(--gr-1) 0; }
.provider-help a {
  display: inline-block;
  padding: 0.6rem 0;
  min-height: var(--tap-min);
  font-weight: 600;
}

/* ---------- Recovery code ---------- */
.recovery-code {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gr-2) var(--gr-4);
  margin: var(--gr-4) 0;
  padding: var(--gr-4);
  background: var(--code-bg);
  border: 3px dashed var(--code-border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  user-select: all;
}
.code-group {
  white-space: nowrap;
}

/* ---------- Reset disclosure ---------- */
.reset summary {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0.25rem 0;
  font-weight: 700;
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
}
.reset summary::marker,
.reset summary::-webkit-details-marker {
  color: var(--text);
}
.reset-body { margin-top: 0.75rem; }

/* ---------- Dialog ---------- */
.dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: var(--gr-4);
  color: var(--text);
  background: var(--bg);
  border: 3px solid var(--border);
  border-radius: var(--radius);
}
.dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.dialog h2 { overflow-wrap: anywhere; }

/* ---------- Clerk container ---------- */
.clerk-sign-in {
  margin: var(--gr-4) 0 0;
  max-width: 100%;
  overflow-x: auto;
}

/* ---------- "Keep unlocked for" radio pills (account + unlock pages) ---------- */
.duration {
  margin: var(--gr-4) 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.duration legend {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  padding: 0;
}
.duration-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 1 auto;
  min-height: var(--tap-min);
  padding: 0.5rem 1rem;
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}
.pill input[type="radio"] {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  flex: none;
  accent-color: var(--primary);
  cursor: pointer;
}
/* Selected: solid fill + check mark + bold (not color alone). */
.pill:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-text);
  font-weight: 800;
}
.pill:has(input:checked) input[type="radio"] {
  accent-color: var(--primary-text);
}
.pill:has(input:checked)::after {
  content: "\2713" / "";
  margin-left: auto;
  font-size: 1.25rem;
}
.pill:has(input:focus-visible) {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 calc(var(--focus-w) + var(--focus-offset)) var(--focus-halo);
}

/* ---------- Unlock page ---------- */
.btn-wide { width: 100%; }
.btn-huge {
  display: flex;
  width: 100%;
  min-height: var(--tap-primary);
  margin: var(--gr-4) 0;
  padding: 0.9rem 1.25rem;
  font-size: 1.3rem;
  text-decoration: none;
}
a.btn-huge:hover { text-decoration: underline; }

.unlock-page h2 { font-size: var(--fs-h2); }
/* The views already say what happened; keep the live region for screen readers only. */
.unlock-page .status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.recovery-details {
  margin: var(--gr-4) 0;
}
.recovery-details summary {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0.25rem 0;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--link);
  text-decoration: underline;
  cursor: pointer;
}
.recovery-details summary::marker,
.recovery-details summary::-webkit-details-marker {
  color: var(--text);
}
.recovery-details[open] summary { margin-bottom: var(--gr-3); }
.recovery-direct { margin: var(--gr-4) 0; }

.big-link {
  margin: var(--gr-4) 0;
  font-size: 1.1rem;
  font-weight: 700;
}
.big-link a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.unlocked-banner {
  margin: 0 0 var(--gr-4);
  padding: var(--gr-4);
  color: var(--ok-text);
  background: var(--ok-bg);
  border: 3px solid var(--ok-text);
  border-left-width: 0.75rem;
  border-radius: var(--radius);
}
.unlocked-banner h2 { margin: 0 0 var(--gr-2); }
.unlocked-banner h2::before {
  content: "\2713  ";
  content: "\2713  " / "";
}
.unlocked-until-big {
  margin: 0;
  font-size: var(--fs-time);
  font-weight: 700;
  line-height: var(--lh-time);
}
.go-back {
  font-size: 1.25rem;
  font-weight: 600;
}

/* ---------- Activity (activity-ui.js) ---------- */
.back-link { margin: 0 0 var(--gr-3); }
.back-link a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-weight: 700;
}
.back-link a::before {
  content: "\2190  ";
  content: "\2190  " / "";
}

.activity-day {
  margin: var(--gr-5) 0 var(--gr-2);
  padding-bottom: var(--gr-1);
  border-bottom: var(--border-w) solid var(--border);
}
.activity-days > .activity-day:first-child { margin-top: var(--gr-4); }

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.activity-item {
  padding: var(--gr-3) 0 var(--gr-3) var(--gr-3);
  border-bottom: 1px solid var(--border);
  border-left: var(--border-w) solid transparent;
}
.activity-item:last-child { border-bottom: 0; }
/* Security entries: thick bar + "Security:" + glyph; color is a fourth cue only. */
.activity-item.is-security {
  border-left: var(--gr-2) solid var(--danger);
}
.activity-item:focus-visible { outline-offset: 0; }
.activity-sentence {
  margin: 0;
  max-width: var(--measure);
}
.activity-security {
  font-weight: 700;
  color: var(--danger);
}
.activity-outcome {
  font-weight: 700;
  white-space: nowrap;
}
.activity-time {
  color: var(--muted);
  white-space: nowrap;
}
.activity-list-compact .activity-item { padding-top: var(--gr-2); padding-bottom: var(--gr-2); }
#recent-activity .big-link { margin-bottom: 0; }

/* A text-style button that still has a full-size target. */
.btn-link {
  min-height: var(--tap-min);
  padding: 0.6rem 0;
  margin-top: var(--gr-1);
  background: transparent;
  color: var(--link);
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  justify-content: flex-start;
}
.btn-link[aria-expanded="true"] { text-decoration-thickness: 2px; }

.activity-details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--gr-1) var(--gr-3);
  margin: var(--gr-1) 0 0;
  padding: var(--gr-3);
  max-width: var(--measure);
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
}
.activity-details dt { font-weight: 700; }
.activity-details dd { margin: 0; overflow-wrap: anywhere; }

.security-banner {
  margin: 0 0 var(--gr-4);
  padding: var(--gr-4);
  color: var(--danger-strong);
  background: var(--danger-bg);
  border: var(--border-w-strong) solid var(--danger);
  border-left-width: var(--gr-2);
  border-radius: var(--radius);
}
.security-banner h3,
.security-banner h4 { color: var(--danger-strong); }
.security-banner > :last-child { margin-bottom: 0; }
.security-banner .button-row { margin-top: var(--gr-3); }
.remove-help {
  margin-top: var(--gr-4);
  padding-top: var(--gr-3);
  border-top: var(--border-w) solid var(--danger);
}
.remove-help ul { margin: 0 0 var(--gr-3); padding-left: var(--gr-4); }
.remove-help li { margin-bottom: var(--gr-2); max-width: var(--measure); }
.remove-help > :last-child { margin-bottom: 0; }

.activity-away {
  padding: var(--gr-2) var(--gr-3);
  color: var(--warning);
  background: var(--warning-bg);
  border: var(--border-w-strong) solid var(--warning);
  border-left-width: var(--gr-2);
  border-radius: var(--radius);
  font-weight: 600;
}

.activity-check:empty { display: none; }
.activity-check { margin: var(--gr-4) 0 0; font-weight: 600; }
.activity-check-ok { color: var(--ok-text); }
.activity-check-ok::before {
  content: "\2713  ";
  content: "\2713  " / "";
}
.activity-settings { margin-top: var(--gr-5); }
.activity-settings .field { margin-bottom: var(--gr-2); }

/* ---------- Small screens ---------- */
@media (max-width: 30rem) {
  .pill { flex: 1 1 100%; }
  .button-row .btn { flex: 1 1 100%; }
  .lock-bar .btn { flex: 1 1 100%; }
  .account-bar { justify-content: flex-start; }
  .header-buttons { flex: 1 1 100%; }
  .header-buttons .btn { flex: 1 1 auto; }
  .recovery-code { font-size: calc(var(--fs-code) * 0.857); gap: var(--gr-2) var(--gr-3); padding: var(--gr-3); }
  .panel { padding: var(--gr-3); }
  .security-banner { padding: var(--gr-3); }
  .activity-details { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .activity-details dd { margin-bottom: var(--gr-2); }
  .activity-details dd:last-child { margin-bottom: 0; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Forced colors (Windows High Contrast) ---------- */
@media (forced-colors: active) {
  :focus-visible,
  .pill:has(input:focus-visible) { outline: 3px solid Highlight; outline-offset: 3px; box-shadow: none; }
  .btn { border: 2px solid ButtonText; }
  .btn[aria-disabled="true"], .btn:disabled { color: GrayText; border-color: GrayText; }
  .pill { border-color: CanvasText; }
  select.input { appearance: auto; -webkit-appearance: auto; background-image: none; padding-right: 0.75rem; }
  .pill:has(input:checked) { background: Highlight; color: HighlightText; border-color: Highlight; forced-color-adjust: none; }
  a { color: LinkText; }
  .btn-link { border: 0; color: LinkText; }
  .activity-item.is-security { border-left-color: CanvasText; }
  .security-banner, .activity-away { border-color: CanvasText; }
  .brand-mark { color: CanvasText; }
}

/* ---------- Print: only the recovery code ---------- */
@media print {
  :root,
  :root[data-mode="clear"] {
    --bg: #ffffff;
    --text: #000000;
    --code-bg: #ffffff;
    --code-border: #000000;
  }
  body { background: #ffffff; color: #000000; }
  .skip-link,
  .site-header .account-bar,
  .site-footer,
  .status,
  .error-box,
  .no-print,
  .view:not(#view-recovery) {
    display: none !important;
  }
  .recovery-code {
    font-size: 20pt;
    border: 2px solid #000000;
  }
}