/* =====================================================================
 * CETS — Editorial design language (shared)
 * The signed-off Executive Portal vocabulary, generalised into a
 * reusable system: tokens + signature components. Load AFTER the
 * ClearCourse design tokens (colors_and_type.css).
 * Consumed by the unified shell, every operator screen, the option
 * canvases, the public surfaces and the design-system page.
 * ===================================================================== */

:root{
  /* Editorial palette (north-star, from production editorial.css) */
  --navy-deep:#0f1e3d;        /* hero stat-panel ground            */
  --navy:#15294f;             /* primary chrome / headlines        */
  --paper:#f5f7fa;            /* app canvas                        */
  --ink:#1b2433;             /* body ink                          */
  --muted:#6b7686;           /* metadata / secondary              */
  --accent:#FA6A28;          /* the single accent                 */
  --accent-press:#C84D14;
  /* RAG */
  --rag-green:#1a9e6a; --rag-amber:#d99100; --rag-red:#d2453a; --rag-neutral:#aab2bd; --teal:#0ea5a5;
  --rag-green-ink:#15794f; --rag-amber-ink:#9a6800; --rag-red-ink:#a8352c; --rag-neutral-ink:#6b7686;
  /* per-BU accents */
  --c-cymba:#2563c9; --c-flg:#7a3ec9; --c-clear:#0e8a8a; --c-fetchify:#c2410c; --c-embedded:#3E4E62;
  --c-division:#577D99;
  /* editorial spacing rhythm (maps to Tailwind: 1=4px) */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e8:32px; --e10:40px; --e12:48px; --e16:64px;
}

*{box-sizing:border-box}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- eyebrow + headline + standfirst ---------------------- */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.ed-h1{font-size:46px;line-height:1.08;font-weight:700;letter-spacing:-.025em;color:var(--navy);text-wrap:balance;margin:0}
.ed-h1 em{font-style:normal;color:var(--accent)}
.standfirst{font-size:18px;line-height:1.55;color:var(--cc-navy-700);margin-top:20px;max-width:56ch}
.ed-h2{font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--navy);margin:0}

/* ---------- section rule (44x3 orange) --------------------------- */
.srule{width:44px;height:3px;background:var(--accent);border-radius:2px;margin-bottom:16px}

