/* Vendored from the local dashboard (src/fonts). The local build inlines these
   as base64; served over HTTP they are better as real files the browser caches. */
@font-face {
  font-family: 'Brygada';
  src: url("../fonts/Brygada1918_700Bold.53373b09f04e.ttf") format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Brygada';
  src: url("../fonts/Brygada1918_700Bold_Italic.4f3b486b4008.ttf") format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}


:root {
  color-scheme:light;
  --ink:#1C1916; --ink-2:#4A423A; --ink-3:#8A8073;
  --bg:#FAF5EC; --bg-2:#F3EDE1; --bg-3:#E5DBCA; --line:#DCCFB8;
  --accent:#C0410F; --accent-2:#E9872C; --on-accent:#FFF8F0;
  --idea:#9C9384; --draft:#7C6B8F; --final:#4F6D8C; --recorded:#3F7D78;
  --produced:#6B8E4E; --scheduled:#C08A1F; --posted:#C0410F;
  --r:3px; --pad:clamp(1rem,3vw,2rem);
  --sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Brygada',ui-serif,Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark) {
  :root {
    color-scheme:dark;
    --ink:#EFE7DA; --ink-2:#BCB0A0; --ink-3:#8A8073;
    --bg:#14110E; --bg-2:#1C1916; --bg-3:#262019; --line:#332B22;
    --accent:#E9872C; --accent-2:#E2701F; --on-accent:#1C1916;
    --idea:#8A8073; --draft:#9A88AD; --final:#6D8CAB; --recorded:#4E9C95;
    --produced:#8BAE6C; --scheduled:#D9A93F; --posted:#E9872C;
  }
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --ink:#EFE7DA; --ink-2:#BCB0A0; --ink-3:#8A8073;
  --bg:#14110E; --bg-2:#1C1916; --bg-3:#262019; --line:#332B22;
  --accent:#E9872C; --accent-2:#E2701F; --on-accent:#1C1916;
  --idea:#8A8073; --draft:#9A88AD; --final:#6D8CAB; --recorded:#4E9C95;
  --produced:#8BAE6C; --scheduled:#D9A93F; --posted:#E9872C;
}
:root[data-theme="light"] {
  color-scheme:light;
  --ink:#1C1916; --ink-2:#4A423A; --ink-3:#8A8073;
  --bg:#FAF5EC; --bg-2:#F3EDE1; --bg-3:#E5DBCA; --line:#DCCFB8;
  --accent:#C0410F; --accent-2:#E9872C; --on-accent:#FFF8F0;
  --idea:#9C9384; --draft:#7C6B8F; --final:#4F6D8C; --recorded:#3F7D78;
  --produced:#6B8E4E; --scheduled:#C08A1F; --posted:#C0410F;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap { display:grid; grid-template-columns:minmax(0,1fr) 200px;
  grid-template-areas:"top top" "main toc"; gap:var(--pad);
  max-width:1280px; margin:0 auto; padding:var(--pad); align-items:start; }
header.top { grid-area:top; }
main { grid-area:main; min-width:0; }
nav.toc { grid-area:toc; }
@media (max-width:900px) {
  .wrap { grid-template-columns:minmax(0,1fr); grid-template-areas:"top" "toc" "main";
    padding:.9rem .9rem 3rem; gap:1rem; }
  nav.toc { position:static !important; flex-direction:row !important; flex-wrap:wrap;
    gap:.35rem !important; border-left:0 !important; padding-left:0 !important; }
  nav.toc a { border:1px solid var(--line); border-radius:var(--r); padding:.3rem .6rem !important;
    font-size:.78rem; background:var(--bg-2); }
  h1 { font-size:1.7rem; }
  .hero-n { gap:1rem; }
  .hero-n b { font-size:1.35rem; }
  .sec > summary { padding:.7rem .8rem; font-size:1.02rem; flex-wrap:wrap; }
  .sec-b { padding:.8rem; }
  .grid { grid-template-columns:1fr 1fr; gap:.6rem; }
  table { font-size:.8rem; }
  th,td { padding:.4rem .45rem; }
}
@media (max-width:520px) {
  .grid { grid-template-columns:1fr; }
  .item-h { padding:.55rem 0; }
}
@media (pointer:coarse) {
  .act, .mini, .cnt, ol.todo a, .sec > summary { padding-top:.5rem; padding-bottom:.5rem; }
  .notebox textarea { font-size:16px; }  /* stops iOS zoom-on-focus */
  #q { font-size:16px; }
  /* the in-pill reject/approve controls have to be thumb-sized, not icon-sized */
  .cutpill, .slotchip { font-size:.76rem; padding:.35rem .55rem; min-height:2.4rem; }
  .cutpill .pillx, .slotchip .pillok { font-size:.76rem;
    padding:.35rem .3rem .35rem .55rem; margin-left:.55rem; }
  .cal-e { font-size:.72rem; padding:.25rem .35rem; }
  .cal-d { min-height:6rem; }
  .modal-btns .act, .modal-btns .mini { padding:.6rem 1rem; }
}

