/* Panel Show Stats — WIP lander. Studio-dark set, scoreboard amber, one display face. */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:swap;
}
:root{
  --ink:#0d0f1a;         /* studio black */
  --ink-2:#151829;       /* set panel */
  --paper:#f4efe4;       /* warm off-white text */
  --muted:#a8a59b;
  --amber:#ffd23f;       /* scoreboard lamp */
  --amber-deep:#e0a800;
  --magenta:#ff4f8b;     /* on-air light */
  --line:rgba(244,239,228,.14);
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--body);color:var(--paper);background:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.5;
  background-image:
    radial-gradient(60rem 36rem at 12% -10%, rgba(255,210,63,.16), transparent 60%),
    radial-gradient(50rem 30rem at 95% 100%, rgba(255,79,139,.13), transparent 60%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:auto,auto,4rem 4rem,4rem 4rem;
  background-attachment:fixed;
}
.stage{
  min-height:100svh;display:grid;
  grid-template-rows:auto 1fr auto auto;gap:2rem;
  max-width:72rem;margin:0 auto;padding:clamp(1.25rem,3vw,2.5rem);
}

/* lower-third wordmark */
.lower-third{
  display:inline-flex;align-items:center;gap:.75rem;justify-self:start;
  padding:.55rem .9rem .55rem .7rem;border:1px solid var(--line);
  background:linear-gradient(90deg,var(--ink-2),rgba(21,24,41,.6));
  border-left:.4rem solid var(--amber);
}
.lamp{
  width:.6rem;height:.6rem;border-radius:50%;background:var(--magenta);
  box-shadow:0 0 .6rem var(--magenta);animation:onair 2.4s ease-in-out infinite;
}
.wordmark{font-family:var(--display);font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase}
.wordmark b{color:var(--amber);font-weight:800}
.tag{color:var(--muted);font-size:.85rem;padding-left:.75rem;border-left:1px solid var(--line)}

/* hero */
.hero{align-self:center;max-width:56rem}
.kicker{
  margin:0 0 1rem;display:inline-block;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);background:var(--amber);padding:.3rem .6rem;font-weight:700;
}
h1{
  font-family:var(--display);font-weight:800;margin:0;
  font-size:clamp(3rem,9vw,7.5rem);line-height:.92;letter-spacing:-.02em;
  text-wrap:balance;
}
.lede{max-width:38rem;margin:1.5rem 0 0;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted)}

/* scoreboard */
.board{
  border:1px solid var(--line);background:var(--ink-2);
  padding:.5rem clamp(1rem,2.5vw,1.75rem);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;
}
.row{display:flex;align-items:baseline;gap:1rem;padding:.9rem 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.label{font-size:clamp(1rem,1.6vw,1.25rem)}
.dots{flex:1;border-bottom:2px dotted rgba(244,239,228,.3);transform:translateY(-.35em)}
.value{color:var(--amber);font-size:clamp(1rem,1.6vw,1.25rem);text-align:right;text-shadow:0 0 1rem rgba(255,210,63,.35)}

/* footer */
.foot{display:flex;gap:.6rem;color:var(--muted);font-size:.85rem}

@keyframes onair{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.lamp{animation:none}}
@media (max-width:40rem){
  .tag{display:none}
  .row{flex-wrap:wrap}
  .dots{display:none}
  .value{flex-basis:100%;text-align:left}
}

/* ---- preview gate (login / logout / preview bar) ---- */
.stage--gate{grid-template-rows:auto 1fr auto}
.gate-card{align-self:center;max-width:32rem;width:100%;justify-self:start;border:1px solid var(--line);background:var(--ink-2);padding:clamp(1.5rem,4vw,2.5rem)}
.gate-title{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3rem);line-height:1;letter-spacing:-.02em;margin:0}
.gate-card .lede{font-size:1rem;margin-top:1rem}
.gate-form{display:grid;gap:.6rem;margin-top:1.5rem}
.gate-form label{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gate-form input{font:inherit;font-size:1.1rem;padding:.75rem .9rem;color:var(--paper);background:var(--ink);border:1px solid var(--line);border-radius:0;outline:none}
.gate-form input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,210,63,.25)}
.gate-form button,.btn{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--amber);border:0;padding:.85rem 1.2rem;cursor:pointer;text-decoration:none;display:inline-block}
.gate-form button:hover,.btn:hover{background:var(--amber-deep)}
.gate-error{margin:0;color:var(--magenta);font-size:.95rem}
.gate-back{color:var(--muted);font-size:.9rem;margin:1.25rem 0 0}
.gate-back a,a.gate-back{color:var(--muted)}
.preview-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem clamp(1.25rem,3vw,2.5rem);background:var(--amber);color:var(--ink);font-size:.9rem;font-weight:600}
.preview-bar .lamp{display:inline-block;vertical-align:middle;margin-right:.4rem;background:var(--ink);box-shadow:none;animation:none}
.preview-bar a{color:var(--ink);font-weight:700}