/*
* show/show — the stylesheet for THE SHOW's own page (GET /show).
*
* MOVED. Every rule between `.pp-head.show` and `.fmt-tag` below is
* src/views/dashboard/styles.css's, verbatim: the picker, the episode lines,
* the verdict card and the ON AIR bar were that file's lines and are these.
*
* STAYED BEHIND. The dashboard's OWN verdict strip (`.verdict-strip`,
* `-label`, `-pill`, `-dir`, `-name`, `-pts`) only shares a prefix with the
* show's `.verdict-card`: a grep on `.verdict` takes it and unstyles the
* answer-first strip on `/`. So does a grep on `.vs` — styles.css's bare
* `.vs` is the LEAGUES lens's divider (league-card.js), and the show's
* `or` is covered by `.show-custom .vs`, which won
* on specificity anyway.
*
* DUPLICATED, because this page links no dashboard stylesheet (Final Drive's
* precedent, and that file is 1,555 lines of guide rules for a page with no
* guide): the `.pp-head` base, `.pp-sub`, `.pp-empty`, and the `blink`
* keyframe the ON AIR dot runs on.
*
* Mobile-first for 320 / 768 / 1024 / 1440: one fluid reading column that
* stops widening at 820px, because a transcript is read and a 1,240px line
* is not. Every control is >= 44px.
*/
/* ---------- page base -------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* The dashboard's design tokens (styles.css) — the ten this page's rules
actually read, at the same values. Adding an eleventh means copying it
from there, never inventing a shade here. */
:root {
--bg: #0b0d10;
--surface-2: #1b1f26;
--border: #2a303a;
--border-soft: #21262e;
--text: #f2f4f7;
--muted: #9aa4b2;
--warn: #f59e0b;
--gold: #eab308;
--radius: 12px;
/* The show's one accent, already the colour of every moved rule below. */
--show: #2dd4bf;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
min-height: 100vh;
/* Standalone iOS: without this the last line of a transcript sits under
the home-indicator bar. The 0px fallback leaves a browser tab alone. */
padding-bottom: env(safe-area-inset-bottom, 0px);
}
a {
color: inherit;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip {
position: absolute;
left: -9999px;
top: 0;
background: var(--show);
color: #06251f;
padding: 12px 16px;
z-index: 60;
border-radius: 0 0 8px 0;
}
.skip:focus {
left: 0;
}
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
/* The reading column. 14px gutters at 320 (the shell's own are 14px too), so
nothing on this page can push the document wider than the viewport. */
#show {
max-width: 820px;
margin: 0 auto;
padding: 14px 14px 24px;
}
/* ---------- copied from dashboard.css, because this page does not link it -- */
.pp-head {
display: flex;
align-items: baseline;
gap: 8px;
/* S-35 made this an ; the UA margin would be spacing the move never had. */
margin: 0;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.07em;
padding: 2px 2px 8px;
}
.pp-sub {
font-size: 0.7rem;
color: var(--muted);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
.pp-empty {
color: var(--muted);
font-size: 0.85rem;
padding: 14px 4px;
}
/* The ON AIR dot's animation. It stays on the dashboard too — two other
rules there run on it — so this is a copy, not a move. */
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
/* ---------- moved verbatim from dashboard.css --------------------------- */
.pp-head.show {
color: #2dd4bf;
}
/* --- THE SHOW: builder + episode player (teal) --- */
.show-intro {
color: var(--muted);
font-size: 0.82rem;
margin: 2px 2px 12px;
}
.show-disabled {
background: rgba(245, 158, 11, 0.1);
border: 1px solid rgba(245, 158, 11, 0.4);
color: var(--warn);
border-radius: 10px;
padding: 12px 14px;
font-size: 0.85rem;
}
/* The picker's own rules (.seg-pick … .show-record) are src/views/show/
picker.css, linked after this file — moved there, verbatim, in S-38. */
.show-onair {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
color: #ef4444;
margin: 4px 2px 12px;
}
.show-onair .dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #ef4444;
animation: blink 1.4s infinite;
}
.seg-heading {
display: flex;
align-items: baseline;
gap: 8px;
margin: 16px 2px 8px;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.05em;
color: #2dd4bf;
}
.line {
padding: 7px 2px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
animation: lineIn 0.3s ease;
}
@keyframes lineIn {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: none;
}
}
.line .who {
font-weight: 800;
font-size: 0.7rem;
letter-spacing: 0.05em;
}
.line.rex .who {
color: #4f8ff7;
}
.line.vera .who {
color: #f472b6;
}
.line.research {
color: var(--muted);
font-style: italic;
font-size: 0.8rem;
}
.line.research .who {
color: #94a3b8;
}
.line .say {
font-size: 0.92rem;
line-height: 1.4;
margin-top: 1px;
}
.line.now {
background: rgba(45, 212, 191, 0.07);
border-radius: 6px;
}
.verdict-card {
background: var(--surface-2, #171e2e);
border: 1px solid rgba(45, 212, 191, 0.5);
border-radius: 12px;
padding: 13px 15px;
margin: 10px 2px 4px;
}
.verdict-call {
font-size: 1.05rem;
font-weight: 800;
color: #2dd4bf;
}
.verdict-head {
font-size: 0.78rem;
color: var(--muted);
margin-bottom: 6px;
}
.verdict-body {
font-size: 0.86rem;
line-height: 1.45;
margin-top: 6px;
}
.act-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 9px;
align-items: baseline;
padding: 6px 0;
border-top: 1px solid rgba(255, 255, 255, 0.06);
margin-top: 6px;
}
.act {
font-size: 0.63rem;
font-weight: 800;
letter-spacing: 0.05em;
padding: 3px 8px;
border-radius: 999px;
white-space: nowrap;
}
.act.act-for {
color: #22c55e;
border: 1px solid rgba(34, 197, 94, 0.5);
}
.act.act-against {
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.5);
}
.act.act-watch {
color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.5);
}
.act-what {
font-size: 0.88rem;
font-weight: 600;
overflow-wrap: break-word;
}
.act-why {
display: block;
color: var(--muted);
font-size: 0.76rem;
font-weight: 400;
margin-top: 1px;
}
.verdict-head .conf {
color: #2dd4bf;
font-weight: 800;
}
.fmt-tag {
margin-left: 8px;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.05em;
color: #2dd4bf;
border: 1px solid rgba(45, 212, 191, 0.5);
border-radius: 999px;
padding: 2px 8px;
}
/* ---------- the page's own states (new) --------------------------------- */
/* A state box. Neutral on purpose: the amber `.show-disabled` above means
"the engine is off on this deployment", and "you are not signed in" is not
a warning. No new semantic colour — the surface, the border and the one
teal link are all already in this file. */
.show-state {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 16px 8px;
}
.show-state-head {
font-size: 1rem;
font-weight: 800;
margin-bottom: 6px;
}
.show-state-body {
margin: 0;
color: var(--muted);
font-size: 0.86rem;
line-height: 1.45;
overflow-wrap: break-word;
}
/* One way out of the state, at a 44px touch target. */
.show-state-go {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-top: 6px;
color: var(--show);
font-size: 0.88rem;
font-weight: 700;
text-decoration: underline;
}
/* The loading skeleton — blocks standing where the picker will be, never a
spinner: /api/rooting-guide reads Yahoo and ESPN live on every call, so
this is on screen for seconds. */
.skel {
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: 12px;
animation: skelPulse 1.6s ease-in-out infinite;
}
@keyframes skelPulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.45;
}
}
.skel-intro {
height: 44px;
margin-bottom: 16px;
}
.skel-head {
height: 14px;
width: 42%;
margin-bottom: 9px;
}
.skel-pick {
height: 62px;
margin-bottom: 9px;
}
.skel-record {
height: 52px;
margin-top: 14px;
}
@media (prefers-reduced-motion: reduce) {
.skel {
animation: none;
}
.show-onair .dot {
animation: none;
}
}