/* ============================================================================
   EventLake · MFA Authenticator — production app styling
   Hearth, applied to the MFA surfaces (light): Newsreader / Hanken Grotesk /
   JetBrains Mono, Syne wordmark, warm paper surfaces, ink actions (clay means
   failure only — P2A, 2026-10-04aa), the severity ramp for state.
   (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 login-wall.js is NOT touched: that one is a
     documented anti-phishing affordance for the privileged operator door. */

  --aa-bg:var(--hearth-canvas,#FAF8F4);
  --aa-surface:var(--hearth-surface,#FFFFFF);
  --aa-surface-2:var(--hearth-sunken,#F1EEE8);
  --aa-surface-3:var(--hearth-border-subtle,#ECEAE6);
  --aa-border:var(--hearth-border,#E7E3DB);
  --aa-border-soft:var(--hearth-border-subtle,#ECEAE6);
  --aa-border-strong:var(--hearth-border-strong,#DAD8D4);

  --aa-text:var(--hearth-text,#191713);
  --aa-text-1:var(--hearth-text,#191713);      /* was consumed but never declared */
  --aa-text-2:var(--hearth-text-secondary,#5A554D);
  --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:#101114; --aa-navy-2:#191A1E; --aa-navy-3:#23242A;
  --aa-navy-text:#F5F5F3; --aa-navy-dim:#A9AAAF;

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

  /* 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,"Newsreader",Georgia,serif);
  --aa-sans:var(--font-sans,"Hanken Grotesk",system-ui,sans-serif);
  --aa-mono:var(--font-mono,"JetBrains Mono",monospace);
  --aa-brand:var(--font-wordmark,"Syne","Hanken Grotesk",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; }
/* Display serif at --font-display-weight (Newsreader is drawn at 400 under P2A, hearth-tokens.css);
   a hard 600 made every heading in this kit read heavy and slab-like. */
.aa-serif{ font-family:var(--aa-serif); font-weight:var(--font-display-weight, 400); letter-spacing:-0.015em; line-height:1.12; }
.aa-mono{ font-family:var(--aa-mono); font-variant-numeric:tabular-nums; }
.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:var(--font-display-weight, 400); 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:#fefdfb; 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; padding-top:max(12px, env(safe-area-inset-top, 0px)); padding-left:max(18px, env(safe-area-inset-left, 0px)); padding-right:max(18px, env(safe-area-inset-right, 0px)); }
.aa-topbar .t{ font-family:var(--aa-serif); font-size:21px; font-weight:var(--font-display-weight, 400); 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 var(--duration-fast, 120ms), background var(--duration-fast, 120ms); }
.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 var(--duration-fast, 120ms), transform calc(var(--duration-fast, 120ms) * .5); }
.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 var(--duration-fast, 120ms), box-shadow var(--duration-fast, 120ms), border-color var(--duration-fast, 120ms); }
.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:12px; font-weight:700; }
.aa-b-ok{ background:var(--aa-ok-soft); color:var(--status-healthy-fg); } .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:var(--status-info-fg); }
.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 var(--duration-fast, 120ms); }
.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 var(--duration-fast, 120ms); }
.aa-input:focus{ border-color:var(--aa-teal); }
/* outline:none above removes the UA ring; a border-colour shift alone is not a visible-enough focus
   indicator (WCAG 2.4.7/2.4.11), so keyboard focus gets the Hearth ring token. */
.aa-input:focus-visible{ box-shadow:var(--focus-ring, 0 0 0 3px #27506B); }
.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 var(--duration-slow, 320ms) 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; padding-bottom:max(6px, env(safe-area-inset-bottom, 0px)); padding-left:env(safe-area-inset-left, 0px); padding-right:env(safe-area-inset-right, 0px); 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 var(--duration-fast, 120ms); }
.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; inset-inline-end:-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; inset-inline-end:-10px; min-width:16px; height:16px; padding:0 4px; border-radius:99px; background:var(--aa-saffron); color:#fff; font-size:10px; font-weight:800; font-variant-numeric:tabular-nums; 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 var(--duration-base, 200ms) 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 var(--duration-base, 200ms) 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 var(--duration-slow, 320ms) ease both; }
@keyframes aaFade{ from{ opacity:.35; transform:translateY(7px);} to{ opacity:1; transform:none;} }
.aa-pop{ animation:aaPop var(--duration-slower, 480ms) cubic-bezier(.22,1.2,.36,1) both; }
@keyframes aaPop{ from{ transform:scale(.78); opacity:.4;} to{ transform:scale(1); opacity:1;} }
/* .aa-loop marks an element whose INLINE style loops forever (a waiting pulse, a scan line): an inline
   style outranks a class rule, so the reduce switch-off must be !important to reach it. Guarded by
   ui_kits/audits/motion-audit.py rule ② d. */
@media (prefers-reduced-motion: reduce){ .aa-fade,.aa-pop,.aa-sheet,.aa-sheet-host,.aa-toast,.aa-loop{ animation:none !important; } }
/* .aa-tick marks a TIME-LOCKED inline transition (a countdown bar, a TOTP ring) whose literal duration
   tracks a real 1 s clock tick, so it is deliberately NOT a --duration-* token (a token would drift from
   the clock). Reduce-motion users get the value stepping instead of sliding; !important to reach the
   inline style. */
@media (prefers-reduced-motion: reduce){ .aa-tick{ transition:none !important; } }
/* .aa-arrive — the motion verb `arrive` (motion-graphics-scope §5.2, 2026-09-30ma) on an approval request the
   LAST POLL did not carry (vc-app.jsx diffs by request id; the first poll only takes the baseline). It rises
   --motion-rise and fades in over --duration-base, and a clay ink decays over --duration-slower × 3; several at
   once step --motion-stagger apart (--i, capped at --motion-stagger-cap by the caller). Like .aa-fade it starts
   at .35, not 0, so a frozen first frame is never blank. Reduced motion: the ink only, still — it clears when
   the next poll (2.5 s) drops the class, since the net zeroes every duration a decay could run on. */
@keyframes aaArrive{ from{ opacity:.35; transform:translateY(var(--motion-rise, 8px)); } }
@keyframes aaInk{ from{ background-color:var(--aa-teal-soft); } }
@media (prefers-reduced-motion: no-preference){
  .aa-arrive{ animation:aaArrive var(--duration-base) var(--ease-standard) calc(var(--motion-stagger) * var(--i, 0)) backwards,
    aaInk calc(var(--duration-slower) * 3) var(--ease-standard) calc(var(--motion-stagger) * var(--i, 0)) backwards; }
}
@media (prefers-reduced-motion: reduce){ .aa-arrive{ background-color:var(--aa-teal-soft) !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%, #eae6dd 0%, transparent 55%),
   radial-gradient(900px 600px at 6% 108%, #e7e3da 0%, transparent 50%),
   #eeebe3;
   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:var(--font-display-weight, 400); 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:background var(--duration-fast, 120ms), color var(--duration-fast, 120ms), box-shadow var(--duration-fast, 120ms); 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; }
/* W9 (tech-stack triage, 2026-10-18d): ON A REAL PHONE THE BEZEL GOES. A 392×822 showcase frame on a 360–430 px
   screen overflowed sideways and drew a phone inside a phone. At ≤440 px the frame is the viewport: no
   radius, no shadow, no black padding, no painted punch-hole, status bar or gesture pill (the device has its
   own), and the app fills the width and one dynamic viewport of height — a FIXED 100dvh, not a min-height,
   because the screens scroll INSIDE (.aa-scroll) with the tab bar pinned to the bottom, which needs a bounded
   box. The showcase notes (.vc-stage-col) still follow below the app. */
@media (max-width: 600px), (max-height: 520px) and (orientation: landscape), (hover: none) and (pointer: coarse) {
  .stage, .wrap { padding: 0 !important; }
  .phone {
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  .osbar, .sbar, .gesture, .home-ind { display: none !important; }
  .vc-stage{ padding:0 0 32px; }
  .vc-stage-grid{ gap:24px; }
  .vc-stage-col{ padding:0 16px; box-sizing:border-box; width:100%; }
  .vc-brandrow{ flex-wrap:wrap; }   /* the nowrap wordmark + "Subject app" pill ran 66 px past a 375 px screen */
  .vc-phone-wrap{ width:100%; }
  .vc-phone-wrap > :not(.vc-phone){ padding:0 16px; box-sizing:border-box; }
  .vc-phone{ width:100% !important; max-width:none !important; height:100vh !important; height:100dvh !important; min-height:100dvh; border-radius:0 !important; padding:0 !important; box-shadow:none !important; border:0 !important; background:var(--aa-bg); }
  .vc-screen{ border-radius:0 !important; }
  /* scoped under .vc-phone: the base .vc-status/.vc-navpill rules come LATER in this file and would win a tie */
  .vc-phone .vc-punch, .vc-phone .vc-status, .vc-phone .vc-navpill{ display:none !important; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .aa-topbar { padding-top: max(6px, env(safe-area-inset-top, 0px)); padding-bottom: 6px; }
  .aa-pad { padding: 10px 16px; }
  .aa-tabs { padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom, 0px)); }
  .aa-tab .ti { height: 18px; }
  .aa-btn { height: 40px; }
}
@media (pointer: coarse) {
  .aa-tab, .aa-iconbtn, .aa-btn { min-height: 44px; min-width: 44px; touch-action: manipulation; }
}

/* android status bar */
.vc-status{ height:34px; display:flex; align-items:center; justify-content:space-between; padding-block:0; padding-inline:22px 20px; 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; font-variant-numeric:tabular-nums; color:var(--aa-text); text-align:end; }
.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 var(--duration-fast, 120ms), box-shadow var(--duration-fast, 120ms), border-color var(--duration-fast, 120ms); 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; inset-inline-start:16px; inset-inline-end: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 var(--duration-slow, 320ms) cubic-bezier(.22,1,.36,1) both; }
@keyframes aaToast{ from{ transform:translateY(16px); opacity:0;} to{ transform:translateY(0); opacity:1;} }