/* ---------- hero + navy stat-panel ------------------------------- */
.hero{display:grid;grid-template-columns:1.35fr 1fr;gap:54px;align-items:center;padding-bottom:34px;border-bottom:1px solid var(--cc-line)}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:30px}.ed-h1{font-size:34px}}
.heropanel{background:var(--navy-deep);color:#fff;border-radius:24px;padding:30px 32px;box-shadow:0 24px 50px rgba(15,30,61,.22)}
.heropanel .pl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.heropanel .pv{font-size:48px;font-weight:700;letter-spacing:-.02em;margin:10px 0 4px;line-height:1}
.heropanel .psub{font-size:13.5px;color:rgba(255,255,255,.7)}
.heropanel .prow{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}
.heropanel .mini{flex:1}
.heropanel .mini .k{font-size:11px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.heropanel .mini .v{font-size:18px;font-weight:700;margin-top:3px}

/* ---------- controls: dropdown pill, segmented toggle ------------ */
.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dropdown{position:relative}
.dd-btn{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--cc-line);border-radius:999px;padding:8px 15px;font:600 13.5px/1 var(--font-sans);color:var(--ink);cursor:pointer;transition:border-color .15s}
.dd-btn:hover{border-color:var(--cc-line-strong)}
.dd-btn .dot{width:9px;height:9px;border-radius:50%}
.dd-menu{position:absolute;top:44px;left:0;background:#fff;border:1px solid var(--cc-line);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;min-width:210px;z-index:60;display:none}
.dd-menu.on{display:block}
.dd-menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:10px 12px;border-radius:9px;font:500 13.5px/1 var(--font-sans);color:var(--ink);cursor:pointer;text-align:left}
.dd-menu button:hover{background:var(--cc-bg-muted)}.dd-menu button.on{background:var(--cc-orange-100);font-weight:700}
.seg{display:flex;background:var(--cc-bg-muted);border-radius:999px;padding:3px}
.seg button{border:0;background:none;padding:7px 14px;border-radius:999px;font:600 12.5px/1 var(--font-sans);color:var(--muted);cursor:pointer;transition:color .15s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--navy);color:#fff}

/* ---------- RAG chips + stat pills -------------------------------- */
.rag{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.rag.green{background:rgba(26,158,106,.12);color:var(--rag-green-ink)}
.rag.amber{background:rgba(217,145,0,.14);color:var(--rag-amber-ink)}
.rag.red{background:rgba(210,69,58,.12);color:var(--rag-red-ink)}
.rag.neutral{background:#eef0f3;color:var(--muted)}
.ragdot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.statpill{display:inline-flex;align-items:baseline;gap:8px;background:var(--cc-bg-muted);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;color:var(--ink)}
.statpill b{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- editorial table -------------------------------------- */
table.et{width:100%;border-collapse:collapse;font-size:14.5px}
table.et th{text-align:right;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:0 16px 14px;white-space:nowrap}
table.et th:first-child,table.et td:first-child{text-align:left}
table.et td{padding:16px;border-top:1px solid var(--cc-line);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;vertical-align:middle}
table.et tbody tr:hover{background:#fafbfc}
table.et .ln{font-size:16px;font-weight:700;color:var(--ink)}
table.et td.small{font-size:13.5px}
.muted{color:var(--muted)}
.grp-row td{background:var(--cc-bg-muted);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cc-navy-700)}
.foot td{font-weight:700;border-top:2px solid var(--cc-line-strong)}

/* ---------- brand tag + initials avatar -------------------------- */
.tag-brand{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.tag-brand .dot{width:10px;height:10px;border-radius:50%}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--cc-bg-muted);color:var(--cc-navy-700);white-space:nowrap}
.chip .dot{width:8px;height:8px;border-radius:50%}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;background:var(--navy);flex:none;letter-spacing:.02em}
.avatar.sm{width:30px;height:30px;font-size:12px}
.avatar.lg{width:48px;height:48px;font-size:16px}

/* ---------- links / buttons -------------------------------------- */
.alink{color:var(--accent);font-weight:700;cursor:pointer;font-size:14px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.alink:hover{text-decoration:underline;color:var(--accent)}
.btn{border:1px solid var(--cc-line);background:#fff;color:var(--ink);font:600 13.5px/1 var(--font-sans);padding:10px 16px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--cc-line-strong);background:var(--cc-bg-muted)}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:var(--accent);border-color:var(--accent)}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-press);border-color:var(--accent-press)}

/* ---------- supporting section block ----------------------------- */
.support{margin-top:44px}
.support .sub{font-size:14px;color:var(--muted);margin-top:6px;margin-bottom:22px;max-width:62ch}

/* ---------- entrance ---------------------------------------------- */
.fade-up{animation:edFade .35s var(--ease-out,ease)}
@keyframes edFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.fade-up{animation:none}}

/* ---------- drawer / scrim --------------------------------------- */
.scrim{position:fixed;inset:0;background:rgba(15,30,61,.4);z-index:80;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(720px,94vw);background:#fff;z-index:81;transform:translateX(100%);transition:transform .3s var(--ease-out,ease);box-shadow:-20px 0 50px rgba(15,30,61,.2);display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer-hd{display:flex;align-items:center;justify-content:space-between;padding:24px 30px;border-bottom:1px solid var(--cc-line)}
.drawer-hd h2{font-size:20px;font-weight:700;color:var(--navy)}
.drawer-hd .x{background:var(--cc-bg-muted);border:0;width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:17px}
.drawer-body{flex:1;overflow:auto;padding:24px 30px}