header.top { grid-column:1/-1; border-bottom:2px solid var(--accent); padding-bottom:1rem; margin-bottom:.5rem; }
h1 { font-family:var(--serif); font-weight:700; font-size:clamp(1.9rem,5vw,2.9rem);
  margin:0 0 .2rem; letter-spacing:-.02em; text-wrap:balance; }
.mast-sub { color:var(--ink-2); font-size:.9rem; display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:baseline; }
.age { font-family:var(--mono); font-size:.78rem; padding:.15rem .5rem; border-radius:var(--r);
  background:var(--bg-3); color:var(--ink-2); }
.age.stale { background:var(--accent); color:var(--on-accent); }
.hero-n { display:flex; gap:1.6rem; margin-top:.9rem; flex-wrap:wrap; }
.hero-n b { font-family:var(--serif); font-size:1.7rem; display:block; line-height:1; }
.hero-n span { font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); }

nav.toc { position:sticky; top:var(--pad); display:flex; flex-direction:column; gap:.1rem;
  font-size:.82rem; border-left:1px solid var(--line); padding-left:.8rem; }
nav.toc a { color:var(--ink-2); text-decoration:none; padding:.22rem 0; border-bottom:1px solid transparent; }
nav.toc a:hover, nav.toc a:focus-visible { color:var(--accent); border-bottom-color:var(--accent); }

.sec { border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2); margin-bottom:.8rem; }
.sec > summary { cursor:pointer; list-style:none; padding:.8rem 1rem; display:flex; gap:.7rem;
  align-items:baseline; font-family:var(--serif); font-size:1.15rem; }
.sec > summary::-webkit-details-marker { display:none; }
.sec-i { color:var(--accent); font-family:var(--sans); font-size:.9rem; width:1rem; }
.sec-t { flex:0 0 auto; }
.sec-s { font-family:var(--sans); font-size:.76rem; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.07em; }
.sec[open] > summary { border-bottom:1px solid var(--line); }
.sec-b { padding:1rem; }
h3 { font-family:var(--sans); font-size:.76rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-3); margin:1.4rem 0 .5rem; }
.sec-b > h3:first-child { margin-top:0; }
.lede { color:var(--ink-2); margin:0 0 1rem; max-width:62ch; }
.empty { color:var(--ink-3); font-style:italic; }
.note { color:var(--ink-3); font-size:.85rem; }
ul.tight { margin:.3rem 0; padding-left:1.1rem; }
ul.tight li { margin:.3rem 0; }

.pill { font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; padding:.12rem .45rem;
  border-radius:var(--r); color:var(--on-accent); white-space:nowrap; }
.s-idea{background:var(--idea)} .s-draft{background:var(--draft)} .s-final{background:var(--final)}
.s-recorded{background:var(--recorded)} .s-produced{background:var(--produced)}
.s-scheduled{background:var(--scheduled)} .s-posted{background:var(--posted)}

a { color:var(--accent); }
.mini { font-family:var(--mono); font-size:.7rem; padding:.1rem .4rem; margin-right:.25rem;
  border:1px solid var(--ink-3); border-radius:var(--r); text-decoration:none; color:var(--ink);
  white-space:nowrap; display:inline-flex; align-items:center; line-height:1.5; }
.mini:hover, .mini:focus-visible { border-color:var(--accent); color:var(--accent); }

.nudge { border-left:3px solid var(--accent); padding-left:1rem; }
.nudge p { max-width:72ch; }
details.sub { margin-top:.9rem; border-top:1px solid var(--line); padding-top:.6rem; }
details.sub > summary { cursor:pointer; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--ink-3); list-style:none; display:flex;
  align-items:center; gap:.5rem; flex-wrap:wrap; }
details.sub > summary::-webkit-details-marker { display:none; }
details.sub > summary::before { content:"+ "; color:var(--accent); }
details.sub[open] > summary::before { content:"- "; }
details.sub > summary:hover { color:var(--accent); }

