/* Styver specimen sheet: ink on paper, one jacaranda accent, square corners, 2px rules. */
:root { --paper:#fff; --ink:#000; --graphite:#4a4a4a; --rule:#dcdcd8; --accent:#5b2fc9; --deep:#3f1f94; --tint:#f1ecfb; --stone:#f4f4f2; --danger:#a1251b; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; display: flex; flex-direction: column; background: var(--paper); color: var(--ink);
  font: 400 16px/1.5 "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; }
.top { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 12px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px)); border-bottom: 2px solid var(--ink); }
.brand { font-weight: 800; font-style: italic; font-size: 22px; letter-spacing: -0.02em; }
.main { flex: 1 1 auto; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 18px;
  max-width: 720px; width: 100%; margin: 0 auto; }
h1 { margin: 0; font-weight: 800; font-style: italic; font-size: 30px; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
h2 { margin: 0; font-size: 18px; line-height: 1.25; }
p { margin: 0; }
.muted { color: var(--graphite); }

.stack { display: flex; flex-direction: column; gap: 10px; }
label { font-weight: 700; font-size: 14px; }
input, select, textarea { font: inherit; padding: 10px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); min-height: 44px; }
.btn { min-height: 48px; padding: 0 16px; font: inherit; font-weight: 700; background: var(--accent); color: #fff; border: 2px solid var(--accent); border-radius: 0; cursor: pointer; }
.btn:hover, .btn:active { background: var(--ink); border-color: var(--ink); }
.btn.ghost { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: #fff; }
.btn.link { background: none; border: none; color: var(--graphite); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--ink);
  padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--paper); }
.tabs a { min-height: 56px; display: flex; align-items: center; justify-content: center; text-decoration: none;
  color: var(--graphite); font-size: 13px; font-weight: 500; border-top: 4px solid transparent; }
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 800; border-top-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Layout helpers */
.stack-lg { display: flex; flex-direction: column; gap: 22px; }
.row { display: flex; gap: 8px; align-items: center; }
.row > input { flex: 1 1 auto; min-width: 0; }
.small { font-size: 14px; }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
::selection { background: var(--accent); color: #fff; }
a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* Ledger rows: the Styver ruled list */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.ledger li { border-bottom: 1px solid var(--rule); }
.ledger li:last-child { border-bottom: 2px solid var(--ink); }
.ledger-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 56px;
  padding: 14px 4px; color: var(--ink); text-decoration: none; font-weight: 700; transition: background-color 150ms, color 150ms; }
.ledger-row:hover, .ledger-row:active { background: var(--ink); color: var(--paper); }
.num { font-weight: 800; font-style: italic; font-size: 24px; font-variant-numeric: tabular-nums lining-nums; }
.num.accent { color: var(--accent); }
.ledger-row:hover .num.accent { color: #b9a2ff; }
.mix { font-size: 15px; }

/* Ink band */
.band { background: var(--ink); color: var(--paper); padding: 16px; }
.band p { color: #b5b5b5; font-size: 14px; }
.band .band-title { color: var(--paper); font-weight: 700; font-size: 16px; }

/* Notices */
.notice { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 12px 4px; display: grid; gap: 6px; }
.notice-title { font-weight: 700; }
.flash { font-weight: 700; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.error { font-weight: 700; border-top: 2px solid var(--ink); padding-top: 8px; }
.empty { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 18px 4px; }

/* Idea list */
.ruled { border-top: 2px solid var(--ink); }
.idea { display: flex; flex-direction: column; gap: 8px; padding: 16px 4px 18px; border-bottom: 1px solid var(--rule); }
.idea:last-child { border-bottom: 2px solid var(--ink); }
.idea h2 { font-size: 19px; font-weight: 700; text-wrap: balance; }
.idea-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--graphite); }
.idea-meta b { color: var(--ink); }
.score { font-weight: 800; font-style: italic; font-size: 22px; color: var(--accent); font-variant-numeric: tabular-nums; }
.score.unscored { font-size: 13px; font-style: normal; font-weight: 700; color: var(--graphite); }
.hook { font-weight: 500; }
.status { font-weight: 700; color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions form { margin: 0; }
.swipe select { min-height: 40px; padding: 6px 8px; }
.htmx-request { opacity: 0.6; transition: opacity 150ms; }

/* Wide screens: header and tabs share the content column */
.top, .tabs { padding-left: max(18px, calc((100% - 720px) / 2 + 18px)); padding-right: max(18px, calc((100% - 720px) / 2 + 18px)); }
.btn.link { padding-left: 0; padding-right: 12px; min-height: 44px; }

/* Drafts */
.draft { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; border-bottom: 2px solid var(--ink); }
.preview { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--rule); background: #f4f4f2; }
.preview.tall { aspect-ratio: 9 / 16; max-height: 70vh; width: auto; max-width: 100%; }
.preview.pending { display: flex; align-items: center; justify-content: center; color: var(--graphite); font-weight: 700; max-height: 240px; }
.slides { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; }
.slides .preview { scroll-snap-align: start; }
.caption { white-space: pre-line; font-size: 15px; padding-top: 6px; }
details > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: "+"; margin-left: auto; font-weight: 800; }
details[open] > summary::after { content: "−"; }
.captions details, .more { border-top: 1px solid var(--rule); }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 15px; min-height: 32px; }
.check input { width: 22px; height: 22px; min-height: 0; padding: 0; margin-top: 1px; accent-color: var(--accent); flex-shrink: 0; }
.btn.wide { width: 100%; }
.btn.inline { display: inline-flex; align-items: center; text-decoration: none; }
.failed { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 12px 4px; }
.slides:has(> :nth-child(2)) { grid-auto-columns: 82%; }

