/* Aerocachet theme.
 *
 * Palette provenance - the accents are pastel derivations of the South African,
 * Vietnamese and Pride flags. Where flags share a hue (all three carry reds,
 * yellows, blues and greens) the palette keeps ONE token per distinct hue, so
 * there are six accents rather than twelve near-duplicates that would drift
 * apart in practice.
 *
 * The load-bearing rule here is the SATURATION SPLIT:
 *
 *   pastel  = low-saturation, DECORATIVE. Surfaces, borders, headers, the
 *             flag-ribbon motif. Never carries meaning.
 *   strong  = full-saturation, SEMANTIC. expired / expiring / valid.
 *
 * This is why a pastel red can never be mistaken for an expired badge. It is not
 * solved by picking different hues - red, gold and green are in BOTH systems,
 * because that is where the flags agree. It is solved by saturation: a washed
 * out surface tint and a saturated status fill cannot be confused at a glance.
 *
 * Every text pair and every non-text boundary below was measured against WCAG
 * AA (4.5:1 body text, 3:1 borders and UI components) rather than picked by eye.
 * The checks live in the test suite so a later tweak cannot silently regress
 * them. Two values that failed measurement are called out where they appear.
 *
 * The default is the PASTEL (light) theme; dark is available and follows the
 * operating system unless the user overrides it. "Strong" on a dark surface
 * means saturated AND light enough to read - the literal dark flag values, e.g.
 * South African green #007a4d, are invisible on a near-black panel.
 */

:root {
  color-scheme: light;

  /* surfaces */
  --bg: #fdf9f8;
  --panel: #ffffff;
  --elev: #f3edea;
  --elev-hover: #e9e1dd;
  --input: #ffffff;

  /* boundaries */
  --line: #e6ddd9;
  --line-soft: #f0eae7;
  --line-strong: #cfc2bc;

  /* text - measured: ink-dim 7.1:1, ink-faint 6.0:1 on --bg */
  --ink: #1c2128;
  --ink-dim: #4d5563;
  --ink-faint: #545d6a;

  /* brand pastels: decorative only */
  --p-red: #f7dcda;
  --p-gold: #f8ecc9;
  --p-orange: #f9e4d0;
  --p-green: #d5f1e6;
  --p-blue: #d8dff4;
  --p-violet: #ebdeef;

  /* brand inks: links and accent text, same hues, all text-safe */
  --i-red: #a3312b;
  --i-gold: #7a5a0f;
  --i-orange: #8f5516;
  --i-green: #17654a;
  --i-blue: #23357a;
  --i-violet: #672a78;

  /* The logo dots are brand artwork, not text: they stay fixed while the
     wordmark follows --ink for readable light and dark rendering. */
  --logo-red: #c9443b;
  --logo-gold: #c69318;
  --logo-green: #21855d;

  /* STATUS - full-strength flag colours, semantic only.
     s* are fills and borders (3:1); s*-ink are the text-safe variants (4.5:1).
     South African green for valid, gold for expiring, red for expired. */
  --s-ok: #007a4d;
  --s-ok-ink: #005c3a;
  --s-warn: #b8860b;
  --s-warn-ink: #7a5a0f;
  --s-bad: #c0281f;
  --s-bad-ink: #8c1d16;

  /* accent: promoted to the blue hue. It measured 20:1 for text, the highest
     of the six, and blue reads as trustworthy for a document vault. Change
     these two lines to promote a different hue. */
  --accent: var(--i-blue);
  --accent-fill: var(--s-ok);
  --on-accent: #ffffff;
  --accent-ring: rgba(35, 53, 122, .16);

  --radius: 8px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* Dark follows the OS. The explicit [data-theme] blocks below override both
   directions, so a user choice survives an OS change. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #17141a;
    --panel: #201c24;
    --elev: #2a2431;
    --elev-hover: #352e3d;
    --input: #191620;

    --line: #39323f;
    --line-soft: #2c2631;
    --line-strong: #4d4457;

    --ink: #ece7f0;
    --ink-dim: #b5acbb;
    --ink-faint: #9d93a5;

    --p-red: #3a2028;
    --p-gold: #3a3018;
    --p-orange: #3a2a18;
    --p-green: #16342a;
    --p-blue: #1c2440;
    --p-violet: #2e1f38;

    --i-red: #f0a09a;
    --i-gold: #e8c978;
    --i-orange: #eab27f;
    --i-green: #7cd8b0;
    --i-blue: #a3b4ee;
    --i-violet: #cfa4dd;

    --s-ok: #3fc98a;
    --s-ok-ink: #79ddb0;
    --s-warn: #e0b13a;
    --s-warn-ink: #ecc978;
    --s-bad: #e8635a;
    --s-bad-ink: #f39d96;

    --accent: var(--i-blue);
    --accent-fill: var(--s-ok);
    --on-accent: #10121c;
    --accent-ring: rgba(163, 180, 238, .2);
  }
}

