/* Lowell COGS shared theme. Marker: cogs-theme-v2-sidebar (redesign, 30 Sep 2026; sidebar 15 Oct 2026).

   Every page links this BEFORE its own <style>.
   - Tokens sit on plain :root (specificity 0,1,0), the same as a page's own :root block, so
     source order decides: a page's later :root wins for every name it declares, and the
     theme's value applies only to names the page leaves alone. The seven themed pages declare
     no shared token name of their own (only --st-*, --s-*, --lab-w), so they take every theme
     value. index.html reads --nj, --ny, --ink, --ink-2, --ink-3, --line off the root, so the
     tokens stay on :root. To change a shared colour, change it here.
   - Page-level rules (body, focus ring, print background) and the component rules (.btn, .seg,
     .card, .status, .kpi, tables) apply only under <body class="th">; a page's own rule of the
     same name still wins by source order.
   - The two revenue close v7 pages (revenue.html, revenue-bridge.html) have no body.th and
     declare their own :root: Bryan has not reviewed v7, so they take the header only and render
     as v7 below it.
   - The header (.cn-*, drawn by nav.js) is namespaced and outranks any page rule on header/h1.
     From 960 px it is a left sidebar on signed-in pages (html.cn-side); below that a Menu button
     slides the same column in from the left. The links are never laid out across the top.
   Type scale: 11 · 12 · 13 · 14 · 16 · 20 · 24 px. */