ol.todo { list-style:none; counter-reset:t; margin:0; padding:0;
  display:flex; flex-direction:column; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
ol.todo li { counter-increment:t; background:var(--bg); }
ol.todo a { display:flex; gap:.8rem; align-items:baseline; padding:.75rem 1rem;
  text-decoration:none; color:var(--ink); }
ol.todo a:hover, ol.todo a:focus-visible { background:var(--bg-3); }
ol.todo a::before { content:counter(t); font-family:var(--mono); font-size:.8rem;
  color:var(--accent); flex:none; }
.todo-w { flex:1; }
.todo-c { font-family:var(--mono); font-size:.75rem; color:var(--ink-3); white-space:nowrap; }

.copy { font:inherit; cursor:pointer; background:none; border:0; padding:0;
  color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.copy.inline { font-size:inherit; }
.mini.copy { font-family:var(--mono); font-size:.7rem; padding:.1rem .4rem; margin-right:.25rem;
  border:1px solid var(--line); border-radius:var(--r); color:var(--ink-2);
  text-decoration:none; background:var(--bg); }
.mini.copy:hover { border-color:var(--accent); color:var(--accent); }
.mini.copy { color:var(--ink); border-color:var(--ink-3); }
.act { font-family:var(--mono); font-size:.7rem; padding:.15rem .5rem; border:1px solid var(--accent);
  border-radius:var(--r); color:var(--accent); background:none; text-decoration:none;
  cursor:pointer; white-space:nowrap; margin-left:.3rem;
  display:inline-flex; align-items:center; line-height:1.5; vertical-align:middle; }
.act.danger { color:var(--posted); border-color:var(--posted); }
.act.danger:hover { background:var(--posted); color:var(--on-accent); }
.xwrap { display:flex; gap:1.4rem; align-items:flex-start; flex-wrap:wrap; }
.xleft { flex:0 0 auto; display:flex; flex-direction:column; gap:.6rem; max-width:280px; }
.xleft .rowvid { margin-bottom:0; }
.xright { flex:1 1 320px; min-width:280px; }
.xright .rowedit { padding-top:0; max-width:none; }
.slotchip { font-family:var(--mono); font-size:.7rem; padding:.12rem .45rem;
  border-radius:var(--r); white-space:nowrap; }
.slotchip.proposed { border:1px solid var(--scheduled); color:var(--ink-2); }
button.slotchip { font:inherit; font-family:var(--mono); font-size:.7rem; background:none;
  cursor:pointer; }
button.slotchip:hover, button.slotchip:focus-visible { border-color:var(--accent);
  color:var(--accent); }
.slotchip.approved { background:var(--scheduled); color:var(--on-accent); }
.slotchip.committed { background:var(--produced); color:var(--on-accent); }
.okbadge { font-family:var(--mono); font-size:.68rem; color:var(--produced);
  border:1px solid var(--produced); border-radius:var(--r); padding:.12rem .45rem;
  white-space:nowrap; display:inline-flex; align-items:center; margin-left:.3rem; }
.cutpill { font-family:var(--mono); font-size:.68rem; color:var(--produced);
  border:1px solid var(--produced); border-radius:var(--r); padding:.12rem .45rem;
  white-space:nowrap; display:inline-flex; align-items:center; }
button.cutpill.live { background:none; cursor:pointer; border-style:dashed; }
button.cutpill.live:hover, button.cutpill.live:focus-visible {
  border-color:var(--accent); color:var(--accent); }
.cutpill .pillx { background:none; border:0; border-left:1px solid var(--produced);
  color:var(--posted); cursor:pointer; font:inherit; font-size:.68rem;
  padding:.2rem .3rem .2rem .45rem; margin-left:.45rem; line-height:1.1;
  align-self:stretch; display:inline-flex; align-items:center; }
.cutpill .pillx:hover, .cutpill .pillx:focus-visible { background:var(--posted);
  color:var(--on-accent); border-radius:0 var(--r) var(--r) 0; }
#justposted { border:1px solid var(--produced); border-radius:var(--r);
  padding:.6rem .8rem; margin-bottom:1rem; }
#justposted h3 { margin:0 0 .45rem; font-family:var(--sans); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.09em; color:var(--produced); font-weight:600; }
.jp-row { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; padding:.15rem 0; }
.jp-t { font-family:var(--serif); font-weight:700; }
nav.toc a.toc-sub { font-size:.78rem; padding-left:.85rem; color:var(--ink-3); }
/* the three bands: needs / workflow / tools */
.band { font-family:var(--sans); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--ink-3); font-weight:700; margin:1.9rem 0 .5rem;
  padding-bottom:.3rem; border-bottom:1px solid var(--line); }
.band:first-child { margin-top:.4rem; }
nav.toc .toc-band { font-size:.66rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-3); font-weight:700; margin:.75rem 0 .15rem; display:block; }
nav.toc .toc-band:first-child { margin-top:0; }
@media (max-width:900px) {
  nav.toc .toc-band { flex-basis:100%; margin:.5rem 0 0; }
}
th.sortable { cursor:pointer; user-select:none; }
th.sortable.sorted-asc::after { content:" ▲"; font-size:.6rem; }
th.sortable.sorted-desc::after { content:" ▼"; font-size:.6rem; }
.pillwrap { position:relative; display:inline-flex; }
.newdot { position:absolute; top:-4px; right:-4px; width:9px; height:9px;
  border-radius:50%; background:var(--posted); box-shadow:0 0 0 2px var(--bg); }
.slotchip { display:inline-flex; align-items:center; }
.slotchip .pillok { background:none; border:0; border-left:1px solid var(--scheduled);
  color:var(--produced); cursor:pointer; font:inherit; font-size:.7rem;
  padding:.2rem .3rem .2rem .45rem; margin-left:.45rem; line-height:1.1;
  align-self:stretch; display:inline-flex; align-items:center; }
.metaslot { margin-top:-.1rem; }
.slotchip .pillok:hover, .slotchip .pillok:focus-visible { background:var(--produced);
  color:var(--on-accent); border-radius:0 var(--r) var(--r) 0; }
