/* ============================================================
   ct-skin.css — CineThreads skin for the Call Sheets app.
   -----------------------------------------------------------
   Loaded AFTER styles.css + nsheader.css so it wins. It changes
   NO markup and NO JavaScript: it re-themes the app by
   redefining the app's existing :root tokens onto theme.css's
   --ct-* single source of truth, plus a few targeted rules for
   the title scale, the eyebrow policy, and the header bar (the
   one chrome element that wasn't already token-driven).

   Because the app reads every color/font through var(), this
   flips the whole suite look from one file. Retune the accent
   or canvas in theme.css and it ripples here too.
   ============================================================ */

/* ---------- 1) TOKEN REMAP (the big lever) ---------- */
:root{
  /* surfaces: cream → cool near-white */
  --paper:      var(--ct-canvas);
  --paper-2:    var(--ct-surface);
  --builder-bg: var(--ct-canvas);
  --preview-bg: #E8E8ED;
  --white:      var(--ct-surface);

  /* text: warm grays → cool grays, near-black ink */
  --ink:        var(--ct-ink);
  --muted:      var(--ct-ink-2);
  --faint:      var(--ct-ink-3);
  --disabled:   var(--ct-ink-4);
  --disabled-2: #CDCDD2;

  /* accent = actions/links → CineThreads blue */
  --accent:       var(--ct-accent);
  --accent-hover: var(--ct-accent-hover);
  --accent-tint:  var(--ct-accent-tint);

  /* status */
  --green: var(--ct-green);

  /* hairlines → light neutral rules */
  --hair:   var(--ct-line);
  --hair-2: var(--ct-hair);
  --hair-3: var(--ct-hair);
  --hair-4: var(--ct-canvas);

  /* type: one system (SF), monospace retired */
  --font-ui:      var(--ct-font);
  --font-display: var(--ct-font);
  --font-title:   var(--ct-font);
  --font-mono:    var(--ct-font);

  /* --- other apps (budgets/contracts/invoicing/vault/northwrite) name the
         same roles differently; map those too so one skin covers the suite --- */
  --panel:   var(--ct-surface);   /* card / sheet surface */
  --bg:      var(--ct-canvas);    /* vault / northwrite canvas */
  --line:    var(--ct-line);
  --line-2:  var(--ct-line);
  --line-3:  var(--ct-hair);
  --line-4:  var(--ct-hair);
  --faint-2: var(--ct-ink-4);
  --ui:      var(--ct-font);
  --display: var(--ct-font);
  --mono:    var(--ct-font);
}
/* keep numeric columns aligned without a monospace face */
.mono{ font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ---------- 2) TITLE SCALE — one page-title look suite-wide, left-aligned ---------- */
.bebas{ font-family: var(--ct-font) !important; font-weight: 600 !important; letter-spacing: -.02em !important; }
/* every app's primary page title matches the Library title (30px SF 600, flush left) */
.dash-title, .acct-title, .trav-title, .sh-title,
.h1, .head h1, .ph-title, .home-h1,
.imp-intro .t, .imp-prev-head .t{
  font-size: var(--ct-t1) !important; font-weight: 600 !important;
  letter-spacing: -.022em !important; text-align: left !important;
}
.section-title, .mh-title, .set-title, .te-t, .bde-title, .bd-ov-t,
.nw-pick-h, .share-modal-title{
  font-size: var(--ct-t2) !important; letter-spacing: -.01em !important;
}

/* ---------- 3) EYEBROWS — drop the kicker above titles ---------- */
.eyebrow, .bde-eyebrow, .sh-eyebrow{ display: none !important; }

/* ---------- 4) HEADER BAR — lift the dark nsheader into light chrome ---------- */
.nsh-bar, .nsh-bar *, .nsh-ctx, .nsh-ctx *{ font-family: var(--ct-font) !important; }

