/* =============================================================================
   HolyGrail shell.css — ONE file (do not split).
   Rollback: web/_bak/shell.css.ROLLBACK.css
           + web/_bak/shell.css.20260730_131359.bak
   =============================================================================
   LAYER MAP (edit in the right section; cascade-critical tails stay late)
   ---------------------------------------------------------------------------
   0. TOC / cascade laws          (this block)
   1. TOKENS                      :root + html.dark vars, pantone --seg-* defs
   2. RESET + BASE                box model, body, type
   3. CHROME                      header, tabs, project forms, theme
   4. SURFACES (light)            tables → bid → breakdown → gantt → docks → docs
   5. DARK OVERRIDES              html.dark twin blob (exceptions not on tokens)
   3b.SCROLLBAR POLICY            after dark; only place for html.dark * + tabs kill
   6. DOCK EXTRAS                 CF balance stroke, gbar edges
   7. SEGMENT PAINT (apply)       wash/accent on rows (after dark bulk)
   8. CREW + RECRUIT
   9. TIER TEST + TIER SECURITY   security hide LAST among chrome policies
  10. PRIMITIVES (late winners)   focus ring, select hairline restyle, status menu
   ---------------------------------------------------------------------------
   CASCADE LAWS
   • Sticky stack (page scroll): header 48 + tabs 40 = 88; + keys/gfilters ~45 →
     table/seg sticky tops use 133. Doc heads use 79 (header+tabs only).
     Gantt #v-tr height: calc(100vh - 88px). Prefer --hg-* when touching math.
   • Opaque sticky backgrounds — translucent washes alone let rows bleed under
     parked headers. Pattern: linear-gradient(wash), page-base-color.
   • Never re-introduce a second html.dark * { scrollbar-* } outside §3b.
   • Form chrome final look is owned by §10 (select restyle). Do not restyle
     borders on .flt/.gfilters/.crew-pick/header .proj-select in surfaces.
   • Segment colors: define --seg-* on [data-seg] in §1; apply geometry in §7.
     Use --seg-wash / --seg-wash-2 (aliases --seg-tint* provided).
   • Tier hide (§9) uses !important; keep after layout so plain display rules
     cannot resurface restricted UI.
   • Cache-bust: bump shell.css?v= AND every js/?v= in index.html to SAME mark.
   ============================================================================= */

/* ===== 1. TOKENS ===== */
:root {
  /* layout chrome (sticky math) */
  --hg-header-h: 48px;
  --hg-tabs-h: 40px;
  --hg-chrome-h: 88px;           /* header + tabs */
  --hg-keys-approx: 45px;        /* keys / filter band under tabs (page scroll) */
  --hg-sticky-under-keys: 133px; /* 88 + ~45 — table th, seg-head */
  --hg-sticky-under-chrome: 79px; /* docs: header+tabs only */
  --hg-gantt-label-w: 380px;
  --hg-week-w: 56px;
  --hg-day-w: 11.2px;

  /* cashflow theme */
  --cf-spend: #455a7a44;
  --cf-spend-b: #455a7a33;
  --cf-deficit: #c0392b33;
  --cf-deficit-b: #c0392b66;
  --cf-income: #27ae60;
  --cf-label: #455a7a;
  --cf-deficit-t: #c0392b;
  --cf-deficit-glow: rgba(192, 57, 43, 0.95);
}

html.dark {
  --cf-spend: #8a94a626;
  --cf-spend-b: #8a94a61a;
  --cf-deficit: #a05a5a2e;
  --cf-deficit-b: #a05a5a55;
  --cf-income: #3fae6e;
  --cf-label: #6f7076;
  --cf-deficit-t: #c08a8a;
  --cf-deficit-glow: rgba(224, 96, 96, 0.95);
}

/* Pantone segment tokens (custom props resolve at compute time; defs live here).
   Alias --seg-tint* → wash so older consumers cannot go undefined. */