/* Explicit user choice, both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #17141a;
  --panel: #201c24;
  --elev: #2a2431;
  --elev-hover: #352e3d;
  --input: #191620;

  --line: #39323f;
  --line-soft: #2c2631;
  --line-strong: #4d4457;

  --ink: #ece7f0;
  --ink-dim: #b5acbb;
  --ink-faint: #9d93a5;

  --p-red: #3a2028;
  --p-gold: #3a3018;
  --p-orange: #3a2a18;
  --p-green: #16342a;
  --p-blue: #1c2440;
  --p-violet: #2e1f38;

  --i-red: #f0a09a;
  --i-gold: #e8c978;
  --i-orange: #eab27f;
  --i-green: #7cd8b0;
  --i-blue: #a3b4ee;
  --i-violet: #cfa4dd;

  --s-ok: #3fc98a;
  --s-ok-ink: #79ddb0;
  --s-warn: #e0b13a;
  --s-warn-ink: #ecc978;
  --s-bad: #e8635a;
  --s-bad-ink: #f39d96;

  --accent: var(--i-blue);
  --accent-fill: var(--s-ok);
  --on-accent: #10121c;
  --accent-ring: rgba(163, 180, 238, .2);
}

/* Windows High Contrast / forced-colors: hand every colour back to the OS and
   let the user's own palette win. Without this, a forced-colors user sees the
   decorative pastels with no borders, because borders were the only cue. */
@media (forced-colors: active) {
  .card, .tile, .pill, button, input, select { border: 1px solid CanvasText; }
  .note { border-left: 3px solid CanvasText; }
  .dot.on { forced-color-adjust: none; }
}

/* Respect the motion preference. The only transitions are hover/focus tints,
   but a vault is opened in bright places and some users get motion sickness. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ===================================================================
   FRONT PAGE - the landing view, added 2026-09-28 (D-020, D-021).

   Every colour here is a theme token, so the whole page re-tints with the
   rest of the app in dark mode and there is no second stylesheet to keep in
   step. The intent is restrained rather than decorative: a wide measure, a
   lot of air, one gold hairline, and nothing that moves on its own. Travel
   documents are looked at in airports and queues, so the page has to stay
   legible in bad light and on a slow connection - which is also why there is
   no webfont, no image beyond the mark, and no animation to wait for.
   =================================================================== */

.hero { max-width:600px; margin:0 auto; text-align:center; padding:56px 0 28px; }

.hero-mark {
  display:block; width:148px; height:148px; margin:0 auto 26px;
  padding:10px;
  border:2px solid var(--line-strong);
  border-radius:38px;
  background:var(--panel);
  box-shadow:0 28px 62px -30px color-mix(in srgb, var(--i-blue) 62%, transparent);
}

:root[data-theme="dark"] .hero-mark {
  border-color:var(--s-ok);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--s-ok) 14%, transparent),
    0 24px 54px -28px rgba(0,0,0,.82);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-mark {
    border-color:var(--s-ok);
    box-shadow:0 0 0 5px color-mix(in srgb, var(--s-ok) 14%, transparent),
      0 24px 54px -28px rgba(0,0,0,.82);
  }
}

.eyebrow {
  margin:0 0 13px;
  font-size:10px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--i-gold);
}

.hero-title {
  margin:0 auto 14px;
  max-width:12ch;
  font-size:clamp(38px, 8vw, 58px);
  line-height:1.01;
  letter-spacing:-.052em;
  font-weight:700;
  color:var(--ink);
}

.hero-sub {
  margin:0 auto; max-width:43ch;
  font-size:16px; line-height:1.6;
  color:var(--ink-dim);
}

