/* ============================================================================
   AELYX Operations Portal — Claude-Design dark reskin
   ----------------------------------------------------------------------------
   File:        public/assets/cd-theme.css
   Loads AFTER: public/assets/theme.css  (this file overrides it)
   Supersedes:  the inline  <style id="cd-reskin">  block in portal.html
                (that block can be removed once this file is linked — see notes
                 at the bottom of portal.html's load order).
   Source of truth: DESIGN-BUS/CD-DESIGN-SYSTEM-SPEC.md  (values are verbatim
                from the Claude-Design export public/d/live.html).

   The look: warm-graphite / carbon dark UI · putty-cream = the primary action ·
   gold/sand (#C7AE7B) = the money & data accent (NEVER cyan/teal) · IBM Plex
   Sans body + IBM Plex Mono for every number · a single signature surface
   (gradient + inset top-highlight + soft shadow) on every card/panel/tile/table.

   Strategy: portal.html keys most chrome off CSS vars defined by theme.css under
   [data-theme="dark"]. We REDEFINE those same --var names to the CD palette so
   existing markup picks up the new colours for free, then add CD-only tokens and
   the exact per-component rules theme.css doesn't cover. We deliberately kill the
   cyan interaction language (nav-active, focus ring, links) → sand / soft-white.

   Built 25/06/2026. Dark is the target; light-mode rules are left untouched.
   ============================================================================ */


/* ============================================================================
   1 · TOKENS — the CD palette as custom properties
   ----------------------------------------------------------------------------
   Defined on both :root and [data-theme="dark"] so the variables resolve even
   before the theme attribute is set, but the *chrome overrides* below are all
   scoped to [data-theme="dark"] so we never touch the light default.
   ============================================================================ */
