/* =====================================================================
   WDS REFERENCES — SHARED SHELL
   Shell CSS extracted verbatim from the canonical source of truth:
   Wavecast-Master-Colour-Palette-v1_0.html (the de-facto shell origin
   per the wavecast-reference-page skill provenance note).
   Plus the cross-page nav chrome — the one element the standalone
   source pages never had. Nav conforms to the shell: Poppins, Sky
   structural accent, Rose reserved for the current/active item only.
   ===================================================================== */
:root, :root[data-theme="dark"]{
  --bg:#18181b; --panel:#27272a;
  --line:#3f3f46; --line-soft:#27272a;
  --t1:#ffffff; --t2:#a1a1aa; --dim:#a1a1aa;
  --sky:#0ea5e9; --rose:#fe2767; --gold:#d8b15a; --icon:#ffffff;
  --radius:12px;
  --nav-w:248px;
  /* themed chrome — DARK (default) */
  --nav-grad-a:#1f1f23; --nav-grad-b:#161618;
  --cover-grad-a:#1f1f23; --cover-grad-b:#18181b;
  --bar-bg:rgba(24,24,27,.92);
  --int:#7dd3fc;            /* interactive accent text: links, download, open */
  --tag:#d8b15a;           /* eyebrow / kicker gold */
  --cur-fg:#ffffff;        /* active nav item text */
  --pill-canon-fg:#86efac; --pill-canon-bg:rgba(62,201,138,.12); --pill-canon-bd:rgba(62,201,138,.32);
  --pill-prop-fg:#fcd34d;  --pill-prop-bg:rgba(252,211,77,.1);  --pill-prop-bd:rgba(252,211,77,.3);
  --rule-fg:#fda4bf; --warn-fg:#fcd34d;
}
/* ---- LIGHT theme: surfaces/text/borders mirror the Colour Registry "How modes flip" map ---- */
:root[data-theme="light"]{
  --bg:#ffffff; --panel:#f4f4f5;
  --line:#e4e4e7; --line-soft:#e4e4e7;
  --t1:#18181b; --t2:#71717a; --dim:#71717a;
  --sky:#0ea5e9; --rose:#fe2767; --gold:#d8b15a; --icon:#000000;
  --nav-grad-a:#ffffff; --nav-grad-b:#f4f4f5;
  --cover-grad-a:#ffffff; --cover-grad-b:#f4f4f5;
  --bar-bg:rgba(255,255,255,.92);
  --int:#0284c7;           /* darker Sky for AA on light */
  --tag:#8a6d1a;           /* darker gold for AA on light */
  --cur-fg:#082f49;
  --pill-canon-fg:#16a34a; --pill-canon-bg:rgba(22,163,74,.1);  --pill-canon-bd:rgba(22,163,74,.32);
  --pill-prop-fg:#b45309;  --pill-prop-bg:rgba(234,179,8,.12);  --pill-prop-bd:rgba(234,179,8,.4);
  --rule-fg:#b3322c; --warn-fg:#b45309;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:var(--text-body);background:var(--bg);color:var(--t1);-webkit-font-smoothing:antialiased}

/* ---- App frame: fixed sidebar nav + content rail ---- */
.app{display:flex;min-height:100vh}
.nav{position:fixed;top:0;left:0;width:var(--nav-w);height:100vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--nav-grad-a),var(--nav-grad-b));border-right:1px solid var(--line);z-index:20}
.nav .brand{padding:26px 24px 20px;border-bottom:1px solid var(--line)}
.nav .brand .logo{display:block;width:148px;height:auto;color:var(--t1);margin-bottom:0}
.nav .grp{padding:14px 14px 4px}
.nav .grp .lbl{font:var(--text-caption-sm);letter-spacing:var(--ls-caption-sm);text-transform:uppercase;color:var(--tag);padding:0 10px 7px;display:block}
.nav a{font:var(--text-label);display:flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--t2);
  padding:8px 10px;border-radius:0;position:relative;transition:.13s}
.nav a .d{width:6px;height:6px;border-radius:50%;background:var(--sky);flex:0 0 6px;opacity:.5;transition:.13s}
.nav a:hover{background:var(--panel);color:var(--t1)}
.nav a:hover .d{opacity:1}
.nav a.cur{background:rgba(254,39,103,.1);color:var(--cur-fg);font-weight:600}
.nav a.cur .d{background:var(--rose);opacity:1;box-shadow:0 0 8px rgba(254,39,103,.7)}
.nav .foot-mini{font:var(--text-footnote);padding:4px 24px 16px;
  color:var(--t2);}