.entry-choices {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  width:min(100%, 680px);
  margin:0 auto;
}
.entry-choice {
  min-height:190px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:26px;
  text-align:left;
  border:1px solid var(--line-strong);
  border-radius:20px;
  background:var(--panel);
  color:var(--ink);
  box-shadow:0 18px 46px -36px rgba(28,33,40,.45);
}
.entry-choice:hover:not(:disabled) {
  border-color:var(--accent);
  background:color-mix(in srgb, var(--panel) 92%, var(--p-blue));
  transform:translateY(-2px);
}
.entry-choice-new {
  border-color:color-mix(in srgb, var(--accent-fill) 52%, var(--line-strong));
  background:linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--panel) 86%, var(--p-green)));
}
.entry-choice-kicker, .entry-choice > span:last-child {
  color:var(--ink-dim);
  font-size:13px;
  line-height:1.5;
}
.entry-choice-kicker {
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--i-gold);
}
.entry-choice strong { font-size:23px; letter-spacing:-.03em; }

.journey-steps {
  display:flex;
  justify-content:space-between;
  gap:6px;
  width:100%;
  margin:0 0 24px;
  padding:0;
  list-style:none;
  color:var(--ink-faint);
  font-size:11px;
}
.journey-steps li { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.journey-steps span {
  display:grid; place-items:center;
  width:20px; height:20px;
  border:1px solid var(--line-strong); border-radius:50%;
  color:var(--ink-faint); font-size:10px; font-weight:700;
}
.journey-steps li.current { color:var(--ink); font-weight:650; }
.journey-steps li.current span { border-color:var(--accent-fill); background:var(--accent-fill); color:var(--on-accent); }
.setup-journey { width:100%; margin:0 0 22px; }

.arrival-panel {
  width:min(100%, 500px);
  margin:0 auto;
  padding:30px;
  border:1px solid color-mix(in srgb, var(--line-strong) 78%, var(--i-blue));
  border-radius:20px;
  background:linear-gradient(150deg, var(--panel), color-mix(in srgb, var(--panel) 89%, var(--p-blue)));
  box-shadow:0 26px 70px -42px color-mix(in srgb, var(--i-blue) 72%, transparent);
}

.arrival-kicker {
  margin:0 0 7px;
  font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--i-gold);
}

.arrival-panel h2 {
  margin:0 0 7px;
  font-size:23px; line-height:1.15; letter-spacing:-.03em;
  font-weight:650; text-transform:none; color:var(--ink);
}

.arrival-panel .muted { margin:0; }
.arrival-panel form { display:flex; flex-direction:column; gap:13px; margin-top:24px; }
.arrival-panel form[hidden] { display:none !important; }

.fieldlabel {
  font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
}

.arrival-panel input {
  width:100%; min-height:52px;
  font-size:17px; letter-spacing:.01em;
}
.arrival-panel .primary { min-height:52px; font-weight:650; }

#siCode, #siEnrollCode, #siTotpCode {
  font-family:var(--mono); font-size:22px; letter-spacing:.28em; text-align:center;
}

.account-choice {
  display:flex; align-items:baseline; justify-content:center; gap:7px;
  padding-top:4px; color:var(--ink-dim); font-size:13px;
}

.linkish {
  align-self:flex-start;
  padding:0; border:0; background:none;
  color:var(--i-blue);
  font:inherit; font-size:13px; font-weight:600;
  text-decoration:none; cursor:pointer;
}
.linkish:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

.arrival-panel[hidden] ~ .other-options { display:none; }
.other-options {
  width:min(100%, 500px);
  margin:18px auto 0;
  color:var(--ink-faint);
  font-size:13px;
}
.other-options summary { cursor:pointer; text-align:center; }
.other-options summary:hover { color:var(--ink); }
.other-options-body {
  display:flex; flex-direction:column; align-items:center; gap:11px;
  padding:17px 0 3px;
}
.other-options-body a { color:var(--i-blue); font-weight:600; text-decoration:none; }
.other-options-body a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

.small { font-size:13px; line-height:1.5; }

@media (max-width:680px) {
  .hero { padding:36px 0 24px; }
  .hero-mark { width:132px; height:132px; }
  .entry-choices { grid-template-columns:1fr; }
  .entry-choice { min-height:150px; padding:22px; }
  .arrival-panel { padding:24px 20px; border-radius:16px; }
}

.footrow {
  margin: 30px 0 8px; padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}

.operatorlink {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--i-gold);
  border-radius: 999px;
  color: var(--i-gold);
  font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-decoration: none;
}
.operatorlink:hover { background: var(--p-gold); }

.footrow .small { margin: 12px 0 0; }