/* css/showstat.css — Braun redesign whole-show "projected wrap" status bar (v3.0).
   Imported into `components`. Authoritative values: rd-styles.css §"WHOLE-SHOW STATUS". */

.showstat { flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 9px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-family: var(--mono); }
.showstat[hidden] { display: none; }
.showstat__lead { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.showstat__i { display: flex; align-items: baseline; gap: 7px; }
.showstat__k { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.showstat__v { font-size: 15px; font-weight: 600; color: var(--fg); letter-spacing: .02em; }
.showstat__v.is-late { color: var(--error); }
.showstat__v.is-ahead { color: var(--blue); }
.showstat__arrow { color: var(--faint); font-size: 13px; }
.showstat__sp { flex: 1; }
.showstat__pill { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; }
.showstat__pill.is-on { color: var(--green); border-color: color-mix(in oklab, var(--green) 40%, transparent); background: color-mix(in oklab, var(--green) 12%, transparent); }
.showstat__pill.is-late { color: var(--error); border-color: color-mix(in oklab, var(--error) 40%, transparent); background: color-mix(in oklab, var(--error) 12%, transparent); }
.showstat__pill.is-ahead { color: var(--blue); border-color: color-mix(in oklab, var(--blue) 45%, transparent); background: color-mix(in oklab, var(--blue) 12%, transparent); }
/* phone compact */
.showstat--c { justify-content: center; gap: 10px; padding: 10px 16px; }
.showstat--c .showstat__k { font-size: 11px; }
.showstat--c b { font-size: 16px; color: var(--fg); letter-spacing: .02em; }