.nav .foot-mini b{color:var(--t1);font-weight:600}
.nav .navdefer{font:var(--text-label);display:flex;align-items:center;gap:8px;
  color:#52525b;padding:8px 10px;cursor:default}
.nav .navdefer .d{width:6px;height:6px;border-radius:50%;background:#52525b;flex:0 0 6px;opacity:.4}
.nav .navdefer em{font:var(--text-caption-sm);letter-spacing:var(--ls-caption-sm);margin-left:auto;flex:0 0 auto;white-space:nowrap;font-style:normal;
  text-transform:uppercase;color:#52525b;border:1px solid #3f3f46;border-radius:100px;padding:2px 7px}

/* .main is a flex column that always fills the viewport, so the footer (its last
   child) can be pinned to the bottom on short pages and never floats mid-page. */
.main{flex:1;margin-left:var(--nav-w);min-width:0;overflow-x:clip;display:flex;flex-direction:column;min-height:100vh}
/* .wrap grows to push the footer down; its 80px bottom padding is the breathing
   room above the footer on long (scrolling) pages. */
.wrap{max-width:1376px;width:100%;margin:0 auto;padding:56px 40px 80px;flex:1 0 auto}

/* ---- Mobile: nav collapses to a top bar with disclosure ---- */
.navtoggle{font:var(--text-title-sm);display:none}
@media(max-width:980px){
  .nav{transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 40px rgba(0,0,0,.5)}
  #navchk:checked ~ .app .nav{transform:translateX(0)}
  .main{margin-left:0}
  .wrap{padding:72px 18px 80px}
  .navtoggle{display:flex;align-items:center;gap:9px;position:fixed;top:0;left:0;right:0;height:52px;
    z-index:30;background:var(--bar-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
    padding:0 18px;font-family:'Poppins';font-size:13px;font-weight:600;color:var(--t1);cursor:pointer}
  
  .navtoggle .bars{width:18px;height:2px;background:var(--t1);position:relative;display:inline-block}
  .navtoggle .bars::before,.navtoggle .bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--t1)}
  .navtoggle .bars::before{top:-6px}.navtoggle .bars::after{top:6px}
}

/* ---- Cover (verbatim from canonical palette page) ---- */
.cover{border:1px solid var(--line);border-radius:16px;padding:40px 40px 36px;background:linear-gradient(160deg,var(--cover-grad-a),var(--cover-grad-b));position:relative;overflow:hidden;margin-bottom:48px}
@media(max-width:640px){.cover{padding:28px 22px}}
.cover::after{content:"";position:absolute;top:0;right:0;width:240px;height:100%;background:linear-gradient(90deg,transparent,rgba(254,39,103,.06));pointer-events:none}

.goldtag{font:var(--text-caption);letter-spacing:var(--ls-caption);display:inline-flex;align-items:center;gap:7px;text-transform:uppercase;color:var(--tag);border:1px solid rgba(216,177,90,.4);border-radius:100px;padding:5px 13px;margin-bottom:20px}
.goldtag .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(216,177,90,.8)}
.cover h1{font:var(--text-display-sm);letter-spacing:-.02em;margin-bottom:14px}
.cover .sub{font:var(--text-lead);color:var(--t2);max-width:680px;}
.cover .meta{font:var(--text-meta);margin-top:22px;color:var(--t2);display:flex;gap:18px;flex-wrap:wrap}
.cover .meta b{color:var(--t1);font-weight:600}

/* ---- Section rhythm (verbatim) ---- */
.sec{margin:56px 0 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line)}
.sec .n{font:var(--text-title-xs);color:var(--gold);letter-spacing:.04em}
.sec h2{font:var(--text-headline-lg);letter-spacing:-.015em}
.sec .pill{font:var(--text-caption);letter-spacing:var(--ls-caption);margin-left:auto;text-transform:uppercase;padding:4px 10px;border-radius:100px}
.pill.canon{color:var(--pill-canon-fg);background:var(--pill-canon-bg);border:1px solid var(--pill-canon-bd)}
.pill.prop{color:var(--pill-prop-fg);background:var(--pill-prop-bg);border:1px solid var(--pill-prop-bd)}
.lead{font:var(--text-body);color:var(--t2);max-width:820px;margin-bottom:18px}
.lead b{color:var(--t1);font-weight:600}
.lead code{font-family:'Inter';font-size:13px;background:var(--panel);padding:1px 6px;border-radius:5px;color:var(--int)}
.intro{font:var(--text-subhead);color:var(--t1);max-width:820px;margin-bottom:18px;}
.notes{margin:18px 0 6px;max-width:880px}
.notes .h{font:var(--text-caption);letter-spacing:var(--ls-caption);text-transform:uppercase;color:var(--t2);margin-bottom:9px;display:block}
.notes ul{list-style:none}
.notes li{font:var(--text-body-sm);position:relative;padding:4px 0 4px 18px;color:var(--t2);}
.notes li::before{content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--sky)}
.notes li b{color:var(--t1);font-weight:600}
.notes li code{font-family:'Inter';font-size:12.5px;background:var(--panel);padding:1px 6px;border-radius:5px;color:var(--int)}

/* ---- Grid (verbatim) ---- */
.grid{display:grid;gap:16px;margin-bottom:8px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)} .g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:820px){.g4,.g5{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}}

