/* ============================================================================
   AETHER · MFA Authenticator — production app styling
   Hearth, applied to the MFA surfaces (light): Fraunces / Plus Jakarta Sans /
   JetBrains Mono, Syne wordmark, warm ivory surfaces, clay actions, the warm
   severity ramp for state, and warm dark chrome for "moment" screens.
   (Until 2026-08-22 this kit ran its own palette and type stack — see :root.)
   Woven-Trinity mark. Scoped under .aa to isolate from the device frame.
   ============================================================================ */
:root{
  /* ---- The --aa-* ramp is a VIEW ONTO HEARTH, not a second palette ---------
     Until 2026-08-22 this block was an independent design system: its own
     neutrals, its own accents (teal/saffron/sky), its own type stack (Manrope +
     Sora). That made the Console and the Authenticator a different product from
     the portal and the public site for anyone who used both.

     Every declaration below now resolves from a --hearth-* / --accent-* /
     --sev-* token, with the pre-2026-08-22 literal kept as the var() fallback so
     a page that forgets to link hearth-tokens.css still renders.

     The NAMES did not change. --aa-* is a join key across ~2,600 call sites in
     this kit (D00-15: a rename must never touch a join key), so only these ~40
     declarations moved and no component was edited. To revert the visual change,
     revert this block alone.

     --aa-navy is the one deliberate exception: it is dark app CHROME (the rail,
     the brand band, the authenticator's full-screen "moment" states), and that
     pattern is worth keeping. It is no longer cool navy — it now carries
     Hearth's own dark-theme surfaces, so a dark rail on an ivory canvas reads as
     the same product rather than a borrowed one. The sign-in overlay's separate
     `data-posture="ink"` ramp in helix-login.js is NOT touched: that one is a
     documented anti-phishing affordance for the privileged operator door. */

  --aa-bg:var(--hearth-canvas,#F6F1E7);
  --aa-surface:var(--hearth-surface,#FCFAF5);
  --aa-surface-2:var(--hearth-sunken,#F0EADD);
  --aa-surface-3:var(--hearth-border-subtle,#EFE9DC);
  --aa-border:var(--hearth-border,#E6DECF);
  --aa-border-soft:var(--hearth-border-subtle,#EFE9DC);
  --aa-border-strong:var(--hearth-border-strong,#D8CDB8);

  --aa-text:var(--hearth-text,#221C14);
  --aa-text-1:var(--hearth-text,#221C14);      /* was consumed but never declared */
  --aa-text-2:var(--hearth-text-secondary,#5A5042);
  --aa-text-3:var(--hearth-text-muted,#6d6355);  /* 524 uses; was #8b7f6c = 3.43 on canvas, then
                                                    #786d5d = 4.23 on the sunken well (2026-08-28k) */
  /* --aa-text-4 RETIRED 2026-08-28l. It aliased --hearth-text-faint and its comment granted
     itself a "3:1 bar" that WCAG does not give a 9.5-11px label; its 8 text uses now take
     --aa-text-3. --hearth-text-faint is a NON-TEXT token (tracker SS13 row 74). */

  /* Dark chrome — Hearth's dark-theme surfaces, not navy. Name kept (join key). */
  --aa-navy:#191512; --aa-navy-2:#211C18; --aa-navy-3:#2A241F;
  --aa-navy-text:#F3ECDF; --aa-navy-dim:#C5BAA8;

  /* Action. Clay is the ONE colour that means "this does something", estate-wide. */
  --aa-teal:var(--accent-solid-bg,#A94E2E);
  --aa-teal-press:var(--accent-active,#8B3E23);
  --aa-teal-soft:var(--accent-subtle-bg,#F7E7DE);
  --aa-teal-glow:var(--accent,#C56240);

  /* Saffron stays a WARNING colour, not an action one — it is the medium-severity
     pair. Buttons using it now take ink text (5.65) instead of white (2.99). */
  --aa-saffron:var(--sev-medium-fg,#88660D);
  --aa-saffron-deep:var(--sev-high-fg,#AB4E19);
  --aa-saffron-soft:var(--sev-medium-bg,#F6ECCE);

  --aa-sky:var(--sev-info-fg,#3C6188);
  --aa-sky-soft:var(--sev-info-bg,#E2EAF2);

  --aa-ok:var(--status-healthy-fg,#466D49);
  --aa-ok-soft:var(--status-healthy-bg,#E5EFDF);
  --aa-danger:var(--sev-critical-fg,#A12818);
  --aa-danger-soft:var(--sev-critical-bg,#F7E0DA);
  --aa-warn:var(--sev-medium-fg,#88660D);
  --aa-warn-soft:var(--sev-medium-bg,#F6ECCE);

  /* Type — Hearth canon. Manrope and Sora are retired from this kit; that takes
     the estate from seven shipped faces to five. */
  --aa-serif:var(--font-display,"Fraunces",Georgia,serif);
  --aa-sans:var(--font-sans,"Plus Jakarta Sans",system-ui,sans-serif);
  --aa-mono:var(--font-mono,"JetBrains Mono",monospace);
  --aa-brand:var(--font-wordmark,"Syne","Plus Jakarta Sans",sans-serif);

  --aa-shadow-sm:var(--shadow-sm,0 2px 8px rgba(40,30,16,.07));
  --aa-shadow-md:var(--shadow-md,0 8px 24px rgba(40,30,16,.10));
  --aa-shadow-lg:var(--shadow-lg,0 20px 50px rgba(40,30,16,.16));
}
.aa, .aa *{ box-sizing:border-box; font-family:var(--aa-sans); }
.aa{ height:100%; display:flex; flex-direction:column; background:var(--aa-bg); color:var(--aa-text); position:relative; overflow:hidden; }
.aa-serif{ font-family:var(--aa-serif); font-weight:600; letter-spacing:-0.015em; line-height:1.12; }
.aa-mono{ font-family:var(--aa-mono); }
.aa-brand{ font-family:var(--aa-brand); font-weight:800; letter-spacing:-0.03em; }
.aa-scroll{ flex:1; overflow:auto; -webkit-overflow-scrolling:touch; }
.aa-scroll::-webkit-scrollbar{ width:0; height:0; }
.aa-pad{ padding:20px; }
.aa h1,.aa h2,.aa h3{ margin:0; font-family:var(--aa-serif); font-weight:600; letter-spacing:-0.015em; line-height:1.14; color:var(--aa-text); }
.aa-eyebrow{ font-family:var(--aa-mono); font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:var(--aa-text-3); font-weight:500; }
.aa-muted{ color:var(--aa-text-3); }

/* brand mark chip */
.aa-mark{ border-radius:30%; background:#fffdf8; border:1px solid var(--aa-border); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(40,30,16,.18), inset 0 1px 0 rgba(255,255,255,.6); flex:none; }

/* ---- top bar inside app -------------------------------------------------- */
.aa-topbar{ display:flex; align-items:center; gap:12px; padding:14px 18px 10px; }
.aa-topbar .t{ font-family:var(--aa-serif); font-size:21px; font-weight:600; flex:1; min-width:0; }
.aa-iconbtn{ width:38px; height:38px; border-radius:11px; border:none; background:var(--aa-surface-3); color:var(--aa-text-2); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:filter .12s, background .12s; }
.aa-iconbtn:active{ filter:brightness(.94); }
.aa-avatar{ width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:14px; cursor:pointer; }

/* ---- buttons ------------------------------------------------------------- */
.aa-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; height:50px; padding:0 20px; border-radius:14px; border:none; background:var(--aa-surface-3); color:var(--aa-text); font-size:15px; font-weight:700; cursor:pointer; width:100%; transition:filter .12s, transform .06s; }
.aa-btn:active{ transform:scale(.985); filter:brightness(.96); }
.aa-btn-primary{ background:var(--aa-teal); color:var(--hearth-text-on-accent,#fff); box-shadow:0 2px 8px rgba(61,45,30,.22); }
.aa-btn-saffron{ background:var(--aa-saffron-soft); color:var(--aa-saffron); border:1px solid var(--aa-saffron); }
.aa-btn-ghost{ background:transparent; color:var(--aa-teal-press); font-weight:700; }
.aa-btn-danger{ background:var(--aa-danger-soft); color:var(--aa-danger); }
.aa-btn-light{ background:rgba(255,255,255,.12); color:#fff; }
.aa-btn-ok{ background:var(--aa-ok-soft); color:var(--aa-ok); border:1px solid var(--aa-ok); }
.aa-btn-sm{ height:40px; font-size:13.5px; border-radius:11px; }

/* ---- card ---------------------------------------------------------------- */
.aa-card{ background:var(--aa-surface); border:1px solid var(--aa-border); border-radius:18px; }
.aa-card-tap{ cursor:pointer; transition:transform .1s, box-shadow .12s, border-color .12s; }
.aa-card-tap:active{ transform:scale(.99); }
.aa-card-tap:hover{ border-color:var(--aa-border-strong); }

/* ---- chips/badges -------------------------------------------------------- */
.aa-badge{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 11px; border-radius:999px; font-size:11.5px; font-weight:700; }
.aa-b-ok{ background:var(--aa-ok-soft); color:#1f6740; } .aa-b-teal{ background:var(--aa-teal-soft); color:var(--aa-teal-press); }
.aa-b-saf{ background:var(--aa-saffron-soft); color:var(--aa-saffron-deep); } .aa-b-muted{ background:var(--aa-surface-3); color:var(--aa-text-2); }
.aa-b-danger{ background:var(--aa-danger-soft); color:var(--aa-danger); } .aa-b-warn{ background:var(--aa-warn-soft); color:var(--aa-warn); }
.aa-b-sky{ background:var(--aa-sky-soft); color:#2a7ba3; }
.aa-dot{ width:6px; height:6px; border-radius:99px; }

/* ---- list row ------------------------------------------------------------ */
.aa-row{ display:flex; align-items:center; gap:14px; padding:14px 16px; }
.aa-rowbtn{ cursor:pointer; transition:background .1s; }
.aa-rowbtn:active{ background:var(--aa-surface-2); }

/* ---- input --------------------------------------------------------------- */
.aa-input{ width:100%; height:52px; border-radius:13px; border:1.5px solid var(--aa-border-strong); background:var(--aa-surface); padding:0 15px; font-size:15px; font-family:var(--aa-sans); color:var(--aa-text); outline:none; transition:border-color .12s; }
.aa-input:focus{ border-color:var(--aa-teal); }
.aa-label{ font-size:12px; font-weight:600; color:var(--aa-text-2); margin-bottom:7px; display:block; }

/* ---- code styling -------------------------------------------------------- */
.aa-code{ font-family:var(--aa-mono); font-weight:600; letter-spacing:0.08em; font-variant-numeric:tabular-nums; }

/* ---- monogram ------------------------------------------------------------ */
.aa-mono-av{ display:flex; align-items:center; justify-content:center; border-radius:13px; font-weight:800; color:#fff; flex:none; font-family:var(--aa-sans); }

/* ---- segmented progress -------------------------------------------------- */
.aa-seg{ height:6px; border-radius:99px; background:var(--aa-surface-3); overflow:hidden; flex:1; }
.aa-seg > i{ display:block; height:100%; background:var(--aa-teal); border-radius:99px; transition:width .3s ease; }

/* ---- ring ---------------------------------------------------------------- */
.aa-ring{ border-radius:50%; display:flex; align-items:center; justify-content:center; }

/* ---- navy moment screens ------------------------------------------------- */
.aa-navy{ background:var(--aa-navy); color:var(--aa-navy-text); }
.aa-navy h1,.aa-navy h2,.aa-navy h3{ color:#fff; }
.aa-navy .aa-eyebrow{ color:var(--aa-navy-dim); }
.aa-grid-bg{ background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:22px 22px; }

/* ---- faux QR ------------------------------------------------------------- */
.aa-qr rect{ shape-rendering:crispEdges; }

/* ---- bottom tab bar ------------------------------------------------------ */
.aa-tabs{ display:flex; border-top:1px solid var(--aa-border); background:var(--aa-surface); padding:8px 0 6px; flex:none; }
.aa-tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; font-weight:600; color:var(--aa-text-3); border:none; background:none; cursor:pointer; position:relative; padding:2px 0; transition:color .12s; }
.aa-tab .ti{ position:relative; display:flex; align-items:center; justify-content:center; height:24px; }
.aa-tab.on{ color:var(--aa-teal-press); }
.aa-tab.locked{ color:var(--aa-text-3); }
.aa-tab .lock{ position:absolute; top:-3px; right:-9px; width:13px; height:13px; border-radius:50%; background:var(--aa-surface-3); border:1.5px solid var(--aa-surface); display:flex; align-items:center; justify-content:center; }
.aa-tab .cnt{ position:absolute; top:-4px; right:-10px; min-width:16px; height:16px; padding:0 4px; border-radius:99px; background:var(--aa-saffron); color:#fff; font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid var(--aa-surface); font-family:var(--aa-sans); }

/* ---- bottom sheets ------------------------------------------------------- */
.aa-sheet-host{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; background:rgba(28,24,20,.4); z-index:40; animation:aaScrim .2s ease; }
@keyframes aaScrim{ from{ background:rgba(28,24,20,0);} to{ background:rgba(28,24,20,.4);} }
.aa-sheet{ background:var(--aa-surface); border-radius:24px 24px 0 0; padding:10px 16px 22px; box-shadow:0 -12px 40px rgba(0,0,0,.2); animation:aaSheetUp .26s cubic-bezier(.22,1,.36,1); }
@keyframes aaSheetUp{ from{ transform:translateY(60px);} to{ transform:translateY(0);} }
.aa-grab{ width:42px; height:5px; border-radius:9px; background:var(--aa-border-strong); margin:6px auto 16px; }

/* ---- full overlay (moment) ----------------------------------------------- */
.aa-overlay{ position:absolute; inset:0; z-index:50; display:flex; flex-direction:column; }

/* ---- scanner viewfinder -------------------------------------------------- */
.aa-scan-corner{ position:absolute; width:30px; height:30px; }

/* ---- progress dots (onboarding) ------------------------------------------ */
.aa-dots{ display:flex; gap:6px; justify-content:center; }
.aa-dots i{ width:7px; height:7px; border-radius:99px; background:var(--aa-border-strong); }
.aa-dots i.on{ width:20px; background:var(--aa-teal); }

/* ---- stat / posture tiles ------------------------------------------------ */
.aa-tile{ background:var(--aa-surface); border:1px solid var(--aa-border); border-radius:16px; padding:14px; }

/* ---- entrance (transform-led; ends visible so exports/frozen iframes show content) */
.aa-fade{ animation:aaFade .34s ease both; }
@keyframes aaFade{ from{ opacity:.35; transform:translateY(7px);} to{ opacity:1; transform:none;} }
.aa-pop{ animation:aaPop .4s cubic-bezier(.22,1.2,.36,1) both; }
@keyframes aaPop{ from{ transform:scale(.78); opacity:.4;} to{ transform:scale(1); opacity:1;} }
@media (prefers-reduced-motion: reduce){ .aa-fade,.aa-pop,.aa-sheet,.aa-sheet-host,.aa-toast{ animation:none !important; } }

/* scan line keyframe */
@keyframes aaScanLine{ 0%{ top:14%;} 50%{ top:86%;} 100%{ top:14%;} }

/* ---- stage (the showcase backdrop) --------------------------------------- */
.vc-stage{ min-height:100vh; box-sizing:border-box; background:
   radial-gradient(1100px 700px at 78% -8%, #efe5d2 0%, transparent 55%),
   radial-gradient(900px 600px at 6% 108%, #ece2cf 0%, transparent 50%),
   #f3ead9;
   display:flex; flex-direction:column; align-items:center; padding:34px 30px 40px; }
.vc-stage-grid{ width:100%; max-width:1080px; display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center; }
.vc-stage-col{ min-width:0; max-width:460px; align-self:center; }
.vc-stage-col h1{ font-family:var(--aa-serif); font-weight:600; font-size:38px; letter-spacing:-0.02em; line-height:1.04; color:var(--aa-text); margin:16px 0 0; }
.vc-stage-col .lead p{ color:var(--aa-text-2); font-size:15px; line-height:1.6; margin:12px 0 0; }
.vc-brandrow{ display:flex; align-items:center; gap:11px; }
.vc-wordmark{ font-family:var(--aa-brand); font-weight:800; letter-spacing:-0.03em; font-size:21px; color:var(--aa-text); }
.vc-wordmark .c{ color:var(--aa-teal); }

/* tier / control panel on the stage */
.vc-panel{ background:rgba(255,253,248,.82); backdrop-filter:blur(6px); border:1px solid var(--aa-border); border-radius:18px; padding:16px 17px 15px; box-shadow:var(--aa-shadow-sm); margin-top:22px; }
.vc-panel .lbl{ font-family:var(--aa-mono); font-size:10px; text-transform:uppercase; letter-spacing:.15em; color:var(--aa-text-3); font-weight:600; }
.vc-seg-ctrl{ display:flex; background:var(--aa-surface-3); border-radius:11px; padding:3px; margin-top:9px; gap:3px; }
.vc-seg-ctrl button{ flex:1; border:none; background:transparent; font-family:var(--aa-sans); font-size:12px; font-weight:700; color:var(--aa-text-2); padding:7px 4px; border-radius:8px; cursor:pointer; transition:all .12s; white-space:nowrap; }
.vc-seg-ctrl button.on{ background:var(--aa-surface); color:var(--aa-teal-press); box-shadow:var(--aa-shadow-sm); }

.vc-stage-foot{ font-size:11.5px; color:var(--aa-text-3); line-height:1.7; border-top:1px solid var(--aa-border); padding-top:16px; margin-top:22px; }
.vc-stage-foot b{ color:var(--aa-text-2); }

@media (max-width:920px){
  .vc-stage-grid{ grid-template-columns:1fr; justify-items:center; gap:30px; }
  .vc-stage-col{ max-width:560px; order:2; }
  .vc-stage-col h1{ font-size:32px; }
}

/* phone shell wrapper */
.vc-phone-wrap{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.vc-phone{ position:relative; width:392px; height:822px; border-radius:46px; background:#0d0d0f; padding:9px; box-shadow:0 40px 90px rgba(40,30,16,.28), 0 8px 24px rgba(40,30,16,.18); flex:none; }
.vc-screen{ position:relative; width:100%; height:100%; border-radius:38px; overflow:hidden; background:var(--aa-bg); display:flex; flex-direction:column; }
.vc-punch{ position:absolute; left:50%; top:11px; transform:translateX(-50%); width:11px; height:11px; border-radius:50%; background:#000; z-index:60; box-shadow:0 0 0 3px #0d0d0f; }

/* android status bar */
.vc-status{ height:34px; display:flex; align-items:center; justify-content:space-between; padding:0 20px 0 22px; flex:none; font-size:13px; font-weight:600; letter-spacing:.01em; }
.vc-status.dark{ color:#fff; }
.vc-status .icons{ display:flex; align-items:center; gap:7px; }
/* android gesture pill */
.vc-navpill{ height:22px; display:flex; align-items:center; justify-content:center; flex:none; }
.vc-navpill i{ width:108px; height:4px; border-radius:2px; background:var(--aa-text); opacity:.32; }
.vc-status.dark + *, .vc-navpill.dark i{ }
.vc-navpill.dark i{ background:#fff; opacity:.45; }

/* generic flow templates */
.aa-feature-ic{ display:flex; align-items:center; justify-content:center; border-radius:20px; flex:none; }
.aa-kv{ display:flex; justify-content:space-between; gap:14px; padding:7px 0; }
.aa-kv .k{ font-size:12.5px; color:var(--aa-text-3); }
.aa-kv .v{ font-family:var(--aa-mono); font-size:12.5px; font-weight:600; color:var(--aa-text); text-align:right; }
.aa-navy .aa-kv .k{ color:var(--aa-navy-dim); } .aa-navy .aa-kv .v{ color:#fff; }

/* journeys catalog */
.vc-jgroup-title{ display:flex; align-items:center; gap:9px; font-family:var(--aa-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--aa-text-3); font-weight:600; margin:18px 2px 10px; }
.vc-jgroup-title .n{ background:var(--aa-surface-3); border-radius:99px; padding:1px 8px; font-size:10px; color:var(--aa-text-2); }
.vc-jgroup-title .rule{ flex:1; height:1px; background:var(--aa-border); }
.vc-jcard{ display:flex; align-items:flex-start; gap:11px; background:var(--aa-surface); border:1px solid var(--aa-border); border-radius:14px; padding:13px 14px; cursor:pointer; transition:transform .1s, box-shadow .12s, border-color .12s; margin-bottom:9px; }
.vc-jcard:active{ transform:scale(.99); }
.vc-jcard:hover{ box-shadow:var(--aa-shadow-sm); border-color:var(--aa-border-strong); }
.vc-jcard .jdot{ width:9px; height:9px; border-radius:99px; margin-top:4px; flex:none; }
.vc-jcard .jname{ font-size:13.5px; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
.vc-jcard .jsub{ font-size:11.5px; color:var(--aa-text-3); line-height:1.4; margin-top:2px; }

/* toast */
.aa-toast{ position:absolute; left:16px; right:16px; bottom:84px; background:var(--aa-navy); color:#fff; border-radius:14px; padding:13px 16px; display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:600; box-shadow:var(--aa-shadow-lg); z-index:70; animation:aaToast .3s cubic-bezier(.22,1,.36,1) both; }
@keyframes aaToast{ from{ transform:translateY(16px); opacity:0;} to{ transform:translateY(0); opacity:1;} }