/* broadcast.css — MISSION v12 design system (Broadcast reskin)
 * ONE source. Loaded by every reskinned surface.
 * Tokens: palette, type scale 1.333 (base 16), 8px spacing.
 * Fonts: Space Grotesk (display) + Inter (body), Google Fonts only.
 * Contrast: cream/deep 13.1:1, lime/deep 11.8:1, ink/cream 16.2:1,
 *           ink/lime 14.4:1, cream/ink 16.2:1 — all pass WCAG AA/AAA.
 */

:root{
  /* palette */
  --deep:#0b2e22;      /* deep green */
  --deep2:#123c2c;
  --cream:#f4efe4;
  --lime:#d4f24a;      /* chartreuse */
  --ink:#0a1410;

  /* muted variants — solid colours, so contrast can be measured with alpha
     compositing without surprises. */
  --muted-on-deep:#c2c6bd;   /* passes AA on --deep (~7.3:1) */
  --muted-on-cream:#3a4640;  /* passes AA on --cream (~9.4:1) */
  --muted-on-lime:#2b3a25;   /* passes AA on --lime (~9.6:1) */
  --muted-on-ink:#c8ccc4;    /* passes AA on --ink (~11.2:1) */

  /* typography */
  --disp:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --t-xs:.75rem;
  --t-s:.875rem;
  --t-m:1.333rem;
  --t-l:1.777rem;
  --t-xl:2.369rem;
  --t-2xl:3.157rem;
  --t-3xl:clamp(3.5rem,8vw,5.6rem);

  /* spacing (8px) */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s7:56px; --s8:64px; --s9:80px; --s10:96px;

  --rail:1120px;
}

*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;background:var(--cream);color:var(--ink);
  font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}

/* rail */
.rail{max-width:var(--rail);margin:0 auto;padding:0 var(--s3)}

/* headings */
h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:700;
  letter-spacing:-.035em;line-height:1.02}
h1{font-size:var(--t-3xl)}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-l);letter-spacing:-.02em;line-height:1.15}
h4{font-size:var(--t-m);letter-spacing:-.015em;line-height:1.2}
p{margin:0}

.xs{font-size:var(--t-xs)}
.s{font-size:var(--t-s)}
.m{font-size:var(--t-m)}

/* full-bleed bands */
.band{padding:var(--s10) 0}
.band-deep{background:var(--deep);color:var(--cream)}
.band-deep2{background:var(--deep2);color:var(--cream)}
.band-cream{background:var(--cream);color:var(--ink)}
.band-lime{background:var(--lime);color:var(--ink)}
.band-ink{background:var(--ink);color:var(--cream)}

.band-deep .muted,.band-deep2 .muted{color:var(--muted-on-deep)}
.band-cream .muted{color:var(--muted-on-cream)}
.band-lime .muted{color:var(--muted-on-lime)}
.band-ink .muted{color:var(--muted-on-ink)}

.kick{display:inline-block;font-family:var(--disp);font-size:var(--t-xs);
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:var(--s3);opacity:.9}

/* sticky mini-nav that inverts per band */
.mini{position:sticky;top:0;z-index:40;transition:background .4s,color .4s}
.mini .rail{display:flex;align-items:center;gap:var(--s3);height:60px}
.mini a:not(.btn){color:inherit;text-decoration:none;font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;opacity:.78;
  transition:opacity .15s}
.mini a:not(.btn):hover,.mini a:not(.btn):focus-visible{opacity:1}
.mini .brand{font-family:var(--disp);font-weight:700;font-size:var(--t-m);
  letter-spacing:-.03em;text-transform:none;opacity:1}
.mini.on-deep,.mini.on-deep2{background:var(--deep);color:var(--cream)}
.mini.on-cream{background:var(--cream);color:var(--ink)}
.mini.on-lime{background:var(--lime);color:var(--ink)}
.mini.on-ink{background:var(--ink);color:var(--cream)}
.sp{margin-left:auto}

/* buttons */
.btn{display:inline-block;font-family:var(--disp);font-weight:700;
  font-size:var(--t-s);background:var(--lime);color:var(--ink);
  border:0;padding:14px 26px;border-radius:99px;text-decoration:none;
  cursor:pointer;letter-spacing:-.01em;transition:transform .18s}
