/* ============================================================
   AuraStudio — paper & ink (Build Aura design system, console cut)
   One ink (#0022FB) on soft paper. Serif prose, typewriter labels,
   square corners, flat sheet, instant inversions.
   Console pragmatics kept deliberately: minimal functional status
   colors (ok/warn/err as printed proofing marks) and the liquid
   segmented thumb the user asked for — squared off.
   ============================================================ */

@font-face {
  font-family: "STIX Two Text";
  src: url("/static/fonts/stix-two-text.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/static/fonts/courier-prime.woff2") format("woff2");
  font-display: swap;
}

:root {
  --ink:        #0022FB;
  --ink-muted:  rgba(0, 34, 251, .68);
  --ink-faint:  rgba(0, 34, 251, .18);
  --paper:      #F5F5F5;
  --panel:      #FFFFFF;
  --ok:         #1a7f37;
  --warn:       #9a6700;
  --err:        #b3261e;
  --teal:       #0b7d7d;   /* Finishing — distinct from Done's green; 4.9:1 on panel */
  /* client identity palette — 16 hues 22.5° apart in slot order (1 = red · 2 orange ·
     3 brown · 4 gold · 5 lime · 6 green · 7 emerald · 8 teal · 9 turquoise · 10 blue ·
     11 indigo · 12 violet · 13 purple · 14 magenta · 15 crimson · 16 pink). Two inks per
     slot, SAME hue: --cl-N is the TEXT ink (name cells, table cells — each ≥4.5:1 on its
     panel; odd slots vivid, even slots DEEP (light) / PALE (dark), so hue-neighbours also
     differ in lightness) and --bar-N is the BAR ink for the timeline (vivid mid-lightness
     fills; validated 2026-09-03 with the dataviz palette script: L .43–.77, C ≥ .10,
     hand-out neighbours ≥ 15 ΔE normal vision — orange/gold sit under 3:1 on white and
     the crimson/teal deutan pair is in the 6–8 band, both relieved by the name column +
     the "C5 1/8" label every bar carries). cycles._slot_map hands slots out in a
     max-spread order (the first 8 clients = the vivid 45° ring). */
  --cl-1: #e31b36; --cl-2: #c2410c; --cl-3: #a36714; --cl-4: #615905;
  --cl-5: #5a7f0f; --cl-6: #05660d; --cl-7: #108554; --cl-8: #05635c;
  --cl-9: #137da1; --cl-10: #0956ad; --cl-11: #1c38eb; --cl-12: #3c09b2;
  --cl-13: #a61ceb; --cl-14: #9e089e; --cl-15: #b0094c; --cl-16: #d91a99;
  --bar-1: #e11d2e; --bar-2: #f97316; --bar-3: #a0522d; --bar-4: #ca8a04;
  --bar-5: #65a30d; --bar-6: #16a34a; --bar-7: #059669; --bar-8: #0d9488;
  --bar-9: #0891b2; --bar-10: #2563eb; --bar-11: #4f46e5; --bar-12: #7c3aed;
  --bar-13: #9333ea; --bar-14: #c026d3; --bar-15: #be123c; --bar-16: #ec4899;
  --ink-solid:  #0022FB;   /* brand blue for FILLED surfaces — identical in both themes */
  --on-ink:     #F5F5F5;   /* text sitting on a brand-blue fill */
  --log-text:   #333333;
  --row-hover:  rgba(0, 34, 251, .05);
  --serif: "STIX Two Text", "Times New Roman", Times, serif;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
}

/* dark: white ink on near-black paper, brand blue kept for filled surfaces —
   #0022FB *text* on black falls below readable contrast, so type goes white */
:root[data-theme="dark"] {
  --ink:        #F2F2F2;
  --ink-muted:  rgba(242, 242, 242, .62);
  --ink-faint:  rgba(242, 242, 242, .16);
  --paper:      #0B0B0C;
  --panel:      #141415;
  --ok:         #3fb950;
  --warn:       #d29922;
  --err:        #f85149;
  --teal:       #26b5b5;
  --cl-1: #e84157; --cl-2: #ff9d5c; --cl-3: #d9983d; --cl-4: #fff694;
  --cl-5: #a5d93d; --cl-6: #94ff9d; --cl-7: #3dd998; --cl-8: #94fff6;
  --cl-9: #3db2d9; --cl-10: #94c6ff; --cl-11: #5c72ff; --cl-12: #b494ff;
  --cl-13: #ba45f5; --cl-14: #ff94ff; --cl-15: #ff94bf; --cl-16: #de3ea9;
  /* bar inks re-stepped for the dark surface (validated: L .48–.67 on #141415) */
  --bar-1: #e5323f; --bar-2: #ea580c; --bar-3: #b8632f; --bar-4: #b8860b;
  --bar-5: #65a30d; --bar-6: #16a34a; --bar-7: #059669; --bar-8: #0d9488;
  --bar-9: #0aa3bf; --bar-10: #2563eb; --bar-11: #6366f1; --bar-12: #7c3aed;
  --bar-13: #9333ea; --bar-14: #c026d3; --bar-15: #be123c; --bar-16: #ec4899;
  --log-text:   #c9c9cc;
  --row-hover:  rgba(255, 255, 255, .06);
}

* { box-sizing: border-box; border-radius: 0; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--serif);
}

/* ---- masthead: brand · tabs · settings ---- */
.masthead {
  position: relative;
  display: flex; align-items: center; gap: 24px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
/* wordmark in the flow, ahead of the tabs — it used to float centred and
   sat on top of the tab row once there were five sections */
.brand { display: inline-flex; flex: 0 0 auto; align-items: baseline; white-space: nowrap; text-decoration: none; color: var(--ink); }
.brand-name { font-family: var(--serif); font-weight: 500; font-size: 20px; }
.masthead > .brand { flex-basis: 100px; }
.masthead .tabs { flex-wrap: wrap; }
@media (min-width: 1448px) {
  /* Align tabs with the page and center the wordmark in the space before them. */
  .masthead { padding-left: calc((100% - 1200px) / 2 + 24px); }
  .masthead > .brand { position: absolute; left: 0; width: calc((100% - 1200px) / 2 + 24px); justify-content: center; }
}

/* ---- segmented tabs (square, mono, sliding ink thumb) ---- */
.tabs {
  position: relative;
  display: inline-flex; gap: 3px; padding: 3px;
  border: 1px solid var(--ink); background: var(--paper);
}
.tabs-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: 0;
  background: var(--ink-solid);
}
.tab {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 20px; text-decoration: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: lowercase; color: var(--ink);
  transition: background .08s, color .15s;
}
.tab:hover { background: var(--ink-faint); color: var(--ink); }
.tab.active { background: var(--ink-solid); color: var(--on-ink); }  /* no-JS fallback */
.tab.active:hover { background: var(--ink-solid); color: var(--on-ink); }
.tabs--js .tab { position: relative; z-index: 1; background: none !important; }
.tabs--js .tab.active { color: var(--on-ink); }

/* you-are-here: the active nav text breathes a soft glow */
@keyframes nav-pulse {
  0%, 100% { text-shadow: 0 0 3px currentColor; }
  50%      { text-shadow: 0 0 10px currentColor, 0 0 18px currentColor; }
}
.tab.active .tab-label { animation: nav-pulse 2.2s ease-in-out infinite; }
#healthchip.here .health-link { animation: nav-pulse 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .tab.active .tab-label, #healthchip.here .health-link { animation: none; }
}

/* masthead right cluster is just the health pill + theme toggle now;
   the daemon/sync chips live on the health page's status bar.
   #healthchip is a TRACK like .tabs: outlined box, inner block inset 3px —
   same construction, so the two components read as one family. */
#healthchip {
  min-width: 110px; height: 40px; box-sizing: border-box;
  padding: 3px; border: 1px solid var(--ink); background: var(--paper);
  display: flex; justify-content: flex-end; align-items: center;
}
#sync, #daemon { display: flex; align-items: center; gap: 8px; }
.status-bar { display: flex; flex-wrap: wrap; align-items: center;
              gap: 12px; margin: 0 0 24px; min-height: 31px; }

/* emergency stop: quiet outline until you mean it */
.stop-btn {
  height: 29px; padding: 0 12px; margin: 0; font-size: 11px;
  color: var(--err); border: 1px solid var(--err); background: transparent;
}
.stop-btn:hover { background: var(--err); color: #fff; }

/* run-card trash action (same quiet-danger language as stop) */
.run-actions { padding: 0 16px 12px; border-top: 1px solid var(--ink-faint); }
.run-actions form { margin: 12px 0 0; }
.run-actions .trash-btn {   /* outspecifies the filled button[type=submit] default */
  height: 30px; padding: 0 14px; margin: 0; font-size: 11px;
  color: var(--err); border: 1px solid var(--err); background: transparent;
}
.run-actions .trash-btn:hover { background: var(--err); color: #fff; }

/* health pill + theme toggle: ONE shared box definition — they sit side by
   side and must be pixel-identical */
/* theme toggle: standalone 40px box (an action, not a location) */
.theme-toggle {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 16px; margin: 0; line-height: 1;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: lowercase;
  color: var(--ink); background: transparent; border: 1px solid var(--ink);
  transition: background .08s, color .08s;
}
.theme-toggle:hover { background: var(--ink-solid); color: var(--on-ink); }

/* corner menu: ⚙ with the health dot; the pill + theme toggle + settings link inside */
.mast-menu { margin-left: auto; position: relative; }
.mast-menu > summary { list-style: none; cursor: pointer; }
.mast-menu > summary::-webkit-details-marker { display: none; }
.mast-gear {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 14px; font-size: 17px; line-height: 1;
  color: var(--ink); border: 1px solid var(--ink); background: var(--paper);
  transition: background .08s, color .08s;
}
.mast-gear:hover, .mast-menu[open] > .mast-gear { background: var(--ink-solid); color: var(--on-ink); }
.mast-dot { width: 7px; height: 7px; background: var(--ok); }
.mast-menu:has(.hl-warn) .mast-dot { background: var(--warn); }
.mast-menu:has(.hl-err) .mast-dot { background: var(--err); }
.mast-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 6px; border: 1px solid var(--ink); background: var(--paper);
}
.mast-pop #healthchip, .mast-pop .theme-toggle { width: 100%; }
.mast-pop #healthchip { justify-content: stretch; }
.mast-pop .health-link { flex: 1; justify-content: center; }
.mast-link { display: block; padding: 8px 14px; text-align: center; text-decoration: none;
  font: 12px var(--mono); letter-spacing: .08em; text-transform: lowercase; color: var(--ink);
  border: 1px solid var(--ink-faint); }
.mast-link:hover { border-color: var(--ink); background: var(--ink-faint); }

/* health pill: the INNER block of the #healthchip track — like a tab in .tabs */
.health-link {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  line-height: 1; border: 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: lowercase; text-decoration: none;
  color: var(--ink); background: transparent;
  transition: background .08s, color .08s;
}
.health-link:hover { background: var(--ink-faint); }
.health-link .dot { width: 7px; height: 7px; margin-right: 8px; }
.hl-ok .dot   { background: var(--ok); }
.hl-warn .dot { background: var(--warn); }
.hl-err .dot  { background: var(--err); }
.hl-warn { color: var(--warn); }
.hl-err  { color: var(--err); }

/* on the health page the inner block fills with its state color — the exact
   active-tab treatment */
#healthchip.here .health-link { background: var(--ink-solid); color: var(--on-ink); }
#healthchip.here .health-link.hl-warn { background: var(--warn); color: #fff; }
#healthchip.here .health-link.hl-err  { background: var(--err); color: #fff; }
#healthchip.here .health-link .dot { background: currentColor; }
#healthchip.here .health-link:hover { opacity: .92; }

/* ---- health rows ---- */
.h-row {
  display: grid; grid-template-columns: 14px 225px 1fr;
  column-gap: 12px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--ink-faint);
}
.h-row:last-child { border-bottom: 0; }
.h-dot { width: 8px; height: 8px; align-self: center; }
.h-ok   { background: var(--ok); }
.h-warn { background: var(--warn); }
.h-err  { background: var(--err); }
.h-info { background: var(--ink-faint); }
.h-label { font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
           text-transform: lowercase; overflow-wrap: anywhere; }