:root,
[data-theme="dark"]{
  /* ---- Surfaces (carbon / warm graphite) ---- */
  --bg:            #0C0C0D;   /* app background (body, shell)                  */
  --bg-rail:       #121113;   /* sidebar + topbar + drawer body               */
  --bg-rail-deep:  #0E0D10;   /* optional even-darker sidebar                 */
  --surface:       #161517;   /* flat surface / search field / table inner    */
  --surface-2:     #19181A;   /* slightly lighter — inputs, small buttons     */
  --tint:          #141315;   /* table thead bg, column bg, statutory rows    */
  --tint-2:        #1C1B1D;   /* hover row floor / nested card top            */
  --elevated-a:    #1A191B;   /* gradient TOP for cards                       */
  --elevated-b:    #161517;   /* gradient BOTTOM for cards                    */

  /* The signature card fill — used everywhere a panel/card/tile/table draws  */
  --card-grad:     linear-gradient(180deg, #1A191B, #161517);

  /* ---- Lines / dividers ---- */
  --line:          #242225;   /* default card/panel border                    */
  --line-soft:     #211F22;   /* sidebar/topbar/header border, board inner    */
  --line-row:      #1E1D1F;   /* table row top-border, card line dividers     */
  --line-row-2:    #1C1B1D;   /* faint inner row (board, skeleton)            */
  --line-strong:   #2A282C;   /* input border, drawer border, button border   */
  --line-strong-2: #2E2C30;   /* user-menu border, addcard border             */
  --hover-line:    #34313A;   /* card hover border                            */
  --hover-line-2:  #3A383C;   /* search / qcard hover border                  */

  /* ---- Text ---- */
  --text:          #ECEAE8;   /* primary text + headings (warm off-white)     */
  --ink:           #ECEAE8;   /* theme.css alias — keep markup that uses --ink */
  --text-2:        #C7C4C0;   /* secondary strong (section titles, sign-out)  */
  --text-3:        #B5B0AB;   /* sidebar inactive label                       */
  --mute:          #94908B;   /* muted body / subtitle / placeholder-ish      */
  --mute-2:        #8A857F;   /* deeper muted (table th, card label, notes)   */
  --mute-3:        #928E89;   /* note-callout body                            */
  --faint:         #6B6661;   /* faintest label (kpi label, meta, icon)       */
  --faint-2:       #5A5550;   /* nav section heading                          */
  --faint-3:       #46423E;   /* placeholder dash, source tag, input focus    */
  --on-cream:      #17161A;   /* text ON the cream primary button (near-black)*/

  /* ---- Accents (functional colour — no cyan anywhere) ---- */
  --gold:          #C7AE7B;   /* PRIMARY data / money accent (figures, watch) */
  --gold-2:        #D8B15A;   /* "On-hold" status variant                     */
  --sage:          #8FB09A;   /* positive / good / Active / saved / paid      */
  --sage-2:        #86A89C;   /* "Completed" status variant                   */
  --coral:         #FF6B78;   /* danger / overdue / error / sign-out hover    */
  --coral-bright:  #FF5C6A;   /* error glyph variant                          */
  --peri:          #9DB2F5;   /* info / links / role chips / Defects          */
  --putty-line:    #EAE7E2;   /* sparkline stroke + nav-active inset bar       */

  /* theme.css semantic aliases → remap to CD muted palette so existing markup
     (e.g. var(--green/--amber/--red/--blue/--teal)) reads correctly. NOTE the
     deliberate kill: --teal now resolves to the sand accent, not cyan. */
  --teal:          #C7AE7B;   /* WAS cyan — now sand (money/interaction)      */
  --green:         #8FB09A;
  --amber:         #C7AE7B;
  --red:           #FF6B78;
  --blue:          #9DB2F5;
  --navy:          #1A191B;   /* deep chrome (modal bg, gate) → carbon        */

  /* ---- Primary action (the one bright element on the page) ---- */
  --cream-top:     #F5F3EF;
  --cream-bot:     #E2DED7;
  --cream:         linear-gradient(180deg, #F5F3EF, #E2DED7);

  /* ---- Status chip backgrounds (paired bg/fg — see §7 Badges) ---- */
  --chip-pos-bg:   #18241D;  --chip-pos-fg:  #8FB09A;
  --chip-warn-bg:  #262017;  --chip-warn-fg: #C7AE7B;
  --chip-bad-bg:   #2C1417;  --chip-bad-fg:  #FF6B78;
  --chip-info-bg:  #1C2333;  --chip-info-fg: #9DB2F5;  --chip-info-bd: #2A3550;
  --chip-mut-bg:   #222022;  --chip-mut-fg:  #8A857F;

  /* ---- Type ---- */
  --font:  'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Radius scale ---- */
  --r-pill:  20px;   /* status pills, count badges, "saved"                   */
  --r-lg:    16px;   /* big tables, scorecards, error card                   */
  --r-md:    14px;   /* KPI tiles, cards, board columns, addcard             */
  --r-card:  15px;   /* KPI tile (tuned)                                     */
  --r-sm:    11px;   /* small panels, plan chip, avatar wells                */
  --r-9:      9px;   /* buttons, nav items, inputs, chips-as-button          */
  --r-8:      8px;   /* subtabs, small chips, role chip                      */

  /* ---- Elevation / shadow ---- */
  --sh-card:   inset 0 1px 0 rgba(255,255,255,.03), 0 2px 8px rgba(0,0,0,.18);
  --sh-tile:   inset 0 1px 0 rgba(255,255,255,.03), 0 2px 8px rgba(0,0,0,.18);
  --sh-raise:  0 12px 28px rgba(0,0,0,.4);                       /* card hover */
  --sh-drawer: -24px 0 70px rgba(0,0,0,.55);                     /* r. drawer  */
  --sh-menu:   0 18px 50px rgba(0,0,0,.55);                      /* popover    */
  --sh-cream:  0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5);
}


/* ============================================================================
   2 · TYPE — Plex everywhere · Mono + tabular on every number
   ============================================================================ */
body{ font-family: var(--font); letter-spacing: -.1px; }

/* Every figure (money, counts, rates, codes, deltas) reads like a statement.
   Covers KPI values, generic .num, money cells, and the various code/value
   spans the portal + hub use. */
.kpi .v, .num, td.num,
.mono, .pcode, .code, .pcval, .pcard .code, .pmoney .cv,
.compfoot, .compcolh, .wkid{
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}


/* ============================================================================
   EVERYTHING BELOW IS SCOPED TO [data-theme="dark"]
   (portal.html sets data-theme; light mode is intentionally left to theme.css)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   3 · SHELL — page frame, sidebar rail, topbar
   ---------------------------------------------------------------------------- */

/* App background: near-black, with a faint top-light wash on the scroll area
   (not a flat fill) — the CD "radial light from top-left" signature. */
[data-theme="dark"] body{ background: var(--bg); color: var(--text); }
[data-theme="dark"] main{
  background: radial-gradient(1100px 460px at 16% -10%,
              rgba(234,231,226,.022), transparent 62%);
  padding: 30px 38px 76px;
}
[data-theme="dark"] .wrap,
[data-theme="dark"] .pane.on{ max-width: 1280px; margin: 0 auto; }

/* --- Sidebar rail --- */
[data-theme="dark"] .sidebar{
  width: 232px;
  background: var(--bg-rail-deep);
  border-right: 1px solid var(--line-soft);
  padding: 14px 11px;
}
[data-theme="dark"] .navsec{
  font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--faint-2); font-weight: 600; padding: 14px 12px 5px;
}
[data-theme="dark"] .navbtn{
  position: relative; display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 11px; border-radius: var(--r-9);
  border: none; background: transparent;
  color: var(--text-3); font-size: 13.5px; font-weight: 500;
  margin-bottom: 2px;
}
[data-theme="dark"] .navbtn .ic{ color: var(--faint); }
[data-theme="dark"] .navbtn:hover{
  background: rgba(255,255,255,.035); color: var(--text);
}
/* ACTIVE nav: soft-white tint + sand inset bar (NO cyan glow) */
[data-theme="dark"] .navbtn.on{
  background: rgba(255,255,255,.05); color: var(--text); font-weight: 600;
}
[data-theme="dark"] .navbtn.on .ic{ color: var(--gold); }
[data-theme="dark"] .navbtn.on::before{
  content: ''; position: absolute; left: -11px; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--putty-line);
}

