/* ============================================================
   HSD PRESENTATION ENGINE  —  combination storyboard style
   Reusable across every client deck. Content lives in index.html;
   this file is the design system + the fullscreen slide stage.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --ink:#0f0f0f; --muted:#1f1f1f; --line:#e5e7eb; --paper:#f8fafc;
  /* HSD brand palette: green primary, orange secondary, gold accent (markers only), warm-dark text */
  --blue:#2563EB;  --blue-bg:#DBEAFE;  --blue-soft:#EFF6FF;   /* real-data charts only */
  --green:#0ab463; --green-bg:#cdeede; --green-soft:#f0faf4;
  --amber:#ffa32a; --amber-bg:#ffeccb;--amber-soft:#fff8ec;   /* gold — highlights/eyebrows only */
  --orange:#F16625;--orange-bg:#ffe1d3;--orange-soft:#fff5ef;
  --rose:#dc2626;  --rose-bg:#fee2e2; --rose-soft:#fef2f2;     /* red — negatives */
  --red:#dc2626;   --red-bg:#fee2e2;  --red-soft:#fef2f2;
  --stageW:1280px; --stageH:720px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#0d141c;overflow:hidden;font-family:'Inter',system-ui,sans-serif;color:var(--ink)}

/* ---------- stage: a fixed 1280x720 canvas, JS-scaled to fit ---------- */
#viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#stage{width:var(--stageW);height:var(--stageH);position:relative;transform-origin:center center;flex:none}
/* flex:none is load-bearing: #stage is a flex child of #viewport, and without it any viewport
   narrower than 1280px (e.g. a phone-width iframe embed) shrinks the stage's layout width BEFORE
   the JS transform:scale() runs, double-shrinking every slide. */