.pen-i { vertical-align:-2px; margin-right:.25rem; }
.takegrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:.8rem; padding-top:.6rem; }
.takefig { margin:0; }
.takefig video { width:100%; aspect-ratio:9/16; background:#000; border-radius:var(--r); }
.takefig figcaption { display:flex; gap:.4rem; align-items:center; padding-top:.3rem; }
.takelbl { font-family:var(--mono); font-size:.75rem; color:var(--ink-2); }
.takewrap { flex-basis:100%; border-top:0 !important; padding-top:0 !important; }
/* The note to Produce was a flex item sized to its own content, so it sat in a
   narrow column beside the title with the whole row empty to its right. Give it
   the row and let the field use the space that is actually there. */
.pickrow > .notebox, .pickrow > details.sub:not(.takewrap) { flex-basis:100%; }
.pickrow .notebox textarea { width:min(42rem,100%); }
button.dt.goto { font:inherit; font-family:var(--serif); background:none; border:0;
  color:var(--ink); cursor:pointer; padding:0; text-align:left; }
button.dt.goto:hover, button.dt.goto:focus-visible { color:var(--accent); }
.lib-bar { display:flex; gap:.5rem; margin-bottom:.8rem; }
.lib-bar #q { flex:1; margin-bottom:0; }
#sortsel { font:inherit; font-size:.85rem; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r); padding:.35rem .5rem; }
.editor { display:flex; flex-direction:column; gap:.5rem; align-items:stretch;
  margin-bottom:.8rem; }
.editor .btns, .rowedit .btns, .editorbtns { display:flex; gap:.5rem;
  align-items:center; flex-wrap:wrap; }
.editorbtns > * { flex:0 0 auto; width:auto; min-height:1.6rem; }
.actbar { display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; margin-bottom:.6rem; }
.actbar .act, .actbar .okbadge { margin-left:0; }
.fixw { min-width:7.5rem; justify-content:center; }
span.fixw { display:inline-block; }
.chev { font:inherit; background:none; border:0; color:var(--accent); cursor:pointer;
  font-size:.9rem; padding:.1rem .3rem; transition:transform .15s; display:inline-block; }
.chev.on { transform:rotate(90deg); }
tr.xrow > td { background:var(--bg); padding:1rem; }
.rowvid { width:min(260px,100%); aspect-ratio:9/16; background:#000; border-radius:var(--r);
  display:block; margin-bottom:.7rem; }
.rowedit { display:flex; flex-direction:column; gap:.7rem; max-width:640px; padding-top:.5rem; }
.card .rowedit { max-width:none; }
.card .notebox, .card .rowedit .fld { width:100%; box-sizing:border-box; }
.rowedit label { display:flex; flex-direction:column; gap:.25rem; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }
.rowedit .hint { text-transform:none; letter-spacing:0; font-size:.72rem; }
.rowedit .fld { font:inherit; font-size:.88rem; color:var(--ink); background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r); padding:.45rem .55rem; width:100%;
  box-sizing:border-box; resize:vertical; text-transform:none; letter-spacing:0; }
.rowedit .fld:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.sumbtns { display:inline-flex; gap:.3rem; margin-left:auto; }
details.grp > summary { border-bottom:1px solid var(--line); padding-bottom:.4rem;
  margin-bottom:.5rem; }
.sentlog { list-style:none; margin:.6rem 0 0; padding:0; display:flex;
  flex-direction:column; gap:.35rem; font-size:.78rem; }
.sentlog li { padding:.35rem .5rem; border-left:2px solid var(--scheduled);
  background:var(--bg); border-radius:0 var(--r) var(--r) 0; color:var(--ink-2); }
.sentlog li.done { border-left-color:var(--produced); }
.sentlog .st { margin-right:.3rem; }
.sentlog .ts { font-family:var(--mono); font-size:.68rem; color:var(--ink-3);
  margin-right:.3rem; }
.sentlog .donenote { color:var(--produced); font-size:.74rem; margin-top:.15rem; }
.schedpick { display:flex; flex-direction:column; gap:.5rem; align-items:flex-start;
  margin:.5rem 0; }
.cal { display:grid; grid-template-columns:repeat(7,minmax(110px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; min-width:790px; }
.cal-h { background:var(--bg-3); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--ink-3); padding:.35rem .5rem; }
.cal-d { background:var(--bg); min-height:5.4rem; padding:.3rem .4rem;
  display:flex; flex-direction:column; gap:.2rem; }
.cal-d.past { opacity:.45; }
.cal-d.today { outline:2px solid var(--accent); outline-offset:-2px; }
.cal-n { font-family:var(--mono); font-size:.7rem; color:var(--ink-3); }
.cal-e { font-size:.68rem; line-height:1.15; border-radius:var(--r); padding:.12rem .3rem;
  overflow:hidden; white-space:normal; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; }
.e-committed { background:var(--produced); color:var(--on-accent); }
.e-posted { background:var(--bg-3); color:var(--ink-3); text-decoration:line-through; }
.e-approved { background:var(--scheduled); color:var(--on-accent); }
.e-proposed { border:1px solid var(--scheduled); color:var(--ink-2); }
.cal-open { font-size:.64rem; color:var(--ink-3); opacity:.6; margin-top:auto; }
.traybox { border:1px dashed var(--line); border-radius:var(--r); padding:.6rem .7rem;
  margin-bottom:1rem; }
.traybox.dropok { border-color:var(--accent); border-style:solid; background:var(--bg-3); }
.traybox h3 { margin:0 0 .5rem; font-family:var(--sans); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); font-weight:600; }
.traybox h3 .hint { text-transform:none; letter-spacing:0; font-weight:400; }
.tray { display:flex; flex-wrap:wrap; gap:.4rem; }
.chip2 { font:inherit; font-size:.8rem; padding:.35rem .6rem; border:1px solid var(--produced);
  color:var(--ink); background:var(--bg); border-radius:var(--r); cursor:pointer; }