/* ---- Notes / rule / warn callouts (verbatim) ---- */
.note{font:var(--text-body-sm);border-radius:12px;padding:15px 18px;margin:14px 0 6px;color:var(--t2)}
.note b{color:var(--t1);font-weight:600}
.note code{font-family:'Inter';font-size:12.5px;background:var(--line-soft);padding:1px 6px;border-radius:5px;color:var(--int)}
.note.rule{background:rgba(254,39,103,.06);border:1px solid rgba(254,39,103,.26)}
.note.warn{background:rgba(252,211,77,.06);border:1px solid rgba(252,211,77,.28)}
.note .h{font:var(--text-caption);letter-spacing:var(--ls-caption);text-transform:uppercase;margin-bottom:6px;display:block}
.note.rule .h{color:var(--rule-fg)} .note.warn .h{color:var(--warn-fg)}

/* ---- Stage card for live SVG / widgets ---- */
.stagecard{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden}
.stagecard .stage,.stagecard .navstage{padding:22px;display:flex;align-items:center;justify-content:center;min-height:120px}
.stagecard .cap{font:var(--text-meta);padding:10px 15px;border-top:1px solid var(--line);color:var(--t2);}
.stagecard .cap b{color:var(--t1);font-weight:600}

/* ---- Footer ---- */
/* Proper page footer — full-bleed Black band, always dark (LM + DM), the deepest
   surface on the page. It is a direct child of .main (a flex column), so it spans
   the full content width and is anchored to the bottom of the viewport — never
   floating mid-page on short pages. Present on EVERY page. */