.h-value { font-size: 14px; overflow-wrap: anywhere; }
.h-hint {
  grid-column: 3; font-family: var(--mono); font-size: 12px;
  color: var(--err); margin-top: 2px;
}

/* ---- page head ---- */
main { padding: 40px 24px 80px; max-width: 1200px; margin: 0 auto; }
.page-head { margin: 0 0 24px; }
.page-title { font-family: var(--serif); font-weight: 500; font-size: 40px;
              line-height: 1; margin: 0; }
.page-note {
  margin: 8px 0 0; font-family: var(--mono); font-size: 13px;
  letter-spacing: .08em; text-transform: lowercase; color: var(--ink-muted);
}

/* ---- panels ---- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card {
  background: var(--panel); border: 1px solid var(--ink);
  padding: 20px 24px 24px; overflow-x: auto;
}
.card.wide { grid-column: 1 / -1; }

h2 {
  font-family: var(--mono); font-weight: 400; font-size: 12px;
  letter-spacing: .1em; text-transform: lowercase;
  color: var(--ink); margin: 0 0 16px;
}
.status-h { font-family: var(--serif); font-size: 17px; font-weight: 500;
            margin: 18px 0 6px; }
.count { color: var(--ink-muted); font-family: var(--mono); font-size: 12px; }
/* queue status groups collapse; same disclosure construction as .alt-flow */
.status-group summary.status-h { cursor: pointer; list-style: none; }
.status-group summary.status-h::-webkit-details-marker { display: none; }
.status-group summary.status-h::before { content: "▸ "; color: var(--ink-muted); }
.status-group[open] summary.status-h::before { content: "▾ "; }
.status-group summary.status-h:hover::before { color: var(--ink); }


/* status colors — priority at a glance. One class family; dots and badges both
   inherit through currentColor. amber = waiting on pickup/human, blue = machine
   active, teal = finishing, green = done, muted = out the door. */
.st-to-edit, .st-auraedit, .st-review { color: var(--warn); }
.st-editing   { color: var(--ink); }
.st-finishing { color: var(--teal); }
.st-done      { color: var(--ok); }
.st-uploaded, .st-archived { color: var(--ink-muted); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
       background: currentColor; margin-right: 8px; }

/* client identity — text wears its slot color (validated palette, see :root) */
.cl-1 { color: var(--cl-1); } .cl-2 { color: var(--cl-2); }
.cl-3 { color: var(--cl-3); } .cl-4 { color: var(--cl-4); }
.cl-5 { color: var(--cl-5); } .cl-6 { color: var(--cl-6); }
.cl-7 { color: var(--cl-7); } .cl-8 { color: var(--cl-8); }
.cl-9 { color: var(--cl-9); } .cl-10 { color: var(--cl-10); } .cl-11 { color: var(--cl-11); } .cl-12 { color: var(--cl-12); }
.cl-13 { color: var(--cl-13); } .cl-14 { color: var(--cl-14); } .cl-15 { color: var(--cl-15); } .cl-16 { color: var(--cl-16); }

/* ---- login (password only — the browser dialog is replaced by this page) ---- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
              background: var(--paper); }
.login-card { display: flex; flex-direction: column; gap: 14px; width: 320px;
              padding: 32px 28px; background: var(--panel); border: 1px solid var(--ink); }
.login-card .brand-name { font-size: 24px; text-align: center; }
.login-note { margin: 0; text-align: center; font-family: var(--mono); font-size: 12px;
              letter-spacing: .08em; text-transform: lowercase; color: var(--ink-muted); }
.login-card input[type=password], .login-card input[type=text], input[type=password], input[type=email], input[type=search] {
  height: 46px; padding: 0 12px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--ink); font: 14px var(--mono);
}
.login-card input[type=password]:focus, .login-card input[type=text]:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.login-card input[type=password]::placeholder { color: var(--ink-muted); }

/* each dashboard card scrolls inside itself; the page stays one screen-ish */
#queue > [hx-get], #runs #runs-body { max-height: 520px; overflow-y: auto; }
#deliveries > [hx-get] { max-height: 340px; overflow-y: auto; }
.loading { font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
           text-transform: lowercase; color: var(--ink-muted); }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-family: var(--mono); font-weight: 400; font-size: 12px;
  letter-spacing: .1em; text-transform: lowercase; color: var(--ink-muted);
  padding: 6px 10px; border-bottom: 1px solid var(--ink);
}
td { padding: 9px 10px; border-bottom: 1px solid var(--ink-faint); font-size: 15px; }
tbody tr:hover { background: var(--row-hover); }
a { color: var(--ink); text-decoration: underline; }
/* inversion hover is for content links only — masthead tabs style themselves */
main a:hover { background: var(--ink-solid); color: var(--on-ink); text-decoration: none; }
.muted { color: var(--ink-muted); }

/* ---- notices ---- */
.error {
  color: var(--err); background: var(--panel);
  border: 1px solid var(--err);
  padding: 10px 14px; margin: 4px 0 14px; font-size: 15px;
}
.warn-note {
  color: var(--warn); background: var(--panel);
  border: 1px solid var(--warn);
  padding: 10px 14px; margin: 4px 0 14px; font-size: 15px;
}

/* ---- daemon chip ---- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: lowercase;
  padding: 5px 12px; border: 1px solid var(--ink); background: var(--panel);
  color: var(--ink); white-space: nowrap;
}
.chip .dot { width: 7px; height: 7px; }
.chip-ok .dot { background: var(--ok); }
.chip-warn .dot { background: var(--warn); }
.chip-warn { border-color: var(--warn); color: var(--warn); }
.chip-err { border-color: var(--err); color: var(--err); }
.chip-err .dot { background: var(--err); }
.chip-run .dot { background: var(--ink); }
a.chip { text-decoration: none; }
a.chip:hover { background: var(--ink-faint); }

/* ---- badges: printed proofing marks ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: lowercase; padding: 3px 10px; white-space: nowrap;
  border: 1px solid currentColor; background: var(--panel);
}
.badge-editing   { color: var(--ink); }
.badge-stalled   { color: var(--warn); }
.badge-finishing { color: var(--ok); }
.badge-held      { color: var(--warn); }
.badge-failed    { color: var(--err); }

/* ---- run cards ---- */
.run { border: 1px solid var(--ink-faint); background: var(--panel); margin: 8px 0; }
.run:hover { border-color: var(--ink); }
.run summary {
  display: grid; grid-template-columns: 180px 1fr auto;
  align-items: center; gap: 14px; padding: 10px 16px;
  cursor: pointer; list-style: none;
}
.run summary .badge { justify-self: start; }
.run summary::-webkit-details-marker { display: none; }
.run-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; font-size: 15px; }
.run-time { font-family: var(--mono); font-size: 12px; color: var(--ink-muted); }
.run-log {
  max-height: 300px; overflow-y: auto; background: var(--paper);
  border-top: 1px solid var(--ink-faint); margin: 0; padding: 14px 18px;
  font: 12px/1.5 var(--mono); white-space: pre-wrap; word-break: break-all;
  color: var(--log-text);
}

/* ---- stage strip ---- */
.stages { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 16px 12px; }
.stage {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: lowercase; padding: 3px 9px;
  color: var(--ink-muted); border: 1px solid var(--ink-faint); background: var(--panel);
}
.stage.done { color: var(--ok); border-color: var(--ok); }
.stage.current { color: var(--on-ink); background: var(--ink-solid); border-color: var(--ink-solid); }

/* ---- forms ---- */
.field-label {
  display: block; margin: 4px 0 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: lowercase; color: var(--ink);
}
input[type=text] {
  width: 100%; max-width: 680px; display: block; margin: 0;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--ink); padding: 11px 13px;
  font: 13px var(--mono);
}
/* focus reads as a thicker border, not a floating double ring */
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=search]:focus, select:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
input[type=text]::placeholder, input[type=password]::placeholder, input[type=email]::placeholder { color: var(--ink-muted); }
select {
  background: var(--panel); color: var(--ink); border: 1px solid var(--ink);
  padding: 6px 10px; font: 12px var(--mono);
}

/* ---- buttons: square, mono, instant inversion ---- */
button {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: lowercase;
  height: 46px; padding: 0 24px; cursor: pointer; margin: 16px 12px 0 0;
  color: var(--ink); background: transparent; border: 1px solid var(--ink);
  transition: background .08s, color .08s;
}
button:hover { background: var(--ink-solid); color: var(--on-ink); }
button[type=submit] { background: var(--ink-solid); color: var(--on-ink); }
button[type=submit]:hover { background: transparent; color: var(--ink); }
button:disabled { opacity: .45; cursor: wait; }

/* ---- folder picker ---- */
.field-row { display: flex; align-items: stretch; gap: 12px; max-width: 680px; }
.field-row input[type=text] { flex: 1; max-width: none; }
.field-row button { height: auto; margin: 0; padding: 0 18px; }
.browse { border: 1px solid var(--ink); background: var(--panel);
          margin: 12px 0 0; max-width: 680px; }
.browse-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
              border-bottom: 1px solid var(--ink-faint); }
.browse-cur {
  flex: 1; font: 12px var(--mono); color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  direction: rtl; text-align: left;   /* long paths keep their tail visible */
}
.browse-bar button { height: 29px; padding: 0 12px; margin: 0; font-size: 11px; }
.browse-list { list-style: none; margin: 0; padding: 4px 0;
               max-height: 260px; overflow-y: auto; }
.browse-list li { margin: 0; }
.browse-list button {
  display: flex; width: 100%; text-align: left; height: 32px;
  padding: 0 14px; margin: 0; border: 0; font-size: 12px; letter-spacing: .04em;
}
.browse-list button:hover { background: var(--ink-solid); color: var(--on-ink); }
.browse-empty { padding: 6px 14px; font: 12px var(--mono); color: var(--ink-muted); }

/* ---- aligned control rows: seg and button share one 46px height line ---- */
.form-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 20px 0 6px; }
.form-row .seg, .form-row button, .form-row select { margin: 0; }
/* a select beside a 46px button sits on the same line — same height, same rule weight */
.form-row select { height: 46px; padding: 0 12px; }

