/* 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; }
.sample { padding: 12px 0; border-bottom: 1px solid var(--line); }
.sample 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 { background: #d7f0dd; }
.badge-audio_ready, .badge-script_written, .badge-synthesizing, .badge-writing_script { background: #dde9f7; }
.badge-pdf_missing, .badge-rejected, .badge-failed, .badge-skipped { background: #fbdcdc; }
.badge-unmatched, .badge-identifying, .badge-received { background: #fbeccd; }
.badge-free { background: #d7f0dd; }
.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); }
.button.tiny { padding: 2px 8px; font-size: .8em; }
form.upload { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
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 (intro, ads, outro) */
table.components tr.disabled td { color: var(--muted); }
table.components tr.summary-row td { background: #f6f8fa; }
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; }
pre.preview { max-height: 240px; }
code { font: 13px ui-monospace, monospace; background: #f6f8fa; padding: 1px 4px; border-radius: 4px; }