/* Minnu TV tracker. Colours are tokens; dark mode follows the system unless the header button picks one. */
:root {
  --bg: #f6f5fb; --surface: #ffffff; --surface2: #f0eff8; --ink: #1d1b3a; --muted: #625f80; --line: #dedcec;
  --night: #1b1f4b; --star: #f4b63c; --star-ink: #4a3000; --focus: #4b56d8; --link: #3a45c4;
  --pri: #3b46c9; --pri-ink: #ffffff; --ok: #146b3a; --ok-bg: #d8f3e2;
  --s-planned: #eceaf5; --s-planned-t: #5b5878; --s-raw: #e7e6ee; --s-raw-t: #4d4a66;
  --s-redo: #ffe3cc; --s-redo-t: #8a3d00; --s-ready: #dbe6ff; --s-ready-t: #1f3f99;
  --s-approved: #d3f1ec; --s-approved-t: #0d5d52; --s-scheduled: #eadcff; --s-scheduled-t: #5225a3;
  --s-published: #cfeed3; --s-published-t: #165c22; --s-hold: #fbe8b0; --s-hold-t: #6b4a00;
  --s-skip: #f1f0f4; --s-skip-t: #8a889d;
  --warn-bg: #fff1e6; --warn-t: #8a3d00; --bad-bg: #ffe5e5; --bad-t: #9b1c1c;
  --f-display: "Baloo 2", "Noto Sans", system-ui, sans-serif;
  --f-body: "Noto Sans", "Noto Sans Kannada", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #11132c; --surface: #1a1d3d; --surface2: #222651; --ink: #ecebf8; --muted: #a9a7c9; --line: #2f3364;
  --night: #0b0d24; --star-ink: #2a1a00; --focus: #9aa2ff; --link: #a9b1ff; --pri: #7d87ff; --pri-ink: #0b0d24; --ok: #9be3a6; --ok-bg: #163d1c;
  --s-planned: #26294d; --s-planned-t: #b9b7d8; --s-raw: #2a2d4f; --s-raw-t: #c9c7e2; --s-redo: #4a2a12; --s-redo-t: #ffc89a;
  --s-ready: #1e2d5c; --s-ready-t: #a9c1ff; --s-approved: #123f3a; --s-approved-t: #8fe3d6; --s-scheduled: #352158; --s-scheduled-t: #d2b8ff;
  --s-published: #163d1c; --s-published-t: #9be3a6; --s-hold: #4a3a0c; --s-hold-t: #f6d77a; --s-skip: #1f2140; --s-skip-t: #77759a;
  --warn-bg: #3d2610; --warn-t: #ffc89a; --bad-bg: #4a1717; --bad-t: #ffb3b3; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #11132c; --surface: #1a1d3d; --surface2: #222651; --ink: #ecebf8; --muted: #a9a7c9; --line: #2f3364;
  --night: #0b0d24; --star-ink: #2a1a00; --focus: #9aa2ff; --link: #a9b1ff; --pri: #7d87ff; --pri-ink: #0b0d24; --ok: #9be3a6; --ok-bg: #163d1c;
  --s-planned: #26294d; --s-planned-t: #b9b7d8; --s-raw: #2a2d4f; --s-raw-t: #c9c7e2; --s-redo: #4a2a12; --s-redo-t: #ffc89a;
  --s-ready: #1e2d5c; --s-ready-t: #a9c1ff; --s-approved: #123f3a; --s-approved-t: #8fe3d6; --s-scheduled: #352158; --s-scheduled-t: #d2b8ff;
  --s-published: #163d1c; --s-published-t: #9be3a6; --s-hold: #4a3a0c; --s-hold-t: #f6d77a; --s-skip: #1f2140; --s-skip-t: #77759a;
  --warn-bg: #3d2610; --warn-t: #ffc89a; --bad-bg: #4a1717; --bad-t: #ffb3b3; color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--f-body); overflow-x: hidden; }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); max-width: 1200px; margin: 0 auto; }
.mono { font-family: var(--f-mono); font-size: .92em; overflow-wrap: anywhere; }
.muted, .foot, .hint, .help { color: var(--muted); }
.foot, .hint, .help { font-size: 14px; }
.help { display: block; font-weight: 400; }
.tiny { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
.pre { white-space: pre-wrap; }
.loading { padding: 40px 16px; text-align: center; color: var(--muted); }
h2 { font: 800 26px/1.15 var(--f-display); margin: 0 0 4px; }
h3 { font: 800 20px/1.2 var(--f-display); margin: 0; }
.lead { margin: 4px 0 12px; max-width: 70ch; }

/* header */
header { position: sticky; top: 0; z-index: 5; background: var(--night); color: #f3f1ff; padding-top: env(safe-area-inset-top); }
.top { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding-block: 10px 6px; }
.brand { display: flex; align-items: center; gap: 10px; font: 800 22px/1 var(--f-display); }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand small { font: 600 12px/1 var(--f-body); color: #b9b6e6; letter-spacing: .6px; text-transform: uppercase; }
.brand.big { font-size: 28px; color: var(--ink); margin-bottom: 8px; }
.brand.big small { color: var(--muted); }
.me { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.who { font-size: 14px; margin-right: 4px; }
.role { font-size: 12px; font-weight: 700; border-radius: 99px; padding: 2px 9px; margin-left: 4px; }
.r-admin { background: var(--star); color: #3a2600; }
.r-uploader { background: #ffffff22; color: #fff; }
.hbtn { background: #ffffff18; color: #fff; border: 0; border-radius: 10px; min-width: 40px; min-height: 40px; font: 600 17px var(--f-body); cursor: pointer; }
.hbtn.text { font-size: 14px; padding: 0 12px; }
.hbtn:hover { background: #ffffff30; }
a.hbtn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }
nav a { color: #c9c6f0; text-decoration: none; font: 600 15px var(--f-body); padding: 10px 12px 12px; border-bottom: 3px solid transparent; white-space: nowrap; }
nav a[aria-current="page"] { color: #fff; border-color: var(--star); }
.n { font: 600 12px var(--f-body); background: var(--surface2); color: var(--muted); border-radius: 9px; padding: 1px 8px; vertical-align: middle; }
nav .n { background: #ffffff22; color: #fff; }
.n.alert, nav .n.alert { background: var(--star); color: #3a2600; }
.demo { background: var(--star); color: #2a1a00; font-size: 14px; font-weight: 600; }
.demo .wrap { padding-block: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.demo button { border: 2px solid #2a1a00; background: transparent; color: #2a1a00; border-radius: 99px; padding: 4px 14px; font: 700 14px var(--f-body); cursor: pointer; min-height: 36px; }
.demo button[aria-pressed="true"] { background: #2a1a00; color: var(--star); }

main { padding-block: 18px 80px; display: grid; gap: 22px; }
main > * { min-width: 0; }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 600 15px var(--f-body); cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--pri); }
.btn.primary { background: var(--pri); border-color: var(--pri); color: var(--pri-ink); }
.btn.ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.btn.danger { color: var(--bad-t); border-color: var(--bad-t); background: transparent; margin-right: auto; }
.btn.big { min-height: 52px; font-size: 17px; padding: 10px 20px; }
.btn:disabled { opacity: .55; cursor: progress; }
input, select, textarea { font: 16px var(--f-body); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 44px; width: 100%; }
textarea { resize: vertical; }
label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; color: var(--muted); }
label > input, label > select, label > textarea { color: var(--ink); font-weight: 400; }
label.check { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); font-weight: 400; cursor: pointer; min-height: 44px; }
label.check input { width: 22px; height: 22px; min-height: 0; flex: none; accent-color: var(--pri); }
label.block { max-width: 520px; }
.req { font-weight: 400; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters input[type=search] { flex: 1 1 220px; width: auto; }
.filters select { width: auto; flex: 0 1 auto; }
.seg { display: inline-flex; flex-wrap: wrap; background: var(--surface2); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; color: var(--ink); font: 600 15px var(--f-body); padding: 8px 14px; border-radius: 9px; min-height: 40px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 3px #0002; color: var(--pri); }

/* status chips */
.chip { display: inline-block; border: 0; border-radius: 99px; padding: 4px 12px; font: 600 13px var(--f-body); cursor: pointer; white-space: nowrap; min-height: 30px; }
.chip.still { cursor: default; min-height: 0; padding: 2px 10px; }
.chip.none { background: transparent; border: 1.5px dashed var(--line); color: var(--muted); }
.chip.s-planned { background: var(--s-planned); color: var(--s-planned-t); } .chip.s-raw { background: var(--s-raw); color: var(--s-raw-t); }
.chip.s-redo { background: var(--s-redo); color: var(--s-redo-t); } .chip.s-ready { background: var(--s-ready); color: var(--s-ready-t); }
.chip.s-approved { background: var(--s-approved); color: var(--s-approved-t); } .chip.s-scheduled { background: var(--s-scheduled); color: var(--s-scheduled-t); }
.chip.s-published { background: var(--s-published); color: var(--s-published-t); } .chip.s-hold { background: var(--s-hold); color: var(--s-hold-t); }
.chip.s-skip { background: var(--s-skip); color: var(--s-skip-t); }
.legendbox { margin-top: 10px; } .legendbox summary { cursor: pointer; color: var(--link); font-size: 15px; min-height: 36px; display: inline-flex; align-items: center; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); margin-top: 12px; }

/* queue */
.group { display: grid; gap: 10px; }
.group > h3, details.group > summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.group .hint { margin: -6px 0 2px; }
details.group > summary { cursor: pointer; list-style: none; padding: 6px 0; }
details.group > summary::before { content: "▸"; font-size: 18px; color: var(--muted); }
details.group[open] > summary::before { content: "▾"; }
details.group > summary .hint { margin: 0; }
.g-overdue > h3 { color: var(--bad-t); }
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--s-planned-t); border-radius: 16px; padding: 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.card.plain { border-left-width: 1px; }
.card.s-approved { border-left-color: var(--s-approved-t); } .card.s-scheduled { border-left-color: var(--s-scheduled-t); }
.card.s-published { border-left-color: var(--s-published-t); } .card.s-ready { border-left-color: var(--s-ready-t); }
.card.s-redo { border-left-color: var(--s-redo-t); } .card.s-hold { border-left-color: var(--s-hold-t); }
.card.dim { background: var(--surface2); }
.card.dim .title, .card.dim .when { opacity: .7; }
.when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.when .date { font: 800 22px/1.15 var(--f-display); }
.when .time { font: 800 22px/1.15 var(--f-display); color: var(--pri); }
.when .chip { margin-left: auto; }
.late { background: var(--bad-bg); color: var(--bad-t); font-size: 13px; font-weight: 700; border-radius: 6px; padding: 1px 8px; }
.what { font-size: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.handle { color: var(--muted); font-size: 14px; }
.kind { font: 700 12px var(--f-body); text-transform: uppercase; letter-spacing: .5px; border-radius: 6px; padding: 2px 8px; background: var(--s-ready); color: var(--s-ready-t); }
.kind.k-film { background: var(--star); color: #3a2600; }
.title { font-size: 18px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 15px; }
.facts dt { color: var(--muted); font-size: 14px; }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.copyrow { display: flex; flex-wrap: wrap; gap: 8px; }
.copyrow .btn { flex: 1 1 auto; }
.copyrow a.btn.drive { flex-basis: 100%; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 700; }
.do { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.do .btn { flex: 1 1 160px; }
.do .okline { flex-basis: 100%; }
.okline { margin: 0; color: var(--ok); font-weight: 600; }
.waiting { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--s-planned); color: var(--s-planned-t); font-weight: 600; }
.admin { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 10px; }
.empty { color: var(--muted); padding: 20px 0; }

/* stories grid */
.tablebox { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; max-width: 100%; }
table.grid { border-collapse: collapse; width: 100%; font-size: 14px; }
.grid th, .grid td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.grid thead th { font-size: 13px; color: var(--muted); background: var(--surface2); position: sticky; top: 0; }
.grid td { min-width: 104px; }
.grid th.sticky { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 170px; max-width: 240px; border-right: 1px solid var(--line); }
.grid thead th.sticky { background: var(--surface2); z-index: 2; }
.linkish { background: none; border: 0; padding: 0; font: 600 14px var(--f-body); color: var(--ink); text-align: left; cursor: pointer; }
.linkish:hover { color: var(--link); text-decoration: underline; }

/* lists (shorts, users) */
.list { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; min-width: 0; }
.row:hover { border-color: var(--pri); }
.row .main { display: grid; min-width: 0; gap: 2px; }
.row .main b { overflow-wrap: anywhere; }
.row .sub { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.row .side { font-size: 13px; color: var(--muted); text-align: right; }
.userrow { cursor: default; grid-template-columns: 1fr auto auto; }
.userrow select { width: auto; }

/* checks + history */
.issues { display: grid; gap: 8px; }
.issue { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 15px; }
.issue .k { font: 700 11px var(--f-body); text-transform: uppercase; letter-spacing: .6px; border-radius: 6px; padding: 3px 8px; align-self: start; white-space: nowrap; }
.issue .k.bad { background: var(--bad-bg); color: var(--bad-t); } .issue .k.warn { background: var(--warn-bg); color: var(--warn-t); }
.matches { display: grid; gap: 6px; margin-top: 10px; }
.match { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.notice { background: var(--warn-bg); color: var(--warn-t); border-radius: 10px; padding: 10px 12px; margin: 0; font-size: 15px; }
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hist li { display: grid; grid-template-columns: 210px 1fr; gap: 4px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 15px; overflow-wrap: anywhere; }
.hist .when { color: var(--muted); font-size: 14px; display: block; }
.counts { margin: 8px 0; padding-left: 20px; }
.radios { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 10px 0; }
.radios legend { font-size: 14px; font-weight: 600; color: var(--muted); padding: 0 6px; }

/* dialog */
dialog { border: 0; border-radius: 18px; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px #0006; }
dialog.wide { width: min(860px, calc(100vw - 24px)); }
dialog::backdrop { background: #0b0d24aa; }
.dlgform { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.dlghead { display: flex; align-items: center; gap: 10px; padding: 14px 16px 8px; }
.dlghead h3 { flex: 1; overflow-wrap: anywhere; }
.x { background: none; border: 0; color: var(--muted); font-size: 20px; min-width: 44px; min-height: 44px; cursor: pointer; }
.dlgbody { padding: 4px 16px 12px; display: grid; gap: 12px; overflow-y: auto; }
.actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.err { background: var(--bad-bg); color: var(--bad-t); border-radius: 10px; padding: 10px 12px; margin: 0; font-weight: 600; }
.files { font: 12px/1.5 var(--f-mono); color: var(--muted); background: var(--surface2); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; }
pre.sheet { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.5 var(--f-mono); background: var(--surface2); border-radius: 10px; padding: 12px; margin: 0; }

/* toast */
.toast { position: fixed; left: 50%; width: max-content; text-align: center; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px; font-weight: 600; box-shadow: 0 8px 30px #0005; background: var(--ok-bg); color: var(--ok); border: 1.5px solid var(--ok); }
.toast.err { background: var(--bad-bg); color: var(--bad-t); border-color: var(--bad-t); }

/* sign in */
.signin { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.signin .card { width: min(420px, 100%); gap: 14px; }
.signin h2 { margin: 0; }

@media (max-width: 640px) {
  h2 { font-size: 23px; }
  .brand small { display: none; }
  .me { display: contents; }
  .me .hbtn:first-of-type { margin-left: auto; }
  .who { order: 5; flex-basis: 100%; font-size: 13px; margin: 0; }
  .top { padding-block: 8px 2px; gap: 6px 8px; }
  .demo { font-size: 13px; }
  .demo button { min-height: 32px; padding: 2px 12px; font-size: 13px; }
  .grid2 { grid-template-columns: 1fr; }
  .hist li { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
  .row .side { text-align: left; }
  .userrow { grid-template-columns: 1fr auto; }
  .userrow .main { grid-column: 1 / -1; }
  .filters select, .filters .btn { flex: 1 1 auto; }
  .when .date, .when .time { font-size: 21px; }
}
#imppreview .card { max-width: 720px; }