/* ---- segmented choice: square track, sliding ink block ---- */
.seg {
  position: relative;
  display: inline-flex; gap: 3px; padding: 3px; margin: 10px 0 4px;
  border: 1px solid var(--ink); background: var(--paper);
}
.seg-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: 0;
  background: var(--ink-solid);
  cursor: grab; touch-action: none;
}
.seg.dragging .seg-thumb { cursor: grabbing; }
.seg-opt { position: relative; margin: 0; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt span {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 20px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: lowercase; color: var(--ink);
  transition: color .08s, background .08s;
}
.seg-opt span:hover { background: var(--ink-faint); }
.seg-opt input:checked + span { background: var(--ink-solid); color: var(--on-ink); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.seg--js .seg-opt span { position: relative; z-index: 1; background: none !important; }
.seg--js .seg-opt input:checked + span { color: var(--on-ink); }
.seg.dragging .seg-opt span { color: var(--ink); }

/* ---- subtitle tab: numbered wizard ---- */
.step {
  display: grid; grid-template-columns: 36px 1fr; gap: 2px 16px;
  margin: 0 0 26px; align-items: start;
}
.step-num {
  width: 32px; height: 32px; margin-top: -4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 14px;
  color: var(--on-ink); background: var(--ink-solid);
}
.step-body { min-width: 0; }
.step-title {
  display: block; margin: 0 0 10px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em;
  text-transform: lowercase; color: var(--ink);
}
.step-help {
  margin: 10px 0 0; font-family: var(--mono); font-size: 12px;
  letter-spacing: .04em; color: var(--ink-muted);
}
.opt-grid { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: flex-end; }
.opt { display: flex; flex-direction: column; gap: 8px; }
.opt-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: lowercase; color: var(--ink-muted);
}
.opt .seg { margin: 0; }
.opt select { height: 46px; padding: 0 12px; }
.opt .num { width: 80px; height: 46px; background: var(--panel); color: var(--ink);
            border: 1px solid var(--ink); padding: 0 12px; font: 13px var(--mono); }
.opt .custom-lang { display: block; }
.opt button { margin: 0; }
.alt-flow { margin-top: 28px; border-top: 1px solid var(--ink-faint); padding-top: 16px; }
.alt-flow summary {
  cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: lowercase; color: var(--ink-muted);
}
.alt-flow summary::-webkit-details-marker { display: none; }
.alt-flow summary::before { content: "▸ "; }
.alt-flow[open] summary::before { content: "▾ "; }
.alt-flow summary:hover { color: var(--ink); }
.alt-flow form { margin-top: 20px; }

/* ---- subtitle tab ---- */
.track-label {
  display: block; margin-top: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: lowercase; color: var(--ink-muted);
}
.track-label + .srt-preview { margin-top: 6px; }
.srt-preview {
  width: 100%; min-height: 320px; margin: 12px 0 4px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--ink); padding: 12px 14px;
  font: 13px/1.6 var(--mono); resize: vertical;
}
.srt-preview:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.custom-lang { max-width: 220px !important; width: auto !important; margin: 0 !important; }
.inline-num { display: inline-flex; align-items: center; gap: 8px;
              font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
              text-transform: lowercase; }
.inline-num input { width: 64px; background: var(--panel); color: var(--ink);
                    border: 1px solid var(--ink); padding: 8px 10px;
                    font: 13px var(--mono); }
.rule { border: 0; border-top: 1px solid var(--ink-faint); margin: 26px 0; }
a.dl {
  display: inline-flex; align-items: center; height: 46px; padding: 0 20px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: lowercase; text-decoration: none;
  color: var(--ink); border: 1px solid var(--ink);
}
main a.dl:hover { background: var(--ink-solid); color: var(--on-ink); }
.saved-note {
  color: var(--ok); background: var(--panel); border: 1px solid var(--ok);
  padding: 10px 14px; margin: 4px 0 14px; font-size: 15px;
}
.browse-file { color: var(--ink); }
.browse-file::before { content: "▸ "; color: var(--ink-muted); }

