/**
 * Copyright © 2025–2026 Marc Femenella. All rights reserved.
 *
 * This software and its source code are the exclusive property of Marc Femenella.
 * Unauthorized copying, modification, distribution, or use of this file, in whole
 * or in part, via any medium, is strictly prohibited without the express written
 * permission of the copyright holder.
 *
 * Licensing inquiries: marc@mopomedia.com
 */

:root {
  --bg:    #ecebe6;
  --srf:   #e2e0d9;
  --srf2:  #ceccc3;
  --bdr:   #aaa498;
  --bdr2:  #8e8678;
  --txt:   #1c1a17;
  --dim:   #3b3630;
  --muted: #6a6359;
  --acc:   #3d3830;
  --acc2:  #9a6f2e;
  --acc3:  #dc2626;
  --green: #16a34a;
  --blue:  #2563eb;
  --amber: #d97706;
  --violet:#7c3aed;
  --status-new:      #dc2626;
  --status-assigned: #d97706;
  --status-progress: #0d9488;
  --status-waiting:  #2563eb;
  --status-done:     #16a34a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--txt);font-size:14px;line-height:1.5;min-height:100vh}

/* NAV */
/* min-height (not height) + flex-wrap so a narrow window pushes items to a
   second row instead of overflowing/overlapping — there were no @media
   queries anywhere in this file, so nothing previously told this row to
   wrap at all. Note: #tab-notes/#tab-home/#tab-supervisor's `calc(100vh -
   52px)` assumes a single-row 52px topbar — if this row ever actually wraps
   (narrow window), those panels' content can run slightly past the visible
   area by the wrapped row's height. Real but minor/edge-case vs. the
   overlap bug this fixes; a full fix would need a JS-measured topbar height
   (ResizeObserver -> CSS custom property) rather than a hardcoded 52px. */
.topbar{min-height:52px;background:var(--bg);border-bottom:1px solid var(--bdr);display:flex;flex-wrap:wrap;row-gap:6px;align-items:center;padding:8px 22px;position:sticky;top:0;z-index:50}
.logo{font-family:'DM Sans';font-size:18px;letter-spacing:.5px;color:var(--txt);font-weight:300;display:flex;align-items:center;gap:8px}
.nav-logo{width:24px;height:24px;object-fit:contain;flex-shrink:0;opacity:0.9}
.logo-sub{font-family:'DM Sans';font-size:11px;color:var(--muted);letter-spacing:1px;margin-left:10px;font-weight:700}
.tsep{width:1px;height:20px;background:var(--bdr);margin:0 18px;flex-shrink:0}
.tab-nav{display:flex;gap:2px;align-items:center;margin-left:auto}
.posthub-title{font-family:'Bebas Neue';font-size:22px;letter-spacing:1.5px;color:var(--txt);font-weight:normal;margin-left:8px;cursor:pointer;padding:2px 0;border:none;background:none;transition:color .12s;flex-shrink:0}
.posthub-title:hover{color:var(--acc)}
.tab-btn{font-family:'DM Sans';font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);padding:6px 14px;border-radius:4px;cursor:pointer;border:none;background:none;transition:all .12s;text-decoration:none}
.tab-btn:hover{color:var(--txt);box-shadow:0 2px 8px rgba(0,0,0,.07);transform:translateY(-1px)}.tab-btn.active{background:var(--srf2);color:var(--acc);border:1px solid var(--bdr)}
.nav-group-label{font-family:'DM Sans';font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);opacity:.7;padding:0 6px 0 2px;white-space:nowrap}
.nav-group-sep{width:1px;height:16px;background:var(--bdr);margin:0 10px;flex-shrink:0}

/* ACTIVE SERIES / ACTIVE SEASON — persistent topbar scope selector (Phase 0,
   see js/boot.js and CONTEXT.md -> Active Series/Active Season) */
.topbar-scope{display:flex;gap:6px;align-items:center;margin-left:18px;flex-shrink:0}
/* width:auto is MANDATORY here, not decorative — do not delete it. The base
   form rule further down this file (input[type=text],...,select,textarea)
   sets width:100% on EVERY <select> in the hub, so omitting width here does
   NOT give you `auto`: the global rule wins the width property, and with
   *{box-sizing:border-box} each select resolves 100% against .topbar-scope's
   own width — which is the intrinsic sum of BOTH selects. Result: the two
   selects render identically wide at the pair's combined width and the
   second one overflows onto .tab-nav, painting over the nav buttons
   (flex-wrap on .topbar can't save it — flexbox places .tab-nav against this
   container's box, not its overflow). Invisible while the scope is `all`,
   because js/boot.js hides the Season select then, which is exactly why this
   kept reading as "already fixed" — see the 2026-07-23 fix and
   js/tests/hub-css.topbar-scope-width.test.js.
   Still no min-width/max-width — that was the PREVIOUS wrong fix: a native
   <select> already auto-sizes to its widest <option>, Series names are long,
   Season codes are short, and a guess wide enough for Series names left the
   Season select looking oversized/empty (CLAUDE.md -> VISUAL DESIGN TOKENS
   -> dropdown sizing). flex-shrink:0 goes on the <select> itself, not just
   the .topbar-scope container — the select is the flex item that actually
   gets squeezed. padding gives the "tiny bit of room" past the text metrics
   so the disclosure arrow never sits flush against a character. */
.topbar-scope select{width:auto;font-family:'DM Sans';font-size:11px;color:var(--txt);background:var(--srf);border:1px solid var(--bdr);border-radius:4px;padding:5px 8px;cursor:pointer;flex-shrink:0}
.topbar-scope select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,119,6,.1)}

