/* Kino: option A, The Cutting Desk (Ian's pick from Argon's round, November 3, 2026). Pravda's Track B: warm paper for the
   desk, slate for the rail and for anything holding video. Instrument Serif for titles, Plus Jakarta Sans for captions and
   controls, Berkeley Mono only for times, counts and handles. Crimson needs you, amber review, emerald approved.
   Loaded last: it points the fleet's --ns-* names at this palette, so app.css (generated from static/style.css) follows,
   then changes the layout. No inline styles: the site's CSP forbids them. */
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --paper: #F6F4EF; --paper-elevated: #FFFFFF; --paper-sunken: #ECE9E1;
  --ink: #141413; --ink-secondary: #52504C; --ink-muted: #6E6B64; --rule: #DCD8CE; --rule-strong: #C4BFB3;
  --slate-bg: #16171A; --slate-card: #1F2126; --slate-border: #2E3138; --slate-text: #F3F1EC; --slate-muted: #A4A8B0;
  --crimson: #C8192E; --crimson-ink: #7D0B19; --crimson-soft: #FCE8EB; --crimson-border: #F2B8C0;
  --amber: #A85400; --amber-ink: #7A3D00; --amber-soft: #FEF2E4; --amber-border: #F5CFA6;
  --emerald: #116B45; --emerald-ink: #0B4F32; --emerald-soft: #E3F5EC; --emerald-border: #A7DFC5;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px;
  --shadow-card: 0 1px 3px rgba(20,20,19,.06), 0 1px 2px rgba(20,20,19,.04);
  --shadow-float: 0 20px 45px -10px rgba(20,20,19,.22), 0 4px 12px rgba(20,20,19,.08);
  color-scheme: light;

  --ns-bg: var(--paper); --ns-surface: var(--paper-elevated); --ns-white: var(--ink); --ns-white-hover: #2B2B29;
  --ns-line: var(--rule); --ns-line-2: var(--rule-strong); --ns-dim: var(--ink-muted); --ns-dim-2: var(--ink-secondary);
  --ns-dim-raised: var(--ink-secondary); --ns-dimmer: var(--rule-strong); --ns-crimson: var(--crimson); --ns-crimson-deep: var(--crimson-ink);
  --ns-focus: var(--ink); --ns-selection: rgba(20,20,19,.16); --ns-glass: rgba(255,255,255,.94); --ns-glass-solid: #fff; --ns-scrim: rgba(20,20,19,.45);
  --ns-radius-popover: var(--radius-lg); --ns-radius-window: var(--radius-lg); --ns-radius-card: var(--radius-md);
  --ns-radius-control: var(--radius-sm); --ns-radius-min: var(--radius-sm); --ns-radius-chip: 4px;
  --edge: rgba(20,20,19,.16); --edge-rim: rgba(255,255,255,0); --edge-base: rgba(20,20,19,0);
  --inner: var(--radius-md); --nested: var(--radius-sm);
  --fs-eyebrow: 11px; --fs-meta: 12px; --fs-small: 13px; --fs-ui: 14px; --fs-body: 15px;
  --fs-display-s: 24px; --fs-display: 32px; --fs-display-l: 40px;
  --ctl-regular: 44px; --ctl-small: 36px; --ctl-mini: 28px;
  --ns-font: var(--font-sans); --ns-display: var(--font-serif);
}
/* slate surfaces: the same names, for dark ground */
.rail, .videopane, .thumb, .selectbar, .review-media, .stageblock {
  --ns-bg: var(--slate-bg); --ns-surface: var(--slate-card); --ns-white: var(--slate-text); --ns-white-hover: #fff;
  --ns-line: var(--slate-border); --ns-line-2: var(--slate-border); --ns-dim: var(--slate-muted); --ns-dim-2: var(--slate-muted);
  --ns-dim-raised: var(--slate-muted); --ns-focus: var(--slate-text); --ns-selection: rgba(243,241,236,.2);
  --ns-glass: var(--slate-card); --ns-glass-solid: var(--slate-card); --edge: rgba(243,241,236,.2); --ns-scrim: rgba(22,23,26,.7);
  color: var(--slate-text);
}