/* uploaded copies */
.uploads { margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; }
.upload-row { display: flex; align-items: center; gap: 12px; }
.upload-row .upload-use {
  height: 32px; padding: 0 12px; margin: 0; font-size: 12px;
  letter-spacing: .04em; text-transform: none;
  max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.upload-row .upload-del {
  height: 26px; padding: 0 10px; margin: 0; font-size: 11px;
  color: var(--err); border-color: var(--err); background: transparent;
}
.upload-row .upload-del:hover { background: var(--err); color: #fff; }

/* drag & drop */
.card.dropping { outline: 2px dashed var(--ink); outline-offset: -8px; }
.drop-status { font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
               color: var(--ink-muted); margin: 12px 0 0; }
.drop-status.drop-err { color: var(--err); }
/* brief: drop the shoot folder (spec 2026-09-04-brief-drop-folder) — the dashed
   box is the affordance; the whole card is the target and inverts the box while
   a drag hovers it */
.dropzone {
  display: flex; flex-direction: column; gap: 6px; max-width: 680px;
  margin: 4px 0 18px; padding: 22px 20px;
  border: 1px dashed var(--ink); background: var(--panel);
  transition: background .08s, color .08s;
}
.dropzone-title {
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em;
  text-transform: lowercase; color: var(--ink);
}
.dropzone-sub { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-muted); }
.dropzone-sub.drop-err { color: var(--err); }
.card.dropping .dropzone { background: var(--ink-solid); border-style: solid; }
.card.dropping .dropzone-title, .card.dropping .dropzone-sub { color: var(--on-ink); }
.found { max-width: 680px; margin: 0 0 18px; }
.found-title { text-transform: none; }   /* the dropped folder's name keeps its case */
.found-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.found-head .found-title { margin-right: auto; }
.found-remove { height: 28px; padding: 0 12px; margin: 0 0 8px; font-size: 11px; flex: 0 0 auto; }
.found-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  width: 100%; height: auto; margin: 0 0 -1px; padding: 10px 14px;
  text-transform: none; letter-spacing: .04em; text-align: left;
}
.found-name { font-size: 13px; }
.found-meta { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.found-row:hover .found-meta { color: var(--on-ink); }

/* ---- dailies review ---- */
fieldset.ep {
  border: 1px solid var(--ink); background: var(--panel);
  margin: 12px 0; padding: 10px 14px 14px;
}
fieldset.ep legend {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: lowercase; padding: 0 8px;
}
fieldset.ep input { max-width: 340px; display: inline-block; margin: 0 0 0 8px; }
.evidence { color: var(--ink-muted); max-width: 460px; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .grid { grid-template-columns: 1fr; }
  .masthead { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .masthead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px; }
  .masthead > .brand { grid-column: 1; grid-row: 1; }
  .mast-menu { grid-column: 2; grid-row: 1; }
  .mast-gear { height: 44px; }
  .masthead .tabs { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; flex-wrap: nowrap; }
  .masthead .tab { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 3px; justify-content: center; font-size: clamp(10px, 2.8vw, 12px); letter-spacing: 0; }
  main { padding: 24px 16px 60px; }
  .page-title { font-size: 36px; }
  .page-note { overflow-wrap: anywhere; }
  #subtitle { min-width: 0; padding: 20px 16px; }
  #subtitle .step { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
  #subtitle .step-num { width: 28px; height: 28px; margin: 0; }
  #subtitle .step-body { display: contents; }
  #subtitle .step-title { min-height: 28px; display: flex; align-items: center; margin: 0; }
  #subtitle .step-body > :not(.step-title) { grid-column: 1 / -1; }
  #subtitle .field-row { flex-direction: column; align-items: stretch; }
  #subtitle .field-row input { width: 100%; }
  #subtitle .field-row button { min-height: 44px; }
  #subtitle .opt-grid { gap: 16px; }
  #subtitle .opt { min-width: 0; max-width: 100%; }
  #subtitle .opt select { max-width: 100%; }
  #subtitle .step-help, #subtitle .form-row { margin: 0; }
}

/* ---- /clients: billing-cycle board ----
   A printed production sheet: each client is one ruled line — name, cycle,
   the big tally, and a press-check strip of EP boxes that fills as episodes
   reach done/uploaded. Pace verdicts are proofing marks (ok/warn/err); the
   invoice CTA is the sheet's single solid-ink stamp. */
.flash {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  color: var(--ok); border: 1px solid var(--ok); padding: 8px 12px; margin: 0 0 14px;
}
.cycle-cards { display: flex; flex-direction: column; gap: 10px; }
.cycle-card { border: 1px solid var(--ink-faint); background: var(--panel); }
.cycle-card:hover { border-color: var(--ink); }
.cycle-card[open] { border-color: var(--ink); }
/* the behind-ness of a card is printed on its left edge */
.cycle-card.pace-red   { border-left: 4px solid var(--err); }
.cycle-card.pace-amber { border-left: 4px solid var(--warn); }
.cycle-card.pace-green { border-left: 4px solid var(--ok); }
.cycle-card.pace-complete { border-left: 4px solid var(--ink-solid); }
/* ruled columns: name | cycle picker | tally | slot strip | meta — fixed
   widths so every card's columns land on the same vertical rules */
.cycle-card > summary {
  display: grid;
  grid-template-columns: 108px 158px 64px 1fr max-content;
  align-items: center; gap: 8px 14px;
  padding: 12px 16px; cursor: pointer; list-style: none;
}
.cycle-card > summary::-webkit-details-marker { display: none; }
.cy-name { font-family: var(--serif); font-size: 18px; font-weight: 500;
           color: var(--ink); overflow: hidden; text-overflow: ellipsis;
           white-space: nowrap; }
.cy-chip { font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
           border: 1px solid var(--ink-faint); padding: 1px 7px; color: var(--ink-muted); }
/* "check back" cycle picker — tiny press-sheet tabs, current one inked */
.cy-picker { display: inline-flex; flex-wrap: wrap; gap: 0; row-gap: 3px; }
button.cy-cycle {
  height: auto; padding: 2px 8px; margin: 0; font-size: 11px; letter-spacing: .06em;
  background: transparent; color: var(--ink-muted); border: 1px solid var(--ink-faint);
}
button.cy-cycle + button.cy-cycle { border-left: none; }
button.cy-cycle:hover { background: var(--ink-faint); color: var(--ink); }
button.cy-cycle.on { background: var(--ink-solid); color: var(--on-ink);
                     border-color: var(--ink-solid); }
.cy-count { font-family: var(--serif); font-size: 26px; font-weight: 500;
            line-height: 1; text-align: right;
            font-variant-numeric: tabular-nums; }
.cy-of { font-size: 15px; color: var(--ink-muted); }
/* EP press-check boxes — ONE hue per row, the pace verdict (user rule
   2026-08-24: colour = progress, not stage). Done EPs are solid, in-progress
   EPs a faint tint of the same hue, missing EPs dashed. Exact stage lives in
   the tooltip and the expanded EP list. */
.cycle-card { --pace-c: var(--ink-muted); }
.cycle-card.pace-red      { --pace-c: var(--err); }
.cycle-card.pace-amber    { --pace-c: var(--warn); }
.cycle-card.pace-green    { --pace-c: var(--ok); }
.cycle-card.pace-complete { --pace-c: var(--ink-solid); }
.cy-slots { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.slot { position: relative; width: 17px; height: 17px;
        border: 1px solid var(--ink-faint); background: transparent; }
.slot-missing { border-style: dashed; }
.slot-done { background: var(--pace-c); border-color: var(--pace-c); }
.slot-pre, .slot-edit, .slot-review, .slot-working {
  background: var(--pace-c); border-color: var(--pace-c); opacity: .25; }
/* right-hand cluster on its own four rules: flags | invoice action | catch-up | verdict —
   fixed columns so every card's stamp, hold/past badge, catch-up count and day-count
   land on the same vertical lines (empty cells stay empty). Catch-up = videos behind
   pace, in the verdict's own hue (user ask 2026-09-08) */
.cy-meta { display: grid; grid-template-columns: 118px 150px 118px 118px; gap: 10px;
           align-items: center; justify-items: end; justify-self: end; }
.cy-cta, .cy-flags, .cy-catch, .cy-verdict { display: inline-flex; justify-content: flex-end; gap: 6px; min-width: 0; }
/* the stamp column: whatever is in it (record / ready / invoiced ↗) wears the same box */
.cy-cta { width: 100%; }
.cy-cta > button, .cy-cta > a, .cy-cta > form, .cy-cta > form > button {
  width: 100%; box-sizing: border-box; display: inline-flex; justify-content: center;
  align-items: center; text-align: center; }
.cy-cta > a.badge { padding-top: 5px; padding-bottom: 5px; }
/* fixed-width verdict keeps the meta column ruled across cards */
.pace-badge { border: 1px solid currentColor; padding: 2px 9px;
              min-width: 118px; text-align: center; }
.cy-gap { font-family: var(--mono); font-size: 12px; color: var(--ink-muted);
          white-space: nowrap; }
.cy-gap-row { margin: 0; padding: 8px 16px; border-top: 1px solid var(--ink-faint); }
.pb-green    { color: var(--ok); }
.pb-amber    { color: var(--warn); }
.pb-red      { color: var(--err); }
.pb-complete { color: var(--on-ink); background: var(--ink-solid); border-color: var(--ink-solid); }
.pb-none     { color: var(--ink-muted); border-color: var(--ink-faint); }
.pb-short    { color: var(--ink-muted); border-style: dashed; }
.badge.stale { color: var(--err); border: 1px dashed var(--err); padding: 2px 9px; }
.inline-form { display: inline; margin: 0; }
button.invoice-cta, button.ledger-toggle {
  height: auto; padding: 5px 12px; margin: 0; font-size: 11px;
}
button.invoice-cta { background: var(--ink-solid); color: var(--on-ink);
                     border-color: var(--ink-solid); }
button.invoice-cta:hover { background: transparent; color: var(--ink); }
button.ledger-toggle { background: transparent; color: var(--ink); }
button.ledger-toggle.is-inv { color: var(--ok); border-color: var(--ok); }
/* EP detail table inside a card */
.cy-eps { margin: 0; }
.cycle-card .cy-eps { border-top: 1px solid var(--ink-faint); }
.cycle-card .cy-eps th, .cycle-card .cy-eps td { padding-left: 16px; }
/* on-hold shelf + ledger + manage: quiet disclosures under the board */
.cycle-ledger, .cycle-manage { margin-top: 18px; }
.cycle-ledger > summary, .cycle-manage > summary {
  cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
}
.cycle-ledger > summary::-webkit-details-marker,
.cycle-manage > summary::-webkit-details-marker { display: none; }
.cycle-ledger > summary::before,
.cycle-manage > summary::before { content: "▸ "; }
.cycle-ledger[open] > summary::before,
.cycle-manage[open] > summary::before { content: "▾ "; }
.cy-manage-table input, .cy-manage-table select {
  width: 100%; min-width: 60px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--ink-faint); padding: 6px 9px; font: 12px var(--mono);
}
.cy-manage-table input:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.cy-manage-table td:first-child { white-space: nowrap; }
.cy-manage-note { font-family: var(--mono); font-size: 12px; margin: 12px 0 0; }
@media (max-width: 900px) {
  .cycle-card > summary { display: flex; flex-wrap: wrap; }
  .cy-meta { justify-self: auto; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cy-count { text-align: left; }
}

/* ---- route publish stepper: subfolder · brief · row · verify (2026-08-24) ---- */
.steps { display: inline-flex; gap: .35em; flex-wrap: wrap; font-family: var(--mono); font-size: .78em; }
.steps .step { padding: .1em .55em; border: 1px solid var(--ink-faint); border-radius: 999px; color: var(--ink-muted); }
.steps .step.done { opacity: .45; text-decoration: line-through; }
.steps .step.current { border-color: var(--ok); color: var(--ok); }
.steps .step.failed { border-color: var(--err); color: var(--err); }
table.publish td { vertical-align: middle; padding-block: .55em; }
table.publish td:last-child { white-space: nowrap; }
.steps { align-items: center; line-height: 1.6; }
.steps .step { min-width: 5.2em; text-align: center; }
.steps { line-height: 1; }
.steps .step { display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: .32em .6em .3em; box-sizing: border-box; }

/* ---- clients board data stamp (2026-08-26) ---- */
.data-stamp { margin: 0 0 .6em; font-size: .8em; }
button.linkish { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--ok); text-decoration: underline; cursor: pointer; }
button.linkish:disabled { opacity: .5; cursor: progress; }

/* ---- verdict colours for closed cycles (2026-08-26): complete = green, short =
   amber "owed", never grey-because-old ---- */
.cycle-card.pace-complete { border-left-color: var(--ok); --pace-c: var(--ok); }
.cycle-card.pace-short    { border-left: 4px solid var(--warn); --pace-c: var(--warn); }
.pb-complete { color: var(--on-ink); background: var(--ok); border-color: var(--ok); }
.pb-short    { color: var(--warn); border-color: var(--warn); border-style: solid; }
/* closed cycle with videos still in the pipeline is healthy, not "short" */
.cycle-card.pace-short { border-left-color: var(--ok); --pace-c: var(--ok); }
.pb-short { color: var(--ok); border-color: var(--ok); }

/* ---- clients sub-nav + timeline (Gantt) — spec 2026-08-26-client-timeline ---- */
.subnav { display: inline-flex; gap: 0; margin: 2px 0 6px; font-family: var(--mono); font-size: 12px; }
.subnav[aria-label="Clients views"] { margin-top: 6px; }
.subnav a { padding: 3px 10px; border: 1px solid var(--ink-faint); color: var(--ink-muted); text-decoration: none; }
.subnav a + a { border-left: 0; }
.subnav a.on { color: var(--on-ink); background: var(--ink-solid); border-color: var(--ink-solid); }
@media (max-width: 760px) {
  .subnav { display: flex; width: fit-content; max-width: 100%; font-size: 11px; }
  .subnav a { display: inline-flex; align-items: center; min-height: 36px; padding: 3px 7px; }
}
/* ---- clients timeline (consolidated 2026-08-27; was v1..v5 layers) ---- */
.tl-layout { display: flex; align-items: flex-start; }
.tl-names { flex: 0 0 132px; border-right: 1px solid var(--ink-faint); font-family: var(--mono); }
.tl-names-head { height: var(--tl-head); }
.tl-name-cell { height: var(--tl-row); display: flex; align-items: center; padding-left: 12px;
                font-size: 13px; color: currentColor; border-top: 1px solid var(--ink-faint); }
.tl-name-cell.tl-hold { opacity: .5; }
.tl-wrap { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; cursor: grab; user-select: none; }
.tl-wrap:active { cursor: grabbing; }
svg.tl { display: block; font-family: var(--mono); }
.tl-month-line { stroke: var(--ink-faint); stroke-width: 1; opacity: .9; }
.tl-month { fill: var(--ink); font-size: 12px; }
.tl-week { fill: var(--ink-faint); font-size: 9px; }
.tl-grid { stroke: var(--ink-faint); stroke-width: 1; opacity: .35; }
.tl-rule { stroke: var(--ink-faint); stroke-width: 1; opacity: .5; }
.tl-none { fill: var(--ink-faint); font-size: 11px; }
.tl-today { stroke: var(--err); stroke-width: 1.2; opacity: .8; }
.tl-today-label { fill: var(--ink-muted); font-size: 11px; }
/* bars wear the client's BAR ink (--bar-N, vivid); the name cell wears the same hue's
   TEXT ink (--cl-N) — one identity, two weights */
.tl-cycle { --tl-c: var(--ink-muted); }
.tl-cycle.cl-1 { --tl-c: var(--bar-1); } .tl-cycle.cl-2 { --tl-c: var(--bar-2); }
.tl-cycle.cl-3 { --tl-c: var(--bar-3); } .tl-cycle.cl-4 { --tl-c: var(--bar-4); }
.tl-cycle.cl-5 { --tl-c: var(--bar-5); } .tl-cycle.cl-6 { --tl-c: var(--bar-6); }
.tl-cycle.cl-7 { --tl-c: var(--bar-7); } .tl-cycle.cl-8 { --tl-c: var(--bar-8); }
.tl-cycle.cl-9 { --tl-c: var(--bar-9); } .tl-cycle.cl-10 { --tl-c: var(--bar-10); }
.tl-cycle.cl-11 { --tl-c: var(--bar-11); } .tl-cycle.cl-12 { --tl-c: var(--bar-12); }
.tl-cycle.cl-13 { --tl-c: var(--bar-13); } .tl-cycle.cl-14 { --tl-c: var(--bar-14); }
.tl-cycle.cl-15 { --tl-c: var(--bar-15); } .tl-cycle.cl-16 { --tl-c: var(--bar-16); }
.tl-cycle.tl-hold { opacity: .5; }
.tl-cycle.tl-link { cursor: pointer; }
.tl-cycle:focus { outline: none; }
.tl-cycle:focus-visible .tl-bar { stroke: var(--ink); stroke-width: 1.5; }
.tl-bar { fill: var(--tl-c); fill-opacity: .22; stroke: none; }          /* the 30-day cycle */
/* the delivered share is the client's OWN bar ink, near-solid — orange is one slot, not
   every bar (user, 2026-09-03: "I didn't mean all orange, just some clients can be
   orange"; wants brown / turquoise / red / purple, vibrant, high contrast) */
.tl-prog { fill: var(--tl-c); fill-opacity: .95; stroke: none; }         /* delivered / quota of it */
.tl-link:hover .tl-bar { fill-opacity: .3; }
.tl-link:hover .tl-prog { fill-opacity: 1; }
.tl-dot { fill: var(--ink); stroke: none; }
.tl-dotn { fill: var(--ink); font-size: 9px; font-weight: 600; }
.tl-nodots .tl-dot:not(.tl-paydot), .tl-nodots .tl-dotn { display: none; }
.tl-ghost { stroke: var(--tl-c); stroke-width: 1; opacity: .5; }
.tl-halo { fill: var(--panel); fill-opacity: .95; }
.tl-label { font-size: 11.5px; font-weight: 600; pointer-events: none; fill: var(--ink-muted); }
.tl-label.pace-green, .tl-label.pace-complete, .tl-label.pace-short { fill: var(--ok); }
.tl-label.pace-amber { fill: var(--warn); }
.tl-label.pace-red { fill: var(--err); }
/* invoices view */
.tl-cycle.inv-open .tl-bar { fill: var(--tl-c); fill-opacity: .14; }
.tl-cycle.inv-unpaid .tl-bar { fill: var(--warn); fill-opacity: .35; }
.tl-cycle.inv-paid .tl-bar { fill: var(--ok); fill-opacity: .35; }
.tl-cycle.inv-open .tl-label, .tl-cycle.inv-unpaid .tl-label, .tl-cycle.inv-paid .tl-label { fill: var(--ink); }
.tl-invmark { stroke: var(--warn); stroke-width: 2; }
.tl-paydot { fill: var(--ok); }
/* toolbar */
.tl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.tl-seg { display: inline-flex; }
.tl-seg button, .tl-tools button, .tl-tools a {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px; margin: 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0; text-transform: none; text-decoration: none;
  color: var(--ink-muted); background: transparent; border: 1px solid var(--ink-faint); border-radius: 0; cursor: pointer;
}
.tl-seg button + button { border-left: 0; }
.tl-seg button:hover, .tl-tools button:hover, .tl-tools a:hover { color: var(--ink); background: transparent; border-color: var(--ink); }
.tl-seg button.on, .tl-seg button.on:hover { color: var(--on-ink); background: var(--ink-solid); border-color: var(--ink-solid); }
.tl-seg button.on + button { border-left: 1px solid var(--ink-faint); }
.tl-tools { display: inline-flex; gap: 8px; margin-left: auto; }
.tl-tools button:disabled { opacity: .5; }
/* legend */
.tl-legend { display: grid; grid-template-columns: 28px 1fr; gap: 6px 10px; align-items: center;
             margin: 14px 0 0; font-family: var(--mono); font-size: 11px; }
.tl-legend > span { display: contents; }
.tl-legend .lg-sw { display: flex; justify-content: center; align-items: center; height: 14px; }
.tl-legend .lg-sw i { display: block; }
.tl-legend em { font-style: normal; }
.lg-abc { display: inline-flex; gap: 1px; font-size: 9px; font-weight: 600; line-height: 1; }
.lg-bar { width: 22px; height: 10px; border-radius: 2px; background: var(--bar-1); opacity: .22; }
.lg-prog { background: linear-gradient(to right, var(--bar-1) 0 55%, transparent 55%); opacity: .95; }
.lg-full { background: var(--bar-1); opacity: .95; }
.lg-open { background: var(--bar-1); opacity: .14; }
.lg-unpaid { background: var(--warn); }
.lg-paid { background: var(--ok); }
.lg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.lg-paydot { background: var(--ok); }
.lg-n { font-size: 9px; color: var(--ink); }
.lg-today { width: 2px; height: 14px; background: var(--err); opacity: .8; }
.lg-invmark { width: 2px; height: 12px; background: var(--warn); }
.lg-ghost { width: 1px; height: 6px; background: var(--ink-muted); }
/* performance table (clients · performance tab) */
#performance-card, #performance-body { min-width: 0; }
.perf-table-scroll { max-width: 100%; overflow-x: auto; }
.perf-table-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.perf-table { width: 100%; min-width: 600px; }
.perf-table .perf-mo, .perf-table .perf-total { text-align: right; font-variant-numeric: tabular-nums; }
.perf-table .perf-now { background: var(--row-hover); }
.perf-table .perf-total { font-weight: 600; border-left: 1px solid var(--ink-faint); }
.perf-table tfoot td { border-top: 1px solid var(--ink); }
.perf-sum td { font-weight: 600; }
.perf-money td { color: var(--ink-muted); font-size: 12px; }
.perf-money .mv-green { color: var(--ok); } .perf-money .mv-amber { color: var(--warn); }
.perf-money .mv-red { color: var(--err); }
/* weekly uploads table (second table on the performance tab, spec 2026-09-07) */
.perf-weekly-stamp { margin-top: 24px; }
.perf-weekly th.perf-mo { white-space: nowrap; }
.perf-ai-strip { display: flex; align-items: stretch; border: 1px solid var(--ink-faint); background: var(--panel); }
.perf-ai-lead { flex: 0 0 auto; display: grid; align-content: center; gap: 6px; min-width: 180px; padding: 16px 20px; border-right: 1px solid var(--ink-faint); }
.perf-ai-title { margin: 0; font: 500 20px/1.1 var(--serif); letter-spacing: -.02em; text-transform: none; color: var(--text); }
.perf-ai-note { margin: 0; font: 10px/1.5 var(--mono); color: var(--muted); }
.perf-ai-weeks { display: flex; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.perf-ai-weeks li { flex: 1 0 64px; display: grid; gap: 5px; justify-items: center; align-content: center; padding: 12px 6px 10px; border-right: 1px solid var(--ink-faint); border-bottom: 2px solid transparent; }
.perf-ai-weeks li:last-child { border-right: 0; }
.perf-ai-weeks li.is-current { border-bottom-color: var(--ink); background: var(--row-hover); }
.perf-ai-count { font: 500 26px/1 var(--serif); font-variant-numeric: tabular-nums; color: var(--text); }
.perf-ai-weeks li.is-zero .perf-ai-count { color: var(--muted); }
.perf-ai-weeks li.is-current .perf-ai-count, .perf-ai-weeks li.is-current .perf-ai-label { color: var(--ink); }
.perf-ai-label { font: 10px var(--mono); color: var(--muted); white-space: nowrap; }
@media (max-width: 800px) {
  .perf-ai-strip { flex-direction: column; }
  .perf-ai-lead { min-width: 0; border-right: 0; border-bottom: 1px solid var(--ink-faint); }
}

/* hover card */
#tl-tip { position: fixed; z-index: 30; max-width: 320px; padding: 8px 10px; pointer-events: none;
          background: var(--panel); color: var(--ink); border: 1px solid var(--ink);
          font-family: var(--mono); font-size: 11.5px; line-height: 1.5; box-shadow: 3px 3px 0 var(--ink-faint); }
#tl-tip[hidden] { display: none; }
.tl-tip-head { font-weight: 600; margin-bottom: 2px; }
/* click-through panel */
.tl-detail { margin-top: 12px; padding: 10px 14px; }
.tl-detail-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; font-family: var(--mono); font-size: 12px; }
.tl-detail-title { font-family: inherit; font-size: 15px; }
.tl-detail-actions { margin-left: auto; display: inline-flex; gap: 12px; }