.btn:hover,.btn:focus-visible{transform:translateY(-2px)}
.btn.dark{background:var(--ink);color:var(--cream)}
.btn.cream{background:var(--cream);color:var(--ink)}
.btn.ghost{background:transparent;color:inherit;border:2px solid currentColor}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.band-lime :focus-visible{outline-color:var(--ink)}

/* stat rows */
.figs{display:flex;flex-wrap:wrap;gap:var(--s7);margin-top:var(--s7)}
.fig b{display:block;font-family:var(--disp);font-size:var(--t-2xl);
  line-height:1;letter-spacing:-.04em}
.fig span{font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;opacity:.72}

/* mosaic grid + cards */
.mosaic{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:820px){
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .ep.xl{grid-column:1/-1;display:grid;
    grid-template-columns:1.1fr 1fr;gap:var(--s5);align-items:center}
}
.ep{background:var(--cream);color:var(--ink);border-radius:18px;
  padding:var(--s3);transition:transform .2s,box-shadow .2s}
.band-deep .ep,.band-deep2 .ep,.band-ink .ep{
  background:rgba(244,239,228,.08);color:var(--cream)}
.ep:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(10,20,16,.22)}
.ep h3{margin:var(--s2) 0 var(--s1)}
.ep.xl h3{font-size:var(--t-xl);letter-spacing:-.035em}
.ep .hook{font-size:var(--t-s);opacity:.85}
.ep .body{white-space:pre-wrap;word-break:break-word;font-size:var(--t-s);
  line-height:1.65;background:rgba(10,20,16,.06);border-radius:12px;
  padding:var(--s2);margin-top:var(--s2);max-height:260px;overflow:auto}
.band-deep .ep .body,.band-deep2 .ep .body,.band-ink .ep .body{
  background:rgba(0,0,0,.32)}
.ep .tag{font-family:var(--disp);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;opacity:.7}

.epf{display:flex;align-items:center;gap:var(--s2);
  margin-top:var(--s2);flex-wrap:wrap}
.act{font-family:var(--disp);font-weight:700;font-size:var(--t-xs);
  letter-spacing:.06em;text-transform:uppercase;background:var(--ink);
  color:var(--cream);border:0;border-radius:99px;padding:9px 16px;
  cursor:pointer;transition:transform .16s,background .16s}
.act:hover,.act:focus-visible{transform:translateY(-2px)}
.act.on{background:var(--lime);color:var(--ink)}
.band-deep .act,.band-deep2 .act,.band-ink .act{
  background:var(--cream);color:var(--ink)}