.chip2[draggable="true"] { cursor:grab; }
.chip2:hover, .chip2:focus-visible { border-color:var(--accent); color:var(--accent); }
.callede { display:flex; gap:1.4rem; align-items:flex-start; flex-wrap:wrap;
  margin-bottom:.9rem; }
/* 18rem, not 24: the pair should stay side by side on a laptop and only stack
   on something genuinely narrow. */
.callede .lede { flex:1 1 18rem; margin:0; }
.calkey { list-style:none; margin:0; padding:.55rem .75rem; display:grid; gap:.35rem;
  border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2);
  font-size:.7rem; color:var(--ink-2); flex:0 0 auto; }
.calkey li { display:flex; align-items:center; gap:.5rem; }
.calkey .cal-e { min-width:4.1rem; text-align:center; flex:0 0 auto; }
.calkey .cal-open { min-width:4.1rem; text-align:center; margin:0; opacity:1; }
.cal-e[draggable="true"] { cursor:grab; }
.cal-e[data-target], .cal-e[draggable="true"] { cursor:pointer; }
.cal-d.dropok { outline:2px dashed var(--accent); outline-offset:-2px; background:var(--bg-3); }
/* A <dialog> so it stacks in the top layer above the item view. The UA sheet's
   dialog defaults (border, padding, auto margins, max-width/height) all have to
   be unset for it to work as the full-bleed scrim it looks like. */
.modal-back { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:60;
  display:flex; align-items:center; justify-content:center; padding:1rem;
  border:0; margin:0; max-width:none; max-height:none; width:100%; height:100%;
  color:inherit; overflow:visible; }
.modal-back::backdrop { background:transparent; }
.modal { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 18px 50px rgba(0,0,0,.35); padding:1.1rem 1.2rem; max-width:26rem;
  width:100%; }
.modal-h { font-family:var(--serif); font-size:1.05rem; font-weight:700; color:var(--ink);
  margin-bottom:.4rem; }
.modal-d { margin:0 0 1rem; font-size:.86rem; color:var(--ink-2); line-height:1.5; }
.modal-btns { display:flex; gap:.5rem; justify-content:flex-end; }
.modal-btns .act, .modal-btns .mini { font-size:.82rem; padding:.45rem .9rem; }
.flash { outline:2px solid var(--accent); outline-offset:2px; }
tr.flash > td { background:var(--bg-3); }
.sumbtns .mini { cursor:pointer; background:var(--bg); }
.item-h .when { font-family:var(--mono); font-size:.72rem; color:var(--ink-2);
  min-width:6.2rem; text-align:right; font-variant-numeric:tabular-nums; }
.editor textarea { width:100%; font-family:var(--mono); font-size:.82rem; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  padding:.6rem; line-height:1.5; }
.edfield { display:flex; flex-direction:column; gap:.25rem; }
.editor input[type="text"], .editor select { font:inherit; font-size:.85rem;
  color:var(--ink); background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r); padding:.4rem .5rem; width:100%; box-sizing:border-box; }
.editor input[type="text"]:disabled { opacity:.55; }
.vprev { font-family:var(--mono); font-size:.78rem; line-height:1.5; color:var(--ink-2);
  background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r);
  padding:.6rem; white-space:pre-wrap; max-height:20rem; overflow-y:auto; margin:0; }
.act:hover { background:var(--accent); color:var(--on-accent); }
.act.big { font-size:.8rem; padding:.4rem .8rem; }
.live-dot { color:var(--produced); }
.cardacts { margin:.4rem 0 .1rem; display:flex; flex-wrap:wrap; gap:.4rem;
  align-items:center; }
.cardacts > *, .actbar > *, .editorbtns > * { margin-left:0; margin-right:0; }
.cardacts > * { min-height:1.55rem; }
.notebox { display:flex; flex-direction:column; gap:.4rem; padding-top:.4rem; }
.notebox textarea { font:inherit; font-size:.85rem; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r); padding:.4rem; resize:vertical;
  width:100%; box-sizing:border-box; }
.notebox textarea:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.notebox .act { margin-left:0; align-self:flex-start; }
.act.live:disabled { opacity:.5; cursor:wait; }
.copied { background:var(--accent) !important; color:var(--on-accent) !important;
  border-color:var(--accent) !important; text-decoration:none !important; }