/* ---- money strip + paid badges — spec 2026-08-26-money-strip ---- */
.money-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; margin: 0 0 12px; }
.mv { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; min-width: 96px;
      border: 1px solid var(--ink-faint); border-left: 3px solid var(--ink-faint);
      font-family: var(--mono); font-size: 12px; color: var(--ink-muted); }
.mv-label { text-transform: uppercase; letter-spacing: .06em; font-size: 10px; }
.mv-nums { color: var(--ink); }
.mv-detail { margin-top: 4px; font-size: 11px; color: var(--ink-muted); white-space: normal; overflow-wrap: anywhere; }
.mv-current { border-color: var(--ink); }
.mv-green { border-left-color: var(--ok); }   .mv-green .mv-nums { color: var(--ok); }
.mv-amber { border-left-color: var(--warn); } .mv-amber .mv-nums { color: var(--warn); }
.mv-red   { border-left-color: var(--err); }  .mv-red .mv-nums { color: var(--err); }
.mv-note { align-self: center; font-size: 11px; }
@media (max-width: 760px) {
  #performance-card { padding: 20px 16px; }
  .money-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .money-strip .mv { min-width: 0; overflow-wrap: anywhere; }
  .money-strip .mv-current, .money-strip .mv-note { grid-column: 1 / -1; }
}
.paid-badge { border: 1px solid currentColor; padding: 2px 8px; margin-right: 6px; }
.pd-paid { color: var(--ok); }
.pd-unpaid { color: var(--warn); }
.pd-late { color: var(--err); }

/* Notion invoices (spec 2026-09-01-notion-invoices): inline record/pay forms,
   row links, and the stamp/notice for the second data source. */
.inv-link { color: var(--ok); text-decoration: none; border-bottom: 1px dotted currentColor; }
.inv-link:hover { border-bottom-style: solid; }
.inv-local { color: var(--ink-muted); }
.amount-est { font-style: italic; }
.stamp-warn { color: var(--err); }
.unmatched-note a { color: inherit; }
/* the entry dialog: one square panel, mono labels, the effect spelled out */
.inv-dialog {
  width: min(560px, calc(100vw - 32px)); padding: 0; margin: auto;
  background: var(--paper); color: var(--ink); border: 1px solid var(--ink);
}
.inv-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.inv-dialog form { padding: 22px 26px 24px; }
.inv-dialog > .inv-head, .inv-dialog > .error, .inv-dialog > .inv-foot { margin: 22px 26px 0; }
.inv-dialog > .inv-foot { margin-bottom: 24px; }
.inv-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.inv-kicker { font: 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.inv-who { font-size: 20px; font-weight: 600; }
.inv-cycle { font: 11px var(--mono); border: 1px solid currentColor; padding: 2px 8px; }
.inv-facts { margin: 0 0 18px; color: var(--ink-muted); font-size: 13px; }
.inv-facts a { color: inherit; }
.inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.inv-grid label { display: flex; flex-direction: column; gap: 5px;
  font: 11px var(--mono); letter-spacing: .1em; text-transform: lowercase; color: var(--ink-muted); }
.inv-grid label:first-child { grid-column: 1 / -1; }
.inv-grid input {
  width: 100%; margin: 0; background: var(--panel); color: var(--ink);
  border: 1px solid var(--ink); padding: 10px 12px; font: 15px var(--mono);
}
.inv-grid input:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.inv-grid input::placeholder { color: var(--ink-muted); }
.inv-grid small { font: 12px/1.4 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.inv-effect { margin: 18px 0 0; padding: 10px 12px; border-left: 3px solid var(--ink); font-size: 13px; color: var(--ink-muted); }
.inv-effect b { color: var(--ink); }
.inv-foot { display: flex; justify-content: flex-end; }
.inv-foot button { margin: 20px 0 0 12px; height: 40px; padding: 0 18px; }
.inv-foot .inv-cancel { border-color: var(--ink-muted); color: var(--ink-muted); }
button.inv-open { white-space: nowrap; }
/* manual priority: a grip per card, drop marks while dragging, the note in the stamp */
.cy-grip { cursor: grab; color: var(--ink-muted); font: 13px/1 var(--mono); letter-spacing: -2px;
  margin: 0 8px 0 -4px; padding: 2px 3px; vertical-align: 2px; user-select: none; -webkit-user-select: none; }
.cy-grip:hover { color: var(--ink); }
.cy-grip:active { cursor: grabbing; }
.cycle-card.dragging { opacity: .35; }
.cycle-card.drop-before { box-shadow: 0 -3px 0 0 var(--ink-solid); }
.cycle-card.drop-after { box-shadow: 0 3px 0 0 var(--ink-solid); }
.order-note { font: inherit; }
.inv-badge { text-decoration: none; border: 1px solid currentColor; padding: 2px 8px; }
.inv-badge.pd-paid { color: var(--ok); }
.inv-badge.pd-unpaid { color: var(--warn); }
button.inv-early { margin-right: 6px; }
/* on hold: a real card at the bottom of the board, greyed out, not draggable */
.cycle-card.is-hold { opacity: .5; filter: grayscale(1); }
.cycle-card.is-hold:hover, .cycle-card.is-hold[open] { opacity: .8; filter: none; }
.cycle-card.is-hold { border-left-color: var(--ink-faint) !important; }
.hold-badge { border-style: dashed; }
.cy-ledger-head { margin: 0 0 10px; }
section.cycle-ledger { margin-top: 0; }
/* save verdict beside the button that caused it (the top-of-board flash is off-screen here) */
.manage-flash { display: inline-block; margin: 16px 0 0 4px; padding: 6px 10px; font: 12px var(--mono);
  color: var(--ok); border: 1px solid var(--ok); vertical-align: bottom; }
.manage-flash.is-err { color: var(--err); border-color: var(--err); }
.tl-mdot.mv-green { fill: var(--ok); } .tl-mdot.mv-amber { fill: var(--warn); }
.tl-mdot.mv-red { fill: var(--err); } .tl-mdot.mv-none { fill: var(--ink-faint); }

/* ---- dailies tab (2026-09-01): Footage Renamer's sort-across-scripts screens in paper & ink.
   The configure form IS the grid (three stacked sheets + a centered action); the working,
   review and done screens are one sheet each. One hue per row = the routing verdict. ---- */
.last-sort {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin: 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-muted);
}
.last-sort b { color: var(--ink); font-weight: 400; }
.last-sort button { margin: 0; height: 32px; padding: 0 14px; font-size: 11px; }
textarea {
  width: 100%; max-width: 680px; display: block; margin: 0;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--ink); padding: 11px 13px;
  font: 13px/1.5 var(--mono); resize: vertical; min-height: 4.8em;
}
textarea:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
textarea::placeholder { color: var(--ink-muted); }
.script-slot { margin: 0 0 14px; max-width: 680px; }
.script-slot-head { display: flex; gap: 12px; align-items: stretch; margin: 0 0 8px; }
.script-slot-head input[type=text] { flex: 1; max-width: none; }
.script-slot-remove { width: 46px; height: auto; padding: 0; margin: 0; justify-content: center;
               font-size: 14px; letter-spacing: 0; }