.act[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.met{font-size:var(--t-xs);opacity:.72}
.epf .met:first-of-type{margin-left:auto}

details summary{cursor:pointer;font-family:var(--disp);font-weight:700;
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  margin-top:var(--s2);opacity:.85}
details[open] summary{margin-bottom:var(--s1)}

/* chunky toggle pills */
.switches{display:flex;gap:var(--s2);overflow-x:auto;
  padding:var(--s3) 0;scrollbar-width:none}
.switches::-webkit-scrollbar{display:none}
.sw-pill{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:var(--disp);font-weight:700;font-size:var(--t-xs);
  letter-spacing:.06em;text-transform:uppercase;
  background:rgba(10,20,16,.09);color:var(--ink);border:0;border-radius:99px;
  padding:8px 16px 8px 8px;cursor:pointer;transition:background .2s}
.band-deep .sw-pill,.band-deep2 .sw-pill,.band-ink .sw-pill{
  background:rgba(244,239,228,.1);color:var(--cream)}
.sw-pill i{width:30px;height:18px;border-radius:99px;
  background:rgba(10,20,16,.28);position:relative;transition:background .2s;flex:none}
.band-deep .sw-pill i,.band-deep2 .sw-pill i,.band-ink .sw-pill i{
  background:rgba(244,239,228,.28)}
.sw-pill i::after{content:'';position:absolute;top:2px;left:2px;
  width:14px;height:14px;border-radius:99px;background:var(--cream);
  transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.sw-pill[aria-pressed=true]{background:var(--lime);color:var(--ink)}
.sw-pill[aria-pressed=true] i{background:rgba(10,20,16,.35)}
.sw-pill[aria-pressed=true] i::after{transform:translateX(12px)}

/* podium (leaderboard) */
.podium{display:grid;gap:var(--s3);grid-template-columns:1fr;margin-bottom:var(--s5)}
@media(min-width:760px){
  .podium{grid-template-columns:repeat(3,1fr);align-items:end}
}
.pod{border-radius:20px;padding:var(--s4);color:var(--ink);display:grid;gap:var(--s2)}
.pod .av{width:64px;height:64px;border-radius:99px;display:grid;
  place-items:center;font-family:var(--disp);font-weight:700;
  font-size:var(--t-m);background:rgba(10,20,16,.14)}
.pod b{font-family:var(--disp);font-size:var(--t-xl);
  letter-spacing:-.03em;line-height:1}
.pod-1{background:var(--lime);min-height:230px}
.pod-2{background:#b9d9c9;min-height:196px}
.pod-3{background:#e7dcc4;min-height:180px}
.pod .r{font-family:var(--disp);font-size:var(--t-2xl);line-height:1;opacity:.42}

.lb{display:grid}
.lbrow{display:grid;grid-template-columns:44px 1fr auto auto;gap:var(--s2);
  align-items:center;padding:var(--s2) 0;
  border-bottom:1px solid rgba(244,239,228,.18)}
.band-cream .lbrow{border-bottom-color:rgba(10,20,16,.14)}
.lbrow.me{background:rgba(212,242,74,.16);border-radius:12px;
  padding-left:var(--s2);padding-right:var(--s2)}
.lbrow .n{font-family:var(--disp);font-weight:700;opacity:.62}
.you{font-family:var(--disp);font-size:var(--t-xs);background:var(--lime);
  color:var(--ink);border-radius:99px;padding:2px 9px;margin-left:8px}

/* forms + split login */
.split{display:grid;grid-template-columns:1fr;min-height:100vh}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}
.split>div{padding:var(--s9) var(--s5);display:flex;flex-direction:column;justify-content:center}
label{display:block;font-family:var(--disp);font-weight:700;font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;margin:var(--s3) 0 var(--s1);opacity:.85}
input[type=text],input[type=email],input[type=password]{
  width:100%;font:inherit;font-size:var(--t-s);background:rgba(10,20,16,.06);
  color:inherit;border:2px solid transparent;border-radius:12px;padding:13px 15px}
.band-deep input[type=text],.band-deep input[type=email],.band-deep input[type=password],
.band-ink input[type=text],.band-ink input[type=email],.band-ink input[type=password]{
  background:rgba(244,239,228,.1);color:var(--cream)}
input:focus{outline:none;border-color:var(--lime)}
.tabs{display:flex;gap:var(--s1);margin-bottom:var(--s2)}
.tabx{font-family:var(--disp);font-weight:700;font-size:var(--t-s);
  background:rgba(10,20,16,.08);border:0;border-radius:99px;
  padding:10px 20px;cursor:pointer;color:inherit;transition:background .16s}
.band-deep .tabx,.band-ink .tabx{background:rgba(244,239,228,.12)}
.tabx[aria-selected=true]{background:var(--lime);color:var(--ink)}
.row2{display:grid;gap:var(--s2);grid-template-columns:1fr 1fr}

/* library cards */
.libs{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:820px){.libs{grid-template-columns:repeat(3,1fr)}}
.lib{display:block;text-decoration:none;color:inherit;
  background:rgba(244,239,228,.08);border-radius:18px;
  padding:var(--s4);transition:transform .2s,background .2s}
.band-cream .lib{background:rgba(10,20,16,.06)}
.lib:hover,.lib:focus-visible{transform:translateY(-4px);background:var(--lime);color:var(--ink)}
.lib b{display:block;font-family:var(--disp);font-size:var(--t-xl);
  letter-spacing:-.04em;line-height:1}

/* profile / dashboard */
.prof{display:grid;gap:var(--s3);grid-template-columns:1fr;align-items:center}
@media(min-width:760px){.prof{grid-template-columns:auto 1fr auto}}
.ava{width:92px;height:92px;border-radius:99px;background:var(--lime);
  color:var(--ink);display:grid;place-items:center;
  font-family:var(--disp);font-weight:700;font-size:var(--t-xl)}
.badge{display:inline-block;font-family:var(--disp);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;background:var(--lime);
  color:var(--ink);border-radius:99px;padding:4px 12px}
.badge.ghost{background:transparent;color:inherit;border:2px solid currentColor}

.meter{height:12px;border-radius:99px;background:rgba(10,20,16,.16);overflow:hidden}
.band-deep .meter,.band-deep2 .meter,.band-ink .meter{
  background:rgba(244,239,228,.16)}
.meter i{display:block;height:100%;background:var(--lime)}

/* excerpt reveal */
.excerpt{position:relative;margin-top:var(--s2)}
.excerpt pre{white-space:pre-wrap;word-break:break-word;font-size:var(--t-s);
  line-height:1.62;margin:0;max-height:7.4em;overflow:hidden;opacity:.9;
  font-family:var(--sans);
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
.ep.xl .excerpt pre{max-height:11em}
.ep[open-full] .excerpt pre{max-height:none;
  -webkit-mask-image:none;mask-image:none;opacity:1}
.more{margin-top:var(--s1);font-family:var(--disp);font-weight:700;
  font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;
  background:none;border:0;padding:4px 0;color:inherit;opacity:.75;
  cursor:pointer}
.more:hover,.more:focus-visible{opacity:1}
.more::after{content:' ↓'}
.ep[open-full] .more::after{content:' ↑'}

/* skeleton / empty */
.sk{background:rgba(10,20,16,.06);border-radius:18px;padding:var(--s3)}
.band-deep .sk,.band-deep2 .sk,.band-ink .sk{background:rgba(244,239,228,.08)}
.sk i{display:block;height:12px;border-radius:6px;margin-bottom:10px;
  background:linear-gradient(90deg,rgba(10,20,16,.08),rgba(10,20,16,.16),rgba(10,20,16,.08));
  background-size:200% 100%;animation:sh 1.3s linear infinite}
.sk i:nth-child(2){width:70%}
.sk i:nth-child(3){width:44%}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.empty{grid-column:1/-1;text-align:center;padding:var(--s9) var(--s3);
  border-radius:20px;background:rgba(10,20,16,.06)}
.band-deep .empty,.band-deep2 .empty,.band-ink .empty{background:rgba(244,239,228,.08)}
.empty b{display:block;font-family:var(--disp);font-size:var(--t-l);margin-bottom:var(--s1)}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(6px);
  background:var(--lime);color:var(--ink);padding:12px 20px;border-radius:99px;
  font-family:var(--disp);font-weight:700;font-size:var(--t-xs);opacity:0;
  pointer-events:none;transition:.18s;z-index:70}
.toast.show{opacity:1;transform:translateX(-50%)}

/* draft banner (legal pages) */
.draft-banner{background:var(--lime);color:var(--ink);
  padding:var(--s2) 0;text-align:center;font-family:var(--disp);
  font-weight:700;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase}

/* reveal animation */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* visually-hidden helper */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* reduced motion — kill every transition/animation and reveal */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;
    animation-iteration-count:1!important}
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.btn:focus-visible,.act:hover,.act:focus-visible,
  .ep:hover,.lib:hover{transform:none}
}

/* mobile tweaks */
@media(max-width:760px){
  .mini .rail>a:not(.brand):not(.btn){display:none}
  .band{padding:var(--s8) 0}
  .row2{grid-template-columns:1fr}
  .split>div{padding:var(--s7) var(--s3)}
  .figs{gap:var(--s4)}
  h1{font-size:clamp(2.2rem,10vw,3.4rem)}
}

/* prompt cards inside dashboards */
.prompt-card{background:rgba(244,239,228,.06);border-radius:14px;
  padding:var(--s3);display:grid;gap:var(--s1)}
.band-cream .prompt-card{background:rgba(10,20,16,.05)}
.prompt-card h4{margin:0}
.prompt-card .cat{font-family:var(--disp);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;opacity:.72}
.prompt-card pre{white-space:pre-wrap;word-break:break-word;
  font-family:var(--sans);font-size:var(--t-s);line-height:1.6;margin:0;
  background:rgba(10,20,16,.06);border-radius:10px;padding:var(--s2);
  max-height:260px;overflow:auto}
.band-cream .prompt-card pre{background:rgba(10,20,16,.05)}

/* footer */
.foot{padding:var(--s8) 0 var(--s10);background:var(--ink);color:var(--cream)}
.foot a{color:var(--lime);text-decoration:none}
.foot a:hover,.foot a:focus-visible{text-decoration:underline}
.foot-cols{display:grid;gap:var(--s5);grid-template-columns:1fr;margin-top:var(--s5)}
@media(min-width:820px){.foot-cols{grid-template-columns:2fr 1fr 1fr 1fr}}
.foot h4{font-family:var(--disp);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:var(--s2);color:var(--cream);opacity:.75}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}