.rowacts { display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0 .5rem; }
.rowacts .act { margin-left:0; }
/* the capture form: its own block under the request buttons, left aligned */
.addidea { margin:0 0 1rem; }
.addidea > summary { font-size:.82rem; }
.ideaform { display:flex; flex-direction:column; gap:.75rem; padding-top:.6rem;
  max-width:38rem; }
.ideaform label { display:flex; flex-direction:column; gap:.3rem; }
.ideaform .fl { font-family:var(--sans); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-3); }
.ideaform .fl .hint { text-transform:none; letter-spacing:0; }
.ideaform input, .ideaform textarea { font:inherit; font-size:.9rem; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  padding:.5rem .6rem; width:100%; }
.ideaform textarea { resize:vertical; }
.ideaform input:focus-visible, .ideaform textarea:focus-visible {
  outline:2px solid var(--accent); outline-offset:1px; }
.ideaform .act { align-self:flex-start; margin-left:0; }
.vaultbtn { display:inline-flex; align-items:center; gap:.3rem; }
.safe-i { flex:0 0 auto; }
.rowbtns { white-space:nowrap; }
.rowbtns .mini { cursor:pointer; }

.watch { display:block; text-align:center; margin:.6rem 0 .4rem; padding:.5rem;
  background:var(--accent); color:var(--on-accent); text-decoration:none;
  border-radius:var(--r); font-size:.85rem; }
.watch:hover { background:var(--accent-2); }
.pickrow { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
  padding:.5rem 0; border-bottom:1px solid var(--line); }
.deskgrid { display:flex; flex-direction:column; }
.deskrow { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
  padding:.4rem 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.dt { font-family:var(--serif); }
#toast { position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%) translateY(1rem);
  background:var(--ink); color:var(--bg); padding:.5rem 1rem; border-radius:var(--r);
  font-size:.85rem; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:99; }
#toast.on { opacity:1; transform:translateX(-50%) translateY(0); }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.card { margin:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--bg); }
.card video { width:100%; aspect-ratio:9/16; object-fit:cover; background:#000; display:block; }
.vph { width:100%; aspect-ratio:9/16; background:#000; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center; }
.vph.rowvid { width:min(260px,100%); }
.card .vph { border-radius:0; }
.card figcaption { padding:.6rem .7rem; }
.card .links { border-top:1px solid var(--line); margin-top:.65rem; padding-top:.6rem;
  display:flex; flex-wrap:wrap; gap:.4rem; }
.card .links > * { margin:0; }
.notebox { border-top:1px solid var(--line); margin-top:.1rem; padding-top:.55rem; }
.capline { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
  margin:0 0 .9rem; }
.capline .hint { font-size:.78rem; }
.mini.capbtn { cursor:pointer; min-width:1.9rem; justify-content:center; }
.mini.capbtn.on { background:var(--accent); color:var(--on-accent);
  border-color:var(--accent); }
.card-h { font-family:var(--serif); font-size:1rem; line-height:1.25; text-wrap:balance; }
.meta { display:flex; flex-wrap:wrap; gap:.35rem .4rem; align-items:center; margin:.35rem 0; }
.metaslot .slotchip { max-width:100%; }
.when { font-family:var(--mono); font-size:.7rem; color:var(--ink-3); }
.cover { font-size:.75rem; color:var(--ink-3); font-family:var(--mono); }
.cap { font-size:.8rem; color:var(--ink-2); margin:.4rem 0; }

.scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:.85rem; }
th,td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:600; }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); }

.counts { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem; }
.cnt { font:inherit; font-size:.78rem; cursor:pointer; background:var(--bg); color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r); padding:.3rem .6rem; display:flex; gap:.35rem; align-items:baseline; }
.cnt b { font-family:var(--mono); color:var(--ink); }
.cnt[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); }
.cnt:focus-visible, .cnt:hover { border-color:var(--accent); }
#q { font:inherit; width:100%; padding:.45rem .6rem; margin-bottom:.8rem; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r); }
#q:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

.item { border-bottom:1px solid var(--line); }
.item-h { display:flex; gap:.5rem; align-items:center; padding:.45rem 0; cursor:pointer; flex-wrap:wrap; }
.item-t { font-family:var(--serif); font-size:1rem; }
.area { font-size:.72rem; color:var(--ink-3); }
.spacer { flex:1; }
.item-b { display:none; padding:.3rem 0 1.1rem; }
.item.open .item-b { display:block; }
.item.open .item-t { color:var(--accent); }
.facts { display:flex; flex-wrap:wrap; gap:.3rem .9rem; font-size:.75rem; color:var(--ink-2); margin-bottom:.5rem; }
.facts i { font-style:normal; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em;
  font-size:.65rem; margin-right:.3rem; }
.script { border-left:2px solid var(--line); padding-left:1rem; max-width:74ch; font-size:.9rem; }
.script h3,.script h4,.script h5 { font-family:var(--serif); text-transform:none; letter-spacing:0;
  color:var(--ink); font-size:1rem; margin:1rem 0 .3rem; }