.script-slot-remove:disabled, #script-slot-add:disabled { cursor: default; }
#script-slot-add { margin: 4px 0 0; height: 38px; padding: 0 16px; }
.field-label.inline { display: inline; margin: 0; }
.action-row { grid-column: 1 / -1; display: flex; justify-content: center; margin: 8px 0 0; }
.action-row button { margin: 0; height: 52px; padding: 0 40px; font-size: 13px; }
.status-line {
  grid-column: 1 / -1; margin: 0; text-align: center;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--warn);
}
.status-line[hidden] { display: none; }
.center-note {
  grid-column: 1 / -1; margin: 0; text-align: center; max-width: 720px; justify-self: center;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
}
.progress-sheet { text-align: center; padding: 48px 24px 40px; }
.sheet-title { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.1;
               margin: 0 0 14px; }
.sheet-title.warn { color: var(--warn); }
.sheet-title.err { color: var(--err); }
.progress-sheet .step-line { margin: 0 0 18px; font-size: 16px; }
.bar-row { display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 0 auto 18px; }
.bar { flex: 1; height: 10px; border: 1px solid var(--ink); background: var(--panel); }
.bar-fill { height: 100%; background: var(--ink-solid); transition: width .3s; }
.bar-pct { font-family: var(--mono); font-size: 12px; min-width: 3.5em; text-align: right; }
.progress-sheet .hint { max-width: 560px; margin: 0 auto; font-family: var(--mono); font-size: 12px;
                        letter-spacing: .04em; }
.progress-sheet button { margin: 24px 0 0; }
.sort-group { margin: 22px 0 6px; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; }
/* every group's table shares one column ruler, so clip · glyph · reason · destination line up down the page */
table.sort-table { table-layout: fixed; }
table.sort-table th:nth-child(1), table.sort-table td:nth-child(1) { width: 22%; }
table.sort-table th:nth-child(2), table.sort-table td:nth-child(2) { width: 2.6em; }
table.sort-table th:nth-child(4), table.sort-table td:nth-child(4) { width: 24%; }
table.sort-table td.reason { overflow-wrap: anywhere; }
table.sort-table select { max-width: 100%; }
td.conf { width: 2.2em; text-align: center; font-size: 15px; }
.conf-high { color: var(--ok); }
.conf-mid { color: var(--warn); }
.conf-low { color: var(--err); }
td.reason { color: var(--ink-muted); font-size: 14px; }
.flag { color: var(--err); font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
        white-space: nowrap; }
.legend { display: flex; gap: 18px; margin: 18px 0 0; font-family: var(--mono); font-size: 12px;
          letter-spacing: .06em; }
.btn-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn-row button { margin: 16px 0 0; }
button.primary { background: var(--ink-solid); color: var(--on-ink); }
button.primary:hover { background: transparent; color: var(--ink); }
.done-sheet .folders { margin: 6px 0 12px; padding-left: 1.2em; }

/* ---- dailies · new job (2026-09-01): the original Main screen, both modes ---- */
.h2-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; max-width: 680px; }
.h2-row h2 { margin: 0; }
.h2-row button { margin: 0; height: 32px; padding: 0 14px; font-size: 11px; }
#nj-script { min-height: 11em; }
.checks { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 4px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; cursor: pointer; }
.check input { margin: 5px 0 0; accent-color: var(--ink-solid); }
[data-for][hidden] { display: none; }

/* ---- dailies · jobs list + job panel (2026-09-01) ---- */
a.btn {
  display: inline-flex; align-items: center; height: 46px; padding: 0 24px; margin: 16px 12px 0 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: lowercase;
  color: var(--ink); border: 1px solid var(--ink); text-decoration: none; background: transparent;
}
a.btn:hover, main a.btn:hover { background: var(--ink-solid); color: var(--on-ink); }
a.btn.primary { background: var(--ink-solid); color: var(--on-ink); }
a.btn.primary:hover, main a.btn.primary:hover { background: transparent; color: var(--ink); }
.jobs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.jobs-summary { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
.jobs-actions { display: flex; gap: 12px; align-items: center; }
.jobs-actions button, .jobs-actions a.btn { margin: 0; height: 38px; padding: 0 16px; }
table.jobs-table { table-layout: fixed; }
table.jobs-table th:nth-child(1), table.jobs-table td:nth-child(1) { width: 34%; }
table.jobs-table th:nth-child(2), table.jobs-table td:nth-child(2) { width: 24%; }
table.jobs-table th:nth-child(4), table.jobs-table td:nth-child(4) { width: 9em; text-align: right; }
table.jobs-table th:nth-child(5), table.jobs-table td:nth-child(5) { width: 3.2em; text-align: right; }
.job-name a { font-family: var(--serif); font-size: 17px; font-weight: 500; text-decoration: none; }
.job-badge { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; white-space: nowrap; }
.job-badge.ok, .review-link.ok { color: var(--ok); }
.job-badge.warn, .review-link.warn { color: var(--warn); }
.job-badge.err { color: var(--err); }
.job-badge.ink { color: var(--ink); }
.job-badge.muted { color: var(--ink-muted); }
.review-link { font-weight: 700; }
.bar.mini { height: 8px; }
.job-row.is-terminal .job-name a { color: var(--ink-muted); }
button.x { height: 30px; width: 30px; padding: 0; margin: 0; justify-content: center; font-size: 13px; letter-spacing: 0; }
.job-head { margin: 0 0 12px; overflow-wrap: anywhere; }
.job-head .muted { font-family: var(--mono); font-size: 12px; }
.bar-row.left { margin: 0 0 18px; max-width: none; }
.bar-row.left .bar { max-width: 420px; }
.bar-row .eta { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.job-log {
  margin: 0 0 16px; padding: 10px 12px; max-height: 24em; overflow-y: auto;
  font: 12px/1.55 var(--mono); color: var(--log-text); white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--paper); border: 1px solid var(--ink-faint);
}
.plan-label { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; margin: 0 0 8px; }
.plan-wrap { overflow-x: auto; }
table.plan-table { table-layout: fixed; }
table.plan-table .c-pick { width: 4.2em; white-space: nowrap; }
table.plan-table .c-num { width: 3.2em; font-family: var(--mono); font-size: 12px; color: var(--ink-muted); text-align: center; }
table.plan-table .c-src { width: 18%; font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.plan-table .c-dur { width: 5.5em; font-family: var(--mono); font-size: 12px; }
table.plan-table .c-conf { width: 6em; text-align: center; font-size: 15px; }
table.plan-table .c-conf .beat { font-family: var(--mono); font-size: 11px; }
table.plan-table .c-name input[type=text] { max-width: none; padding: 7px 10px; }
table.plan-table td { padding-block: 6px; }
table.plan-table tr[draggable=true] { cursor: grab; }
table.plan-table tr.dragging { opacity: .4; }
.grip { color: var(--ink-muted); margin-right: 6px; cursor: grab; user-select: none; }
.conf-auto { color: var(--ink-muted); }
.script-ref { margin: 14px 0 0; }
.script-ref > summary { cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--ink-muted); }
.script-ref pre { margin: 8px 0 0; padding: 10px 12px; max-height: 22em; overflow-y: auto; white-space: pre-wrap;
                  font: 13px/1.5 var(--serif); border: 1px solid var(--ink-faint); background: var(--paper); }
.err-pre { margin: 0; white-space: pre-wrap; font: 13px/1.5 var(--mono); }
.renamed-list { margin: 8px 0 0; }
.renamed-list > summary { cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--ink-muted); }
.relocate { margin: 16px 0 0; }
.relocate .field-row button { height: auto; }
.rename-now { margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--ink); }
.rename-now p { margin: 0; }
.rename-now .btn-row button { margin-top: 12px; }


/* ---- dailies · history + settings (2026-09-01) ---- */
.h2-row.wide { max-width: none; }
.history-table .path { font-family: var(--mono); font-size: 11px; overflow-wrap: anywhere; }
.history-table .meta { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; white-space: nowrap; }
table.history-table th:nth-child(3), table.history-table td:nth-child(3) { width: 15em; }
.job-open button { margin: 0; height: 32px; padding: 0 14px; font-size: 11px; }
button.strong { font-weight: 700; }
.checklist { list-style: none; margin: 0; padding: 0; }
.check-row { display: grid; grid-template-columns: 28px 1fr; gap: 0 12px; padding: 10px 0; border-bottom: 1px solid var(--ink-faint); }
.check-row:last-child { border-bottom: 0; }
.check-glyph { font-size: 16px; line-height: 1.3; text-align: center; }
.check-row.st-pass .check-glyph { color: var(--ok); }
.check-row.st-warn .check-glyph { color: var(--warn); }
.check-row.st-fail .check-glyph { color: var(--err); }
.check-row.st-pending .check-glyph { color: var(--ink-muted); }
.check-body { display: flex; flex-direction: column; gap: 3px; }
.check-body .detail { font-size: 14px; }
.check-body .fix { align-self: flex-start; font: 12px var(--mono); padding: 3px 8px; margin-top: 2px;
                   border: 1px solid var(--ink-faint); background: var(--paper); overflow-wrap: anywhere; }
.note { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; margin: 14px 0 0; }
.note code { font: inherit; }

/* plan table: headers never collide or clip; the name column takes the slack */
table.plan-table .c-num { padding-inline: 4px; }
table.plan-table th { white-space: nowrap; padding-right: 14px; }
table.plan-table .c-dur { width: 6.5em; }
table.plan-table .c-conf { width: 6.5em; }
table.plan-table .c-src { width: 16%; }
.history-table .job-name b { font-family: var(--serif); font-size: 17px; font-weight: 500; }

/* Clients board: a reading order of client → delivery → schedule.
   Detail-only controls stay below the disclosure; all rules are board-scoped. */
