/* Artemis I on TV: the caption card, the C-SPAN event list, the caption cues. */
.tvcard { margin: 0; justify-self: center; width: min(440px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 12px; box-shadow: var(--elevation-3); transform: rotate(1deg); }
.tvcard .screen { position: relative; aspect-ratio: 16 / 10; background: #0b1424; border-radius: 10px; display: grid; align-items: end; justify-items: center; padding: 18px; overflow: hidden; }
.tvcard .screen::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px); }
.tvcard .bug { position: absolute; top: 12px; right: 14px; font-family: var(--font-mono); font-size: .72rem; color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.4); border-radius: 4px; padding: 1px 6px; }
.tvcard .cc { position: relative; font-family: var(--font-mono); font-size: .95rem; line-height: 1.5; color: #fff; background: #000; padding: 6px 10px; text-align: center; }
.tvcard figcaption { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); margin-top: 10px; }
.event-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.event-list button { width: 100%; text-align: left; font: inherit; font-size: .88rem; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-row); padding: 9px 12px; cursor: pointer; display: grid; grid-template-columns: 4.2rem 1fr auto; gap: 8px; align-items: baseline; min-height: 44px; transition: border-color var(--motion) var(--ease), background-color var(--motion) var(--ease); }
.event-list button:hover { border-color: var(--orange); }
.event-list button[aria-pressed="true"] { background: var(--orange-light); border-color: var(--orange); }
.event-list .d { font-family: var(--font-mono); font-size: .74rem; color: var(--orange-text); }
.event-list .n { font-size: .74rem; color: var(--muted); white-space: nowrap; }
.chart svg.focus .col:not(.on) rect:not(.hit) { opacity: .25; }
.chart svg .col.on rect.s-accent { fill: var(--navy); }
.tv-cues .cc-line { font-family: var(--font-mono); font-size: .9rem; letter-spacing: .02em; }
.wb-card { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--sage); border-radius: var(--radius-row); padding: 12px 16px; display: grid; gap: 4px; max-width: 72ch; }
.wb-card .k { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); overflow-wrap: anywhere; }
.wb-card p { color: var(--ink-2); }
@media (max-width: 560px) { .chart-wrap > svg.hbars[viewBox^="0 0 700"] { min-width: 600px; } }