/* style.css: the page look, shared by index.html, show.html and cast.html.
   The skeleton follows PNN's page (J's call, 8 Oct 2026); the look is a first pass. */
:root {
  --bg: #0a1230; --panel: #0e1a44; --panel2: #13235a; --line: #2a3f8f; --blue: #2f5bd8;
  --gold: #f2c14e; --red: #d8323c; --text: #e8ecff; --dim: #93a0cc; --pink: #f4a6cf;
  --px: "Silkscreen", "Space Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; color: var(--text); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg) repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,0.025) 38px 40px); }
a { color: var(--gold); }
main.room { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }
.px { font-family: var(--px); letter-spacing: 0.02em; }
.sec { margin-top: 28px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* placeholders: a part PNN has and we do not, yet */
.soon-tag { display: inline-block; font: 10px var(--px); color: var(--gold); border: 1px dashed var(--gold);
  padding: 1px 6px; border-radius: 3px; vertical-align: middle; }
.soon-body { border: 1px dashed var(--line); border-radius: 6px; padding: 14px; color: var(--dim); font-size: 13px; text-align: center; }
[aria-disabled="true"], button:disabled { opacity: 0.5; cursor: not-allowed; }

/* 1. masthead */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { font: 20px var(--px); background: var(--blue); color: #fff; padding: 4px 8px; border-bottom: 3px solid var(--red); }
.brand-name { font: 22px var(--px); margin: 0; }
.jump { display: flex; gap: 18px; flex-wrap: wrap; }
.jump a { font: 12px var(--px); text-decoration: none; }

/* 2. the TV */
.tv { background: linear-gradient(#2a3247, #1a2033); border: 2px solid #3a4560; border-radius: 22px; padding: 12px 12px 10px; }
.tv-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 18px 10px; gap: 12px; }
.tv-top b { font: 15px var(--px); display: block; }
.tv-top small { font: 8px var(--px); color: var(--dim); letter-spacing: 0.25em; text-transform: uppercase; }
.tv-lamp { font: 16px var(--px); color: #4a1418; background: #2a0c10; padding: 4px 14px; border: 1px solid #4a1418; }
.tv-lamp[data-live="1"] { color: #ff5a64; background: #3a0d12; box-shadow: 0 0 14px #ff3a46aa; border-color: #ff5a64; }
.tvt-r { text-align: right; }
.screen { position: relative; background: #000; border-radius: 18px; overflow: hidden; border: 8px solid #10131c; }
#march { display: block; width: 100%; aspect-ratio: 16 / 9; image-rendering: pixelated; }
.stream-badge { position: absolute; top: 10px; left: 10px; display: flex; gap: 10px; align-items: center;
  background: #0b0f1aee; padding: 6px 12px; font: 13px var(--px); max-width: calc(100% - 20px); }
.stream-badge .site { color: var(--gold); border-right: 1px solid #444; padding-right: 10px; white-space: nowrap; }
#title { font: inherit; margin: 0; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lower-third { position: absolute; left: 3%; bottom: 7%; display: none; }
.lower-third[data-on="1"] { display: block; }
.lt-tab { font: 10px var(--px); background: var(--red); color: #fff; padding: 2px 8px; margin: 0; display: inline-block; }
.lt-name { margin: 0; background: #0b0f1aee; padding: 4px 12px; border-left: 4px solid var(--gold); }
.lt-name strong { font: 18px var(--px); }
.lt-name span { font: 11px var(--px); color: var(--gold); margin-left: 8px; }
.power { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 10px;
  background: radial-gradient(#0008, #000c); }
.power[hidden] { display: none; }
#sound { font: 18px var(--px); padding: 14px 26px; background: var(--gold); color: #10131c; border: 0; border-radius: 6px; cursor: pointer; }
.power p { margin: 0; font-size: 13px; color: var(--dim); }
.captions { background: #05070d; padding: 10px 16px; margin-top: 8px; border-radius: 6px; min-height: 4.2em; }
#march-caption, #caption { margin: 0; line-height: 1.5; font-size: 16px; }
#march-caption { color: #ffd9ec; }
#march-caption:empty, #caption:empty { display: none; }
.cap-name { font: 10px var(--px); color: var(--dim); margin: 0 0 2px; }
.cabinet { display: flex; align-items: center; gap: 12px; padding: 10px 6px 2px; flex-wrap: wrap; }
.cab-status { font: 13px var(--px); color: #6ef08c; background: #0b0f1a; border: 1px solid #3a4560; padding: 6px 12px; margin: 0; display: flex; gap: 8px; align-items: center; }
.cab-status .dot { width: 8px; height: 8px; background: #6ef08c; display: inline-block; }
#badge[data-live="0"] { color: var(--gold); }
.cab-tag { flex: 1; text-align: center; font: 8px var(--px); letter-spacing: 0.3em; color: var(--dim); text-transform: uppercase; margin: 0; }
.cab-btn, #clip { font: 11px var(--px); background: #0b0f1a; color: var(--text); border: 1px solid #3a4560; padding: 8px 12px; border-radius: 3px; cursor: pointer; text-decoration: none; }
#clip { background: var(--pink); color: #10131c; border-color: var(--pink); }
#clip-out { display: block; padding: 0 6px; }
/* the clip editor: Clip turns the TV into it (the screen, captions and
   cabinet hide), Twitch's way: the player on top, Play, then a filmstrip with a
   pink window and a handle outside each edge (the rail's padding leaves them
   room), Earlier/Later, and the two big buttons */
.tv.clipping .screen, .tv.clipping .captions, .tv.clipping .cabinet { display: none; }
.clip-strip { background: #05070d; border: 1px solid #3a4560; border-radius: 6px; margin: 8px 0 0; padding: 10px 12px; }
.tv.clipping .clip-strip { margin: 0; }
.clip-strip[hidden] { display: none; }
.cs-player { background: #000; border-radius: 4px; }
.cs-screen { display: block; margin: 0 auto; max-width: 100%; max-height: 58vh; }
.cs-ctl { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.cs-time { font: 13px var(--px); color: var(--dim); }
.cs-help, .cs-len { font-size: 13px; color: var(--dim); margin: 0 0 8px; }
.cs-len { margin: 6px 0 10px; color: var(--text); }
.cs-rail { padding: 0 22px; }
.cs-track { position: relative; height: 64px; background: #0b0b10; border-radius: 3px; touch-action: none; cursor: pointer; }
.cs-film { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.cs-scene { position: absolute; bottom: 0; height: 5px; background: #2f5bd8; border-left: 1px solid #0b0b10; pointer-events: none; }
.cs-scene.odd { background: #6f8cf5; }
.cs-dim { position: absolute; top: 0; bottom: 0; background: rgba(5, 7, 13, 0.6); pointer-events: none; }
.cs-dl { left: 0; }
.cs-dr { right: 0; }
.cs-win { position: absolute; top: 0; bottom: 0; min-width: 2px; outline: 3px solid var(--pink); cursor: grab; }
.cs-h { position: absolute; top: -4px; bottom: -4px; width: 22px; background: var(--pink); cursor: ew-resize; }
.cs-a { right: 100%; border-radius: 4px 0 0 4px; }
.cs-b { left: 100%; border-radius: 0 4px 4px 0; }
.cs-h::after { content: ""; position: absolute; top: 30%; bottom: 30%; left: 50%; border-left: 2px solid #10131c; }
.cs-head { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 4px #000; pointer-events: none; }
.cs-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 0; }
.cs-where { flex: 1; text-align: center; font: 9px var(--px); color: var(--dim); }
.cs-go { margin: 0; display: flex; gap: 8px; }
.cs-make, .cs-cancel, .cs-play, .cs-earlier, .cs-later { font: 11px var(--px); padding: 10px 14px; border-radius: 3px; cursor: pointer; border: 1px solid #3a4560; background: #0b0f1a; color: var(--text); }
.cs-make, .cs-play { background: var(--pink); border-color: var(--pink); color: #10131c; }
.cs-play { min-width: 96px; }
.cs-nav button[hidden] { display: none; }
.cs-nav button:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 820px) {
  .cs-rail { padding: 0 34px; }
  .cs-track { height: 56px; }
  .cs-h { width: 34px; }
  .cs-play { padding: 14px 22px; font-size: 13px; }
  .cs-go button { flex: 1; padding: 16px; font-size: 13px; }
  .cs-earlier, .cs-later { padding: 12px 10px; }
}
#clip-out a, #clip-out button { font: 12px var(--px); }
#note { font-size: 12px; color: var(--dim); margin: 6px 6px 0; }
#note:empty { display: none; }

/* 3. the social row */
.social { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 12px; }
.social a { font: 12px var(--px); text-align: center; padding: 9px 4px; border: 1px solid var(--line); background: var(--panel); color: var(--text); text-decoration: none; border-radius: 3px; }
.social a:first-child { background: var(--gold); color: #10131c; border-color: var(--gold); }

/* 4. under the TV: chat and the drink on the left, the network panel on the right */
.below-tv { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-top: 14px; }
.nb { background: var(--panel); border: 2px solid var(--line); border-left: 4px solid var(--gold); margin-bottom: 14px; }
.nb-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel2); border-bottom: 1px solid var(--line); }
.nb-head b { font: 15px var(--px); }
.nb-head .note { margin-left: auto; font-size: 11px; color: var(--dim); }
.nb-body { padding: 12px; }
.below-tv > div { display: flex; flex-direction: column; }
.chat { flex: 1; display: flex; flex-direction: column; }
.chat .nb-body { min-height: 360px; flex: 1; display: grid; }
.chat { border-left-color: var(--red); }
.net-card { border: 1px solid var(--line); background: #0a1438; margin-bottom: 8px; padding: 10px; position: relative; }
.net-card .k { font: 10px var(--px); background: var(--gold); color: #10131c; padding: 1px 6px; position: absolute; top: -1px; left: -1px; }
.net-card .live { font: 10px var(--px); background: var(--red); color: #fff; padding: 1px 6px; position: absolute; top: 6px; right: 6px; }
.net-card strong { font: 14px var(--px); display: block; margin-top: 12px; }
.net-card small { color: var(--dim); font-size: 12px; }
#sources { list-style: none; padding: 0; margin: 0; font-size: 13px; color: #b9c2e6; }
#sources li { padding: 6px 8px; border-left: 2px solid var(--line); margin-bottom: 6px; }
#sources li.now { border-left-color: var(--gold); color: var(--text); background: #ffffff08; }
#sources span { color: var(--dim); font: 9px var(--px); margin-right: 6px; }
.ask-modes { display: flex; gap: 0; margin-bottom: 10px; }
.chain { font: 11px var(--px); padding: 5px 10px; background: #0b0f1a; color: var(--text); border: 1px solid var(--line); }
.chain.on { background: var(--gold); color: #10131c; }
.ask-row { display: flex; gap: 8px; }
.ask-row input { flex: 1; min-width: 0; background: #0a1438; color: var(--text); border: 1px solid var(--line); padding: 9px; font: inherit; }
.ask-row button { font: 13px var(--px); background: var(--blue); color: #fff; border: 0; padding: 0 16px; }

/* 5. the program schedule */
.guide { background: var(--panel); border: 2px solid var(--line); }
.guide-head { display: flex; align-items: end; justify-content: space-between; padding: 14px 16px; background: var(--panel2); gap: 12px; flex-wrap: wrap; }
.guide-head h2 { font: 22px var(--px); margin: 0; letter-spacing: 0.08em; text-transform: uppercase; }
.guide-head small { font: 10px var(--px); color: var(--dim); letter-spacing: 0.2em; text-transform: uppercase; }
.gh-clock { text-align: right; margin: 0; }
.gh-clock span { font: 10px var(--px); display: block; }
.gh-clock strong { font: 22px var(--px); color: var(--gold); }
.guide-grid { position: relative; padding: 8px 0 0; }
.g-times { position: relative; height: 18px; font: 11px var(--px); color: var(--dim); padding: 0 0 6px; }
.g-times span { position: absolute; top: 0; padding-left: 6px; border-left: 1px solid var(--line); }
.g-shows { position: relative; height: 150px; }
.g-show { position: absolute; top: 0; bottom: 0; text-decoration: none; color: var(--text); background: linear-gradient(#2f4fd0, #1f3399); border: 2px solid #4a6cf0; padding: 10px 12px; overflow: hidden; }
.g-show strong { font: 14px var(--px); display: block; }
.g-show.now { background: linear-gradient(#f2c14e, #d9a632); color: #10131c; border-color: #fff3c4; }
.g-show.now em { color: #7a1018; }
.g-show em { font-style: normal; color: var(--gold); font: 11px var(--px); }
.g-show p { margin: 4px 0 0; font-size: 12px; }
.g-show:not(.now) .tag { display: none; }
.g-show .tag { position: absolute; top: 8px; right: 10px; font: 10px var(--px); background: var(--red); padding: 1px 6px; }
.g-needle { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); box-shadow: 0 0 6px var(--red); }
.g-lane { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); margin-top: 8px; }
.g-lane small { font: 9px var(--px); color: var(--dim); letter-spacing: 0.2em; }

/* 6. on now, coming up */
.nownext { display: grid; grid-template-columns: 1.3fr 1fr 0.55fr; gap: 14px; margin-top: 18px; }
.nn-now { background: var(--gold); color: #10131c; border: 3px solid #b88a22; padding: 18px; position: relative; }
.nn-label { position: absolute; top: -14px; left: 16px; margin: 0; font: 14px var(--px); background: var(--red); color: #fff; padding: 2px 10px; letter-spacing: 0.1em; }
.nn-show { font: 24px var(--px); margin: 0; }
.nn-hours { font: 14px var(--px); margin: 2px 0; }
.nn-tag { margin: 0 0 10px; }
.nn-stats { display: flex; gap: 22px; border-top: 2px solid #b88a22; border-bottom: 2px dashed #b88a22; padding: 10px 0; }
.nn-stats span { font: 9px var(--px); display: block; }
.nn-stats strong { font: 15px var(--px); }
.nn-seg p { margin: 8px 0 0; font-size: 13px; }
.nn-k { font: 10px var(--px); color: var(--red); margin-right: 6px; }
.nn-coming { background: var(--panel); border: 3px solid var(--blue); }
.nn-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--blue); font: 16px var(--px); }
.nn-head a { font: 10px var(--px); color: #fff; }
#comingUp { list-style: none; margin: 0; padding: 0 12px; }
#comingUp li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
#comingUp li:last-child { border-bottom: 0; }
#comingUp .when { font: 13px var(--px); color: var(--gold); }
#comingUp strong { font: 12px var(--px); display: block; }
#comingUp small { color: var(--dim); }
.nn-brand { background: var(--panel); border: 3px solid var(--blue); display: grid; place-content: center; text-align: center; padding: 16px; gap: 10px; }
.nn-brand canvas { width: 100%; min-width: 160px; image-rendering: pixelated; }
.nn-brand p { font: 11px var(--px); color: var(--gold); margin: 0; line-height: 1.7; }

/* 7. on air: the cast, and the shows */
.sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.sec-head h2 { font: 24px var(--px); margin: 0; }
.sec-head span { color: var(--dim); font-size: 13px; }
.onair { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.person { background: #0b1435; border: 1px solid var(--line); padding: 14px; }
.person canvas { width: 56px; height: 56px; image-rendering: pixelated; background: var(--blue); display: block; margin-bottom: 10px; }
.person h3 { font: 17px var(--px); margin: 0; }
.person .role { color: var(--gold); font: 11px var(--px); margin: 2px 0 8px; }
.person .bio { font-size: 13px; color: #c2c9ea; margin: 0 0 8px; }
.person .post { font-size: 12px; color: var(--dim); margin: 0; }
.person.soon { display: grid; place-content: center; text-align: center; color: var(--dim); border-style: dashed; }
.onair-group { font: 16px var(--px); color: var(--gold); margin: 24px 0 10px; }
.shows { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.team { background: #0b1435; border: 1px solid var(--line); padding: 14px; display: flex; gap: 18px; position: relative; }
.team.now { border: 2px solid var(--gold); }
.team .badge { position: absolute; top: 8px; right: 8px; font: 9px var(--px); background: var(--gold); color: #10131c; padding: 1px 6px; }
.team h3 { font: 16px var(--px); margin: 0; }
.team .role { color: var(--gold); font: 11px var(--px); margin: 4px 0; }
.team .post { font-size: 13px; color: var(--dim); margin: 0; }
.crew { list-style: none; padding: 0; margin: 0 0 0 auto; display: flex; gap: 14px; }
.crew li { width: 64px; font-size: 11px; color: var(--dim); }
.crew canvas { width: 44px; height: 44px; image-rendering: pixelated; background: var(--blue); display: block; margin-bottom: 4px; }
.crew strong { font: 10px var(--px); color: var(--text); display: block; }
.team.soon { color: var(--dim); border-style: dashed; align-items: center; justify-content: center; }

/* 8. about */
.about { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 18px; }
.about h2 { font: 22px var(--px); margin: 0 0 10px; }
.about-cols { columns: 2; column-gap: 36px; font-size: 14px; color: #c2c9ea; }
.about-cols p { margin: 0 0 12px; break-inside: avoid; }

@media (max-width: 820px) {
  .below-tv, .nownext, .shows { grid-template-columns: 1fr; }
  .social { grid-template-columns: repeat(4, 1fr); }
  .about-cols { columns: 1; }
  .tvt-r, .cab-tag { display: none; }
  .team { flex-direction: column; }
  .crew { margin: 0; }
  .stream-badge .site { display: none; }
  .lower-third { transform: scale(0.65); transform-origin: left bottom; }
  .chat .nb-body { min-height: 160px; }
}

/* the schedule's short-show lane */
.g-lane { position: relative; }
.g-shorts { position: relative; flex: 1; height: 34px; }
.g-short { position: absolute; transform: translateX(-50%); font: 10px var(--px); background: var(--blue); color: #fff; padding: 3px 6px; border: 1px solid #6f8cf5; text-decoration: none; white-space: nowrap; text-align: center; line-height: 1.3; }
.g-short.now { background: var(--gold); color: #10131c; }
.g-short small { display: block; font-size: 8px; opacity: 0.8; }

/* the ticker, the bumper, standby and the disclaimer, all inside the screen */
.ticker { position: absolute; left: 0; right: 0; bottom: 0; display: flex; background: #0b0f1aee; border-top: 2px solid var(--blue); font: 12px var(--px); }
.ticker-label { margin: 0; background: var(--red); color: #fff; padding: 4px 10px; flex: none; }
.ticker-track { overflow: hidden; flex: 1; }
.ticker-text { margin: 0; padding: 4px 0; white-space: nowrap; display: inline-block; padding-left: 100%; animation: tick 60s linear infinite; }
@keyframes tick { to { transform: translateX(-100%); } }
.lower-third { bottom: 12%; }
.bumper { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px;
  background: repeating-linear-gradient(135deg, #13235a 0 22px, #0e1a44 22px 44px); }
.bumper[hidden], .standby[hidden] { display: none; }
.bumper-logo { margin: 0; font: 34px var(--px); color: #fff; text-shadow: 3px 3px 0 var(--red); }
.bumper-label { margin: 8px 0 0; font: 13px var(--px); color: #10131c; background: var(--gold); padding: 2px 10px; justify-self: center; }
.bumper-title { margin: 0; font: 20px var(--px); max-width: 80%; justify-self: center; }
.bumper-tease { margin: 0; font-size: 14px; color: var(--dim); max-width: 70%; justify-self: center; }
.standby { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 22px var(--px); }
.standby .bars { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #c0c0c0 0 14%, #c0c000 0 28%, #00c0c0 0 42%, #00c000 0 57%, #c000c0 0 71%, #c00000 0 85%, #0000c0 0); opacity: 0.85; }
.standby p { background: #000c; padding: 8px 18px; margin: 0; }
.power .disclaimer { max-width: 640px; font: 15px/1.6 var(--px); color: var(--text); text-transform: uppercase; margin: 0 auto 8px; }
@media (max-width: 820px) { .power .disclaimer { display: none; } .ticker { font-size: 10px; } .bumper-logo { font-size: 20px; } .bumper-title { font-size: 13px; } }

/* notes to ourselves: what a placeholder box holds until the part is built */
.notes-self { border: 1px dashed var(--gold); background: #f2c14e0d; color: #d6dbf5; border-radius: 4px; padding: 10px 12px; font-size: 13px; margin-top: 8px; text-align: left; }
.notes-self b { color: var(--gold); font-weight: 600; }
.notes-self ul { margin: 6px 0 0; padding-left: 18px; }
.person.soon { display: block; }
.person.soon .notes-self { margin: 0; }

/* ask the desk, the letter form */
.say { margin-left: auto; color: var(--dim); font-size: 11px; }
#letterForm { display: grid; gap: 8px; }
#letterForm[hidden], #askForm[hidden] { display: none; }
#letterForm select, #letterForm textarea { background: #0a1438; color: var(--text); border: 1px solid var(--line); padding: 8px; font: inherit; }
#letterForm textarea { min-height: 90px; resize: vertical; }
#letterForm small { flex: 1; color: var(--dim); font-size: 11px; }
.nb-status { margin: 8px 0 0; font-size: 12px; color: var(--gold); min-height: 1em; }

/* replays */
.replay-days { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.replay-days button { font: 11px var(--px); padding: 6px 10px; background: var(--panel); color: var(--text); border: 1px solid var(--line); cursor: pointer; }
.replay-days button.on { background: var(--gold); color: #10131c; }
.replay-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; border: 1px solid var(--line); background: #0b1435; }
.replay-list li a { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #ffffff10; color: var(--text); text-decoration: none; font-size: 13px; }
.replay-list li a:hover { background: #ffffff0a; }
.replay-list .when { font: 11px var(--px); color: var(--gold); }
.replay-list .show { color: var(--dim); font-size: 11px; }

/* the show and cast pages */
.page-card { background: var(--panel); border: 2px solid var(--line); padding: 20px; margin-top: 16px; }
.page-card h1 { font: 28px var(--px); margin: 0 0 4px; }
.page-card canvas { width: 96px; height: 96px; image-rendering: pixelated; background: var(--blue); display: block; margin-bottom: 12px; }

/* on a phone the guide keeps its full width and scrolls sideways */
@media (max-width: 820px) {
  .guide-grid { overflow-x: auto; }
  .g-times, .g-shows, .g-lane { min-width: 900px; }
}
.page-card .crew canvas { width: 44px; height: 44px; margin-bottom: 4px; }
.replay-list li a:only-child { grid-template-columns: 1fr; }