#clients-board { padding: 0; overflow: visible; min-width: 0; }
#clients-board .flash, #clients-board .error, #clients-board .warn-note { margin: 16px; }
#clients-board .loading { display: block; padding: 24px; }
.cb-label, .cb-small { font: 12px/1.5 var(--mono); }
.cb-label { letter-spacing: .06em; color: var(--ink-muted); }
.cb-small { color: var(--ink-muted); }
.cb-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--ink); }
.cb-stat { padding: 22px 24px 18px; display: flex; flex-direction: column; gap: 6px; }
.cb-stat + .cb-stat { border-left: 1px solid var(--ink-faint); }
.cb-stat strong { font: 400 38px/1 var(--serif); font-variant-numeric: tabular-nums; }
.cb-stat-alert strong { color: var(--err); }
.cb-stat-ok strong { color: var(--ok); }
.cb-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 24px 18px; }
.cb-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 4px; }
.cb-heading .cb-refresh { font: 12px/1.5 var(--mono); white-space: nowrap; }
.cb-toolbar h2 { font: 500 24px/1.2 var(--serif); text-transform: none; letter-spacing: 0; margin: 0; }
.cb-toolbar p { margin: 0; }
.cb-order { text-align: right; }
.cb-order .order-note { color: var(--ink); }
.cb-order-hint { display: block; margin-top: 4px; }
.cb-columns, #clients-board .cycle-card > summary { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.2fr) minmax(220px, 1.35fr) 72px; column-gap: 28px; }
.cb-columns { padding: 0 20px 10px 24px; margin: 0 24px; }
#clients-board .cycle-cards { padding: 0 24px; gap: 8px; }
#clients-board .cycle-card > summary { padding: 20px; align-items: center; }
#clients-board .cycle-card > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
#clients-board .cycle-card > summary:hover { background: var(--row-hover); }
.cb-client, .cb-delivery, .cb-schedule { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 6px; }
#clients-board .cy-name { font-size: 25px; line-height: 1.2; max-width: 100%; }
#clients-board .cb-client { position: relative; padding-left: 26px; }
#clients-board .cy-grip { position: absolute; left: 0; top: 3px; font-size: 14px; margin: 0; padding: 5px 2px; }
#clients-board .is-hold .cb-client { padding-left: 0; }
.cb-last { font-size: 11px; }
.cb-separator { opacity: .55; padding: 0 2px; }
.cb-total { display: flex; align-items: baseline; gap: 5px; }
#clients-board .cy-count { font-size: 28px; text-align: left; }
.cb-progress { display: flex; width: 100%; height: 6px; background: var(--ink-faint); margin: 3px 0; overflow: hidden; }
.cb-progress > span { display: block; height: 100%; background: var(--pace-c); }
.cb-progress > .cb-progress-working, .cb-progress-key { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pace-c) 45%, var(--panel)) 0 2px, color-mix(in srgb, var(--pace-c) 15%, var(--panel)) 2px 4px); }
.cb-progress-key { display: inline-block; width: 9px; height: 9px; margin-right: 5px; }
#clients-board .cy-verdict, #clients-board .cy-catch { justify-content: flex-start; }
.cb-status { font: 500 19px/1.2 var(--serif); color: var(--pace-c); }
.cb-status::before { content: ""; display: inline-block; width: 6px; height: 6px; background: currentColor; vertical-align: middle; margin-right: 7px; }
#clients-board .cy-catch { color: var(--pace-c); }
.cb-catch-help { display: block; color: var(--ink-muted); font-size: 11px; }
.cb-disclosure { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; font: 12px var(--mono); color: var(--ink); }
.cb-chevron { display: block; width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms ease; }
.cb-hide, .cb-mobile-label { display: none; }
.cycle-card[open] .cb-show { display: none; }
.cycle-card[open] .cb-hide { display: inline; }
.cycle-card[open] .cb-chevron { transform: rotate(180deg); }
.cycle-card.cb-animating { overflow: hidden; }
.cycle-card.cb-closing .cb-chevron { transform: rotate(0deg); }
.cycle-card.cb-closing .cb-show { display: inline; }
.cycle-card.cb-closing .cb-hide { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cb-chevron { transition: none; }
}
.cb-details-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 18px 20px; border-top: 1px solid var(--ink-faint); background: var(--row-hover); }
.cb-cycle-history { display: flex; flex-direction: column; gap: 6px; flex: 1; }
#clients-board .cy-picker { gap: 4px; }
#clients-board button.cy-cycle { border: 1px solid var(--ink-faint); padding: 6px 10px; min-height: 32px; }
#clients-board .cy-cta { width: auto; }
#clients-board .cy-cta:empty, #clients-board .cy-flags:empty { display: none; }
#clients-board .cy-cta > * { width: auto; }
.cb-episode-key { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 16px 20px 10px; }
.cb-episode-key > span { display: inline-flex; align-items: center; gap: 6px; }
.cb-episode-key .cb-key-slot { width: 10px; height: 10px; display: inline-block; border: 1px solid var(--ink-faint); }
#clients-board .cb-episode-map { display: flex; padding: 0 20px 18px; gap: 5px; }
.cb-episode-map .slot { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font: 11px var(--mono); }
.cb-episode-map .slot-done { color: var(--panel); }
.cb-episode-map .slot:not(.slot-done):not(.slot-missing) { opacity: 1; background: color-mix(in srgb, var(--pace-c) 15%, var(--panel)); border-color: color-mix(in srgb, var(--pace-c) 30%, var(--panel)); color: var(--pace-c); }
.cb-table-scroll { overflow-x: auto; }
#clients-board .cy-eps { min-width: 560px; }
.cb-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 18px 24px; }
.cb-sync { max-width: 100%; }
.cb-sync > summary { cursor: pointer; }
.cb-sync .data-stamp { font: 12px/1.7 var(--mono); padding-top: 10px; max-width: 440px; }
.cb-empty { border: 1px dashed var(--ink-faint); padding: 32px; text-align: center; }
@media (max-width: 1050px) {
  .cb-columns, #clients-board .cycle-card > summary { grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.1fr) minmax(180px, 1.3fr) 60px; column-gap: 16px; }
  #clients-board .cy-name { font-size: 22px; }
}
@media (max-width: 760px) {
  .cb-stat { padding: 16px; }
  .cb-stat .cb-label { font-size: 10px; }
  .cb-stat strong { font-size: 30px; }
  .cb-toolbar { padding: 20px 16px 16px; align-items: flex-start; }
  .cb-columns { display: none; }
  #clients-board .cycle-cards { padding: 0 12px; }
  #clients-board .cycle-card > summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 16px; }
  .cb-client { grid-column: 1 / -1; grid-row: 1; padding-right: 68px; }
  .cb-disclosure { grid-column: 2; grid-row: 1; align-self: start; }
  .cb-delivery { grid-column: 1; grid-row: 2; }
  .cb-schedule { grid-column: 2; grid-row: 2; }
  .cb-mobile-label { display: inline; }
  .cb-footer { padding: 16px; }
}
@media (max-width: 480px) {
  .cb-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-stat:nth-child(3) { border-left: 0; }
  .cb-stat:nth-child(n+3) { border-top: 1px solid var(--ink-faint); }
  .cb-toolbar { flex-direction: column; gap: 12px; }
  .cb-order { text-align: left; }
  .cb-order-hint { display: inline; margin-left: 8px; }
  .cb-status { font-size: 17px; }
  #clients-board .cycle-card > summary { gap: 14px; }
  .cb-delivery { grid-column: 1 / -1; }
  .cb-schedule { grid-column: 1 / -1; grid-row: 3; border-top: 1px solid var(--ink-faint); padding-top: 12px; }
  .cb-catch-help { display: block; margin-top: 2px; }
  .cb-small { font-size: 11px; }
}

/* Timeline: clear date navigation and a cycle inspector beside the chart. */
#timeline-card { padding: 0; min-width: 0; overflow: visible; }
#timeline-card .loading, #timeline-card > .error { display: block; padding: 24px; }
#timeline-body > .error, #timeline-body > .warn-note { margin: 20px 24px; }
.tl-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 24px 18px; }
.tl-heading h2 { margin: 0 0 5px; font: 500 25px/1.2 var(--serif); text-transform: none; letter-spacing: 0; }
.tl-subtitle { margin: 0; font: 12px/1.5 var(--mono); color: var(--ink-muted); }
.tl-control { display: inline-flex; gap: 10px; align-items: center; }
.tl-control-label { font: 11px/1.5 var(--mono); letter-spacing: .06em; color: var(--ink-muted); }
#timeline-card .tl-toolbar { margin: 0; padding: 0 24px 20px; gap: 12px 24px; }
#timeline-card .tl-seg button, #timeline-card .tl-tools button { height: 34px; padding: 0 13px; color: var(--ink); }
#timeline-card .tl-seg button.on { color: var(--on-ink); }
#timeline-card button:focus-visible, #timeline-card a:focus-visible, #timeline-card summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.tl-reading-key { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 12px 24px; border-top: 1px solid var(--ink-faint); font: 11px/1.5 var(--mono); color: var(--ink-muted); background: var(--row-hover); }
.tl-reading-key > span { display: inline-flex; align-items: center; gap: 8px; }
.tl-reading-key i { display: inline-block; flex: 0 0 auto; }
.tl-reading-hint { margin-left: auto; }
#timeline-card .tl-layout { margin: 0 24px; border: 1px solid var(--ink-faint); }
#timeline-card .tl-names { flex-basis: 156px; }
#timeline-card .tl-names-head { padding: 0 14px 12px; display: flex; align-items: flex-end; font: 11px var(--mono); color: var(--ink-muted); background: var(--row-hover); }
#timeline-card .tl-name-cell { padding: 12px 14px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 5px; }
.tl-client-name { font: 500 19px/1.2 var(--serif); overflow-wrap: anywhere; }
.tl-client-note { font: 10px/1.4 var(--mono); color: var(--ink-muted); }
#timeline-card .tl-wrap { scrollbar-width: thin; scrollbar-color: var(--ink-muted) var(--paper); overscroll-behavior-x: contain; }
#timeline-card .tl-wrap:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
#timeline-card .tl-week { fill: var(--ink-muted); font-size: 10px; }
#timeline-card .tl-month { font-size: 12px; font-weight: 600; }
#timeline-card .tl-none { fill: var(--ink-muted); }
#timeline-card .tl-label { fill: var(--ink); }
#timeline-card .tl-halo { fill-opacity: .97; }
#timeline-card .tl-short-label { fill: var(--ink); font-size: 11px; }
.tl-today-band { fill: var(--err); opacity: .045; pointer-events: none; }
#timeline-card .tl-today { stroke-width: 1.5; pointer-events: none; }
.tl-today-tag { fill: var(--err); }
#timeline-card .tl-today-label { fill: var(--panel); font-size: 10px; font-weight: 600; }
#timeline-card .tl-cycle.is-selected .tl-bar { stroke: var(--ink); stroke-width: 2; fill-opacity: .35; }
#timeline-card .tl-cycle:focus-visible .tl-bar { stroke: var(--ink); stroke-width: 2; }
.tl-footer { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 18px 24px; align-items: baseline; font: 11px/1.6 var(--mono); color: var(--ink-muted); }
.tl-footer a { color: var(--ink-muted); }
.tl-guide { flex: 1; min-width: 190px; }
.tl-guide summary { cursor: pointer; color: var(--ink); }
#timeline-card .tl-legend { display: block; margin: 10px 0 0; max-width: 620px; }
#timeline-card .tl-legend p { margin: 0 0 10px; }
.tl-inspector { position: fixed; z-index: 25; top: 84px; right: 24px; bottom: 24px; width: min(430px, calc(100vw - 32px)); display: flex; flex-direction: column; border: 1px solid var(--ink); background: var(--panel); box-shadow: -8px 8px 0 var(--ink-faint); }
.tl-inspector[hidden] { display: none; }
.tl-inspector-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; gap: 12px; border-bottom: 1px solid var(--ink-faint); background: var(--paper); font: 12px var(--mono); }
.tl-inspector-top button { background: none; color: var(--ink); border: 1px solid var(--ink-faint); height: 32px; margin: 0; padding: 0 10px; font: 12px var(--mono); }
#tl-detail { overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
#tl-detail:focus { outline: none; }
#tl-detail .error, .tl-panel-loading { margin: 20px; }
#timeline-card .tl-detail { margin: 0; padding: 0; border: 0; }
#timeline-card .tl-detail-head { display: block; padding: 22px 24px 18px; margin: 0; border-bottom: 1px solid var(--ink-faint); }
.tl-panel-kicker, .tl-panel-dates, .tl-panel-meta { margin: 0; font: 11px/1.6 var(--mono); color: var(--ink-muted); }
#timeline-card .tl-detail-title { margin: 8px 0; font: 500 32px/1.1 var(--serif); }
.tl-detail-title:focus { outline: none; }
.tl-panel-progress { padding: 18px 24px; }
.tl-panel-total { margin: 6px 0 12px; font: 12px var(--mono); color: var(--ink-muted); }
.tl-panel-total strong { font: 500 32px/1 var(--serif); color: var(--ink); }
.tl-panel-status { font: 500 18px/1.3 var(--serif); color: var(--pace-c); margin: 14px 0 5px; }
.tl-panel-meta { margin: 6px 0; }
#timeline-card .tl-detail.is-paused { --pace-c: var(--ink-muted); }
.tl-panel-board { display: inline-block; margin: 10px 0 0; font: 12px var(--mono); color: var(--ink); }
.tl-panel-episodes h4 { display: flex; justify-content: space-between; margin: 0; padding: 12px 24px; background: var(--row-hover); border-block: 1px solid var(--ink-faint); font: 12px var(--mono); }
.tl-panel-episodes h4 span { color: var(--ink-muted); }
.tl-episode-list { list-style: none; margin: 0; padding: 0; }
.tl-episode { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--ink-faint); }
.tl-episode-number { font: 11px/1.6 var(--mono); color: var(--ink-muted); padding-top: 2px; }
.tl-episode-title { margin: 0 0 6px; font: 16px/1.4 var(--serif); overflow-wrap: anywhere; }
.tl-episode-date { margin: 6px 0 0; font: 10px/1.5 var(--mono); color: var(--ink-muted); }
@media (max-width: 1000px) {
  #timeline-card .tl-tools { margin-left: 0; }
  #timeline-card .tl-toolbar { gap: 12px 18px; }
}
@media (max-width: 640px) {
  .tl-heading { flex-wrap: wrap; padding: 20px 16px 16px; }
  .tl-heading h2 { font-size: 23px; }
  #timeline-card .tl-toolbar { padding: 0 16px 16px; gap: 12px; }
  .tl-reading-key { padding: 12px 16px; gap: 10px 16px; }
  .tl-reading-hint { margin-left: 0; width: 100%; }
  #timeline-card .tl-layout { margin: 0 12px; }
  #timeline-card .tl-names { flex-basis: 98px; }
  #timeline-card .tl-name-cell { padding: 10px; }
  .tl-client-name { font-size: 16px; }
  .tl-client-note { font-size: 9px; }
  .tl-footer { padding: 16px; }
  .tl-inspector { top: auto; bottom: 12px; right: 12px; width: calc(100vw - 24px); height: 68vh; height: 68dvh; box-shadow: 0 -6px 0 var(--ink-faint); }
}

