/* ============================================================
   Secret Creation · Operations — v7
   Dark industrial ops-console. One column, scales phone → 32" wall.
   Colours & typography scale follow 03_DASHBOARD_SPEC.md §2.
   ============================================================ */

:root{
  /* canvas */
  --bg:#0B0D0E;
  --panel:#15181A;
  --panel-2:#1C2023;
  --line:#2A2F33;
  --line-soft:#21252880;
  --ink:#EAF0F0;
  --ink-dim:#9AA3A6;
  --ink-faint:#6A7174;

  /* channel ramp (spec §2) */
  --etsy-sc:#D85A30;
  --noths:#378ADD;
  --etsy-lf:#EF9F27;
  --muted-ch:#888780;

  /* performance states (spec §2) */
  --ahead-bg:#E1F5EE;   --ahead-ink:#04342C;
  --slight-bg:#FAEEDA;  --slight-ink:#412402;
  --behind-bg:#FCEBEB;  --behind-ink:#501313;

  --good:#3FB984;
  --bad:#E5604C;

  --r:18px;
  --gap:clamp(10px,1.2vw,26px);

  /* type scale — maps mockup px → 1080p → 1440p (spec table) */
  --t-hero:clamp(60px,10.4vw,278px);
  --t-metric:clamp(36px,5.9vw,164px);
  --t-cell:clamp(28px,4.5vw,122px);
  --t-verdict:clamp(34px,5.0vw,140px);
  --t-body:clamp(13px,1.55vw,46px);
  --t-lab:clamp(10px,1.15vw,34px);
  --t-sub:clamp(11px,1.35vw,38px);

  font-family:"Hanken Grotesk",system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink);min-height:100%}
body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background:
    radial-gradient(120% 80% at 50% -10%, #16201E 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed;
}

/* faint CRT scanline texture — atmosphere, not noise */
.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.35;
  background:repeating-linear-gradient(0deg,transparent 0 3px,#00000022 3px 4px);
  mix-blend-mode:overlay;
}

.app{
  width:100%;
  max-width:1680px;
  margin:0 auto;
  padding:clamp(14px,1.8vw,40px) clamp(14px,2.2vw,52px) clamp(40px,4vw,90px);
  display:flex;flex-direction:column;gap:var(--gap);
}