html { background: var(--paper); }
body { background: var(--paper); color: var(--ink); font: var(--fs-body)/1.55 var(--font-sans); }
h1, h2 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.01em; line-height: 1.12; text-wrap: balance; }
h3 { font-weight: 600; }
.eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .1em; color: var(--ink-secondary); }
.hint { font-size: var(--fs-small); line-height: 1.5; }
a:not(.button):hover { color: inherit; }
textarea::placeholder, input::placeholder { color: var(--ink-muted); }
.rail input::placeholder { color: var(--slate-muted); }
/* the numbers' own voice */
.cardmeta, .facts, .railn, .railstats, .macchip, .peekpct, .tr-times, .review-time, .log-date, .usage dd, .selectcount,
#footer-who, #usage-text, .tr-trim, input.tr-stamp, .job .stage { font-family: var(--font-mono); }

/* ---------- the shell ---------- */
.shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); flex: 1; min-height: 100vh; }
.desk { min-width: 0; display: flex; flex-direction: column; }
.rail {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--slate-bg);
  display: flex; flex-direction: column; gap: 20px; padding: 18px 14px 14px;
}
.railtop { display: flex; flex-direction: column; gap: 12px; padding: 0 6px 14px; border-bottom: 1px solid var(--slate-border); }
html[data-route="settings"] .brand, .brand { display: flex; align-items: center; gap: 9px; color: var(--slate-text); font-size: inherit; letter-spacing: 0; }
.brand .mark { width: 28px; height: 28px; flex: none; display: block; }
.brand .word { height: 24px; width: auto; display: block; }
.macchip { align-self: flex-start; min-height: 24px; padding: 0 9px; border: 1px solid var(--emerald-border); background: var(--emerald-soft); color: var(--emerald-ink); border-radius: var(--radius-sm); font-size: var(--fs-meta); max-width: 100%; }
.macchip::before, .macchip.ok::before { background: var(--emerald); }
.macchip.warn { background: var(--crimson-soft); border-color: var(--crimson-border); color: var(--crimson-ink); }
.macchip.warn::before { background: var(--crimson); }
.railnav { display: flex; flex-direction: column; gap: 2px; }
.railnav a, .railnav button {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 38px; padding: 0 10px;
  border: 0; border-radius: var(--radius-md); background: none; color: var(--slate-text); font: 500 var(--fs-ui)/1.2 var(--font-sans); text-align: left; cursor: pointer;
}
.railnav a:hover, .railnav button:hover { background: var(--slate-card); color: #fff; }
.railnav [aria-current="page"], .railnav [aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.railnav [aria-current="page"]:hover, .railnav [aria-pressed="true"]:hover { background: var(--paper); color: var(--ink); }
.railn { font-size: var(--fs-meta); color: var(--slate-muted); font-variant-numeric: tabular-nums; }
.railnav [aria-current="page"] .railn, .railnav [aria-pressed="true"] .railn { color: var(--ink-secondary); }
.railn.alert { min-width: 20px; padding: 1px 5px; text-align: center; border-radius: 10px; background: var(--crimson); color: #fff; }
.railnav [aria-pressed="true"] .railn.alert { color: #fff; }
.railfoot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.railstats { margin: 0; padding: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; background: var(--slate-card); border: 1px solid var(--slate-border); border-radius: var(--radius-md); font-size: var(--fs-meta); line-height: 1.5; }
.railstats dt { color: var(--slate-text); }
.railstats dd { margin: 0; color: var(--slate-muted); overflow-wrap: anywhere; }
.footer { max-width: none; margin: 0; padding: 0 6px; border: 0; display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; font-size: var(--fs-small); color: var(--slate-muted); }
.footer a { min-height: 28px; display: inline-flex; align-items: center; }
.footer a:hover { color: #fff; }
.banner { padding: 8px 24px; box-shadow: inset 3px 0 0 var(--crimson); background: var(--crimson-soft); color: var(--crimson-ink); border-bottom: 1px solid var(--crimson-border); font-size: var(--fs-small); }
.view { max-width: 1400px; padding: 0 24px 56px; margin: 0; flex: 1; }
.view.page { padding-top: 24px; }

/* ---------- controls ---------- */
.button { border-radius: var(--radius-md); font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-ui); }
.button.small, .button.mini { font-size: var(--fs-small); }
.button:hover { border-color: var(--ink-secondary); }
.rail .button:hover, .videopane .button:hover, .selectbar .button:hover { border-color: var(--slate-muted); }
.button.primary, .button.primary:hover { color: #fff; }
.button.primary:hover { background: #A81526; border-color: #A81526; }
.icon { border-radius: var(--radius-md); }
.textbutton { font-size: var(--fs-small); }
textarea, input:not([type]), input[type=text], input[type=search], input[type=password], input[type=number], select { font-family: var(--font-sans); caret-color: var(--ink); }
input[type=number] { font-family: var(--font-mono); }
input[type=checkbox] { accent-color: var(--ink); }
.segments { background: var(--paper-sunken); border-color: var(--rule); border-radius: var(--radius-md); padding: 3px; gap: 2px; margin-bottom: 0; }
.segments button { border-radius: var(--radius-sm); color: var(--ink-secondary); font: 500 var(--fs-small)/1.2 var(--font-sans); min-height: calc(var(--ctl) - 12px); }
.segments button:hover { color: var(--ink); }
.segments button.selected, .segments button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.segments.levels { display: inline-flex; flex: none; --ctl: var(--ctl-small); }
.segments.levels button { flex: none; padding: 0 11px; }
.videopane .segments { background: var(--slate-card); border-color: var(--slate-border); margin-bottom: 10px; }
.videopane .segments button { color: var(--slate-muted); }
.videopane .segments button.selected { background: var(--paper); color: var(--ink); }
input.switch { background: var(--paper-sunken); border-color: var(--rule-strong); }
input.switch { position: relative; }
input.switch::before { background: var(--ink-secondary); }
input.switch:checked { background: var(--ink); border-color: var(--ink); }
input.switch:checked::before { background: #fff; }
details { border-top-color: var(--rule); }
details summary { font-size: var(--fs-small); font-weight: 600; }
.errorbox { background: var(--crimson-soft); color: var(--crimson-ink); box-shadow: inset 3px 0 0 var(--crimson); }

/* ---------- page heads ---------- */
.deskhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px 0 16px; margin: 0 -24px 20px; padding-inline: 24px; background: var(--paper-elevated); border-bottom: 1px solid var(--rule); }
.deskhead h1 { margin: 0; font-size: var(--fs-display-l); }
.deskhead .activityline { display: block; background: none; width: auto; min-height: 0; margin: 4px 0 0; padding: 0; border: 0; color: var(--ink-secondary); font-size: var(--fs-meta); text-align: left; cursor: pointer; }
.libraryfilter { margin: 0; flex: 1 1 320px; max-width: 520px; justify-content: flex-end; }
.libraryfilter input { font-size: var(--fs-small); min-height: var(--ctl-small); padding: 7px 12px; }
.libraryfilter .button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------- home ---------- */
.homegrid { display: block; }
.capture { background: var(--paper-elevated); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 28px; box-shadow: var(--shadow-card); }
.capturehead { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.capturehead .eyebrow { margin: 0 0 2px; }
.capture h2 { font-size: var(--fs-display-s); margin: 0; }
.capture .segments { display: inline-flex; --ctl: var(--ctl-small); }
.capture .segments button { flex: none; padding: 0 14px; }
.composer { gap: 10px; }
#clip-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: start; }
#clip-form textarea { min-height: var(--ctl-regular); max-height: 160px; field-sizing: content; }
#clip-form .videopick, #clip-form .hint, #clip-form .errorbox { grid-column: 1 / -1; }
#clip-form .hint { margin: 0; }
.submitrow { flex-direction: row; align-items: center; gap: 12px; }
.submitrow .button, #upload-btn { width: auto; }
#upload-btn { align-self: flex-start; min-width: 108px; }
.defaults { margin: 12px 0 0; padding: 0; border: 0; font-size: var(--fs-small); color: var(--ink-secondary); }
.queuepeek { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); box-shadow: none; color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; font-size: var(--fs-small); }
.queuepeek .row small { color: var(--ink-secondary); }
.peekring .fill { stroke: var(--ink); }
.peekstrip i.done, .peekstrip i b, .meter i { background: var(--ink); }
.failedrows { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.failedrow { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--crimson-soft); border: 1px solid var(--crimson-border); box-shadow: inset 3px 0 0 var(--crimson); border-radius: var(--radius-md); color: var(--crimson-ink); }
.failedrow > div { min-width: 0; }
.failedrow strong { display: block; font: 600 var(--fs-small)/1.4 var(--font-sans); overflow-wrap: anywhere; }
.failedrow span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: var(--fs-small); line-height: 1.4; overflow-wrap: anywhere; }
.failedrow .button { flex: none; color: var(--ink); }

.librarygrid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.day { margin: 12px 0 0; padding: 0 0 8px; border-bottom: 2px solid var(--ink); font: 400 var(--fs-display-s)/1.1 var(--font-serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
.clipcard { display: flex; flex-direction: column; background: var(--paper-elevated); border: 1px solid var(--rule); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.thumb { flex: none; height: auto; aspect-ratio: 9 / 16; background: var(--slate-bg); border: 0; border-radius: 0; }
.thumb .muted { color: var(--slate-muted); font-size: var(--fs-small); }
.clip-count { color: var(--slate-text); }
.cardbody { display: flex; flex-direction: column; flex: 1; padding: 11px 12px 12px; }
.clipcard h3 { font: 400 20px/1.15 var(--font-serif); margin: 5px 0 6px; color: var(--ink); -webkit-line-clamp: 3; line-clamp: 3; }
.clipcard.error h3 { color: var(--ink); }
.cardmeta { font-size: 11.5px; line-height: 1.45; color: var(--ink-secondary); margin: 0; gap: 2px 8px; }
.cardmeta span { overflow-wrap: anywhere; min-width: 0; }
.cardactions { margin-top: auto; padding-top: 10px; gap: 8px; }
.cardactions .textbutton { min-height: var(--ctl-small); padding: 0 12px; border-radius: var(--radius-md); background: var(--ink); color: var(--paper); font-weight: 500; }
.cardactions .textbutton:hover { color: #fff; background: #2B2B29; }
.clipcard.error { border-color: var(--crimson-border); }
.clipcard.error .cardmeta { color: var(--crimson-ink); }
.carderror { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin: 0; font-size: var(--fs-small); line-height: 1.4; color: var(--crimson-ink); overflow-wrap: anywhere; }
.librarygrid.selecting .clipcard.picked { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.selectbar { color: var(--slate-text); background: var(--slate-bg); border: 1px solid var(--slate-border); box-shadow: var(--shadow-float); backdrop-filter: none; -webkit-backdrop-filter: none; }
.selectbar .button { background: var(--slate-card); color: var(--slate-text); }
.selectbar .button.primary { background: var(--crimson); color: #fff; }
.empty { border-color: var(--rule); background: var(--paper-elevated); }

/* ---------- clip page ---------- */
.back { margin: 14px 0 6px; }
.cliptop { padding: 0 0 14px; margin: 0 -24px 20px; padding-inline: 24px; background: transparent; border-bottom: 1px solid var(--rule); }
.actionsrow { margin: 0; }
.detailgrid { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.detailgrid.is-wide { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); }
.videopane { position: sticky; top: 16px; background: var(--slate-bg); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-float); }
.videostage { background: none; border: 0; padding: 0; }
.detail-video { width: 100%; height: auto; max-height: calc(100vh - 150px); background: #000; border-radius: var(--radius-md); }
.review-launch { width: 100%; margin: 10px 0 0; }
.draftnote { color: var(--slate-muted); font-size: var(--fs-small); }
.videopane .related { border-top-color: var(--slate-border); }
.videopane .previewpanel { color: var(--slate-muted); }
.previewpanel { font-size: var(--fs-small); }
.previewpanel .previewstills img { background: var(--slate-bg); }
.textpane .title { font-size: var(--fs-display-l); margin: 0 0 6px; }
.facts { font-size: var(--fs-meta); line-height: 1.7; margin: 0 0 16px; color: var(--ink-secondary); }
.dirty { background: var(--amber-soft); border-color: var(--amber-border); color: var(--amber-ink); box-shadow: inset 3px 0 0 var(--amber); font-size: var(--fs-small); }
.dirty.bad { background: var(--crimson-soft); border-color: var(--crimson-border); color: var(--crimson-ink); box-shadow: inset 3px 0 0 var(--crimson); }
.dirty .button { color: var(--ink); }
.dirty .button.primary { color: #fff; }
.head-edit, .textpane > details, .copyblock { background: var(--paper-elevated); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 4px 16px; margin: 0 0 12px; box-shadow: var(--shadow-card); }
.copyblock { padding: 14px 16px; }
.copyblock .row { margin-bottom: 8px; }
.copyblock p { font-size: var(--fs-body); line-height: 1.6; color: var(--ink); }
.copyblock.secondary p { color: var(--ink); }
.copyblock .eyebrow { color: var(--ink-secondary); }
.head-edit .field > span, .field > span { font-size: var(--fs-small); color: var(--ink-secondary); }
.head-edit .field textarea, .head-edit .field input { font-size: var(--fs-ui); }
details pre { font-family: var(--font-sans); font-size: var(--fs-small); line-height: 1.6; color: var(--ink); }
.tr-row { background: var(--paper); border-color: var(--rule); }
.tr-text { font-size: var(--fs-ui); }
.skeleton .bar, .skeleton .stage { background: var(--paper-sunken); border-color: var(--rule); }
.working { background: var(--paper-elevated); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 24px; }

/* ---------- settings ---------- */
.settingsbody { max-width: none; margin: 0; }
.setintro { max-width: 70ch; margin: 0 0 16px; font-size: var(--fs-ui); color: var(--ink-secondary); }
.setcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.setcol { display: grid; gap: 16px; min-width: 0; }
.setgroup { margin: 0; padding: 14px 18px; background: var(--paper-elevated); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); min-width: 0; }
.setgroup > .eyebrow { margin: 0 0 2px; }
.settingrow { min-height: 62px; padding: 12px 0; border-bottom-color: var(--rule); }
.setgroup > .settingrow:last-child, .setgroup > .hint:last-child { border-bottom: 0; }
.settingrow.stack { gap: 10px; }
.settinginfo h3 { font-size: var(--fs-ui); font-weight: 600; }
.settinginfo p { font-size: var(--fs-small); line-height: 1.45; color: var(--ink-secondary); margin: 3px 0 0; }
.settingrow select { font-size: var(--fs-small); }
#frame-more summary { font-size: var(--fs-small); min-height: 36px; font-weight: 500; }
#frame-more { border: 0; }
.setgroup .segments.wrap { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
#frame-fit.segments.wrap { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.settings-msg { border-color: var(--rule); background: var(--paper-elevated); }

/* ---------- sheets, review, pages ---------- */
.sheet { background: #fff; border-color: var(--rule); box-shadow: var(--shadow-float); }
.sheethead h2::before { display: none; }
.job, .evt { border-bottom-color: var(--rule); }
#toast { background: var(--slate-bg); color: var(--slate-text); border-color: var(--slate-border); box-shadow: var(--shadow-float); }
.review-dialog { background: #fff; border-color: var(--rule); color: var(--ink); box-shadow: var(--shadow-float); }
.review-dialog h2 { font-size: var(--fs-display); }
.review-note, .review-provenance, .review-status, .review-technical { color: var(--ink-secondary); font-size: var(--fs-small); }
.review-dialog > .review-note:first-of-type { padding: 10px 14px; background: var(--amber-soft); border: 1px solid var(--amber-border); border-radius: var(--radius-md); color: var(--amber-ink); }
.review-media { background: var(--slate-bg); padding: 12px; border-radius: var(--radius-lg); }
.review-player { background: #000; }
.review-cue { background: var(--paper); border-color: var(--rule); }
.review-cue.is-active { background: #fff; border-color: var(--ink); }
.review-text { background: #fff; border-color: var(--rule-strong); color: var(--ink); font-family: var(--font-sans), "Noto Sans Arabic", "Geeza Pro", "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans", "Apple SD Gothic Neo", sans-serif; }
.review-footer { background: #fff; border-top-color: var(--rule); }
.review-footer > :first-child { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.review-footer > :first-child:hover { background: #A81526; }
.review-checked input { accent-color: var(--ink); }
.review-dialog button:disabled { background: var(--paper-sunken); color: var(--ink-secondary); }
.review-import-label input { background: #fff; }
.page h1 { font-size: var(--fs-display-l); }
.page p { color: var(--ink-secondary); line-height: 1.65; }
.page p.lead { color: var(--ink); font-size: 18px; }
.view.page { max-width: 760px; }
.page-mark { width: 72px; height: 72px; padding: 10px; background: var(--slate-bg); border-radius: var(--radius-lg); }
.log-entry { border-bottom-color: var(--rule); }
.log-v { font-family: var(--font-mono); }
.log-text { color: var(--ink-secondary); font-size: var(--fs-small); }

/* ---------- the sign-in page ---------- */
body.splash { background: var(--slate-bg); display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.splash-card { width: min(400px, 100%); display: grid; gap: 14px; padding: 26px; background: var(--paper); color: var(--ink); border: 1px solid var(--slate-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); }
.splash-card .brand { color: var(--ink); }
.splash-card .muted { color: var(--ink-secondary); margin: 0; }
.splash-card label { color: var(--ink-secondary); font: 500 var(--fs-small)/1.3 var(--font-sans); }
.splash-card input:not([type=checkbox]) { background: #fff; border-color: var(--rule-strong); color: var(--ink); font-family: var(--font-sans); }
.splash-card .button { width: 100%; border-radius: var(--radius-md); }
.splash-card .textbutton { color: var(--ink-secondary); justify-self: center; font-family: var(--font-sans); }
.splash-card #msg { color: var(--ink-secondary); font-family: var(--font-sans); }
.splash-card #msg.bad { color: var(--crimson-ink); border-left-color: var(--crimson); }

/* ---------- narrower ---------- */
@media (max-width: 1100px) {
  .setcols { grid-template-columns: minmax(0, 1fr); }
  .detailgrid.is-wide { grid-template-columns: minmax(0, 1fr); }
  .detailgrid.is-wide .videopane { position: static; }
}
@media (max-width: 860px) {
  .shell { display: block; min-height: 0; }
  .rail { position: static; height: auto; overflow: visible; padding: 10px 12px; gap: 8px; }
  .railtop { flex-direction: row; align-items: center; justify-content: space-between; padding: 0; border: 0; }
  .brand { min-height: 44px; }
  .railnav { flex-direction: row; gap: 4px; overflow-x: auto; margin: 0 -12px; padding: 0 12px; scrollbar-width: none; }
  .railnav::-webkit-scrollbar { display: none; }
  .railnav a, .railnav button { flex: none; width: auto; min-height: 44px; padding: 0 12px; font-size: var(--fs-small); white-space: nowrap; }
  .railfoot { display: none; }
  .view { padding: 0 16px 40px; }
  .deskhead { margin: 0 -16px 14px; padding: 12px 16px; }
  .deskhead h1 { font-size: var(--fs-display); }
  .deskhead .activityline { display: flex; align-items: center; min-height: 44px; margin: 0; }
  .libraryfilter { flex-basis: 100%; max-width: none; }
  .libraryfilter input { flex: 1 1 0; min-width: 0; min-height: 44px; font-size: 16px; }
  .defaults a, .facts a { display: inline-flex; align-items: center; min-height: 44px; }
  #frame-more summary { min-height: 44px; }
  #frame-fit.segments.wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #frame-fit.segments.wrap button { padding: 2px 6px; white-space: normal; line-height: 1.2; }
  input.switch::after { content: ""; position: absolute; inset: -9px -4px; }
  .cardbody > a:has(h3) { display: block; padding-block: 11px; margin-block: -11px; }
  .capture { padding: 14px; margin-bottom: 20px; }
  #clip-form { grid-template-columns: minmax(0, 1fr); }
  #clip-form textarea, .field textarea, .field input, .tr-text, .review-text { font-size: 16px; }
  .submitrow { justify-content: space-between; }
  .button.small, .button.mini, .icon.small, .icon.mini, .textbutton, .textbutton.small, .segments, .segments.small { --ctl: 44px; }
  .button.small, .textbutton { min-height: 44px; }
  .segments button, .capture .segments button { min-height: 38px; }
  .capture .segments, .segments.levels { --ctl: 44px; }
  .check { min-height: 44px; }
  .cardactions .textbutton { min-height: 44px; }
  details summary { min-height: 44px; }
  .failedrow { flex-wrap: wrap; }
  .librarygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .clipcard { display: flex; grid-template-columns: none; padding: 0; border-bottom: 1px solid var(--rule); gap: 0; }
  .thumb { height: auto; }
  .clipcard h3 { font-size: 18px; }
  .cardactions { flex-wrap: wrap; }
  .cardactions .button, .cardactions .textbutton { flex: 1 1 100%; }
  .cliptop { margin: 0 -16px 14px; padding-inline: 16px; }
  .detailgrid, .detailgrid.is-wide { display: block; }
  .videopane { position: static; margin-bottom: 16px; padding: 10px; }
  .detail-video { height: auto; max-height: 72vh; }
  .textpane .title { font-size: var(--fs-display); margin: 0 0 6px; }
  .actionsrow .button { flex: 1 1 auto; }
  .settingrow { min-height: 62px; }
  .settingrow:has(.segments.levels), .settingrow:has(select) { flex-wrap: wrap; }
  .setgroup { padding: 12px 14px; }
  .sheetback { padding: 8px; }
  .review-dialog input:not([type=checkbox]) { min-height: 44px; }
}
@media (max-width: 360px) {
  .librarygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cardbody { padding: 9px; }
  .cardmeta { font-size: 11px; }
}
@media (prefers-contrast: more) {
  :root { --ink-secondary: #2B2B29; --rule: #8A867C; --rule-strong: #6E6B64; }
  .hint, .muted, small, .facts, .cardmeta { color: var(--ink); }
  .rail .railn, .railstats dd { color: var(--slate-text); }
}