/* Lab 03 — The Scoreboard. Board + tiles only; everything else on the page
   is the shared design system (styles.css). Tokens only, both themes. */

/* the board — one panel, terminal-calm */
.sboard{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(24px,4vw,44px);margin-top:44px}

/* status row — words carry the state, the dot only echoes it */
.sboard__top{display:flex;align-items:center;gap:10px;padding-bottom:22px;border-bottom:1px solid var(--border)}
.sboard__dot{flex:none;width:8px;height:8px;border-radius:var(--r-pill);background:var(--green);box-shadow:0 0 8px rgba(22,201,100,.5);animation:sbpulse 2.4s ease-in-out infinite}
.sboard[data-state="error"] .sboard__dot{background:var(--danger);box-shadow:none;animation:none}
.sboard__status{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
@keyframes sbpulse{0%,100%{box-shadow:0 0 8px rgba(22,201,100,.5)}50%{box-shadow:0 0 14px rgba(22,201,100,.9)}}

/* the four tiles */
.sboard__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,40px) clamp(20px,3vw,36px);padding:clamp(24px,4vw,36px) 0}
@media(min-width:880px){.sboard__grid{grid-template-columns:repeat(4,1fr)}}
.sbstat__v{font:500 clamp(30px,4.5vw,50px)/1.05 var(--mono);letter-spacing:-.02em;color:var(--accent-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* worded values (dates, "None on record") sit a step smaller so they hold one line */
.sbstat__v--date{font-size:clamp(22px,2.6vw,30px);line-height:1.2;padding:5px 0}
.sbstat__k{font:400 14px/1.4 var(--body);color:var(--text-2);margin-top:10px}
.sbstat__note{font:400 12.5px/1.5 var(--body);color:var(--text-3);margin-top:4px}

/* the signature line — the board's one sentence */
.sboard__sig{margin:0;padding-top:22px;border-top:1px solid var(--border);font:600 clamp(16px,1.8vw,19px)/1.4 var(--display);color:var(--text);display:flex;align-items:center;gap:10px}
.sboard__sig .pill__dot{flex:none}

/* the verify-it-yourself endpoint, shown as code */
.sboard-src{font:500 13px/1.6 var(--mono);color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 16px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
.sboard-src b{color:var(--accent-ink);font-weight:500}

@media(prefers-reduced-motion:reduce){
  .sboard__dot{animation:none}
}