.foot{width:100%;margin-top:0;background:#000;color:#a1a1aa;font:var(--text-meta);flex:0 0 auto}
.foot .foot-in{max-width:1376px;margin:0 auto;padding:44px 40px}
@media(max-width:980px){.foot .foot-in{padding:36px 18px}}
.foot b{color:#fff;font-weight:600}
/* Breadcrumb trail inside the footer — always present, sits above the doc/summary
   line. Forced light-on-black in both themes since the band is always black. */
.foot .crumbs{margin:0 0 16px;color:#a1a1aa}
.foot .crumbs a{color:var(--rose);text-decoration:none}
.foot .crumbs a:hover{text-decoration:underline}
.foot .crumbs .sep{color:#52525b}
.foot .crumbs [aria-current=page]{color:#fff;font-weight:600}
/* When the footer carries only the breadcrumb (no doc/summary band), drop the
   trailing margin so the band height stays balanced. */
.foot .foot-in > .crumbs:only-child{margin-bottom:0}

/* ---- Landing hub cards ---- */
.hubgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
@media(max-width:640px){.hubgrid{grid-template-columns:1fr}}
.hub{display:block;text-decoration:none;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);padding:20px 22px;position:relative;overflow:hidden;transition:.15s}
.hub::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--sky);opacity:.55;transition:.15s}
.hub:hover{border-color:#52525b;transform:translateY(-2px)}
.hub:hover::after{opacity:1;background:var(--rose)}
.hub .k{font:var(--text-caption-sm);letter-spacing:var(--ls-caption-sm);text-transform:uppercase;color:var(--t2);display:block;margin-bottom:8px}
.hub h3{font:var(--text-title-lg);color:var(--t1);margin-bottom:6px}
.hub p{font:var(--text-body-sm);color:var(--t2);}
/* deferred (Coming soon) hub card — non-interactive, muted */
.hub.defer{opacity:.5;cursor:default}
.hub.defer::after{background:var(--line)}
.hub.defer:hover{border-color:var(--line);transform:none}
.hub.defer:hover::after{opacity:.55;background:var(--line)}
.hub.defer .k{color:var(--tag)}

/* ---- Landing hub — nav-mirrored outline: Section header > Group card > Parent > Child ----
   Section is a plain header (.sec); each Group is a FULL-WIDTH card holding text links
   in Accent/Rose (per the link discipline). Link-light, so it scales as the system grows. */
.ngrid{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.gcard{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:18px 22px}
/* Group — heading link to the area's overview page (Accent, sized up as the card title) */
.ngroup{display:inline-block;font:var(--text-title-lg);color:var(--rose);text-decoration:none;margin-bottom:12px}
.ngroup:hover{text-decoration:underline}
/* Child — Accent text links flowing across the full-width card */
.nlinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:9px 24px;margin-bottom:2px}
.nlinks a,.nlinks .off{display:inline-flex;align-items:center;gap:9px;font:var(--text-body-sm);width:fit-content}
.nlinks a{color:var(--rose);text-decoration:none}
.nlinks a:hover{text-decoration:underline}
.nlinks .off{color:var(--t2);opacity:.55;cursor:default}
.nlinks .pdot{width:7px;height:7px;border-radius:50%;background:var(--h,var(--sky));flex:0 0 7px}
/* Parent — an L2 cluster (Components, Elements): indented inside the card, with a guide rail */
.nsub{margin:13px 0 2px;padding-left:14px;border-left:1px solid var(--line)}
.nparent{display:inline-block;font:var(--text-title-sm);color:var(--rose);text-decoration:none;margin-bottom:9px}
.nparent:hover{text-decoration:underline}


/* =====================================================================
   THEME — toggle control + light-mode component touch-ups
   ===================================================================== */
.navscroll{flex:1 1 auto;overflow-y:auto;min-height:0;padding:12px 0 8px}
.navbottom{flex:0 0 auto;border-top:1px solid var(--line)}
.nav .navwip{border-bottom:1px solid var(--line);padding-bottom:10px}
.nav .navwip .lbl{color:var(--t3,#71717a)}
/* clickable colour swatches — click to copy the hex */
.sw,.catsw{cursor:pointer}
.sw:hover,.catsw:hover{border-color:var(--sky)}
.catsw .c{position:relative}
.sw.copied .chip::after,.catsw.copied .c::after{content:"Copied \2713";position:absolute;top:8px;right:8px;font-family:'Inter';font-weight:600;font-size:10px;letter-spacing:.04em;text-transform:uppercase;background:rgba(0,0,0,.62);color:#fff;padding:3px 7px;border-radius:5px;pointer-events:none;white-space:nowrap}
.themerow{padding:14px 18px 12px;display:flex}
.themetoggle{font:var(--text-caption);display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:transparent;
  border:1px solid var(--line);color:var(--t2);
  letter-spacing:.04em;padding:6px 12px;border-radius:100px;transition:.13s}
.themetoggle:hover{border-color:var(--t2);color:var(--t1)}
.themetoggle svg{width:14px;height:14px;flex:0 0 14px}
.themetoggle .ic-sun{display:none}
:root[data-theme="light"] .themetoggle .ic-sun{display:inline-block}
:root[data-theme="light"] .themetoggle .ic-moon{display:none}

/* interactive accent text defined in page-level component CSS → retune for light */
:root[data-theme="light"] .dl{color:var(--int)}
:root[data-theme="light"] .protobar .open{color:var(--int)}

/* theme-aware phase badge (tinted form): DM uses the lightened hue, LM uses the base hue.
   Solid badges keep their inline on-fill (mode-agnostic). */
.pbadge.tint{color:var(--hdm);background:color-mix(in srgb,var(--h) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--h) 30%,transparent)}
.pbadge.tint .pd{background:var(--h)}
:root[data-theme="light"] .pbadge.tint{color:var(--h)}
.pbadge.tint.arch{background:color-mix(in srgb,var(--h) 22%,transparent);
  border-color:color-mix(in srgb,var(--h) 55%,transparent)}
.pbadge.tint.arch .pd{background:#475068}
:root[data-theme="light"] .pbadge.tint.arch .pd{background:var(--h)}

/* ---- wheel-engine theme colours (consumed by assets/wheel-engine.js via style="...:var(--wheel-*)") ---- */
:root,:root[data-theme="dark"]{
  --wheel-dim:#2a2a30; --wheel-gap:#0c0c0f; --wheel-num-dim:#71717a;
  --wheel-label:#e7e7ea; --wheel-label-dim:#52525b;
  --wheel-cap:#ffffff; --wheel-cap-sub:#a1a1aa;
  --wheel-track:#3f3f46; --wheel-tail:#5b5b63; --wheel-node-bg:#18181b;
}
:root[data-theme="light"]{
  --wheel-dim:#e4e4e7; --wheel-gap:#ffffff; --wheel-num-dim:#52525b;
  --wheel-label:#18181b; --wheel-label-dim:#71717a;
  --wheel-cap:#18181b; --wheel-cap-sub:#71717a;
  --wheel-track:#d4d4d8; --wheel-tail:#c4c4c9; --wheel-node-bg:#ffffff;
}

/* ---- nav: expandable parent (Event Phases) + phase children ---- */
.navexpand{position:relative}
.navrow{display:flex;align-items:stretch}
.navrow > a{flex:1}
.navchev{display:flex;align-items:center;justify-content:center;width:30px;cursor:pointer;color:var(--t2);flex:0 0 30px;transition:.13s}
.navchev:hover{color:var(--t1)}
.navchev svg{width:18px;height:18px;fill:currentColor;transition:transform .18s}
.navexp:checked ~ .navrow .navchev svg{transform:rotate(180deg)}
.navchildren{display:none;margin:2px 0 6px}
.navchildren .navchildren{padding-left:13px;margin:0 0 4px;border-left:1px solid var(--line)}
.nav a.tleaf,.nav .navdefer.tleaf{font:var(--text-label)}
/* active/rollover spans the whole parent row — link + chevron together */
.navrow{transition:.13s}
.navrow a,.navrow a:hover,.navrow a.cur{background:transparent}
.navrow:not(.cur):hover{background:var(--panel)}
.navrow:not(.cur):hover a,.navrow:not(.cur):hover .navchev{color:var(--t1)}
.navrow:hover .d{opacity:1}
.navrow.cur{background:rgba(254,39,103,.1)}
.navrow.cur:hover{background:rgba(254,39,103,.14)}
.navrow.cur .navchev{color:var(--cur-fg)}
.navexp:checked ~ .navchildren{display:block}
.phaselink{display:flex;align-items:center;gap:9px;padding:6px 10px 6px 20px;font:var(--text-label);color:var(--t2);text-decoration:none;border-left:2px solid transparent;transition:.13s}
.phaselink .picon{flex:0 0 17px;width:17px;height:17px;color:var(--h);display:flex;align-items:center}
.phaselink .picon svg{width:17px;height:17px;fill:currentColor}
.phaselink .pnm{display:flex;align-items:baseline;gap:6px}
.phaselink .pnn{font:var(--text-caption);color:var(--t2)}
.phaselink:hover{background:color-mix(in srgb,var(--h) 12%,transparent);color:var(--t1)}
.phaselink.cur{background:color-mix(in srgb,var(--h) 16%,transparent);color:var(--t1);border-left-color:var(--h);font-weight:600}
.phaselink.defer{opacity:.4;cursor:default}
.phaselink.defer:hover{background:transparent;color:var(--t2)}
/* toggle-only expandable parent (no overview page, e.g. Brand Packs) */
.nav .navlbl{display:flex;align-items:center;gap:9px;font:var(--text-label);color:var(--t2);padding:8px 10px;cursor:pointer;flex:1;line-height:1.3}
.nav .navlbl .d{width:6px;height:6px;border-radius:50%;background:var(--sky);flex:0 0 6px;opacity:.5;transition:.13s}
.navrow:hover .navlbl{color:var(--t1)} .navrow:hover .navlbl .d{opacity:1}
/* standard (non-phase) children: registry icon token, standard rose active */
.phaselink.std .picon{color:var(--icon)}
.phaselink.std:hover{background:var(--panel);color:var(--t1)}
.phaselink.std.cur{background:rgba(254,39,103,.1);color:var(--cur-fg);border-left-color:var(--rose);font-weight:600}

/* ===== Nav hierarchy (2026-06): no dot on top-level items; indent second level ===== */
/* Top-level items (direct children of a group) read as parents — drop the dot. */
.nav .grp>a .d,
.nav .grp>.navexpand>.navrow .d{display:none}
/* Second level sits indented under its parent, with a guide rail. */
.nav .navchildren{margin-left:15px;border-left:1px solid var(--line);padding-left:2px}
.nav .navchildren .phaselink{padding-left:11px}

/* ===== Breadcrumbs ===== */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font:var(--text-label);color:var(--t2);margin:0 0 20px}
.crumbs a{color:var(--rose);text-decoration:none;transition:.13s}/* Accent = links */
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{color:var(--line)}
.crumbs [aria-current=page]{color:var(--t1);font-weight:600}

/* DISCIPLINE: Accent (Link token #fe2767) is always used for links; Primary/Sky is structural. */
.intro a,.notes a,.lead a,.dtable a{color:var(--rose);text-decoration:none}
.intro a:hover,.notes a:hover,.lead a:hover,.dtable a:hover{text-decoration:underline}

/* ===== Standard data table (the shared table pattern) =====
   One header treatment for every reference/spec table site-wide. */
.dtable{width:100%;border-collapse:collapse;margin:16px 0 4px;font:var(--text-body)}
.dtable thead th{text-align:left;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--t2);
  padding:10px 14px;background:color-mix(in srgb,var(--panel) 70%,transparent);
  border-bottom:2px solid var(--line)}
.dtable thead th:first-child{border-top-left-radius:8px}
.dtable thead th:last-child{border-top-right-radius:8px}
.dtable tbody td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--t2)}
.dtable tbody tr:last-child td{border-bottom:none}
.dtable tbody td:first-child{color:var(--t1);font-weight:500}
.dtable .num{font-family:var(--of-mono,ui-monospace,Menlo,monospace);color:var(--t2);font-weight:400;width:34px;text-align:right;white-space:nowrap}

/* ===== Shared chips ===== */
.dim2{font-family:var(--of-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:12.5px;color:var(--t1)}
.tok{font-family:var(--of-mono,ui-monospace,Menlo,monospace);font-size:12px;color:var(--sky);background:color-mix(in srgb,var(--sky) 8%,transparent);border:1px solid color-mix(in srgb,var(--sky) 18%,transparent);border-radius:5px;padding:1px 6px;white-space:nowrap}
/* Element chip: static = gold; interactive (link) = Accent/Rose — it's clickable. */
.el{font-family:var(--of-mono,ui-monospace,Menlo,monospace);font-size:12px;color:var(--gold);background:color-mix(in srgb,var(--gold) 8%,transparent);border:1px solid color-mix(in srgb,var(--gold) 20%,transparent);border-radius:5px;padding:1px 6px;white-space:nowrap;text-decoration:none}
a.el{color:var(--rose);background:color-mix(in srgb,var(--rose) 9%,transparent);border-color:color-mix(in srgb,var(--rose) 30%,transparent)}
a.el:hover{background:color-mix(in srgb,var(--rose) 17%,transparent);color:var(--rose)}
.el.pend{opacity:.6}

/* ===== Compact details panel (At a glance) — full-width, 2-column grid of rows ===== */
.infopanel{display:grid;grid-template-columns:1fr 1fr;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:16px 0 4px;padding:22px 0}
@media(max-width:620px){.infopanel{grid-template-columns:1fr}}
.infopanel .ip{display:flex;gap:16px;align-items:baseline;padding:8px 18px}
/* dividers via border-top (robust for odd field counts): centre line + a rule above every row but the first */
.infopanel .ip:nth-child(odd){border-right:1px solid var(--line)}
.infopanel .ip:nth-child(n+3){border-top:1px solid var(--line)}
@media(max-width:620px){.infopanel .ip:nth-child(odd){border-right:none}.infopanel .ip:nth-child(n+2){border-top:1px solid var(--line)}}
.infopanel .ip .k{flex:0 0 130px;font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)}
.infopanel .ip .v{font-family:'Poppins',system-ui,sans-serif;font-size:13.5px;color:var(--t1);line-height:1.35}
.infopanel .ip .v .dim2{font-size:12.5px}

/* ===== Standard component previewer (shared, one per object/variant/element) ===== */
/* breakout centred WITHOUT transform, so the glow ::before can sit behind the page content */
.ecf-preview{--pw:min(1440px,calc(100vw - var(--nav-w) - 48px));width:var(--pw);margin:18px 0 6px;margin-left:calc((100% - var(--pw))/2);border:none;border-radius:var(--radius);background:transparent;position:relative;overflow:visible;--actc:var(--sky)}
/* dreamy, faint glow — left-weighted, rising up behind the Details panel; never surrounds the card */
.ecf-preview::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-150px;width:660px;top:-170px;height:calc(100% + 250px);background:radial-gradient(closest-side,var(--actc),transparent);opacity:.5;filter:blur(60px);transition:opacity .25s,background .25s}
@media(max-width:980px){.ecf-preview{width:100%;margin-left:0}}
.ecf-toolbar{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--panel);border-radius:var(--radius) var(--radius) 0 0}
.ecf-toolbar .ecf-label{font-family:'Poppins',system-ui,sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.ecf-toolbar .ecf-modes{margin-left:auto}
.ecf-toolbar .acttoggle{margin-left:auto}              /* act + LM/DM group on the right */
.ecf-toolbar .acttoggle + .ecf-modes{margin-left:0}
.ecf-toggle{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--bg)}
.ecf-mode{appearance:none;border:0;background:transparent;cursor:pointer;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:12.5px;color:var(--t2);padding:6px 16px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.ecf-mode .md{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.45;transition:.15s}
.ecf-mode:hover{color:var(--t1)}
.ecf-mode.is-active{background:var(--sky);color:#fff}
.ecf-mode.is-active .md{opacity:1;background:#fff}
.ecf-stage{display:flex;justify-content:center;align-items:center;padding:64px 40px;min-height:588px;transition:background .15s;border-radius:0 0 var(--radius) var(--radius);overflow:hidden}
.ecf-stage[data-mode=lm]{background:#e0f2fe}
.ecf-stage[data-mode=dm]{background:#082f49}
.ecf-img{display:block;width:auto;height:auto;max-width:100%}
.ecf-pending{font-family:'Inter',system-ui,sans-serif;font-size:13px;color:var(--t2);opacity:.85;letter-spacing:.02em}
.ecf-stage[data-mode=dm] .ecf-pending{color:#bae6fd}

/* ===== Catalogue cards (family / elements overviews) ===== */
/* --famcols: cards per row = 12 / component column-span (default 3). Set per gallery. */
.famgrid{display:grid;grid-template-columns:repeat(var(--famcols,3),1fr);gap:18px;margin-top:24px}
@media(max-width:900px){.famgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.famgrid{grid-template-columns:1fr}}
.famcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);text-decoration:none;color:inherit;transition:.16s}
a.famcard:hover{border-color:var(--sky);transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.famcard[aria-disabled=true]{opacity:.78}
.fampreview{aspect-ratio:16/10;background:color-mix(in srgb,var(--sky) 7%,var(--panel));border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:18px}
.wireframe{width:84%;height:78%;border:1.5px dashed color-mix(in srgb,var(--sky) 42%,var(--line));border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:color-mix(in srgb,var(--sky) 4%,transparent)}
.wireframe svg{width:118px;height:auto;display:block;margin-bottom:2px}
.wireframe .wf-a{fill:color-mix(in srgb,var(--sky) 26%,transparent)}
.wireframe .wf-b{fill:color-mix(in srgb,var(--t2) 32%,transparent)}
.wireframe .wf-c{fill:color-mix(in srgb,var(--gold) 40%,transparent)}
.wireframe .wl{font-family:'Poppins',system-ui,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--sky) 72%,var(--t2))}
.wireframe .ws{font-family:'Inter',system-ui,sans-serif;font-size:10.5px;color:var(--t2);opacity:.75}
.faminfo{padding:15px 17px 17px;display:flex;flex-direction:column;gap:6px;flex:1}
.faminfo h3{font-family:'Poppins',system-ui,sans-serif;font-weight:600;font-size:16px;margin:0;color:var(--t1)}
.faminfo p{margin:0;font-size:13px;line-height:1.5;color:var(--t2)}
.fammeta{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:10px}
.famstatus{font-family:'Inter',system-ui,sans-serif;font-size:11px;color:var(--t2);opacity:.7;margin-left:auto}
.famcard .go{margin-left:auto;font-family:'Poppins',system-ui,sans-serif;font-size:12.5px;font-weight:600;color:var(--rose)}/* Accent = links */
a.famcard:hover .go{text-decoration:underline}

/* ===== Icon library (Elements › Icons) ===== */
.iconlib{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:16px 0 6px}
.iconlib .icongrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1px;background:var(--line)}
.iconlib[data-mode=lm] .iconcell,.iconlib[data-mode=lm] .pvstage{background:#e0f2fe;color:#000000}/* Icon token LM */
.iconlib[data-mode=dm] .iconcell,.iconlib[data-mode=dm] .pvstage{background:#082f49;color:#fff}
.iconcell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:24px 12px;text-decoration:none;transition:.12s;position:relative}
.iconcell:hover{outline:2px solid var(--rose);outline-offset:-2px}
.iconcell .ic{width:32px;height:32px;display:block}
.iconcell .ic svg{width:100%;height:100%;display:block;fill:currentColor}
.iconcell .icn{font-family:'Inter',system-ui,sans-serif;font-size:11.5px;line-height:1;opacity:.92}
/* per-icon preview */
.iconpv{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
@media(max-width:560px){.iconpv{grid-template-columns:1fr}}
.iconpv .pvhead{font-family:'Poppins',system-ui,sans-serif;font-weight:600;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--t2);padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.iconpv .pvstage{display:flex;align-items:center;justify-content:center;padding:52px;min-height:200px;transition:background .15s}
.iconpv .ic{width:88px;height:88px;display:block}
.iconpv .ic svg{width:100%;height:100%;display:block;fill:currentColor}
/* downloads */
.dlrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.dlbtn{display:inline-flex;align-items:center;gap:8px;font-family:'Inter',system-ui,sans-serif;font-size:12.5px;font-weight:600;color:var(--t1);text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:8px 14px;transition:.13s}
.dlbtn:hover{border-color:var(--sky);color:var(--sky);background:color-mix(in srgb,var(--sky) 8%,transparent)}

/* ===== Variant gallery cards (render preview instead of wireframe) ===== */
.fampreview{position:relative}
.fampreview img{position:absolute;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px);object-fit:contain;display:block}
.fampending{font-family:'Inter',system-ui,sans-serif;font-size:12px;color:var(--t2)}
/* mode-aware gallery: LM/DM toggle drives the per-card stage colour */
.mgallery .galbar{display:flex;align-items:center;gap:14px;margin:14px 0 2px}
.mgallery .galbar .ecf-label{font-family:'Poppins',system-ui,sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.mgallery .famgrid{margin-top:10px}
/* gallery card previews follow the page theme (no per-gallery toggle) */
.mgallery .fampreview{background:#e0f2fe}
:root[data-theme=dark] .mgallery .fampreview{background:#082f49}
:root[data-theme=dark] .mgallery .fampending{color:#bae6fd}
.deftag{font-family:'Inter',system-ui,sans-serif;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--pill-canon-fg);background:var(--pill-canon-bg);border:1px solid var(--pill-canon-bd);border-radius:100px;padding:2px 8px;vertical-align:middle;margin-left:6px}
.faminfo h3{display:flex;align-items:center;gap:2px;flex-wrap:wrap}

/* ===== Act toggle — Promote · Live · Replay, gradient-branded from the phase-act palette ===== */
.acttoggle{display:inline-flex;gap:3px;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--bg)}
.actseg{appearance:none;border:0;background:transparent;cursor:pointer;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:12.5px;color:var(--t2);padding:6px 15px;border-radius:999px;transition:.16s;white-space:nowrap}
.actseg:hover{color:var(--t1)}
.actseg.promote{--g:linear-gradient(90deg,#b5d36a,#5fb55a,#1f9d6b)}   /* Ideation→Setup→Launch */
.actseg.live{--g:linear-gradient(90deg,#ffa033,#ef6a47,#cf3a14)}      /* Finalising→Pre-Live→Live */
.actseg.replay{--g:linear-gradient(90deg,#38bdf8,#6f7fe0,#7c5cd6)}    /* Replay→Insight */
.actseg.is-active{color:#fff;background-image:var(--g);box-shadow:0 1px 7px rgba(0,0,0,.28);text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* Act tint — subtle, driven by the selected act (data-act on the gallery or previewer) */
.mgallery[data-act=promote],.ecf-preview[data-act=promote]{--act:#5fb55a}
.mgallery[data-act=live],.ecf-preview[data-act=live]{--act:#ef6a47}
.mgallery[data-act=replay],.ecf-preview[data-act=replay]{--act:#38bdf8}
.mgallery[data-act]{background:color-mix(in srgb,var(--act) 4%,transparent)}
.mgallery[data-act] .sec{border-bottom-color:color-mix(in srgb,var(--act) 45%,var(--line))}
.mgallery[data-act] .famcard:hover{border-color:var(--act)}
/* act drives the dreamy glow gradient behind the previewer */
.ecf-preview[data-act=promote]{--actc:#5fb55a}
.ecf-preview[data-act=live]{--actc:#ef6a47}
.ecf-preview[data-act=replay]{--actc:#38bdf8}


/* ===== Compact icon LM/DM toggle (sun/moon) — applies everywhere .ecf-modes is used ===== */
.ecf-modes .ecf-mode{padding:6px;gap:0;font-size:0;width:30px;height:28px;justify-content:center}
.ecf-modes .ecf-mode .md{width:15px;height:15px;border-radius:0;opacity:.6;background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.ecf-modes .ecf-mode[data-mode=lm] .md{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%208a4%204%200%20100%208%204%204%200%20000-8zM12%201l2.2%203.4h-4.4L12%201zm0%2022l-2.2-3.4h4.4L12%2023zM1%2012l3.4-2.2v4.4L1%2012zm22%200l-3.4%202.2v-4.4L23%2012zM4%204l3.9.9-2.1%202.1L4%204zm16%2016l-3.9-.9%202.1-2.1L20%2020zM4%2020l.9-3.9%202.1%202.1L4%2020zM20%204l-.9%203.9-2.1-2.1L20%204z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%208a4%204%200%20100%208%204%204%200%20000-8zM12%201l2.2%203.4h-4.4L12%201zm0%2022l-2.2-3.4h4.4L12%2023zM1%2012l3.4-2.2v4.4L1%2012zm22%200l-3.4%202.2v-4.4L23%2012zM4%204l3.9.9-2.1%202.1L4%204zm16%2016l-3.9-.9%202.1-2.1L20%2020zM4%2020l.9-3.9%202.1%202.1L4%2020zM20%204l-.9%203.9-2.1-2.1L20%204z%22%2F%3E%3C%2Fsvg%3E")}
.ecf-modes .ecf-mode[data-mode=dm] .md{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203c-4.97%200-9%204.03-9%209s4.03%209%209%209%209-4.03%209-9c0-.46-.04-.92-.11-1.36-.97%201.37-2.57%202.26-4.39%202.26-2.98%200-5.4-2.42-5.4-5.4%200-1.81.89-3.41%202.26-4.39C12.92%203.04%2012.46%203%2012%203z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203c-4.97%200-9%204.03-9%209s4.03%209%209%209%209-4.03%209-9c0-.46-.04-.92-.11-1.36-.97%201.37-2.57%202.26-4.39%202.26-2.98%200-5.4-2.42-5.4-5.4%200-1.81.89-3.41%202.26-4.39C12.92%203.04%2012.46%203%2012%203z%22%2F%3E%3C%2Fsvg%3E")}
.ecf-modes .ecf-mode:hover .md{opacity:.85}
.ecf-modes .ecf-mode.is-active .md{opacity:1}

/* Container chip on family group cards */
.ccon{font-family:var(--of-mono,ui-monospace,Menlo,monospace);font-size:11px;font-weight:600;color:var(--t2);border:1px solid var(--line);border-radius:5px;padding:1px 7px;margin-left:8px}

/* Right-aligned status pill in the cover header (e.g. "Building out") */
.cover-status{position:absolute;top:22px;right:24px;z-index:1;font:var(--text-caption);letter-spacing:var(--ls-caption);text-transform:uppercase;padding:4px 11px;border-radius:100px;color:var(--pill-prop-fg);background:var(--pill-prop-bg);border:1px solid var(--pill-prop-bd)}
@media(max-width:640px){.cover-status{position:static;display:inline-block;margin-bottom:12px}}

/* Centred act toggle bar — sits between the Details panel and the previewer */
.actbar{display:flex;justify-content:center;margin:30px 0}

/* Data section — full-bleed recessed band (flush from the nav edge to the browser edge).
   Themed: a deep recessed surface in dark, a recessed grey in light; right-weighted dreamy glow.
   No top/bottom borders. Text/borders follow the page theme. */
.datablock{position:relative;width:calc(100vw - var(--nav-w));margin-left:50%;transform:translateX(-50%);margin-top:40px;padding:30px 0 28px;background:var(--panel);overflow:hidden}/* Panel surface — SSD2 #27272a / SSL2 #f4f4f5 */
@media(max-width:980px){.datablock{width:100vw}}
.datablock::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(55% 140% at 100% 50%,color-mix(in srgb,#7c5cd6 17%,transparent),transparent 62%)}/* Insight tint (phase_insight) */
.datablock-in{position:relative;z-index:1;max-width:1376px;margin:0 auto;padding:0 40px}
@media(max-width:980px){.datablock-in{padding:0 18px}}
.datablock-in>.sec:first-child{margin-top:0}

/* Data-field badge — a layer's mapped Content Schema data point (distinct from .tok / .el) */
.df{font-family:var(--of-mono,ui-monospace,Menlo,monospace);font-size:12px;color:#7c5cd6;background:color-mix(in srgb,#7c5cd6 12%,transparent);border:1px solid color-mix(in srgb,#7c5cd6 34%,transparent);border-radius:5px;padding:1px 7px;white-space:nowrap;display:inline-block}/* Insight (phase_insight #7c5cd6) = the Data colour */
.df + .df{margin-left:5px}