[data-seg="preprod"]      { --seg-accent:#c98f4a; --seg-wash:#c98f4a26; --seg-wash-2:#c98f4a14; }
[data-seg="characters"]   { --seg-accent:#b85c8a; --seg-wash:#b85c8a26; --seg-wash-2:#b85c8a14; }
[data-seg="environments"] { --seg-accent:#4f9e6a; --seg-wash:#4f9e6a26; --seg-wash-2:#4f9e6a14; }
[data-seg="props"]        { --seg-accent:#7a68c4; --seg-wash:#7a68c426; --seg-wash-2:#7a68c414; }
[data-seg="mocap"]        { --seg-accent:#3aa5ad; --seg-wash:#3aa5ad26; --seg-wash-2:#3aa5ad14; }
[data-seg="shots"]        { --seg-accent:#c45c4a; --seg-wash:#c45c4a26; --seg-wash-2:#c45c4a14; }
[data-seg="support"]      { --seg-accent:#6b7c93; --seg-wash:#6b7c9326; --seg-wash-2:#6b7c9314; }
[data-seg="other"]        { --seg-accent:#9a9aa2; --seg-wash:#9a9aa226; --seg-wash-2:#9a9aa214; }
html.dark [data-seg="preprod"]      { --seg-accent:#a8763c; --seg-wash:#a8763c26; --seg-wash-2:#a8763c14; }
html.dark [data-seg="characters"]   { --seg-accent:#a04e76; --seg-wash:#a04e7626; --seg-wash-2:#a04e7614; }
html.dark [data-seg="environments"] { --seg-accent:#3f8457; --seg-wash:#3f845726; --seg-wash-2:#3f845714; }
html.dark [data-seg="props"]        { --seg-accent:#6655a8; --seg-wash:#6655a826; --seg-wash-2:#6655a814; }
html.dark [data-seg="mocap"]        { --seg-accent:#2f8a91; --seg-wash:#2f8a9126; --seg-wash-2:#2f8a9114; }
html.dark [data-seg="shots"]        { --seg-accent:#a84a3b; --seg-wash:#a84a3b26; --seg-wash-2:#a84a3b14; }
html.dark [data-seg="support"]      { --seg-accent:#5a6a80; --seg-wash:#5a6a8026; --seg-wash-2:#5a6a8014; }
html.dark [data-seg="other"]        { --seg-accent:#6f7076; --seg-wash:#6f707626; --seg-wash-2:#6f707614; }
[data-seg] {
  --seg-tint: var(--seg-wash);
  --seg-tint-2: var(--seg-wash-2);
}

/* ===== 2. RESET + BASE ===== */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* Reserve scrollbar lane always — expanding Breakdown must not shove header/tabs sideways */
  html { scrollbar-gutter: stable; }
  body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #17181c; background: #fbfbfb; font-size: 12px; line-height: 1.4;
    transition: background .15s, color .15s;
    -webkit-font-smoothing: antialiased;
  }
  /* Seamless Hydra strip: Skin2 starts exactly at Skin3's right edge. */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background:
      url("assets/HydraSkin3.jpg") left -8vw center / auto 100% no-repeat,
      url("assets/HydraSkin2.jpg") calc(-8vw + 100vh) center / auto 100% no-repeat;
    filter: invert(1) grayscale(.4) brightness(1.02); opacity: .13;
    pointer-events: none;
  }
/* ===== 3. CHROME — header, tabs, project chrome ===== */
  header {
    display: flex; align-items: center; gap: 14px;
    padding: 0 20px; height: 48px; background: #fbfbfb; border-bottom: 1px solid #e8e8e8;
    position: sticky; top: 0; z-index: 40; flex-shrink: 0;
  }
  header .logo { height: 22px; width: auto; flex-shrink: 0; content: url("assets/black_on_white_icon_only.png"); }
  html.dark header .logo { content: url("assets/white_on_black_icon_only.png"); }
  header .proj { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
  .hg-serif { font-family: inherit; }
  .hg-mono { font-family: inherit; font-feature-settings: "tnum"; }
  header .proj-wrap { display: flex; align-items: center; gap: 6px; }
  header .proj-select {
    font-size: 13px; font-weight: 600; letter-spacing: -.01em;
    padding: 3px 8px; border: 1px solid transparent; border-radius: 4px;
    background-color: transparent; color: #17181c; cursor: pointer; min-width: 120px;
  }
  header .proj-select:hover { background-color: #f0f0f0; }
  header .proj-new-btn {
    font-size: 11px; font-weight: 500;
    padding: 4px 10px; border: 1px solid #e0e0e0; border-radius: 4px;
    background: #fff; color: #3c4048; cursor: pointer; white-space: nowrap;
  }
  header .proj-new-btn:hover { border-color: #c8c8c8; color: #17181c; }
  header .proj-edit-btn {
    font-size: 13px; padding: 3px 7px; border: 1px solid transparent;
    border-radius: 4px; background: transparent; color: #9a9aa2;
    cursor: pointer; line-height: 1;
  }
  header .proj-edit-btn:hover { background: #f0f0f0; color: #3c4048; }
  /* New project inline form */
  .proj-new-form {
    display: none; position: absolute; top: 42px; left: 16px; z-index: 50;
    background: #fff; border: 1px solid #e0e0e0; border-radius: 3px; padding: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12); gap: 8px; flex-direction: column; min-width: 280px;
  }
  .proj-new-form.on { display: flex; }
  .proj-new-form label { font-size: 11px; color: #6a7180; font-weight: 600; }
  .proj-new-form input {
    font-size: 13px; padding: 5px 8px; border: 1px solid #e0e0e0; border-radius: 4px; width: 100%;
  }
  .proj-new-form .form-btns { display: flex; gap: 8px; margin-top: 4px; }
  .proj-new-form .form-btns button {
    font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 4px; border: 1px solid #e0e0e0; cursor: pointer;
  }
  .proj-new-form .form-btns .create { background: #17181c; color: #fff; border-color: #17181c; }
  .proj-new-form .form-btns .cancel { background: #fff; color: #6a7180; }
  /* Project settings panel */
  .proj-settings-form {
    display: none; position: absolute; top: 42px; left: 60px; z-index: 50;
    background: #fff; border: 1px solid #e0e0e0; border-radius: 3px; padding: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12); gap: 8px; flex-direction: column; min-width: 280px;
  }
  .proj-settings-form.on { display: flex; }
  .proj-settings-form label { font-size: 11px; color: #6a7180; font-weight: 600; }
  .proj-settings-form input {
    font-size: 13px; padding: 5px 8px; border: 1px solid #e0e0e0; border-radius: 4px; width: 100%;
  }
  .proj-settings-form .form-btns { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
    .proj-settings-form .form-btns button {
      font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 4px; border: 1px solid #e0e0e0; cursor: pointer;
    }
    .proj-settings-form .form-btns .create { background: #17181c; color: #fff; border-color: #17181c; }
    .proj-settings-form .form-btns .dup { background: #fff; color: #3c4048; border-color: #c8c8c8; }
    .proj-settings-form .form-btns .dup:hover { border-color: #17181c; color: #17181c; }
    .proj-settings-form .form-btns .dup:disabled { opacity: .55; cursor: wait; }
    .proj-settings-form .form-btns .cancel { background: #fff; color: #6a7180; }
  header .meta { color: #9a9aa2; font-size: 11px; font-variant-numeric: tabular-nums; }
  .agent-strip-head { margin-left: auto; font-size: 11px; color: #9a9aa2; display: flex; gap: 8px; align-items: center; cursor: pointer; }
  .dot { width: 6px; height: 6px; border-radius: 50%; background: #2e9e5b; display: inline-block; }
  .theme-btn {
    border: 1px solid #e0e0e0; background: #fff; color: #3c4048;
    border-radius: 4px; padding: 4px 10px; font-size: 11px; cursor: pointer; font-weight: 500;
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
  }
  .theme-btn:hover { border-color: #c8c8c8; color: #17181c; }
  .theme-btn .ico { font-size: 13px; line-height: 1; }
  .tabs {
    display: flex; align-items: stretch; gap: 22px; background: #fbfbfb; padding: 0 20px;
    border-bottom: 1px solid #e8e8e8; position: sticky; top: 48px; z-index: 39;
    /* 40px border-box = 39 content + 1 bottom border — full integer px, no subpixel overflow */
    height: 40px; overflow-x: auto; overflow-y: hidden;
    flex-shrink: 0;
  }
  .tab {
    display: inline-flex; align-items: center;
    padding: 0; font-size: 12px; color: #84848c; cursor: pointer;
    border: none; border-bottom: 2px solid transparent; border-radius: 0;
    white-space: nowrap; background: transparent;
    /* sit on the strip border — no negative margin (that was the +1px overflow source) */
    margin-bottom: 0;
    transition: color .12s, border-color .12s;
  }
  .tab:hover { color: #17181c; background: transparent; }
  .tab.on { color: #17181c; border-bottom-color: #17181c; background: transparent; font-weight: 500; }
  .view { display: none; }
  .view.on { display: block; }

  /* ===== 4. SURFACES — shared table (track + crew bones) ===== */
  table.track { width: 100%; border-collapse: collapse; background: transparent; }
  table.track th, #crewTable th {
    text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
    color: #828a99; padding: 7px 10px; border-bottom: 1px solid #e8e8e8; background: #fbfbfb;
    /* header 48 + tabs 40 + keys ~45 */
    position: sticky; top: 133px; z-index: 34;
  }
  table.track td, #crewTable td { padding: 5px 10px; border-bottom: 1px solid #eef0f4; }
  table.track tr:hover td, #crewTable tr:hover td { background: #f6f6f6; }
  .st { font-size: 9.5px; padding: 1px 8px; border-radius: 3px; white-space: nowrap; }
  .st-ip { background: #d8efe2; color: #1e6e44; }
  .st-wtg { background: #e4e8ee; color: #5c657a; }
  .st-rev { background: #f6e8d3; color: #96660f; }
  .st-cmpt, .st-appr { background: #dde5f0; color: #17181c; }
  .st-reopen { background: #f6dcd7; color: #a93226; }
  /* clickable status-select: looks like a pill but opens a dropdown */
  select.st-select {
    font-size: 9.5px; padding: 1px 16px 1px 8px; border-radius: 3px; white-space: nowrap;
    border: 1px solid transparent; cursor: pointer; outline: none;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='currentColor' opacity='0.5' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 4px center;
    transition: border-color 0.15s;
  }
  select.st-select:hover { border-color: #00000022; }
  select.st-select:focus { border-color: #17181c; }
  select.st-select.st-ip { background-color: #d8efe2; color: #1e6e44; }
  select.st-select.st-wtg { background-color: #e4e8ee; color: #5c657a; }
  select.st-select.st-rev { background-color: #f6e8d3; color: #96660f; }
  select.st-select.st-cmpt, select.st-select.st-appr { background-color: #dde5f0; color: #17181c; }
  select.st-select.st-reopen { background-color: #f6dcd7; color: #a93226; }
  .linked { color: #17181c; font-weight: 600; cursor: pointer; }
  .linked:hover { text-decoration: underline; }
  .badge-seed { font-size: 9px; color: #8a93a3; }
  .shot-grp td { background: #f4f4f4; font-weight: 600; font-size: 10.5px; letter-spacing: .02em; color: #6a6a72; padding: 6px 10px; }
  .mine { outline: 2px solid #2e9e5b44; outline-offset: -2px; background: #f4faf6 !important; }

  /* ===== 4a. tracker table segment edge (vars from §1) ===== */
  /* data-seg rows get the lightest tint as a subtle left-edge + background wash */
  table.track tr[data-seg] td { background: var(--seg-wash-2); border-left: 3px solid var(--seg-accent); }
  table.track tr[data-seg] td:first-child { border-left: 3px solid var(--seg-accent); }
  table.track tr[data-seg]:hover td { background: var(--seg-wash); }

  /* ===== 4b. bid table ===== */
  /* .keys layout/sticky lives with .gfilters further down — only colors here */
  .keys b { color: #17181c; }
  .keys .lock { color: #96660f; font-size: 11px; }
  .bidwrap { max-width: 980px; margin: 0 auto; padding: 16px 20px 60px; }
  .summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 28px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; }
  .sum-card { background: transparent; border: none; border-right: 1px solid #e8e8e8; border-radius: 0; padding: 16px 18px 14px; }
  .sum-card:last-child { border-right: none; }
  .sum-card .l { font-size: 10.5px; color: #9a9aa2; letter-spacing: .02em; margin-bottom: 6px; text-transform: none; }
  .sum-card .v { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin-top: 0; font-variant-numeric: tabular-nums; }
  .sum-card .s { font-size: 11px; color: #9a9aa2; margin-top: 3px; }
  .sum-card.total { background: transparent; border-color: #e8e8e8; }
  .sum-card.total .l, .sum-card.total .s { color: #9a9aa2; }
  .sum-card.total .v { color: #b07410; }
  table.bid { width: 100%; border-collapse: collapse; background: #fff; }
  table.bid .dept td { background: #f4f4f4; font-weight: 600; font-size: 11px; letter-spacing: .02em; color: #6a6a72; padding: 7px 10px; border-top: 1px solid #e8e8e8; }
  table.bid .dept td .tots { float: right; font-weight: 600; color: #17181c; letter-spacing: 0; }
  table.bid td { padding: 4px 10px; border-bottom: 1px solid #f0f0f0; }
  table.bid tr.line:hover td { background: #f6f6f6; }
  .c-name { width: 40%; } .c-stage { width: 28%; color: #5b6170; }
  .c-days { width: 10%; text-align: right; font-variant-numeric: tabular-nums; }
  .c-plan { width: 12%; text-align: right; font-variant-numeric: tabular-nums; color: #6a7180; }
  .c-src { width: 10%; text-align: right; }
  table.bid .subtotal td { background: #f4f2ea; font-weight: 600; border-top: 1px solid #e8e8e8; font-variant-numeric: tabular-nums; }
  table.bid .grand td { background: #17181c; color: #fff; font-weight: 700; padding: 8px 10px; }
  .src { font-size: 10px; padding: 1px 7px; border-radius: 3px; }
  .src-agent { background: #e2ecf7; color: #2a5a8a; }
  .src-human { background: #eee9dc; color: #7a6f4d; }
  .src-delta { background: #f6e2d0; color: #b05a1e; }
  .delta td { background: #fdf3ec; } .delta .c-name { color: #b05a1e; }
  td.editable { cursor: text; } td.editable:hover { background: #f3eedd; }
  td.editing { background: #fff8e6; outline: 2px solid #d9b345; outline-offset: -2px; }
  .add-line { width: 100%; text-align: left; border: none; background: none; cursor: pointer; color: #9a9aa2; font-size: 11px; padding: 5px 10px; border-bottom: 1px solid #f0f0f0; }
  .add-line:hover { color: #17181c; background: #faf8f0; }
  .toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #17181c; color: #fff; padding: 8px 18px; border-radius: 3px; font-size: 12px; display: none; z-index: 90; }

  /* ===== 4c. breakdown — asset tree + filters + modal ===== */
  .flt { font-size: 11px; color: #6a7180; display: flex; align-items: center; gap: 5px; }
  .flt select, .flt input { border: 1px solid #e0e0e0; border-radius: 4px; padding: 3px 7px; font-size: 11px; background-color: #fff; }
  .btn-new {
  border: 1px solid #1d3349; background: linear-gradient(#2e4c6d, #17181c); color: #fff;
  border-radius: 4px; padding: 4px 13px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff22, 0 1px 2px #1d334955;
}
.btn-new:hover { background: linear-gradient(#35567b, #2b4a6b); }
.btn-new:active { box-shadow: inset 0 1px 3px #00000040; transform: translateY(1px); }
  .btn-ghost {
  border: 1px solid #c9c3b4; background: linear-gradient(#ffffff, #f6f4ee);
  border-radius: 4px; padding: 4px 13px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer; color: #4a5262;
  box-shadow: inset 0 1px 0 #ffffff, 0 1px 1px #00000010;
}
.btn-ghost:hover { border-color: #b3ab98; color: #17181c; }
.btn-ghost:active { box-shadow: inset 0 1px 3px #00000018; transform: translateY(1px); }
  .seg-block { margin-bottom: 14px; }
  /* Sticky within .seg-block so the open segment's header parks under .keys
     while its card list scrolls — always reachable to roll the segment back up.
     top = header 48 + tabs 40 + keys ~45 (= same stack as table.track th). */
  .seg-head {
    display: grid; grid-template-columns: 18px minmax(148px, 1fr) minmax(210px, 1.6fr) 64px 118px;
    align-items: baseline; column-gap: 12px; padding: 4px 18px 8px 0;
    position: sticky; top: 133px; z-index: 33;
    /* Opaque page base first — wash alone is translucent and list rows would bleed */
    background: #fbfbfb; border: none; border-bottom: 1px solid #17181c; border-radius: 0; cursor: pointer; user-select: none;
    font-weight: 600; font-size: 13px; letter-spacing: -.01em; color: #17181c; margin-bottom: 0;
  }
  .seg-head:hover { filter: none; }
  .seg-head .tw { width: 14px; color: #9a9aa2; font-size: 11px; transition: transform .12s; }
  .seg-block.open > .seg-head .tw { transform: rotate(90deg); }
  .seg-head .seg-new {
    justify-self: start;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #3c4048;
    border-radius: 4px;
    font-weight: 500;
    padding: 2px 10px;
    font-size: 11px;
    cursor: pointer;
  }
  .seg-head .seg-new:hover { border-color: #c8c8c8; color: #17181c; }
  .seg-head .seg-meta { justify-self: start; font-weight: 600; color: #17181c; font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0; white-space: nowrap; }
  .seg-head .seg-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: #9a9aa2; font-size: 11px; letter-spacing: 0; }
  .seg-body { display: none; padding-left: 26px; }
  .seg-block.open > .seg-body { display: block; }
  .asset { background: transparent; border: none; border-bottom: 1px solid #efefef; border-radius: 0; margin-bottom: 0; overflow: visible; }
  .asset-head { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; user-select: none; }
  .asset-head:hover { background: #f6f6f6; }
  .asset-head .tw { width: 14px; color: #9a9aa2; font-size: 11px; transition: transform .12s; }
  .asset.open .asset-head .tw { transform: rotate(90deg); }
  .asset-head .a-name { font-weight: 500; font-size: 12.5px; }
  .asset-head .a-name-input {
    font: inherit; font-weight: 500; font-size: 12.5px;
    color: inherit; background: transparent; border: 1px solid transparent;
    border-radius: 4px; padding: 1px 4px; margin: -1px -4px;
    min-width: 60px; width: auto;
  }
  .asset-head .a-name-input:hover { border-color: #e0e0e0; background: #fff; }
  .asset-head .a-name-input:focus { border-color: #17181c; background: #fff; outline: none; }
  html.dark .a-name-input { color: inherit; }
  html.dark .a-name-input:hover { border-color: #3a3b40; background: #1a1b1f; }
  html.dark .a-name-input:focus { border-color: #e4e4e7; background: #1a1b1f; }
  .asset-head .a-type { font-size: 10.5px; color: #9a9aa2; background: transparent; padding: 0; border-radius: 0; }
  .asset-head .a-weight { font-size: 10.5px; border: 1px solid #e0e0e0; border-radius: 4px; padding: 1px 4px; background: #f8f8f8; color: #5b6170; cursor: pointer; outline: none; }
  .asset-head .a-weight:hover { border-color: #c8c8ce; }
  .g-weight { font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: 500; }
  .g-weight-hero { background: #e8d441; color: #665200; }
  .g-weight-background { background: #d4dce4; color: #455a7a; }
  .w-badge { font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 500; }
  .w-hero { background: #e8d441; color: #665200; }
  .w-midground { background: #eee; color: #666; }
  .w-background { background: #d4dce4; color: #455a7a; }
  .asset-head .a-items { color: #9a9aa2; font-size: 11px; }
  .asset-head .a-days { margin-left: auto; font-weight: 500; color: #3c3c44; font-variant-numeric: tabular-nums; }
  .asset-head .a-src { font-size: 10px; }
  .asset-head .a-del { border: none; background: none; color: #c8c8ce; cursor: pointer; font-size: 13px; padding: 2px 6px; }
  .asset-head .a-dup { border: none; background: none; color: #c8c8ce; cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 4px; }
  .asset-head .a-del:hover { color: #b07410; }
  .asset-head .a-dup:hover { color: #17181c; background: transparent; }
  .asset-body { display: none; border-top: 1px solid #efefef; padding: 4px 0 8px 34px; }
  .asset.open .asset-body { display: block; }
  .task-row { display: grid; grid-template-columns: 34px 1fr 80px 130px 110px 64px 76px 26px; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid #f4f4f4; }
  .task-row .t-crew { display: flex; align-items: center; gap: 4px; }
  .crew-pick { border: 1px solid #e0e0e0; border-radius: 4px; font-size: 10.5px; padding: 1px 4px; background-color: #fff; color: #3c4048; max-width: 76px; }
  .crew-pick.un { color: #b03a2a; border-color: #e3b8ae; background: #fdf3ec; }
  .t-spinner { display: flex; align-items: center; gap: 0; }
  .t-spinner .sp { border: 1px solid #e0e0e0; background: #f4f2ea; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; color: #5b6170; user-select: none; }
  .t-spinner .sp:hover { background: #e8e4d4; }
  .t-spinner .sp:first-child { border-radius: 4px 0 0 4px; border-right: none; }
  .t-spinner .sp:last-child { border-radius: 0 4px 4px 0; border-left: none; }
  .t-spinner .t-days { border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; width: 34px; text-align: center; font-size: 11px; padding: 2px 0; font-variant-numeric: tabular-nums; cursor: text; }
  .t-cost { text-align: right; font-variant-numeric: tabular-nums; color: #17181c; font-weight: 600; font-size: 11px; }
  .t-cost.t1-badge { position: relative; }
  .t-cost.t1-badge::after { content: 'T1'; position: absolute; top: -6px; right: -4px; font-size: 8px; color: #96660f; font-weight: 400; }
  .asset-cost-row { display: grid; grid-template-columns: 34px 1fr 80px 130px 110px 64px 76px 26px; gap: 8px; align-items: center; padding: 5px 0 3px; border-top: 1px solid #e8e8e8; font-weight: 600; font-size: 11px; }
  .master-totals { margin-top: 22px; background: transparent; border: 1px solid #e8e8e8; border-radius: 4px; padding: 16px 18px; }
  .master-totals h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #7d8494; margin-bottom: 12px; }
  .mt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 18px; font-size: 12px; align-items: start; }
  .mt-grid .mt-col { display: flex; flex-direction: column; }
  .mt-grid .mt-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid #f0f0f0; }
  .mt-grid .mt-row .mtv { font-variant-numeric: tabular-nums; font-weight: 600; color: #17181c; }
  .mt-grid .mt-sub { display: flex; justify-content: space-between; padding: 5px 0 3px; border-top: 1px solid #e8e8e8; font-weight: 600; margin-top: auto; }
  .mt-grid .mt-sub .mtv { color: #17181c; }
  .mt-grand { margin-top: 12px; padding-top: 10px; border-top: 2px solid #17181c; display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; }
  .mt-grand .mtv { color: #17181c; }
  .mt-rate-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; padding: 8px 0 2px; margin-top: 4px;
    font-size: 11px; color: #6a7180; font-weight: 500;
  }
  .mt-rate-row label { color: #6a7180; font-weight: 500; cursor: text; }
  .mt-rate-input {
    display: inline-flex; align-items: center; gap: 2px;
    font-variant-numeric: tabular-nums; font-weight: 600; color: #17181c;
  }
  .mt-rate-input input {
    width: 64px; border: none; border-bottom: 1px solid #e0e0e0; border-radius: 0;
    background: transparent; padding: 2px 4px; font-size: 12px; font-weight: 600;
    color: #17181c; font-variant-numeric: tabular-nums; text-align: right;
  }
  .mt-rate-input input:focus { outline: none; border-bottom-color: #17181c; }
  .mt-rate-input input:disabled { opacity: .55; }
  .task-row:last-child { border: none; }
  .task-row .t-item { color: #5b6170; font-size: 11.5px; }
  .task-row .t-stage { font-size: 12px; }
  .task-row .t-days { text-align: right; font-variant-numeric: tabular-nums; cursor: text; border-radius: 4px; padding: 1px 5px; }
  .task-row .t-days:hover { background: #f3eedd; }
  .task-row .t-plan { font-size: 10px; color: #8a93a3; text-align: right; }
  .task-row .t-del { border: none; background: none; color: #cfc9b8; cursor: pointer; }
  .task-row .t-del:hover { color: #b03a2a; }
  .task-add { border: none; background: none; color: #9a9aa2; font-size: 11px; cursor: pointer; padding: 5px 0 2px; }
  .task-add:hover { color: #17181c; }
  .na-presets-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
  .na-presets-row select { border: 1px solid #e0e0e0; border-radius: 4px; padding: 5px 9px; font-size: 12.5px; flex: 1; }
  /* New-task schedule macro: reuse the real Gantt classes, only constrain height. */
  .na-gantt-wrap { display:flex; margin-top:12px; border:1px solid #c5cad4; overflow:hidden; max-height:320px; position:relative; }
  .na-gantt-wrap::before {
    content:""; position:absolute; inset:0; z-index:0;
    background:url("assets/HydraSkin4.jpg") center / cover no-repeat;
    filter: invert(1) grayscale(.4) brightness(1.02); opacity:.13;
    pointer-events:none;
  }
  #naModal .modal { background:rgba(255,255,255,.92); position:relative; overflow:hidden; }
  #naModal .modal::before {
    content:""; position:absolute; inset:0; z-index:0;
    background:url("assets/HydraSkin4.jpg") center / cover no-repeat;
    filter: invert(1) grayscale(.4) brightness(1.02); opacity:.13;
    pointer-events:none; border-radius:8px;
  }
  #naModal .modal > * { position:relative; z-index:1; }
  .na-gantt-wrap .gantt-labels { width:340px; position:static; box-shadow:none; background:rgba(251,251,253,.82); }
  .na-gantt-wrap .gantt-timeline { min-width:0; background:transparent; }
  .na-gantt-wrap .gscroll { max-height:278px; overflow:auto; }
  .na-gantt-wrap .na-lane-body { position:relative; min-width:max-content; background:transparent; }
  .na-gantt-wrap .lane { height:30px; background:rgba(255,255,255,.55); }
  .na-gantt-wrap .labels-head { height:42px; }
  .na-gantt-wrap .gantt-labels > .task-add { display:block; width:100%; text-align:left; padding:8px 16px; border:none; border-top:1px solid #e3e6ec; background:rgba(247,248,250,.82); color:#9a9aa2; font-size:11px; cursor:pointer; }
  .na-gantt-wrap .gantt-labels > .task-add:hover { color:#17181c; }
  /* Editable inputs inside g-row for the macro: stage name, days, offset */
  .na-gantt-wrap .g-row input.na-stage { flex:1; min-width:0; border:1px solid transparent; border-radius:3px; padding:2px 4px; font-size:11.5px; font-weight:500; color:#343942; background:transparent; }
  .na-gantt-wrap .g-row input.na-stage:hover, .na-gantt-wrap .g-row input.na-stage:focus { border-color:#c5cad4; background:#fff; outline:none; }
  .na-gantt-wrap .g-row input.na-num { width:42px; border:1px solid transparent; border-radius:3px; padding:2px 3px; font-size:11px; font-weight:500; color:#343942; background:transparent; text-align:center; }
  .na-gantt-wrap .g-row input.na-num:hover, .na-gantt-wrap .g-row input.na-num:focus { border-color:#c5cad4; background:#fff; outline:none; }
  .na-gantt-wrap .g-row .na-rm { border:none; background:none; color:#c8c8ce; cursor:pointer; font-size:14px; padding:2px 4px; flex-shrink:0; }
  .na-gantt-wrap .g-row .na-rm:hover { color:#b03a2a; }
  .footnote { margin-top: 18px; font-size: 12px; color: #6d7280; line-height: 1.6; }
  .footnote b { color: #3c4048; }
  .modal-bg { position: fixed; inset: 0; background: #1c1f2699; z-index: 85; display: none; align-items: center; justify-content: center; }
  .modal-bg.open { display: flex; }
  .modal { background: #fff; border-radius: 8px; padding: 22px 24px; width: 460px; }
  .modal h3 { margin-bottom: 14px; cursor: move; user-select: none; }
  .mrow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .mlab { width: 76px; font-size: 11px; color: #6a7180; text-transform: uppercase; letter-spacing: .05em; }
  .mrow input, .mrow select { border: 1px solid #e0e0e0; border-radius: 4px; padding: 5px 9px; font-size: 12.5px; flex: 1; }
  .mrow .stg { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; background: #f4f2ea; border-radius: 4px; padding: 3px 8px; margin: 2px 3px 2px 0; cursor: pointer; }
  .mrow .stg.off { opacity: .45; }
  .mpath { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: #455a7a; background: #f0f3f8; border-radius: 4px; padding: 7px 10px; margin: 8px 0; min-height: 16px; }
  .mfoot { display: flex; gap: 10px; margin-top: 12px; }
  /* Legacy .na-item card styles removed — schedule macro now uses real Gantt .g-row */

  /* ===== 4d. gantt shell + bars ===== */
  .gbar {
    position: absolute; top: 6px; height: 18px; border-radius: 3px; cursor: grab;
    display: flex; align-items: center; padding: 0 6px; font-size: 10px; font-weight: 600;
    color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
    box-sizing: border-box; z-index: 1;
  }
  .gbar.ip { background: #2e8b57; } .gbar.wtg { background: #97a3b6; }
  .gbar.rev { background: #c28a31; color: #241806; } .gbar.appr { background: #4a6f9c; } .gbar.cmpt { background: #507b60; } .gbar.reopen { background: #c0392b; }
  .gbar.draft { background: repeating-linear-gradient(45deg,#97a3b6,#97a3b6 5px,#7f8ca0 5px,#7f8ca0 10px); }
  .gbar.grp { height: 22px; top: 3px; font-size: 11px; border-radius: 4px; }
  /* Breakdown still uses page-scroll sticky under header+tabs (88). Gantt
     overrides below — its scroll root is #gscroll, not the document. */
  .gfilters { display: flex; gap: 10px; align-items: center; padding: 5px 16px 8px; background: #f7f8fa; border-bottom: 1px solid #e9ebf0; font-size: 11px; color: #6a7180; flex-wrap: wrap; position: sticky; top: 88px; z-index: 35; }
  .keys { display: flex; gap: 26px; padding: 10px 16px 12px; background: #fbfaf7; border-bottom: 1px solid #e9e6dd; font-size: 12px; flex-wrap: wrap; position: sticky; top: 88px; z-index: 35; }
  .gfilters select, .gfilters input { border: 1px solid #e0e0e0; border-radius: 4px; padding: 2px 7px; font-size: 11px; background-color: #fff; }
  .gfilters input { width: 90px; }
  /* Gantt view shell: chart scrolls on its own; cashflow is a sibling dock
     at the bottom of the VIEW (window), never nested in the chart scroll.
     Filters sit ABOVE the scroll root as a plain flex band — not sticky —
     so week headers cannot park under the tabs strip past the filter row. */
  #v-tr.view.on {
    display: flex; flex-direction: column;
    height: calc(100vh - 88px); /* header 48 + tabs 40 */
    min-height: 0; overflow: hidden;
  }
  #v-tr .gfilters {
    position: static; flex-shrink: 0; z-index: 10;
    /* Opaque band — chart/weekhdr must not show through under dark mode either */
    background: #f7f8fa;
  }
  #v-tr .gantt-shell {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  }
  /* 48 header + 40 tabs + gfilters — remaining height is gantt-wrap */
  .gantt-wrap {
    display: flex; overflow: auto; position: relative; flex: 1 1 auto; min-height: 0;
    align-items: flex-start;
  }
  .gantt-labels {
    width: 380px; flex-shrink: 0; background: #fbfbfd; position: sticky; left: 0; z-index: 6;
    border-right: 1px solid #c5cad4; overflow: visible; box-shadow: 4px 0 10px #00000014;
  }
  .gantt-labels .labels-head { height: 42px; background: #f0f2f5; border-bottom: 1px solid #dfe2e8; position: sticky; top: 0; z-index: 7; }
  .gantt-labels .g-head {
    display: flex; align-items: center; gap: 6px; background: #e9ecf1; padding: 0 8px 0 16px;
    font-weight: 600; font-size: 12px; letter-spacing: -.01em; color: #30343d;
    border-bottom: 1px solid #dfe2e8; height: 30px; box-sizing: border-box; overflow: hidden;
  }
  .gantt-labels .g-head .g-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gantt-labels .g-head .days { margin-left: auto; flex-shrink: 0; font-weight: 600; color: #3d6b35; letter-spacing: 0; font-variant-numeric: tabular-nums; font-size: 10px; }
  .gantt-labels .g-row {
    display: flex; align-items: center; gap: 6px; padding: 0 8px 0 28px; border-bottom: 1px solid #e3e6ec;
    height: 30px; box-sizing: border-box; background: #fbfcfd; overflow: hidden;
  }
  .gantt-labels .g-row .g-stage {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #343942; font-size: 11.5px; font-weight: 500;
  }
  .gantt-labels .g-row .st { flex-shrink: 0; max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
  .gantt-labels .g-row button.st-select { flex-shrink: 0; max-width: 90px; }
  .gantt-labels .gantt-crew-pick { flex: 0 1 76px; min-width: 56px; max-width: 76px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gantt-labels .g-row .who { flex-shrink: 0; color: #6f7784; font-size: 10px; max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gantt-timeline { flex: 1; min-width: 1960px; position: relative; z-index: 1; overflow: visible; }
  .gantt-timeline .weekhdr { position: sticky; top: 0; z-index: 3; }
  #ganttBody { position: relative; }
  /* ===== 4e. workload dock (sibling above cashflow; worker × week day grid) =====
       Share week X-scale with Gantt. Horizontal scroll synced in js/workload.js.
       ONE scroller: each worker is name+cells on the SAME row (sticky name).
       Body height = min(all rows, half window − title) via --wl-body-h. */
    .workload-dock {
      flex-shrink: 0; box-sizing: border-box;
      display: flex; flex-direction: column;
      height: calc(28px + var(--wl-body-h, 156px)); /* title + body */
      border-top: 2px solid #17181c; background: #f4f1ef;
      position: relative; z-index: 9;
      overflow: hidden;
      transition: height .22s ease;
    }
    .workload-dock.is-collapsed {
      height: 28px;
    }
    .workload-dock .wl-titlebar {
      flex-shrink: 0; height: 28px; box-sizing: border-box;
      display: flex; align-items: center; gap: 8px;
      padding: 0 12px;
      background: #ebe4df;
      border-bottom: 1px solid #cfc4bb;
      cursor: pointer; user-select: none;
      color: #5a3d2e; font-size: 11px; font-weight: 600;
      letter-spacing: .03em;
    }
    .workload-dock .wl-titlebar:hover { background: #e3d9d1; }
    .workload-dock .wl-titlebar:focus-visible {
      outline: 2px solid #b07050; outline-offset: -2px;
    }
    .workload-dock .wl-caret {
      display: inline-block; width: 12px; text-align: center;
      font-size: 10px; line-height: 1; color: #7a5a48;
      transition: transform .22s ease;
    }
    .workload-dock.is-collapsed .wl-caret {
      transform: rotate(-90deg);
    }
    .workload-dock .wl-titlebar-label { font-weight: 700; }
    .workload-dock .wl-titlebar-sub {
      font-weight: 500; color: #8a7364; letter-spacing: 0;
    }
    .workload-dock .wl-titlebar-meta {
      margin-left: auto; font-weight: 600; color: #6a5548;
      font-variant-numeric: tabular-nums; letter-spacing: 0;
    }
    .workload-dock .wl-titlebar-meta.is-warn {
      color: #c0392b;
    }
    .workload-dock .wl-body {
      flex: 0 0 auto;
      height: var(--wl-body-h, 156px); box-sizing: border-box;
      display: flex; min-height: 0;
      overflow: hidden;
      transition: height .22s ease;
    }
    .workload-dock.is-collapsed .wl-body {
      height: 0;
    }
    /* Single scroller: X mirrored from Gantt, Y for long crew lists. */
    .workload-dock .wl-scroll {
      flex: 1; min-width: 0;
      overflow: auto;
      position: relative;
      scrollbar-width: thin;
    }
    #workloadPanel {
      position: relative; min-width: 100%;
      height: var(--wl-track-h, 156px);
      background: #f4f1ef;
    }
    #wlTrack {
      position: relative; width: 100%; height: 100%;
      display: flex; flex-direction: column;
    }
    /* Each worker: sticky name column + week cells locked together. */
    .workload-dock .wl-worker-row {
      display: flex; flex-direction: row; align-items: stretch;
      height: 26px; flex-shrink: 0; box-sizing: border-box;
      border-bottom: 1px solid #e6ddd6;
      cursor: pointer; user-select: none;
    }
    .workload-dock .wl-worker-row:hover .wl-name,
    .workload-dock .wl-worker-row:hover .wl-cells {
      background: #e8dfd8;
    }
    .workload-dock .wl-worker-row:focus-visible {
      outline: 2px solid #b07050; outline-offset: -2px;
    }
    .workload-dock .wl-worker-row.is-active .wl-name {
      background: #d9e4f2;
      color: #26415e;
      font-weight: 700;
      box-shadow: inset 3px 0 0 #4a7ab5;
    }
    .workload-dock .wl-worker-row.is-active .wl-cells {
      background: #d9e4f22e;
    }
    .workload-dock .wl-worker-row.is-active .wl-cell:not(.is-overload) {
      background: #c5d6ee55;
    }
    .workload-dock .wl-name {
      position: sticky; left: 0; z-index: 2;
      width: 380px; flex-shrink: 0; box-sizing: border-box;
      display: flex; align-items: center;
      padding: 0 12px 0 16px;
      border-right: 1px solid #cfc4bb;
      background: #f4f1ef;
      font-size: 11.5px; font-weight: 500; color: #3c322c;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .workload-dock .wl-name-empty {
      color: #8a7364; font-weight: 500; font-style: italic;
      cursor: default;
    }
    .workload-dock .wl-name-text {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .workload-dock .wl-cells {
      position: relative; flex: 0 0 auto;
      height: 26px; box-sizing: border-box;
      background: #f4f1ef;
    }
    .workload-dock .wl-cell {
      position: absolute; top: 0; bottom: 0;
      box-sizing: border-box;
      border-left: 1px solid #e8e0d9;
      display: flex; align-items: center; justify-content: center;
      font-size: 10.5px; font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: #5a5048;
      background: transparent;
    }
    .workload-dock .wl-cell.has-load {
      background: #d9e4f244;
      color: #2f3b4d;
    }
    /* Over capacity (>5 workdays in the week column) */
    .workload-dock .wl-cell.is-overload {
      background: #c0392b33;
      color: #a02820;
      border-left-color: #c0392b66;
      font-weight: 700;
      animation: wl-overload-pulse 1.6s ease-in-out infinite;
      will-change: box-shadow, filter;
      z-index: 1;
    }
    @keyframes wl-overload-pulse {
      0%, 100% {
        box-shadow:
          inset 0 0 0 1px rgba(192, 57, 43, 0.35),
          0 0 4px rgba(192, 57, 43, 0.35),
          0 0 10px rgba(192, 57, 43, 0.2);
        filter: brightness(1);
      }
      50% {
        box-shadow:
          inset 0 0 0 1px rgba(192, 57, 43, 0.85),
          0 0 8px rgba(192, 57, 43, 0.85),
          0 0 18px rgba(192, 57, 43, 0.55),
          0 0 28px rgba(224, 80, 70, 0.35);
        filter: brightness(1.15);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .workload-dock .wl-cell.is-overload {
        animation: none;
        box-shadow:
          inset 0 0 0 1px rgba(192, 57, 43, 0.7),
          0 0 8px rgba(192, 57, 43, 0.55);
      }
    }

  /* ===== 4f. cashflow dock (sibling of chart; pins to bottom of #v-tr) =====
     Share only the week X-scale with the Gantt. Horizontal scroll is synced
     in js/cashflow.js so milestone markers + weekly bars line up.
     Geometry (matches js/cashflow.js): BAR_AREA_H 92 + LABEL_STRIP_H 96 = 188 body.
          Title bar (28) sits above body; click toggles .is-collapsed → body slides away. */
       .cashflow-dock {
       flex-shrink: 0; box-sizing: border-box;
       display: flex; flex-direction: column;
       height: 216px; /* 28 title + 188 body */
  border-top: 2px solid #17181c; background: #f0f3f8;
  position: relative; z-index: 8;
  overflow: hidden;
  transition: height .22s ease;
       }
  .cashflow-dock.is-collapsed {
    height: 28px; /* title bar only */
  }
  .cashflow-dock .cf-titlebar {
    flex-shrink: 0; height: 28px; box-sizing: border-box;
    display: flex; align-items: center; gap: 8px;
    padding: 0 12px;
    background: #e8ecf2;
    border-bottom: 1px solid #c5cad4;
    cursor: pointer; user-select: none;
    color: #26415e; font-size: 11px; font-weight: 600;
    letter-spacing: .03em;
  }
  .cashflow-dock .cf-titlebar:hover { background: #dfe5ee; }
  .cashflow-dock .cf-titlebar:focus-visible {
    outline: 2px solid #4a7ab5; outline-offset: -2px;
  }
  .cashflow-dock .cf-caret {
    display: inline-block; width: 12px; text-align: center;
    font-size: 10px; line-height: 1; color: #5a6578;
    transition: transform .22s ease;
  }
  .cashflow-dock.is-collapsed .cf-caret {
    transform: rotate(-90deg); /* points right when body is tucked away */
  }
  .cashflow-dock .cf-titlebar-label { font-weight: 700; }
    .cashflow-dock .cf-titlebar-sub {
      font-weight: 500; color: #6f7784; letter-spacing: 0;
    }
    /* Title-bar meta — totals inline, right (mirrors .wl-titlebar-meta).
         Only the cashflow-deficit fragment (.cf-meta-bit.is-warn) is red. */
      .cashflow-dock .cf-titlebar-meta {
        margin-left: auto; font-weight: 600; color: #455a7a;
        font-variant-numeric: tabular-nums; letter-spacing: 0;
        font-size: 11px; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        max-width: min(62vw, 720px);
      }
      .cashflow-dock .cf-titlebar-meta .cf-meta-sep {
        font-weight: 500; color: inherit; opacity: .7;
      }
      .cashflow-dock .cf-titlebar-meta .cf-meta-bit.is-warn {
        color: var(--cf-deficit-t, #c0392b);
        font-weight: 700;
      }
      .cashflow-dock .cf-body {
  flex: 0 0 auto;
  height: 188px; box-sizing: border-box;
  display: flex; min-height: 0;
  overflow: hidden;
  transition: height .22s ease;
    }
  .cashflow-dock.is-collapsed .cf-body {
    height: 0;
  }
  .cashflow-dock .cf-label {
    width: 380px; flex-shrink: 0; box-sizing: border-box;
    border-right: 1px solid #c5cad4; background: #f0f3f8;
    padding: 0; font-size: 12px; color: #7d8494;
    display: flex; align-items: stretch;
  }
  .cashflow-dock .cf-label-inner {
      flex: 1; display: flex; flex-direction: column;
      height: 100%; min-height: 0; padding: 0 12px; box-sizing: border-box;
      position: relative;
    }
    /* Top block = plot band (92px) — legend only; totals moved to title meta */
    .cashflow-dock .cf-label-top {
      height: 92px; flex-shrink: 0; box-sizing: border-box;
      display: flex; flex-direction: column; justify-content: center; gap: 6px;
      padding: 0;
    }
  .cashflow-dock .cf-label-title {
    font-size: 11px; color: #26415e; font-weight: 600; letter-spacing: .02em;
  }
  .cashflow-dock .cf-label-leg { font-size: 11px; color: var(--cf-label); }
  /* Bottom strip = four 24px value rows — must match track LABEL_STRIP_H */
  .cashflow-dock .cf-label-strip {
    height: 96px; flex-shrink: 0; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: flex-start;
    margin: 0; padding: 0; border-top: 0;
  }
  .cashflow-dock .cf-label-strip .cf-label-leg {
    height: 24px; line-height: 24px; box-sizing: border-box;
    font-size: 11px;
  }
  .cashflow-dock .cf-dot.income { color: var(--cf-income); }
  .cashflow-dock .cf-dot.deficit { color: var(--cf-deficit-t); }
  .cashflow-dock .cf-scroll {
    flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden;
    position: relative;
    scrollbar-width: none;
  }
  .cashflow-dock .cf-scroll::-webkit-scrollbar { display: none; height: 0; }
  #cashflowPanel {
  position: relative; height: 188px; box-sizing: border-box;
  background: #f0f3f8; min-width: 100%;
    }
  #cfTrack { position: absolute; inset: 0; overflow: hidden; }
  .weekhdr { display: flex; background: #f0f2f5; border-bottom: 1px solid #dfe2e8; position: sticky; top: 0; z-index: 5; height: 42px; box-sizing: border-box; }
  .weekhdr .w {
          /* Fixed week column — must match .cell and GANTT_WEEK_W (56).
             flex grow would stretch columns while bars stay on 56px math → misalignment. */
          flex: 0 0 56px;
          width: 56px;
          min-width: 56px;
          max-width: 56px;
          box-sizing: border-box;
          text-align: center;
          font-size: 9px;
          color: #8a93a3;
          padding: 3px 0;
          border-left: 1px solid rgba(138, 147, 163, 0.5);
          line-height: 1.25;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
  .weekhdr .w .start { font-weight: 600; color: #455a7a; }
  .weekhdr .w .end { color: #8a93a3; }
  .gscroll { overflow: auto; }
  .lane { display: flex; border-bottom: 1px solid #e3e6ec; height: 30px; box-sizing: border-box; position: relative; background: #fff; overflow: hidden; }
  .lane .cells,
  .group-head .cells,
  .seg-row.lane-side .cells {
    display: flex;
    flex: 0 0 auto; /* grow to sum of fixed 56px week cells — don't stretch columns */
    position: relative;
    overflow: hidden;
    min-width: 0;
  }
  /* Week column = solid left border on .cell (and .weekhdr .w).
       Day ticks = 4 dashed verticals at exact workday edges (GANTT_DAY_W=11.2px):
       Mon·Tue · Tue·Wed · Wed·Thu · Thu·Fri. Pixel positions lock to bar scale;
       % of a flex-grown cell would drift from header + bar geometry.
       Opacity 50% — orientation only, not chrome. */
    .cell {
      flex: 0 0 56px;
      width: 56px;
      min-width: 56px;
      max-width: 56px;
      box-sizing: border-box;
      border-left: 1px solid rgba(138, 147, 163, 0.5);
      background-color: transparent;
      background-image:
        linear-gradient(to bottom, rgba(154, 163, 176, 0.5) 50%, transparent 50%),
        linear-gradient(to bottom, rgba(154, 163, 176, 0.5) 50%, transparent 50%),
        linear-gradient(to bottom, rgba(154, 163, 176, 0.5) 50%, transparent 50%),
        linear-gradient(to bottom, rgba(154, 163, 176, 0.5) 50%, transparent 50%);
      background-size: 1px 6px, 1px 6px, 1px 6px, 1px 6px;
      /* 11.2 · 22.4 · 33.6 · 44.8 — left edge of each 1px tick */
      background-position: 11.2px 0, 22.4px 0, 33.6px 0, 44.8px 0;
      background-repeat: repeat-y;
    }
  /* Lane-side partners of segment/group headers host the collapsed roll-up bar
     on the SAME 30px row — never a second spacer. position:relative for .gbar. */
  .group-head {
    display: flex; align-items: center; gap: 8px; background: #e9ecf1;
    padding: 0; font-weight: 700; font-size: 11px; letter-spacing: .06em; color: transparent;
    border-bottom: 1px solid #dfe2e8; height: 30px; box-sizing: border-box; overflow: hidden;
    position: relative;
  }
  .group-head .days { margin-left: auto; font-weight: 600; color: transparent; }
  .group-head .cells { display: flex; flex: 0 0 auto; position: relative; overflow: hidden; min-width: 0; height: 100%; }
  .seg-row {
    display: flex; align-items: center; gap: 6px; background: #dfe4ec; padding: 0 8px;
    font-weight: 700; font-size: 11px; letter-spacing: .05em; color: #2f3b4d;
    border-bottom: 1px solid #c9d0dc; height: 30px; box-sizing: border-box; overflow: hidden;
  }
  .seg-row > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .seg-row .days { margin-left: auto; flex-shrink: 0; font-weight: 600; color: #17181c; font-variant-numeric: tabular-nums; letter-spacing: 0; font-size: 10px; }
  .seg-row.lane-side {
    color: transparent; padding: 0; position: relative; overflow: hidden;
  }
  .seg-row.lane-side .days { color: transparent; }
    .seg-row.lane-side .cells { display: flex; flex: 0 0 auto; position: relative; overflow: hidden; min-width: 0; height: 100%; }
      .collapse-btn { border: 1px solid #c0c6d2; background: linear-gradient(#ffffff, #f3f4f7); border-radius: 3px; font-size: 9px; padding: 0 6px; cursor: pointer; color: #5b6272; box-shadow: inset 0 1px 0 #ffffff; flex-shrink: 0; }
  .collapse-btn:hover { background: #eef0f4; }
  /* Segment/group headers: whole label row toggles expand (chevron removed). */
  .gantt-labels .gantt-toggle-row { cursor: pointer; user-select: none; }
  .gantt-labels .gantt-toggle-row:hover { filter: brightness(0.985); }
  .gantt-labels .gantt-toggle-row:focus-visible { outline: 2px solid #4a6f9c; outline-offset: -2px; }
  .block-btn { border: 1px solid #17181c; background: #fff; color: #17181c; border-radius: 3px; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 2px 10px; cursor: pointer; font-weight: 600; }
  .block-btn.on { background: #17181c; color: #fff; }
  .block-btn:hover { background: #1d3349; color: #fff; }
  /* ===== 4g. money/doc views ===== */
  .doc {
    max-width: 820px; margin: 0 auto; padding: 28px 34px;
    margin-top: 16px; margin-bottom: 40px;
    background: transparent; border: none;
  }
  .doc h1 { font-size: 18px; margin-bottom: 2px; }
  .doc .docsub { color: #6a7180; font-size: 11px; margin-bottom: 18px; }
  .doc table { width: 100%; border-collapse: collapse; background: transparent; }
  .doc td, .doc th { padding: 6px 8px; border-bottom: 1px solid #eef0f4; font-size: 12px; }
  .doc th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #7d8494; border-bottom: 2px solid #dfe2e8; position: sticky; top: 79px; z-index: 34; background: #fff; padding-bottom: 10px; }
  .doc .num { text-align: right; font-variant-numeric: tabular-nums; }
  .doc .doc-total td { font-weight: 700; border-top: 2px solid #17181c; }
  .doc .gen { font-size: 10px; color: #8a93a3; margin-top: 14px; }

  /* ===== 4h. drawer ===== */
  .drawer { position: fixed; right: 0; top: 0; bottom: 0; width: 360px; background: #fff; border-left: 1px solid #d7dae1; box-shadow: -6px 0 24px #0002; z-index: 80; padding: 20px; display: none; overflow-y: auto; }
  .drawer.open { display: block; }
  .drawer h2 { font-size: 16px; margin-bottom: 4px; }
  .drawer .kv { display: grid; grid-template-columns: 100px 1fr; gap: 6px 10px; margin-top: 14px; font-size: 12px; }
  .drawer .kv .k { color: #7d8494; }
  .drawer .x { position: absolute; top: 12px; right: 14px; cursor: pointer; color: #8a93a3; font-size: 16px; }
  .drawer .thread { margin-top: 14px; padding: 10px; background: #f6f7f9; border-radius: 7px; font-size: 11.5px; color: #4a5262; }
  .drawer h4 { margin-top: 16px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8a93a3; }
  .drawer ul { margin: 6px 0 0 16px; font-size: 12px; }
/* ===== 5. DARK OVERRIDES — hairline structure, near-black ===== */
  html.dark body { color: #e4e4e7; background: #141517; }
  html.dark body::before { filter: none; opacity: .14; }
  html.dark header { background: #141517; border-bottom-color: #26272b; }
  html.dark header .proj-select { color: #e4e4e7; }
  html.dark header .proj-select:hover { background-color: #1e1f23; }
  html.dark header .proj-new-btn { background: transparent; border-color: #3a3b40; color: #b8b9be; }
  html.dark header .proj-new-btn:hover { border-color: #55565c; color: #e4e4e7; }
  html.dark header .proj-edit-btn { color: #6f7076; }
  html.dark header .proj-edit-btn:hover { background: #1e1f23; color: #b8b9be; }
  html.dark .proj-new-form, html.dark .proj-settings-form { background: #1a1b1f; border-color: #3a3b40; box-shadow: 0 8px 24px #00000055; }
  html.dark .proj-new-form input, html.dark .proj-settings-form input { background: #141517; border-color: #3a3b40; color: #e4e4e7; }
  html.dark .proj-new-form input:focus, html.dark .proj-settings-form input:focus { border-color: #8a8c92; outline: none; }
  html.dark .proj-new-form .form-btns .create, html.dark .proj-settings-form .form-btns .create { background: #d9a441; border-color: #d9a441; color: #1a1508; }
    html.dark .proj-new-form .form-btns .create:hover, html.dark .proj-settings-form .form-btns .create:hover { background: #e2b155; }
    html.dark .proj-settings-form .form-btns .dup { background: transparent; color: #c8c8ce; border-color: #3a3b40; }
    html.dark .proj-settings-form .form-btns .dup:hover { border-color: #8a8c92; color: #e4e4e7; }
    html.dark .proj-new-form .form-btns .cancel, html.dark .proj-settings-form .form-btns .cancel { background: transparent; color: #6f7076; border-color: #3a3b40; }
  html.dark header .meta { color: #6f7076; }
  html.dark .agent-strip-head { color: #6f7076; }
  html.dark .dot { background: #3fae6e; }
  html.dark .theme-btn { background: transparent; border-color: #3a3b40; color: #b8b9be; }
  html.dark .theme-btn:hover { border-color: #55565c; color: #e4e4e7; }
  html.dark .tabs { background: #141517; border-bottom-color: #26272b; }
  html.dark .tab { color: #6f7076; }
  html.dark .tab:hover { color: #e4e4e7; background: transparent; }
  html.dark .tab.on { color: #e4e4e7; border-bottom-color: #d9a441; }
  html.dark table.track { background: transparent; }
  html.dark table.track th, html.dark #crewTable th { border-bottom-color: #26272b; background: #17181b; color: #6f7076; }
  html.dark table.track td { border-bottom-color: #1e1f23; }
  html.dark table.track tr:hover td, html.dark #crewTable tr:hover td { background: #1a1b1f; }
  html.dark .st-ip { background: #1e2e26; color: #7db892; }
  html.dark .st-wtg { background: #24262b; color: #8b8c92; }
  html.dark .st-rev { background: #33291a; color: #c9a468; }
  html.dark .st-cmpt { background: #2b2d20; color: #a8ad7d; }
  html.dark .st-appr { background: #1f2a36; color: #7d9cba; }
  html.dark .st-reopen { background: #342225; color: #c08a92; }
  html.dark select.st-select.st-ip { background-color: #1e2e26; color: #7db892; }
  html.dark select.st-select.st-wtg { background-color: #24262b; color: #8b8c92; }
  html.dark select.st-select.st-rev { background-color: #33291a; color: #c9a468; }
  html.dark select.st-select.st-cmpt { background-color: #2b2d20; color: #a8ad7d; }
  html.dark select.st-select.st-appr { background-color: #1f2a36; color: #7d9cba; }
  html.dark select.st-select.st-reopen { background-color: #342225; color: #c08a92; }
  html.dark select.st-select option { background-color: #1a1b1f; color: #e4e4e7; }
  html.dark .linked { color: #7d9cba; }
  html.dark .shot-grp td { background: #17181b; color: #6f7076; }
  html.dark .mine { outline-color: #3fae6e44; background: #1a2420 !important; }
  /* Opaque — sticky segment heads park under keys; content must not bleed through */
  html.dark .keys { background: #141517; border-bottom-color: #26272b; }
  html.dark .keys b { color: #7d9cba; }
  html.dark .keys .lock { color: #c9a468; }
  html.dark .summary { border-top-color: #26272b; border-bottom-color: #26272b; }
  html.dark .sum-card { border-right-color: #26272b; }
  html.dark .sum-card .l { color: #6f7076; }
  html.dark .sum-card .s { color: #6f7076; }
  html.dark .sum-card.total { border-color: #26272b; }
  html.dark .sum-card.total .l, html.dark .sum-card.total .s { color: #6f7076; }
  html.dark .sum-card.total .v { color: #d9a441; }
  html.dark table.bid { background: transparent; }
  html.dark table.bid .dept td { background: #17181b; color: #6f7076; border-top-color: #26272b; }
  html.dark table.bid .dept td .tots { color: #7d9cba; }
  html.dark table.bid td { border-bottom-color: #1e1f23; }
  html.dark table.bid tr.line:hover td { background: #1a1b1f; }
  html.dark table.bid .subtotal td { background: transparent; border-top-color: #26272b; }
  html.dark table.bid .grand td { background: #17181b; }
  html.dark .src-agent { background: #1f2a36; color: #7d9cba; }
  html.dark .src-human { background: #2b2d20; color: #a8ad7d; }
  html.dark .src-delta { background: #33291a; color: #c9a468; }
  html.dark .delta td { background: #231d12; }
  html.dark .delta .c-name { color: #c9a468; }
  html.dark td.editable:hover { background: #231d12; }
  html.dark td.editing { background: #2c2414; outline-color: #c9a468; }
  html.dark .add-line { color: #6f7076; border-bottom-color: #1e1f23; }
  html.dark .add-line:hover { color: #7d9cba; background: #1a1b1f; }
  html.dark .toast { background: #24262b; box-shadow: 0 4px 14px #00000066; }
  html.dark .flt { color: #6f7076; }
  html.dark .flt select, html.dark .flt input,
  html.dark .gfilters select, html.dark .gfilters input,
  html.dark .crew-pick,
  html.dark select, html.dark input[type="text"], html.dark input[type="number"] {
    background-color: #1a1b1f; border-color: #3a3b40; color: #e4e4e7;
  }
  html.dark select:focus, html.dark input[type="text"]:focus, html.dark input[type="number"]:focus { border-color: #8a8c92; outline: none; }
  html.dark .btn-new { background: #d9a441; border-color: #d9a441; color: #1a1508; box-shadow: none; }
  html.dark .btn-new:hover { background: #e2b155; }
  html.dark .btn-ghost { background: transparent; border-color: #3a3b40; color: #b8b9be; box-shadow: none; }
  html.dark .btn-ghost:hover { border-color: #55565c; color: #e4e4e7; }
  html.dark .seg-head {
    border-bottom-color: #3a3b40; color: #e4e4e7;
    background: #141517;
  }
  html.dark .seg-head .seg-meta { color: #7d9cba; }
  html.dark .seg-head .seg-new { background: transparent; border-color: #3a3b40; color: #b8b9be; }
  html.dark .seg-head .seg-new:hover { border-color: #55565c; color: #e4e4e7; }
  html.dark .seg-head .seg-hint { color: #6f7076; }
  html.dark .seg-head .tw { color: #6f7076; }
  html.dark .asset { border-bottom-color: #1e1f23; }
  html.dark .asset-head:hover { background: #1a1b1f; }
  html.dark .asset-head .tw { color: #6f7076; }
  html.dark .asset-head .a-type { color: #6f7076; background: transparent; }
  html.dark .asset-head .a-weight { background: #1a1b1f; border-color: #3a3b40; color: #8a8b90; }
  html.dark .asset-head .a-weight:hover { border-color: #5a5b60; }
  html.dark .w-midground { background: #2a2b30; color: #8a8b90; }
  html.dark .w-hero { background: #5a4a10; color: #d4b841; }
  html.dark .w-background { background: #1e2a36; color: #6a8aaa; }
  html.dark .g-weight-hero { background: #5a4a10; color: #d4b841; }
  html.dark .g-weight-background { background: #1e2a36; color: #6a8aaa; }
  html.dark .asset-head .a-items { color: #6f7076; }
  html.dark .asset-head .a-days { color: #b8b9be; }
  html.dark .asset-head .a-del { color: #3f4046; }
  html.dark .asset-head .a-del:hover { color: #d9a441; }
  html.dark .asset-head .a-dup { color: #3f4046; }
  html.dark .asset-head .a-dup:hover { color: #e4e4e7; background: transparent; }
  html.dark .asset-body { border-top-color: #1e1f23; }
  html.dark .task-row { border-bottom-color: #1a1b1f; }
  html.dark .t-spinner .sp { background: transparent; border-color: #3a3b40; color: #6f7076; box-shadow: none; }
  html.dark .t-spinner .sp:hover { border-color: #55565c; color: #e4e4e7; }
  html.dark .t-spinner .t-days { border-color: #3a3b40; }
  html.dark .t-cost { color: #7d9cba; }
  html.dark .asset-cost-row { border-top-color: #26272b; }
  html.dark .master-totals { background: transparent; border-color: #26272b; }
  html.dark .master-totals h3 { color: #6f7076; }
  html.dark .mt-grid .mt-row { border-bottom-color: #1e1f23; color: #c2c3c8; }
  html.dark .mt-grid .mt-row .mtv { color: #e4e4e7; }
  html.dark .mt-grid .mt-sub { border-top-color: #26272b; color: #e4e4e7; }
  html.dark .mt-grid .mt-sub .mtv { color: #e4e4e7; }
  html.dark .mt-grand { border-top-color: #3a3b40; color: #e4e4e7; }
  html.dark .mt-grand .mtv { color: #d9a441; }
  html.dark .mt-rate-row { color: #6f7076; }
  html.dark .mt-rate-row label { color: #6f7076; }
  html.dark .mt-rate-input { color: #e4e4e7; }
  html.dark .mt-rate-input input {
    border-bottom-color: #3a3b40; color: #e4e4e7; background: transparent;
  }
  html.dark .mt-rate-input input:focus { border-bottom-color: #e4e4e7; }
  html.dark .footnote { color: #6f7076; }
  html.dark .footnote b { color: #e4e4e7; }
  html.dark .modal-bg { background: #00000099; }
  html.dark .modal { background: #1a1b1f; border-color: #3a3b40; color: #e4e4e7; box-shadow: 0 16px 40px #00000088; }
  html.dark .modal h3 { color: #e4e4e7; }
  html.dark #naModal .modal { background:rgba(26,27,31,.92); }
  html.dark #naModal .modal::before { filter:none; opacity:.14; }
  html.dark .na-gantt-wrap { border-color:#26272b; }
  html.dark .na-gantt-wrap::before { filter:none; opacity:.14; }
  html.dark .na-gantt-wrap .gantt-labels { background:rgba(20,21,23,.82); }
  html.dark .na-gantt-wrap .g-row { background:rgba(20,21,23,.55); }
  html.dark .na-gantt-wrap .na-lane-body { background:transparent; }
  html.dark .na-gantt-wrap .lane { background:rgba(20,21,23,.55); }
  html.dark .na-gantt-wrap .cell { border-left-color: rgba(106, 114, 128, 0.5); }
  html.dark .na-gantt-wrap .g-row input.na-stage, html.dark .na-gantt-wrap .g-row input.na-num { color:#c2c3c8; }
  html.dark .na-gantt-wrap .g-row input.na-stage:hover, html.dark .na-gantt-wrap .g-row input.na-stage:focus,
  html.dark .na-gantt-wrap .g-row input.na-num:hover, html.dark .na-gantt-wrap .g-row input.na-num:focus { border-color:#3a3b40; background:#1a1b1f; }
  html.dark .na-gantt-wrap .g-row .na-rm { color:#3f4046; }
  html.dark .na-gantt-wrap .g-row .na-rm:hover { color:#c08a92; }
  html.dark .na-gantt-wrap .gantt-labels > .task-add { background:rgba(23,24,27,.82); border-top-color:#26272b; color:#7d9cba; }
  html.dark .na-gantt-wrap .gantt-labels > .task-add:hover { color:#e4e4e7; }
  html.dark .na-gantt-wrap .labels-head { background:rgba(23,24,27,.92); border-bottom-color:#26272b; }
  html.dark .na-gantt-wrap .weekhdr { background:rgba(23,24,27,.92); border-bottom-color:#26272b; }
  html.dark .task-add { color: #7d9cba; }
  html.dark .gfilters { background: transparent; border-bottom-color: #26272b; color: #6f7076; }
  /* Gantt filter band stays opaque — weekhdr/labels must not bleed under it */
  html.dark #v-tr .gfilters { background: #17181b; border-bottom-color: #26272b; color: #6f7076; }
  html.dark .gbar.ip { background: #6f9c7f; color: #141517; }
  html.dark .gbar.wtg { background: #4a4e58; color: #d6d9df; }
  html.dark .gbar.appr { background: #6d87a3; color: #141517; }
  html.dark .gbar.cmpt { background: #6f9c7f; color: #141517; }
  html.dark .gbar.reopen { background: #a0767d; color: #141517; }
  html.dark .gbar.draft {
    background: repeating-linear-gradient(45deg,#4a4e58,#4a4e58 6px,#3e424b 6px,#3e424b 12px);
    color: #d6d9df;
  }
  html.dark .gbar.rev { background: #b5986a; color: #141517; }
  html.dark .gantt-labels { background: #141517; border-right-color: #26272b; box-shadow: none; }
  html.dark .gantt-labels .labels-head { background: #17181b; border-bottom-color: #26272b; }
  html.dark .gantt-labels .g-head { color: #d2d3d7; border-bottom-color: #26272b; }
  html.dark .gantt-labels .g-head .days { color: #7db892; }
  html.dark .gantt-labels .g-row { border-bottom-color: #1e1f23; }
  html.dark .gantt-labels .g-row .g-stage { color: #c2c3c8; }
  html.dark .gantt-labels .g-row .who { color: #94959c; }
  html.dark .workload-dock { background: #221c1a; border-top-color: #3a2e2a; }
    html.dark .workload-dock .wl-titlebar {
      background: #1c1715; border-bottom-color: #3a2e2a; color: #c4a090;
    }
    html.dark .workload-dock .wl-titlebar:hover { background: #261e1b; }
    html.dark .workload-dock .wl-caret { color: #9a7a68; }
    html.dark .workload-dock .wl-titlebar-sub { color: #7a6558; }
    html.dark .workload-dock .wl-titlebar-meta { color: #a89080; }
    html.dark .workload-dock .wl-titlebar-meta.is-warn { color: #c08a8a; }
    html.dark #workloadPanel { background: #221c1a; }
    html.dark .workload-dock .wl-worker-row { border-bottom-color: #2e2622; }
    html.dark .workload-dock .wl-worker-row:hover .wl-name,
    html.dark .workload-dock .wl-worker-row:hover .wl-cells { background: #2a221e; }
    html.dark .workload-dock .wl-name {
      background: #221c1a; border-right-color: #3a2e2a; color: #d2c4b8;
    }
    html.dark .workload-dock .wl-worker-row.is-active .wl-name {
      background: #1e2a38; color: #9bb8d4;
      box-shadow: inset 3px 0 0 #4a7ab5;
    }
    html.dark .workload-dock .wl-worker-row.is-active .wl-cells { background: #1e2a382e; }
    html.dark .workload-dock .wl-worker-row.is-active .wl-cell:not(.is-overload) {
      background: #3a4a6033;
    }
    html.dark .workload-dock .wl-name-empty { color: #7a6558; }
    html.dark .workload-dock .wl-cells { background: #221c1a; }
    html.dark .workload-dock .wl-cell { border-left-color: #2e2622; color: #8a7a6e; }
    html.dark .workload-dock .wl-cell.has-load { background: #3a455a33; color: #c2c8d4; }
    html.dark .workload-dock .wl-cell.is-overload {
      background: #a05a5a2e; color: #c08a8a; border-left-color: #a05a5a55;
    }
  html.dark .cashflow-dock { background: #1a2420; border-top-color: #2c4038; }
  html.dark .cashflow-dock .cf-titlebar {
    background: #15201c; border-bottom-color: #2c4038; color: #7db892;
  }
  html.dark .cashflow-dock .cf-titlebar:hover { background: #1a2a24; }
  html.dark .cashflow-dock .cf-caret { color: #6f987e; }
  html.dark .cashflow-dock .cf-titlebar-sub { color: #6a7a70; }
    html.dark .cashflow-dock .cf-titlebar-meta { color: #7db892; }
      html.dark .cashflow-dock .cf-titlebar-meta .cf-meta-bit.is-warn {
        color: var(--cf-deficit-t, #c08a8a);
      }
    html.dark .cashflow-dock .cf-label { background: #1a2420; border-right-color: #2c4038; color: #7db892; }
    html.dark .cashflow-dock .cf-label-title { color: #7db892; }
    html.dark #cashflowPanel { background: #1a2420; }
  html.dark .weekhdr { background: #17181b; border-bottom-color: #26272b; }
  html.dark .weekhdr .w { border-left-color: rgba(106, 114, 128, 0.5); color: #6f7076; }
    html.dark .weekhdr .w .start { color: #8b8c92; }
    html.dark .weekhdr .w .end { color: #6f7076; }
    html.dark .lane { border-bottom-color: #1a1c20; }
    html.dark .cell {
        border-left-color: rgba(106, 114, 128, 0.5);
        background-image:
          linear-gradient(to bottom, rgba(90, 98, 112, 0.5) 50%, transparent 50%),
          linear-gradient(to bottom, rgba(90, 98, 112, 0.5) 50%, transparent 50%),
          linear-gradient(to bottom, rgba(90, 98, 112, 0.5) 50%, transparent 50%),
          linear-gradient(to bottom, rgba(90, 98, 112, 0.5) 50%, transparent 50%);
        background-size: 1px 6px, 1px 6px, 1px 6px, 1px 6px;
        background-position: 11.2px 0, 22.4px 0, 33.6px 0, 44.8px 0;
        background-repeat: repeat-y;
      }
  html.dark .group-head { border-bottom-color: #26272b; }
  html.dark .seg-row { color: #6f7076; border-bottom-color: #26272b; }
  html.dark .seg-row .days { color: #7d9cba; }
  html.dark .collapse-btn { background: transparent; border-color: #3a3b40; color: #6f7076; box-shadow: none; }
  html.dark .collapse-btn:hover { border-color: #55565c; color: #e4e4e7; }
  html.dark .gantt-labels .gantt-toggle-row:hover { filter: brightness(1.08); }
  html.dark .block-btn { background: transparent; border-color: #3a3b40; color: #b8b9be; }
  html.dark .block-btn.on { background: #d9a441; border-color: #d9a441; color: #1a1508; }
  html.dark .block-btn:hover { border-color: #55565c; color: #e4e4e7; }
  html.dark .block-btn.on:hover { background: #e2b155; color: #1a1508; }
  html.dark .doc { background: transparent; border-color: #26272b; }
  html.dark .doc .docsub { color: #6f7076; }
  html.dark .doc td, html.dark .doc th { border-bottom-color: #1e1f23; }
  html.dark .doc th { color: #6f7076; border-bottom-color: #26272b; position: sticky; top: 79px; z-index: 34; background: #141517; }
  html.dark table.track th, html.dark #crewTable th { background: #141517; }
  html.dark .doc .doc-total td { border-top-color: #3a3b40; }
  html.dark .doc .gen { color: #6f7076; }
  html.dark .drawer { background: #141517; border-left-color: #26272b; box-shadow: -6px 0 24px #00000066; }
  html.dark .drawer .kv .k { color: #6f7076; }
  html.dark .drawer .x { color: #6f7076; }
  html.dark .drawer .thread { background: #1e1f23; color: #a8a9ae; }
  html.dark .drawer h4 { color: #6f7076; }
  html.dark .drawer .evi, html.dark .drawer a { color: #7d9cba; }
    html.dark #spikeLine { background: #a05a5a !important; box-shadow: 0 0 0 1px #17181b !important; }
  html.dark .crew-pick.un { color: #c08a92; border-color: #342225; background: #241a1c; }
  html.dark #viewHint { color: #6f7076 !important; }

/* ===== 3b. SCROLLBAR POLICY (chrome) =====
   Order is mandatory:
   1) hide scrollbars on .tabs (light + dark)
   2) optionally enable thin scrollbars on html.dark *
   3) re-hide .tabs with !important so step 2 cannot win
   Do NOT add another html.dark * scrollbar rule elsewhere. */
.tabs,
html.dark .tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar,
html.dark .tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }

html.dark * { scrollbar-width: thin; scrollbar-color: #3a3b40 #141517; }
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: #141517; }
html.dark ::-webkit-scrollbar-thumb { background: #3a3b40; border-radius: 4px; border: 2px solid #141517; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #4a4c52; }

html.dark .tabs { scrollbar-width: none !important; }
html.dark .tabs::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

/* ===== 6. DOCK EXTRAS — CF balance stroke + gbar resize edges ===== */
/* Continuous SVG cash-balance stroke (replaces day-tile staircase) */
#cfTrack .cf-bal-svg { display: block; }
#cfTrack .cf-bal-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#cfTrack .cf-bal-path.cf-bal-surplus {
  stroke: var(--cf-income);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--cf-income) 70%, transparent));
}
#cfTrack .cf-bal-path.cf-bal-deficit {
  stroke: var(--cf-deficit-t);
  animation: cf-deficit-pulse 1.6s ease-in-out infinite;
  will-change: filter;
}
/* Red (underwater) stroke: pulsating red glow via SVG-friendly drop-shadow */
@keyframes cf-deficit-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 2px var(--cf-deficit-glow))
      drop-shadow(0 0 6px color-mix(in srgb, var(--cf-deficit-glow) 55%, transparent))
      brightness(1);
  }
  50% {
    filter:
      drop-shadow(0 0 4px var(--cf-deficit-glow))
      drop-shadow(0 0 12px var(--cf-deficit-glow))
      drop-shadow(0 0 22px color-mix(in srgb, var(--cf-deficit-glow) 75%, transparent))
      brightness(1.2);
  }
}
@media (prefers-reduced-motion: reduce) {
  #cfTrack .cf-bal-path.cf-bal-deficit {
    animation: none;
    filter:
      drop-shadow(0 0 4px var(--cf-deficit-glow))
      drop-shadow(0 0 12px color-mix(in srgb, var(--cf-deficit-glow) 60%, transparent));
  }
}
.gbar { position: absolute; } /* ensure edges position relative to bar */
.gbar .gedge {
  position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; z-index: 3;
  background: transparent;
}
.gbar .gedge[data-edge="l"] { left: 0; border-radius: 3px 0 0 3px; }
.gbar .gedge[data-edge="r"] { right: 0; border-radius: 0 3px 3px 0; }
.gbar .gedge:hover { background: #ffffff55; }
.gbar[data-seg], .gbar[data-task], .gbar[data-grp] { cursor: grab; }
/* ===== 7. SEGMENT PAINT (apply) — geometry after dark bulk ===== */
/* Breakdown: accent bar on seg-head, faint wash on seg-head + asset rows.
   Seg-head wash is layered ON the opaque page base so sticky headers stay solid. */
.seg-head[data-seg] {
  border-bottom-color: #17181c;
  box-shadow: inset 3px 0 0 var(--seg-accent);
  padding-left: 10px;
  background: linear-gradient(var(--seg-wash), var(--seg-wash)), #fbfbfb;
}
.asset[data-seg]    { box-shadow: inset 2px 0 0 var(--seg-accent); background: var(--seg-wash-2); }
.asset[data-seg] .asset-head { padding-left: 8px; }
.task-row[data-seg] { background: transparent; }
/* Gantt: keep bars grouped with the same whisper.
   Idle label rows use a real border-left accent. Lane-side partners MUST
   use inset box-shadow instead — a real border shifts .cells by 3px and
   desyncs the week grid from .weekhdr (bars use absolute left from lane edge 0). */
.seg-row[data-seg]    { border-left: 3px solid var(--seg-accent); background: var(--seg-wash); }
.seg-row.lane-side[data-seg] {
  border-left: none;
  box-shadow: inset 3px 0 0 var(--seg-accent);
  background: var(--seg-wash);
}
.gantt-labels .g-head[data-seg] { box-shadow: inset 2px 0 0 var(--seg-accent); background: var(--seg-wash); }
.group-head[data-seg] { box-shadow: inset 2px 0 0 var(--seg-accent); background: var(--seg-wash); }
.gantt-labels .g-row[data-seg] { box-shadow: inset 2px 0 0 var(--seg-accent); background: var(--seg-wash-2); }
.lane[data-seg]      { box-shadow: none; background: transparent; }

html.dark .seg-head[data-seg] {
  border-bottom-color: #3a3b40;
  background: linear-gradient(var(--seg-wash), var(--seg-wash)), #141517;
}
.flag { margin-bottom: 10px; }
/* ===== 8. CREW + RECRUIT ===== */
.cs-actions { display: flex; gap: 10px; margin-bottom: 16px; }
.cs-login-lab { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:#5b6170; cursor:pointer; user-select:none; }
.cs-login-lab input { margin:0; }
.cs-login-txt { min-width:22px; }
html.dark .cs-login-lab { color:#8b8c92; }

.tier-badge {
  font-size: 9.5px; padding: 1px 8px; border-radius: 3px; white-space: nowrap;
  font-weight: 600; letter-spacing: .03em;
}
.tier-badge.tier-1 { background: #e2ecf7; color: #2a5a8a; }
.tier-badge.tier-2 { background: #d8efe2; color: #1e6e44; }
.tier-badge.tier-3 { background: #f6e8d3; color: #96660f; }
.tier-badge.tier-4 { background: #e4e8ee; color: #5c657a; }
.cs-empty { color: #8a93a3; font-size: 11px; }
.heat-row { display: flex; gap: 2px; }
.heat-cell {
  width: 22px; height: 18px; border-radius: 3px; background: #17181c;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: #fff; font-weight: 600;
}
.heat-cell.heat-over {
  background: #c0392b; color: #fff;
  animation: heat-pulse 1.4s ease-in-out infinite;
}
@keyframes heat-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.7); }
  50%      { box-shadow: 0 0 8px 3px rgba(192,57,43,0.55); }
}
.cs-del:hover { color: #b03a2a; }

/* recruitment picker */
.recruit-card {
  border: 1px solid #e8e8e8; border-radius: 4px; padding: 10px 12px; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.recruit-card .rc-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.recruit-card .rc-skills { font-size: 11px; color: #5b6170; }
.recruit-card .rc-meta { font-size: 11px; color: #8a93a3; display: flex; gap: 6px; align-items: center; }
.recruit-card .rc-pick { align-self: flex-start; margin-top: 4px; }
.recruit-rating {
  font-size: 9.5px; padding: 1px 6px; border-radius: 3px;
  background: #f6e8d3; color: #96660f; font-weight: 600;
}
.recruit-nda {
  font-size: 9.5px; padding: 1px 6px; border-radius: 3px;
  background: #d8efe2; color: #1e6e44; font-weight: 600;
}
.recruit-status {
  font-size: 9.5px; padding: 1px 6px; border-radius: 3px;
  background: #e4e8ee; color: #5c657a; font-weight: 600;
}

/* dark mode for crew additions */
html.dark .tier-badge.tier-1 { background: #1f2a36; color: #7d9cba; }
html.dark .tier-badge.tier-2 { background: #1e2e26; color: #7db892; }
html.dark .tier-badge.tier-3 { background: #33291a; color: #c9a468; }
html.dark .tier-badge.tier-4 { background: #24262b; color: #8b8c92; }
html.dark .heat-cell { background: #2a3542; }
html.dark .heat-cell.heat-over { background: #c0392b; }
html.dark .cs-del { color: #3f4046; }
html.dark .cs-del:hover { color: #c08a92; }
html.dark .recruit-card { background: #17181b; border-color: #26272b; }
html.dark .recruit-card .rc-skills { color: #6f7076; }
html.dark .recruit-card .rc-meta { color: #6f7076; }
html.dark .recruit-rating { background: #33291a; color: #c9a468; }
html.dark .recruit-nda { background: #1e2e26; color: #7db892; }
html.dark .recruit-status { background: #24262b; color: #8b8c92; }
html.dark .cs-name, html.dark .cs-role, html.dark .rate-input {
  background: transparent; color: #e4e4e7;
}
html.dark .cs-name:focus, html.dark .cs-role:focus {
  background: #1a1b1f; border-color: #3a3b40 !important;
}
html.dark .cs-name:hover, html.dark .cs-role:hover {
  border-color: #3a3b40;
}
#crewTable .cs-invite { font-size: 11px; padding: 2px 8px; white-space: nowrap; }
#crewTable .cs-invite:disabled { opacity: 0.45; cursor: not-allowed; }
#crewTable .cs-email:focus { outline: none; }
/* ===== 9. TIER TEST + TIER SECURITY ===== */
.tier-test {
  display: inline-flex; gap: 2px; margin-left: 8px;
  border: 1px solid #e0e0e0; border-radius: 4px; padding: 1px;
  background: #fff;
}
.tier-btn {
  border: none; background: transparent; cursor: pointer;
  font-size: 10px; font-weight: 500; padding: 2px 8px;
  border-radius: 3px; color: #9a9aa2; transition: all .15s;
  font-variant-numeric: tabular-nums;
}
.tier-btn:hover { color: #3c4048; background: #f0f0f0; }
.tier-btn.on { background: #17181c; color: #fff; }
.tier-btn.on:hover { background: #17181c; }

/* tier-test dark */
html.dark .tier-test { background: transparent; border-color: #3a3b40; }
html.dark .tier-btn { color: #6f7076; }
html.dark .tier-btn:hover { color: #b8b9be; background: #1e1f23; }
html.dark .tier-btn.on { background: #d9a441; color: #1a1508; }
html.dark .tier-btn.on:hover { background: #d9a441; }
/* tier-based visibility (security) — keep late */
/* t1-only: visible only at T1 (Founder). Hidden at T2/T3/T4. */
[data-tier="2"] .t1-only,
[data-tier="3"] .t1-only,
[data-tier="4"] .t1-only { display: none !important; }

/* t2-only: visible at T1 and T2. Hidden at T3/T4. */
[data-tier="3"] .t2-only,
[data-tier="4"] .t2-only { display: none !important; }
/* ===== 10. PRIMITIVES (late winners) — focus, select hairline, status menu =====
   OWNED HERE: select/input/crew-pick/proj-select final chrome. Surfaces must not
   re-assert boxed borders on these. */
/* focus ring */
button:focus-visible, select:focus-visible, input:focus-visible, .tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px #17181c, 0 0 0 3px #17181c33;
}
html.dark button:focus-visible, html.dark select:focus-visible, html.dark input:focus-visible, html.dark .tab:focus-visible {
  box-shadow: 0 0 0 1px #8fa9c4, 0 0 0 3px #8fa9c433;
}
/* select restyle — flat hairline, custom chevron, no OS chrome */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M1 1.5l3 3 3-3' fill='none' stroke='%239a9aa2' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  border: none; border-bottom: 1px solid #e0e0e0; border-radius: 0;
  padding: 3px 20px 3px 2px; font: inherit; font-size: 11.5px; color: #17181c;
  cursor: pointer;
}
select:hover { border-bottom-color: #9a9aa2; }
select:focus { outline: none; border-bottom-color: #17181c; box-shadow: none; }
select option { background-color: #fff; color: #17181c; }
html.dark select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M1 1.5l3 3 3-3' fill='none' stroke='%236f7076' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-bottom-color: #3a3b40; color: #e4e4e7;
}
html.dark select:hover { border-bottom-color: #6f7076; }
html.dark select:focus { border-bottom-color: #e4e4e7; }
html.dark select option { background-color: #1a1b1f; color: #e4e4e7; }

/* filter rows: kill the old boxed style */
.flt select, .gfilters select { border: none; border-bottom: 1px solid #e0e0e0; border-radius: 0; background-color: transparent; padding: 3px 20px 3px 2px; }
html.dark .flt select, html.dark .gfilters select { border-bottom-color: #3a3b40; background-color: transparent; }

/* status pill selects keep their pill color but get the new chevron + no native arrow */
select.st-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M1 1.5l3 3 3-3' fill='none' stroke='%239a9aa2' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 5px center;
  border: none; border-bottom: none; border-radius: 3px;
  padding: 1px 18px 1px 8px;
}
html.dark select.st-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M1 1.5l3 3 3-3' fill='none' stroke='%236f7076' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* project picker in header: transparent, hairline on hover */
header .proj-select {
  border: none; border-bottom: 1px solid transparent; border-radius: 0;
  padding: 3px 20px 3px 2px; background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M1 1.5l3 3 3-3' fill='none' stroke='%239a9aa2' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center;
}
header .proj-select:hover { background-color: transparent; border-bottom-color: #9a9aa2; }
html.dark header .proj-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath d='M1 1.5l3 3 3-3' fill='none' stroke='%236f7076' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); border-bottom-color: transparent;
}
html.dark header .proj-select:hover { background-color: transparent; border-bottom-color: #6f7076; }

/* crew pick: match the same flat look */
.crew-pick {
  border: none; border-bottom: 1px solid #e0e0e0; border-radius: 0;
  background-color: transparent; padding: 1px 16px 1px 2px;
}
html.dark .crew-pick { border-bottom-color: #3a3b40; background-color: transparent; }
html.dark .crew-pick.un { border-bottom-color: #342225; }

/* text inputs: same hairline treatment */
.flt input, .gfilters input, .mrow input {
  border: none; border-bottom: 1px solid #e0e0e0; border-radius: 0;
  background-color: transparent; padding: 3px 2px; font-size: 11.5px;
}
.flt input:focus, .gfilters input:focus, .mrow input:focus { outline: none; border-bottom-color: #17181c; box-shadow: none; }
html.dark .flt input, html.dark .gfilters input, html.dark .mrow input {
  border-bottom-color: #3a3b40; background-color: transparent; color: #e4e4e7;
}
html.dark .flt input:focus, html.dark .gfilters input:focus, html.dark .mrow input:focus { border-bottom-color: #e4e4e7; }
/* custom status menu — replaces native selects */
button.st-select {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 9.5px; line-height: 15px; white-space: nowrap;
  padding: 1px 6px 1px 8px; border: 0; border-radius: 3px;
  cursor: pointer; color: inherit; background-image: none;
}
button.st-select:hover { filter: brightness(.97); }
button.st-select:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; box-shadow: none; }
button.st-select:disabled { cursor: wait; opacity: .7; }
.st-chevron { width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid currentColor; opacity: .48; flex: 0 0 auto; }
button.st-select.st-ip { background-color: #d8efe2; color: #1e6e44; }
button.st-select.st-wtg { background-color: #e4e8ee; color: #5c657a; }
button.st-select.st-rev { background-color: #f6e8d3; color: #96660f; }
button.st-select.st-cmpt, button.st-select.st-appr { background-color: #dde5f0; color: #17181c; }
button.st-select.st-reopen { background-color: #f6dcd7; color: #a93226; }
.status-menu {
  position: fixed; z-index: 100; width: 132px; padding: 4px;
  background: #fbfbfb; border: 1px solid #dcdcdc; border-radius: 4px;
  box-shadow: 0 10px 28px #17181c1a;
}
.status-menu-item {
  display: flex; width: 100%; border: 0; border-radius: 3px; padding: 5px 8px;
  background: transparent; color: #3c4048; text-align: left; font: 500 11px/1.2 "Inter", sans-serif; cursor: pointer;
}
.status-menu-item:hover, .status-menu-item.current { background: #f0f0f0; }
.status-menu-item.current::after { content: ""; width: 4px; height: 4px; margin: auto 0 auto auto; border-radius: 50%; background: currentColor; }
.status-menu-item.st-ip { color: #1e6e44; }
.status-menu-item.st-wtg { color: #5c657a; }
.status-menu-item.st-rev { color: #96660f; }
.status-menu-item.st-cmpt, .status-menu-item.st-appr { color: #344c70; }
.status-menu-item.st-reopen { color: #a93226; }
html.dark button.st-select.st-ip { background-color: #1e2e26; color: #7db892; }
html.dark button.st-select.st-wtg { background-color: #24262b; color: #b4b5bb; }
html.dark button.st-select.st-rev { background-color: #33291a; color: #c9a468; }
html.dark button.st-select.st-cmpt { background-color: #2b2d20; color: #a8ad7d; }
html.dark button.st-select.st-appr { background-color: #1f2a36; color: #7d9cba; }
html.dark button.st-select.st-reopen { background-color: #342225; color: #c08a92; }
html.dark .status-menu { background: #1a1b1f; border-color: #3a3b40; box-shadow: 0 10px 28px #00000066; }
html.dark .status-menu-item { color: #c2c3c8; }
html.dark .status-menu-item:hover, html.dark .status-menu-item.current { background: #26272b; }
html.dark .status-menu-item.st-ip { color: #7db892; }
html.dark .status-menu-item.st-wtg { color: #b4b5bb; }
html.dark .status-menu-item.st-rev { color: #c9a468; }
html.dark .status-menu-item.st-cmpt { color: #a8ad7d; }
html.dark .status-menu-item.st-appr { color: #7d9cba; }
html.dark .status-menu-item.st-reopen { color: #c08a92; }