:root{
  color-scheme: light;
  --surface:#f6f5f2;          /* page background */
  --card:#ffffff;
  --line:#e4e2dc;             /* card and control borders */
  --line-2:#efeee9;           /* row separators */
  --line-strong:#d6d3cb;      /* input and secondary-button borders */
  --track:#ecebe6;            /* segmented-control track */
  --hover:#f7f6f3;
  --ink:#211f1b;              /* 16.4:1 on white */
  --ink-2:#5c5850;            /*  7.1:1 */
  --ink-3:#6f6b62;            /*  5.3:1 on white, 4.9:1 on the page */
  --brand:#c89b4b;            /* Lowell gold: the header mark only, never data */
  --focus:#1d4ed8;
  --nj:#2a78d6; --ny:#eb6834; /* validated pair (dataviz validator: all checks pass) */
  --ok:#15803d;   --ok-bg:#ecfdf5;   --ok-line:#bbf7d0;
  --warn:#92400e; --warn-bg:#fef3c7; --warn-line:#fde68a;
  --open:#1d4ed8; --open-bg:#eff6ff; --open-line:#bfdbfe;
  --bad:#b91c1c;  --bad-bg:#fef2f2;  --bad-line:#fecaca;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --nav-h:52px;
  --cn-side-w:224px;          /* sidebar width (960 px and up) and the narrow-screen menu's width */
  --radius:12px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body.th{margin:0;background:var(--surface);color:var(--ink);font:14px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.th :focus-visible,header.cn :focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ── Header (nav.js) ─────────────────────────────────────────────────── */
/* The header keeps its own palette under --cn-* names that no page sets: the light values are
   the tokens above. A page's own tokens (revenue-bridge.html sets --ink in dark mode) never reach
   it. A page that supports dark mode says so with <meta name="color-scheme" content="light dark">,
   and only there the header turns dark with the OS. */
header.cn{
  --cn-bg:#ffffff; --cn-line:#e4e2dc; --cn-line-2:#efeee9; --cn-strong:#d6d3cb; --cn-hover:#f7f6f3;
  --cn-ink:#211f1b; --cn-ink-2:#5c5850; --cn-ink-3:#6f6b62; --cn-brand:#c89b4b; --cn-shadow:rgba(33,31,27,.10); --cn-scrim:rgba(33,31,27,.32);
  position:sticky;top:0;z-index:20;display:block;height:auto;min-height:0;margin:0;padding:0;gap:0;
  background:var(--cn-bg);color:var(--cn-ink);border-bottom:1px solid var(--cn-line);
  font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]):has(meta[name="color-scheme"][content~="dark"]) header.cn{
    --cn-bg:#171d1b; --cn-line:#2a3431; --cn-line-2:#212a27; --cn-strong:#3b4744; --cn-hover:#212a27;
    --cn-ink:#e4eae7; --cn-ink-2:#a2aea9; --cn-ink-3:#8c9894; --cn-shadow:rgba(0,0,0,.45); --cn-scrim:rgba(0,0,0,.5)}
}
html[data-theme="dark"]:has(meta[name="color-scheme"][content~="dark"]) header.cn{
  --cn-bg:#171d1b; --cn-line:#2a3431; --cn-line-2:#212a27; --cn-strong:#3b4744; --cn-hover:#212a27;
  --cn-ink:#e4eae7; --cn-ink-2:#a2aea9; --cn-ink-3:#8c9894; --cn-shadow:rgba(0,0,0,.45); --cn-scrim:rgba(0,0,0,.5)}
.cn .cn-in{display:flex;align-items:center;gap:18px;height:var(--nav-h);padding:0 24px}
.cn .cn-brand{display:flex;align-items:center;gap:9px;color:var(--cn-ink);text-decoration:none;white-space:nowrap;flex:0 0 auto}
.cn .cn-mark{width:10px;height:10px;border-radius:50%;background:var(--cn-brand)}
.cn .cn-name{font-size:15px;font-weight:700;letter-spacing:-.005em}
.cn .cn-app{font-size:13px;font-weight:500;color:var(--cn-ink-3);padding-left:9px;border-left:1px solid var(--cn-line)}
/* The page links are never laid out across the top (Bryan, 15 Oct 2026). They are always a
   column: the left sidebar from 960 px, and below that the same column slid in from the left
   by the Menu button. */
.cn .cn-body{display:flex;flex-direction:column;gap:22px;min-width:0}
.cn .cn-links{display:flex;flex-direction:column}
.cn .cn-group{display:flex;flex-direction:column;padding:0 0 16px}
.cn .cn-glabel{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cn-ink-3);padding:0 10px 6px}
.cn .cn-links a{display:block;padding:7px 10px;margin:0 0 1px;border-radius:7px;font-size:14px;font-weight:500;
  color:var(--cn-ink-2);text-decoration:none;white-space:nowrap}
.cn .cn-links a:hover{color:var(--cn-ink);background:var(--cn-hover)}
.cn .cn-links a[aria-current="page"]{color:var(--cn-ink);font-weight:600;background:var(--cn-hover);box-shadow:inset 3px 0 0 var(--cn-ink)}
.cn .cn-user{margin:auto 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 10px 0;
  border-top:1px solid var(--cn-line);font-size:13px;color:var(--cn-ink-3)}
.cn .cn-email{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn .cn-email:empty{display:none}
.cn .cn-out{font:inherit;font-size:13px;font-weight:500;color:var(--cn-ink-2);background:none;border:0;padding:6px 0;cursor:pointer}
.cn .cn-out:hover{color:var(--cn-ink);text-decoration:underline}
.cn .cn-menu{display:none}
/* Sidebar (direction B, Bryan 15 Oct 2026). From 960 px on screen, nav.js puts html.cn-side on
   every signed-in page and the header becomes a fixed left column. The page is pushed right by
   padding on <html>, which no page styles, so each page's own body and main rules are untouched.
   --nav-h drops to 0 so sticky bars (index filters) stick to the top. */
@media screen and (min-width:960px){
  html.cn-side{--nav-h:0px;padding-left:var(--cn-side-w)}
  html.cn-side header.cn{position:fixed;left:0;top:0;bottom:0;width:var(--cn-side-w);
    border-bottom:0;border-right:1px solid var(--cn-line);overflow-y:auto}
  html.cn-side .cn .cn-in{flex-direction:column;align-items:stretch;height:100%;min-height:100%;padding:18px 12px 16px;gap:22px}
  html.cn-side .cn .cn-brand{padding:0 10px}
  html.cn-side .cn .cn-body{flex:1}
}
/* Narrower than 960 px: a slim bar with the brand and a Menu button. Menu slides the sidebar's
   column in from the left under the bar, over a scrim; the scrim, Escape or Menu again closes it.
   Login and pending (data-mode="minimal") show the brand only. In print the links are hidden. */
@media (max-width:959px){
  .cn .cn-in{padding:0 16px;gap:12px}
  .cn .cn-menu{display:inline-flex;align-items:center;gap:8px;margin-left:auto;height:34px;padding:0 12px;
    font-weight:600;font-size:13px;line-height:1;font-family:inherit;color:var(--cn-ink);background:var(--cn-bg);border:1px solid var(--cn-strong);border-radius:8px;cursor:pointer}
  .cn .cn-burger,.cn .cn-burger::before,.cn .cn-burger::after{display:block;width:14px;height:2px;border-radius:1px;background:currentColor;position:relative}
  .cn .cn-burger::before,.cn .cn-burger::after{content:"";position:absolute;left:0}
  .cn .cn-burger::before{top:-5px} .cn .cn-burger::after{top:5px}
  .cn .cn-body{display:none}
  .cn.open .cn-body{display:flex;position:fixed;z-index:2;top:calc(var(--nav-h) + 1px);left:0;bottom:0;width:min(var(--cn-side-w),85vw);
    padding:16px 12px 16px;overflow-y:auto;background:var(--cn-bg);border-right:1px solid var(--cn-line);box-shadow:8px 0 24px var(--cn-shadow)}
  .cn.open::after{content:"";position:fixed;z-index:1;top:calc(var(--nav-h) + 1px);left:0;right:0;bottom:0;background:var(--cn-scrim)}
}

/* ── Page frame ──────────────────────────────────────────────────────── */
:where(.th) .title h2,:where(.th) .pagehead h2{margin:0;font-size:24px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
:where(.th) .title p,:where(.th) .pagehead p{margin:4px 0 16px;color:var(--ink-2);font-size:13px}
:where(.th) .muted{color:var(--ink-3)}

/* ── Buttons: primary (ink), secondary (.ghost), quiet text ──────────── */
:where(.th) .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 12px;
  border:1px solid var(--ink);border-radius:8px;background:var(--ink);color:#fff;
  font:600 13px/1.2 var(--sans);cursor:pointer;text-decoration:none;white-space:nowrap}
:where(.th) .btn:hover{background:#000;border-color:#000}
:where(.th) .btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line-strong)}
:where(.th) .btn.ghost:hover{background:var(--hover);border-color:var(--ink-3)}
:where(.th) .btn.small{min-height:28px;padding:0 9px;font-size:12px;border-radius:6px}
:where(.th) .btn.big{min-height:40px;padding:0 18px;font-size:14px;border-radius:9px}
:where(.th) .btn:disabled,:where(.th) .btn[disabled]{opacity:.45;cursor:not-allowed}
:where(.th) .btn:disabled:hover{background:var(--ink);border-color:var(--ink)}
:where(.th) .btn.ghost:disabled:hover{background:var(--card);border-color:var(--line-strong)}
:where(.th) .linkbtn{font:inherit;font-size:13px;color:var(--ink-2);background:none;border:0;padding:2px 0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
:where(.th) .linkbtn:hover{color:var(--ink)}

/* ── Segmented control: .seg (aria-pressed / aria-current) and .tabs (.active) ── */
:where(.th) .seg,:where(.th) .tabs{display:inline-flex;align-items:center;gap:2px;padding:2px;background:var(--track);border:0;border-radius:9px;overflow:visible;flex-wrap:wrap}
:where(.th) .seg button,:where(.th) .tabs button{font:600 13px/1 var(--sans);min-height:28px;padding:0 11px;border:0;border-radius:7px;background:transparent;
  color:var(--ink-2);cursor:pointer;white-space:nowrap}
:where(.th) .seg button+button{border-left:0}
:where(.th) .seg button:hover,:where(.th) .tabs button:hover{color:var(--ink)}
:where(.th) .seg button[aria-pressed="true"],:where(.th) .seg button[aria-current],:where(.th) .tabs button.active{background:var(--card);color:var(--ink);
  box-shadow:0 1px 2px rgba(33,31,27,.10),0 0 0 1px var(--line)}

/* ── Filter row: the page-level controls, one row above the content ──── */
:where(.th) .filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 18px}
:where(.th) .filterbar .fgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
:where(.th) .filterbar .flabel,:where(.th) .ctl-label{font-size:12px;font-weight:600;color:var(--ink-3);text-transform:none;letter-spacing:0}
:where(.th) .filterbar .fend{margin-left:auto}
:where(.th) input[type=date],:where(.th) input[type=text],:where(.th) input[type=number],:where(.th) input:not([type]),:where(.th) select,:where(.th) textarea{font:13px/1.3 var(--sans);color:var(--ink);
  background:var(--card);border:1px solid var(--line-strong);border-radius:8px;padding:6px 8px}
:where(.th) input[type=date]{min-height:32px}

/* ── Cards ───────────────────────────────────────────────────────────── */
:where(.th) .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:16px}
:where(.th) .card>h2,:where(.th) .card>h3{margin:0 0 12px;font-size:16px;font-weight:650;color:var(--ink);letter-spacing:-.005em;text-transform:none}
:where(.th) .card>h2 small,:where(.th) .card>h3 small,:where(.th) .card>h3 .hint{font-size:13px;font-weight:400;color:var(--ink-3);letter-spacing:0;text-transform:none}