/* ---------- slides ---------- */
.slide{position:absolute;inset:0;width:var(--stageW);height:var(--stageH);
  background:
    radial-gradient(#eef1f5 1px, transparent 1px) 0 0/38px 38px,
    #ffffff;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  padding:44px 72px 60px;overflow:hidden}
.slide.active{display:flex}
.slide.prev,.slide.next{display:none}

/* per-slide accent: set with class c-blue / c-green / ... on .slide */
.c-blue  {--ca:var(--green); --cbg:var(--green-bg); --csoft:var(--green-soft)}
.c-green {--ca:var(--green); --cbg:var(--green-bg); --csoft:var(--green-soft)}
.c-amber {--ca:var(--orange);--cbg:var(--orange-bg);--csoft:var(--orange-soft)}
.c-orange{--ca:var(--orange);--cbg:var(--orange-bg);--csoft:var(--orange-soft)}
.c-rose  {--ca:var(--rose);  --cbg:var(--rose-bg);  --csoft:var(--rose-soft)}
.c-red   {--ca:var(--red);   --cbg:var(--red-bg);   --csoft:var(--red-soft)}

/* ---------- shared building blocks ---------- */
.pill{display:inline-flex;align-items:center;gap:10px;color:#fff;background:var(--ca);
  font-family:'Poppins';font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 22px;border-radius:999px;border:2px solid #0f0f0f;box-shadow:3px 3px 0 #0f0f0f}
.pill .ic{font-size:17px;line-height:1}
/* line-icon system (Lucide sprite) — fill:none stroke icons, accent-colored */
.ic svg,.ichip svg,.rb svg{fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}
.pill .ic{display:inline-flex;align-items:center}
.pill .ic svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.7}
.ichip svg{width:24px;height:24px;stroke:#fff;stroke-width:2.6}
.crow .rb svg{width:18px;height:18px;stroke:#fff;stroke-width:2.6}

.marks{color:var(--ca);font-family:'Poppins';font-weight:800;font-size:30px;letter-spacing:.18em;text-align:center}

.headline{font-family:'Poppins';font-weight:700;color:var(--ink);text-align:center;line-height:1.14;letter-spacing:-.012em}
.headline .hl{color:var(--ca)}
.sub{font-family:'Poppins';font-weight:600;color:var(--muted);text-align:center;line-height:1.25}

/* mark/highlight (gold marker like gamma) */
.mk{background:linear-gradient(180deg,transparent 58%,#ffa32a55 58%);padding:0 4px}

/* accent glow bar under a hero headline */
.glow{position:relative}
.glow::after{content:"";position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
  width:120px;height:7px;border-radius:6px;background:var(--ca)}

/* section label "button" */
.lbl{display:inline-flex;align-items:center;gap:10px;background:var(--ca);color:#fff;
  font-family:'Poppins';font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 18px;border-radius:8px;border:2px solid #0f0f0f;box-shadow:3px 3px 0 #0f0f0f}

/* ===== unified card — training-hub neo-brutalist: white box, 2px black border, hard offset shadow ===== */
.card{background:#fff;border:2px solid #0f0f0f;border-radius:10px;
  box-shadow:5px 5px 0 #0f0f0f;padding:22px 24px;position:relative}
.card .ct{font-family:'Poppins';font-weight:800;font-size:21px;color:var(--ink);line-height:1.15}
.card p{font-size:15.5px;color:#222222;line-height:1.5}
.card.rail{border:2px solid #0f0f0f}            /* no colored rail — the black border + shadow is the signature */
.card.glowbox{position:relative;z-index:1}
.card.glowbox::before{display:none}             /* glow removed */

/* icon chip — solid accent circle + white icon (HSD website style) */
.ichip{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--ca);border:2px solid #0f0f0f}

/* numbered token — accent fill, black border */
.num{width:50px;height:50px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-family:'Poppins';font-weight:800;font-size:23px;color:#fff;background:var(--ca);border:2px solid #0f0f0f;flex:none}

/* feature row — same neo-brutalist box */
.crow{display:flex;gap:14px;align-items:flex-start;background:#fff;border:2px solid #0f0f0f;
  border-radius:10px;padding:14px 16px;box-shadow:4px 4px 0 #0f0f0f}
.crow .rb{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:18px;background:var(--ca);border:2px solid #0f0f0f;flex:none}
.crow .rt b{font-family:'Poppins';font-weight:700;font-size:15.5px;color:var(--ink);display:block}
.crow .rt span{font-size:14px;color:#242424;line-height:1.42}

/* chips row */
.chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid #0f0f0f;
  border-radius:999px;padding:7px 15px;font-family:'Poppins';font-weight:600;font-size:13px;color:#0f0f0f}
.chip .d{width:8px;height:8px;border-radius:50%;background:var(--ca)}

/* green stat ticker bar (HSD website signature) */
.ticker{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;background:var(--green);color:#fff;
  border:2px solid #0f0f0f;border-radius:10px;box-shadow:4px 4px 0 #0f0f0f;
  font-family:'Poppins';font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase}
.ticker .it{padding:11px 16px;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.ticker .it .s{color:#ffd57e;font-size:13px}

/* stat */
.statbig{font-family:'Poppins';font-weight:900;color:var(--ca);line-height:1;letter-spacing:-.02em}

/* quote */
.quote{background:var(--csoft);border-left:4px solid var(--ca);border-radius:0 8px 8px 0;
  padding:13px 16px;font-size:15px;color:#1a1a1a;font-style:italic;line-height:1.45;font-weight:500}

/* divider */
.vline{width:1px;background:var(--line);align-self:stretch}
.hr{height:1px;background:var(--line);width:100%}

/* a soft blurred background accent blob (premium depth) */
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.16;z-index:0;pointer-events:none}

/* ============================================================
   DASHBOARD MOCKUP PRIMITIVES (HTML-built, sharp at any scale)
   ============================================================ */
.mock{background:#fff;border:2px solid #0f0f0f;border-radius:10px;overflow:hidden;
  box-shadow:6px 6px 0 #0f0f0f}
/* real app header (no fake window dots) */
.mock-top{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid #e6e9ee;background:#fff}
.mock-top .mlogo{width:27px;height:27px;border-radius:7px;background:linear-gradient(135deg,#0ab463,#07854a);display:flex;align-items:center;justify-content:center}
.mock-top .mlogo svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mock-top .mname{font-family:'Inter';font-weight:700;font-size:13.5px;color:#202124}
.mock-top .mdate{margin-left:auto;font-family:'Inter';font-size:11.5px;color:#3c4043;border:1px solid #dadce0;border-radius:7px;padding:4px 11px;background:#fff}
.mock-top .mav{width:27px;height:27px;border-radius:50%;background:#e8eaed;display:flex;align-items:center;justify-content:center;font-family:'Inter';font-size:10px;font-weight:700;color:#5f6368}
.mock-body{padding:15px;background:#f1f3f4}
/* real-dashboard KPI card (Google Material / LSA style): white card on gray, light-weight number */
.kpi{background:#fff;border:1px solid #e3e6ea;border-radius:8px;padding:12px 14px}
.kpi .k{font-family:'Inter';font-weight:500;font-size:12px;color:#5f6368}
.kpi .v{font-family:'Inter';font-weight:600;font-size:27px;color:#202124;line-height:1.15;margin-top:2px;letter-spacing:-.01em}
.kpi .dl{font-size:11.5px;font-weight:600;color:#1e8e3e;margin-top:2px}
/* unified KPI panel — one card with dividers (not separate boxes) */
.kpirow{display:flex;background:#fff;border:1px solid #e3e6ea;border-radius:8px;overflow:hidden}
.kpirow .kpi{flex:1;border:none;border-radius:0;border-right:1px solid #edf0f3}
.kpirow .kpi:last-child{border-right:none}
.bar{height:8px;border-radius:5px;background:var(--cbg);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:5px;background:var(--ca)}

/* ---------- chrome: progress, counter, nav arrows ---------- */
#bar{position:fixed;top:0;left:0;height:4px;background:var(--accent,#2563EB);width:0;z-index:50;transition:width .35s ease}
.nav{position:fixed;bottom:18px;right:18px;z-index:50;display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border:1px solid #dfe5ea;
  border-radius:999px;padding:7px 9px;box-shadow:0 14px 30px -14px rgba(0,0,0,.4)}
.nav button{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;background:#16202b;color:#fff;
  font-size:17px;display:flex;align-items:center;justify-content:center;transition:transform .12s,background .2s}
.nav button:hover{transform:scale(1.08)}
.nav button:disabled{opacity:.3;cursor:default;transform:none}
.nav .count{font-family:'Poppins';font-weight:700;font-size:14px;color:#41505a;min-width:54px;text-align:center}
#fsbtn{position:fixed;top:16px;right:16px;z-index:50;width:40px;height:40px;border-radius:11px;border:none;cursor:pointer;
  background:rgba(255,255,255,.85);backdrop-filter:blur(8px);font-size:17px;box-shadow:0 8px 20px -10px rgba(0,0,0,.4)}
/* professional in-stage footer (logo + prepared-for + confidential) */
.deckfoot{position:absolute;left:0;right:0;bottom:0;height:40px;z-index:6;pointer-events:none;
  display:flex;align-items:center;gap:11px;padding:0 30px;
  font-family:'Poppins';font-weight:600;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#9aa6b0}
.deckfoot .dotg{width:8px;height:8px;border-radius:50%;background:#0ab463}
.deckfoot b{color:#566270;font-weight:700}
.deckfoot .sep{color:#c6ced4}

@media print{.nav,#fsbtn,#bar,.brandtag{display:none}}