/* --- Topbar (portal uses a <header>) --- */
[data-theme="dark"] header{
  background: var(--bg-rail);
  border-bottom: 1px solid var(--line-soft);
}
[data-theme="dark"] header .sub{ color: var(--mute); }
[data-theme="dark"] .rolechip{
  background: rgba(255,255,255,.06); color: var(--text-2);
}
/* "Sign out" + theme toggle read as quiet ghost buttons on the bar */
[data-theme="dark"] .signout{
  color: var(--mute); border-color: var(--line-strong); background: transparent;
}
[data-theme="dark"] .signout:hover{ color: var(--text); background: rgba(255,255,255,.04); }

/* Save-status pill on the header — recolour to the CD sage/sand/coral set */
[data-theme="dark"] .savestat.saving{ color: var(--gold); }
[data-theme="dark"] .savestat.saved{ color: var(--sage); }
[data-theme="dark"] .savestat.error{ color: var(--text); background: var(--coral); border-color: var(--coral); }


/* ----------------------------------------------------------------------------
   4 · THE SIGNATURE SURFACE — cards, panels, tiles, tables
   ----------------------------------------------------------------------------
   gradient fill + inset top-highlight + soft shadow + softer radius.
   A flat fill would look cheap; the inset rgba(255,255,255,.03) is essential.
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .kpi,
[data-theme="dark"] .panel,
[data-theme="dark"] .card,
[data-theme="dark"] .pcard,
[data-theme="dark"] .note,
[data-theme="dark"] .stub,
[data-theme="dark"] .hcard,
[data-theme="dark"] .ccard,
[data-theme="dark"] .wkcard,
[data-theme="dark"] .actions,
[data-theme="dark"] .frame-actions,
[data-theme="dark"] table{
  background: var(--card-grad);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}
/* Bigger radius for the large surfaces (tables, scorecards) */
[data-theme="dark"] table{ border-radius: var(--r-lg); overflow: hidden; }

/* Panel header strip (eyebrow) */
[data-theme="dark"] .panel{ overflow: hidden; }
[data-theme="dark"] .panel .ph{
  border-color: var(--line-row); color: var(--text-2);
  font-size: 10.5px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; padding: 16px 18px 12px;
}

/* Internal dividers used by alerts / records / lists inside panels */
[data-theme="dark"] .alert,
[data-theme="dark"] .recitem,
[data-theme="dark"] .urow,
[data-theme="dark"] .docitem,
[data-theme="dark"] .audit,
[data-theme="dark"] .act,
[data-theme="dark"] .row{ border-color: var(--line-row); }

/* Card hover lift (only on cards that act as buttons — never table rows) */
[data-theme="dark"] .pcard:hover,
[data-theme="dark"] .ccard:hover,
[data-theme="dark"] .wkcard:hover{
  border-color: var(--hover-line);
  transform: translateY(-2px);
  box-shadow: var(--sh-raise);
}
/* Generic interactive-row hover (list items, not cards) */
[data-theme="dark"] .row:hover,
[data-theme="dark"] .act:hover,
[data-theme="dark"] .urow:hover{ background: var(--tint-2); }