/* DROPDOWN NAV */
.nav-dropdown{position:relative;display:inline-flex}
.nav-dd-btn .dd-arrow{font-size:14px;margin-left:3px;display:inline-block;transition:transform .12s;opacity:.7}
.nav-dropdown.open .dd-arrow{transform:rotate(180deg)}
.nav-dd-btn.dd-active{background:var(--srf2);color:var(--acc);border:1px solid var(--bdr)}
.nav-dd-menu{position:absolute;top:calc(100% + 5px);left:0;background:var(--srf);border:1px solid var(--bdr2);border-radius:5px;padding:4px;display:none;flex-direction:column;gap:2px;min-width:148px;z-index:200;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.nav-dropdown.open .nav-dd-menu{display:flex}
.nav-dd-menu .tab-btn{text-align:left;justify-content:flex-start;padding:7px 12px;border-radius:3px;width:100%;font-size:11px}
.nav-dd-menu .tab-btn:hover{background:var(--srf2);color:var(--txt)}
.nav-dd-menu .tab-btn.active{background:rgba(61,56,48,.1);color:var(--acc)}

.tab-panel{display:none}
.tab-panel.active{display:block}

/* BUTTONS */
.btn{background:var(--srf2);border:1px solid var(--bdr2);border-radius:4px;padding:6px 14px;color:var(--txt);font-family:'DM Sans';font-size:12px;cursor:pointer;transition:all .12s;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.btn:hover{border-color:var(--acc);color:var(--acc)}
.btn.primary{background:var(--acc);color:#e8e4dc;border-color:var(--acc);font-weight:500}
.btn.primary:hover{background:#524840}
.btn-sm{padding:4px 11px;font-size:11px}
.btn-danger{background:rgba(220,38,38,.10);border-color:var(--acc3);color:var(--acc3)}
.btn-danger:hover{background:rgba(220,38,38,.18)}

/* SPINNER */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--bdr);border-top-color:var(--acc2);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* FORM LAYOUT */
.form-wrap{max-width:640px;margin:0 auto;padding:32px 22px 60px}
.form-header{margin-bottom:28px}
.form-header h1{font-family:'Bebas Neue';font-size:32px;letter-spacing:3px;color:var(--acc);line-height:1}
.form-header p{font-family:'DM Sans';font-size:11px;color:var(--muted);margin-top:6px;letter-spacing:.4px}

/* Create Request drawer (ADR-0081 for the mechanism, ADR-0109 for this shape,
   issue #185) — a RIGHT-ANCHORED DRAWER, not a full-screen sheet.
   .form-wrap is moved in/out by openCreateRequestOverlay()/
   closeCreateRequestOverlay() (js/submit.js); this rule only supplies the
   container + close button.

   Was `inset:0; background:var(--bg)` — a full-bleed opaque sheet in the
   page's own background colour. It preserved the originating tracker's
   filters/scroll/selection underneath (that was ADR-0081's whole point) but
   was visually indistinguishable from a navigation, and it covered the one
   thing the operator needs while writing the request: the tracker itself.

   Deliberate choices here:
   - No backdrop. An accidental backdrop click on a half-typed request is
     worse than the stray click it would catch; closing stays on the ✕. The
     grid behind therefore stays clickable and scrollable, which is the point.
   - --srf, not --bg, so it reads as a panel sitting on the page rather than
     as the page.
   - NO transform, unlike .drawer/.full-entry-panel's slide-in. A transformed
     ancestor becomes the containing block for position:fixed descendants,
     which is the exact landmine documented in CLAUDE.md (ms-panel/Drive
     Picker) — and this drawer hosts the whole Submit form, including
     autocompletes and multi-selects. A static panel is worth more than an
     animation here.
   - z-index 800 keeps it above anchored popovers (600) — both entry points
     fire from inside one. Known limitation: the tracker edit drawer
     (.drawer, 751) opens BEHIND this one, so opening a record for reference
     while the request drawer is up hides it. Recoverable (close the request
     drawer), and not worth a stacking manager; revisit if it bites.
   - The ✕ stays position:FIXED, not absolute. The drawer is right-anchored and
     scrolls internally, so an absolute button scrolls away with the (long)
     Submit form — and with no backdrop, the ✕ is the only way to close. Fixed
     at the viewport's top-right lands inside the drawer anyway, since the
     drawer owns that edge. */
.cro-overlay{position:fixed;top:0;right:0;bottom:0;width:min(760px,96vw);z-index:800;background:var(--srf);border-left:1px solid var(--bdr2);box-shadow:-6px 0 28px rgba(0,0,0,.18);display:none;overflow-y:auto;overscroll-behavior:contain}
.cro-overlay.open{display:block}
.cro-close-btn{position:fixed;top:14px;right:18px;z-index:801;background:var(--srf);border:1px solid var(--bdr2);border-radius:50%;width:34px;height:34px;font-size:16px;color:var(--muted);cursor:pointer}
.cro-close-btn:hover{color:var(--txt);border-color:var(--dim)}

.field{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}
.field-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.field-grid-2 .field-full{grid-column:1/-1}
label{font-family:'DM Sans';font-size:9.5px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.req{color:var(--acc3)}
input[type=text],input[type=url],input[type=email],select,textarea{width:100%;background:#fff;border:1px solid var(--bdr);border-radius:4px;color:var(--txt);font-family:'DM Sans';font-size:13px;padding:9px 11px;outline:none;transition:border-color .12s,box-shadow .12s}
input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,119,6,.16)}
textarea{resize:vertical;min-height:80px;font-size:13px}
input[type="date"],input[type="number"]{font-family:'DM Sans',sans-serif}
input[readonly]{background:var(--srf)!important;color:var(--muted)!important;cursor:default!important}
input:not([readonly]){cursor:text}
.helper{font-family:'DM Sans';font-size:10px;color:var(--muted);margin-top:2px}
select option{background:#fff}

/* SECTION BLOCK */
.section-block{background:var(--srf);border:1px solid var(--bdr);border-radius:6px;padding:16px;margin-bottom:16px}
.section-label{font-family:'DM Sans';font-size:9px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.section-label::after{content:'';flex:1;height:1px;background:var(--bdr)}

/* EPISODE CHIPS */
.chip-grid{display:flex;flex-wrap:wrap;gap:6px}
.ep-chip{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--bdr);border-radius:4px;cursor:pointer;background:var(--srf2);transition:all .12s;font-family:'DM Sans';font-size:10px;letter-spacing:.5px}
.ep-chip:hover{border-color:var(--acc2)}
.ep-chip input{display:none}
.ep-chip.checked{background:rgba(61,56,48,.08);border-color:var(--acc2);color:var(--acc2)}
.ep-chip.checked .chip-dot{background:var(--acc2)}
.chip-dot{width:6px;height:6px;border-radius:50%;background:var(--bdr2);transition:background .12s}
.msd-wrap{position:relative;width:100%}
.msd-trigger{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--bdr);border-radius:4px;padding:8px 11px;cursor:pointer;font-family:'DM Sans';font-size:12px;color:var(--txt);min-height:40px;transition:border-color .12s,box-shadow .12s;user-select:none}
.msd-wrap.open .msd-trigger{border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,119,6,.12)}
.msd-display{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msd-display.placeholder{color:var(--muted)}
.msd-arrow{font-size:10px;color:var(--muted);flex-shrink:0;transition:transform .15s}
.msd-wrap.open .msd-arrow{transform:rotate(180deg)}
.msd-list{display:none;position:absolute;top:calc(100% + 2px);left:0;right:0;background:#fff;border:1px solid var(--bdr);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:60;max-height:200px;overflow-y:auto}
.msd-wrap.open .msd-list{display:block}
.msd-list label{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;font-family:'DM Sans';font-size:11px;color:var(--txt);transition:background .1s}
.msd-list label:hover{background:var(--srf)}
.msd-list input[type=checkbox]{accent-color:var(--acc2);cursor:pointer;width:13px;height:13px;flex-shrink:0}
.gen-options{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.gen-opt{font-family:'DM Sans';font-size:10px;padding:3px 9px;border:1px solid var(--bdr2);border-radius:12px;cursor:pointer;color:var(--dim);background:var(--srf);transition:all .12s;user-select:none}
.gen-opt:hover{background:var(--srf2);border-color:var(--bdr)}
.gen-opt.sel{background:rgba(42,95,168,.12);border-color:rgba(42,95,168,.4);color:var(--blue)}

/* AUTOCOMPLETE */
.ac-wrap{position:relative}
.ac-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--srf);border:1px solid var(--bdr2);border-radius:4px;z-index:1000;max-height:200px;overflow-y:auto;margin-top:2px;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.sv-ac-inline{z-index:1100}
.sv-user-inline-cell{overflow:visible!important}
.ac-item{padding:7px 10px;cursor:pointer;font-size:12px;border-bottom:1px solid var(--bdr);transition:background .1s}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.ac-sel{background:var(--srf2)}
.ac-item strong{color:var(--acc2)}

/* ATTACHMENT / URL SECTION */
.attach-box{background:var(--srf2);border:1px solid var(--bdr);border-radius:4px;padding:12px 14px;font-size:11px;line-height:1.65;color:var(--dim);font-family:'DM Sans'}
.url-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.url-field{display:flex;align-items:center;gap:6px}
.url-field span{font-family:'DM Sans';font-size:10px;color:var(--muted);white-space:nowrap;min-width:36px}
.url-field input{flex:1;font-size:11px;padding:6px 8px}

/* SUBMIT */
.form-actions{margin-top:24px;display:flex;align-items:center;gap:12px}
.submit-btn{font-family:'DM Sans';font-size:13px;font-weight:500;background:var(--acc);color:#e8e4dc;border:none;border-radius:4px;padding:11px 28px;cursor:pointer;transition:background .12s}
.submit-btn:hover{background:#524840}
.form-msg{font-family:'DM Sans';font-size:12px}
.form-msg.ok{color:var(--green)}
.form-msg.err{color:var(--acc3)}

/* PIN GATE */
.pin-gate{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:16px}
.pin-gate h2{font-family:'Bebas Neue';font-size:24px;letter-spacing:2px;color:var(--acc)}
.pin-input-row{display:flex;gap:10px;justify-content:center;margin-bottom:16px}
.pin-digit{width:44px;height:52px;text-align:center;font-size:20px;font-family:'DM Sans';background:var(--srf2);border:1px solid var(--bdr);border-radius:4px;color:var(--txt);outline:none;transition:border-color .12s}
.pin-digit:focus{border-color:var(--acc2)}
/* Every PIN input in the hub is a MASKED TEXT input, never type="password"
   (#389). Chrome groups a document's formless inputs into one "unowned form",
   and a form containing password fields is a sign-in form — so Chrome's
   password manager went looking for the username field to fill and picked the
   most plausible VISIBLE text input, which is whichever module's search box
   happened to be open. That is why Marc's login email kept landing in the
   Notes Tracker search, survived a refresh (the parse re-runs every load), and
   turned up "in other search fields in other modules" too. autocomplete="off"
   does not stop it; #fsearch already carried that plus every 1Password/
   LastPass/Bitwarden ignore attribute and was still being filled. Removing the
   password fields removes the sign-in form, and with it the whole class of bug
   — including for search fields nobody has written yet.
   These are 4-digit UI gates checked against app_settings, not credentials;
   type="password" was only ever supplying the dots, which this does instead.
   Supported in Chrome/Edge/Safari and Firefox 119+.
   js/tests/index.no-password-inputs.test.js fails if a new one is added. */
.pin-digit,.pin-masked{-webkit-text-security:disc}
.pin-error{color:var(--acc3);font-family:'DM Sans';font-size:12px;display:none}
.pin-change-link{margin-top:8px;background:none;border:none;color:var(--muted);font-family:'DM Sans';font-size:10px;letter-spacing:.5px;cursor:pointer;text-decoration:underline;padding:0}
.pin-change-link:hover{color:var(--txt)}

/* BOARD */
.board-toolbar{display:flex;align-items:center;gap:8px;padding:14px 22px;border-bottom:1px solid var(--bdr);background:var(--srf);flex-wrap:wrap}
.board-title{font-family:'Bebas Neue';font-size:22px;letter-spacing:2px;color:var(--acc);white-space:nowrap;flex-shrink:0}
.board-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
select.filter-select{background:var(--srf2);border:1px solid var(--bdr);border-radius:4px;padding:0 8px;height:28px;box-sizing:border-box;color:var(--txt);font-family:'DM Sans';font-size:11px;outline:none;cursor:pointer}
.kanban-board{display:flex;gap:0;overflow-x:auto;padding:0;min-height:calc(100vh - 160px)}
.kanban-col{flex:0 0 220px;display:flex;flex-direction:column;border-right:1px solid var(--bdr)}
.kanban-col:last-child{border-right:none}
.col-header{padding:10px 14px;border-bottom:1px solid var(--bdr);background:var(--srf2);flex-shrink:0}
.col-header-title{font-family:'DM Sans';font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between}
.col-count{border-radius:10px;padding:1px 7px;font-size:9px;font-weight:600}
/* Column header colors — no red (reserved for Urgent priority bar), no blue (reserved for Normal bar) */
.col-header[data-status="New"]{background:#FAE89A;border-bottom-color:#D4C070}
.col-header[data-status="New"] .col-header-title{color:#5C4A00}
.col-header[data-status="New"] .col-count{background:#B89400;color:#fff}
.col-header[data-status="Assigned"]{background:#D5C9F0;border-bottom-color:#A99CD4}
.col-header[data-status="Assigned"] .col-header-title{color:#26215C}
.col-header[data-status="Assigned"] .col-count{background:#534AB7;color:#fff}
.col-header[data-status="In Progress"]{background:#FBEAF0;border-bottom-color:#E8BBCC}
.col-header[data-status="In Progress"] .col-header-title{color:#72243E}
.col-header[data-status="In Progress"] .col-count{background:#D4537E;color:#fff}
.col-header[data-status="Ready for Ingest"]{background:#D4C5B0;border-bottom-color:#B8A890}
.col-header[data-status="Ready for Ingest"] .col-header-title{color:#4A3728}
.col-header[data-status="Ready for Ingest"] .col-count{background:#7A6050;color:#fff}
.col-header[data-status="Done"]{background:#C8DFA8;border-bottom-color:#A0C070}
.col-header[data-status="Done"] .col-header-title{color:#173404}
.col-header[data-status="Done"] .col-count{background:#639922;color:#fff}
.col-header[data-status="Cancelled"]{background:#3A3A3A;border-bottom-color:#555}
.col-header[data-status="Cancelled"] .col-header-title{color:#E8E8E8}
.col-header[data-status="Cancelled"] .col-count{background:#666;color:#fff}
/* Cancelled cards de-emphasised */
.kanban-col[data-status="Cancelled"] .kanban-card{opacity:.55}
.col-cards{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
/* Card — prio bar + body layout */
.kanban-card{background:var(--srf);border:1px solid var(--bdr);border-radius:5px;cursor:pointer;transition:all .12s;display:flex;align-items:stretch;padding:0;overflow:hidden}
.kanban-card:hover{border-color:var(--bdr2);box-shadow:0 4px 14px rgba(0,0,0,.10);transform:translateY(-1px);transition:all .15s}
.col-cards .kanban-card:nth-child(even){background:color-mix(in srgb,var(--srf) 82%,white)}
.card-prio-bar{flex-shrink:0;border-radius:0;min-height:52px}
.card-body{flex:1;min-width:0;padding:9px 10px 8px;position:relative}
/* Card type row */
.card-type{font-family:'DM Sans';font-size:9px;margin-bottom:4px;display:flex;align-items:center;gap:6px}
/* Neutral type tag — emoji + text, no hue noise */
.type-tag-neutral{display:inline-block;font-family:'DM Sans';font-size:9.5px;font-weight:500;letter-spacing:.04em;padding:2px 7px;border-radius:4px;background:#FAF8F4;border:.5px solid #DEDAD4;color:#4A4845;white-space:nowrap}
/* Tech Support: at-a-glance "already escalated to Atlas" chip */
.card-escalated-chip{display:inline-block;font-family:'DM Sans';font-size:9.5px;font-weight:500;letter-spacing:.04em;padding:2px 7px;border-radius:4px;background:#EAF7EE;border:.5px solid var(--green);color:var(--green);white-space:nowrap}
/* Keep .type-tag as fallback for any non-card usage (asset table, etc.) */
.type-tag{display:inline-block;font-family:'DM Sans';font-size:9px;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;border-radius:3px;background:var(--srf2);border:1px solid var(--bdr);color:var(--muted)}
/* Request number */
.card-req-num{font-family:'DM Sans';font-size:12px;font-weight:500;color:var(--dim);white-space:nowrap}
/* Delete button — absolute overlay, never displaces layout */
.card-delete-btn{display:none;position:absolute;top:5px;right:6px;background:none;border:none;cursor:pointer;color:var(--muted);font-size:12px;line-height:1;opacity:.55;padding:2px 3px}
.card-delete-btn:hover{color:var(--acc3);opacity:1}
.kanban-card:hover .card-delete-btn{display:block}
.card-requester{font-size:12px;font-weight:500;color:var(--dim);margin-bottom:4px}
.card-assignee{font-size:10px;color:var(--muted);margin-bottom:3px;font-family:'DM Sans'}
.card-res-status{font-size:10px;font-family:'DM Sans';color:var(--acc2);margin-bottom:3px}
/* Episode chips — neutral on cards (tagHSL reserved for board filters/selectors if needed) */
.card-ep-line{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:3px}
.card-ep-chip{font-family:'DM Sans';font-size:9.5px;font-weight:500;color:var(--dim);background:var(--srf2);border:.5px solid var(--bdr);border-radius:3px;padding:1px 5px}
/* Keep .card-ep for any legacy path */
.card-ep{font-family:'DM Sans';font-size:9px;background:var(--srf2);border:1px solid var(--bdr);border-radius:3px;padding:1px 6px;color:var(--dim)}
/* Card date */
.card-date{font-family:'DM Sans';font-size:10px;color:var(--muted);margin-top:2px}
/* Legacy prio classes — kept for safety, can remove after confirming no other usage */
.card-meta{margin-top:6px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.card-notes{font-size:12px;color:var(--txt);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.loading-state{display:flex;align-items:center;justify-content:center;padding:60px;gap:10px;color:var(--muted);font-family:'DM Sans';font-size:12px}

/* DRAWER */
.drawer-overlay{position:fixed;inset:0;background:rgba(45,41,38,.45);z-index:750;display:none;backdrop-filter:blur(2px)}
.drawer-overlay.open{display:block}
.drawer{position:fixed;right:0;top:0;bottom:0;width:600px;max-width:95vw;background:var(--bg);border-left:1px solid var(--bdr2);z-index:751;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .2s ease}
.drawer.open{transform:translateX(0)}
#trackerEditDrawer{width:600px}
.drawer-hdr{padding:14px 18px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--srf)}
.drawer-title{font-family:'Bebas Neue';font-size:18px;letter-spacing:2px;color:var(--acc)}
.drawer-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:2px 6px;border-radius:3px}
.drawer-close:hover{color:var(--txt)}
.drawer-body{flex:1;overflow-y:auto;padding:16px 18px;display:grid;grid-template-columns:1fr 1fr;column-gap:14px;align-items:start;align-content:start}
.drawer-body > :not(.field),.drawer-body .field:has(.chip-grid),.drawer-body .field-full{grid-column:span 2}
#trackerDrawerBody{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;align-items:start;align-content:start}
#trackerDrawerBody > :not(.field),#trackerDrawerBody .field:has(.chip-grid),#trackerDrawerBody > .field-full{grid-column:span 2}
.drawer-body .field input,.drawer-body .field select,#trackerDrawerBody .field input,#trackerDrawerBody .field select{font-size:11px}
.drawer-body .msd-trigger,#trackerDrawerBody .msd-trigger{min-height:0;padding:8px 11px}
.drawer-footer{padding:12px 18px;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-shrink:0;background:var(--srf)}
.drawer-footer-left{margin-right:auto}
.info-row{margin-bottom:10px;font-size:12px}
.info-row label{display:block;font-family:'DM Sans';font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.info-val{color:var(--txt)}
.drawer-divider{height:1px;background:var(--bdr);margin:14px 0}

/* FULL-ENTRY PANEL — Work Entry drawer, Line Item panel, Team edit panel
   (all render into #cal-fullEntryPanel using these classes; the dead Create
   Line Item panel that also used them was removed 2026-07-25, #165).
   Previously had zero CSS at
   all — the overlay divs used class="full-entry-overlay" instead of the
   working generic "overlay" class, so .classList.add('open') never made
   anything visible. Right-anchored slide-in, same convention as .drawer. */
.full-entry-overlay{position:fixed;inset:0;background:rgba(45,41,38,.45);z-index:800;display:none;backdrop-filter:blur(2px)}
.full-entry-overlay.open{display:block}
.full-entry-panel{position:fixed;right:0;top:0;bottom:0;width:600px;max-width:95vw;background:var(--bg);border-left:1px solid var(--bdr2);z-index:801;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .2s ease;overflow:hidden}
.full-entry-overlay.open .full-entry-panel{transform:translateX(0)}
.full-entry-header{padding:14px 18px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--srf);font-family:'Bebas Neue';font-size:18px;letter-spacing:1.5px;color:var(--acc)}
.full-entry-body{flex:1;overflow-y:auto;padding:16px 18px}
.full-entry-footer{padding:12px 18px;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-shrink:0;background:var(--srf)}
.chip-panel-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:2px 6px;border-radius:3px;line-height:1}
.chip-panel-close:hover{color:var(--txt)}
.field-row{margin-bottom:10px}
.field-row label{display:block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--muted);margin-bottom:3px;font-family:'DM Sans'}
.field-row input,.field-row select,.field-row textarea{width:100%;font-family:inherit;box-sizing:border-box;height:30px;padding:4px 6px;border:1px solid var(--bdr);border-radius:3px;background:#fff}
.field-row textarea{height:auto;resize:vertical}

.sv-ro-val{font-size:13px;color:var(--dim);padding:5px 0}
.sv-formula-val{font-family:'DM Sans';font-size:12px;color:var(--acc2);padding:5px 0;font-weight:600}
.sv-formula-section{background:var(--srf);border:1px solid var(--bdr);border-radius:6px;padding:10px 12px;margin-bottom:14px}

/* ASSETS TAB */
.assets-toolbar{display:flex;align-items:center;gap:8px;padding:12px 22px;border-bottom:1px solid var(--bdr);background:var(--srf);flex-wrap:wrap}
.assets-title{font-family:'Bebas Neue';font-size:22px;letter-spacing:2px;color:var(--acc);white-space:nowrap;flex-shrink:0}
.tracker-controls{display:flex;align-items:center;gap:6px;flex:1;flex-wrap:wrap;min-width:0}
.refresh-btn{font-size:18px!important;padding:4px 8px!important;line-height:1}
.col-hide-btn{font-size:10px;padding:1px 7px;border-radius:3px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#e8e8e8;cursor:pointer;white-space:nowrap;flex-shrink:0}
.col-hide-btn:hover{background:rgba(255,255,255,.22)}
.kanban-col-collapsed{flex:0 0 auto;min-width:0}
.col-header-collapsed{cursor:pointer;display:flex;align-items:center;justify-content:center;min-height:44px}
.new-btn-wrap{position:relative;display:inline-block}
.new-btn-menu{display:none;position:absolute;top:calc(100% + 4px);right:0;background:#fff;border:1px solid var(--bdr);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:800;min-width:100px;overflow:hidden}
.new-btn-wrap.open .new-btn-menu{display:block}
.new-btn-menu button{display:block;width:100%;padding:7px 14px;background:none;border:none;text-align:left;font-family:'DM Sans';font-size:12px;color:var(--txt);cursor:pointer;white-space:nowrap}
.new-btn-menu button:hover{background:var(--srf2)}
.table-wrap{overflow-x:auto;padding:0 0 40px;width:100%}
table.atbl{width:100%;border-collapse:collapse}
#assetsTableWrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
#assetsTableWrap .atbl{min-width:max-content}
.tbl-hide-licensing [data-cg="licensing"]{display:none}
.btn-active{background:var(--amber)!important;color:#fff!important;border-color:var(--amber)!important}
.atbl thead th{background:var(--srf2);border-bottom:2px solid var(--bdr);padding:6px 8px;text-align:left;font-family:'DM Sans';font-size:9px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);position:sticky;top:0;z-index:4;white-space:nowrap}
/* Sticky tracker toolbar + column headers on scroll (#106, ADR-0098). Each of
   the 5 Asset-Code tracker tabs is made a viewport-bounded flex COLUMN so its
   .table-wrap flex-fills the space under the toolbar and scrolls INTERNALLY.
   That is what actually makes .atbl thead th (position:sticky;top:0) stick —
   before this the .table-wrap was overflow:auto BUT sized to its full content,
   so the window scrolled everything and the "sticky" headers (and the static
   toolbar) rode off-screen (verified live in Chrome). Now the toolbar stays at
   the tab's top and the headers stick to the internal scroll's top. display:flex
   is !important because the tab-switch JS sets an inline display on the tab and
   its content div. Scoped by tab id so Directories/Notes/Calendar/etc. are
   untouched. Caveat: on a narrow viewport where the 52px topbar wraps to 2 rows
   the grid is ~1 row too tall (small page scroll) — fine for the wide desktop
   case, which is exact. content div stays overflow:visible so the toolbar's
   dropdowns/+New menu aren't clipped. */
#tab-research.tab-panel.active,#tab-ai-tracker.tab-panel.active,#tab-gfx-tracker.tab-panel.active,#tab-music-tracker.tab-panel.active,#tab-exports-tracker.tab-panel.active,#tab-releases-tracker.tab-panel.active{height:calc(100vh - 52px);display:flex!important;flex-direction:column;overflow:hidden}
#tab-research.tab-panel.active>div,#tab-ai-tracker.tab-panel.active>div,#tab-gfx-tracker.tab-panel.active>div,#tab-music-tracker.tab-panel.active>div,#tab-exports-tracker.tab-panel.active>div,#tab-releases-tracker.tab-panel.active>div{display:flex!important;flex-direction:column;flex:1 1 auto;min-height:0}
#tab-research.tab-panel.active .assets-toolbar,#tab-ai-tracker.tab-panel.active .assets-toolbar,#tab-gfx-tracker.tab-panel.active .assets-toolbar,#tab-music-tracker.tab-panel.active .assets-toolbar,#tab-exports-tracker.tab-panel.active .assets-toolbar,#tab-releases-tracker.tab-panel.active .assets-toolbar,#tab-research.tab-panel.active .del-banner,#tab-ai-tracker.tab-panel.active .del-banner,#tab-gfx-tracker.tab-panel.active .del-banner,#tab-music-tracker.tab-panel.active .del-banner,#tab-exports-tracker.tab-panel.active .del-banner,#tab-releases-tracker.tab-panel.active .del-banner{flex-shrink:0}
#tab-research.tab-panel.active .table-wrap,#tab-ai-tracker.tab-panel.active .table-wrap,#tab-gfx-tracker.tab-panel.active .table-wrap,#tab-music-tracker.tab-panel.active .table-wrap,#tab-exports-tracker.tab-panel.active .table-wrap,#tab-releases-tracker.tab-panel.active .table-wrap{flex:1 1 auto;min-height:0}
/* Sticky headers for Footage + Transcripts (#125) — same ADR-0098 flex-column
   technique, but these two tabs render js/footage.js's own scaffolding
   (#ftgContent/#ftgTxContent > .ftg-layout > .ftg-toolbar-row + .ftg-panel >
   filter-row + .sv-table-wrap) instead of .assets-toolbar/.table-wrap, and
   their .sv-table th never had position:sticky at all (unlike .atbl thead th).
   Every layer of the chain becomes a min-height:0 flex column so the
   .sv-table-wrap is the ONE internal scroller and the th cells stick to it.
   Scoped to these two tabs — .sv-table elsewhere (Supervisor panels) is
   untouched. */
#tab-footage-tracker.tab-panel.active,#tab-transcripts-tracker.tab-panel.active{height:calc(100vh - 52px);display:flex!important;flex-direction:column;overflow:hidden}
#tab-footage-tracker.tab-panel.active>div,#tab-transcripts-tracker.tab-panel.active>div{display:flex!important;flex-direction:column;flex:1 1 auto;min-height:0}
#tab-footage-tracker.tab-panel.active .ftg-layout,#tab-transcripts-tracker.tab-panel.active .ftg-layout{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
#tab-footage-tracker.tab-panel.active .ftg-panel.active,#tab-transcripts-tracker.tab-panel.active .ftg-panel.active{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
#tab-footage-tracker.tab-panel.active .ftg-panel.active>*,#tab-transcripts-tracker.tab-panel.active .ftg-panel.active>*{flex-shrink:0}
#tab-footage-tracker.tab-panel.active .ftg-panel.active>.sv-table-wrap,#tab-transcripts-tracker.tab-panel.active .ftg-panel.active>.sv-table-wrap{overflow:auto;flex:1 1 auto;min-height:0}
#tab-footage-tracker.tab-panel.active .sv-table th,#tab-transcripts-tracker.tab-panel.active .sv-table th{position:sticky;top:0;z-index:4}
/* Columns picker (issue #126) — the ▦ Columns ▾ dropdown on the Asset-Code
   trackers. Reuses the ms-wrap/ms-panel pattern; the panel is right-anchored
   (the button sits at the toolbar's right edge) and sized to column names
   instead of inheriting the wrap's narrow width. */
.tr-cols-panel{left:auto;right:0;width:max-content;min-width:215px;max-width:300px;max-height:300px;white-space:nowrap}
.tr-cols-panel .ms-item input[type=checkbox]{width:auto;margin:0;cursor:pointer}
/* Prompt-cell preview clamp (issue #124) — long AI prompts previously wrapped
   in full (issue #43), turning rows into tall skinny columns. 3-line preview;
   full text via the pop-out editor (editors) or click-to-expand (read-only). */
.tc-prompt-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.tc-prompt-clamp.tc-prompt-expanded{display:block;-webkit-line-clamp:unset}
.atbl tbody tr{border-bottom:1px solid var(--bdr);transition:background .1s}
.atbl tbody tr:hover{background:rgba(217,119,6,.045)}
.atbl tbody tr:nth-child(even){background:rgba(255,255,255,.5)}
.atbl tbody tr:nth-child(even):hover{background:rgba(217,119,6,.045)}
.atbl tbody td{padding:6px 8px;vertical-align:top;font-size:11px;word-break:break-word;overflow-wrap:anywhere}
.atbl tr.tr-editing{background:rgba(217,119,6,.07)!important;box-shadow:inset 2px 0 0 var(--amber)}
/* STATUS CHIPS */
.status-chip{display:inline-block;font-family:'DM Sans';font-size:9px;font-weight:500;letter-spacing:.4px;border-radius:3px;padding:2px 7px;border:1px solid;white-space:nowrap;vertical-align:middle;line-height:1.5}
.sc-violet{background:rgba(107,78,168,.11);color:#4a3276;border-color:rgba(107,78,168,.30)}
.sc-lavender{background:rgba(167,139,250,.12);color:#5b35a8;border-color:rgba(167,139,250,.32)}
.sc-yellow{background:rgba(202,138,4,.11);color:#713f12;border-color:rgba(202,138,4,.30)}
.sc-amber{background:rgba(217,119,6,.11);color:#92400e;border-color:rgba(217,119,6,.30)}
.sc-orange{background:rgba(234,88,12,.11);color:#7c2d12;border-color:rgba(234,88,12,.30)}
.sc-blue{background:rgba(59,130,246,.11);color:#1e40af;border-color:rgba(59,130,246,.30)}
.sc-green{background:rgba(22,163,74,.11);color:#155c2f;border-color:rgba(22,163,74,.30)}
.sc-teal{background:rgba(20,184,166,.11);color:#0e6e68;border-color:rgba(20,184,166,.30)}
.sc-red{background:rgba(220,38,38,.11);color:#991b1b;border-color:rgba(220,38,38,.30)}
.sc-grey{background:rgba(107,107,107,.09);color:var(--dim);border-color:rgba(107,107,107,.22)}
.sc-solid-green{background:#155c2f;color:#fff;border-color:#155c2f}
.sc-solid-red{background:#991b1b;color:#fff;border-color:#991b1b}
.sc-solid-black{background:#1c1a17;color:#fff;border-color:#1c1a17}
/* INLINE SELECT — status-colored via data-status attr */
.inline-status-sel[data-status="Prompt Creation"],.inline-status-sel[data-status="Creating"],.inline-status-sel[data-status="Temp in Edit"]{background:rgba(107,78,168,.11)!important;color:#4a3276!important;border-color:rgba(107,78,168,.30)!important}
.inline-status-sel[data-status="Noted"],.inline-status-sel[data-status="Assigned"],.inline-status-sel[data-status="Internal"]{background:rgba(167,139,250,.12)!important;color:#5b35a8!important;border-color:rgba(167,139,250,.32)!important}
.inline-status-sel[data-status="New"]{background:rgba(202,138,4,.11)!important;color:#713f12!important;border-color:rgba(202,138,4,.30)!important}
.inline-status-sel[data-status="Reviewing / Revising"],.inline-status-sel[data-status="Rights Requested"],.inline-status-sel[data-status="In Progress"],.inline-status-sel[data-status="Revision"]{background:rgba(217,119,6,.11)!important;color:#92400e!important;border-color:rgba(217,119,6,.30)!important}
.inline-status-sel[data-status="Generating"],.inline-status-sel[data-status="Exporting"],.inline-status-sel[data-status="Awaiting Delivery"]{background:rgba(234,88,12,.11)!important;color:#7c2d12!important;border-color:rgba(234,88,12,.30)!important}
.inline-status-sel[data-status="Ready for Ingest"],.inline-status-sel[data-status="Received Asset"],.inline-status-sel[data-status="Additional to Existing"],.inline-status-sel[data-status="Network"]{background:rgba(59,130,246,.11)!important;color:#1e40af!important;border-color:rgba(59,130,246,.30)!important}
.inline-status-sel[data-status="Rights Cleared"],.inline-status-sel[data-status="Approved for Use"],.inline-status-sel[data-status="Done"],.inline-status-sel[data-status="Complete / Uploaded"],.inline-status-sel[data-status="Completed / Uploaded"],.inline-status-sel[data-status="Uploaded"]{background:rgba(22,163,74,.11)!important;color:#155c2f!important;border-color:rgba(22,163,74,.30)!important}
.inline-status-sel[data-status="Purchased"],.inline-status-sel[data-status="Sent to Network"],.inline-status-sel[data-status="Sent to Client / Vendor"],.inline-status-sel[data-status="Ingested"],.inline-status-sel[data-status="Final in Edit"],.inline-status-sel[data-status="In Final Lock"],.inline-status-sel[data-status="In Final Cut"]{background:rgba(20,184,166,.11)!important;color:#0e6e68!important;border-color:rgba(20,184,166,.30)!important}
.inline-status-sel[data-status="Rights Denied"],.inline-status-sel[data-status="Removed / Don't Use"],.inline-status-sel[data-status="Removed from Edit"],.inline-status-sel[data-status="Cancelled"]{background:rgba(220,38,38,.11)!important;color:#991b1b!important;border-color:rgba(220,38,38,.30)!important}
.asset-code{font-family:'DM Sans';font-size:11px;font-weight:500;color:var(--acc2)}
.type-pill{font-family:'DM Sans';font-size:9px;border-radius:3px;padding:2px 7px;border:1px solid}
.type-arc{background:rgba(99,102,241,.14);color:#4338ca;border-color:rgba(99,102,241,.38)}
.type-stk{background:rgba(20,184,166,.14);color:#0f766e;border-color:rgba(20,184,166,.38)}
.type-acq{background:rgba(245,158,11,.14);color:#92400e;border-color:rgba(245,158,11,.38)}
.type-other{background:var(--srf2);color:var(--dim);border-color:var(--bdr)}
.ep-tags{display:flex;flex-wrap:wrap;gap:3px}
.ep-tag{font-family:'DM Sans';font-size:9px;background:var(--srf2);border:1px solid var(--bdr);border-radius:3px;padding:1px 5px;color:var(--dim)}
.icon-btn{background:none;border:1px solid transparent;border-radius:4px;cursor:pointer;padding:3px 7px;font-size:14px;color:var(--muted);transition:all .12s;position:relative}
.icon-btn:hover{background:var(--srf2);border-color:var(--bdr);color:var(--txt)}
.icon-btn.del:hover{color:var(--acc3);border-color:rgba(220,38,38,.35);background:rgba(220,38,38,.10)}
.icon-btn.restore:hover{color:var(--green);border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.10)}
/* Lookup / people / episode / chip cells in tracker grid */
.tr-lookup-cell{max-width:180px;font-size:11px;cursor:pointer;border-bottom:1px dashed transparent;transition:border-color .12s;word-break:break-word;overflow-wrap:anywhere}
.tr-lookup-cell:hover{border-bottom-color:var(--acc2);color:var(--acc2)}
.tr-lookup-editing{overflow:visible !important}
/* Copy-to-clipboard icon on hover — tracker text cells */
td.tc-copyable{position:relative}
.tc-copy-btn{position:absolute;top:2px;right:2px;opacity:0;transition:opacity .15s;background:rgba(236,235,230,.92);border:1px solid var(--bdr);border-radius:3px;cursor:pointer;font-size:10px;line-height:1;padding:1px 3px;color:var(--muted);pointer-events:none}
td.tc-copyable:hover .tc-copy-btn{opacity:1;pointer-events:auto}
.parent-badge{display:inline-block;font-family:'DM Sans';font-size:10px;font-weight:500;color:var(--amber);background:rgba(217,119,6,.1);border:1px solid rgba(217,119,6,.4);border-radius:3px;padding:1px 5px;margin-left:5px;vertical-align:middle;white-space:nowrap;line-height:1.4}

/* MODAL */
.overlay{position:fixed;inset:0;background:rgba(45,41,38,.5);display:none;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(3px)}
.overlay.open{display:flex}
.modal{background:var(--bg);border:1px solid var(--bdr2);border-radius:6px;width:620px;max-width:95vw;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.14)}
.mhdr{padding:14px 18px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.mtitle{font-family:'Bebas Neue';font-size:18px;letter-spacing:2px;color:var(--acc)}
.mclose{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:2px 6px;border-radius:3px;line-height:1;transition:color .12s}
.mclose:hover{color:var(--txt)}
.mbody{padding:18px;overflow-y:auto;flex:1}
.mbody::-webkit-scrollbar{width:4px}
.mbody::-webkit-scrollbar-thumb{background:var(--bdr2)}
.mfooter{padding:12px 18px;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-shrink:0}
.mfooter-left{margin-right:auto;font-family:'DM Sans';font-size:10px;color:var(--muted)}

/* FILTER BAR */
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 22px;border-bottom:1px solid var(--bdr);background:var(--srf)}
.tracker-search{background:var(--srf2);border:1px solid var(--bdr);border-radius:4px;padding:0 8px;height:28px;box-sizing:border-box;color:var(--txt);font-family:'DM Sans';font-size:10px;letter-spacing:.3px;outline:none;width:140px}
.tracker-search:focus{border-color:var(--acc2)}
.tracker-controls select{font-family:'DM Sans';font-size:10px;padding:0 8px;height:28px;box-sizing:border-box;border:1px solid var(--bdr);border-radius:4px;color:var(--txt);outline:none;cursor:pointer;max-width:180px}
.tracker-controls select:focus{border-color:var(--acc2)}
/* Inline new record row */
.inline-new-row{background:color-mix(in srgb, var(--acc2) 5%, transparent)}
.inline-new-row td{padding:4px 4px;vertical-align:middle}
.inline-new-inp{background:var(--srf2);border:1px solid var(--bdr);border-radius:3px;padding:3px 6px;color:var(--txt);font-family:'DM Sans';font-size:10px;outline:none;width:100%;min-width:60px}
.inline-new-inp:focus{border-color:var(--acc2)}
.inline-new-sel{cursor:pointer}
.filter-bar-label{font-family:'DM Sans';font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);white-space:nowrap;margin-right:4px}
.filter-bar select{background:#fff;border:1px solid var(--bdr);border-radius:4px;padding:4px 8px;color:var(--txt);font-family:'DM Sans';font-size:10px;letter-spacing:.3px;outline:none;cursor:pointer;width:auto}
.filter-bar select:focus{border-color:var(--acc2)}
.filter-clear{font-family:'DM Sans';font-size:10px;cursor:pointer;padding:4px 8px;border-radius:4px;border:1px solid var(--bdr2);background:var(--srf2);color:var(--dim)}
.filter-clear:hover{background:var(--srf);color:var(--txt)}
/* SORT HEADERS */
.sort-th{cursor:pointer;user-select:none;white-space:nowrap}
.sort-th:hover{color:var(--txt)}
.sort-arrow{margin-left:3px;opacity:.4;font-size:8px}
.sort-th.sort-asc .sort-arrow::after{content:'↑';opacity:1}
.sort-th.sort-desc .sort-arrow::after{content:'↓';opacity:1}
.sort-th:not(.sort-asc):not(.sort-desc) .sort-arrow::after{content:'↕'}
/* COLUMN WIDTHS */
.col-code{width:78px;font-family:'DM Sans';font-size:11px;font-weight:500;color:var(--acc2)}
.col-filename{min-width:220px;max-width:300px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--acc);color:#e8e4dc;font-family:'DM Sans';font-size:11px;letter-spacing:.5px;padding:9px 18px;border-radius:4px;z-index:999;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1;pointer-events:auto}
.toast.err{background:var(--acc3)}
.toast-action{background:transparent;border:1px solid rgba(255,255,255,.5);border-radius:3px;color:inherit;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:11px;margin-left:8px;padding:2px 8px;white-space:nowrap}
.toast-action:hover{background:rgba(255,255,255,.15)}
.toast-dismiss{background:none;border:none;cursor:pointer;color:inherit;font-size:13px;line-height:1;margin-left:10px;padding:0;opacity:.85}
.toast-dismiss:hover{opacity:1}

/* MILESTONE SELECT */
.milestone-select{width:100%;background:var(--srf2);border:1px solid var(--bdr);border-radius:4px;color:var(--txt);font-family:'DM Sans';font-size:12px;padding:8px 10px;outline:none;transition:border-color .12s}
.milestone-select:focus{border-color:var(--acc2)}

/* INGEST NOTICE */
.ingest-notice{background:rgba(22,163,74,.14);border:1px solid rgba(22,163,74,.38);border-radius:4px;padding:10px 12px;font-family:'DM Sans';font-size:11px;color:var(--green);line-height:1.65}
.ingest-notice--warn{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.3);color:var(--acc3)}

/* MODULE BANNER (#275) — a standing notice at the top of a whole module.
   Deliberately NOT .ingest-notice, which carries the Submit form's semantics;
   reusing it would couple two unrelated features to one rule set.
   The standalone Tools pages keep their own .beta-banner in tools-common.css —
   they don't load hub.css, so that stays a separate (visually matching) copy.
   Checked against calendar.css for selector collisions before adding: none.
   --closed  solid red, module is shut. Matches the Tools pages' .beta-banner.
   --beta    amber, module is live but still settling. Must NOT read as a stop
             sign — the Calendar is in daily use. */
.mod-banner{border-radius:5px;padding:9px 14px;font-family:'DM Sans';font-size:11.5px;line-height:1.6;margin-bottom:12px;display:flex;align-items:flex-start;gap:10px}
.mod-banner--closed{background:var(--acc3);color:#fff;font-weight:600}
.mod-banner--beta{background:rgba(217,119,6,.10);border:1px solid rgba(217,119,6,.34);color:var(--amber)}
.mod-banner-body{flex:1;min-width:0}
.mod-banner strong{font-weight:700}
/* Collapse control — the beta banner reduces to a chip rather than dismissing
   outright, so the caveat stays one click away instead of disappearing for
   good the first time someone clears it. */
.mod-banner-toggle{flex-shrink:0;background:none;border:1px solid currentColor;border-radius:3px;color:inherit;font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 7px;cursor:pointer;opacity:.75}
.mod-banner-toggle:hover{opacity:1}
.mod-banner-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(217,119,6,.10);border:1px solid rgba(217,119,6,.34);color:var(--amber);border-radius:5px;padding:3px 9px;font-family:'DM Sans';font-size:10px;font-weight:700;letter-spacing:.04em;margin-bottom:10px;cursor:pointer}
.mod-banner-chip:hover{background:rgba(217,119,6,.18)}

/* CONFIRM MODAL */
.confirm-overlay{position:fixed;inset:0;background:rgba(45,41,38,.5);display:none;align-items:center;justify-content:center;z-index:300;backdrop-filter:blur(3px)}
.confirm-overlay.open{display:flex}
.confirm-box{background:var(--bg);border:1px solid var(--bdr2);border-radius:6px;width:400px;max-width:90vw;padding:24px;box-shadow:0 16px 48px rgba(0,0,0,.14)}
.confirm-title{font-family:'Bebas Neue';font-size:18px;letter-spacing:2px;color:var(--acc3);margin-bottom:8px}
.confirm-msg{font-size:12px;color:var(--dim);line-height:1.65;margin-bottom:20px}
.confirm-actions{display:flex;gap:8px;justify-content:flex-end}

/* DELETED ASSETS VIEW */
.del-banner{background:rgba(220,38,38,.08);border-bottom:1px solid rgba(220,38,38,.22);padding:8px 22px;font-family:'DM Sans';font-size:11px;color:var(--acc3);letter-spacing:.5px;display:flex;align-items:center;gap:10px}
/* DRAG AND DROP */
.col-cards.drag-over{background:rgba(154,111,46,.08);outline:2px dashed var(--bdr2);outline-offset:-4px;border-radius:4px}
.kanban-card.dragging{opacity:.4;cursor:grabbing}

/* ===== NOTES TAB ===== */
#tab-notes.active{display:flex;flex-direction:column;height:calc(100vh - 52px);overflow:hidden}
#notesContent{display:flex;flex-direction:column;flex:1;overflow:hidden}

/* `.notes-readonly` is a PRE-LOAD state, NOT an access gate (#398, 2026-08-06).
   index.html ships it on #notesContent; initNotes() removes it unconditionally
   with no canEdit() check, and nothing anywhere ever puts it back. So it is
   only ever on during the window between the tab becoming visible and the
   first fetch resolving — when #notesWrap holds the loading skeleton and no
   rows exist yet. The row-level rules below therefore have nothing to match by
   the time rows are rendered; only the toolbar/entry-row ones do real work.
   Marc's call (#398): the Notes grid's inline editors — Status, Type, Noted By
   — stay open to anyone who can open the tracker.
   Widened to the whole tracker 2026-08-08 (#422, ADR 0193): Delete, Batch
   Actions, row selection and EDL import are open too, and js/notes.js now
   contains no canEdit() call at all. There is no access gate on this module.
   Do NOT read these rules as "viewers can't edit." They do not do that — every
   `pointer-events:none` below applies only while the class is still on, i.e.
   before js/notes.js:307 removes it, which happens for every user alike. */
.notes-readonly .ntb-edit-btn{display:none!important}
/* The #notesEditModeIndicator rule that sat here was dead — no such element has
   ever existed in index.html or js/notes.js (the Board's #boardEditModeIndicator
   is a different, live element). Removed 2026-08-08 with #422. */
.notes-readonly .entry-row{display:none!important}
.notes-readonly .icon-btn.del{visibility:hidden;pointer-events:none}
.notes-readonly .tc-display,.notes-readonly .note-display,.notes-readonly .noter-display,.notes-readonly .assign-display{cursor:default;pointer-events:none}
.notes-readonly select.in-sel{pointer-events:none;cursor:default;opacity:.8}
.notes-readonly .cmt-ta{pointer-events:none;cursor:default;background:transparent;resize:none}

/* Board edit mode indicator (hidden until edit mode active) */
#boardEditModeIndicator{display:none}

/* ===== HOME / LANDING PAGE ===== */
#tab-home.active{display:block;overflow-y:auto;height:calc(100vh - 52px)}
#tab-supervisor.active{display:block;overflow-y:auto;height:calc(100vh - 52px)}
.home-wrap{max-width:860px;margin:0 auto;padding:40px 28px 80px}
.home-header{margin-bottom:36px}
.home-logo-type{font-family:'Bebas Neue';font-size:28px;letter-spacing:3px;color:var(--acc)}
.home-logo-type span{font-family:'DM Sans';font-size:13px;color:var(--muted);letter-spacing:1px;margin-left:10px;font-weight:700;vertical-align:middle}
.home-tagline{font-family:'DM Sans';font-size:12px;color:var(--muted);margin-top:6px;letter-spacing:.3px;line-height:1.6}
.home-section-label{font-family:'DM Sans';font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin:28px 0 10px;display:flex;align-items:center;gap:10px}
.home-section-label::after{content:'';flex:1;height:1px;background:var(--bdr)}
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:4px}
.home-card{background:var(--srf);border:1px solid var(--bdr);border-radius:6px;padding:16px;cursor:pointer;transition:all .14s;display:flex;flex-direction:column;gap:6px}
.home-card:hover{border-color:var(--acc2);box-shadow:0 2px 8px rgba(0,0,0,.07);transform:translateY(-1px)}
.home-card-head{font-family:'DM Sans';font-size:13px;font-weight:600;color:var(--acc)}
.home-card-body{font-size:12px;color:var(--dim);line-height:1.5;flex:1}
.home-card-url{font-family:'DM Sans';font-size:10px;color:var(--muted);margin-top:4px}
.home-pin-badge{display:inline-block;font-family:'DM Sans';font-size:9px;letter-spacing:.8px;background:var(--srf2);border:1px solid var(--bdr);border-radius:3px;padding:1px 5px;color:var(--muted);margin-left:3px;vertical-align:middle}
.home-guide{background:var(--srf);border:1px solid var(--bdr);border-radius:6px;padding:22px 24px;margin-top:32px}
.home-guide-title{font-family:'DM Sans';font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.home-guide-steps{padding-left:18px;display:flex;flex-direction:column;gap:8px}
.home-guide-steps li{font-size:12px;color:var(--dim);line-height:1.55}
.home-guide-steps code{font-family:'DM Sans';font-size:10px;background:var(--srf2);padding:1px 5px;border-radius:3px;border:1px solid var(--bdr)}
.home-access-grid{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.home-access-row,.home-access-badge-row{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:var(--dim);line-height:1.5}
.home-access-badge{font-family:'DM Sans';font-size:9px;letter-spacing:.8px;border-radius:3px;padding:2px 7px;white-space:nowrap;border:1px solid;flex-shrink:0;margin-top:1px}
.home-access-badge.open{background:rgba(22,163,74,.16);border-color:var(--green);color:var(--green)}
.home-access-badge.emp{background:rgba(61,56,48,.14);border-color:var(--acc);color:var(--acc)}
.home-access-badge.sup{background:rgba(154,111,46,.16);border-color:var(--acc2);color:var(--acc2)}

/* Notes toolbar (replaces standalone topbar) */
.notes-toolbar{flex-shrink:0;padding:8px 22px;background:var(--srf);border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.notes-toolbar .sel-wrap{display:flex;align-items:center;gap:7px}
.notes-toolbar .sel-lbl{font-family:'DM Sans';font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
select.tbsel{background:var(--srf2);border:1px solid var(--bdr);border-radius:4px;padding:5px 10px;color:var(--txt);font-family:'DM Sans';font-size:12px;cursor:pointer;max-width:260px;outline:none;transition:border-color .12s}
select.tbsel:focus{border-color:var(--acc2)}
select.tbsel:disabled{opacity:.5;cursor:default}
.ntb-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Notes status inline (inside toolbar) — margin-left:auto lives here (not on
   .ntb-right, grill-with-docs 2026-07-22) so the status/progress block and
   the button row form one contiguous group pinned to the right edge, instead
   of the status block floating with a variable gap on wide windows. */
.notes-status-inline{margin-left:auto;display:flex;align-items:center;gap:8px;font-family:'DM Sans';font-size:11px;color:var(--muted);letter-spacing:.4px;padding:0 6px}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex-shrink:0}
.sdot.live{background:var(--green)}
.sdot.err{background:var(--acc3)}
.sdot.spin{background:var(--acc2);animation:pulse 1s infinite}
.spill{background:var(--srf2);border-radius:10px;padding:1px 8px;color:var(--dim)}
.spill.addr{background:rgba(22,163,74,.16);color:var(--green)}
.spill.open{background:rgba(220,38,38,.12);color:var(--acc3)}
.prog{width:56px;height:3px;background:var(--bdr);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;background:var(--green);border-radius:2px;transition:width .3s}

/* Notes filter bar */
/* Wraps, never scrolls (#380). This row used to be overflow-x:auto with no
   flex-wrap, so on a narrow window everything past the linked-Export chips —
   search, all four filter selects, the batch bar — sat off the right edge with
   only a sideways scroll to reach it. A wrapped second line costs a few pixels
   of height; a control nobody can see costs the feature. */
.notes-filters{flex-shrink:0;padding:8px 22px;background:var(--bg);border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:8px;flex-wrap:wrap;row-gap:6px}
/* Batch bar leads the row, and renders at every count (a disabled button at
   zero) so the controls after it don't shift sideways on first selection. */
.notes-batch-bar{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
/* Cut/Export context header (issue #67). Moved 2026-08-05 (#380) from the head
   of .notes-filters up into .notes-toolbar, beside the Cut selector that picks
   it — see the comment on that markup. .notes-cut-header-date keeps its extra
   margin-right on top of the row's own gap. */
.notes-cut-context{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.notes-cut-header{font-family:'DM Sans';font-size:15px;font-weight:700;letter-spacing:.3px;color:var(--acc);white-space:nowrap}
.notes-cut-header-date{font-family:'DM Sans';font-size:11px;color:var(--muted);white-space:nowrap;margin-right:8px}
/* Clickable cut header → Milestone's Export Link (grill-with-docs 2026-07-22)
   — color:inherit keeps the header's normal look at rest; underline is a
   hover-only cue so a linked vs. unlinked cut looks identical until hovered. */
.notes-cut-header-link{color:inherit;text-decoration:none}
.notes-cut-header-link:hover{text-decoration:underline;cursor:pointer}
.fl-lbl{font-family:'DM Sans';font-size:10px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
select.fsel{background:#fff;border:1px solid var(--bdr);border-radius:4px;padding:5px 9px;color:var(--txt);font-family:'DM Sans';font-size:11px;outline:none;cursor:pointer;transition:border-color .12s,box-shadow .12s;max-width:150px;flex-shrink:0}
select.fsel:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,119,6,.12)}
.fsearch-wrap{position:relative;display:inline-flex;align-items:center;flex-shrink:0}
input.fsearch{background:var(--srf);border:1px solid var(--bdr);border-radius:4px;padding:4px 22px 4px 10px;color:var(--txt);font-family:'DM Sans';font-size:12px;outline:none;width:160px;transition:border-color .12s}
input.fsearch::placeholder{color:var(--muted)}
.fsearch-clear-btn{display:none;position:absolute;right:4px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px}
.fsearch-clear-btn:hover{color:var(--acc3)}
input.fsearch:not(:placeholder-shown) ~ .fsearch-clear-btn{display:inline-block}
/* Reusable clearable-search pattern (ADR-0097) — every search field ships a ×
   clear button. Generalizes the Notes .fsearch pattern above: wrap the input in
   a .search-clear-wrap (position:relative) and add a .search-clear-btn sibling;
   the button auto-shows only while the input has text via CSS
   :not(:placeholder-shown), so no JS is needed for its visibility. Give the
   input enough right-padding that text never runs under the ×. */
.search-clear-wrap{position:relative;display:inline-flex;align-items:center}
.search-clear-btn{display:none;position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px}
.search-clear-btn:hover{color:var(--acc3)}
.search-clear-wrap input:not(:placeholder-shown) ~ .search-clear-btn{display:inline-block}
input.fsearch:focus{border-color:var(--acc2)}
.fl-right{margin-left:auto;display:flex;gap:8px}

/* Notes table */
.notes-wrap{flex:1;overflow-y:auto;overflow-x:hidden}
.notes-wrap::-webkit-scrollbar{width:5px}
.notes-wrap::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:3px}
table.ntbl{width:100%;border-collapse:collapse;table-layout:fixed}
.ntbl thead th{background:var(--srf);border-bottom:2px solid var(--bdr2);padding:7px 10px;text-align:left;font-family:'DM Sans';font-size:9.5px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);position:sticky;top:0;z-index:4}
.ntbl tbody tr{border-bottom:1px solid var(--bdr);transition:background .1s}
.ntbl tbody tr:hover{background:var(--srf)}
.ntbl tbody tr.tr-addr{background:rgba(22,163,74,.12)}
.ntbl tbody tr.tr-addr:hover{background:rgba(22,163,74,.20)}
.ntbl tbody tr.tr-ign{opacity:.5}
.ntbl tbody tr.tr-next{opacity:.5;font-style:italic}
.ntbl tbody tr.tr-next .c-stat{opacity:1 !important;font-style:normal}
.ntbl tbody tr.tr-next .in-sel{font-style:normal}
.ntbl tbody tr.tr-addr .note-txt{text-decoration:line-through;opacity:.7}
.ntbl tbody td{padding:8px 10px;vertical-align:top}
.c-sel{width:26px;text-align:center}.c-tc{width:78px;text-align:center}.c-type{width:158px}.c-noter{width:110px;max-width:110px;overflow:hidden}.c-stat{width:168px}.c-del{width:150px;white-space:nowrap;text-align:center}
/* Status cell = ✓ toggle + dropdown (#397, ADR 0180). The <select> is sized
   cell-relative, never in px — .c-stat is the fixed width under
   table-layout:fixed, so flex:1 is what "size to the cell" means here. */
.nt-stat-cell{display:flex;align-items:center;gap:5px}
.nt-stat-cell .in-sel{flex:1 1 auto;min-width:0;width:auto}
.nt-addr-btn{flex-shrink:0;width:24px;height:24px;padding:0;border:1px solid var(--bdr);border-radius:5px;background:#fff;color:var(--bdr2);font-size:13px;line-height:1;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.nt-addr-btn:hover{border-color:var(--green);color:var(--green);background:rgba(22,163,74,.12)}
.nt-addr-btn.on{background:var(--green);border-color:var(--green);color:#fff}
.nt-addr-btn.on:hover{background:#15803d;border-color:#15803d;color:#fff}
/* Deliberately NO `.notes-readonly .nt-addr-btn` rule — see the note by that
   block above. It could never match (the button only exists in rendered rows,
   which only exist after the class is gone) and would read as an access gate
   this app does not have on the Notes grid's inline editors (#398). */
/* The selection column belongs to Batch Actions, not to check-off — it stays quiet
   until you reach for it so the green ✓ beside the note is the obvious way to
   mark a note done (#397). Full opacity on hover, once ticked, or once any
   selection is live (.sel-active); the header box never dims, so the column
   stays discoverable. */
.c-sel input{opacity:.5;transition:opacity .12s}
.ntbl thead .c-sel input,.ntbl.sel-active .c-sel input,.c-sel input:checked,.ntbl tbody tr:hover .c-sel input{opacity:1}
/* Del column header label (grill-with-docs 2026-07-22) — mirrors trackers.js's
   "EDIT | DUP | DEL" header-label-over-icon-buttons pattern; smaller font +
   tighter letter-spacing than the default th styling so 19 characters fits
   the existing 118px column (Del column width intentionally NOT trimmed for
   the Note-column badge space below — it needs the room for this label). */
.c-del-lbl{font-size:7px;letter-spacing:.3px}
.tc-val{font-family:'DM Sans';font-size:12px;font-weight:500;color:var(--acc2);padding-top:1px}
.note-txt{line-height:1.55;color:var(--txt);white-space:pre-wrap;word-break:break-word}
.noter-text{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-size:11px;font-weight:500;color:var(--dim);cursor:pointer}
.noter-text:hover{color:var(--txt)}
.noter-text.noter-empty{color:var(--muted);font-weight:400}
.noter-wrap,.tc-wrap,.note-wrap{position:relative}
/* Note-text edit barrier (#113): the note text is NOT directly editable. Clicking
   it arms the row (adds .pencil-armed via _notesArmPencil), revealing a pencil to
   the LEFT of the comment/assign badges (right:112px clears the badges' 96px-max
   cluster — verified in-browser against every note, 0 overlaps); a second click on
   the pencil opens the editor. NOT hover-based (a stray hover shouldn't offer an
   edit) and deliberately clear of the badges — an earlier pass put it at the top-
   right ON TOP of the badges, where it was occluded/unclickable. z-index:6 keeps
   it above the badges (z-index:2) but far below any overlay tier. Hidden in
   read-only (clicking .note-display is already a no-op there — see line ~483). */
.note-edit-pencil{display:none}
.note-wrap.pencil-armed .note-edit-pencil{display:inline-flex;align-items:center;justify-content:center;position:absolute;top:1px;right:112px;width:26px;height:22px;padding:0;z-index:6;background:var(--srf);border:1px solid var(--bdr2);border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.15);color:var(--txt);font-size:13px}
.notes-readonly .note-edit-pencil{display:none}
.noter-edit{padding:2px 0}
.noter-txt-inp{width:100%;background:var(--srf2);border:1px solid var(--bdr);border-radius:4px;padding:3px 7px;font-size:11px;font-family:'DM Sans';color:var(--txt);outline:none}
.noter-txt-inp:focus{border-color:var(--acc2)}
.assign-wrap{position:relative}
.assign-edit{padding:2px 0}
.in-sel{width:100%;border:1px solid transparent;border-radius:4px;font-size:11px;font-weight:600;font-family:'DM Sans';padding:3px 6px;cursor:pointer;background:transparent;color:var(--dim);transition:border-color .12s}
.in-sel:hover,.in-sel:focus{border-color:var(--bdr);outline:none;background:var(--srf2)}
.s-not{color:var(--acc3);background:rgba(220,38,38,.12)}
.s-next{color:var(--acc2);background:rgba(154,111,46,.12)}
.s-addr{color:var(--green);background:rgba(22,163,74,.12)}
.s-ign{color:var(--muted);background:var(--srf)}
.s-none{color:var(--muted)}
.cmt-ta{width:100%;background:transparent;border:none;border-bottom:1px solid transparent;color:var(--dim);font-size:11px;font-family:'DM Sans';resize:none;min-height:16px;line-height:1.45;padding:1px 0;transition:border-color .12s}
.cmt-ta:focus{outline:none;border-bottom-color:var(--acc2);color:var(--txt)}

/* Note comment threads (brief-script-editor-notes-tracker-weave.md) —
   replaces the old free-text Comments cell; same visual pattern as Script
   Editor's own 💬 comment button/thread row (tools/script-editor.html). */
.note-thread-btn-open{color:var(--acc2);border-color:var(--bdr)}
.note-thread-row td{padding:0}
/* Capped width (grill-with-docs 2026-07-20, docs/adr/0071) instead of
   stretching the full table — mirrors Script Editor's .se-comment-panel. */
.note-thread-panel{background:var(--srf);border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);padding:8px 14px;display:flex;flex-direction:column;gap:6px;max-width:640px}
.note-thread-hide-btn{align-self:flex-start;font-size:10.5px;color:var(--muted);background:none;border:none;cursor:pointer;padding:0}
.note-thread-hide-btn:hover{color:var(--txt)}
.note-reply-item{background:#fff;border:1px solid var(--srf2);border-radius:5px;padding:6px 9px}
.note-reply-meta{font-size:10px;color:var(--muted);margin-bottom:2px;display:flex;align-items:center;gap:6px}
.note-reply-edit-btn{margin-left:auto;padding:1px 5px;font-size:11px}
.note-reply-delete-btn{padding:1px 5px;font-size:11px}
.note-reply-edited{font-style:italic}
.note-reply-text{font-size:11.5px;color:var(--txt);white-space:pre-wrap;word-break:break-word}
.note-reply-editing textarea{width:100%;font:inherit;font-size:11.5px;padding:4px 6px;border:1px solid var(--bdr);border-radius:4px;resize:vertical;margin-top:2px}
.note-reply-edit-actions{display:flex;gap:4px;margin-top:4px}
.note-reply-edit-actions .icon-btn{padding:1px 7px;font-size:12px}
.note-reply-save-btn:hover{color:var(--green);border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.10)}
.note-reply-cancel-btn:hover{color:var(--acc3);border-color:rgba(220,38,38,.35);background:rgba(220,38,38,.10)}
.note-thread-add{display:flex;gap:6px;align-items:flex-start}
.note-thread-add textarea{flex:1;font-family:'DM Sans';font-size:11.5px;padding:5px 8px;border:1px solid var(--bdr2);border-radius:4px;resize:none;min-height:28px}

/* Note row badges (grill-with-docs 2026-07-20, docs/adr/0071) — replaces the
   old dedicated Comments/Assigned To columns; 💬 count + 👤 assignee
   initials float into the corner of the Note cell (grill-with-docs
   2026-07-22 — was an inline row under the Note text, which forced a mostly-
   empty second line under every note) so text wraps around them instead.
   Must render BEFORE the note text in the row template — floats only affect
   content that follows them in source order. */
.nt-note-badges{float:right;position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;align-items:center;max-width:96px;margin:1px 0 4px 8px}
.nt-badge{font-size:10.5px;color:var(--muted);background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;padding:1px 4px;font-family:'DM Sans';transition:border-color .12s,background .12s}
.nt-badge:hover{color:var(--txt);border-color:var(--bdr2);background:var(--srf2)}
.nt-assignee-badge{display:inline-flex;align-items:center;gap:2px}

/* Assign-to checkbox multi-select in the reply composer (ADR-0083, issue
   #66) — reuses the ms-wrap/ms-trigger/ms-panel/ms-item base classes
   (js/staff.js), just constrained to the reply composer's row width. */
.nt-assign-mswrap{width:170px;flex-shrink:0}
.nt-assign-trigger{font-size:11.5px;padding:5px 8px}

/* Notify This Note (ADR-0080, issue #56) — icon-only button next to the
   Assign to… widget; only rendered when the Note has ≥1 assignee. Panel
   uses the same detach-to-body/position:fixed shape as the Assign panel
   above, so no positioning CSS is needed here beyond flex-shrink on the
   trigger's wrapper. */
.nt-notify-wrap{flex-shrink:0}

/* Pending-assignment cue (grill-with-docs 2026-07-22) — the assignee PATCH
   only fires on Post (_notesAddReply), same click as posting the reply
   text; these mark a checked-but-not-yet-posted selection as staged so
   it's clear the box alone hasn't saved anything yet. Cleared automatically
   once Post succeeds and the row re-renders. Amber matches the existing
   input focus-glow convention for "needs attention." */
.nt-assign-dirty .nt-assign-trigger{outline:2px solid var(--amber);outline-offset:-1px}
.nt-post-pending{box-shadow:0 0 0 2px var(--amber)}

/* Linked Script section (ADR-0066, issue #11) — per-note collapsible view of
   its linked Script Lines, replacing the old flat _renderScriptComments()
   panel. Same visual shape as the comment thread panel above it. */
.note-script-row td{padding:0}
.note-script-panel{background:var(--srf);border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);padding:8px 14px;display:flex;flex-direction:column;gap:6px}
.note-script-line-item{background:#fff;border:1px solid var(--srf2);border-radius:5px;padding:6px 9px}
.note-script-line-meta{font-size:10px;color:var(--muted);margin-bottom:2px}
.note-script-line-text{font-size:11.5px;color:var(--txt);white-space:pre-wrap;word-break:break-word}
.note-script-line-open{color:var(--acc2);text-decoration:none;font-weight:600}
.note-script-line-open:hover{text-decoration:underline}
/* ⧉ Copy timecode + note text (#431). Reveals on ROW HOVER, unlike the edit
   pencil which reveals on CLICK (.pencil-armed) — that difference is the point:
   Marc asked for this to be "aware of the pencil edit button (on click)", so
   copying never costs you a click that might arm an edit.

   It takes the SAME slot as the pencil (right:112px) and hides once the pencil
   is armed, so at most ONE button ever sits over the note text — exactly as
   before this feature existed. Marc asked for somewhere "clean on the line";
   a second floating button covering more of the first line is not that, and
   the note cell has no genuinely free space (.c-del is a fixed 150px already
   holding five buttons). Trade: you can't copy while a row is armed for
   editing — click away to disarm. */
.note-copy-btn{display:none}
.note-wrap:hover:not(.pencil-armed) .note-copy-btn{
  display:inline-flex;align-items:center;justify-content:center;position:absolute;
  top:1px;right:112px;width:26px;height:22px;padding:0;z-index:6;
  background:var(--srf);border:1px solid var(--bdr2);border-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.15);color:var(--txt);font-size:12px;
}
.note-copy-btn.ok{color:var(--green);border-color:var(--green)}
/* Deliberately NO `.notes-readonly .note-copy-btn` rule — same reasoning as
   .nt-addr-btn above (#398): it would read as an access gate this app does not
   have, and .notes-readonly never coexists with rendered rows anyway. */

/* The → that reveals a second timecode box for a span in the Add Note row (#430) */
.nt-span-toggle{
  flex-shrink:0;width:22px;height:24px;padding:0;line-height:1;cursor:pointer;
  border:1px solid var(--bdr);border-radius:4px;background:#fff;color:var(--muted);font-size:11px;
}
.nt-span-toggle:hover{background:var(--srf2);color:var(--txt)}
.nt-span-toggle.on{background:var(--amber);border-color:var(--amber);color:#fff}
.nt-span-dash{color:var(--muted);font-size:12px;flex-shrink:0}
/* The two timecode boxes must not be the first things to squeeze now that the
   Add Note row carries three more elements — .nt-span-toggle/.nt-span-dash
   already refuse to shrink, which would otherwise push the squeeze onto these. */
.entry-row .tc-inp{flex-shrink:0}

/* "by Jane Doe" / "edited by Jane Doe" attribution lines (#428). Deliberately
   the quietest text in the row — it answers "who?" when you go looking, and
   must not compete with the note itself. No margin-top on the status one: it
   sits directly under the dropdown as a caption, not as a separate row. */
.nt-by-line{font-size:9px;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
.nt-status-by:empty{display:none}
.nt-status-by{margin-top:2px}
.nt-edited-by{margin-top:2px;font-style:italic}

/* Uncleared tracked changes on a linked line (#427). Same dusty-red strike /
   bold green insert vocabulary the Script Editor cell uses (.se-diff-del /
   .se-diff-ins in tools/script-editor.html) — the two views render the same
   change, so they have to look like the same thing. Own class names because
   this stylesheet and the tool page share no CSS. */
.nt-diff-del{color:#C4948E;text-decoration:line-through;font-size:91%}
.nt-diff-ins{color:#137333;font-weight:700}
.nt-line-tracked{border-left:3px solid var(--amber)}
.nt-line-tracked-meta{font-size:10px;color:var(--muted);margin-top:3px}
.nt-line-pending-delete{border-left:3px solid var(--acc3)}
.nt-line-pending-delete .note-script-line-text{text-decoration:line-through;opacity:.55}

/* Notes entry row */
.entry-row{flex-shrink:0;border-top:2px solid var(--bdr2);background:var(--srf);display:flex;align-items:center;gap:7px;padding:8px 14px}
.entry-cut{font-family:'DM Sans';font-size:11px;font-weight:500;color:var(--acc2);white-space:nowrap;letter-spacing:.3px}
.entry-div{width:1px;height:16px;background:var(--bdr);flex-shrink:0;margin:0 4px}
.entry-lbl{font-family:'DM Sans';font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);white-space:nowrap;margin-right:2px}
input.tc-inp{width:62px;font-family:'DM Sans';font-size:12px;font-weight:500;color:var(--acc2);background:var(--srf2);border:1px solid var(--bdr);border-radius:4px;padding:5px 7px;text-align:center;letter-spacing:1px;outline:none}
input.tc-inp:focus{border-color:var(--acc2)}
input.note-inp{flex:1;font-family:'DM Sans';font-size:12px;color:var(--txt);background:var(--srf2);border:1px solid var(--bdr);border-radius:4px;padding:5px 9px;outline:none}
input.note-inp:focus{border-color:var(--acc2)}

/* Notes tracker — linked Exports cluster (grill-with-docs 2026-07-22 — was its
   own standalone row with its own border/padding/background, shown any time a
   cut was selected even with zero exports linked; folded into an existing row
   to reclaim that near-empty row's vertical space). No border/padding/
   background of its own — the host row already provides all three. It now
   lives inside .notes-cut-context on .notes-toolbar rather than in
   .notes-filters (#380).
   flex-shrink is deliberately NOT 0 here: this is the widest, most variable
   thing on the row (one chip per linked export), and pinning it at its
   intrinsic width is exactly what pushed the rest of the old row off-screen.
   It shrinks, and .exp-chips-wrap wraps its chips inside. */
.notes-exports-row{display:flex;align-items:center;gap:8px;min-width:0}
.exp-chips-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.exp-link-item{display:inline-flex;align-items:center;gap:4px;font-family:'DM Sans';font-size:11px;color:var(--dim)}
.exp-chip-x{cursor:pointer;color:var(--muted);font-size:12px;line-height:1;padding:1px 4px;border-radius:50%}
.exp-chip-x:hover{color:var(--acc3);background:rgba(220,38,38,.12)}
/* Capped like the .fsel/.tbsel selects elsewhere in this module — native
   auto-sizing on a <select> otherwise sizes to its widest option (export
   Slate Text + date can run long), which used to push past the search box
   that then sat next to it (the search has since moved down a row, #380 —
   the cap is still what keeps this select from dominating the toolbar). */
.exp-link-add-sel{flex-shrink:0;max-width:200px;font-family:'DM Sans';font-size:11px;color:var(--txt);background:var(--srf2);border:1px solid var(--bdr);border-radius:4px;padding:4px 8px;outline:none}
.exp-link-add-sel:focus{border-color:var(--acc2)}
.noter-sel{background:var(--srf2);border:1px solid var(--bdr);border-radius:4px;padding:5px 9px;color:var(--txt);font-family:'DM Sans';font-size:12px;width:150px;outline:none}

/* Notes empty state */
.notes-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:70px 20px;color:var(--muted);text-align:center}
.notes-empty-h{font-family:'Bebas Neue';font-size:20px;letter-spacing:2px;color:var(--dim)}
.notes-empty-s{font-size:12px;max-width:300px;line-height:1.7}

/* Notes modals */
.itabs{display:flex;gap:2px;background:var(--srf2);border-radius:5px;padding:3px;margin-bottom:16px}
.itab{flex:1;padding:7px;text-align:center;border-radius:3px;font-size:12px;cursor:pointer;color:var(--muted);transition:all .12s}
.itab.on{background:var(--bg);color:var(--txt);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.itab-panel{display:none}.itab-panel.on{display:block}
.fgrp{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.flbl{font-family:'DM Sans';font-size:9.5px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
textarea.mta,input.minp{width:100%;background:#fff;border:1px solid var(--bdr);border-radius:4px;padding:9px 11px;color:var(--txt);font-family:'DM Sans';font-size:13px;outline:none;resize:vertical;transition:border-color .12s,box-shadow .12s}
textarea.mta:focus,input.minp:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,119,6,.12)}
input.minp{font-family:'DM Sans';font-size:13px;resize:none}
.drop-z{border:2px dashed var(--bdr);border-radius:4px;padding:24px 20px;text-align:center;color:var(--muted);cursor:pointer;transition:all .12s;margin-bottom:10px;font-size:12px}
.drop-z:hover,.drop-z.drag{border-color:var(--acc2);background:rgba(154,111,46,.08)}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;font-family:'DM Sans';margin:10px 0}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--bdr)}
.info-box{background:var(--srf2);border:1px solid var(--bdr);border-radius:4px;padding:9px 12px;font-size:11px;font-family:'DM Sans';color:var(--dim);line-height:1.65;margin-bottom:14px}
.col-map{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.prev-wrap{max-height:160px;overflow-y:auto;border:1px solid var(--bdr);border-radius:4px;margin-top:10px}
table.ptbl{width:100%;border-collapse:collapse;font-size:11px}
.ptbl th{background:var(--srf2);padding:5px 8px;text-align:left;color:var(--muted);font-family:'DM Sans';font-size:10px;position:sticky;top:0}
.ptbl td{padding:4px 8px;border-bottom:1px solid var(--bdr);color:var(--dim);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptbl tr:last-child td{border:none}
.preset-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:14px}
.preset{padding:7px 4px;background:var(--srf2);border:1px solid var(--bdr);border-radius:4px;text-align:center;cursor:pointer;font-family:'Bebas Neue';font-size:13px;letter-spacing:1px;color:var(--dim);transition:all .12s}
.preset:hover,.preset.sel{border-color:var(--acc2);color:var(--acc2);background:rgba(154,111,46,.12)}

/* ===================== SUPERVISOR LAYOUT ===================== */
.sv-layout{display:flex;align-items:flex-start;min-height:calc(100vh - 120px)}
.sv-sidebar{width:180px;flex-shrink:0;border-right:1px solid var(--bdr);background:var(--srf);padding:20px 0;position:sticky;top:0;align-self:flex-start}
.sv-sidebar-head{font-family:'Bebas Neue';font-size:18px;letter-spacing:2px;color:var(--acc);padding:0 18px 10px;border-bottom:1px solid var(--bdr);margin-bottom:10px}
.sv-nav{display:flex;flex-direction:column;gap:2px;padding:0 8px}
.sv-header-link{display:block;font-family:'DM Sans',sans-serif;font-size:11px;color:var(--muted,#6a6359);text-decoration:none;margin-top:6px;letter-spacing:0.04em}
.sv-header-link:hover{color:var(--acc3,#dc2626);text-decoration:underline}
.sv-header-link.active{color:var(--acc3,#dc2626)}
.sv-nav-item{background:none;border:none;text-align:left;padding:9px 12px;border-radius:5px;font-family:'DM Sans';font-size:12px;color:var(--dim);cursor:pointer;transition:all .12s;width:100%}
.sv-nav-item:hover{background:var(--srf2);color:var(--txt)}
.sv-nav-item.active{background:rgba(217,119,6,.10);color:var(--acc);font-weight:600;border-left:3px solid var(--amber);padding-left:9px}

.sv-main{flex:1;padding:28px 32px 40px;min-width:0}
.sv-panel-head{font-family:'Bebas Neue';font-size:26px;letter-spacing:2px;color:var(--acc);margin-bottom:4px}
.sv-panel-sub{font-family:'DM Sans';font-size:12px;color:var(--muted);margin-bottom:20px}

/* ===================== TOOLS LAYOUT (mirrors Supervisor layout, kept separate so showSvPanel()'s document-wide .sv-panel query doesn't touch these) ===================== */
.tl-layout{display:flex;align-items:stretch;min-height:calc(100vh - 120px)}
.tl-sidebar{width:180px;flex-shrink:0;border-right:1px solid var(--bdr);background:var(--srf);padding:20px 0;position:sticky;top:0;align-self:flex-start}
.tl-sidebar-head{font-family:'Bebas Neue';font-size:18px;letter-spacing:2px;color:var(--acc);padding:0 18px 10px;border-bottom:1px solid var(--bdr);margin-bottom:10px}
.tl-nav{display:flex;flex-direction:column;gap:2px;padding:0 8px}
.tl-nav-item{background:none;border:none;text-align:left;padding:9px 12px;border-radius:5px;font-family:'DM Sans';font-size:12px;color:var(--dim);cursor:pointer;transition:all .12s;width:100%}
.tl-nav-item:hover{background:var(--srf2);color:var(--txt)}
.tl-nav-item.active{background:rgba(217,119,6,.10);color:var(--acc);font-weight:600;border-left:3px solid var(--amber);padding-left:9px}
.tl-beta-tag{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.04em;padding:1px 5px;border-radius:3px;background:rgba(220,38,38,.12);color:var(--acc3);vertical-align:middle;margin-left:2px}
.tl-main{flex:1;display:flex;min-width:0}
.tl-main iframe{flex:1;display:block;width:100%;border:none;min-height:calc(100vh - 120px)}
.tl-empty{font-family:'DM Sans';font-size:12px;color:var(--muted);padding:32px;text-align:center;flex:1}
/* SCRIPT tab's Editor/Assist pills (ADR-0068, ticket #28) — visually matches
   the pre-split Footage tracker's .ftg-subtabs pattern (git show
   a3b77b6~1:css/hub.css) rather than inventing new sub-tab styling; that
   pattern's own CSS was removed from this file when Footage/Transcripts
   split into separate top-level tabs, so it's recreated here under
   SCRIPT-specific names rather than reusing the (now-gone) .ftg- classes. */
.script-subtabs{display:flex;gap:6px;margin:0 16px 16px;padding:10px 0 8px;border-bottom:1px solid var(--bdr)}
.script-subtab{background:none;border:none;font-family:'DM Sans';font-size:13px;color:var(--muted);cursor:pointer;padding:5px 12px;border-radius:4px;transition:all .12s}
.script-subtab:hover{background:var(--srf);color:var(--txt)}
.script-subtab.active{background:var(--srf2);color:var(--txt);font-weight:600}
/* Research tracker's Asset Type sub-tabs (#337). Reuses the .script-subtabs
   look above rather than inventing a third sub-tab style — see that block's
   note about .ftg-subtabs being the original. Difference: a count badge, and
   tighter vertical padding because this strip sits between a toolbar and a
   grid rather than above a full-page iframe. */
.res-subtabs{display:flex;gap:6px;align-items:center;padding:7px 22px 8px;border-bottom:1px solid var(--bdr);flex-shrink:0}
.res-subtab{display:flex;align-items:center;gap:6px;background:none;border:none;font-family:'DM Sans';font-size:12px;color:var(--muted);cursor:pointer;padding:4px 11px;border-radius:4px;transition:all .12s}
.res-subtab:hover{background:var(--srf);color:var(--txt)}
.res-subtab.active{background:var(--srf2);color:var(--txt);font-weight:600}
.res-subtab-n{font-size:10px;color:var(--muted);background:rgba(0,0,0,.06);border-radius:8px;padding:1px 6px;min-width:18px;text-align:center}
.res-subtab.active .res-subtab-n{background:rgba(217,119,6,.16);color:var(--acc)}
/* 160px vs. .tl-main's 120px — the extra 40px accounts for .script-subtabs'
   own height (pill row + its padding/border) sitting above the frame. */
.tab-script-frames{min-height:calc(100vh - 160px)}
.tab-script-frames iframe{display:block;width:100%;border:none;min-height:calc(100vh - 160px)}

.sv-section-head{font-family:'DM Sans';font-size:10px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.sv-loading{font-family:'DM Sans';font-size:12px;color:var(--muted);padding:32px 0;text-align:center}
.sv-empty{font-family:'DM Sans';font-size:12px;color:var(--muted);padding:24px 0;text-align:center}

/* Supervisor tables */
.sv-tbl-actions{display:flex;gap:8px;margin-bottom:12px}
.sv-tbl-scroll{overflow-x:auto;border:1px solid var(--bdr);border-radius:5px}
#pdir-table-wrap .sv-tbl-scroll{border:none;border-radius:0;overflow:visible}
#pdir-table-wrap{overflow:auto;max-height:calc(100vh - 220px)}
#pdir-filters{position:sticky;top:0;z-index:10;background:var(--bg);padding-bottom:8px}
.sv-tbl{width:100%;border-collapse:collapse;font-size:12px}
.sv-tbl thead tr{background:var(--srf2)}
.sv-tbl th{padding:8px 11px;text-align:left;font-family:'DM Sans';font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);white-space:nowrap;border-bottom:1px solid var(--bdr);position:sticky;top:0;z-index:3;background:var(--srf2)}
.sv-tbl td{padding:7px 11px;border-bottom:1px solid var(--bdr);color:var(--dim);vertical-align:middle;word-break:break-word;overflow-wrap:anywhere}
.sv-tbl tbody tr:last-child td{border-bottom:none}
.sv-tbl tbody tr:hover td{background:var(--srf2)}
.sv-tbl tbody tr:nth-child(even) td{background:rgba(255,255,255,.55)}
.sv-tbl tbody tr:nth-child(even):hover td{background:var(--srf2)}
.sv-tbl-compact{font-size:10px}
.sv-tbl-compact th{padding:5px 8px}
.sv-tbl-compact td{padding:4px 8px}
.sv-icon-btn{padding:2px 6px;font-size:14px;line-height:1}
/* ⎘ (U+2398) renders much smaller than ✎/🗑 at the same font-size — those are
   a well-supported text symbol and a full-color emoji respectively, while ⎘ is
   an obscure symbol most fonts draw thin and small. 2x base size to match. */
.sv-icon-btn-dup{font-size:28px}

/* PIN Manager */
.sv-add-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.sv-mod-checks{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:4px}
.sv-mod-check{display:flex;align-items:center;gap:5px;font-family:'DM Sans';font-size:12px;color:var(--dim);cursor:pointer;white-space:nowrap}
.sv-mod-check input{accent-color:var(--acc2);width:14px;height:14px;cursor:pointer}
.ms-wrap{position:relative}
.ms-trigger{width:100%;text-align:left;background:var(--srf);border:1px solid var(--bdr);border-radius:4px;padding:6px 10px;font-family:'DM Sans';font-size:13px;color:var(--txt);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:6px}
.ms-trigger:hover{border-color:var(--dim)}
.ms-lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-caret{font-size:10px;color:var(--muted);flex-shrink:0}
.ms-panel{position:absolute;top:calc(100% + 2px);left:0;right:0;background:var(--srf);border:1px solid var(--bdr);border-radius:4px;z-index:200;max-height:220px;overflow-y:auto;box-shadow:0 4px 16px rgba(0,0,0,.12);overscroll-behavior:contain}
.ms-item{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer;font-family:'DM Sans';font-size:12px;color:var(--dim)}
.ms-item:hover{background:var(--srf2)}
.ms-item input{accent-color:var(--acc2);width:13px;height:13px;cursor:pointer;flex-shrink:0}
.ms-item-custom{cursor:default}
.ms-item-custom:hover{background:none}
.ms-item input.ms-custom-input{width:auto;height:auto;accent-color:unset;flex:1;min-width:0;padding:4px 6px;font-size:11px;font-family:'DM Sans';border:1px solid var(--bdr);border-radius:3px;box-sizing:border-box;cursor:text}
.sv-pin-code{font-family:'DM Sans';font-size:13px;font-weight:600;color:var(--acc2);background:var(--srf2);border:1px solid var(--bdr);border-radius:3px;padding:2px 7px;letter-spacing:2px}
.sv-pin-tbl td{vertical-align:middle}
.sv-del-btn{padding:4px 10px;font-size:11px;color:var(--acc3) !important;border-color:var(--acc3) !important}
.sv-del-btn:hover{background:rgba(220,38,38,.10) !important}

/* ===================== INVOICE LOG ===================== */
.inv-setup{max-width:480px}
.inv-stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.inv-stat-card{background:var(--srf2);border:1px solid var(--bdr);border-radius:6px;padding:12px 16px;min-width:100px}
.inv-stat-num{font-family:'Bebas Neue';font-size:22px;letter-spacing:1px;color:var(--txt);line-height:1}
.inv-stat-lbl{font-family:'DM Sans';font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:3px}
.inv-filters{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px}
.inv-filter-chip{display:inline-block;font-family:'DM Sans';font-size:10px;letter-spacing:.6px;text-transform:uppercase;border-radius:14px;padding:5px 11px;border:1px solid;cursor:pointer;background:transparent;transition:background .12s,border-color .12s,color .12s}
.inv-filter-chip.inv-filter-all      {color:var(--dim);border-color:var(--bdr)}
.inv-filter-chip.inv-filter-submitted{color:var(--blue);border-color:rgba(37,99,235,.45)}
.inv-filter-chip.inv-filter-received {color:var(--violet);border-color:rgba(124,58,237,.45)}
.inv-filter-chip.inv-filter-approved {color:var(--amber);border-color:rgba(217,119,6,.45)}
.inv-filter-chip.inv-filter-paid     {color:var(--green);border-color:rgba(22,163,74,.45)}
.inv-filter-chip.inv-filter-disputed {color:var(--acc3);border-color:rgba(220,38,38,.45)}
.inv-filter-chip.inv-filter-overdue  {color:var(--acc3);border-color:rgba(220,38,38,.55);font-weight:600}
.inv-filter-chip.inv-filter-all.active     {background:rgba(154,111,46,.16);border-color:var(--acc2);color:var(--acc2);font-weight:600}
.inv-filter-chip.inv-filter-submitted.active{background:rgba(37,99,235,.14);border-color:var(--blue);font-weight:600}
.inv-filter-chip.inv-filter-received.active {background:rgba(124,58,237,.14);border-color:var(--violet);font-weight:600}
.inv-filter-chip.inv-filter-approved.active {background:rgba(217,119,6,.14);border-color:var(--amber);font-weight:600}
.inv-filter-chip.inv-filter-paid.active     {background:rgba(22,163,74,.14);border-color:var(--green);font-weight:600}
.inv-filter-chip.inv-filter-disputed.active {background:rgba(220,38,38,.14);border-color:var(--acc3);font-weight:600}
.inv-filter-chip.inv-filter-overdue.active  {background:rgba(220,38,38,.20);border-color:var(--acc3);font-weight:700}
.inv-status-chip{display:inline-block;padding:2px 8px;border-radius:12px;font-family:'DM Sans';font-size:10.5px;font-weight:600;white-space:nowrap}
.inv-file-link{color:var(--acc2);font-family:'DM Sans';font-size:11px;text-decoration:none}
.inv-file-link:hover{text-decoration:underline}

/* Invoice form overlay */
.inv-form-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:400;align-items:center;justify-content:center}
.inv-form-overlay.open{display:flex}
.inv-form-card{background:var(--bg);border:1px solid var(--bdr2);border-radius:8px;width:min(620px,96vw);max-height:90vh;overflow-y:auto;padding:24px 26px;box-shadow:0 8px 32px rgba(0,0,0,.3)}
.inv-form-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;font-family:'DM Sans';font-size:14px;font-weight:600;color:var(--txt)}
.inv-form-close{background:none;border:none;font-size:18px;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:3px;line-height:1;transition:color .12s}
.inv-form-close:hover{color:var(--acc3)}

/* ===================== WORK ENTRY FORM ===================== */
.we-wrap{max-width:660px;margin:0 auto;padding:28px 20px 48px}
.we-week-nav{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.we-week-label{flex:1;text-align:center;font-family:'DM Sans';font-size:14px;font-weight:600;color:var(--txt)}
.we-person-bar{margin-bottom:20px}
.we-section-head{font-family:'DM Sans';font-size:10px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.we-days{display:flex;flex-direction:column;gap:0;border:1px solid var(--bdr);border-radius:6px;overflow:hidden;margin-bottom:24px}
.we-day-row{border-bottom:1px solid var(--bdr)}
.we-day-row:last-child{border-bottom:none}
.we-day-hd{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--srf);transition:background .12s}
.we-day-row.we-day-active .we-day-hd{background:rgba(154,111,46,.10)}
.we-check-lbl{display:flex;align-items:center;gap:8px;cursor:pointer;flex:1}
.we-check-lbl input{accent-color:var(--acc2);width:16px;height:16px;cursor:pointer;flex-shrink:0}
.we-day-name{font-family:'DM Sans';font-size:13px;font-weight:600;color:var(--dim)}
.we-day-date{font-family:'DM Sans';font-size:11px;color:var(--muted);margin-left:auto}
.we-day-body{padding:0 14px 14px 38px}
.we-invoice-section{margin-bottom:20px}
.we-invoice-grid{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.we-drop-zone{border:2px dashed var(--bdr);border-radius:5px;padding:12px 16px;cursor:pointer;font-family:'DM Sans';font-size:12px;color:var(--muted);transition:all .12s;text-align:center}
.we-drop-zone:hover,.we-drop-zone.drag{border-color:var(--acc2);background:rgba(154,111,46,.08)}
.we-drop-zone.we-has-file{border-color:var(--green);color:var(--green)}
.we-footer{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--bdr)}

/* ===================== ONBOARDING WIZARD ===================== */
.ob-home{max-width:620px}
.ob-home-title{font-family:'Bebas Neue';font-size:22px;letter-spacing:2px;color:var(--acc);margin-bottom:18px}
.ob-flow-cards{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;margin-bottom:20px;align-items:center}
.ob-flow-arrow{display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--acc2);line-height:1;user-select:none}
.ob-card{background:var(--srf2);border:1px solid var(--bdr);border-radius:7px;padding:18px 16px;cursor:pointer;transition:all .14s}
.ob-card:hover{border-color:var(--acc2);background:rgba(154,111,46,.10)}
.ob-card-icon{font-size:22px;margin-bottom:8px}
.ob-card-label{font-family:'DM Sans';font-size:13px;font-weight:600;color:var(--txt);margin-bottom:6px}
.ob-card-sub{font-size:11px;color:var(--muted);line-height:1.6}
.ob-explainer{background:var(--srf2);border:1px solid var(--bdr);border-radius:6px;padding:14px 16px}
.ob-explainer-title{font-family:'DM Sans';font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ob-explainer-row{font-size:11.5px;color:var(--dim);line-height:1.65;margin-bottom:8px}
.ob-explainer-row:last-child{margin-bottom:0}

.ob-wizard{max-width:580px}
.ob-breadcrumb{display:flex;align-items:center;gap:6px;margin-bottom:18px}
.ob-crumb{font-family:'DM Sans';font-size:11px;color:var(--muted);padding:3px 8px;border-radius:3px}
.ob-crumb.active{color:var(--acc2);background:rgba(154,111,46,.14);font-weight:600}
.ob-crumb.done{color:var(--green)}
.ob-crumb-sep{color:var(--bdr);font-size:14px}
.ob-step-title{font-family:'DM Sans';font-size:14px;font-weight:600;color:var(--txt);margin-bottom:18px}
.ob-step-optional{font-size:11px;color:var(--muted);font-weight:400;margin-left:6px}
.ob-section{margin-bottom:20px}
.ob-section-label{font-family:'DM Sans';font-size:10px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid var(--bdr)}
.ob-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ob-type-row{display:flex;gap:20px;margin-bottom:14px}
.ob-radio{display:flex;align-items:center;gap:6px;font-family:'DM Sans';font-size:12px;color:var(--dim);cursor:pointer}
.ob-radio input{accent-color:var(--acc2);cursor:pointer}
.ob-hint{font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.ob-text-btn{background:none;border:none;color:var(--acc2);font-size:11px;font-family:'DM Sans';cursor:pointer;padding:0;text-decoration:underline}
.ob-check-label{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-family:'DM Sans';font-size:12px;color:var(--dim)}
.ob-check-label input{margin-top:2px;accent-color:var(--acc2);cursor:pointer}
.ob-ms-wrap{position:relative}
.ob-ms-opt{display:flex;align-items:center;gap:7px;padding:5px 10px;font-family:'DM Sans';font-size:12px;color:var(--dim);cursor:pointer;user-select:none}
.ob-ms-opt:hover{background:var(--bg3)}
.ob-ms-opt input{accent-color:var(--acc2);cursor:pointer;flex-shrink:0}
.ob-footer{display:flex;gap:8px;padding-top:16px;border-top:1px solid var(--bdr);margin-top:8px}
.ob-success-banner{display:flex;align-items:flex-start;gap:10px;background:rgba(22,163,74,.10);border:1px solid rgba(22,163,74,.30);border-radius:5px;padding:12px 14px;margin-bottom:18px;font-size:12px;color:var(--dim);line-height:1.6}
.ob-success-icon{font-size:16px;color:var(--green);flex-shrink:0;margin-top:2px}
.ob-done{display:flex;flex-direction:column;align-items:center;padding:48px 0;text-align:center;gap:14px}
.ob-done-icon{font-size:32px;color:var(--green)}
.ob-done-msg{font-family:'DM Sans';font-size:13px;color:var(--dim);max-width:380px;line-height:1.7}
.ob-done-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* Autocomplete dropdown (shared) */
.ac-wrap{position:relative}
.ac-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--srf);border:1px solid var(--bdr);border-radius:5px;box-shadow:0 4px 14px rgba(0,0,0,.18);z-index:200;max-height:220px;overflow-y:auto;display:block}
.ac-item{padding:8px 12px;font-size:12px;color:var(--dim);cursor:pointer;line-height:1.4;transition:background .1s}
.ac-item:hover{background:var(--srf2)}

/* Per-card accent colors */
[data-card]{border-left:3px solid var(--bdr)}
[data-card="submit"]   {border-left-color:#f59e0b;background:rgba(245,158,11,.10)}
[data-card="board"]    {border-left-color:#38bdf8;background:rgba(56,189,248,.10)}
[data-card="workentry"]{border-left-color:#a78bfa;background:rgba(167,139,250,.10)}
[data-card="assets"]   {border-left-color:#2dd4bf;background:rgba(45,212,191,.10)}
[data-card="ai"]       {border-left-color:#fb7185;background:rgba(251,113,133,.10)}
[data-card="gfx"]      {border-left-color:#fb923c;background:rgba(251,146,60,.10)}
[data-card="music"]    {border-left-color:#4ade80;background:rgba(74,222,128,.10)}
[data-card="notes"]    {border-left-color:#818cf8;background:rgba(129,140,248,.10)}
[data-card="calendar"]        {border-left-color:#facc15;background:rgba(250,204,21,.10)}
[data-card="research"]        {border-left-color:#06b6d4;background:rgba(6,182,212,.10)}
[data-card="exports-tracker"] {border-left-color:#3b82f6;background:rgba(59,130,246,.10)}
[data-card="releases-tracker"]{border-left-color:#7c3aed;background:rgba(124,58,237,.10)}
[data-card="people"]          {border-left-color:#4f46e5;background:rgba(79,70,229,.10)}
[data-card="talent-dir"]      {border-left-color:#d946ef;background:rgba(217,70,239,.10)}
[data-card="locations-dir"]   {border-left-color:#10b981;background:rgba(16,185,129,.10)}

/* Work entry form */
.we-header{font-family:'Bebas Neue';font-size:24px;letter-spacing:2px;color:var(--acc);margin-bottom:6px}
.we-instructions{font-family:'DM Sans';font-size:12px;color:var(--dim);line-height:1.7;margin-bottom:20px;max-width:560px}
.we-ep-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.we-ep-chip{display:flex;align-items:center;background:var(--srf2);border:1px solid var(--bdr);border-radius:20px;padding:3px 10px;font-family:'DM Sans';font-size:11px;cursor:pointer;transition:all .12s;user-select:none}
.we-ep-chip:has(input:checked){background:rgba(154,111,46,.18);border-color:var(--acc2);color:var(--acc2)}
.we-role-display{font-family:'DM Sans';font-size:11px;color:var(--acc2);padding:4px 0}
.we-pct-lbl{font-family:'DM Sans';font-size:10px;color:var(--muted);font-weight:400;margin-left:4px}
.we-pct{font-family:'DM Sans';font-size:12px;color:var(--dim);margin-left:4px}
.we-div-inp{width:60px!important}
.we-confirm-msg{font-family:'DM Sans';font-size:13px;padding:10px 14px;border-radius:5px;margin-bottom:16px}
.we-confirm-msg.success{background:rgba(22,163,74,.14);color:var(--green);border:1px solid rgba(22,163,74,.38)}
.we-confirm-msg.warning{background:rgba(217,119,6,.14);color:var(--amber);border:1px solid rgba(217,119,6,.38)}
.we-confirm-msg.error{background:rgba(220,38,38,.14);color:var(--acc3);border:1px solid rgba(220,38,38,.38)}

/* Inline editing (supervisor tables) */
.li-inp{width:100%;background:transparent;border:1px solid transparent;border-radius:3px;font-size:12px;font-family:'DM Sans';color:var(--dim);padding:3px 5px;outline:none;transition:border-color .12s}
.li-inp:hover{border-color:var(--bdr)}
.li-inp:focus{border-color:var(--acc2);background:var(--srf2)}
.li-sel{width:100%;background:transparent;border:1px solid transparent;border-radius:3px;font-size:12px;font-family:'DM Sans';color:var(--dim);padding:3px 5px;outline:none;cursor:pointer;transition:border-color .12s}
.li-sel:hover,.li-sel:focus{border-color:var(--acc2);background:var(--srf2);outline:none}

/* Supervisor season groups */
.sv-group{margin-bottom:2px}
.sv-group-head{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--srf2);border-bottom:1px solid var(--bdr);cursor:pointer;user-select:none}
.sv-group-caret{font-size:10px;color:var(--muted);transition:transform .15s;display:inline-block}
.sv-group-head.collapsed .sv-group-caret{transform:rotate(-90deg)}
.sv-group-label{font-family:'Bebas Neue';font-size:14px;letter-spacing:1.5px;color:var(--acc);flex:1}
.sv-group-count{font-family:'DM Sans';font-size:10px;color:var(--muted)}
#sv-save-status{font-family:'DM Sans';font-size:12px;margin-left:10px;transition:color .2s}

/* Onboarding additions */
.ob-form-title{font-family:'Bebas Neue';font-size:20px;letter-spacing:2px;color:var(--acc);margin-bottom:12px}
.ob-accordion{overflow:hidden;max-height:0;transition:max-height .2s ease}
.ob-accordion.open{max-height:300px}
.ob-mailing-lbl{display:flex;align-items:center;gap:7px;font-family:'DM Sans';font-size:12px;color:var(--dim);cursor:pointer;margin-bottom:8px}
.ob-attach-ph{border:1px dashed var(--bdr);border-radius:4px;padding:10px 14px;font-family:'DM Sans';font-size:12px;color:var(--muted);text-align:center;margin-top:4px}


/* Supervisor table layout */
.sv-table-wrap{overflow-x:auto;width:100%}
.sv-table{width:100%;border-collapse:collapse;font-size:13px}
.sv-table th,.sv-table td{padding:7px 12px;text-align:left;border-bottom:1px solid var(--srf2);white-space:nowrap}
.sv-table th{font-weight:600;color:var(--dim);background:var(--srf);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.sv-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.45)}
.sv-table tbody tr:hover td{background:rgba(217,119,6,.07)!important}
.sv-cell-muted{color:var(--muted);font-style:italic}
.sv-col-template{max-width:320px;white-space:pre-wrap;word-break:break-word}
.sv-inline-textarea{white-space:pre-wrap}
.sv-col-notes{min-width:120px;white-space:normal;word-break:break-word}

/* Frame.io Projects panel */
.sv-section-label{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:.04em;color:var(--dim);margin:1.5rem 0 .25rem}
.sv-help-text{font-size:12px;color:var(--muted);margin:0 0 .75rem}
.sv-add-row-bar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.75rem}
.sv-input-sm{padding:4px 8px;border:1px solid var(--bdr);border-radius:4px;background:#fff;font-size:13px;color:var(--txt);min-width:120px}
.sv-btn-sm{padding:4px 10px;border:1px solid var(--bdr);border-radius:4px;background:var(--srf);font-size:12px;cursor:pointer;white-space:nowrap}
.sv-btn-sm:hover{background:var(--srf2)}
.sv-btn-danger{border-color:var(--acc3);color:var(--acc3)}
.sv-btn-danger:hover{background:#fee2e2}
.sv-code-small{font-family:'DM Sans',sans-serif;font-size:11px;background:var(--srf);padding:1px 4px;border-radius:3px;color:var(--dim)}

/* Supervisor inline cell editing */
.sv-editable-cell{cursor:text;transition:background .1s}
.sv-editable-cell:hover{background:var(--srf)!important}
.sv-editable-cell:focus-within{outline:2px solid var(--amber);outline-offset:-2px;background:var(--srf)!important}
/* !important: input[type=text]/[type=url]/[type=email] (hub.css above) is an
   attribute selector, which outranks this plain class on specificity alone —
   without !important the grid's compact font-size gets clobbered back up to
   the global 13px/9px-padding form-control default the moment svInlineEdit
   sets type="text" on the cell's <input>. */
.sv-inline-inp{border:none!important;background:transparent!important;width:100%;font:inherit;font-size:inherit!important;color:inherit;padding:0!important;outline:none;border-radius:2px;box-sizing:border-box}
/* Plain-text inline edits use a rows=1 auto-growing <textarea> (see svInlineEdit)
   instead of <input type=text> so long values that wrap in read view stay
   readable while editing — resize:none/overflow:hidden since JS drives the
   height, not the user's resize handle or a scrollbar. */
.sv-inline-inp-wrap{display:block;resize:none;overflow:hidden;white-space:pre-wrap;word-break:break-word;line-height:inherit;vertical-align:top}
.sv-saving{opacity:.55}
.sv-saved{color:var(--green)!important;transition:color .8s}
.sv-save-err{color:var(--acc3)!important}

/* Invoice & generic status pills (semantic) */
.status-pill{font-family:'DM Sans';font-size:9px;letter-spacing:.8px;text-transform:uppercase;border-radius:3px;padding:2px 7px;border:1px solid;display:inline-block}
.status-pill.submitted{background:rgba(37,99,235,.14);color:var(--blue);border-color:rgba(37,99,235,.38)}
.status-pill.received {background:rgba(124,58,237,.14);color:var(--violet);border-color:rgba(124,58,237,.38)}
.status-pill.approved {background:rgba(217,119,6,.14);color:var(--amber);border-color:rgba(217,119,6,.38)}
.status-pill.paid     {background:rgba(22,163,74,.14);color:var(--green);border-color:rgba(22,163,74,.38)}
.status-pill.disputed {background:rgba(220,38,38,.14);color:var(--acc3);border-color:rgba(220,38,38,.38)}
.status-pill.overdue  {background:rgba(220,38,38,.20);color:var(--acc3);border-color:rgba(220,38,38,.50);font-weight:600}

/* ── Drive upload widget ─────────────────────────────────────────────────── */
.drive-upload-widget{display:inline-block}
.drive-upload-btn,.drive-upload-replace-btn{font:inherit;padding:4px 10px;background:var(--srf);border:1px solid var(--bdr);border-radius:4px;cursor:pointer;color:var(--txt)}
.drive-upload-btn:hover,.drive-upload-replace-btn:hover{background:var(--srf2)}
.drive-upload-existing{display:inline-flex;align-items:center;gap:8px}
.drive-upload-link{color:var(--blue);text-decoration:none}
.drive-upload-link:hover{text-decoration:underline}
.drive-upload-spinner{font-size:.9em;color:var(--muted);font-style:italic}
.drive-cell-link{color:var(--blue);text-decoration:none;font-size:.9em}
.drive-cell-link:hover{text-decoration:underline}
.drive-cell-empty{color:var(--muted);font-size:.9em}

/* ── Staff Invoice Drawer ────────────────────────────────────────────────── */
.staff-inv-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:center;justify-content:center}
.staff-inv-drawer{background:var(--bg);border:1px solid var(--bdr);border-radius:8px;width:90%;max-width:520px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.staff-inv-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--bdr)}
.staff-inv-header h3{margin:0;font-family:'Bebas Neue',sans-serif;letter-spacing:.04em}
.staff-inv-close{background:none;border:none;color:var(--txt);font-size:1.5em;cursor:pointer;line-height:1}
.staff-inv-body{padding:16px;overflow-y:auto;flex:1}
.staff-inv-row{margin-bottom:14px}
.staff-inv-row-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.staff-inv-row label{display:block;font-family:'DM Sans',sans-serif;font-size:.85em;color:var(--dim);margin-bottom:4px;text-transform:uppercase}
.staff-inv-row .req{color:var(--acc3)}
.staff-inv-row input[type="text"],.staff-inv-row input[type="number"],.staff-inv-row input[type="date"],.staff-inv-row textarea{width:100%;padding:6px 10px;background:white;color:var(--txt);border:1px solid var(--bdr);border-radius:4px;font:inherit}
.staff-inv-row input:focus,.staff-inv-row textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(217,119,6,.12);border-color:var(--amber)}
.staff-inv-hint{display:block;margin-top:4px;color:var(--muted);font-size:.85em;font-style:italic}
.staff-inv-error{background:rgba(220,38,38,.1);color:var(--acc3);padding:8px 12px;border-radius:4px;font-size:.9em;margin-bottom:12px}
.staff-inv-footer{padding:12px 16px;border-top:1px solid var(--bdr);display:flex;justify-content:flex-end;gap:8px}
.staff-inv-cancel,.staff-inv-submit{font:inherit;padding:8px 16px;border-radius:4px;cursor:pointer;border:1px solid var(--bdr)}
.staff-inv-cancel{background:var(--srf);color:var(--txt)}
.staff-inv-cancel:hover{background:var(--srf2)}
.staff-inv-submit{background:var(--blue);color:white;border-color:var(--blue)}
.staff-inv-submit:hover{background:#234d8a}
.staff-inv-submit:disabled{opacity:.6;cursor:not-allowed}

/* ── Staff grid avatar ───────────────────────────────────────────────────── */
.staff-grid-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;vertical-align:middle;border:1px solid var(--bdr)}
.staff-grid-avatar-placeholder{width:28px;height:28px;border-radius:50%;background:var(--bdr);display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);vertical-align:middle}

/* ── Staff Edit Drawer — photo row (thumb + upload fields side by side) ─── */
.staff-drawer-photo-row{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.staff-drawer-thumb-wrap{flex-shrink:0}
.staff-drawer-photo-fields{flex:1;min-width:0}
.staff-drawer-photo-fields .fgrp{margin-bottom:8px}
.staff-drawer-thumb-link{display:inline-block;text-decoration:none;border-radius:50%;overflow:hidden;border:2px solid var(--bdr);transition:border-color .15s ease}
.staff-drawer-thumb-link:hover{border-color:var(--amber)}
.staff-drawer-thumb{width:80px;height:80px;object-fit:cover;display:block}
.staff-drawer-thumb-placeholder{width:80px;height:80px;border-radius:50%;background:var(--bdr);border:2px solid var(--bdr2);display:inline-flex;align-items:center;justify-content:center;font-size:26px;color:var(--muted)}

/* ── Work Entry — Invoice section ───────────────────────────────────────── */
.we-invoices-section{margin:24px 0;padding:16px;background:var(--srf);border:1px dashed var(--bdr);border-radius:6px}
.we-invoices-divider{font-family:'DM Sans',sans-serif;font-size:.85em;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;text-align:center;margin-bottom:12px}
.we-invoices-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.we-invoices-chips:empty{display:none}
.we-invoice-chip{display:inline-block;background:var(--bg);border:1px solid var(--bdr);border-radius:4px;padding:4px 8px;color:var(--txt);font-size:.85em;text-decoration:none;font-family:'DM Sans',sans-serif}
.we-invoice-chip:hover{background:var(--srf2);text-decoration:none}
.we-invoices-add-btn{font:inherit;padding:8px 16px;background:var(--bg);color:var(--txt);border:1px solid var(--bdr);border-radius:4px;cursor:pointer;display:block;margin:0 auto}
.we-invoices-add-btn:hover{background:var(--srf2)}

/* ── Frame.io auto-import tab ────────────────────────────────────────────── */
.fio-msg{padding:12px;font-size:13px;color:var(--muted);line-height:1.5}
.fio-msg.err{color:var(--acc3)}
.fio-info{font-size:12px;color:var(--muted);margin-bottom:8px;padding:6px 0;border-bottom:1px solid var(--srf2)}
.fio-list{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.fio-row{display:flex;align-items:flex-start;gap:8px;padding:6px 4px;border-radius:4px;cursor:pointer;font-size:13px}
.fio-row:hover{background:var(--srf)}
.fio-chk{margin-top:2px;flex-shrink:0}
.fio-tc{font-family:'DM Sans',sans-serif;font-size:12px;color:var(--muted);flex-shrink:0;width:36px}
.fio-text{flex:1;line-height:1.4}
.fio-badge{font-size:10px;color:var(--amber);border:1px solid var(--amber);border-radius:3px;padding:1px 5px;flex-shrink:0;white-space:nowrap}
.fio-actions{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:1px solid var(--srf2)}
.fio-header{padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--srf2)}
.fio-url-row{display:flex;gap:6px;align-items:center}
.fio-url-inp{flex:1;font-size:12px}
.fio-refresh-btn{font-size:14px;padding:3px 8px;flex-shrink:0}
.fio-sel-all{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px;cursor:pointer}
.n-inp-sm{font-size:11px !important;padding:2px 5px !important;height:auto !important}

/* Notes Tracker — AI Import tab preview (editable, full-list — see showPreview()'s
   30-row read-only cap for why this is separate; briefs/BRIEF_ai_notes_to_csv.md).
   NOTE: overrides on <input class="minp nai-tc/nai-text"> must be written as
   compound selectors (.minp.nai-tc, not .nai-tc alone) — input.minp{width:100%;
   font-size:13px;padding:9px 11px} (specificity 0,1,1: type+class) otherwise beats
   a class-only override (0,1,0) regardless of source order, which is exactly what
   silently broke this the first time: the TC input stayed 100% width and starved
   the Note Text input down to its flex min-content ("one character wide"). */
.nai-batchbar{display:flex;align-items:center;gap:8px;padding:8px;background:var(--srf);border:1px solid var(--srf2);border-radius:4px;margin-bottom:8px}
.nai-batchbar .flbl{white-space:nowrap}
.nai-rows{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.nai-row{display:flex;align-items:center;gap:6px;padding:4px 2px}
.minp.nai-tc{flex:0 0 70px;width:70px;padding:5px 7px;font-family:'DM Sans',sans-serif;font-size:12px}
.minp.nai-text{flex:1;min-width:0;padding:5px 7px;font-size:12px}
.nai-noter{font-size:11px;color:var(--muted);width:90px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nai-del{background:none;border:none;color:var(--acc3);font-size:16px;line-height:1;cursor:pointer;flex-shrink:0;padding:2px 6px}
.nai-del:hover{background:rgba(220,38,38,.1);border-radius:3px}
.nai-badge{font-size:9.5px;color:var(--violet);border:1px solid var(--violet);border-radius:3px;padding:1px 5px;flex-shrink:0;white-space:nowrap;text-transform:uppercase;letter-spacing:.5px}

/* New Cut modal — live Cut vs Progress Cut indicator (see ADR 0041, CONTEXT.md → Progress Cut) */
.cuttype-indicator{font-size:11px;margin-top:4px;font-weight:600}
.cuttype-indicator.cut{color:var(--green)}
.cuttype-indicator.progress{color:var(--amber)}
.btn.btn-icon{padding:2px 6px;font-size:12px;line-height:1;min-width:0}
.notes-loading{padding:20px 12px;display:flex;flex-direction:column;gap:10px}
.nl-bar{height:12px;border-radius:3px;background:linear-gradient(90deg,var(--srf2) 25%,var(--srf) 50%,var(--srf2) 75%);background-size:200% 100%;animation:nl-shimmer 1.4s infinite}
@keyframes nl-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.loading-screen{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:60px 24px;font-family:'DM Sans';font-size:12px;color:var(--muted);letter-spacing:.05em}
.loading-text{font-family:'DM Sans';font-size:12px;color:var(--muted);letter-spacing:.08em}

/* ── Shared sv-form / sv-filter classes (used by Archives + Finishing) ─── */
.sv-form-row{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.sv-form-label{font-family:'DM Sans';font-size:9.5px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.sv-form-inp{width:100%;background:#fff;border:1px solid var(--bdr);border-radius:4px;padding:8px 10px;color:var(--txt);font-family:'DM Sans';font-size:13px;outline:none;box-sizing:border-box;transition:border-color .12s,box-shadow .12s}
.sv-form-inp:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,119,6,.12)}
.sv-form-sel{background:#fff;border:1px solid var(--bdr);border-radius:4px;padding:7px 9px;color:var(--txt);font-family:'DM Sans';font-size:13px;outline:none;cursor:pointer;transition:border-color .12s,box-shadow .12s;width:100%}
.sv-form-sel:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,119,6,.12)}
.sv-form-actions{display:flex;gap:8px;margin-top:16px}
.sv-filter-sel{background:#fff;border:1px solid var(--bdr);border-radius:4px;padding:5px 9px;color:var(--txt);font-family:'DM Sans';font-size:12px;outline:none;cursor:pointer;width:auto;max-width:220px}
.sv-edit-btn{background:none;border:none;cursor:pointer;padding:2px 5px;font-size:13px;opacity:.6;transition:opacity .12s}
.sv-edit-btn:hover{opacity:1}
.sv-muted-label{font-size:11px;color:var(--muted)}
.sv-error{font-family:'DM Sans';font-size:12px;color:var(--acc3);padding:24px 0;text-align:center}
.sv-drawer-form{padding:2px 0}

/* ── Finishing Checklist grid ────────────────────────────────────────────── */
.fin-grid-wrap{overflow-x:auto;width:100%;margin-top:4px}
.fin-grid{border-collapse:collapse;font-size:12px;white-space:nowrap}
.fin-grid th{background:var(--srf);color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-bottom:2px solid var(--bdr);position:sticky;top:0;z-index:2}
.fin-grid th.fin-th-ep{position:sticky;left:0;z-index:3;min-width:80px}
.fin-grid td{padding:5px 8px;border-bottom:1px solid var(--srf2);vertical-align:middle}
.fin-grid tbody tr:nth-child(even) td{background:rgba(255,255,255,.45)}
.fin-grid tbody tr:hover td{background:var(--srf)!important}
.fin-grid td.fin-td-ep{position:sticky;left:0;background:var(--bg);font-weight:600;font-size:11px;z-index:1;border-right:1px solid var(--bdr)}
.fin-grid tbody tr:nth-child(even) td.fin-td-ep{background:#f5f4f1}
.fin-grid tbody tr:hover td.fin-td-ep{background:var(--srf)!important}
.fin-cell-date{min-width:56px}
.fin-cell-date input[type=date]{border:none;background:transparent;font-family:'DM Sans',sans-serif;font-size:10px;color:var(--txt);width:100%;cursor:pointer;outline:none;padding:2px 0}
.fin-cell-date input[type=date]::-webkit-calendar-picker-indicator{opacity:0;width:0;padding:0}
.fin-cell-date input[type=date]:focus{outline:1px solid var(--amber);border-radius:2px}
.fin-cell-date.filled{background:rgba(22,163,74,.08)!important}
.fin-cell-date.filled input[type=date]{color:var(--green)}
.fin-clear-btn{display:none;background:none;border:none;color:var(--muted);cursor:pointer;font-size:10px;padding:0 1px;opacity:.5;vertical-align:middle;line-height:1}
.fin-clear-btn:hover{opacity:1;color:var(--acc3)}
.fin-cell-date.filled .fin-clear-btn,.fin-cell-text.filled .fin-clear-btn{display:inline}
.fin-cell-text input[type=text]{border:none;background:transparent;font-family:'DM Sans',sans-serif;font-size:10px;color:var(--txt);width:52px;cursor:pointer;outline:none;padding:2px 0}
.fin-cell-text input[type=text]:focus{outline:1px solid var(--amber);border-radius:2px}
.fin-cell-check{text-align:center;min-width:44px;cursor:pointer}
.fin-cell-check.checked{background:rgba(22,163,74,.08)!important;color:var(--green);font-weight:700}
.fin-completion{display:inline-block;font-size:10px;font-family:'DM Sans',sans-serif;background:var(--srf2);border:1px solid var(--bdr);border-radius:10px;padding:1px 7px;color:var(--muted)}
.fin-completion.done{background:rgba(22,163,74,.12);border-color:var(--green);color:var(--green)}
.fin-col-editor-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--srf2)}
.fin-col-editor-row:last-child{border-bottom:none}
.fin-col-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 6px}
.fin-col-del:hover{color:var(--acc3)}
/* ── Finishing phase headers + season chips ──────────────────────────────── */
.fin-phase-block{margin-bottom:28px}
.fin-phase-header{font-family:'Bebas Neue';font-size:18px;letter-spacing:1.5px;color:var(--dim);padding:6px 0 4px;border-bottom:2px solid var(--bdr);margin-bottom:8px;display:flex;align-items:center;gap:10px}
.fin-phase-badge{font-family:'DM Sans',sans-serif;font-size:10px;background:var(--srf2);border:1px solid var(--bdr);border-radius:10px;padding:1px 8px;color:var(--muted);font-weight:normal;letter-spacing:0}
.fin-inline-sel{background:#fff;border:1px solid transparent;border-radius:3px;font-family:'DM Sans';font-size:11px;color:var(--txt);padding:2px 4px;cursor:pointer;outline:none}
.fin-inline-sel:hover,.fin-inline-sel:focus{border-color:var(--bdr);box-shadow:0 0 0 2px rgba(217,119,6,.10)}
.fin-hide-btn{background:none;border:none;font-size:10px;color:var(--muted);cursor:pointer;padding:0 3px;opacity:.5;letter-spacing:.03em;font-family:'DM Sans';text-transform:uppercase}
.fin-hide-btn:hover{opacity:1;color:var(--acc3)}
.fin-td-ep-inner{display:flex;align-items:center;gap:4px}
/* Season chip picker (mirrors Deliverables pattern) */
.fin-season-chips{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0 8px}
.fin-season-chip{background:var(--srf);border:1px solid var(--bdr);border-radius:6px;padding:8px 14px;cursor:pointer;font-family:'DM Sans';font-size:13px;transition:all .12s;min-width:80px;text-align:center}
.fin-season-chip:hover{border-color:var(--acc2);background:rgba(154,111,46,.07)}
.fin-season-chip.active{border-color:var(--acc);background:var(--srf2);font-weight:600}
.fin-season-chip-new{border-style:dashed;color:var(--muted)}
.fin-season-back{font-size:12px;color:var(--muted);cursor:pointer;background:none;border:none;padding:0;font-family:'DM Sans';margin-bottom:10px}
.fin-season-back:hover{color:var(--txt)}

/* ── Footage Tracker ─────────────────────────────────────────────────────── */
.ftg-layout{padding:16px 20px}
.ftg-panel{display:none}.ftg-panel.active{display:block}
.ftg-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ftg-checklist{display:grid;grid-template-columns:1fr 1fr;gap:3px 16px;margin:6px 0}
.ftg-check-row{display:flex;align-items:center;gap:6px;font-size:12px;padding:4px 6px;border-radius:4px;transition:background .15s}
.ftg-check-row.state-ip{background:rgba(217,119,6,.10)}
.ftg-check-row.state-ip .ftg-check-label{color:var(--amber);font-weight:500}
.ftg-check-row.state-done{background:rgba(22,163,74,.10)}
.ftg-check-row.state-done .ftg-check-label{color:var(--green);font-weight:500}
.ftg-check-row.state-na{background:rgba(107,99,89,.07)}
.ftg-check-row.state-na .ftg-check-label{color:var(--bdr);text-decoration:line-through}
.ftg-check-label{flex:1;font-size:11px;color:var(--dim)}
.ftg-check-seg{display:flex;gap:2px;flex-shrink:0}
.ftg-check-seg button{border:1px solid var(--bdr);border-radius:3px;font-size:10px;font-family:'DM Sans';padding:2px 6px;cursor:pointer;color:var(--muted);background:var(--srf2);transition:all .1s;white-space:nowrap;line-height:1.4}
.ftg-check-seg button:hover{border-color:var(--acc2);color:var(--acc2)}
.ftg-check-seg button.active-ip{background:rgba(217,119,6,.15);border-color:var(--amber);color:var(--amber);font-weight:600}
.ftg-check-seg button.active-done{background:rgba(22,163,74,.15);border-color:var(--green);color:var(--green);font-weight:600}
.ftg-check-seg button.active-na{background:#1c1a17;border-color:#1c1a17;color:#fff;font-weight:600}
.ftg-chk-by{width:42px;min-width:42px;max-width:42px;font-size:9px;font-family:'DM Sans',sans-serif;border:none;border-bottom:1px solid var(--bdr);background:transparent;color:var(--dim);padding:1px 3px;outline:none;flex-shrink:0}
.ftg-chk-by:focus{border-bottom-color:var(--amber)}
.ftg-chk-by::placeholder{color:var(--bdr2)}
.ftg-progress{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-family:'DM Sans',sans-serif}
.ftg-progress-bar{width:60px;height:5px;background:var(--srf2);border-radius:3px;overflow:hidden}
.ftg-progress-fill{height:100%;background:var(--green);border-radius:3px;transition:width .2s}
.ftg-drive-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.ftg-drive-link{font-size:11px;color:var(--blue);text-decoration:none;font-family:'DM Sans',sans-serif;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftg-drive-link:hover{text-decoration:underline}
.ftg-upload-mount{margin-top:4px}
.ftg-tx-section{margin-top:16px;border-top:1px solid var(--bdr);padding-top:12px;grid-column:span 2}
.ftg-tx-section-title{font-family:'DM Sans';font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ftg-tx-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:5px 0;border-bottom:1px solid var(--srf2)}
.ftg-tx-row:last-child{border-bottom:none}
.ftg-tx-name{font-weight:500;min-width:100px}
.ftg-tx-meta{color:var(--muted);font-size:11px;flex:1}
.ftg-tx-links{display:flex;gap:6px;align-items:center}
.ftg-tx-link{font-size:11px;color:var(--blue);text-decoration:none}
.ftg-tx-link:hover{text-decoration:underline}
.ftg-loc-label{display:flex;align-items:center;gap:8px}
.ftg-loc-add{font-size:10px;color:var(--blue);cursor:pointer;background:none;border:none;font-family:'DM Sans';padding:0;text-decoration:underline}
.ftg-loc-add:hover{color:var(--acc)}
.ftg-toolbar-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ftg-msel-wrap{position:relative;display:inline-block}
.ftg-msel-trigger{background:#fff;border:1px solid var(--bdr);border-radius:4px;padding:5px 9px;font-family:'DM Sans';font-size:12px;color:var(--txt);cursor:pointer;min-width:160px;display:flex;align-items:center;justify-content:space-between;gap:6px;white-space:nowrap}
.ftg-msel-trigger:hover{border-color:var(--acc2)}
.ftg-msel-trigger.open{border-color:var(--amber);box-shadow:0 0 0 2px rgba(217,119,6,.10)}
.ftg-msel-dropdown{position:absolute;top:calc(100% + 3px);left:0;min-width:100%;background:var(--srf);border:1px solid var(--bdr2);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.12);z-index:500;padding:4px 0;display:none;max-height:260px;overflow-y:auto}
.ftg-msel-dropdown.open{display:block}
.ftg-msel-opt{display:flex;align-items:center;gap:7px;padding:6px 10px;font-size:12px;cursor:pointer;transition:background .1s}
.ftg-msel-opt:hover{background:var(--srf2)}

/* ── Footage ingest popover ──────────────────────────────────────────────── */
.ftg-ingest-dots{display:flex;gap:2px;align-items:center;cursor:pointer;padding:2px 4px;border-radius:3px;transition:background .1s}
.ftg-ingest-dots:hover{background:var(--srf2)}
.ftg-dot{width:8px;height:8px;border-radius:50%;background:var(--srf2);border:1px solid var(--bdr);flex-shrink:0;transition:background .15s}
.ftg-dot.dot-na{background:var(--bdr2);border-color:var(--bdr2)}
.ftg-dot.dot-ip{background:var(--amber);border-color:var(--amber)}
.ftg-dot.dot-done{background:#22c55e;border-color:#22c55e}
.ftg-ingest-pop{position:fixed;z-index:9000;background:var(--srf);border:1px solid var(--bdr2);border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,.18);padding:10px 12px;width:max-content;max-width:calc(100vw - 24px);overflow:hidden}
.ftg-ingest-pop-title{font-family:'DM Sans';font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ftg-ingest-row{display:flex;align-items:center;gap:6px;padding:3px 0;border-bottom:1px solid var(--srf2);font-size:11px}
.ftg-ingest-row:last-child{border-bottom:none}
.ftg-ingest-row-label{flex:1;color:var(--dim);min-width:120px;white-space:nowrap}
.ftg-ingest-row.pop-state-na .ftg-ingest-row-label{text-decoration:line-through;color:var(--bdr)}
.ftg-ingest-btns{display:flex;gap:2px;flex-shrink:0}
.ftg-ingest-btn{border:1px solid var(--bdr);border-radius:3px;font-size:10px;font-family:'DM Sans';padding:1px 5px;cursor:pointer;color:var(--muted);background:var(--srf2);transition:all .1s;line-height:1.5;min-width:26px;text-align:center}
.ftg-ingest-btn:hover{border-color:var(--acc2);color:var(--acc2)}
.ftg-ingest-btn.active-na{background:#1c1a17;border-color:#1c1a17;color:#fff;font-weight:600}
.ftg-ingest-btn.active-ip{background:rgba(217,119,6,.15);border-color:var(--amber);color:var(--amber);font-weight:600}
.ftg-ingest-btn.active-done{background:rgba(22,163,74,.15);border-color:var(--green);color:var(--green);font-weight:600}
.ftg-ingest-by{flex:0 0 46px;width:46px;min-width:0;max-width:46px;font-size:10px;font-family:'DM Sans';border:none;border-bottom:1px solid var(--bdr);background:transparent;color:var(--dim);padding:1px 2px;outline:none;text-transform:uppercase;text-align:center;box-sizing:border-box}
.ftg-ingest-by:focus{border-bottom-color:var(--amber)}
.ftg-ingest-by::placeholder{color:var(--bdr2)}
.ftg-ingest-pop-footer{display:flex;justify-content:flex-end;gap:6px;margin-top:8px;padding-top:6px;border-top:1px solid var(--srf2)}
.ftg-msel-opt input[type=checkbox]{margin:0;cursor:pointer}

/* ── Talent inline create/edit popover ─────────────────────────────────────── */
.tal-inline-pop{position:fixed;z-index:850;background:var(--bg);border:1px solid var(--bdr2);border-radius:6px;padding:12px 14px 10px;box-shadow:0 4px 16px rgba(0,0,0,.16);width:260px;font-family:'DM Sans',sans-serif;font-size:12px}
.tal-inline-pop .tip-title{font-family:'DM Sans';font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.tal-inline-pop .tip-field{margin-bottom:8px}
.tal-inline-pop .tip-field>label{display:block;font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.tal-inline-pop .tip-field input[type=text]{width:100%;background:#fff;border:1px solid var(--bdr);border-radius:3px;padding:4px 6px;font-size:12px;font-family:'DM Sans',sans-serif;color:var(--txt);outline:none;box-sizing:border-box}
.tal-inline-pop .tip-field input[type=text]:focus{border-color:var(--amber);box-shadow:0 0 0 2px rgba(217,119,6,.12)}
.tal-inline-pop .tip-actions{margin-top:10px}
/* Edit button inside ac-item */
.ac-item-linked{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ac-item-linked>span{flex:1;cursor:pointer}
.ac-edit-btn{background:none;border:none;cursor:pointer;color:var(--muted);font-size:12px;padding:0 3px;line-height:1;flex-shrink:0}
.ac-edit-btn:hover{color:var(--txt)}
/* +New row at bottom of ac-dropdown */
.ac-new-btn{padding:6px 10px;font-size:11px;color:var(--blue);cursor:pointer;border-top:1px solid var(--srf2);margin-top:2px;font-family:'DM Sans',sans-serif}
.ac-new-btn:hover{background:var(--srf)}
/* +New row at bottom of ftg multiselect dropdown */
.ftg-new-talent-btn{padding:6px 10px;font-size:11px;color:var(--blue);cursor:pointer;border-top:1px solid var(--srf2);font-family:'DM Sans',sans-serif}
.ftg-new-talent-btn:hover{background:var(--srf)}

/* ── Unified attachment rows (Submit form) ──────────────────────────────────── */
.att-row{display:flex;gap:6px;align-items:center;margin-bottom:7px;flex-wrap:nowrap}
.att-row .att-url{flex:1.4;min-width:0}
.att-row .att-label{flex:1;min-width:0}
.att-row .att-talent-slot{flex:0 0 160px;max-width:160px}
.att-row .att-talent-slot .ftg-msel-wrap{width:100%}
.att-row .att-talent-slot .ftg-msel-trigger{min-width:0;width:100%;box-sizing:border-box}
.att-row .att-x{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--muted);font-size:14px;padding:0 4px;line-height:1}
.att-row .att-x:hover{color:var(--acc3)}
.att-addrow{font-size:11px;color:var(--acc2);background:none;border:1px dashed var(--bdr);border-radius:4px;padding:4px 10px;cursor:pointer;margin-top:2px}
.att-addrow:hover{border-color:var(--acc2)}

/* Slim inline upload control (one per row) */
.att-up{flex-shrink:0;display:inline-flex;align-items:center}
.att-up-btn{background:var(--srf);border:1px solid var(--bdr);border-radius:4px;padding:5px 9px;font-family:'DM Sans';font-size:11px;color:var(--txt);cursor:pointer;white-space:nowrap}
.att-up-btn:hover{border-color:var(--acc2)}
.att-up-busy{font-family:'DM Sans';font-size:11px;color:var(--muted);padding:5px 4px;white-space:nowrap}
.att-up-have{display:inline-flex;align-items:center;gap:5px;font-family:'DM Sans';font-size:11px;white-space:nowrap}
.att-up-have a{color:var(--acc2);text-decoration:none;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-up-clear{background:none;border:none;cursor:pointer;color:var(--muted);font-size:12px;padding:0 2px;line-height:1}
.att-up-clear:hover{color:var(--acc3)}

/* Notes Tracker inline Bite Finder popover (grill-with-docs 2026-07-20,
   docs/adr's Bite Finder inline-popover extension) — mirrors Script
   Editor's .se-bf-popover (tools/script-editor.html, docs/adr/0056).
   z-index 1300, above the highest overlay tier documented in CLAUDE.md's
   Popover/panel patterns table (Batch Import/Tracker Batch Add at 1200). */
.nt-bf-popover{position:fixed;z-index:1300;width:360px;max-width:90vw;background:#fff;border:1px solid var(--bdr2);border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.25);padding:12px 14px}
.nt-bf-pop-head{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:.03em;margin-bottom:6px}
.nt-bf-popover textarea{width:100%;font-family:inherit;font-size:12px;padding:6px 8px;border:1px solid var(--bdr2);border-radius:4px;resize:vertical;margin-bottom:6px;box-sizing:border-box}
.nt-bf-pop-actions{display:flex;gap:6px;margin-bottom:8px}
.nt-bf-pop-result{background:var(--srf);border:1px solid var(--srf2);border-radius:5px;padding:7px 9px;margin-bottom:6px}
.nt-bf-pop-result-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px}
.nt-bf-pop-result-text{font-size:12px;margin-bottom:5px;white-space:pre-wrap}
.nt-bf-pop-escape{font-size:11px;margin-top:4px}
.nt-bf-pop-escape a{color:var(--blue)}

/* Notes Tracker Script panel (grill-with-docs 2026-07-20, docs/adr/0070) —
   inverse of Script Editor's own side-by-side Notes panel; same right-
   anchored slide-in shape as this app's "Side drawer" tier (CLAUDE.md's
   Popover/panel patterns table, e.g. .drawer at z-index 751) — distinct
   z-index values (700/701) rather than reusing .drawer's own, since the two
   could in principle be open at once and aren't meant to stack on each
   other specifically. */
.nt-script-panel-backdrop{position:fixed;inset:0;z-index:700;background:rgba(0,0,0,.18);display:none}
.nt-script-panel-backdrop.open{display:block}
.nt-script-panel{position:fixed;top:0;right:0;height:100vh;width:380px;max-width:92vw;background:var(--bg);border-left:1px solid var(--bdr2);z-index:701;box-shadow:-4px 0 24px rgba(0,0,0,.14);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .2s ease}
.nt-script-panel.open{transform:translateX(0)}
.nt-script-panel-hdr{padding:14px 16px;border-bottom:1px solid var(--bdr);background:var(--srf);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.nt-script-panel-title{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:1px;color:var(--acc)}
.nt-script-panel-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:2px 6px}
.nt-script-panel-close:hover{color:var(--txt)}
.nt-script-panel-body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.nt-sp-banner{font-size:11.5px;color:var(--dim);background:var(--srf2);border-radius:4px;padding:6px 9px}
.nt-sp-banner-empty{color:var(--muted)}
.nt-sp-line{background:#fff;border:1px solid var(--srf2);border-radius:5px;padding:7px 9px;display:flex;flex-direction:column;gap:3px}
.nt-sp-line-speaker{font-size:10.5px;font-weight:600;color:var(--dim)}
.nt-sp-line-text{font-size:12px;color:var(--txt);white-space:pre-wrap;word-break:break-word}
.nt-sp-line-video{font-size:11px;color:var(--muted);font-style:italic}
/* Section Break row in the Notes script panel (issue #355) — a structural
   divider, not a dialogue line, so it deliberately does NOT get .nt-sp-line's
   white card. Violet matches the Section Break family the Script Editor's own
   grid uses for the same rows. */
.nt-sp-section{font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:.6px;color:var(--violet);border-bottom:1px solid var(--bdr);padding:6px 2px 3px;margin-top:4px}

/* ── Delay Alert (issue #393, ADR 0177) ───────────────────────────────────────
   The button sits beside Submit Request; the popover is anchored and clamped
   in js/submit.js. z-index 1300 clears .cro-overlay (800), which the Submit
   form renders inside when it's reached from a "Create Request" entry point —
   and matches .nt-bf-popover, the established above-everything popover tier.
   Deliberately NOT .ms-panel: js/staff.js's global listener force-closes every
   .ms-panel outside an .ms-wrap, which would shut this on the opening click. */
.da-btn{white-space:nowrap}
.da-btn.armed{background:var(--amber);border-color:var(--amber);color:#fff}
.da-btn.armed:hover{background:#b45309;border-color:#b45309}
.da-popover{position:fixed;z-index:1300;width:340px;max-width:92vw;background:#fff;border:1px solid var(--bdr2);border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.25);padding:12px 14px;max-height:min(70vh,520px);overflow-y:auto}
.da-pop-head{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:.03em;margin-bottom:3px}
.da-pop-note{font-size:11px;color:var(--muted);line-height:1.4;margin-bottom:9px}
.da-pop-opt{display:block;width:100%;text-align:left;padding:8px 10px;margin-bottom:6px;border:1px solid var(--bdr);border-radius:5px;background:var(--bg);font-family:inherit;font-size:13px;font-weight:600;color:var(--txt);cursor:pointer;transition:background .12s,border-color .12s}
.da-pop-opt:hover{background:var(--srf2);border-color:var(--bdr2)}
.da-pop-sub{display:block;font-size:10.5px;font-weight:400;color:var(--muted);margin-top:2px}
.da-pop-custom{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap}
.da-pop-lbl{font-size:11.5px;color:var(--dim)}
.da-pop-custom input{width:64px;padding:5px 7px;border:1px solid var(--bdr);border-radius:4px;background:#fff;font-family:inherit;font-size:13px;color:var(--txt)}
.da-pop-custom input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,119,6,.12)}
.da-pop-preview{margin-top:8px;font-size:11.5px;color:var(--dim);background:var(--srf);border:1px solid var(--srf2);border-radius:5px;padding:6px 9px;line-height:1.4}
.da-pop-actions{margin-top:9px;display:flex;justify-content:flex-end}
.da-pop-clear{background:none;border:none;font-family:inherit;font-size:11.5px;color:var(--muted);cursor:pointer;padding:2px 0;text-decoration:underline}
.da-pop-clear:hover{color:var(--dim)}

/* ── New-Frame.io-notes banner (issue #394, ADR 0178) ────────────────────────
   Sits under .notes-toolbar (or under the offline banner when both are up).
   Amber, not red: this is "there's something waiting for you", not a fault —
   the red band above it is reserved for "you're looking at stale data". */
.notes-fio-banner{background:var(--amber);color:#fff;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:.2px;padding:7px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border-radius:4px;margin:0 0 10px 0}
.notes-fio-banner .nfb-actions{display:flex;align-items:center;gap:8px}
.notes-fio-banner .btn{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);color:#fff}
.notes-fio-banner .btn:hover{background:rgba(255,255,255,.3)}
.notes-fio-banner .nfb-dismiss{background:none;border:none;color:rgba(255,255,255,.85);font-size:14px;line-height:1;cursor:pointer;padding:2px 4px}
.notes-fio-banner .nfb-dismiss:hover{color:#fff}

/* ── Delay Alert pending chip + popover (issue #395, ADR 0177) ───────────────
   The chip sits on the kanban card beside the request number. Amber, matching
   the armed Delay Alert button on the submit form — same feature, same colour.
   Popover z-index 1300 clears every overlay tier, and it is deliberately NOT
   .ms-panel (js/staff.js's global listener would close it on the opening
   click). */
.card-alert-chip{display:inline-flex;align-items:center;gap:3px;background:var(--amber);color:#fff;border-radius:3px;padding:1px 6px;font-size:10px;font-weight:600;letter-spacing:.2px;cursor:pointer;white-space:nowrap}
.card-alert-chip:hover{background:#b45309}
.board-alert-popover{position:fixed;z-index:1300;width:250px;max-width:92vw;background:#fff;border:1px solid var(--bdr2);border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.25);padding:12px 14px;display:flex;flex-direction:column;gap:7px}
.bap-head{font-family:'Bebas Neue',sans-serif;font-size:14px;letter-spacing:.03em}
.bap-when{font-size:12.5px;font-weight:600;color:var(--txt)}
.bap-note{font-size:11px;color:var(--muted);line-height:1.4}
.board-alert-popover .btn{width:100%;text-align:center}
.board-alert-popover .bap-cancel{color:var(--acc3);border-color:var(--acc3)}
.board-alert-popover .bap-cancel:hover{background:var(--acc3);color:#fff}



/* ── NOTES TRACKER — TEAMS IN THE ASSIGN PICKER (#410) ────────────────────
   A team is a SHORTCUT over the people list below it, not a different kind of
   value — picking one ticks its members and what gets saved is still their
   names. Styled as a heading-plus-rows group so that reads at a glance. */
.nt-assign-teams-head, .nt-assign-people-head {
  padding: 4px 10px 2px; font-family: 'DM Sans', sans-serif; font-size: 9px;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  background: var(--srf); position: sticky; top: 0;
}
.nt-assign-people-head { border-top: 1px solid var(--bdr); }
.nt-assign-team { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.nt-assign-team:hover { background: var(--srf); }
.nt-assign-team > span:first-child { color: var(--acc2); font-weight: 700; width: 11px; }
.nt-assign-team > span:last-child { margin-left: auto; }

/* ── NOTES TRACKER — ACTIVE CUT CHIPS (#409) ──────────────────────────────
   The Active Cuts popover's contents, promoted onto the landing screen so
   getting back into a cut is one click and, more to the point, visible.
   Marc: "quicker and obvious to get back to notes… Plenty of room so could
   show all notes that are active."
   Only rendered when a season is picked and no cut is open — see
   _notesChipsShouldShow(). */
.nt-active-chips { flex: 1 1 100%; margin: 6px 0 2px; font-family: 'DM Sans', sans-serif; }
.nt-chips-head { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 5px; }
.nt-chips-warn { text-transform: none; letter-spacing: 0; color: var(--amber); }
.nt-chips-note { font-size: 11px; color: var(--muted); padding: 2px 0; }
.nt-chips-row { display: flex; flex-wrap: wrap; gap: 7px; }
.nt-cut-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-width: 168px; max-width: 260px; padding: 7px 10px; text-align: left;
  background: #fff; border: 1px solid var(--bdr); border-radius: 6px;
  cursor: pointer; font-family: inherit; color: var(--txt);
  transition: border-color .12s, box-shadow .12s;
}
.nt-cut-chip:hover { border-color: var(--bdr2); box-shadow: 0 2px 6px rgba(0,0,0,.10); }
.nt-chip-title { font-size: 12px; font-weight: 600; line-height: 1.25; }
.nt-chip-meta { font-size: 10px; color: var(--muted); }
/* The completion preview. Deliberately a bar plus WORDS, not a bar alone:
   "0 of 0" and "0 of 12" both render as an empty bar and mean opposite
   things, so the text is what actually carries the state. */
.nt-chip-bar { width: 100%; height: 4px; border-radius: 2px; background: var(--srf2); overflow: hidden; }
.nt-chip-bar > span { display: block; height: 100%; background: var(--green); }
/* Left edge encodes the same three states as the text, for scanning a row of
   chips without reading any of them. */
.nt-cut-chip.nt-chip-open { border-left: 3px solid var(--amber); }
.nt-cut-chip.nt-chip-done { border-left: 3px solid var(--green); }
.nt-cut-chip.nt-chip-none { border-left: 3px solid var(--bdr2); }

/* ── ALWAYS-VISIBLE SCROLLBARS INSIDE POP-UPS (#405) ──────────────────────
   macOS defaults System Settings → Appearance → "Show scroll bars" to "When
   scrolling", and Chrome honours it: a bounded modal scrolls with no visible
   affordance, so it reads as a window whose content has been cut off. Marc,
   2026-08-07: "They won't know how to scroll in those large pop-ups. They can
   only scroll with arrow keys or scroll wheel on mouse."

   Declaring ::-webkit-scrollbar WITH A WIDTH is what forces Chrome off overlay
   scrollbars and onto classic, always-visible, space-reserving ones — the
   width is doing the real work here, not the colours. Firefox takes
   scrollbar-width/scrollbar-color instead.

   SCOPED TO POP-UPS, NOT `*`, DELIBERATELY. A global rule reserves ~12px
   inside every scroll container in the app, including the Script Editor and
   tracker grids whose column widths are already delicate. Marc's complaint is
   about large pop-ups; this fixes those and leaves every grid laid out exactly
   as it is today.

   Matched by NAMING CONVENTION rather than an enumerated list, because a list
   goes stale the first time someone adds a modal and doesn't find this block.
   Verified across index.html and every tools page: each overlay, modal,
   popover and drawer in the app either ends its id with one of these four
   words or carries
   one in a class. The `i` flag matters — ids are camelCase (#importModal),
   classes are kebab (.drawer-body). .ms-panel is the one real exception and is
   named explicitly. Descendants are included so a scroller NESTED inside a
   pop-up (a preview list, a picker panel) is covered too. */
:is([id$="overlay" i], [id$="modal" i], [id$="popover" i], [id$="drawer" i],
    [class*="overlay" i], [class*="modal" i], [class*="popover" i], [class*="drawer" i],
    .ms-panel),
:is([id$="overlay" i], [id$="modal" i], [id$="popover" i], [id$="drawer" i],
    [class*="overlay" i], [class*="modal" i], [class*="popover" i], [class*="drawer" i],
    .ms-panel) * {
  scrollbar-width: thin;
  scrollbar-color: var(--bdr2, #8e8678) transparent;
}
:is([id$="overlay" i], [id$="modal" i], [id$="popover" i], [id$="drawer" i],
    [class*="overlay" i], [class*="modal" i], [class*="popover" i], [class*="drawer" i],
    .ms-panel)::-webkit-scrollbar,
:is([id$="overlay" i], [id$="modal" i], [id$="popover" i], [id$="drawer" i],
    [class*="overlay" i], [class*="modal" i], [class*="popover" i], [class*="drawer" i],
    .ms-panel) *::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
:is([id$="overlay" i], [id$="modal" i], [id$="popover" i], [id$="drawer" i],
    [class*="overlay" i], [class*="modal" i], [class*="popover" i], [class*="drawer" i],
    .ms-panel)::-webkit-scrollbar-track,
:is([id$="overlay" i], [id$="modal" i], [id$="popover" i], [id$="drawer" i],
    [class*="overlay" i], [class*="modal" i], [class*="popover" i], [class*="drawer" i],
    .ms-panel) *::-webkit-scrollbar-track {
  background: transparent;
}
:is([id$="overlay" i], [id$="modal" i], [id$="popover" i], [id$="drawer" i],
    [class*="overlay" i], [class*="modal" i], [class*="popover" i], [class*="drawer" i],
    .ms-panel)::-webkit-scrollbar-thumb,
:is([id$="overlay" i], [id$="modal" i], [id$="popover" i], [id$="drawer" i],
    [class*="overlay" i], [class*="modal" i], [class*="popover" i], [class*="drawer" i],
    .ms-panel) *::-webkit-scrollbar-thumb {
  background: var(--bdr, #aaa498);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 6px;
}
:is([id$="overlay" i], [id$="modal" i], [id$="popover" i], [id$="drawer" i],
    [class*="overlay" i], [class*="modal" i], [class*="popover" i], [class*="drawer" i],
    .ms-panel)::-webkit-scrollbar-thumb:hover,
:is([id$="overlay" i], [id$="modal" i], [id$="popover" i], [id$="drawer" i],
    [class*="overlay" i], [class*="modal" i], [class*="popover" i], [class*="drawer" i],
    .ms-panel) *::-webkit-scrollbar-thumb:hover {
  background: var(--bdr2, #8e8678);
  background-clip: content-box;
}