/* THE EPISODE AS A SHOW - phone layout (David, 18 Oct 2026; the compact model from Andy's handoff).
   templates/_episode_show.html, behaviour in static/js/smackcast-show.js. Used by the phone Locker and the phone share page.

   New component under the type policy: Inter only, no Anton or Oswald here (the rating inside the card keeps its own, Andy's), no
   all-caps headings, nothing heavier than 700. Buttons follow the contrast rule: a button never shares its colour with what sits
   behind it, and colour/background are !important because a SmackCast page paints every <a> through its theme at higher specificity. */

.shw{margin:14px 0 14px;font-family:'Inter',system-ui,sans-serif}
.shw-bar{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 8px}
.shw-bar .shw-wkl{font:600 14px/1.2 'Inter',system-ui,sans-serif;color:#F5F2EC}
.shw-bar a.shw-jump{font:600 13px/1.2 'Inter',system-ui,sans-serif;color:#F5F2EC !important;text-decoration:none;white-space:nowrap}
.shw-bar a.shw-jump span{color:#E10600}

/* the NEW notice: red outline on the near-black page, a red pill with a white label inside it */
.shw-new{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:10px 10px 10px 12px;border-radius:14px;
  background:#1C100E;border:1px solid rgba(225,6,0,.55);color:#F5F2EC;font:400 13px/1.35 'Inter',system-ui,sans-serif}
.shw-new[hidden]{display:none}
.shw-pill{flex:0 0 auto;background:#E10600 !important;color:#FFFFFF !important;font:700 11px/1 'Inter',system-ui,sans-serif;
  letter-spacing:.06em;padding:7px 8px;border-radius:7px}
.shw-new div{flex:1;min-width:0}
.shw-new b{display:block;font-weight:600;color:#FFFFFF;font-size:13.5px}
.shw-x{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:rgba(255,255,255,.08) !important;color:#F5F2EC !important;font:400 20px/30px 'Inter',system-ui,sans-serif !important}

/* THE CARD. The root is also .cast-recap.ep, so the shared player script and the rating's styles keep working; these rules
   (0,3,0) take back the big centred player card's look. */
.cast-recap.ep.shw-card{display:block;text-align:left;padding:0;margin:0 0 12px;border-radius:0;
  background:none;border:0;box-shadow:none}
.shw-top{display:flex;gap:12px;align-items:stretch}
.shw-poster{position:relative;flex:0 0 45%;max-width:190px;aspect-ratio:9/16;padding:0;border:1px solid rgba(255,255,255,.14);
  border-radius:12px;overflow:hidden;background:#000;cursor:pointer;display:block}
.shw-poster img{width:100%;height:100%;object-fit:cover;display:block}
.shw-play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:rgba(225,6,0,.94);box-shadow:0 4px 14px rgba(0,0,0,.5)}
.shw-play:after{content:"";position:absolute;left:18px;top:13px;border-left:15px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.shw-len{position:absolute;right:6px;bottom:6px;padding:3px 7px;border-radius:6px;background:rgba(0,0,0,.8);color:#FFFFFF;
  font:600 11.5px/1 'JetBrains Mono',ui-monospace,monospace}
.shw-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.shw-side > *{flex:1 1 0;min-height:42px}
/* FOUR BUTTONS IN THE SPACE THREE HAD (Andy, 20 Oct 2026): the column is as tall as the poster and its buttons share it, so a fourth just makes each
   one shorter; the floor and the gap come down so the card never grows on a small phone. */
.shw-side.shw-side-4{gap:6px}
.shw-side.shw-side-4 > *,.shw-side.shw-side-4 .shw-btn{min-height:34px}
.shw-side.shw-side-4 .shw-btn{font-size:13.5px;white-space:nowrap;padding:0 8px;gap:7px}
.shw-btn{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:42px;padding:0 10px;border-radius:12px;
  text-decoration:none;cursor:pointer;appearance:none;-webkit-appearance:none;
  font:600 14.5px/1.1 'Inter',system-ui,sans-serif !important;letter-spacing:0 !important;text-transform:none !important;
  background:#1D1D1D !important;color:#F5F2EC !important;border:1px solid rgba(255,255,255,.18) !important;box-sizing:border-box;width:100%;text-align:left}
.shw-btn svg{width:19px;height:19px;flex:0 0 19px}
.shw-btn.shw-red{background:#E10600 !important;color:#FFFFFF !important;border-color:#E10600 !important}
.shw-btn:active{transform:scale(.98)}
.shw-btn .shw-sz{margin-left:auto;font:500 11px/1 'Inter',system-ui,sans-serif;color:#B9B5AD;white-space:nowrap}
/* Listen turns into Pause while the audio is playing (the shared player script sets .is-playing on the card) */
.shw-btn .l-b{display:none}
.shw-card.is-playing .shw-btn .l-a{display:none}
.shw-card.is-playing .shw-btn .l-b{display:inline}
.shw-card.is-playing [data-shw-listen]{border-color:#E10600 !important}

/* the audio strip appears when Listen is first pressed */
.shw-card .shw-strip{display:none;align-items:center;gap:10px;margin-top:12px}
.shw-card.shw-listening .shw-strip{display:flex}
.shw-strip .ep-play{width:38px;height:38px;flex:0 0 38px;border-width:1px}
.shw-strip .ep-play svg{width:17px;height:17px;margin-left:1px}
.shw-strip .ep-play[data-state="playing"] svg{margin-left:0}
.shw-strip .ep-range{flex:1;min-width:0}
.shw-strip .ep-t{min-width:34px;font:500 12px/1 'Inter',system-ui,sans-serif;color:#B9B5AD}

/* the rating keeps Andy's look; only the spacing inside this card is set here */
.shw-card .ep-rate{margin-top:14px;padding-top:14px}

/* the full-screen player (Watch, or a tap on the poster): a 9:16 window sized to the screen, the same as a clip's */
.shw-lb{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:12px}
.shw-lb[hidden]{display:none}
.shw-lb-frame{position:relative;height:min(94vh,980px);aspect-ratio:9/16;max-width:96vw;border-radius:14px;overflow:hidden;background:#000}
.shw-lb video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.shw-lb .shw-lb-x{position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:rgba(0,0,0,.65) !important;color:#FFFFFF !important;font:400 26px/38px 'Inter',system-ui,sans-serif !important;z-index:2}

/* a phone-width window is what this is designed for; wider windows keep the existing player and clips layouts */

/* A SMALLER "HOW'D SMACKY DO?" ON A PHONE (David, 18 Oct 2026: "too big ... smaller text and frame or stars"). The same rating block, every phone
   page that loads this file - the new show card AND the audio-only cards of earlier weeks - so the Locker is consistent. Andy's markup and hooks are
   untouched; desktop keeps his size. Everything stays visible: heading, five stars, Give Feedback, Report an error. */
@media (max-width:699px){
  .cast-recap.ep .ep-rate{margin-top:10px;padding-top:10px}
  .cast-recap.ep .cast-fb{gap:4px}
  .cast-recap.ep .cast-fb-title{font-size:15px;letter-spacing:.5px}
  .cast-recap.ep .cast-fb-ask:empty{display:none}
  .cast-recap.ep .cast-stars{gap:2px}
  .cast-recap.ep .cast-star svg{width:32px;height:32px}
  .cast-recap.ep .cast-fb .cast-fb-btn{width:auto;min-width:0;min-height:0;height:auto;margin-top:2px;padding:9px 20px;font-size:13px;line-height:1.1;border-radius:999px}
  .cast-recap.ep .cast-fb-fix{font-size:12px;padding:2px}
}

/* DESKTOP, 700px and wider (David, 18 Oct 2026): the same card, with the clips BESIDE it instead of below. The week bar and the NEW notice
   run across the top; the video card is the left column and "Share the roast" the right, the same height. An episode with no clips gets the
   card at full width. The rating is smaller than Andy's 78 px stars here too (David: too big), and only inside this card - the audio-only
   cards of earlier weeks keep Andy's desktop size. */
@media (min-width:700px){
  .shw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:18px;align-items:stretch}
  .shw.shw-solo{grid-template-columns:minmax(0,1fr)}
  .shw > .shw-bar,.shw > .shw-new{grid-column:1 / -1}
  .shw > .shw-card{grid-column:1;margin:0;padding:18px}
  .shw > .sclips{grid-column:2;margin:0;display:flex;flex-direction:column;justify-content:center}
  .shw-poster{flex:0 0 45%;max-width:250px}
  .shw-btn{min-height:46px;font-size:15px}
  .shw-side.shw-side-4 .shw-btn{min-height:40px}
  .shw-side.shw-side-4 .shw-btn{font-size:14.5px}
  .shw-card .cast-fb-title{font-size:20px}
  .shw-card .cast-star svg{width:62px;height:62px}
  .shw-card .cast-stars{gap:8px}
  .shw-card .cast-fb .cast-fb-btn{width:auto;min-width:0;min-height:0;height:auto;padding:10px 26px;font-size:14px;line-height:1.1;border-radius:999px}
  .shw-card .cast-fb-fix{font-size:13px}
}

/* BIG STARS (Andy, 20 Oct 2026: "much bigger so they stand out to entice the feedback"): on a phone five stars fill the card's width */
.cast-recap.ep.shw-card .cast-stars{gap:4px;justify-content:center}
.cast-recap.ep.shw-card .cast-star{padding:2px}
.cast-recap.ep.shw-card .cast-star svg{width:min(52px,12.8vw);height:min(52px,12.8vw);filter:drop-shadow(0 0 7px rgba(225,6,0,.55))}