.nsh-bar{ background: var(--ct-surface) !important; border-bottom: 1px solid var(--ct-line) !important; }
.nsh-word{ color: var(--ct-ink) !important; font-weight: 700 !important; letter-spacing: .02em !important; }
/* page title / breadcrumb living in the bar */
.nsh-title{ font-family: var(--ct-font); font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ct-ink); white-space: nowrap; }
.nsh-title .crumb-root, .nsh-title .crumb-link{ color: var(--ct-ink); cursor: pointer; }
/* main section (first crumb) stays bold via .nsh-title's 600; everything after it is regular */
.nsh-title .crumb-root:not(:first-child), .nsh-title .crumb-link:not(:first-child){ font-weight: 400 !important; }
.nsh-title span:not(.crumb-root):not(.crumb-link){ font-weight: 400 !important; }
.nsh-title .crumb-root:hover, .nsh-title .crumb-link:hover{ color: var(--ct-accent); }
.nsh-title .crumb-sep{ color: var(--ct-ink-4); margin: 0 7px; }
.nsh-dot{ background: var(--ct-brand) !important; }
.nsh-switch{ background: var(--ct-surface-2) !important; border-color: var(--ct-line) !important; }
.nsh-switch:hover{ border-color: var(--ct-ink-3) !important; }
.nsh-sub{ color: var(--ct-ink-2) !important; }
.nsh-chev{ border-top-color: var(--ct-ink-3) !important; }
.nsh-tab{ color: var(--ct-ink-2) !important; }
.nsh-tab:hover{ color: var(--ct-ink) !important; }
.nsh-tab.on{ color: var(--ct-ink) !important; box-shadow: inset 0 -2px 0 var(--ct-accent) !important; }
.nsh-ic{ border-color: var(--ct-line) !important; color: var(--ct-ink-2) !important; }
.nsh-ic:hover{ border-color: var(--ct-ink-3) !important; color: var(--ct-ink) !important; }
.nsh-primary{ background: var(--ct-accent) !important; }
.nsh-primary:hover{ background: var(--ct-accent-hover) !important; }
.nsh-av{ background: var(--ct-brand-tint) !important; color: var(--ct-brand) !important; }
.nsh-signin{ background: var(--ct-accent) !important; border-color: var(--ct-accent) !important; }
.ns-hsearch{ background: var(--ct-surface-2) !important; border-color: var(--ct-line) !important; }
.ns-hsearch input{ color: var(--ct-ink) !important; }
.nsh-crumb{ color: var(--ct-ink-2) !important; }

/* context sub-row (breadcrumb · save · document tools) */
.nsh-ctx{ background: var(--ct-surface-2) !important; border-bottom-color: var(--ct-line) !important; color: var(--ct-ink-2) !important; }
.nsh-ctx b, .nsh-ctx strong{ color: var(--ct-ink) !important; }
.nsh-ctool{ background: var(--ct-surface) !important; border-color: var(--ct-line) !important; color: var(--ct-ink) !important; }
.nsh-ctool:hover{ border-color: var(--ct-ink-3) !important; }
.nsh-track{ background: var(--ct-line) !important; }
.nsh-track i{ background: var(--ct-accent) !important; }
.nsh-pct{ color: var(--ct-ink) !important; }
.nsh-todo{ color: var(--ct-brand) !important; }

/* switcher / overflow / account popovers (already light — refresh coral bits) */
.nsh-menu{ border-color: var(--ct-line) !important; }
.nsh-appd{ background: var(--ct-accent) !important; }
.nsh-cd{ color: var(--ct-accent) !important; }
.nsh-app.cur{ background: var(--ct-accent-tint) !important; }
.nsh-seg button.on{ background: var(--ct-ink) !important; color: var(--ct-surface) !important; }