/* Upload and voice memo */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 150px;
  border: 2px dashed var(--ink); text-align: center; padding: 16px; cursor: pointer; font-weight: 500; }
.drop:hover { background: #f4f4f2; }
.drop-title { font-weight: 700; font-size: 17px; }
.memo { border: 2px solid var(--ink); padding: 14px; }
.btn.grow { flex: 1 1 auto; }
.btn.recording { background: var(--ink); border-color: var(--ink); }
input:focus-visible + .drop, .drop:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn { white-space: nowrap; }
.memo .row { flex-wrap: wrap; }
.memo select, .swipe select { min-height: 40px; padding: 6px 8px; }

/* Queue */
.slot { display: flex; flex-direction: column; gap: 12px; padding: 14px 4px 16px; border-bottom: 1px solid var(--rule); }
.slot:last-child { border-bottom: 2px solid var(--ink); }
.slot-head { display: flex; gap: 12px; align-items: center; }
.thumb { width: 56px; height: 70px; object-fit: cover; border: 1px solid var(--rule); flex-shrink: 0; }
.stack-tight { display: flex; flex-direction: column; min-width: 0; }
.slot-time { font-weight: 800; font-style: italic; font-size: 18px; }
.slot-title { font-weight: 700; font-size: 15px; }
.postnow { border: 2px solid var(--ink); padding: 12px; }

/* Results table */
.tablebox { overflow-x: auto; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.results { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; font-variant-numeric: tabular-nums lining-nums; }
.results th, .results td { text-align: right; padding: 10px 6px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.results th[scope="row"], .results thead th:first-child { text-align: left; }
.results thead th { font-weight: 700; border-bottom: 2px solid var(--ink); }
.results tbody tr:last-child th, .results tbody tr:last-child td { border-bottom: none; }
.cell-title { display: block; font-weight: 700; }
.results .btn.link { min-height: 32px; font-size: 13px; }
.results select { min-height: 32px; padding: 2px 4px; font-size: 13px; }

/* Draft: what will post, per platform (CSS-only tabs: radio n shows panel n) */
.pv { display: grid; gap: 10px; }
.pv-tabs { display: flex; border-bottom: 2px solid var(--ink); overflow-x: auto; scrollbar-width: none; }
.pv-tabs label { min-height: 44px; padding: 0 14px; display: flex; align-items: center; font-size: 14px; font-weight: 600;
  color: var(--graphite); cursor: pointer; border-bottom: 4px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.pv-panel { display: none; gap: 8px; }
.pv:has(> .pv-radio:nth-of-type(1):checked) > .pv-panel:nth-of-type(1),
.pv:has(> .pv-radio:nth-of-type(2):checked) > .pv-panel:nth-of-type(2),
.pv:has(> .pv-radio:nth-of-type(3):checked) > .pv-panel:nth-of-type(3),
.pv:has(> .pv-radio:nth-of-type(4):checked) > .pv-panel:nth-of-type(4),
.pv:has(> .pv-radio:nth-of-type(5):checked) > .pv-panel:nth-of-type(5) { display: grid; }
.pv:has(> .pv-radio:nth-of-type(1):checked) .pv-tabs label:nth-of-type(1),
.pv:has(> .pv-radio:nth-of-type(2):checked) .pv-tabs label:nth-of-type(2),
.pv:has(> .pv-radio:nth-of-type(3):checked) .pv-tabs label:nth-of-type(3),
.pv:has(> .pv-radio:nth-of-type(4):checked) .pv-tabs label:nth-of-type(4),
.pv:has(> .pv-radio:nth-of-type(5):checked) .pv-tabs label:nth-of-type(5) { color: var(--ink); font-weight: 800; border-bottom-color: var(--accent); }
.pv:has(> .pv-radio:focus-visible) .pv-tabs { outline: 3px solid var(--accent); outline-offset: 2px; }

.frame { position: relative; overflow: hidden; background: var(--stone); border: 1px solid var(--rule); }
.frame.tall { aspect-ratio: 9 / 16; width: min(100%, calc(68vh * 9 / 16)); margin-inline: auto; }
.frame.feed { aspect-ratio: 4 / 5; width: 100%; }
.frame > video, .frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame.slides { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; }
.frame.slides > img { scroll-snap-align: start; }
.hook-cover { display: grid; place-items: center; padding: 14% 10%; background: var(--paper); border: 2px solid var(--ink); }
.hook-cover p { font-weight: 800; font-style: italic; font-size: clamp(24px, 7vw, 34px); line-height: 1.05; letter-spacing: -0.02em;
  text-align: center; text-wrap: balance; }
.frame.tall::after { content: ""; position: absolute; inset: 12.5% 14.8% 22.9% 5.6%; border: 2px dashed var(--accent);
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.38); pointer-events: none; opacity: 0; transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.pv:has(.sz-toggle:checked) .frame.tall::after { opacity: 1; }
.pv-caption .fold { color: var(--accent); font-weight: 700; padding-inline: 0.25em; }
.pv-caption .cut { color: #5f5f5b; background: var(--stone); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.over { color: var(--danger); font-weight: 700; }
.li-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--rule); }
.li-name { font-weight: 700; }

/* Draft: media it needs */
.needs { border-top: 2px solid var(--ink); }
.needs h3 { margin: 0; padding: 12px 4px 4px; font-size: 16px; font-weight: 800; font-style: italic; letter-spacing: -0.01em; }
.need { display: grid; gap: 8px; padding: 12px 4px 14px; border-top: 1px solid var(--rule); }
.need:first-of-type { border-top: 0; }
.need-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.need-name { font-weight: 700; }
.need-status { font-weight: 700; color: var(--graphite); }
.need-status[data-status="ready"] { color: var(--accent); }
.need-status[data-status="failed"] { color: var(--danger); }
.need-media { display: block; height: 112px; width: auto; max-width: 100%; object-fit: contain; background: var(--stone); border: 1px solid var(--rule); }
.need-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.need-actions form { margin: 0; }
.need-upload { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.need-upload > label.btn { display: inline-flex; align-items: center; }
.need-upload input[type=file]:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.need-link, .need-more { border-top: 0; }
.need-link > summary, .need-more > summary { min-height: 40px; font-size: 14px; color: var(--graphite); }
.need-more[open] > summary { color: var(--ink); }
.need .row { flex-wrap: wrap; }

/* Draft: raw materials and checks */
.raw { border-top: 2px solid var(--ink); }
.raw > .stack { padding: 4px 4px 12px; }
.beats { list-style: none; margin: 0; padding: 0; }
.beats li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--rule); }
.beats li:first-child { border-top: 0; }
.beat-role { font-weight: 800; font-style: italic; font-size: 14px; color: var(--accent); }
.verdict { font-weight: 800; font-size: 12px; letter-spacing: 0.04em; }
.flagged { padding: 10px 12px; background: var(--tint); }
.sz { color: var(--graphite); }
.post-to { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.post-to legend { padding: 0; margin-bottom: 6px; }
.btn:disabled { background: var(--rule); border-color: var(--rule); color: var(--graphite); cursor: not-allowed; }
textarea { width: 100%; resize: vertical; line-height: 1.45; }