/* 1 · header ------------------------------------------------ */
.hdr{
  display:flex;align-items:center;gap:clamp(8px,1vw,20px);
  padding:clamp(4px,.5vw,12px) clamp(4px,.6vw,14px);
}
.hdr__mark{height:clamp(20px,2vw,58px);width:auto;display:block;flex:0 0 auto}
.hdr__div{color:var(--ink-faint);font-size:var(--t-sub)}
.hdr__title{
  font-size:var(--t-sub);letter-spacing:.34em;font-weight:600;
  color:var(--ink-dim);
}
.hdr__live{
  margin-left:auto;display:flex;align-items:center;gap:.55em;
  font-family:"Martian Mono",monospace;font-size:var(--t-lab);
  font-weight:600;color:var(--ink-dim);letter-spacing:.04em;
  background:var(--panel);border:1px solid var(--line);
  padding:.5em .9em;border-radius:999px;
}
.dot{
  width:.7em;height:.7em;border-radius:50%;background:var(--ink-faint);
  box-shadow:0 0 0 0 #3FB98400;
}
.hdr__live.is-live .dot{
  background:var(--good);
  animation:pulse 2.4s ease-out infinite;
}
.hdr__live.is-stale .dot{background:var(--etsy-lf)}
.hdr__live.is-down .dot{background:var(--bad)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 #3FB98455}
  70%{box-shadow:0 0 0 .9em #3FB98400}
  100%{box-shadow:0 0 0 0 #3FB98400}
}

/* 2 · Performance Hero — the centrepiece -------------------- */
.hero{
  border-radius:var(--r);
  padding:clamp(20px,2.6vw,64px) clamp(22px,2.8vw,70px) clamp(18px,2.2vw,56px);
  background:var(--panel);
  border:1px solid var(--line);
  position:relative;overflow:hidden;
  transition:background .5s ease, color .5s ease;
}
.hero[data-state="ahead"],
.hero[data-state="on_track"]{background:var(--ahead-bg);color:var(--ahead-ink)}
.hero[data-state="behind_slight"]{background:var(--slight-bg);color:var(--slight-ink)}
.hero[data-state="behind"]{background:var(--behind-bg);color:var(--behind-ink)}
.hero[data-state="loading"]{background:var(--panel);color:var(--ink-dim)}

.hero__eyebrow{
  font-size:var(--t-sub);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;opacity:.72;
}
.hero__main{
  display:flex;align-items:baseline;flex-wrap:wrap;
  gap:clamp(14px,2.4vw,60px);
  margin:clamp(6px,.8vw,18px) 0 clamp(8px,1vw,22px);
}
.hero__verdict{
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:var(--t-hero);font-weight:800;line-height:.86;
  letter-spacing:-.02em;
}
.hero__pace{display:flex;flex-direction:column;line-height:1}
.hero__paceNum{
  font-family:"Martian Mono",monospace;font-weight:800;
  font-size:var(--t-verdict);letter-spacing:-.02em;
}
.hero__paceUnit{
  font-size:var(--t-lab);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;opacity:.6;margin-top:.4em;
}
.hero__line{
  font-size:var(--t-body);font-weight:600;line-height:1.4;
  opacity:.86;max-width:46ch;
}

/* 3 · period toggle ---------------------------------------- */
.periods{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(6px,.7vw,14px);
  background:var(--panel);border:1px solid var(--line);
  padding:clamp(5px,.5vw,12px);border-radius:999px;
}
.period{
  appearance:none;border:0;cursor:pointer;
  background:transparent;color:var(--ink-dim);
  font-family:"Hanken Grotesk";font-size:var(--t-sub);font-weight:600;
  letter-spacing:.02em;padding:clamp(8px,.9vw,22px) 0;border-radius:999px;
  transition:background .18s ease,color .18s ease;
}
.period:hover{color:var(--ink)}
.period.is-active{background:var(--ink);color:var(--bg);font-weight:700}

/* 4 · metric tiles ----------------------------------------- */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.metric{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(16px,2vw,52px) clamp(18px,2vw,52px);
}
.metric__num{
  font-family:"Martian Mono",monospace;font-weight:800;
  font-size:var(--t-metric);line-height:.92;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.metric__lab{
  margin-top:.45em;font-size:var(--t-lab);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);
}

/* 5 / 6 · 4-tile grids ------------------------------------- */
.block{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(16px,1.9vw,46px) clamp(18px,2vw,50px);
}
.block--muted{background:transparent;border-style:dashed;border-color:var(--line-soft)}
.block__h{
  font-size:var(--t-lab);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim);
  margin-bottom:clamp(12px,1.4vw,32px);
  display:flex;align-items:baseline;gap:.7em;
}
.block__sub,.block__h .block__sub{
  font-size:.82em;letter-spacing:.1em;color:var(--ink-faint);
  font-weight:600;text-transform:none;
}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,22px)}
.cell{
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:14px;padding:clamp(14px,1.6vw,40px) clamp(10px,1vw,26px);
  text-align:center;
}
.cell--accent{border-color:#37557d80;background:#15202C}
.cell__num{
  font-family:"Martian Mono",monospace;font-weight:800;
  font-size:var(--t-cell);line-height:.92;font-variant-numeric:tabular-nums;
}
.cell__lab{
  margin-top:.5em;font-size:var(--t-lab);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);
}
.cell.is-good{border-color:#2c5b48;background:#11231C}
.cell.is-good .cell__num{color:var(--good)}
.cell.is-bad{border-color:#5a2f2a;background:#241312}
.cell.is-bad .cell__num{color:var(--bad)}

/* 7 · channels --------------------------------------------- */
.chans{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,30px)}
.chan{display:flex;flex-direction:column;gap:.5em}
.chan__top{
  display:flex;align-items:baseline;justify-content:space-between;gap:1em;
}
.chan__name{
  display:flex;align-items:center;gap:.6em;
  font-size:var(--t-body);font-weight:700;
}
.chan__swatch{width:.85em;height:.85em;border-radius:3px;flex:0 0 auto}
.chan__val{
  font-family:"Martian Mono",monospace;font-weight:700;
  font-size:var(--t-body);font-variant-numeric:tabular-nums;
}
.chan__val small{color:var(--ink-faint);font-weight:600;font-size:.78em;margin-left:.5em}
.chan__bar{
  height:clamp(8px,.8vw,20px);border-radius:999px;
  background:var(--panel-2);overflow:hidden;border:1px solid var(--line);
}
.chan__fill{
  height:100%;border-radius:999px;width:0;
  transition:width 1s cubic-bezier(.22,1,.36,1);
}
.chan__fill.is-over{background-image:linear-gradient(90deg,transparent, #ffffff30)}
.chan--notarget .chan__bar{opacity:.35}
.chan--notarget .chan__val small{color:var(--ink-faint)}

/* 8 · bestsellers ------------------------------------------ */
.best{display:flex;flex-direction:column;gap:clamp(8px,1vw,20px)}
.best__row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(10px,1.2vw,28px);
  padding:clamp(10px,1.1vw,26px) clamp(12px,1.2vw,28px);
  background:var(--panel-2);border:1px solid var(--line);border-radius:14px;
}
.best__rank{
  font-family:"Bricolage Grotesque";font-weight:800;
  font-size:var(--t-body);color:var(--ink-faint);
  width:1.4em;text-align:center;
}
.best__mid{min-width:0}
.best__sku{
  font-family:"Martian Mono",monospace;font-weight:700;
  font-size:var(--t-sub);letter-spacing:-.01em;
}
.best__title{
  font-size:var(--t-lab);color:var(--ink-dim);margin-top:.3em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.best__stat{text-align:right;white-space:nowrap}
.best__orders{
  font-family:"Martian Mono",monospace;font-weight:800;
  font-size:var(--t-body);
}
.best__gross{font-size:var(--t-lab);color:var(--ink-dim);margin-top:.25em}

/* 9 · cash -------------------------------------------------- */
.cash{display:flex;flex-direction:column;gap:.4em}
.cash__pending{font-size:var(--t-body);font-weight:700;color:var(--ink-dim)}
.cash__note{font-size:var(--t-lab);color:var(--ink-faint)}

.foot{
  text-align:center;font-family:"Martian Mono",monospace;
  font-size:var(--t-lab);color:var(--ink-faint);letter-spacing:.06em;
}

/* load-in stagger ------------------------------------------ */
.app>*{animation:rise .55s cubic-bezier(.22,1,.36,1) both}
.app>*:nth-child(1){animation-delay:.02s}
.app>*:nth-child(2){animation-delay:.08s}
.app>*:nth-child(3){animation-delay:.14s}
.app>*:nth-child(4){animation-delay:.18s}
.app>*:nth-child(5){animation-delay:.22s}
.app>*:nth-child(6){animation-delay:.26s}
.app>*:nth-child(7){animation-delay:.30s}
.app>*:nth-child(8){animation-delay:.34s}
.app>*:nth-child(9){animation-delay:.38s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .app>*{animation:none}
  .chan__fill{transition:none}
  .hdr__live.is-live .dot{animation:none}
}

/* phone portrait — keep 4-grids 2x2, keep it breathing ----- */
@media (max-width:540px){
  .grid4{grid-template-columns:1fr 1fr}
  .hero__main{gap:10px}
  .periods{grid-template-columns:repeat(4,1fr)}
  .best__row{grid-template-columns:auto 1fr auto}
}

/* very large kiosk — tighten side rhythm, hero breathes ---- */
@media (min-width:2000px){
  :root{--r:24px}
  .app{gap:clamp(20px,1.3vw,30px)}
}