/* Plain, restyle later. */
: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); }
.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; }
.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; }
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; }
.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; }
.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; }
.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; }
form.upload.files { flex-direction: column; align-items: flex-start; }
/* 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; }
ol.attached .remove { padding: 0 6px; font-size: 1.1em; line-height: 1; color: var(--muted); background: none; border: 0; cursor: pointer; }
ol.attached .remove:hover { color: var(--ink); }
.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; }
.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] { 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; }
.login-dialog .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; }