.script blockquote { margin:.5rem 0; padding-left:.8rem; border-left:2px solid var(--accent-2); color:var(--ink-2); }
.script hr { border:0; border-top:1px solid var(--line); margin:1rem 0; }
code { font-family:var(--mono); font-size:.85em; background:var(--bg-3); padding:.05rem .25rem; border-radius:2px; }

.bars { display:flex; flex-direction:column; gap:.3rem; max-width:520px; }
.bar { display:grid; grid-template-columns:5.5rem 1fr 2.5rem; gap:.6rem; align-items:center; font-size:.8rem; }
.bl { color:var(--ink-2); }
.bt { height:.6rem; width:var(--w); border-radius:var(--r); min-width:3px; }
.bn { font-family:var(--mono); text-align:right; color:var(--ink-2); }
/* the pop-out item view */
.popout { background:none; border:0; padding:.15rem .2rem; margin-left:.35rem; cursor:pointer;
  color:var(--ink-3); line-height:0; border-radius:var(--r); vertical-align:middle; }
.popout:hover { color:var(--accent); background:var(--bg-3); }
/* Fixed height, not max-height: the dialog used to resize to whatever piece was
   in it, so every open and every tab click resized the window under the cursor. */
#itemdlg { width:min(940px,94vw); height:86vh; padding:0; border:1px solid var(--line);
  border-radius:var(--r); background:var(--bg-2); color:var(--ink); overflow:hidden; }
#itemdlg::backdrop { background:rgba(0,0,0,.55); }
.idlg-w { display:flex; flex-direction:column; height:100%; min-height:0; }
.idlg-t { display:flex; justify-content:flex-end; padding:.6rem .8rem 0; flex:0 0 auto; }
/* flex child + min-height:0 is what makes the inner scroll actually bound; the
   last block in a tab (notes to Produce) was being clipped without it. */
#idlg-body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:0 1.1rem 2rem; }
.ihead { padding-top:.2rem; display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.4rem; }
.ititle { font-family:var(--serif); font-size:1.25rem; font-weight:700; margin:0;
  line-height:1.2; text-wrap:balance; }
.ihead .imeta { flex-basis:100%; margin-top:.15rem; }
/* The input inherits the serif display size, so a 16rem box truncated most
   titles the moment you clicked the pencil. `.ititle` takes the whole header
   row while editing, and the input fills it. */
.titlein { font:inherit; color:var(--ink); background:var(--bg); width:100%;
  min-width:20rem; border:1px solid var(--accent); border-radius:var(--r);
  padding:.1rem .3rem; }
.ihead .ititle.editing { flex:1 1 100%; }
/* a title that opens its own piece: the name is the target, not just the icon */
.ptitle { cursor:pointer; border-bottom:1px solid transparent; }
.ptitle:hover, .ptitle:focus-visible { color:var(--accent);
  border-bottom-color:var(--accent); outline:none; }
.sidebar-acts { display:flex; flex-wrap:wrap; gap:.35rem; }
.sidebar-acts .act { margin:0; }
/* the editor: body first, save row always reachable */
.editor .editorbtns { position:sticky; bottom:0; background:var(--bg-2);
  padding:.5rem 0 .2rem; margin-top:.2rem; z-index:1; }
/* ...except inside the pop-out, where the editor sits in a grid column whose
   height is set by the OTHER column. A sticky row pinned to the dialog's
   scrollport then floats over whatever field happens to be level with it,
   which is the save/cancel row Eugene found cutting through a text box.
   The dialog already scrolls; a static row at the end cannot land mid-field. */
.ipane .editor .editorbtns { position:static; }
.ipane .editor textarea { resize:vertical; }
/* an icon that is a control, not a button-shaped box */
.iconbtn { background:none; border:0; padding:.15rem; margin-left:.3rem; cursor:pointer;
  color:var(--ink-3); line-height:0; border-radius:var(--r); vertical-align:middle; }
.iconbtn:hover, .iconbtn:focus-visible { color:var(--accent); background:var(--bg-3); }
/* the edit controls: deliberately quieter than .act, which changes state */
.ghost { background:none; border:1px solid var(--line); color:var(--ink-2);
  border-radius:var(--r); padding:.3rem .6rem; font-family:var(--sans);
  font-size:.78rem; cursor:pointer; display:inline-flex; align-items:center;
  gap:.35rem; }
.ghost:hover, .ghost:focus-visible { color:var(--accent); border-color:var(--accent); }
.actbar.editrow { margin-top:.45rem; }
/* a stage the piece has not reached: still there, still clickable, visibly not
   where the work is */
.itab.ahead { color:var(--ink-3); opacity:.6; }
.itab.ahead[aria-selected="true"] { opacity:1; }
.notesblk h4 { display:flex; align-items:center; }
.notesta { width:100%; font:inherit; font-size:.84rem; color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  padding:.4rem .5rem; resize:vertical; }
.imeta { display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; }
.itabs { display:flex; gap:.15rem; border-bottom:1px solid var(--line); margin-top:.9rem;
  position:sticky; top:0; background:var(--bg-2); z-index:2; overflow-x:auto; }