/* ----------------------------------------------------------------------------
   5 · KPI TILES — mono tabular values, accent by meaning
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .kpis{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 13px; margin-bottom: 24px;
}
[data-theme="dark"] .kpi{ padding: 15px 16px; border-radius: var(--r-card); }
[data-theme="dark"] .kpi .v{
  font-size: 22px; font-weight: 600; letter-spacing: -.4px;
  line-height: 1; white-space: nowrap; color: var(--text);
}
[data-theme="dark"] .kpi .l{
  font-size: 9.5px; font-weight: 400; letter-spacing: .5px;
  text-transform: uppercase; color: var(--faint); margin-top: 9px;
}
/* Accent map — teal→gold (no cyan). green=good, amber=money/watch, red=bad */
[data-theme="dark"] .kpi.teal  .v{ color: var(--gold); }
[data-theme="dark"] .kpi.green .v{ color: var(--sage); }
[data-theme="dark"] .kpi.amber .v{ color: var(--gold); }
[data-theme="dark"] .kpi.red   .v{ color: var(--coral); }


/* ----------------------------------------------------------------------------
   6 · TABLES — carbon thead, mono numbers, calm row hover
   ---------------------------------------------------------------------------- */
[data-theme="dark"] th{
  background: var(--tint); color: var(--mute-2);
  font-size: 9.5px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; white-space: nowrap;
  padding: 11px 16px; text-align: left;
  border-bottom: 1px solid var(--line-row);
}
[data-theme="dark"] td{
  padding: 12px 16px; vertical-align: middle;
  border-bottom: 1px solid var(--line-row); border-color: var(--line-row);
}
/* Body rows: top-divider feel + a calm bg hover (no transform on rows) */
[data-theme="dark"] tbody tr{ transition: background .15s; }
[data-theme="dark"] tbody tr:hover{ background: var(--tint-2); }
/* "over"/overdue row keeps its danger wash */
[data-theme="dark"] tr.over td{ background: var(--chip-bad-bg); }
/* Totals row */
[data-theme="dark"] table tr.tot td{ border-top: 2px solid var(--line-strong); font-weight: 600; }
/* Money / status emphasis cells (where markup adds a class) */
[data-theme="dark"] td.num{ color: var(--text); }
[data-theme="dark"] td.money{ color: var(--gold); }
[data-theme="dark"] td.pos{ color: var(--sage); }


/* ----------------------------------------------------------------------------
   7 · BADGES / CHIPS / STATUS PILLS — the paired bg/fg map
   ----------------------------------------------------------------------------
   pos=good/Active/paid · warn=watch/bid/money/direct · bad=overdue/error ·
   info=defects/role/link · mut=neutral/archived/provider.
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .sb,
[data-theme="dark"] .bdg,
[data-theme="dark"] .pri,
[data-theme="dark"] .acctchip,
[data-theme="dark"] .todo,
[data-theme="dark"] .ready{
  font-weight: 600; letter-spacing: .3px; white-space: nowrap;
}

/* positive / good */
[data-theme="dark"] .sb.s3,
[data-theme="dark"] .bdg.act,
[data-theme="dark"] .ready,
[data-theme="dark"] .acctchip.in,
[data-theme="dark"] .frm .msg.ok{ background: var(--chip-pos-bg); color: var(--chip-pos-fg); }

/* warn / watch / money / bid / direct */
[data-theme="dark"] .sb.s2,
[data-theme="dark"] .bdg.bid,
[data-theme="dark"] .bdg.flag,
[data-theme="dark"] .bdg.def,
[data-theme="dark"] .pri.med,
[data-theme="dark"] .todo,
[data-theme="dark"] .seat.sv{ background: var(--chip-warn-bg); color: var(--chip-warn-fg); }

/* bad / overdue / error */
[data-theme="dark"] .sb.over,
[data-theme="dark"] .pri.high,
[data-theme="dark"] .acctchip.out,
[data-theme="dark"] .frm .msg.bad{ background: var(--chip-bad-bg); color: var(--chip-bad-fg); }

/* info / link / role */
[data-theme="dark"] .sb.s1,
[data-theme="dark"] .bdg.info,
[data-theme="dark"] .seat.ow{ background: var(--chip-info-bg); color: var(--chip-info-fg); }
[data-theme="dark"] .bdg.role{
  background: var(--chip-info-bg); color: var(--chip-info-fg);
  border: 1px solid var(--chip-info-bd);
}

/* neutral / archived / provider / type */
[data-theme="dark"] .sb.s0,
[data-theme="dark"] .bdg.type,
[data-theme="dark"] .bdg.hold{ background: var(--chip-mut-bg); color: var(--chip-mut-fg); }

