/* Two halves. The visitor pages are styled at the bottom of this file, under
   body.site; everything here is the plain admin styling (body.admin) and the
   shared primitives it leans on. */
:root { --ink: #1d2a35; --muted: #5b6b7a; --accent: #1d3557; --line: #e3e8ee; --bg: #fbfbfa; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
.site-header { display: flex; justify-content: space-between; align-items: baseline; max-width: 760px; margin: 0 auto; padding: 16px; border-bottom: 1px solid var(--line); }
.site-header nav a { margin-left: 16px; }
.brand { font-weight: 700; font-size: 1.2em; text-decoration: none; color: var(--accent); }
.brand img { height: 1.5em; width: auto; vertical-align: middle; margin-right: 8px; }
.site-footer { max-width: 760px; margin: 0 auto; padding: 16px; color: var(--muted); font-size: .9em; border-top: 1px solid var(--line); }
h1 { font-size: 1.8em; line-height: 1.2; margin: 0 0 .5em; }
h2 { font-size: 1.25em; margin: 1.6em 0 .4em; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.lead { font-size: 1.125rem; }
.flash { max-width: 760px; margin: 12px auto 0; padding: 10px 16px; border-radius: 6px; }
.flash.notice { background: #e6f4ea; } .flash.alert { background: #fdecea; }
.notice-box { background: #fff6dc; border: 1px solid #ecd9a0; padding: 10px 14px; border-radius: 6px; }
.in-full { padding: 12px 0; border-bottom: 1px solid var(--line); }
.in-full audio { width: 100%; margin-top: 6px; }
.button { padding: 10px 16px; font-size: 1em; background: var(--accent); color: #fff; border: 0; border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-block; }
.feed-url { font-family: ui-monospace, monospace; word-break: break-all; background: #fff; border: 1px solid var(--line); padding: 10px; border-radius: 6px; }
p.feed-url { cursor: pointer; position: relative; }
/* The "Copied" badge, riding the top edge of the box for the two seconds it is there. */
p.feed-url[data-copied]::after { content: "Copied"; position: absolute; top: 0; right: 10px; transform: translateY(-50%);
  background: var(--accent); color: #fff; font: 700 .7rem/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; box-shadow: 0 2px 6px rgba(29, 42, 53, .35); animation: copied-pop .18s ease-out; }
@keyframes copied-pop { from { opacity: 0; transform: translateY(-10%) scale(.85); } }
@media (prefers-reduced-motion: reduce) { p.feed-url[data-copied]::after { animation: none; } }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .9em; }
.search { display: flex; gap: 8px; margin: 12px 0 16px; }
.search input { flex: 1; padding: 8px 10px; font-size: 1em; border: 1px solid #b9c3cc; border-radius: 6px; }
ol.steps li { margin-bottom: 6px; }

/* Admin and member pages */
main.wide { max-width: 1100px; }
/* The game page's head: the title and its facts, with the box art from BGG at
   the right as tall as the two of them. The picture is the button that fetches
   it again (refetch_controller.js labels it while the fetch runs). */
.game-head { display: flex; justify-content: space-between; align-items: stretch; gap: 24px; }
.game-head h1, .game-head p { margin-bottom: 0; }
.game-head h1 { margin-bottom: .3em; }
.game-head form { flex: 0 0 auto; display: flex; }
.box-art { position: relative; display: flex; align-items: center; justify-content: center; min-width: 72px; max-width: 160px;
  padding: 0; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.box-art img { display: block; height: 100%; width: auto; max-height: 120px; object-fit: contain; }
.box-art .no-art { padding: 0 14px; font-size: .85em; color: var(--muted); }
.box-art .refetch { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: none;
  padding: 3px 10px; font: 700 .7rem/1.4 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--accent); border-radius: 999px; white-space: nowrap; }
.box-art:hover .refetch, .box-art:focus-visible .refetch, form[data-refreshing] .refetch { display: block; }
form[data-refreshing] .box-art { cursor: progress; }
form[data-refreshing] .box-art img { opacity: .5; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .8em; background: #e9edf2; color: var(--ink); white-space: nowrap; }
.badge-published, .badge-ready, .badge-accepted, .badge-clean { background: #d7f0dd; }
.badge-audio_ready, .badge-script_written, .badge-synthesizing, .badge-writing_script, .badge-verifying, .badge-repairing, .badge-assembling { background: #dde9f7; }
ol.progress { list-style: none; padding: 0; margin: 8px 0; }
ol.progress li { padding: 3px 0 3px 26px; position: relative; color: var(--muted); }
ol.progress li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #b9c3cc; box-sizing: border-box; }
ol.progress li.done { color: var(--ink); }
ol.progress li.done::before { background: #2e7d4f; border-color: #2e7d4f; }
ol.progress li.active { color: var(--ink); font-weight: 600; }
ol.progress li.active::before { border-color: var(--accent); background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.badge-pdf_missing, .badge-rejected, .badge-failed, .badge-skipped, .badge-flagged { background: #fbdcdc; }
.badge-unmatched, .badge-held, .badge-identifying, .badge-received, .badge-unverified, .badge-outdated { background: #fbeccd; }
/* A pipeline job in flight for a game, beside its status: the status is what listeners get meanwhile. */
.badge-working { background: #e6dcf7; animation: pulse 1.6s ease-in-out infinite; }
.stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.stat { display: flex; flex-direction: column; min-width: 110px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); }
.stat-n { font-size: 1.5em; font-weight: 700; }
.stat-label { color: var(--muted); font-size: .85em; }
.filters a { margin-right: 10px; } .filters a.current { font-weight: 700; text-decoration: none; }
/* A filter with work behind it that the admin has to do by hand (Unlinked on BGG). */
.filters a.alert { color: #b3261e; font-weight: 700; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin: 16px 0; }
.panel h2 { margin-top: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions form { display: inline; }
.button.secondary { background: #e9edf2; color: var(--ink); }
form.login { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
form.login input[type=email] { flex: 1; min-width: 240px; padding: 8px 10px; font-size: 1em; border: 1px solid #b9c3cc; border-radius: 6px; }
.site-header nav form { display: inline; margin-left: 16px; }
.site-header nav .linkish { padding: 0; font: inherit; color: var(--accent); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.button.tiny { padding: 2px 8px; font-size: .8em; }
.button:disabled { opacity: .6; cursor: progress; }
[hidden] { display: none !important; }
form.upload { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
/* The PDFs of one upload, numbered in the order they are joined and read */
ol.attached { list-style: none; counter-reset: attached; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
ol.attached li { counter-increment: attached; display: flex; align-items: center; gap: 8px; }
ol.attached li::before { content: counter(attached); flex: none; width: 1.6em; height: 1.6em; line-height: 1.6em; text-align: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: .85em; font-weight: 700; }
.page-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.resort-dialog { width: min(680px, 92vw); border: 1px solid var(--line); border-radius: 10px; padding: 20px 24px; }
.resort-dialog::backdrop { background: rgba(29, 42, 53, .45); }
.resort-dialog h2 { margin-top: 0; }
.resort-dialog .rows { max-height: 50vh; overflow: auto; }
pre.script, pre.notes { white-space: pre-wrap; font: 14px/1.5 ui-monospace, monospace; background: #f6f8fa; padding: 10px; border-radius: 6px; max-height: 480px; overflow: auto; }
td.notes pre { white-space: pre-wrap; font: 12px/1.4 ui-monospace, monospace; margin: 0; max-width: 420px; max-height: 120px; overflow: auto; color: var(--muted); }
.small { font-size: .85em; }
table.small td, table.small th { font-size: .85em; padding: 4px 6px; }
.flags li { margin-bottom: 12px; } .flags p { margin: 2px 0; }
.flags .flag-choice { font-size: .85em; color: var(--muted); cursor: pointer; }
/* Struck through when the flag is NOT to be repaired. The checkbox has to be named:
   its label also holds the hidden field that posts the unchecked "0", and that one
   never matches :checked, so a bare input selector struck every flag out. */
.flags li:has(.flag-choice input[type="checkbox"]:not(:checked)) p { color: var(--muted); text-decoration: line-through; }
textarea.script-edit { display: block; width: 100%; margin: 8px 0; padding: 10px; font: 14px/1.5 ui-monospace, monospace; color: var(--ink); border: 1px solid #b9c3cc; border-radius: 6px; }
textarea.repair-note { display: block; width: 100%; margin: 8px 0; padding: 10px; font: inherit; color: var(--ink); border: 1px solid #b9c3cc; border-radius: 6px; }
.pick .option { display: block; padding: 6px 0; border-bottom: 1px solid var(--line); }
#player audio, .panel audio { width: 100%; margin-top: 6px; }

/* Episode components: the list, with an "add" row between each and at both ends */
table.components tr.disabled td { color: var(--muted); }
table.components tr.add-row td { padding: 2px 8px; border: 0; text-align: center; }
table.components tr.add-row .button { opacity: .45; }
table.components tr.add-row:hover .button, table.components tr.add-row .button:focus { opacity: 1; }
table.components td.move { width: 1%; }
table.components td.copy { max-width: 480px; }
table.variables input.fallback { width: 100%; padding: 4px 8px; font-size: 1em; border: 1px solid #b9c3cc; border-radius: 6px; }
.fields { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; margin-bottom: 12px; }
.fields label { display: flex; flex-direction: column; gap: 4px; font-size: .9em; color: var(--muted); }
.fields label.check { flex-direction: row; align-items: center; }
.fields input[type=text], .fields input[type=number], .fields select { padding: 6px 8px; font-size: 1rem; color: var(--ink); border: 1px solid #b9c3cc; border-radius: 6px; }
.fields input[type=text] { min-width: 320px; }
.composer textarea { width: 100%; padding: 10px; font: 15px/1.5 ui-monospace, monospace; border: 1px solid #b9c3cc; border-radius: 6px; }
.variables-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.variables-list p { margin: 0 6px 0 0; }
.variables-list .var { padding: 2px 8px; font: 13px ui-monospace, monospace; background: #e9edf2; border: 1px solid #d3dae2; border-radius: 10px; cursor: pointer; }
.variables-list .var:hover { background: #dde9f7; }
.variables-list .var.slot { background: #fff1c2; border-color: #e6c95a; font-weight: 600; }
ol.quiz li { margin-bottom: 6px; }
pre.preview { max-height: 240px; }
code { font: 13px ui-monospace, monospace; background: #f6f8fa; padding: 1px 4px; border-radius: 4px; }

/* Contribute: account box, login dialog, buy button */
.perks { padding-left: 20px; } .perks li { margin-bottom: 4px; }
.panel.account p:first-child { margin-top: 0; }
form.contribute { flex-direction: column; align-items: flex-start; }
form.contribute label.name { display: flex; flex-direction: column; gap: 4px; }
form.contribute input[type=text] { min-width: 280px; padding: 8px 10px; font-size: 1em; border: 1px solid #b9c3cc; border-radius: 6px; }
form.buy { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 8px 0; }
form.buy label.name { display: flex; flex-direction: column; gap: 4px; }
form.buy input[type=text], form.buy input[type=email] { min-width: 260px; padding: 8px 10px; font-size: 1em; border: 1px solid #b9c3cc; border-radius: 6px; }
#checkout-form { margin: 16px 0; min-height: 200px; }
form.quantity input[type=number] { width: 80px; padding: 8px 10px; font-size: 1em; border: 1px solid #b9c3cc; border-radius: 6px; }
.login-dialog { border: 1px solid var(--line); border-radius: 10px; padding: 20px 24px; max-width: 420px; }
.login-dialog::backdrop { background: rgba(29, 42, 53, .45); }
.login-dialog h2 { margin-top: 0; }
.login-dialog form.login label.check { width: 100%; display: flex; gap: 6px; align-items: center; font-size: .95em; }
.linkish { padding: 0; font: inherit; color: var(--accent); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.badge-not_started { background: #fbeccd; }
p.make { margin-top: 20px; }
input.title-template { width: 100%; padding: 10px; font: 15px/1.5 ui-monospace, monospace; border: 1px solid #b9c3cc; border-radius: 6px; }
.tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
.tabs .tab { padding: 8px 14px; text-decoration: none; color: var(--muted); border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; margin-bottom: -1px; }
.tabs .tab.current { background: #fff; color: var(--ink); font-weight: 600; border-color: var(--line); }
.badge-full { background: #d7f0dd; } .badge-teaser { background: #dde9f7; }

/* ==========================================================================
   The visitor site: home, /contribute, /episodes/:slug.
   The look comes off the logo (public/icon.png): blue rulebook, orange meeple,
   cream stock, heavy ink outline. So: cream page, 2px ink borders, hard offset
   shadows instead of blurs, and one orange action per screen. Admin is untouched
   by all of it, which is why every rule here is under body.site.
   ========================================================================== */
body.site {
  --ink: #16212b; --slate: #4e6076;
  --blue: #134e87; --blue-deep: #0e3a66; --blue-tint: #dce6f2; --blue-line: #7fa5c9;
  --orange: #c94918; --orange-deep: #9c3814; --orange-tint: #f6c9b4; --orange-wash: #fbf1e6;
  --cream: #f8f6ea; --paper: #fffdf6; --hairline: #bdb5a0; --rule: #dcd7c4; --track: #e3decb;
  --display: "Archivo Black", Impact, sans-serif;
  --body: "Source Sans 3", system-ui, sans-serif;
  background: var(--cream); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.55;
}
body.site h1, body.site h2, body.site h3 { font-family: var(--display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; }
body.site h1 { font-size: 3.1rem; margin: 0 0 18px; }
body.site h2 { font-size: 1.7rem; margin: 0 0 16px; }
body.site h3 { font-size: 1.15rem; margin: 0 0 8px; }
body.site a { color: var(--blue); }
body.site a:hover { color: var(--blue-deep); }
body.site .muted { color: var(--slate); }
body.site .small { font-size: .88rem; }
body.site .lead { font-size: 1.12rem; line-height: 1.5; }
body.site .wrap { max-width: 1152px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
body.site main { max-width: none; margin: 0; padding: 0 0 48px; }

/* Header and footer, both edge to edge with the content inside a .wrap */
body.site .site-header { display: block; max-width: none; padding: 0; background: var(--paper); border-bottom: 2px solid var(--ink); }
body.site .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
body.site .brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 1.24rem; color: var(--ink); text-decoration: none; }
body.site .brand img { height: 46px; width: 46px; margin: 0; }
body.site .site-header nav { display: flex; align-items: center; gap: 20px; }
body.site .site-header nav a { margin: 0; font-weight: 600; }
body.site .site-header nav form { display: inline; margin: 0; }
body.site .site-footer { max-width: none; margin-top: auto; padding: 0; background: var(--paper); border-top: 2px solid var(--ink); color: var(--slate); }
body.site .site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 26px; padding-bottom: 26px; }
body.site .site-footer p { margin: 0; font-size: .88rem; max-width: 60ch; }
body.site .site-footer .powered-by img { display: block; width: 120px; height: auto; }
body.site .flash { max-width: 1104px; margin: 16px auto 0; border: 2px solid var(--ink); border-radius: 10px; }

/* Controls. Orange is the one action on a page; blue does the rest. */
body.site .button {
  display: inline-block; padding: 13px 22px; font-family: var(--body); font-size: 1rem; font-weight: 700;
  color: #fff; background: var(--orange); border: 2px solid var(--ink); border-radius: 8px;
  box-shadow: 3px 3px 0 var(--ink); text-decoration: none; cursor: pointer;
}
body.site .button:hover { color: #fff; background: var(--orange-deep); }
body.site .button.secondary { color: var(--ink); background: var(--paper); }
body.site .button.secondary:hover { color: var(--ink); background: var(--cream); }
body.site .button.blue { color: #fff; background: var(--blue); }
body.site .button.blue:hover { background: var(--blue-deep); }
/* The More button under the listing: a control, not another episode. */
body.site .button.quiet {
  padding: 14px 36px; font-size: 1.06rem; font-weight: 600; color: var(--slate);
  background: transparent; border: 1.5px solid var(--hairline); border-radius: 999px; box-shadow: none;
}
body.site .button.quiet:hover { color: var(--ink); background: var(--paper); }
body.site .button:disabled { opacity: .6; cursor: progress; }
body.site input[type=text], body.site input[type=email], body.site input[type=search], body.site input[type=number], body.site textarea {
  font-family: var(--body); font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: 8px; padding: 12px 14px;
}
body.site .linkish { color: var(--blue); font-family: var(--body); }

/* Hero */
body.site .hero { display: flex; align-items: center; gap: 56px; padding-top: 52px; padding-bottom: 44px; }
body.site .hero-copy { flex: 1 1 auto; }
body.site .hero h1 { max-width: 12ch; font-size: 3.4rem; }
body.site .hero p { max-width: 62ch; }
body.site .kicker { margin: 0 0 12px; font-size: .84rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-deep); }
body.site .hero-art { flex: 0 0 auto; padding: 14px; background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 8px 8px 0 var(--blue); transform: rotate(-3deg); }
body.site .hero-art img { display: block; width: clamp(150px, 24vw, 276px); height: auto; aspect-ratio: 1; border-radius: 6px; }

/* The blue ribbon: what a full episode holds */
body.site .ribbon { background: var(--blue); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
body.site .ribbon .wrap { display: flex; align-items: baseline; gap: 14px; padding-top: 20px; padding-bottom: 20px; }
body.site .ribbon .chips { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }
body.site .ribbon b { flex: 0 0 auto; color: var(--paper); font-size: 1rem; }
body.site .ribbon span { padding: 7px 14px; font-size: .94rem; color: var(--paper); border: 1.5px solid var(--blue-line); border-radius: 999px; }

/* Finding a game: the search sits directly on top of the listing */
body.site .finder { padding-top: 38px; }
body.site .search { display: flex; gap: 12px; margin: 0 0 22px; }
body.site .search input { flex: 1 1 auto; height: 58px; padding: 0 18px; font-size: 1.06rem; border: 2px solid var(--ink); border-radius: 10px; }
body.site .search .button { height: 58px; padding: 0 30px; border-radius: 10px; }

/* One refresher in the listing */
body.site .in-full {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cover body play" "cover scrub play";
  align-items: center; column-gap: 20px; row-gap: 8px; margin-bottom: 14px; padding: 16px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 12px;
}
body.site .in-full:first-of-type { box-shadow: 4px 4px 0 var(--ink); }
body.site .cover {
  grid-area: cover; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;
  background: var(--blue-tint); border: 2px solid var(--ink); border-radius: 8px;
  font-family: var(--display); font-size: 1.6rem; color: var(--blue); overflow: hidden;
}
body.site .cover img { width: 100%; height: 100%; object-fit: cover; }
body.site .row-body { grid-area: body; align-self: end; min-width: 0; }
body.site .in-full strong { font-weight: 400; }
body.site .in-full strong a { font-family: var(--display); font-size: 1.18rem; color: var(--ink); text-decoration: none; }
body.site .in-full strong a:hover { color: var(--blue); text-decoration: underline; }
body.site .in-full .row-meta { display: block; margin-top: 4px; font-size: .92rem; color: var(--slate); }
body.site .tag { display: inline-block; margin-left: 8px; padding: 2px 10px; font-size: .78rem; font-weight: 700; vertical-align: 3px;
  color: #7a2a0e; background: #f6ddd0; border: 1.5px solid var(--orange-deep); border-radius: 999px; }
/* The player (episodes/_player, player_controller.js). The <audio> has no box
   of its own unless it failed to load, when its native controls take over. */
body.site .player .play {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; padding: 0;
  color: #fff; background: var(--orange); border: 2px solid var(--ink); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink); cursor: pointer;
}
body.site .player .play:hover { background: var(--orange-deep); }
body.site .player .play:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
body.site .player .play svg { width: 18px; height: 20px; }
body.site .player .play .icon-play { margin-left: 3px; }
body.site .player .play .icon-pause { display: none; }
body.site .player.playing .play .icon-play { display: none; }
body.site .player.playing .play .icon-pause { display: block; }
body.site .player.buffering .play { animation: pulse 1.2s ease-in-out infinite; }
body.site .player .scrub { min-width: 0; }
body.site .player .label { margin: 0 0 8px; font-size: .94rem; font-weight: 600; }
body.site .player .clock { font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--slate); white-space: nowrap; }
/* The seek bar: a range input whose own background is the bar, the played part
   in orange up to --played (set by the controller), the thumb only when touched. */
body.site .player .seek {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; margin: 0; padding: 0;
  border-radius: 999px; cursor: pointer;
  background: linear-gradient(to right, var(--orange) var(--played, 0%), var(--rail, var(--track)) var(--played, 0%));
}
body.site .player .seek::-webkit-slider-runnable-track { height: 8px; background: transparent; }
body.site .player .seek::-moz-range-track { height: 8px; background: transparent; }
body.site .player .seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -4px;
  background: var(--orange); border: 2px solid var(--ink); border-radius: 50%; opacity: 0; }
body.site .player .seek::-moz-range-thumb { width: 12px; height: 12px; background: var(--orange); border: 2px solid var(--ink); border-radius: 50%; opacity: 0; }
body.site .player .seek:hover::-webkit-slider-thumb, body.site .player .seek:focus-visible::-webkit-slider-thumb { opacity: 1; }
body.site .player .seek:hover::-moz-range-thumb, body.site .player .seek:focus-visible::-moz-range-thumb { opacity: 1; }
body.site .player .seek:focus-visible, body.site .player .play:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
body.site .player.broken .play, body.site .player.broken .scrub, body.site .player.broken .transport { display: none; }
body.site .player.broken audio { display: block; width: 100%; grid-column: 1 / -1; }
/* In a listing row: the bar under the title, "1:04 / 7:01" at its end, the button at the row's end. */
body.site .player.is-row { display: contents; }
body.site .player.is-row .play { grid-area: play; }
body.site .player.is-row .scrub { grid-area: scrub; align-self: start; display: flex; align-items: center; gap: 12px; }
body.site .player.is-row .seek { flex: 1 1 auto; }
/* On the episode page's blue panel. */
body.site .player.is-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
body.site .player.is-panel .play { width: 68px; height: 68px; border-width: 3px; box-shadow: 3px 3px 0 var(--blue-deep); }
body.site .player.is-panel .play svg { width: 22px; height: 24px; }
body.site .player.is-panel .scrub { flex: 1 1 240px; }
body.site .player.is-panel .label { margin-bottom: 10px; color: var(--paper); }
body.site .player.is-panel .seek { --rail: #0b2b4d; height: 10px; }
body.site .player.is-panel .seek::-webkit-slider-runnable-track, body.site .player.is-panel .seek::-moz-range-track { height: 10px; }
body.site .player.is-panel .seek::-webkit-slider-thumb { margin-top: -3px; }
body.site .player.is-panel .clock { display: flex; justify-content: space-between; margin-top: 8px; color: #d5e2f0; }
body.site .player.is-panel .clock .sep { display: none; }
body.site .player.is-panel .transport { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 4px; padding-top: 16px; border-top: 1.5px solid #3d6e9f; }
body.site .player.is-panel .transport button { padding: 10px 14px; font-family: var(--body); font-size: .88rem; font-weight: 600;
  color: var(--paper); background: transparent; border: 1.5px solid var(--blue-line); border-radius: 8px; cursor: pointer; }
body.site .player.is-panel .transport button:hover { background: var(--blue-deep); }
body.site .player.is-panel .transport a { margin-left: auto; font-size: .88rem; }
/* The teaser card on the episode page: cream, above the blue panel that says what is missing. */
body.site .teaser-card { margin-bottom: 26px; padding: 18px 20px; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; }
body.site .player.is-card { display: flex; align-items: center; gap: 18px; }
body.site .player.is-card .play { width: 58px; height: 58px; }
body.site .player.is-card .scrub { flex: 1 1 auto; }
body.site .player.is-card .clock { display: block; margin-top: 6px; }

body.site .more { margin: 18px 0 0; text-align: center; }
body.site p.make { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 22px 0 0;
  padding: 18px 24px; font-weight: 600; background: var(--orange-wash); border: 2px dashed var(--orange-deep); border-radius: 12px; }
body.site p.make .button { flex: 0 0 auto; }

/* Panels: the blue one carries the feed, the cream ones carry everything else */
body.site .panel { margin: 0; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; padding: 22px 24px; box-shadow: 4px 4px 0 var(--ink); }
body.site .panel.blue { background: var(--blue); border-width: 3px; box-shadow: 8px 8px 0 var(--ink); color: var(--paper); }
body.site .panel.blue h2, body.site .panel.blue strong { color: var(--paper); }
body.site .panel.blue p { color: #d5e2f0; }
body.site .panel.blue a { color: var(--paper); font-weight: 600; }
body.site .feed-section { margin-top: 40px; }
/* The feed URL sits on a cream box inside the blue panel, so it takes ink, not the panel's pale text. */
body.site .feed-url, body.site .panel.blue p.feed-url { padding: 15px 16px; font-size: .94rem; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 8px; }
body.site p.feed-url[data-copied]::after { background: var(--orange); box-shadow: none; }

/* The episode page */
body.site .episode { display: flex; gap: 40px; padding-top: 22px; }
body.site .episode-main { flex: 1 1 auto; min-width: 0; }
body.site .episode-aside { flex: 0 0 320px; display: flex; flex-direction: column; gap: 20px; }
body.site .crumb { display: inline-block; padding-top: 16px; font-weight: 600; }
body.site .cut { display: inline-block; margin-bottom: 12px; padding: 4px 12px; font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--paper); background: var(--blue);
  border: 2px solid var(--ink); border-radius: 999px; }
body.site .cut.teaser { color: #7a2a0e; background: var(--orange-tint); border-color: var(--orange-deep); }
body.site .player-panel { margin-bottom: 30px; }
/* The refresher in writing under the player, at reading width, and the quiz:
   each question a card that opens on its answer. */
body.site .reading { margin-top: 32px; }
body.site .reading h2 { margin-top: 28px; }
body.site .reading p { max-width: 68ch; }
body.site .quiz { margin-top: 32px; }
body.site .quiz details { margin: 0 0 8px; padding: 10px 14px; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; }
body.site .quiz summary { font-weight: 600; cursor: pointer; }
body.site .quiz details p { margin: 8px 0 0; color: var(--slate); }
body.site .covers { counter-reset: covers; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0 0 16px; padding: 0; list-style: none; }
body.site .covers li { counter-increment: covers; display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-weight: 600;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; }
body.site .covers li.in-full-only { background: var(--orange-wash); border-color: var(--orange-deep); }
body.site .covers li::before { content: counter(covers); flex: 0 0 auto; width: 26px; height: 26px; display: flex;
  align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: var(--paper);
  background: var(--blue); border-radius: 999px; }
body.site .covers li.in-full-only::before { background: var(--orange); color: #fff; }
/* The box art: a square, the art shown whole inside it whatever its shape. */
body.site .art-slot { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; margin-bottom: 14px;
  background: var(--blue-tint); border: 2px solid var(--ink); border-radius: 10px;
  font-family: var(--display); font-size: 3rem; color: var(--blue); overflow: hidden; }
body.site .art-slot img { width: 100%; height: 100%; object-fit: contain; }
body.site .locked-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0 0 22px; padding: 0; list-style: none; }
body.site .locked-list li { padding: 11px 14px; font-size: .94rem; color: #c9d9e9; background: var(--blue-deep);
  border: 1.5px solid #3d6e9f; border-radius: 10px; }
body.site p.not-free { margin: 0; }
body.site .nudge { padding: 18px; background: var(--orange-wash); border: 2px dashed var(--orange-deep); border-radius: 14px; }
body.site .nudge h2 { font-size: 1.12rem; }
body.site .nudge p { margin: 0 0 14px; font-size: .94rem; color: var(--slate); }
body.site .nudge .button { display: block; text-align: center; }

/* Contribute */
body.site .sell { display: flex; gap: 44px; padding-top: 48px; padding-bottom: 40px; }
body.site .sell-copy { flex: 1 1 auto; }

/* The checkout page: the credit chooser, then Stripe's form. */
body.site .checkout { padding-top: 8px; max-width: 900px; }
body.site .checkout form.buy { align-items: center; margin: 12px 0 20px; }
body.site .checkout form.buy label.name { flex-direction: row; align-items: center; gap: 10px; }
body.site .price-card { flex: 0 0 344px; align-self: flex-start; }
body.site .price-card .price { margin: 0; font-family: var(--display); font-size: 3.4rem; line-height: 1; color: var(--paper); }
body.site .price-card .per { margin: 6px 0 18px; }
body.site .perks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
body.site .perks li { position: relative; padding-left: 28px; font-size: 1rem; line-height: 1.45; }
body.site .perks li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--orange-tint); }
body.site .panel.blue .perks li { color: var(--paper); }
body.site .steps { counter-reset: steps; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 0 40px; padding: 0; list-style: none; }
body.site .steps li { counter-increment: steps; padding: 22px 24px; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); }
body.site .steps li::before { content: counter(steps); display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: 14px; font-family: var(--display); font-size: 1.1rem; color: #fff;
  background: var(--orange); border: 2px solid var(--ink); border-radius: 999px; }
body.site .steps p { margin: 0; font-size: 1rem; color: var(--slate); }
body.site .two-up { display: flex; gap: 20px; margin-bottom: 40px; }
body.site .two-up > * { flex: 1 1 0; }
body.site .panel.account p:first-child { margin-top: 0; }
body.site .upload-zone { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px 24px;
  background: var(--orange-wash); border: 2px dashed var(--orange-deep); border-radius: 12px; text-align: center; }
body.site .upload-zone p { margin: 0; }
body.site form.contribute { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
body.site form.contribute label.name { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
body.site .page-heading { align-items: center; margin-bottom: 8px; }
body.site table { background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
body.site th { padding: 12px 18px; font-size: .88rem; background: #f3f0e1; border-bottom: 2px solid var(--ink); }
body.site td { padding: 16px 18px; border-bottom: 1px solid var(--rule); }
body.site tr:last-child td { border-bottom: 0; }
body.site .badge { padding: 4px 12px; font-size: .86rem; font-weight: 700; border-radius: 999px; }
body.site .badge-ready, body.site .badge-published, body.site .badge-accepted, body.site .badge-clean { color: var(--blue); background: var(--blue-tint); border: 1.5px solid var(--blue); }
body.site .badge-unmatched, body.site .badge-held, body.site .badge-not_started { color: #7a2a0e; background: #f6ddd0; border: 1.5px solid var(--orange-deep); }

@media (max-width: 900px) {
  body.site h1 { font-size: 2.3rem; }
  body.site .episode, body.site .sell, body.site .two-up { flex-direction: column; gap: 24px; }
  body.site .hero { gap: 32px; padding-top: 36px; padding-bottom: 40px; }
  body.site .hero h1 { max-width: none; font-size: 2.2rem; }
  body.site .price-card { flex-basis: auto; width: 100%; }
  /* The aside turns into a row: the art panel at the left, sized to its square, the nudge beside it. */
  body.site .episode-aside { flex-direction: row; align-items: flex-start; flex-basis: auto; width: 100%; gap: 16px; }
  body.site .episode-aside > .panel { flex: 0 1 260px; }
  body.site .episode-aside > .nudge { flex: 1 1 0; min-width: 0; }
  body.site .episode-aside .button { padding-left: 14px; padding-right: 14px; }
  body.site .search { flex-direction: column; }
  body.site .search .button { width: 100%; }
  body.site .steps, body.site .covers, body.site .locked-list { grid-template-columns: minmax(0, 1fr); }
  body.site p.make { flex-direction: column; align-items: stretch; text-align: center; }
  body.site .wrap { padding-left: 16px; padding-right: 16px; }
}

/* Odds and ends the visitor pages need */
body.site .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.site form.login { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
body.site form.login input[type=email] { flex: 1 1 240px; }
body.site form.login label.check { width: 100%; display: flex; align-items: center; gap: 8px; font-size: .94rem; color: var(--slate); }
body.site form.buy { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 0; }
body.site .upload-panel { margin-bottom: 40px; }
body.site .actions.contribute { gap: 20px; margin-bottom: 18px; }
body.site .actions.contribute form { margin: 0; }

/* Phone widths: the art goes under the copy, the listing row's bar goes under
   the whole row, and the ribbon's label takes its own line above its chips. */
@media (max-width: 640px) {
  body.site .hero { flex-direction: column; gap: 24px; padding-top: 26px; }
  body.site .hero-art { align-self: center; transform: none; }
  body.site .hero-art img { width: 200px; }
}
@media (max-width: 560px) {
  body.site .ribbon .wrap { display: block; }
  body.site .ribbon b { display: block; margin-bottom: 10px; }
  body.site .in-full { grid-template-areas: "cover body play" "scrub scrub scrub"; column-gap: 12px; row-gap: 12px; padding: 14px; }
  body.site .cover { width: 52px; height: 52px; font-size: 1.25rem; }
  body.site .row-body { align-self: center; }
  body.site .in-full strong a { font-size: 1.06rem; }
  body.site .player .play { width: 48px; height: 48px; box-shadow: 2px 2px 0 var(--ink); }
  body.site .player .play svg { width: 16px; height: 18px; }
  body.site .player.is-panel .play { width: 56px; height: 56px; }
  body.site .player.is-card { flex-wrap: wrap; }
  body.site .episode-aside > .panel { flex-basis: 180px; padding: 14px; }
  body.site .episode-aside > .nudge { padding: 14px; }
  body.site .art-slot { font-size: 2rem; }
}