.itab { background:none; border:0; border-bottom:2px solid transparent; padding:.55rem .75rem;
  font-family:var(--sans); font-size:.8rem; color:var(--ink-3); cursor:pointer;
  white-space:nowrap; }
.itab:hover { color:var(--ink-2); }
.itab[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--accent);
  font-weight:600; }
.ipane { padding-top:.95rem; }
.ipane > h4 { font-family:var(--sans); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-3); margin:1rem 0 .4rem; }
.ipane video { width:100%; max-height:50vh; border-radius:var(--r); background:#000;
  display:block; }
.ipane .script { max-height:none; }
/* .item-b is collapsed by default because in the library it is the fold; inside
   the pop-out the tab IS the fold, so it always shows. */
.ipane .item-b { display:block; }
/* Script tab: the current version's words on the left, everything ABOUT the
   piece (its notes, the channel to the Sprint, the drafts it came from) on the
   right. Two columns because those are two different reading jobs, and stacking
   them buried the notes under a screenful of script. */
.itemcols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,17rem);
  gap:1.4rem; align-items:start; }
.icol-side { display:flex; flex-direction:column; gap:.9rem; min-width:0;
  border-left:1px solid var(--line); padding-left:1.1rem; }
.icol-side > details { margin:0; }
.fieldblk h4 { font-family:var(--sans); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-3); margin:0 0 .35rem; }
.item-b > .scriptview > .fieldblk { margin-top:1.1rem; }
.capbody, .notesbody { font-size:.86rem; color:var(--ink-2); line-height:1.55; }
.capbody p, .notesbody p { margin:0 0 .5rem; }
.notesbody ul { margin:0; padding-left:1.1rem; }
.vname { font-family:var(--sans); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-3); margin:0 0 .5rem; }
.vhist > summary { font-size:.78rem; }
.vhist .script { font-size:.82rem; color:var(--ink-2); }
.vcap { font-size:.78rem; color:var(--ink-3); margin:.4rem 0 0; }
@media (max-width:820px) {
  .itemcols { grid-template-columns:minmax(0,1fr); }
  .icol-side { border-left:0; padding-left:0; border-top:1px solid var(--line);
    padding-top:1rem; }
}
@media (max-width:640px) {
  #itemdlg { width:100vw; max-width:100vw; height:100vh; max-height:100vh; border:0;
    border-radius:0; }
  .idlg-w { max-height:100vh; height:100vh; }
}
/* the date picker: the big calendar's language, one month wide */
.minical { border:1px solid var(--line); border-radius:var(--r); background:var(--bg);
  padding:.4rem; width:min(300px,100%); }
.mc-h { display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  margin-bottom:.35rem; }
.mc-m { font-family:var(--sans); font-size:.74rem; font-weight:600; }
.mc-nav { background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r);
  cursor:pointer; color:var(--ink-2); width:1.5rem; height:1.5rem; line-height:1; padding:0; }
.mc-nav[disabled] { opacity:.3; cursor:default; }
.mc-g { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); }
.mc-wd { background:var(--bg-3); font-size:.58rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-3); text-align:center; padding:.22rem 0;
  font-family:var(--sans); }
.mc-d { background:var(--bg); border:0; font-family:var(--mono); font-size:.72rem;
  color:var(--ink); padding:.36rem 0; cursor:pointer; text-align:center; }
.mc-d:hover:not([disabled]) { background:var(--bg-3); }
/* Three different "not available" states, three different readings. Out-of-month
   and past are absences (faded, no fill); a booked day is a PRESENCE, so it
   carries the same green the calendar uses for a committed post. They used to
   share one grey and were impossible to tell apart. */
.mc-d.out { opacity:.3; }
.mc-d.past { color:var(--ink-3); opacity:.4; cursor:default; }
.mc-d.taken { background:color-mix(in srgb, var(--produced) 22%, var(--bg));
  color:var(--ink-2); cursor:not-allowed; text-decoration:line-through;
  text-decoration-color:color-mix(in srgb, var(--produced) 70%, transparent); }
.mc-d.taken.out { opacity:.55; }
.mc-d.today { outline:1px solid var(--accent); outline-offset:-1px; }
.mc-d.sel { background:var(--accent); color:var(--on-accent); font-weight:700; opacity:1;
  text-decoration:none; }
.pickbtns { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
/* .mini sets display, which outranks the UA rule for [hidden], so hiding by
   attribute silently did nothing. Anything hidden anywhere stays hidden. */
[hidden] { display:none !important; }
.pickedday { font-family:var(--mono); font-size:.75rem; color:var(--ink-2); }
/* a control that cannot act must not look like one that can */
.act[disabled], .mini[disabled], button[disabled] { opacity:.45; cursor:default; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }
/* Added for the web editor. The local dashboard styles its textareas inside a
   modal (.notebox textarea, .modal-btns); these are the same controls rendered
   inline on the item page. */
.sec-b textarea {
  width: 100%; font: inherit; line-height: 1.55; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  padding: .6rem .7rem; resize: vertical;
}
.sec-b textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (pointer: coarse) { .sec-b textarea { font-size: 16px; } }