/* extra explicit status variants */
[data-theme="dark"] .bdg.done{ background: #1E2422; color: var(--sage-2); }
[data-theme="dark"] .bdg.onhold{ background: #2C2410; color: var(--gold-2); }

/* Count badge (nav badge / board column / queue) */
[data-theme="dark"] .navbadge,
[data-theme="dark"] .cnt,
[data-theme="dark"] .countbadge{
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  background: var(--line-strong); color: var(--text-2);
  border-radius: var(--r-pill); padding: 1px 7px;
}
[data-theme="dark"] .navbadge.danger{ background: var(--chip-bad-bg); color: var(--coral); }


/* ----------------------------------------------------------------------------
   8 · BUTTONS — four variants
   ----------------------------------------------------------------------------
   primary = cream (the one bright thing) · secondary · mini/outline · link.
   There is no filled-red button — danger is text/chip level.
   ---------------------------------------------------------------------------- */

/* Primary CTA — cream gradient + near-black text + cream inset shadow.
   The portal's "Create project →" lives on .npbtn; explicit .primary covered. */
[data-theme="dark"] button.primary,
[data-theme="dark"] .npbtn:not(.ghost),
[data-theme="dark"] .frm button:not(.ghost),
[data-theme="dark"] .mc-logbtn,
[data-theme="dark"] .mc-upbtn,
[data-theme="dark"] .mc-gatebtn:not(.sec){
  background: var(--cream); color: var(--on-cream);
  border: none; font-size: 12.5px; font-weight: 600;
  padding: 9px 16px; border-radius: var(--r-9); box-shadow: var(--sh-cream);
}
[data-theme="dark"] button.primary:hover,
[data-theme="dark"] .npbtn:not(.ghost):hover,
[data-theme="dark"] .frm button:not(.ghost):hover,
[data-theme="dark"] .mc-logbtn:hover,
[data-theme="dark"] .mc-upbtn:hover,
[data-theme="dark"] .mc-gatebtn:not(.sec):hover{ filter: brightness(1.06); }

/* Secondary — graphite fill, soft border */
[data-theme="dark"] .npbtn.ghost,
[data-theme="dark"] .mc-gatebtn.sec{
  background: var(--tint-2); color: var(--text-2);
  border: 1px solid var(--line-strong);
  font-size: 12.5px; font-weight: 500; padding: 8px 14px; border-radius: var(--r-9);
}
[data-theme="dark"] .npbtn.ghost:hover,
[data-theme="dark"] .mc-gatebtn.sec:hover{ background: var(--line-strong); color: var(--text); }

/* Mini / small outline (.minibtn, generic small actions, .urow buttons) */
[data-theme="dark"] .minibtn,
[data-theme="dark"] .urow button,
[data-theme="dark"] .btnG{
  background: transparent; color: var(--text-2);
  border: 1px solid var(--line-strong-2);
  font-size: 11px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-8);
}
[data-theme="dark"] .minibtn:hover,
[data-theme="dark"] .urow button:hover,
[data-theme="dark"] .btnG:hover{ background: var(--line-strong); border-color: var(--hover-line-2); color: var(--text); }
/* Mini destructive — red text, never a filled red button */
[data-theme="dark"] .urow button.del{ color: var(--coral); border-color: #4A2228; }
[data-theme="dark"] .urow button.del:hover{ background: var(--chip-bad-bg); color: #FF8A94; }

/* Link button (periwinkle outline) */
[data-theme="dark"] .linkbtn,
[data-theme="dark"] .dl a.o{
  background: transparent; color: var(--peri);
  border: 1px solid var(--chip-info-bd);
  font-size: 11.5px; font-weight: 600; padding: 7px 13px; border-radius: var(--r-8);
}
[data-theme="dark"] .linkbtn:hover,
[data-theme="dark"] .dl a.o:hover{ background: var(--chip-info-bg); }

/* "+ New" addcard tile */
[data-theme="dark"] .addcard{
  background: var(--bg-rail); border: 1px dashed var(--line-strong-2);
  border-radius: var(--r-md); color: var(--mute);
}
[data-theme="dark"] .addcard:hover{ border-color: var(--hover-line); color: var(--text-2); }

/* Mission-Control hero CTA (a bright local band) — keep its cream accent */
[data-theme="dark"] .mc-hero button{ background: var(--cream); color: var(--on-cream); }
[data-theme="dark"] .mc-hero button.mc-bsec{ background: rgba(255,255,255,.14); color: var(--text); }


/* ----------------------------------------------------------------------------
   9 · INPUTS & SELECTS — graphite field, warm sand focus (NOT cyan)
   ---------------------------------------------------------------------------- */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .cin,
[data-theme="dark"] .dinput,
[data-theme="dark"] .npi,
[data-theme="dark"] .acctform input,
[data-theme="dark"] .acctform select{
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r-9);
  font-family: inherit;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .cin:focus,
[data-theme="dark"] .dinput:focus,
[data-theme="dark"] .npi:focus,
[data-theme="dark"] .acctform input:focus,
[data-theme="dark"] .acctform select:focus{
  border-color: var(--faint-3); outline: none;   /* warm #46423E, not cyan */
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder{ color: var(--faint); }
/* checkbox / radio accent → sand */
[data-theme="dark"] input[type=checkbox],
[data-theme="dark"] input[type=radio],
[data-theme="dark"] .nptype input{ accent-color: var(--gold); }


/* ----------------------------------------------------------------------------
   10 · SUBTABS / SEGMENTED SUB-NAV
   ----------------------------------------------------------------------------
   The portal ships two patterns: .subtabs/.subtab (underline) and
   .ptabs/.ptab (pill). Render the pill set as the CD segmented strip; keep the
   underline set but recolour its active state to sand.
   ---------------------------------------------------------------------------- */

/* Pill segmented strip (.ptab) — CD "boxed" treatment */
[data-theme="dark"] .ptabs{
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px;
  border-bottom: 1px solid var(--line-row); padding-bottom: 18px;
}
[data-theme="dark"] .ptab{
  border: 1px solid var(--line-strong); background: transparent;
  color: var(--mute); font-size: 11.5px; font-weight: 600;
  padding: 6px 13px; border-radius: var(--r-8);
  transition: background .15s, border-color .15s, color .15s;
}
[data-theme="dark"] .ptab:hover{ color: var(--text); border-color: var(--hover-line-2); }
[data-theme="dark"] .ptab.on{
  border-color: #4A4845; background: rgba(255,255,255,.06);
  color: var(--text); font-weight: 600;
}
[data-theme="dark"] .ptab .cnt{ color: var(--mute); }

/* Underline subtabs (.subtab) — recolour active from teal → sand */
[data-theme="dark"] .subtabs{ border-bottom-color: var(--line-row); }
[data-theme="dark"] .subtab{ color: var(--mute); }
[data-theme="dark"] .subtab.on{ color: var(--text); border-bottom-color: var(--gold); }


/* ----------------------------------------------------------------------------
   11 · PAGE HEADER (h1 + subtitle) and section eyebrows
   ---------------------------------------------------------------------------- */
[data-theme="dark"] h1{
  font-size: 23px; font-weight: 700; letter-spacing: -.5px;
  margin-bottom: 5px; color: var(--text);
}
[data-theme="dark"] .psub{
  font-size: 13px; line-height: 1.5; color: var(--mute);
  margin-bottom: 22px; max-width: 700px;
}
[data-theme="dark"] h2{
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text-2); margin: 26px 0 13px;
}
/* depth-graded muted helpers */
[data-theme="dark"] .meta,
[data-theme="dark"] .hint2,
[data-theme="dark"] .dd,
[data-theme="dark"] .rp,
[data-theme="dark"] .ap{ color: var(--mute); }


/* ----------------------------------------------------------------------------
   12 · NOTE / CALLOUT
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .note{
  background: var(--surface); border: 1px solid var(--line);
  border-left: 2px solid var(--faint-2); border-radius: 10px;
  padding: 13px 16px; font-size: 12.5px; line-height: 1.65;
  color: var(--mute-3); box-shadow: none;
}
/* Amber/warning callout (worker-migration notice etc.) */
[data-theme="dark"] .callout-warn{
  background: var(--chip-warn-bg); border: 1px solid #5A4A2A;
  border-left: 2px solid var(--gold); color: var(--gold);
}
[data-theme="dark"] .acctflag{ background: var(--chip-warn-bg); border: 1px solid #5A4A2A; }


/* ----------------------------------------------------------------------------
   13 · EMPTY / STUB STATE
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .stub{
  background: var(--card-grad); border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg); padding: 50px 40px; text-align: center;
  color: var(--mute-2); box-shadow: none;
}


/* ----------------------------------------------------------------------------
   14 · MODALS / DRAWERS
   ----------------------------------------------------------------------------
   The portal centres modals (.cmodal/.cmcard). We keep its DOM but give it the
   CD surface treatment: dark backdrop + blur, carbon panel, soft drawer-grade
   shadow. (#wkModal / #clientModal / #newProjModal all use .cmodal/.cmcard.)
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .cmodal{ background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
[data-theme="dark"] .cmcard{
  background: var(--bg-rail); border: 1px solid var(--line-strong);
  box-shadow: var(--sh-drawer);
}
[data-theme="dark"] .cmhdr{
  background: var(--surface); border-bottom: 1px solid var(--line-strong);
  color: var(--text);
}
[data-theme="dark"] .cmhdr #clientTitle,
[data-theme="dark"] .cmhdr #wkTitle{ color: var(--text); }
[data-theme="dark"] .cmx{
  background: var(--surface-2); border: 1px solid var(--line-strong);
  color: var(--mute); border-radius: var(--r-9);
}
[data-theme="dark"] .cmx:hover{ background: var(--line-strong); color: var(--text); }
[data-theme="dark"] .csec{ color: var(--text); }

/* New-project type chooser cards */
[data-theme="dark"] .nptype{
  background: var(--surface-2); border: 1px solid var(--line-strong);
}
[data-theme="dark"] .nptype:hover{ border-color: var(--hover-line); }
[data-theme="dark"] .nptype span{ color: var(--mute); }
[data-theme="dark"] .npl{ color: var(--mute-2); }

/* Mission-Control right drawer + its scrim (already a true right-drawer) */
[data-theme="dark"] #mcDrawer{ background: var(--bg-rail); box-shadow: var(--sh-drawer); }
[data-theme="dark"] .mc-dhead{ background: var(--surface); color: var(--text); }
[data-theme="dark"] .mc-dhead button{ background: rgba(255,255,255,.08); color: var(--text); }
[data-theme="dark"] .mc-docbody,
[data-theme="dark"] .mc-tool,
[data-theme="dark"] .mc-checklist,
[data-theme="dark"] .mc-srcbox{ background: var(--surface); border-color: var(--line); color: var(--text); }


/* ----------------------------------------------------------------------------
   15 · FILE-DROP (.acctdrop) — accounting import surface
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .acctdrop{
  background: var(--surface); border: 2px dashed var(--line-strong);
  color: var(--mute); border-radius: 12px;
}
[data-theme="dark"] .acctdrop.drag{
  border-color: var(--gold); background: rgba(199,174,123,.07); color: var(--gold);
}


/* ----------------------------------------------------------------------------
   16 · PROGRESS / METER BARS
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .pbar{
  background: var(--bg); border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
[data-theme="dark"] .pcard .pbar{ height: 5px; border-radius: 6px; background: #211F23; box-shadow: none; }
[data-theme="dark"] .pfill,
[data-theme="dark"] .pcard .pfill{ background: linear-gradient(90deg, #7A6A48, var(--gold)); }
[data-theme="dark"] .mbar{ /* status meter — colour set inline by markup; just round it */ border-radius: 4px; }


/* ----------------------------------------------------------------------------
   17 · PROJECT CARD anatomy (exact CD proportions)
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .pgrid{ grid-template-columns: repeat(auto-fill, minmax(322px, 1fr)); gap: 14px; }
[data-theme="dark"] .pcard{ padding: 18px; border-radius: var(--r-card); }
[data-theme="dark"] .pcard .code{ color: var(--mute); font-size: 11px; letter-spacing: .04em; }
[data-theme="dark"] .pcard .nm{ font-size: 14.5px; font-weight: 600; letter-spacing: -.2px; }
[data-theme="dark"] .pcard .meta,
[data-theme="dark"] .pcard .cl{ color: var(--mute); }
[data-theme="dark"] .pmoney .cv{ font-size: 19px; font-weight: 600; letter-spacing: -.2px; color: var(--text); }
[data-theme="dark"] .pfoot{ border-top: 1px solid var(--line-row); }
[data-theme="dark"] .attn{ color: var(--gold); }
[data-theme="dark"] .attn.red{ color: var(--coral); }
[data-theme="dark"] .attn.none{ color: var(--mute); }
[data-theme="dark"] .open,
[data-theme="dark"] .openrec{ color: var(--text-2); font-weight: 600; }
[data-theme="dark"] .alertcount{ color: var(--gold); }
[data-theme="dark"] .alertcount.bad{ color: var(--coral); }
[data-theme="dark"] .alertcount.ok{ color: var(--mute); }


/* ----------------------------------------------------------------------------
   18 · WORKER / CLIENT cards + avatars + login surface
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .wkname{ color: var(--text); }
[data-theme="dark"] .wkid{ color: var(--mute); }
[data-theme="dark"] .cav,
[data-theme="dark"] .wkav{ background: var(--line-strong); }
[data-theme="dark"] .cav{ color: var(--text); }
[data-theme="dark"] .cmeta{ border-top-color: var(--line-row); color: var(--mute); }
/* Login card sub + footer */
[data-theme="dark"] .card .sub,
[data-theme="dark"] .foot{ color: var(--mute); }
/* Navy wordmark on a dark login card → render white */
[data-theme="dark"] .brandmark{ filter: brightness(0) invert(1); opacity: .92; }
/* Credentials box (client modal) — recarbon from the old cyan-tinted look */
[data-theme="dark"] .credok{ background: var(--chip-pos-bg); border-color: #23352B; color: var(--text); }
[data-theme="dark"] .credok pre,
[data-theme="dark"] .credok button{ background: var(--surface-2); border-color: var(--line-strong); color: var(--text); }


/* ----------------------------------------------------------------------------
   19 · KILL THE CYAN — interaction colour everywhere → sand / soft-white
   ----------------------------------------------------------------------------
   theme.css and a few inline styles use cyan (#2BD4E4 / #0FAFC4 / #0B8C9E) and
   the takeoff wall-type tags use bright fills. Convert focus ring, selection,
   and the cyan wall tags to the muted CD palette.
   ---------------------------------------------------------------------------- */

/* Branded keyboard focus → sand, not cyan */
:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* Text selection → warm sand tint (override theme.css's cyan selection) */
[data-theme="dark"] ::selection{ background: rgba(199,174,123,.28); }

/* Wall-type tags (takeoff) — desaturate the old neons onto carbon */
[data-theme="dark"] .t-ibs{   background: #16241C; color: var(--sage); }
[data-theme="dark"] .t-brick{ background: #2A1D12; color: var(--gold); }
[data-theme="dark"] .t-aac{   background: #1E1830; color: #B79BE8; }
[data-theme="dark"] .t-vent{  background: var(--chip-warn-bg); color: var(--gold); }
[data-theme="dark"] .t-open{  background: var(--chip-info-bg); color: var(--peri); }

/* Quiet scrollbars in the CD graphite range */
[data-theme="dark"] ::-webkit-scrollbar-thumb{
  background: rgba(120,116,110,.32); border-radius: 6px;
  border: 2px solid transparent; background-clip: content-box;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background: rgba(120,116,110,.55); border: 2px solid transparent; background-clip: content-box; }


/* ----------------------------------------------------------------------------
   20 · MOTION — calm + functional; honour reduced-motion
   ---------------------------------------------------------------------------- */
[data-theme="dark"] .pcard, [data-theme="dark"] .ccard, [data-theme="dark"] .wkcard{
  transition: background-color .15s ease, color .15s ease,
              border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
@media (prefers-reduced-motion: reduce){
  [data-theme="dark"] .pcard, [data-theme="dark"] .ccard, [data-theme="dark"] .wkcard{ transition: none; }
  [data-theme="dark"] .pcard:hover, [data-theme="dark"] .ccard:hover, [data-theme="dark"] .wkcard:hover{ transform: none; }
}


/* ----------------------------------------------------------------------------
   21 · MOBILE — keep the slide-in sidebar drawer on the carbon palette
   ---------------------------------------------------------------------------- */
@media (max-width: 760px){
  [data-theme="dark"] main{ padding: 16px 14px 50px; }
  [data-theme="dark"] .pane.on, [data-theme="dark"] .wrap{ max-width: none; }
  [data-theme="dark"] .kpis{ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  /* the drawer-sidebar used the navy gradient + cyan active in theme.css */
  [data-theme="dark"] .sidebar{ background: var(--bg-rail); }
  [data-theme="dark"] .navbtn{ color: var(--text-3); }
  [data-theme="dark"] .navbtn.on{ background: rgba(255,255,255,.06); color: var(--text); }
}

/* ===== Growth / Mission-Control — retheme the inline light-mode literals to the dark CD palette =====
   (these classes are defined in portal.html's earlier inline <style>; cd-theme.css loads after, so wins) */
.mc-hero{ background:linear-gradient(160deg,#231F18,#18140E); color:var(--ink,#ECEAE8); border:1px solid rgba(199,168,128,.16); box-shadow:0 8px 26px rgba(0,0,0,.38); }
.mc-hero button{ background:linear-gradient(180deg,#F5F3EF,#E2DED7); color:#1A1714; }
.mc-hero button.mc-bsec{ background:rgba(255,255,255,.07); color:var(--ink,#ECEAE8); }
.mc-banner{ color:#D9BE86; background:rgba(199,168,128,.10); }
.mc-banner.warn{ color:#E2918A; background:rgba(220,96,86,.12); }
.mc-adv{ color:#9DB2F5; background:rgba(157,178,245,.10); }
.mc-fill{ background:rgba(199,168,128,.16); color:#D9BE86; border-bottom-color:rgba(199,168,128,.5); }
.mc-fill.done{ background:rgba(199,168,128,.12); color:var(--ink,#ECEAE8); border-bottom-color:#C7AE7B; }
.mc-num input{ color:#C7AE7B; }

/* ============================================================================
   END cd-theme.css
   ============================================================================ */