/* ---------- 5) PERSISTENT SIDEBAR (ct-sidebar.js) ---------- */
.ct-side{
  position: fixed; left: 0; top: 0; bottom: 0; width: 224px; z-index: 150;
  background: var(--ct-side); border-right: 1px solid var(--ct-side-line);
  padding: 16px 14px; display: none; flex-direction: column;
  font-family: var(--ct-font);
}
.ct-slogo{ display: flex; align-items: center; gap: 9px; color: var(--ct-side-ink); font-weight: 600; letter-spacing: .005em; font-size: 15px; padding: 2px 6px 16px; }
/* logo +25% (2026-07-21, Lowell: "pretty small right now") — 20→25 / 15→19 */
.ct-slogo svg{ width: 25px; height: 25px; flex: none; }
.ct-slogo .ct-word{ width: auto; height: 19px; flex: none; }
.ct-nav-list{ display: flex; flex-direction: column; gap: 1px; }
.ct-nav{ display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 8px; color: var(--ct-side-txt); font-size: 13.5px; text-decoration: none; position: relative; }
.ct-nav svg{ width: 19px; height: 19px; color: var(--ct-side-icon); flex: none; }
.ct-nav:hover{ background: var(--ct-hair); color: var(--ct-side-ink); }
.ct-nav.on{ color: var(--ct-side-ink); font-weight: 600; }
.ct-nav.on svg{ color: var(--ct-brand); }
.ct-nav.on::before{ content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 2px; background: var(--ct-brand); border-radius: 2px; }
.ct-suser{ margin-top: auto; display: flex; align-items: center; gap: 9px; padding-top: 12px; border-top: 1px solid var(--ct-side-line); }
.ct-uav{ width: 30px; height: 30px; border-radius: 50%; background: var(--ct-brand-tint); color: var(--ct-brand); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: none; }
.ct-uinfo{ min-width: 0; }
.ct-uname{ font-size: 12.5px; color: var(--ct-side-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-urole{ font-size: 11px; color: var(--ct-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* desktop / tablet-landscape: make room for the sidebar; the sidebar carries
   the logo + app nav, so drop the header's brand + app-switcher to avoid dupes */
@media (min-width: 901px){
  body.ct-has-side{ padding-left: 224px; }
  body.ct-has-side .nsh-brand,
  body.ct-has-side .nsh-swwrap{ display: none !important; }
}
/* mobile / tablet-portrait: no sidebar — the top-bar nav returns unchanged */
@media (max-width: 900px){
  #ctSidebar{ display: none !important; }
}

/* ---------- 6) WIDTH — use more of the window (sidebar makes room narrow) ---------- */
/* Call Sheets builder: drop the auto-filled/advisories rail, widen the blocks */
.builder-rail{ display: none !important; }
.builder-body{ grid-template-columns: minmax(0, 1200px) !important; }
/* raise the tight content caps toward the Library width so pages fill more */
.dash-wrap{ max-width: 1360px !important; }
.wrap{ max-width: 1360px !important; }   /* budgets / contracts / invoicing / vault lists */
.trav-wrap{ max-width: 1200px !important; }
/* tighter, consistent gap under the bar now that titles live in it */
.dash-wrap, .wrap, .settings-wrap, .trav-wrap{ padding-top: 20px !important; }

/* ---------- 7) HOME — "On set today" is the dark hero again (2026-07-21) ----------
   This block used to soften the panel to a light card. The dashboard revision puts it
   at the top of the main column as a full-width hero, and Lowell's reference art shows
   it dark — so the earlier softening is deliberately reversed here.
   --ct-ink INVERTS by theme (dark ink on light, light ink on dark), so the dark surface
   has to be pinned per theme rather than read from one token. The label/stat colours are
   fixed light teal because this surface is dark in BOTH themes. */
.home-shoot{
  background: var(--ct-ink) !important; color: var(--ct-canvas) !important;
  border: none !important;
}
:root[data-theme="dark"] .home-shoot{
  background: #0d1314 !important; color: var(--ct-ink) !important;
  border: 1px solid var(--ct-line) !important;
}
.hs-label{ color: #8fb3ad !important; }
.hs-stat{ color: #8fb3ad !important; }
/* Home recent-activity rows: a schedule .av-row 7-col grid rule (double class) was bleeding onto them */
.activity-list .av-row{ display: flex; grid-template-columns: none; gap: 11px; align-items: flex-start; }

/* ---------- 8) ACCOUNT MENU — one home (sidebar chip); hide top-right avatar on desktop ---------- */
@media (min-width: 901px){
  body.ct-has-side .nsh-acct{ display: none !important; }
}
.ct-suser{ cursor: pointer; position: relative; }
.ct-usermenu{
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px);
  background: var(--ct-surface); border: 1px solid var(--ct-line);
  border-radius: var(--ct-r-lg); box-shadow: var(--ct-shadow-pop);
  padding: 6px; display: none; z-index: 200;
}
.ct-usermenu.show{ display: block; }
.ct-um-email{ font-size: 11.5px; color: var(--ct-ink-3); padding: 8px 10px 6px; word-break: break-all; }
.ct-um-item{ display: block; width: 100%; text-align: left; background: none; border: none; font-family: var(--ct-font); font-size: 13px; color: var(--ct-ink); padding: 9px 10px; border-radius: 8px; cursor: pointer; text-decoration: none; }
.ct-um-item:hover{ background: var(--ct-hair); }
.ct-um-row{ display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; font-size: 13px; color: var(--ct-ink); }
.ct-um-seg{ display: inline-flex; border: 1px solid var(--ct-line); border-radius: 8px; overflow: hidden; }
.ct-um-seg button{ border: none; background: none; font-family: var(--ct-font); font-size: 11.5px; color: var(--ct-ink-2); padding: 5px 11px; cursor: pointer; }
.ct-um-seg button.on{ background: var(--ct-ink); color: var(--ct-surface); }
.ct-um-div{ height: 1px; background: var(--ct-line); margin: 5px 4px; }

/* ---------- 9) NO colored left-edge stripes (never use them, anywhere) ---------- */
.catcard, .attncard, .role-banner, .prod-edit-banner, .req-card,
.strip, .advance-block, .imp-gaps, .safety-callout, .eli-log{
  border-left-width: 1px !important;
  border-left-color: var(--ct-line) !important;
}

/* ---------- 10) BUDGET hero: match the sibling white cards (colour via the bar) ---------- */
.heroink{ background: var(--ct-surface) !important; color: var(--ct-ink) !important; border: 1px solid var(--ct-line) !important; }
.heroink .lab, .heroink .meta{ color: var(--ct-ink-3) !important; }

/* ---------- 11) SCHEDULER toolbar "More" menu ---------- */
.sb-morewrap{ position: relative; display: inline-block; }
.sb-moremenu{ position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; background: var(--ct-surface); border: 1px solid var(--ct-line); border-radius: var(--ct-r-lg); box-shadow: var(--ct-shadow-pop); padding: 6px; min-width: 170px; }
.sb-moremenu[hidden]{ display: none; }
.sb-mi{ display: block; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--ct-ink); cursor: pointer; white-space: nowrap; }
.sb-mi:hover{ background: var(--ct-hair); }
.sb-mi.danger{ color: var(--ct-red); }

/* ══ §12 · Cinethread sign-in (/app) — brand-locked dark, simple, no marketing ══ */
.ct-login{position:fixed;inset:0;background:#16171A;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 22px;overflow:auto}
.ct-login-in{width:100%;max-width:340px;text-align:center;display:flex;flex-direction:column;align-items:center}
.ct-login-mark{height:44px;width:auto;display:block;margin-bottom:24px}
.ct-login-h{font-size:24px;font-weight:600;letter-spacing:-0.02em;color:#F7F5F0;margin:0}
.ct-login-sub{font-size:14px;color:#9a988f;line-height:1.45;margin:8px 0 0;max-width:280px}
.ct-login-google{margin-top:26px;width:100%;height:48px;background:#F7F5F0;border:none;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:500;color:#16171A;cursor:pointer;font-family:inherit}
.ct-login-google:hover{background:#fff}
.ct-login-google svg{width:18px;height:18px}
.ct-login-or{display:flex;align-items:center;gap:12px;width:100%;margin:18px 0;color:#6E6C66;font-size:12px}
.ct-login-or::before,.ct-login-or::after{content:"";flex:1;height:1px;background:rgba(247,245,240,0.12)}
.ct-login-email{display:flex;width:100%;gap:8px}
.ct-login-email input{flex:1;height:46px;background:rgba(247,245,240,0.06);border:1px solid rgba(247,245,240,0.16);border-radius:11px;padding:0 14px;font-size:15px;color:#F7F5F0;outline:none;font-family:inherit}
.ct-login-email input::placeholder{color:#6E6C66}
.ct-login-email input:focus{border-color:#2F7D75}
.ct-login-email button{width:46px;height:46px;flex:none;background:#2F7D75;border:none;border-radius:11px;color:#fff;font-size:17px;cursor:pointer;font-family:inherit}
.ct-login-email button:hover{background:#276a63}
.ct-login-fine{font-size:12px;color:#83817A;line-height:1.5;margin-top:20px}
.ct-login-fine a{color:#7FC2B8;text-decoration:none}
.ct-login-fine a:hover{text-decoration:underline}
.ct-login-back{margin-top:34px;font-size:13px;color:#83817A;text-decoration:none}
.ct-login-back:hover{color:#F7F5F0}

/* ============================================================
   DARK MODE — coverage for components that predate the theme
   ------------------------------------------------------------
   Generated 2026-07-21. styles.css carries ~330 hardcoded light
   colours; the older surfaces already have dark overrides, but
   newer components (schedule toolbar, banners, meal/move bars,
   side boxes, some buttons) never got any — they rendered as
   white blocks with near-invisible text on the dark canvas.

   These are DARK-ONLY overrides on purpose: light mode is signed
   off, so it stays byte-for-byte untouched. Each light value is
   mapped to the matching --ct-* token by hue (neutral→surface,
   green→green-tint, amber→amber-tint, red→red-tint, blue→chip),
   so they track the palette instead of pinning new hexes.

   The call-sheet document preview (.sheet*) is deliberately
   EXCLUDED — it represents a printed page and stays paper, the
   same call Script Notes makes for the PDF page.
   ============================================================ */
:root[data-theme="dark"] .btn-outline-ink { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .start-panel { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .daycard { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .card { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .card.off { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .advance-block { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .advance-block.last { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .m-confirm .b { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .m-sched-head { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .proj-card { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .proj-card:hover { border-color: var(--ct-line) !important; }
:root[data-theme="dark"] .prow { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .pseg.sent { background: var(--ct-green-tint) !important; border-color: var(--ct-line) !important; }
:root[data-theme="dark"] .pseg.progress { background: var(--ct-amber-tint) !important; border-color: var(--ct-line) !important; }
:root[data-theme="dark"] .pday.sent { background: var(--ct-green-tint) !important; border-color: var(--ct-line) !important; }
:root[data-theme="dark"] .pday.progress { background: var(--ct-amber-tint) !important; border-color: var(--ct-line) !important; }
:root[data-theme="dark"] .rcell { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .day-row { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .set-block { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .loc2-card { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .cs-panel { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .cs-av.miss { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .cs-row .nf:focus { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .cs-sw { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .cs-guard { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .cs-guard .nf { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .ct-chip.signed { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .ct-chip.need { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .ct-chip.need:hover { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .ct-chip.link { background: var(--ct-chip) !important; }
:root[data-theme="dark"] .ct-chip.link:hover { background: var(--ct-chip) !important; }
:root[data-theme="dark"] .banner-cover { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .sl-grp.crit { border-color: var(--ct-line) !important; background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .sl-fc.on { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .pfs-row:hover { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .sl-daychip { background: var(--ct-chip) !important; }
:root[data-theme="dark"] .sl-grp.crit .sl-daychip.all { background: var(--ct-red-tint) !important; }
:root[data-theme="dark"] .sl-box { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .sl-asn { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .sl-mob { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .sl-tg.plate, .sl-tgtog.plate.on { background: var(--ct-chip) !important; }
:root[data-theme="dark"] .sl-tg.vfx, .sl-tgtog.vfx.on { background: var(--ct-chip) !important; }
:root[data-theme="dark"] .sl-tg.song, .sl-tgtog.song.on { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .sl-tg.insert, .sl-tgtog.insert.on { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .sl-tg.safety, .sl-tgtog.safety.on { background: var(--ct-red-tint) !important; }
:root[data-theme="dark"] .sl-tgtog { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .dn-pull { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .dn-pull:hover { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .dn-sugg { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .dn-chip { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .wx-city { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .float-menu { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .sc2-castchip { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .sc2-ck { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .bsp-ic { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .tbl-row.tbl-total { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .modal-card { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .send-warn { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .btn-ghost-ink { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .ie-chip { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .ie-seg { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .track-stat .ts { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .preview-bar { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .copy-link { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .lib-search { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .lib-groupseg .lgs { background: var(--ct-surface) !important; }
:root[data-theme="dark"] gmp-place-autocomplete, .addr-pac { background: var(--ct-surface) !important; }
:root[data-theme="dark"] gmp-place-autocomplete::part(input) { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .tmsg-thread { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .tmsg-thread.esc { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .tmsg-b.ai { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .ctest-escnote { background: var(--ct-surface) !important; border: 1px solid var(--accent-tint, var(--ct-line)) !important; }
:root[data-theme="dark"] .strip { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .strip[data-stripexpand]:hover { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .btn-danger { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .btn-danger:hover { background: var(--ct-surface) !important; }
:root[data-theme="dark"] #preview { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .imp-card { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .imp-tab { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .imp-input, .imp-textarea { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .imp-stat { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .imp-gaps { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .imp-proj { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .imp-sdn.N { background: var(--ct-chip) !important; }
:root[data-theme="dark"] .imp-chip { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .imp-chip.new { border-color: var(--ct-line) !important; background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .imp-opts { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .login-google svg { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .login-email-row input { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .cal-c.shoot:hover { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .collab-badge.shared-out { background: var(--ct-chip) !important; }
:root[data-theme="dark"] .collab-badge.shared-in { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .share-modal { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .nsrep-opt { background: var(--ct-surface) !important; border: 1px solid var(--line-2, var(--ct-line)) !important; }
:root[data-theme="dark"] .nsrep-opt:hover { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .nsrep-opt .nsrep-ic { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .req-modal { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .req-textarea { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .prop-pending { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .review-modal { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .search-box { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .dash-empty { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .htile-badge.tone-amber { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .htile-badge.tone-green { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .htile-badge.tone-night { background: var(--ct-chip) !important; }
:root[data-theme="dark"] .nu-card:hover { border-color: var(--ct-line) !important; }
:root[data-theme="dark"] .nu-task:hover { border-color: var(--ct-line) !important; }
:root[data-theme="dark"] #builder .note-item.flagged { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .note-preset { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .safety-callout { border: 1px solid var(--ct-line) !important; background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .rail-c { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .nw-pick-item { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .nw-acc { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .trip-card { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .trip-pill.p-active { background: var(--ct-green-tint) !important; }
:root[data-theme="dark"] .trip-menu { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .tv-chip { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .trav-card { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .tv-leg.shoot { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .tv-leg.shoot:hover { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .tv-lico.hotel { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .tl-f select.tl-sel { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .tl-flag { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .trav-list { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .tv-segb { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .db-travel-sub { border-bottom: 1px solid var(--hair-4, var(--ct-line)) !important; }
:root[data-theme="dark"] .db-tog-sw::after { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .trav-backbtn { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .tvp-with input { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .tvd-chip.ok { background: var(--ct-green-tint) !important; }
:root[data-theme="dark"] .tvd-chip.warn { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .tvd-chip.bad { background: var(--ct-red-tint) !important; }
:root[data-theme="dark"] .tvd-card { background: var(--ct-surface) !important; border: 1px solid var(--hair, var(--ct-line)) !important; }
:root[data-theme="dark"] .tvd-pull { border: 1px solid var(--hair, var(--ct-line)) !important; }
:root[data-theme="dark"] .tvp-chip { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .tvp-crm { background: var(--ct-chip) !important; }
:root[data-theme="dark"] .arr-tbl th { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .arr-minor { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .arr-pill.ok { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .arr-pill.warn { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .trav-tblcard { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .trm-av { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .trm-av.minor { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .trm-minor { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .trm-pill.ok { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .trm-pill.wait { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .trm-pill.none { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .tvl-tile.flight { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .tvl-tile.ground { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .tvl-tile.hotel { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .tvl-mini { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .tvl-conf { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .trav-shband { background: var(--ct-chip) !important; }
:root[data-theme="dark"] .ts-teamrow { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .tb-menu { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .org-tile { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .orgm-cardwrap { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .orgm-av { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .orgm-av.own { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .lvl-full { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .lvl-edit { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .lvl-propose { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .lvl-view { background: var(--ct-chip) !important; }
:root[data-theme="dark"] .perm-cell { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .om-lim { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .sc2-startedit { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .sc2-startmid:hover, .sc2-startmid:focus { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .lm-chip.ok { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .lm-chip.camp { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .lm-chip.map { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .lbv-grp { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .lbv-av.miss { background: var(--ct-red-tint) !important; }
:root[data-theme="dark"] .lbv-av.gold { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .lbv-guard { background: var(--ct-amber-tint) !important; border: 1px solid var(--ct-line) !important; }
:root[data-theme="dark"] .lbv-ptag { background: var(--ct-chip) !important; }
:root[data-theme="dark"] .lbv-tagedit { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .sb2-daygroup { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .sb2-strip.strip-N { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .sc-color select { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .sc-filter input { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .sb2-sync.conflict { background: var(--ct-red-tint) !important; }
:root[data-theme="dark"] .sched-cf { border: 1px solid var(--ct-line) !important; background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .turnbar { background: var(--ct-surface-2) !important; border: 1px solid var(--ct-line) !important; }
:root[data-theme="dark"] .av-turn input { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .av-row select, .av-row input { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .bn-text:focus { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .sb2-dn.N { background: var(--ct-chip) !important; }
:root[data-theme="dark"] .sched-rail { background: var(--ct-surface-2) !important; border: 1px solid var(--ct-line) !important; }
:root[data-theme="dark"] .sched-rail-body .sb2-strip { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .sched-toolbar { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .sched-toolbar .sb-link.danger:hover { background: var(--ct-red-tint) !important; }
:root[data-theme="dark"] .sb2-strip.strip-N:hover { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .bd-ov-card { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .bde-card { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .bde-add:focus { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .cm-dept:focus { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .cm-label:focus { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .sb2-unsched { border-color: var(--ct-line) !important; background: var(--ct-surface) !important; }
:root[data-theme="dark"] .sb2-unschead { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .sb2-unsched.empty .sb2-unschead { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .pr-day { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .pr-day.locked { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .pr-lock:hover { background: var(--ct-surface-2) !important; }
:root[data-theme="dark"] .cal-row input[type=date] { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .cal-holadd { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .eli-name:focus { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .eli-tag { background: var(--ct-chip) !important; }
:root[data-theme="dark"] .eli-tier { background: var(--ct-chip) !important; }
:root[data-theme="dark"] .eli-tier.lead { background: var(--ct-amber-tint) !important; }
:root[data-theme="dark"] .nx2-row.soon { background: var(--ct-surface) !important; }
:root[data-theme="dark"] .cal-panel { background: var(--ct-surface) !important; }

/* striped banners — gradients were skipped by the pass above; their stripes and the
   dark key text both had to be remapped or the bars stayed white with invisible labels. */
:root[data-theme="dark"] .sb2-banner { background: repeating-linear-gradient(45deg, var(--ct-surface-2), var(--ct-surface-2) 8px, var(--ct-hair) 8px, var(--ct-hair) 16px) !important; }
:root[data-theme="dark"] .bn-meal { background: repeating-linear-gradient(45deg, var(--ct-surface-2), var(--ct-surface-2) 8px, var(--ct-hair) 8px, var(--ct-hair) 16px) !important; }
:root[data-theme="dark"] .bn-move { background: repeating-linear-gradient(45deg, var(--ct-amber-tint), var(--ct-amber-tint) 8px, var(--ct-surface-2) 8px, var(--ct-surface-2) 16px) !important; }
:root[data-theme="dark"] .bn-meal .bn-k { color: var(--ct-green) !important; }
:root[data-theme="dark"] .bn-move .bn-k { color: var(--ct-amber) !important; }