/* ── KPI tiles ───────────────────────────────────────────────────────── */
:where(.th) .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
:where(.th) .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px}
:where(.th) .kpi .label{font-size:12px;font-weight:600;color:var(--ink-2);text-transform:none;letter-spacing:0}
:where(.th) .kpi .value{font-size:24px;font-weight:700;letter-spacing:-.015em;margin-top:2px;color:var(--ink);font-variant-numeric:tabular-nums;font-family:var(--sans)}
:where(.th) .kpi .sub{font-size:12px;color:var(--ink-3);margin-top:2px}

/* ── Status line: a tone, a short label, the sentence ────────────────── */
:where(.th) .status{display:flex;gap:12px;align-items:flex-start;border:1px solid;border-radius:var(--radius);padding:12px 16px;margin-bottom:14px}
:where(.th) .status .badge{flex:0 0 auto;font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:999px;white-space:nowrap;margin-top:1px}
:where(.th) .status .txt{flex:1;min-width:0}
:where(.th) .status .txt b{font-weight:600}
:where(.th) .status .meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px;font-size:12px;opacity:.9;font-variant-numeric:tabular-nums}
:where(.th) .status.open{background:var(--open-bg);border-color:var(--open-line);color:#1e3a8a}
:where(.th) .status.open .badge{background:#dbe7fe;color:#1e3a8a}
:where(.th) .status.closed{background:var(--ok-bg);border-color:var(--ok-line);color:#14532d}
:where(.th) .status.closed .badge{background:#d1fae5;color:#14532d}
:where(.th) .status.drift,:where(.th) .status.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
:where(.th) .status.drift .badge,:where(.th) .status.warn .badge{background:#fde68a;color:#78350f}
:where(.th) .status.err{background:var(--bad-bg);border-color:var(--bad-line);color:#991b1b}
:where(.th) .status.err .badge{background:#fee2e2;color:#991b1b}

/* ── Chips: one pill, five tones ─────────────────────────────────────── */
:where(.th) .chip{display:inline-flex;align-items:center;gap:4px;font:600 12px/18px var(--sans);padding:0 8px;border-radius:999px;
  background:var(--track);color:var(--ink-2);white-space:nowrap;border:0}
:where(.th) .chip.ok{background:var(--ok-bg);color:var(--ok)}
:where(.th) .chip.warn{background:var(--warn-bg);color:var(--warn)}
:where(.th) .chip.bad{background:var(--bad-bg);color:var(--bad)}
:where(.th) .chip.info{background:var(--open-bg);color:var(--open)}

/* ── Tables: opt in with class "t" on a table, or "tables" on a container ─ */
:where(.th) table.t,:where(.th) .tables table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
:where(.th) table.t th,:where(.th) .tables th{font:600 12px/1.3 var(--sans);color:var(--ink-2);text-align:right;text-transform:none;letter-spacing:0;
  padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:transparent}
:where(.th) table.t td,:where(.th) .tables td{padding:7px 10px;border-bottom:1px solid var(--line-2);text-align:right;white-space:nowrap}
:where(.th) table.t th:first-child,:where(.th) table.t td:first-child,:where(.th) .tables th:first-child,:where(.th) .tables td:first-child{text-align:left}
:where(.th) table.t tbody tr:hover>td,:where(.th) .tables tbody tr:hover>td{background:var(--hover)}
:where(.th) .scroll,:where(.th) .scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── Disclosure ──────────────────────────────────────────────────────── */
:where(.th) details>summary{cursor:pointer}

@media (max-width:700px){
  :where(.th) .title h2,:where(.th) .pagehead h2{font-size:20px}
  :where(.th) .card{padding:14px 14px}
  :where(.th) .kpi .value{font-size:20px}
}
@media print{
  header.cn{position:static;border-bottom:1px solid #999}
  .cn .cn-body,.cn .cn-menu{display:none !important}
  body.th{background:#fff}
}