/* ============================================================================
   EventLake · Customer Console — shell layout (rail + adaptive body + embed host)
   Builds on mfa.css tokens. Scoped under .cs.
   ============================================================================ */
.cs, .cs *{ box-sizing:border-box; }
.cs, .cs-app{ height:100vh; height:100dvh; display:grid; grid-template-columns:86px 1fr; background:var(--aa-bg); color:var(--aa-text); font-family:var(--aa-sans); overflow:hidden; }
/* ⭐ TOP TABS (2026-10-06a) — the Tenant Console's chrome (tenant.css .tn-head/.tn-tabs), so the
   customer line has ONE layout rather than a rail here and tabs there. Rows: header with the
   module tabs, the module's section row, then the body (screen list + content). */
.cs.cs--top{ display:flex; flex-direction:column; }
.cs-head{ flex:none; display:flex; align-items:center; gap:14px; padding-block:max(10px, env(safe-area-inset-top, 0px)) 10px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); background:var(--aa-surface); border-bottom:1px solid var(--aa-border); min-width:0; }
.cs--top .cs-brand{ flex-direction:row; gap:8px; margin:0; flex:none; }
.cs--top .cs-brand__wm{ font-family:var(--aa-serif); font-size:15px; font-weight:var(--font-display-weight, 400); letter-spacing:0; color:var(--aa-text-1); line-height:1; }
.cs-tabs{ display:flex; gap:2px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.cs-tabs::-webkit-scrollbar{ display:none; }
.cs-tab{ border:0; background:transparent; cursor:pointer; color:var(--aa-text-2); font:500 13px/1 var(--aa-sans);
  padding:9px 13px; border-radius:8px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; flex:none; }
.cs-tab:hover{ background:var(--aa-surface-2); }
.cs-tab[aria-current="page"]{ background:var(--aa-teal-soft); color:var(--aa-teal-press); font-weight:700; }
.cs-tab.locked{ color:var(--aa-text-3); }
.cs-tab:focus-visible, .cs-svctab:focus-visible, .cs-av:focus-visible{ outline:2px solid var(--aa-teal); outline-offset:2px; }
.cs-av{ width:32px; height:32px; border-radius:999px; border:0; flex:none; cursor:pointer; background:var(--aa-navy); color:#fff; font:700 11px/1 var(--aa-mono); }
.cs--top .cs-top{ height:auto; min-height:46px; padding:6px 20px; gap:4px; overflow-x:auto; scrollbar-width:none; }
.cs--top .cs-top::-webkit-scrollbar{ display:none; }
.cs-svctab{ border:1px solid transparent; background:transparent; cursor:pointer; color:var(--aa-text-2); font:600 12.5px/1 var(--aa-sans);
  padding:7px 11px; border-radius:99px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; flex:none; }
.cs-svctab:hover{ background:var(--aa-surface-2); }
.cs-svctab.on{ border-color:var(--aa-border-strong); background:var(--aa-surface); color:var(--aa-text-1); }
.cs-svctab.locked{ color:var(--aa-text-3); }
.cs--top .cs-body{ min-height:0; }
.cs-sublist{ display:flex; flex-direction:column; gap:2px; }
.cs ::-webkit-scrollbar{ width:10px; height:10px; }
.cs ::-webkit-scrollbar-thumb{ background:var(--aa-border-strong); border-radius:99px; border:3px solid var(--aa-bg); }

/* ---- service rail -------------------------------------------------------- */
.cs-rail, .cs-side{ background:var(--aa-navy); display:flex; flex-direction:column; align-items:center; padding-block:max(14px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-bottom, 0px)); padding-inline:env(safe-area-inset-left, 0px) 0; gap:3px; overflow:auto; }
.cs-rail:dir(rtl), .cs-side:dir(rtl){ padding-inline-start:env(safe-area-inset-right, 0px); }   /* RTL: the start-docked rail sits on the RIGHT edge (2026-10-31x) */
.cs-rail::-webkit-scrollbar{ width:0; }
.cs-rail .mk{ margin-bottom:12px; }
/* the product lockup at the head of the rail: the committed EventLake icon plus
   the name, sized to the rail's own 10px label scale so it reads as chrome rather
   than as another nav item */
.cs-brand{ display:flex; flex-direction:column; align-items:center; gap:5px; margin-bottom:12px; }
.cs-brand__wm{ font-size:10px; font-weight:800; line-height:1.12; letter-spacing:.06em;
  text-transform:uppercase; text-align:center; color:#cfe0ec; }
.cs-railbtn{ width:68px; padding:9px 0 8px; border:none; background:transparent; border-radius:14px; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; color:#a8bccd; position:relative; transition:background var(--duration-fast, 120ms), color var(--duration-fast, 120ms); }
.cs-railbtn .l{ font-size:10px; font-weight:700; letter-spacing:.02em; }
.cs-railbtn:hover{ background:rgba(255,255,255,.07); color:#fff; }
.cs-railbtn.on{ color:#fff; }
.cs-railbtn.on::before{ content:""; position:absolute; inset-inline-start:-9px; top:50%; transform:translateY(-50%); width:4px; height:26px; border-start-start-radius:0; border-start-end-radius:4px; border-end-end-radius:4px; border-end-start-radius:0; background:var(--ac,#7fd3c4); }
.cs-railbtn .ic{ width:40px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; transition:background var(--duration-fast, 120ms); }
.cs-railbtn.on .ic{ background:rgba(255,255,255,.12); }
.cs-railbtn.locked{ opacity:.6; }
.cs-railbtn .lock{ position:absolute; top:5px; inset-inline-end:13px; width:14px; height:14px; border-radius:50%; background:var(--aa-navy-2); display:flex; align-items:center; justify-content:center; border:1.5px solid var(--aa-navy); }
.cs-rail .sep{ width:34px; height:1px; background:rgba(255,255,255,.1); margin:7px 0; flex:none; }
.cs-rail .grow{ flex:1; }

/* ---- main column --------------------------------------------------------- */
.cs-main{ display:flex; flex-direction:column; min-width:0; height:100vh; height:100dvh; }
.cs-top{ height:56px; flex:none; border-bottom:1px solid var(--aa-border); background:rgba(255,253,248,.9); backdrop-filter:blur(10px); display:flex; align-items:center; gap:13px; padding-block:env(safe-area-inset-top, 0px) 0; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); z-index:10; }
.cs-svcchip{ display:flex; align-items:center; gap:9px; padding-block:5px; padding-inline:8px 12px; border-radius:99px; border:1px solid var(--aa-border); background:var(--aa-surface); }
.cs-svcchip .d{ width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#fff; flex:none; }
.cs-body{ flex:1; min-height:0; display:flex; }

/* ---- secondary nav (native services) ------------------------------------ */
.cs-sub{ width:236px; flex:none; border-inline-end:1px solid var(--aa-border); background:var(--aa-surface); overflow:auto; padding:16px 12px max(16px, env(safe-area-inset-bottom, 0px)); transition:width var(--duration-fast, 120ms); }
.cs-sub .gl{ font-family:var(--aa-mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--aa-text-3); font-weight:600; padding:0 10px 9px; }
.cs-sub__toggle{ width:24px; height:24px; border-radius:6px; border:1px solid transparent; background:transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.cs-sub__toggle:hover{ background:var(--aa-surface-2); border-color:var(--aa-border); }
.cs-sub.is-collapsed{ width:56px; padding:14px 8px; }
.cs-sub.is-collapsed .cs-sub__title,
.cs-sub.is-collapsed .cs-subbtn__lbl{ display:none; }
.cs-sub.is-collapsed .cs-subgrp{ display:none; }
.cs-subgrp{ font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--aa-text-3); padding:10px 10px 3px; }
.cs-subgrp:first-child{ padding-block-start:2px; }
.cs-sub.is-collapsed .gl{ justify-content:center; padding:0 0 9px; }
.cs-sub.is-collapsed .cs-subbtn{ justify-content:center; padding:9px 0; }
.cs-subbtn{ display:flex; align-items:center; gap:11px; padding:8px 10px; border:none; border-radius:10px; cursor:pointer; text-align:start; width:100%; background:transparent; color:var(--aa-text-2); font-weight:500; font-size:13.5px; font-family:var(--aa-sans); transition:background var(--duration-fast, 120ms), color var(--duration-fast, 120ms); }
.cs-subbtn:hover{ background:var(--aa-surface-2); }
.cs-subbtn.on{ background:var(--aa-teal-soft); color:var(--aa-teal-press); font-weight:700; }

.cs-content{ flex:1; min-width:0; overflow:auto; }
.cs-page{ max-width:1340px; margin:0 auto; width:100%; padding:26px 28px 56px; }

/* ---- embed host ---------------------------------------------------------- */
.cs-embed{ flex:1; min-width:0; display:flex; flex-direction:column; }
.cs-embedbar{ height:42px; flex:none; border-bottom:1px solid var(--aa-border); background:var(--aa-surface-2); display:flex; align-items:center; gap:11px; padding:0 16px; }
.cs-embedbar .nm{ font-size:12.5px; font-weight:700; white-space:nowrap; }
.cs-embedbar .sub{ font-size:11.5px; color:var(--aa-text-3); }
.cs-iframe{ flex:1; width:100%; border:none; display:block; background:#fff; }

/* ---- home + licensing ---------------------------------------------------- */
.cs-fade{ animation:vpFade var(--duration-slow, 320ms) ease both; }
.cs-svccard{ background:var(--aa-surface); border:1px solid var(--aa-border); border-radius:18px; padding:20px; cursor:pointer; transition:transform var(--duration-fast, 120ms), box-shadow var(--duration-fast, 120ms), border-color var(--duration-fast, 120ms); position:relative; overflow:hidden; }
.cs-svccard:hover{ box-shadow:var(--aa-shadow-md); border-color:var(--aa-border-strong); transform:translateY(-2px); }
.cs-svccard:focus-visible{ outline:2px solid var(--aa-teal); outline-offset:2px; } /* B6-D3 */
.cs-svccard.locked{ cursor:default; opacity:.92; }
.cs-svccard.locked:hover{ transform:none; box-shadow:var(--aa-shadow-sm); }
.cs-licrow{ display:flex; align-items:center; gap:16px; padding:18px 20px; border-bottom:1px solid var(--aa-border); }
.cs-licrow:last-child{ border-bottom:none; }

/* ============================================================================
   D25 · Hearth Modernity Program — ported into the Console (M1 theme/density,
   M2 micro-interactions, M4 command palette, M7 responsive, M8 View Transitions).
   Token-driven: everything below the dark palette references --aa-* so dark
   coverage follows the tokens. All entrance motion is gated on
   prefers-reduced-motion:no-preference, so reduced-motion / frozen-iframe / export
   contexts see the base (visible) state — never blank.
   ============================================================================ */

/* ---- M1 · dark theme ------------------------------------------------------
   This used to restate the whole --aa-* palette in navy. It no longer needs to:
   mfa.css resolves every --aa-* from a --hearth-* token, and hearth-tokens.css
   carries its own [data-theme="dark"] block, so the warm-espresso dark theme
   now flows through automatically and cannot drift from the rest of the estate.

   Only the fixed dark CHROME needs a dark-mode nudge: --aa-navy equals Hearth's
   dark canvas in light mode, so on an already-dark canvas the rail would vanish.
   Dropping it to the sunken value keeps the rail readable as a distinct plane. */
[data-theme="dark"]{
  --aa-navy:#0B0C0E; --aa-navy-2:#191A1E; --aa-navy-3:#23242A;
  --aa-navy-text:#F5F5F3; --aa-navy-dim:#A9AAAF;
}
/* the shell's one hardcoded light surface — the sticky top bar (console-app inlines
   rgba(255,253,248,.9)); re-token it under dark via the CSS override here */
[data-theme="dark"] .cs-top{ background:color-mix(in srgb, var(--aa-surface) 88%, transparent) !important; }
[data-theme="dark"] .cs-iframe{ background:var(--aa-bg); }
[data-theme="dark"] .cs-railbtn:hover{ background:rgba(255,255,255,.06); }

/* ---- M1 · density -------------------------------------------------------- */
:root{ --cs-pad:26px 28px 56px;
  /* the kit's spring IS the canon Hearth spring (folded 2026-10-01as) — a physical 3.8 % overshoot with one small
     ring, from hearth-tokens.json motion.spring. The fallback is the kit's former no-overshoot ease-out, for any
     page that loads this sheet without hearth-tokens.css (clm-journeys, the other borrower, has linked the tokens
     since 2026-09-30f, so it gets the canon too — measured in the browser 2026-10-01as). */
  --aa-spring:var(--ease-spring, cubic-bezier(.2,.85,.25,1)); }
[data-density="compact"]{ --cs-pad:16px 20px 40px; }
.cs-page{ padding:var(--cs-pad); }

/* ---- M2 · tactile micro-interactions ------------------------------------- */
.cs-railbtn{ transition:background var(--duration-fast, 120ms) var(--aa-spring), color var(--duration-fast, 120ms), transform var(--duration-fast, 120ms) var(--aa-spring); }
.cs-railbtn:active{ transform:scale(.94); }
.cs-subbtn{ transition:background var(--duration-fast, 120ms), color var(--duration-fast, 120ms), transform var(--duration-instant, 80ms) var(--aa-spring); }
.cs-subbtn:active{ transform:translateX(1px); }
.cs-tbtn:active, .cs-hamb:active{ transform:scale(.92); }
@media (prefers-reduced-motion: no-preference){
  .cs-content > * { animation:csIn var(--duration-slow, 320ms) var(--aa-spring) both; }
}
@keyframes csIn{ from{ opacity:0; transform:translateY(var(--motion-rise, 8px)); } to{ opacity:1; transform:none; } }

/* ---- M8 · native View Transitions (route crossfade) ---------------------- */
/* engaged only when html.cs-vt is set (JS: API present + motion allowed); the
   per-child csIn fade is suppressed under cs-vt so they don't double up. */
@media (prefers-reduced-motion: no-preference){
  html.cs-vt .cs-content{ view-transition-name:cs-screen; }
  html.cs-vt .cs-content > *{ animation:none; }
  ::view-transition-old(cs-screen){ animation:csVtOut var(--duration-fast, 120ms) var(--ease-exit, cubic-bezier(.3,0,1,1)) both; }
  ::view-transition-new(cs-screen){ animation:csVtIn var(--duration-base, 200ms) var(--aa-spring) both; }
}
@keyframes csVtOut{ to{ opacity:0; } }
@keyframes csVtIn{ from{ opacity:0; transform:translateY(var(--motion-rise, 8px)); } to{ opacity:1; transform:none; } }

/* ---- M7 · responsive shell (rail → off-canvas drawer) + container infra --- */
.cs-content{ container-type:inline-size; container-name:csview; }
@container csview (max-width: 860px){
  .cs-content [style*="grid-template-columns"]{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
}
@container csview (max-width: 560px){
  .cs-content [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
}
.cs-scrim{ position:fixed; inset:0; z-index:40; background:rgba(8,12,18,.5);
  opacity:0; pointer-events:none; transition:opacity var(--duration-base, 200ms); }
.cs.nav-open .cs-scrim{ opacity:1; pointer-events:auto; }
.cs-hamb{ display:none; width:34px; height:34px; border-radius:9px; border:1px solid var(--aa-border);
  background:var(--aa-surface); color:var(--aa-text-2); cursor:pointer; align-items:center; justify-content:center; flex:none; }
@media (max-width:860px){
  .cs{ grid-template-columns:1fr; }
  .cs-rail{ position:fixed; inset-inline-start:0; top:0; bottom:0; z-index:50; transform:translateX(-100%);
    transition:transform var(--duration-base, 200ms) var(--ease-standard, cubic-bezier(.2,0,0,1)); box-shadow:var(--aa-shadow-lg); }
  /* ↑ NOT the spring: the drawer is anchored to the viewport's left edge, so a 3.8 % overshoot would pull it off
     that edge and show a sliver of page behind it. Springs are for things that float free, not edge-docked panels. */
  .cs-rail:dir(rtl){ transform:translateX(100%); }   /* RTL: inline-start is the RIGHT edge, so the closed drawer hides off it (W11) */
  .cs.nav-open .cs-rail{ transform:none; }
  .cs-hamb{ display:flex; }
  .cs-sub{ width:196px; }
}
@media (max-width:560px){
  .cs-sub{ display:none; }            /* sub-nav collapses; sections reachable via the palette + Home */
  /* the top-tab shell keeps its screen list, as a scrolling row under the section row */
  .cs--top .cs-body{ flex-direction:column; }
  .cs--top .cs-sub{ display:block; width:auto; border-inline-end:0; border-bottom:1px solid var(--aa-border); padding:6px 12px; overflow-x:auto; flex:none; }
  .cs--top .cs-sub .gl{ display:none; }
  .cs--top .cs-sublist{ flex-direction:row; }
  .cs--top .cs-subbtn{ width:auto; white-space:nowrap; flex:none; }
  .cs-head{ padding:8px 12px; gap:9px; flex-wrap:wrap; }
  .cs--top .cs-tabs{ order:9; flex-basis:100%; }   /* the module tabs take their own scrolling row */
  .cs-brand__wm, .cs-brand__sep, .cs--top .cs-brand__wm{ display:none; }
  .cs--top .cs-cmdk{ display:none; }
  .cs-top{ padding:0 12px; gap:9px; }
}
@media (pointer: coarse){
  .cs-mob-toggle, .cs-hamb, .cs-tab, .cs-svctab, .cs-tbtn{ min-height:44px; min-width:44px; touch-action:manipulation; }
}
@media (prefers-reduced-motion: reduce){ .cs-rail, .cs-scrim{ transition:none; } }

/* ---- M1/M4 · top-bar theme toggle + command-bar buttons ------------------ */
.cs-tbtn{ width:30px; height:30px; border-radius:9px; border:1px solid var(--aa-border); background:var(--aa-surface);
  color:var(--aa-text-2); cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none;
  transition:background var(--duration-fast, 120ms), transform var(--duration-fast, 120ms) var(--aa-spring); }
.cs-tbtn:hover{ background:var(--aa-surface-2); }
.cs-cmdk{ display:flex; align-items:center; gap:7px; height:30px; padding:0 10px; border-radius:9px;
  border:1px solid var(--aa-border); background:var(--aa-surface); color:var(--aa-text-3); cursor:pointer;
  font:inherit; font-size:12.5px; font-family:var(--aa-sans); transition:background var(--duration-fast, 120ms), border-color var(--duration-fast, 120ms); }
.cs-cmdk:hover{ background:var(--aa-surface-2); border-color:var(--aa-border-strong); }
.cs-cmdk .k{ unicode-bidi:isolate; direction:ltr; /* a key label reads ltr in any page (W11) */ font-family:var(--aa-mono); font-size:10px; background:var(--aa-surface-3); border-radius:4px; padding:1px 5px; color:var(--aa-text-2); }

/* ---- M4 · command palette + shortcut help -------------------------------- */
.cm-pal{ position:fixed; inset:0; z-index:400; display:flex; justify-content:center; align-items:flex-start;
  padding-top:13vh; background:rgba(8,12,18,.45); backdrop-filter:blur(3px); }
.cm-pal[hidden]{ display:none; }
/* As native <dialog>s (HearthOverlay, modernization audit 2026-10-16): the element IS the full-screen scrim,
   so the UA dialog box styles are reset, and the closed state is restated because .cm-pal's display:flex
   would otherwise beat the UA's dialog:not([open]){display:none}. */
dialog.cm-pal, dialog.cm-help{ width:100%; height:100%; max-width:none; max-height:none; margin:0; border:0; color:inherit; }
dialog.cm-pal{ padding:13vh 0 0; }
dialog.cm-pal:not([open]), dialog.cm-help:not([open]){ display:none; }
dialog.cm-pal::backdrop, dialog.cm-help::backdrop{ background:transparent; }
.cm-box{ width:min(620px,calc(100vw - 36px)); background:var(--aa-surface); border:1px solid var(--aa-border-strong);
  border-radius:16px; box-shadow:var(--aa-shadow-lg); overflow:hidden; display:flex; flex-direction:column; max-height:62vh; }
@media (prefers-reduced-motion: no-preference){ .cm-box{ animation:csVtIn var(--duration-base, 200ms) var(--aa-spring) both; } }
.cm-in{ display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--aa-border-soft); }
.cm-in input{ flex:1; border:0; background:transparent; outline:none; font:inherit; font-size:15px; color:var(--aa-text); font-family:var(--aa-sans); }
.cm-in input::placeholder{ color:var(--aa-text-3); }
.cm-list{ overflow-y:auto; padding:7px; display:flex; flex-direction:column; gap:2px; }
.cm-sec{ font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--aa-text-3); padding:9px 9px 4px; }
.cm-it{ display:flex; align-items:center; gap:11px; padding:9px 10px; border:0; background:transparent; width:100%;
  text-align:start; border-radius:9px; cursor:pointer; color:var(--aa-text-2); font:inherit; font-family:var(--aa-sans); }
.cm-it .ico{ width:26px; height:26px; border-radius:7px; display:grid; place-items:center; background:var(--aa-surface-3); color:var(--aa-teal); flex:none; font-size:13px; font-weight:800; }
.cm-it .tx{ flex:1; min-width:0; }
.cm-it .tx b{ font-size:13.5px; font-weight:700; color:var(--aa-text); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-it .tx .s{ font-size:11.5px; color:var(--aa-text-3); }
.cm-it .kind{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--aa-text-3); flex:none; }
.cm-it.cur, .cm-it:hover{ background:var(--aa-teal-soft); color:var(--aa-teal-press); }
.cm-it.cur .tx b{ color:var(--aa-teal-press); }
.cm-none{ padding:22px; text-align:center; color:var(--aa-text-3); font-size:13px; }
.cm-ft{ display:flex; gap:16px; padding:8px 16px; border-top:1px solid var(--aa-border-soft); font-size:11px; color:var(--aa-text-3); }
.cm-kbd{ font-family:var(--aa-mono); font-size:10.5px; background:var(--aa-surface-3); border:1px solid var(--aa-border);
  border-bottom-width:2px; border-radius:5px; padding:1px 6px; color:var(--aa-text-2); }
.cm-help{ position:fixed; inset:0; z-index:410; display:grid; place-items:center; padding:18px; background:rgba(8,12,18,.45); backdrop-filter:blur(3px); }
.cm-help[hidden]{ display:none; }
.cm-help .b{ width:min(460px,100%); background:var(--aa-surface); border:1px solid var(--aa-border-strong); border-radius:16px; box-shadow:var(--aa-shadow-lg); overflow:hidden; }
.cm-help .hd{ padding:14px 16px; border-bottom:1px solid var(--aa-border-soft); font-family:var(--aa-serif); font-weight:var(--font-display-weight, 400); font-size:15px; display:flex; align-items:center; }
.cm-help .hd .x{ margin-inline-start:auto; border:0; background:none; color:var(--aa-text-3); font-size:19px; cursor:pointer; line-height:1; }
.cm-help .row{ display:flex; align-items:center; gap:11px; padding:7px 16px; font-size:13px; color:var(--aa-text-2); }
.cm-help .row:last-child{ padding-bottom:14px; }

/* ---- ACADEMY (§13 row 57) --------------------------------------------------
   The customer-facing cut of the curriculum. Every value below is a token this
   console already defines: the four verdict tints come from `vp-b-*` in
   portal.css, so nothing here re-spells a status colour.
   ⛔ NO ENTRANCE ANIMATION. The visible state IS the base state (the never-blank
   rule) — a learner on reduced-motion, or a print-to-PDF of a lesson, must never
   meet an empty panel where the curriculum should be. */
.cs-ac-note{ margin:16px 0 4px; padding:11px 14px; border:1px dashed var(--aa-border-strong); border-radius:12px;
  font-size:12.5px; color:var(--aa-text-2); line-height:1.6; max-width:82ch; }
.cs-ac-tabs{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin:18px 0 14px; }
.cs-ac-tab{ font:inherit; font-family:var(--aa-sans); font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:999px;
  cursor:pointer; border:1px solid var(--aa-border); background:var(--aa-surface); color:var(--aa-text-2); }
.cs-ac-tab:hover{ background:var(--aa-surface-2); }
.cs-ac-tab.on{ background:var(--aa-teal-soft); color:var(--aa-teal-press); border-color:var(--aa-teal); }
.cs-ac-count{ margin-inline-start:auto; font-size:12px; color:var(--aa-text-3); font-weight:600; font-variant-numeric:tabular-nums; }

.cs-ac-row{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--aa-border-soft); }
.cs-ac-row:first-child{ border-top:0; }
.cs-ac-t{ font-size:14px; font-weight:700; line-height:1.35; }
.cs-ac-done{ font-size:11.5px; font-weight:600; color:var(--aa-ok); }
.cs-ac-do{ font-size:12.5px; color:var(--aa-text-3); line-height:1.55; margin-top:3px; max-width:82ch; }
.cs-ac-side{ flex:none; display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.cs-ac-detail{ margin:12px 0 2px; padding:14px 16px; border-radius:13px; background:var(--aa-surface-2);
  border:1px solid var(--aa-border); }

.cs-ac-fix{ padding:10px 13px; border-radius:10px; background:var(--aa-ok-soft); border:1px solid var(--aa-ok);
  font-size:12px; color:var(--status-healthy-fg); line-height:1.55; margin-bottom:12px; }
.cs-ac-ex{ border:1px solid var(--aa-border); border-radius:12px; overflow:hidden; background:var(--aa-surface); margin-bottom:10px; }
.cs-ac-ex__h{ display:flex; align-items:center; gap:9px; padding:8px 12px; background:var(--aa-surface-3); border-bottom:1px solid var(--aa-border-soft); }
.cs-ac-ex__b{ padding:11px 13px; }
.cs-ac-ex__b .t{ font-weight:700; font-size:13px; line-height:1.35; }
.cs-ac-ex__b .s{ font-size:11.5px; color:var(--aa-text-3); margin-top:5px; }
.cs-ac-ex__b .c{ margin-top:9px; padding:9px 11px; border-radius:9px; font-size:12px; line-height:1.5;
  background:var(--aa-surface-3); color:var(--aa-text-2); }
/* the ABSENT callout is dashed and untinted on purpose: "not measured" is not a
   status colour, and giving it one would file it beside allow/hold/deny. */
.cs-ac-ex__b .c.un{ background:transparent; border:1px dashed var(--aa-border-strong); color:var(--aa-text-3); }
.cs-ac-ex__b .d{ margin-top:9px; font-size:12px; color:var(--aa-text-3); line-height:1.6; }
.cs-ac-absent{ display:inline-block; font-family:var(--aa-mono); font-size:10.5px; font-weight:700; letter-spacing:.04em;
  padding:3px 9px; border-radius:7px; border:1px dashed var(--aa-border-strong); color:var(--aa-text-3); }

.cs-ac-pfrow{ display:flex; gap:11px; align-items:flex-end; flex-wrap:wrap; margin-bottom:4px; }
.cs-ac-pfrow label{ display:block; margin-bottom:5px; }
.cs-ac-kind{ padding:8px 11px; border:1px solid var(--aa-border-strong); border-radius:10px;
  background:var(--aa-surface-3); font-size:12.5px; }
.cs-ac-in{ font:inherit; font-size:12.5px; width:100%; box-sizing:border-box; padding:8px 11px; border-radius:10px;
  border:1px solid var(--aa-border-strong); background:var(--aa-surface); color:var(--aa-text); outline:none; }
.cs-ac-in:focus{ border-color:var(--aa-teal); }
.cs-ac-in:focus-visible{ box-shadow:var(--focus-ring, 0 0 0 3px #27506B); } /* outline:none above — the Hearth ring stands in for it */
.cs-ac-pfgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:11px; margin-top:13px; }
.cs-ac-pfc{ background:var(--aa-surface); border:1px solid var(--aa-border); border-radius:12px; padding:12px; }
.cs-ac-pfc.un{ border-style:dashed; }
.cs-ac-pfc .k{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--aa-text-3); font-weight:700; }
.cs-ac-pfc .v{ font-family:var(--aa-serif); font-size:25px; font-weight:var(--font-display-weight, 400); font-variant-numeric:tabular-nums; margin-top:4px; }
.cs-ac-pfc .b{ font-size:11.5px; color:var(--aa-text-3); line-height:1.5; margin-top:5px; }
.cs-ac-nothing{ margin-top:12px; padding:10px 13px; border-radius:10px; background:var(--aa-sky-soft);
  border:1px solid var(--status-info-fg); font-size:12px; color:var(--status-info-fg); line-height:1.6; }

/* ---- native modal sheet (X8, 2026-08-23) --------------------------------------------------
   CSConnect was a fixed scrim div at z-index 50 with a click handler for dismissal. As a
   <dialog> the browser owns modality — focus containment, an inert background, Escape and the
   ::backdrop dim — so the element only needs its UA box reset and the layout it always had. */
.cs-modal {
  border: 0; padding: 0; margin: auto; background: transparent;
  max-inline-size: none; max-block-size: none;
  overflow: visible;
}
.cs-modal::backdrop { background: rgba(20, 16, 12, .4); }
/* P4 polish (planet-scale UI audit 2026-10-18e): the sheet fades OUT rather than vanishing and its scrim
   fades in. Exits only — the open sheet is the base style (never-blank) — and none of it for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .cs-modal { transition: opacity var(--duration-fast, 140ms) ease-in, display var(--duration-fast, 140ms) allow-discrete, overlay var(--duration-fast, 140ms) allow-discrete; }
  .cs-modal:not([open]) { opacity: 0; }
  .cs-modal::backdrop { transition: opacity var(--duration-base, 200ms) ease-out, display var(--duration-base, 200ms) allow-discrete, overlay var(--duration-base, 200ms) allow-discrete; }
  .cs-modal:not([open])::backdrop { opacity: 0; }
  @starting-style { .cs-modal[open]::backdrop { opacity: 0; } }
}

/* ---- account popover (X8, 2026-08-23) -----------------------------------------------------
   Was a full-screen click-catcher at z-index 60 wrapping a panel pinned at left:90 / bottom:14 —
   two magic numbers that silently assumed the rail's exact width and padding. Now a real popover.
   BASE: a popover sits in the TOP LAYER and so has no positioning context; these offsets stand on
   their own for any browser with the Popover API but without anchor positioning.
   ENHANCED: anchored to the account button, spanning upward from it, flipping if it would leave
   the viewport. */
.cs-acctpop {
  position: fixed; inset: auto; inset-inline-start: 90px; bottom: 14px; width: 252px;
  margin: 0; padding: 14px; overflow: visible;
  background: var(--aa-surface); border: 1px solid var(--aa-border);
  border-radius: 14px; box-shadow: 0 18px 48px rgba(40, 30, 16, .22);
}
.cs--top ~ .cs-acctpop, .cs--top .cs-acctpop { inset-inline-start:auto; inset-inline-end:16px; bottom:auto; top:56px; }
@supports (anchor-name: --x) {
  .cs-acct-anchor { anchor-name: --cs-acct; }
  .cs--top .cs-acctpop { position-area: block-end span-inline-start; margin-block-start: 8px; margin-inline-start: 0; }
  .cs-acctpop {
    position-anchor: --cs-acct;
    /* the rail is inline-start, the account button at its foot: open to the RIGHT of the button
       and grow UPWARD from it. Logical keywords only — never mixed with physical ones. */
    position-area: inline-end span-block-start;
    position-try-fallbacks: flip-inline, flip-block;
    inset: auto; margin-inline-start: 8px;
  }
}

/* ===== 2026-10-06a — one Console: licence card, Organisation pages, step-up, account ===== */
.cs-h1{ font-family:var(--aa-serif); font-weight:var(--font-display-weight, 400); font-size:24px; letter-spacing:-.02em; margin:0; }
.cs-h1--xl{ font-size:28px; margin-top:6px; }
.cs-lead{ color:var(--aa-text-2); font-size:14px; line-height:1.55; margin:6px 0 0; max-width:680px; }
.cs-home__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.cs-cards{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.cs-cards--quiet .cs-svccard{ background:var(--aa-surface-2); padding:16px; }
.cs-svccard__mark{ width:44px; height:44px; border-radius:12px; background:var(--aa-surface-3); display:flex; align-items:center; justify-content:center; flex:none; }
.cs-grid4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width: 900px){ .cs-grid4{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.cs-invrow{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--aa-border-soft); font-size:13px; font-variant-numeric:tabular-nums; }
.cs-invrow--sub{ font-size:12.5px; color:var(--aa-text-3); border-bottom:0; padding:3px 0; }
.cs-invrow--total{ border-top:2px solid var(--aa-border); border-bottom:0; margin-top:6px; padding-top:12px; font-weight:700; align-items:baseline; }
.cs-invrow--total .vp-serif{ font-size:22px; font-weight:400; }

/* attention rows on Home — a sentence and a way to act on it, never a coloured badge alone */
.cs-attn{ display:flex; align-items:center; gap:10px; width:100%; text-align:start; margin:0 0 12px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--aa-border); background:var(--aa-surface); color:var(--aa-text-1); font:inherit; font-size:13.5px; cursor:pointer; }
.cs-attn span{ flex:1; }
.cs-attn:hover{ border-color:var(--aa-border-strong); }
.cs-attn:focus-visible{ outline:2px solid var(--aa-teal); outline-offset:2px; }
.cs-attn--warn{ border-color:var(--aa-warn); background:var(--aa-warn-soft, var(--aa-surface)); }

/* H9 · Getting started on Home (console-home.jsx GettingStarted) — each step's state is a WORD in a
   badge plus a numeral/tick, never colour alone; the next step carries the one primary button. */
.cs-gs{ margin:0 0 18px; }
.cs-gs__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cs-gs__title{ font-family:var(--aa-serif); font-weight:400; font-size:21px; letter-spacing:-.01em; margin:4px 0 0; }
.cs-gs__list{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:0; }
.cs-gs__step{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--aa-border-soft); }
.cs-gs__num{ flex:none; width:26px; height:26px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700; background:var(--aa-surface-3); color:var(--aa-text-2); font-variant-numeric:tabular-nums; }
.cs-gs__step--done .cs-gs__num{ background:var(--aa-ok-soft); color:var(--aa-text-1); }
.cs-gs__body{ flex:1; min-width:0; }
.cs-gs__row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cs-gs__name{ font-weight:700; font-size:14px; }
.cs-gs__step--done .cs-gs__name{ color:var(--aa-text-2); }
.cs-gs__ask{ flex:none; max-width:200px; text-align:end; }
@media (max-width: 560px){ .cs-gs__step{ flex-wrap:wrap; } .cs-gs__ask{ text-align:start; max-width:none; } }

/* the first-run licence screen */
.cs-setup{ max-width:760px; margin:24px auto 0; }
.cs-setup__title{ font-family:var(--aa-serif); font-weight:var(--font-display-weight, 400); font-size:30px; letter-spacing:-.02em; margin:8px 0 6px; }
.cs-setup__lead{ color:var(--aa-text-2); font-size:15px; line-height:1.55; margin:0 0 18px; }
.cs-setup__steps{ display:flex; gap:8px; list-style:none; padding:0; margin:16px 0 0; counter-reset:st; flex-wrap:wrap; }
.cs-setup__steps li{ counter-increment:st; font-size:12.5px; color:var(--aa-text-3); padding-block:6px; padding-inline:8px 10px; border-radius:999px; background:var(--aa-surface-2); }
.cs-setup__steps li::before{ content:counter(st) " · "; font-weight:700; }
.cs-setup__steps li.on{ color:var(--aa-text-1); background:var(--aa-surface-3); font-weight:600; }
.cs-setup__steps li.done{ color:var(--aa-text-2); }
.cs-setup__steps li.done::before{ content:"\2713\00a0"; }
.cs-lic-grid{ border:0; margin:0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); }
.cs-lic-grid legend{ margin-bottom:10px; padding:0; }
.cs-lic-basis{ border:0; margin:16px 0 0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); }
.cs-lic-basis legend{ margin-bottom:10px; padding:0; }
.cs-lic-opt{ display:flex; gap:11px; align-items:flex-start; padding:14px; border:1px solid var(--aa-border); border-radius:12px; cursor:pointer; background:var(--aa-surface); }
.cs-lic-opt:hover{ border-color:var(--aa-border-strong); }
.cs-lic-opt.on{ border-color:var(--aa-text-1); box-shadow:inset 0 0 0 1px var(--aa-text-1); }
.cs-lic-opt input{ margin-top:3px; accent-color:var(--aa-text-1); width:16px; height:16px; flex:none; }
.cs-lic-opt__body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cs-lic-opt__name{ font-weight:700; font-size:14.5px; }
.cs-lic-opt__sum{ font-size:12.5px; color:var(--aa-text-2); line-height:1.45; }
.cs-lic-opt__sold{ font-size:11.5px; color:var(--aa-text-3); }
.cs-lic-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.cs-lic-wait__head{ display:flex; gap:11px; align-items:flex-start; }
.cs-lic-note{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--aa-text-2); line-height:1.5; }
.cs-dot{ width:9px; height:9px; border-radius:999px; flex:none; margin-top:6px; }
.cs-dot--wait{ background:var(--aa-warn); }
.cs-dot--ok{ background:var(--aa-ok, var(--aa-teal)); }
.cs-in{ width:100%; box-sizing:border-box; height:40px; border-radius:10px; border:1px solid var(--hearth-border-input); background:var(--aa-surface-2);
  padding:0 12px; font:13.5px var(--aa-sans); color:var(--aa-text-1); outline-color:var(--aa-teal); }
.cs-in--area{ height:auto; min-height:70px; padding:10px 12px; resize:vertical; }

/* the step-up dialog (and any other cs-modal card) */
.cs-dlg{ width:440px; max-width:92vw; background:var(--aa-surface); border:1px solid var(--aa-border); border-radius:16px; padding:22px; box-shadow:0 18px 48px rgba(40,30,16,.22); }
.cs-dlg__head{ display:flex; gap:11px; align-items:flex-start; margin-bottom:14px; }
.cs-dlg__ic{ width:34px; height:34px; border-radius:10px; background:var(--aa-surface-3); display:flex; align-items:center; justify-content:center; flex:none; }
.cs-dlg__title{ font-weight:700; font-size:15px; }
.cs-dlg__sub{ font-size:12.5px; color:var(--aa-text-3); line-height:1.5; }
.cs-dlg__err{ font-size:12.5px; color:var(--aa-danger); line-height:1.5; margin-top:10px; }
.cs-dlg__foot{ display:flex; gap:9px; justify-content:flex-end; align-items:center; margin-top:16px; flex-wrap:wrap; }
.cs-match{ display:flex; align-items:center; gap:13px; padding:15px 17px; border-radius:12px; background:var(--aa-surface-2); border:1px solid var(--aa-border); }
.cs-match__n{ font-family:var(--aa-mono); font-size:34px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.07em; line-height:1; }

.cs-toast--info{ border-color:var(--aa-border-strong); }
.cs-av--lg{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-size:13px; cursor:default; }
.cs-toast{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%); display:flex; gap:10px; align-items:center; padding:10px 14px;
  border-radius:12px; background:var(--aa-surface); border:1px solid var(--aa-danger); color:var(--aa-text-1); font-size:13px; box-shadow:var(--aa-shadow-md); }

/* the Organisation pages reuse the tenant panels (tenant.css), drawn inside the Console's page */
.tn.tn--embed{ min-height:0; background:transparent; }
.cs-svctab[aria-disabled="true"]{ cursor:default; }

/* The absence grammar (root hearth-components.css, §13 row 112) reads two FONT tokens that live in
   colors_and_type.css, which this page does not load (its own type ramp is --aa-*). Aliased on the
   wrapper only, so the components keep the canon shapes and nothing outside `.ln-abs` changes
   (2026-10-14ah, the change log + facility boards). */
.hearth.ln-abs{ --sans-ui: var(--aa-sans); --mono-logs: var(--aa-mono); }