/* ============================================================================
   AETHER · Customer Console — shell layout (rail + adaptive body + embed host)
   Builds on mfa.css tokens. Scoped under .cs.
   ============================================================================ */
.cs, .cs *{ box-sizing:border-box; }
.cs{ height:100vh; display:grid; grid-template-columns:86px 1fr; background:var(--aa-bg); color:var(--aa-text); font-family:var(--aa-sans); overflow:hidden; }
.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{ background:var(--aa-navy); display:flex; flex-direction:column; align-items:center; padding:14px 0 10px; gap:3px; overflow:auto; }
.cs-rail::-webkit-scrollbar{ width:0; }
.cs-rail .mk{ margin-bottom:12px; }
/* the product lockup at the head of the rail: the committed Helix Counter 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:9.5px; 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 .12s, color .12s; }
.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; left:-9px; top:50%; transform:translateY(-50%); width:4px; height:26px; border-radius:0 4px 4px 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 .12s; }
.cs-railbtn.on .ic{ background:rgba(255,255,255,.12); }
.cs-railbtn.locked{ opacity:.6; }
.cs-railbtn .lock{ position:absolute; top:5px; right: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; }
.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:0 18px; z-index:10; }
.cs-svcchip{ display:flex; align-items:center; gap:9px; padding:5px 12px 5px 8px; 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-right:1px solid var(--aa-border); background:var(--aa-surface); overflow:auto; padding:16px 12px; }
.cs-sub .gl{ font-family:var(--aa-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--aa-text-3); font-weight:600; padding:0 10px 9px; }
.cs-subbtn{ display:flex; align-items:center; gap:11px; padding:8px 10px; border:none; border-radius:10px; cursor:pointer; text-align:left; width:100%; background:transparent; color:var(--aa-text-2); font-weight:500; font-size:13.5px; font-family:var(--aa-sans); transition:background .1s, color .1s; }
.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 .3s ease both; }
.cs-svccard{ background:var(--aa-surface); border:1px solid var(--aa-border); border-radius:18px; padding:20px; cursor:pointer; transition:transform .1s, box-shadow .12s, border-color .12s; position:relative; overflow:hidden; }
.cs-svccard:hover{ box-shadow:var(--aa-shadow-md); border-color:var(--aa-border-strong); transform:translateY(-2px); }
.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:#141110; --aa-navy-2:#211C18; --aa-navy-3:#2A241F;
  --aa-navy-text:#F3ECDF; --aa-navy-dim:#C5BAA8;
}
/* 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; --aa-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 .14s var(--aa-spring), color .12s, transform .1s var(--aa-spring); }
.cs-railbtn:active{ transform:scale(.94); }
.cs-subbtn{ transition:background .1s, color .1s, transform .08s 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 .34s var(--aa-spring) both; }
}
@keyframes csIn{ from{ opacity:0; transform:translateY(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 130ms ease both; }
  ::view-transition-new(cs-screen){ animation:csVtIn 260ms var(--aa-spring) both; }
}
@keyframes csVtOut{ to{ opacity:0; } }
@keyframes csVtIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---- M7 · responsive shell (rail → off-canvas drawer) + container infra --- */
.cs-content{ container-type:inline-size; container-name:csview; }
.cs-scrim{ position:fixed; inset:0; z-index:40; background:rgba(8,12,18,.5);
  opacity:0; pointer-events:none; transition:opacity .2s; }
.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; left:0; top:0; bottom:0; z-index:50; transform:translateX(-100%);
    transition:transform .24s var(--aa-spring); box-shadow:var(--aa-shadow-lg); }
  .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 */
  .cs-top{ padding:0 12px; gap:9px; }
}
@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 .12s, transform .1s 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 .12s, border-color .12s; }
.cs-cmdk:hover{ background:var(--aa-surface-2); border-color:var(--aa-border-strong); }
.cs-cmdk .k{ 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; }
.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 .2s 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:left; 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:700; font-size:15px; display:flex; align-items:center; }
.cm-help .hd .x{ margin-left: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-left:auto; font-size:12px; color:var(--aa-text-3); font-weight:600; }

.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:#1f6740; 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-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:600; 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 #3C6188; font-size:12px; color:#2C4A69; 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); }

/* ---- 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; left: 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);
}
@supports (anchor-name: --x) {
  .cs-acct-anchor { anchor-name: --cs-acct; }
  .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;
  }
}