.tl-floating-ruler { position: fixed; top: 0; z-index: 18; display: flex; background: var(--panel); border: 1px solid var(--ink-faint); border-bottom-color: var(--ink); pointer-events: none; overflow: hidden; }
.tl-floating-ruler[hidden] { display: none; }
.tl-floating-client { flex: 0 0 auto; display: flex; align-items: flex-end; padding: 0 14px 12px; font: 11px var(--mono); color: var(--ink-muted); border-right: 1px solid var(--ink-faint); }
.tl-floating-dates { flex: 1; min-width: 0; overflow: hidden; }

/* ---- brief · result screen (spec 2026-09-11-brief-history-resume) ----
   A journaled executor error can be long; it wraps as a block under the ladder
   instead of squeezing the title column to one character per line. */
table.publish td:first-child { min-width: 16em; }
table.publish .error { display: block; white-space: normal; overflow-wrap: anywhere; max-width: 64em; margin-top: 4px; }

/* ---- Settings → AI (2026-09-22) ---- */
.settings-tabs { margin-bottom: 8px; }
.ai-table td { vertical-align: top; }
.ai-table select { max-width: 100%; }
.ai-note { font-size: 12px; margin-top: 3px; }
.ai-locked { color: var(--ink-muted); }
.ai-form { display: flex; flex-direction: column; gap: 4px; }
.ai-other { max-width: 100%; }
.ai-test-result { font-size: 12px; margin-left: 6px; }
.badge.own-personal { color: var(--warn); border-color: var(--warn); }
.badge.own-company { color: var(--ink-muted); }
.badge.own-unknown { color: var(--ink-muted); border-style: dashed; }
.badge.own-none { color: var(--err); border-color: var(--err); }
.badge.st-key-set { color: var(--ok); }
.badge.st-key-empty { color: var(--err); }
.badge.st-key-login { color: var(--ink-muted); }
.ai-summary { margin: 12px 0 0; }
.ai-summary.own-personal b { color: var(--warn); }


.users-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.users-actions .inline-form { display: inline-flex; gap: 6px; }
.users-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.linkish.danger { color: var(--err); }

/* ---- Settings hub + gear menu (2026-09-22 UX pass) ---- */
.mast-pop { min-width: 220px; gap: 4px; }
.mast-pop > * { width: 100%; box-sizing: border-box; }
.mast-pop .mast-link.here { border-color: var(--ink); background: var(--ink-faint); }
.signed-in { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 4px; padding: 8px 12px; border-top: 1px solid var(--ink-faint); font: 12px var(--mono); }
.signed-in-who { display: flex; flex-direction: column; line-height: 1.3; }
.signed-in-who b { font-weight: 500; letter-spacing: .04em; }
.settings-head .settings-tabs { margin: 6px 0 10px; }
.settings-tabs a { padding: 7px 16px; font-size: 13px; }
/* users tab */
.users-table th.t-right, .users-table td.t-right { text-align: right; }
.users-table tr.is-disabled td.u-name { opacity: .5; }
.users-table .u-role { height: 34px; padding: 0 10px; font-size: 13px; }
.users-table .u-role:disabled { opacity: .7; }
.u-actions { display: inline-flex; gap: 14px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.u-reset { position: relative; }
.u-reset > summary { list-style: none; cursor: pointer; }
.u-reset > summary::-webkit-details-marker { display: none; }
.u-reset-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; gap: 6px;
  padding: 8px; border: 1px solid var(--ink); background: var(--paper); }
.u-reset-form input { width: 240px; }
.users-add { display: grid; grid-template-columns: 1fr 1fr 160px auto; gap: 12px; align-items: end; margin: 14px 0 6px; }
.u-field { display: flex; flex-direction: column; gap: 6px; }
.u-field .field-label { margin: 0; }
.u-field input, .u-field select { width: 100%; box-sizing: border-box; height: 42px; }
.users-add button[type=submit] { height: 42px; }
@media (max-width: 800px) { .users-add { grid-template-columns: 1fr; } }
.audit-wrap > summary { list-style: none; cursor: pointer; }
.audit-wrap > summary::-webkit-details-marker { display: none; }
.audit-wrap > summary h2::before { content: "▸ "; color: var(--ink-muted); }
.audit-wrap[open] > summary h2::before { content: "▾ "; }
.audit-table { margin-top: 10px; }
.audit-table code { font-size: 12px; }
.nowrap { white-space: nowrap; }

/* ---- Settings → AI: grouped rows, one form per row, saved tick (2026-09-22) ---- */
[hidden] { display: none !important; }
.ai-group-head th { padding: 18px 10px 6px; font-family: var(--serif); font-size: 18px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--ink); border-bottom: 1px solid var(--ink); }
.ai-features td select { min-width: 0; width: 100%; }
.ai-features td:nth-child(2) { width: 22%; } .ai-features td:nth-child(3) { width: 26%; }
.ai-features td:nth-child(4) { width: 20%; } .ai-features td:nth-child(5) { width: 9%; }
.ai-other { margin-top: 6px; width: 100%; box-sizing: border-box; }
.ai-saved { font: 12px var(--mono); color: var(--ok); margin-top: 4px; animation: ai-fade 4s forwards; }
@keyframes ai-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
tr.just-saved { background: color-mix(in srgb, var(--ok) 8%, transparent); transition: background 2s; }

/* ---- Settings → Members (2026-09-22 redesign) ---- */
.member-list { list-style: none; margin: 8px 0 0; padding: 0; }
.member { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 4px; border-bottom: 1px solid var(--ink-faint); }
.member:last-child { border-bottom: 0; }
.member.is-disabled .member-name, .member.is-disabled .member-avatar { opacity: .45; }
.member-id { display: flex; align-items: center; gap: 14px; }
.member-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink-solid); color: var(--on-ink); font: 600 16px var(--serif); }
.member-name { font-size: 17px; font-weight: 600; letter-spacing: .01em; }
.member-name .badge { margin-left: 6px; vertical-align: 2px; }
.member-meta { font-size: 12px; margin-top: 2px; }
.member-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.btn-ghost { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--ink-faint);
  background: transparent; color: var(--ink); font: 12px var(--mono); letter-spacing: .06em; cursor: pointer; list-style: none; }
.btn-ghost::-webkit-details-marker { display: none; }
.btn-ghost:hover { border-color: var(--ink); background: var(--ink-faint); }
.btn-ghost.danger { color: var(--err); }
.btn-ghost.danger:hover { border-color: var(--err); }
.u-reset { position: relative; }
.u-reset[open] > summary { background: var(--ink-faint); border-color: var(--ink); }
.u-reset-form { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; display: flex; gap: 8px;
  padding: 10px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.u-reset-form input { width: 260px; height: 40px; }
.u-reset-form button { height: 40px; }
.member-add { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; margin: 14px 0 6px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field .field-label { margin: 0; }
.field input, .field select { width: 100%; box-sizing: border-box; height: 44px; margin: 0; }
.member-add button[type=submit] { height: 44px; white-space: nowrap; }
@media (max-width: 760px) { .member-add { grid-template-columns: 1fr; } .member { flex-direction: column; align-items: flex-start; } }


/* members: inline reset form (replaces the clipped popover) */
.member { flex-direction: column; align-items: stretch; gap: 0; }
.member-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.reset-form { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: end;
  margin: 12px 0 4px 54px; padding: 14px; border: 1px solid var(--ink-faint); background: var(--ink-faint); }
.reset-form .field input { height: 44px; }
.reset-form button { height: 44px; }
.reset-open[aria-expanded="true"] { background: var(--ink-faint); border-color: var(--ink); }
@media (max-width: 760px) { .member-row { flex-direction: column; align-items: flex-start; } .reset-form { grid-template-columns: 1fr; margin-left: 0; } }

/* ---- password fields: show / hide (2026-09-22) ---- */
.pw-field { position: relative; display: flex; align-items: center; width: 100%; min-width: 0; }
.pw-field input { flex: 1 1 auto; width: 100%; min-width: 0; margin: 0; padding-right: 72px; box-sizing: border-box; }
.pw-toggle { position: absolute; right: 8px; top: 0; bottom: 0; margin: auto 0; height: 28px; padding: 0 10px;
  border: 1px solid var(--ink-faint); background: var(--paper); color: var(--ink-muted); font: 11px var(--mono);
  letter-spacing: .08em; cursor: pointer; line-height: 26px; }
.pw-toggle:hover, .pw-toggle[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.field .pw-field input { height: 44px; }
.login-card .pw-field { margin: 0; }