/* ============================================================================
   industrial.css — Industrial Skeuomorphism for the AgencyWorks backend.
   (GH Files/SKILL.md is the canonical spec — tactile precision hardware.)

   Loaded AFTER each staff page's inline <style>, so it reskins pages in place:
   (a) remaps the --psf-* tokens to the light chassis palette,
   (b) gives shared components the dual-shadow physics (light from top-left),
   (c) stamps the manufacturing DNA: corner screws, grooves, LEDs, mono data.

   One shared layer: tune here and every backend page updates.
   The sidebar (.psf-shell) deliberately stays the ORIGINAL dark chassis.
   EVERY authenticated page loads this (staff pages AND the client portal);
   only the public marketing pages (index, videos) keep the dark cinema look.

   Physics: light 45° from top-left. Modules (panels/rows) are FLAT — a thin
   machined line, no throw (house decision Jul 23 2026). Controls keep the
   physics: recessed = inset, pressed = inverted shadows + translateY(2px)
   @150ms spring.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---- palette remap (dark tokens -> chassis light). !important beats both the
   inline defaults and theme.js overrides. Steel stays the primary accent per
   the house decision; safety orange is reserved for alerts/overdue only. ---- */
:root {
  --psf-black:        #d1d9e6 !important;   /* recessed wells, deep slots */
  --psf-surface:      #e7ecf2 !important;   /* raised panel faces */
  --psf-graphite:     #d1d9e6 !important;   /* track grooves, hover wells */
  --psf-border:       #c6cdd9 !important;
  --psf-border-light: #d3dae4 !important;
  --psf-silver:       #2d3436 !important;   /* body ink */
  --psf-white:        #1d2427 !important;   /* heading ink */
  --psf-text-muted:   #4a5568 !important;
  --psf-text-faint:   #6c7685 !important;
  --psf-steel:        #4963ae !important;   /* primary accent (steel) */
  --psf-steel-deep:   #3c5296 !important;
  --psf-steel-shadow: #dfe5f2 !important;   /* steel tint (active chips, fills) */
  --psf-warn:         #ff4757 !important;   /* safety accent — alerts ONLY */
  --psf-amber:        #e8892f !important;   /* softer caution (due-soon etc.) */
  --psf-brass:        #a3762e !important;   /* job internal-room brass, darkened for light chassis */
  --psf-good:         #23935a !important;   /* success green, darkened for light chassis */
  --ind-lo:  #babecc;                       /* shadow (dark half) */
  --ind-hi:  #ffffff;                       /* highlight half */
  --ind-mut: #d1d9e6;                       /* machined slot fill */
  --ind-ink: #2d3436;
  --ind-line:  #c9cfda;                     /* flat module edge (panels) */
  --ind-line2: #d0d6e0;                     /* flat module edge (rows) */
  --ind-hov:   #9daecc;                     /* module edge on hover */
  --ind-sans: 'Inter', 'Manrope', system-ui, sans-serif;
  /* the "data face" is Inter too (user call: no typewriter mono on the light
     chassis) — labels stay uppercase+tracked, numbers stay tabular */
  --ind-mono: 'Inter', 'Manrope', system-ui, sans-serif;
  --ind-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ---- wide bench: every monitor is ≥1920, so give staff pages real room.
   Scoped to sidebar pages — client/talent portals keep their narrow,
   deliberate reading widths. ---- */
body.psf-has-shell .wrap { max-width: 1400px !important; }

/* ---- chassis: matte light metal with the workshop light top-left ---- */
html, body { background: #e0e5ec !important; }
body { font-family: var(--ind-sans) !important; color: var(--ind-ink) !important; }
::selection { background: rgba(73, 99, 174, 0.25); color: #1d2427; }
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(65vw 60vh at 0% 0%, rgba(255,255,255,0.55), transparent 62%),
    repeating-linear-gradient(180deg, rgba(45,52,54,0.006) 0 1px, transparent 1px 5px); }

/* ---- type: Inter carries the page, JetBrains stamps every datum ---- */
h1, h2, h3, h4, .display, .sec, .list-head {
  font-family: var(--ind-sans) !important; font-weight: 800 !important;
  color: #1d2427 !important; text-shadow: 0 1px 0 #ffffff; letter-spacing: -0.015em;
}
.mono, .n-k, .k, .m, .meta, .cmeta, .am, .crumb, .h-meta, .hint, .tm, .cby,
.date, .date2, .tdue, .cwhen, .sub, .sub2, .lead {
  font-family: var(--ind-mono) !important; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* numbers are readouts: stats, totals, counters in mono, heavy */
.stat .v, .metrics b, .time-total, .cnt, .tcount, .cv-badge, .hv, .pg-top, .pp-pct {
  font-family: var(--ind-mono) !important; font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

/* ---- +1 panels: flat modules — a thin machined line, no throw. (The deep
   neumorphic shadow was retired by request; only controls keep physics.) ---- */
.card, .tcard, .acard, .fcard, .prop-card, .job-card, .stat, .tstat, .node,
.qrow, .chart, .item, .inv-box, .compose, .composer, .msg, .lrow,
.rel-row, .aud, .ev, .coll, div.signed, .contact, .site-sec, .site-item,
.notif-card, .feed, .grp .task, .cust-form, .cardEditor, .queue-item,
.team, .spark, .proj, .taskgroup, .cast-call, .pipe, .cust,
.intro-card, .news-card, .card-auth, .mcard, .cust-card, .rc-cat {
  background: var(--psf-surface) !important;
  border: 1px solid var(--ind-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  position: relative;
}
.card:hover, .tcard:hover, .acard:hover, .fcard:hover, .prop-card:hover,
.job-card:hover, .qrow:hover, .cust:hover, .cust-card:hover {
  border-color: var(--ind-hov) !important;
  transition: border-color 300ms var(--ind-spring);
}
/* rate-card categories keep their steel index edge on the left */
.rc-cat { border-left: 2px solid var(--psf-steel) !important; }
/* (corner screws removed by request — panels stay clean) */

/* ---- level 0.5: list rows — same flat line, one shade lighter ---- */
.row, a.emp, .emp, .deal-row, .crow, .todo, .task, .time-row, .eng, .krow,
.cast-app, .hbar, .capp, .call, .prow,
.attn-item, .feed-item, .up-row, .snap a, .cmsg, .att .fcard {
  background: var(--psf-surface) !important;
  border: 1px solid var(--ind-line2) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.row:hover, a.emp:hover, .deal-row:hover, .crow:hover, .todo:hover, .task:hover,
.attn-item:hover, .feed-item:hover, .up-row:hover, .snap a:hover, .att .fcard:hover {
  border-color: var(--ind-hov) !important;
  transition: border-color 300ms var(--ind-spring);
}

/* section heads: the machined groove retired in favor of the kicker —
   see the block at the end of this file (DESIGN-SYSTEM §3) */

/* ---- -1 recessed: machined data slots (no borders — depth is the border) ---- */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
textarea, select, .pin, .site-in, .site-ta {
  background: var(--ind-mut) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: inset 3px 3px 6px var(--ind-lo), inset -3px -3px 6px var(--ind-hi) !important;
  color: var(--ind-ink) !important;
  font-family: var(--ind-mono);
}
input:focus, textarea:focus, select:focus, .pin:focus {
  outline: none !important;
  box-shadow: inset 3px 3px 6px var(--ind-lo), inset -3px -3px 6px var(--ind-hi), 0 0 0 2px rgba(73,99,174,0.55) !important;
}
/* recessed message wells + progress tracks */
.sp-msg.ai, .cmsg .bubble, .spark-messages, .conv-messages, .pick,
.pg-bar, .pp-bar, .hbar .bar, .upbar, .err, .auth-err, .banner {
  background: var(--ind-mut) !important; border: none !important;
  box-shadow: inset 2px 2px 5px var(--ind-lo), inset -2px -2px 5px var(--ind-hi) !important;
}
.pg-bar i, .pp-bar i, .hbar .bar i { box-shadow: 0 0 6px rgba(73,99,174,0.5); }

/* ---- +2 floating: physical keys. Press = pushed in. ---- */
button:not(.tab):not(.mx):not(.chip):not(.psf-burger):not(.cx):not(.x),
.btn, .btn-solid, .btn-outline, .newbtn, .sec-btn, .cta, .rc-add, .site-mini,
button.go, .conv-send, .chat-new, .upl-btn, .rpush, .feed-add, .feed-file, .rstbtn, .addrole {
  border: none !important; border-radius: 8px !important;
  font-family: var(--ind-mono) !important; font-weight: 700 !important;
  box-shadow: 4px 4px 8px var(--ind-lo), -4px -4px 8px var(--ind-hi) !important;
  transition: all 150ms var(--ind-spring) !important;
}
button:active, .btn:active, .btn-solid:active, .newbtn:active, .sec-btn:active,
.cta:active, button.go:active, .conv-send:active, .rpush:active {
  box-shadow: inset 4px 4px 8px var(--ind-lo), inset -4px -4px 8px var(--ind-hi) !important;
  transform: translateY(2px);
}
/* primary keys: steel-filled, deeper throw */
.btn-solid, .newbtn:not(.ghost), .cta, .btn.push, button.go, .conv-send, .feed-add, .rpush, .subbtn {
  background: #4963ae !important; color: #ffffff !important;
  box-shadow: 4px 4px 9px rgba(51,69,122,0.32), -3px -3px 8px rgba(160,175,220,0.5) !important;
}
.btn-solid:active, .newbtn:active, .cta:active, button.go:active, .conv-send:active {
  box-shadow: inset 3px 3px 7px rgba(51,69,122,0.42), inset -2px -2px 6px rgba(140,158,210,0.4) !important;
}
/* danger keys: the emergency stop — safety accent, used almost never */
.del:hover, .k-del:hover, .cx:hover { color: #ff4757 !important; }
/* google sign-in key: was white-on-dark; on the chassis it's a neutral key */
.gbtn { background: var(--psf-surface) !important; color: var(--ind-ink) !important; }

/* ---- chips / badges: stamped tags ---- */
.chip, .badge, .count, .tag, .team-tag, .rchip, .kchip, .cchips span, .t-points span {
  background: var(--psf-surface) !important; border: none !important; color: #4a5568 !important;
  font-family: var(--ind-mono) !important;
  box-shadow: 2px 2px 5px var(--ind-lo), -2px -2px 5px var(--ind-hi) !important;
}
.chip.active { color: #ffffff !important; background: #4963ae !important;
  box-shadow: inset 2px 2px 5px rgba(51,69,122,0.45), inset -2px -2px 4px rgba(140,158,210,0.35) !important; }
.badge.live, .badge.open, .badge.due, .badge.proj, .badge.queue, .rchip.shared { color: #4963ae !important; }
.badge.prop, .badge.signed, .badge.active, .team-tag, .st.client { background: #4963ae !important; color: #fff !important; }
.badge.late, .badge.warn { color: #ff4757 !important; }
.badge.retired { color: #6c7685 !important; }

/* ---- LEDs glow; severity dots become status lamps ---- */
.live-dot, .notif-dot, .dot { box-shadow: 0 0 8px 1px rgba(73,99,174,0.55) !important; }
.sev { box-shadow: 0 0 7px 1px currentColor; }
.sev.s0 { background: #ff4757 !important; color: rgba(255,71,87,0.5); }
.sev.s1 { background: #e8892f !important; color: rgba(232,137,47,0.4); }

/* ---- sweep corrections: status colors that were tuned for dark ground ----
   Mint/gold TEXT reads washed-out on the light chassis — darken to legible
   tones. Mint FILLS keep their color but get dark ink on top. */
.saved, .prow .pi, .pill.approved, .badge.in-service, .n-ic.task,
.sbtn.on.approve, .pv-sbtn.approve.on, .cstat.applied { color: #23935a !important; }
.astat.shortlisted, .ca-st.shortlisted, .pill.pending, .badge.minor,
.badge.property, .rel-badge.rel-minor, .rel-badge.rel-property,
.stagechip, .sbtn.on.review, .pv-sbtn.review.on, .cstat.shortlisted { color: #a6791f !important; }
.astat.cast, .ca-st.cast, .st.approved, .cstat.cast { color: #0f2a1c !important; }
.up-row .uk.exp { color: #a6791f !important; border-color: rgba(166,121,31,0.45) !important; }

/* tabs: flat labels until active — then the steel indicator lights */
.tab { font-family: var(--ind-mono) !important; }
.tab.active { color: #1d2427 !important; border-bottom-color: #4963ae !important; }

/* avatars/initials keep contrast on light chassis */
.emp-ini, .conv .cv-ic, .cmt .av { box-shadow: 2px 2px 5px var(--ind-lo), -2px -2px 5px var(--ind-hi) !important; }

/* light scrollbars to match the chassis */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ind-mut); border-radius: 6px; }
::-webkit-scrollbar-thumb { background: #b3bccb; border-radius: 6px; border: 2px solid var(--ind-mut); }
::-webkit-scrollbar-thumb:hover { background: #9aa5b8; }

/* ---- mobile: same flat lines, slightly tighter radius ---- */
@media (max-width: 700px) {
  .card, .team, .spark, .proj, .cust { border-radius: 14px !important; }
  body::after { background: radial-gradient(90vw 40vh at 0% 0%, rgba(255,255,255,0.5), transparent 60%); }
}

/* ============================================================================
   DARK INDUSTRIAL — the night-shift chassis. Same physics engine: light still
   comes from top-left, panels still rise, buttons still press in. Only the
   material changes: gunmetal instead of light alloy. Toggled by theme.js
   (data-theme="dark"; industrial pages default light, own preference key).
   ========================================================================== */
html[data-theme="dark"] {
  --psf-black:        #1a1e25 !important;
  --psf-surface:      #262c35 !important;
  --psf-graphite:     #1e232b !important;
  --psf-border:       #333a45 !important;
  --psf-border-light: #3b434f !important;
  --psf-silver:       #c3cbd6 !important;
  --psf-white:        #eef1f6 !important;
  --psf-text-muted:   #97a1b0 !important;
  --psf-text-faint:   #717c8c !important;
  --psf-steel:        #7f9bd8 !important;
  --psf-steel-deep:   #5c77b5 !important;
  --psf-steel-shadow: #2b3448 !important;
  --psf-warn:         #ff5b69 !important;
  --psf-amber:        #f09a45 !important;
  --psf-brass:        #cba46a !important;
  --psf-good:         #4fc98b !important;
  --ind-lo:  #171b21;
  --ind-hi:  #333b48;
  --ind-mut: #1e232b;
  --ind-ink: #c3cbd6;
  --ind-line:  rgba(255,255,255,0.09);
  --ind-line2: rgba(255,255,255,0.07);
  --ind-hov:   rgba(127,155,216,0.55);
}
html[data-theme="dark"], html[data-theme="dark"] body { background: #22272f !important; }
html[data-theme="dark"] body { color: var(--ind-ink) !important; }
html[data-theme="dark"] ::selection { background: rgba(127,155,216,0.3); color: #eef1f6; }
html[data-theme="dark"] body::after { background:
  radial-gradient(65vw 60vh at 0% 0%, rgba(255,255,255,0.05), transparent 62%),
  repeating-linear-gradient(180deg, rgba(255,255,255,0.005) 0 1px, transparent 1px 5px); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] .display, html[data-theme="dark"] .sec,
html[data-theme="dark"] .list-head {
  color: #eef1f6 !important; text-shadow: 0 1px 0 rgba(0,0,0,0.45);
}
/* module edges are driven by --ind-line/--ind-line2/--ind-hov (set above),
   so every panel and row class flips automatically — no per-class lists. */
/* primary keys: brighter steel, deeper night throw */
html[data-theme="dark"] .btn-solid, html[data-theme="dark"] .newbtn:not(.ghost),
html[data-theme="dark"] .cta, html[data-theme="dark"] .btn.push, html[data-theme="dark"] button.go,
html[data-theme="dark"] .conv-send, html[data-theme="dark"] .feed-add, html[data-theme="dark"] .rpush,
html[data-theme="dark"] .subbtn {
  background: #4f6cb8 !important; color: #ffffff !important;
  box-shadow: 4px 4px 9px rgba(8,11,17,0.6), -3px -3px 8px rgba(96,116,168,0.22) !important;
}
html[data-theme="dark"] .btn-solid:active, html[data-theme="dark"] .newbtn:active,
html[data-theme="dark"] .cta:active, html[data-theme="dark"] button.go:active,
html[data-theme="dark"] .conv-send:active {
  box-shadow: inset 3px 3px 7px rgba(8,11,17,0.65), inset -2px -2px 6px rgba(96,116,168,0.25) !important;
}
html[data-theme="dark"] .chip.active { background: #4f6cb8 !important;
  box-shadow: inset 2px 2px 5px rgba(8,11,17,0.6), inset -2px -2px 4px rgba(96,116,168,0.2) !important; }
html[data-theme="dark"] .badge.prop, html[data-theme="dark"] .badge.signed,
html[data-theme="dark"] .badge.active, html[data-theme="dark"] .team-tag,
html[data-theme="dark"] .st.client { background: #4f6cb8 !important; }
html[data-theme="dark"] .chip, html[data-theme="dark"] .badge, html[data-theme="dark"] .count,
html[data-theme="dark"] .tag, html[data-theme="dark"] .rchip, html[data-theme="dark"] .kchip,
html[data-theme="dark"] .cchips span, html[data-theme="dark"] .t-points span { color: #97a1b0 !important; }
html[data-theme="dark"] .badge.live, html[data-theme="dark"] .badge.open,
html[data-theme="dark"] .badge.due, html[data-theme="dark"] .badge.proj,
html[data-theme="dark"] .badge.queue, html[data-theme="dark"] .rchip.shared { color: #7f9bd8 !important; }
html[data-theme="dark"] .badge.late, html[data-theme="dark"] .badge.warn { color: #ff5b69 !important; }
/* status text tuned back up for dark ground */
html[data-theme="dark"] .saved, html[data-theme="dark"] .prow .pi,
html[data-theme="dark"] .pill.approved, html[data-theme="dark"] .badge.in-service,
html[data-theme="dark"] .n-ic.task, html[data-theme="dark"] .sbtn.on.approve,
html[data-theme="dark"] .pv-sbtn.approve.on, html[data-theme="dark"] .cstat.applied { color: #4fc98b !important; }
html[data-theme="dark"] .astat.shortlisted, html[data-theme="dark"] .ca-st.shortlisted,
html[data-theme="dark"] .pill.pending, html[data-theme="dark"] .badge.minor,
html[data-theme="dark"] .badge.property, html[data-theme="dark"] .rel-badge.rel-minor,
html[data-theme="dark"] .rel-badge.rel-property, html[data-theme="dark"] .stagechip,
html[data-theme="dark"] .sbtn.on.review, html[data-theme="dark"] .pv-sbtn.review.on,
html[data-theme="dark"] .cstat.shortlisted { color: #e0b45c !important; }
html[data-theme="dark"] .up-row .uk.exp { color: #e0b45c !important; border-color: rgba(224,180,92,0.4) !important; }
/* LEDs, lamps, focus rings, active tab lamp */
html[data-theme="dark"] .live-dot, html[data-theme="dark"] .notif-dot,
html[data-theme="dark"] .dot { box-shadow: 0 0 9px 1px rgba(127,155,216,0.65) !important; }
html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus, html[data-theme="dark"] .pin:focus {
  box-shadow: inset 3px 3px 6px var(--ind-lo), inset -3px -3px 6px var(--ind-hi), 0 0 0 2px rgba(127,155,216,0.55) !important;
}
html[data-theme="dark"] .tab.active { color: #eef1f6 !important; border-bottom-color: #7f9bd8 !important; }
html[data-theme="dark"] .del:hover, html[data-theme="dark"] .k-del:hover,
html[data-theme="dark"] .cx:hover { color: #ff5b69 !important; }
/* night scrollbars */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #1e232b; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3b4552; border: 2px solid #1e232b; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a5666; }

/* ---- sidebar stays the ORIGINAL dark chassis (per request) ---- */
.psf-shell {
  --psf-black: #101114 !important; --psf-surface: #17181C !important; --psf-graphite: #2B2D31 !important;
  --psf-border: #26282E !important; --psf-border-light: #34363C !important;
  --psf-silver: #C9CED6 !important; --psf-white: #F4F5F7 !important;
  --psf-text-muted: #9BA1A9 !important; --psf-text-faint: #7A8087 !important;
  --psf-steel: #9FB4D2 !important; --psf-steel-deep: #5C7699 !important; --psf-steel-shadow: #2E3948 !important;
  background: var(--psf-surface) !important; border-right: 1px solid var(--psf-border-light) !important;
  box-shadow: 6px 0 18px rgba(29, 36, 39, 0.18) !important;
  font-family: 'Manrope', sans-serif !important;
}
.psf-shell, .psf-shell * { text-shadow: none !important; }
.psf-shell h1, .psf-shell h2, .psf-shell h3 { font-family: 'Outfit', sans-serif !important; }
.psf-shell button:not(.psf-burger) { box-shadow: none !important; background: transparent !important; transform: none !important; border-radius: 6px !important; font-family: 'IBM Plex Mono', monospace !important; font-weight: 500 !important; }
.psf-shell .psf-nav-item, .psf-shell .psf-brand-sub, .psf-shell .psf-who-role { font-family: 'IBM Plex Mono', monospace !important; }

/* ============================================================================
   FLAT — the house look for the whole signed-in app (Jul 28 2026).
   Same chassis, same tokens, same layout: only the physics come off. Modules
   went flat first (Jul 23 2026); this finishes the job so controls stop
   reading as molded keys and become line-drawn surfaces — a page reads as one
   flat instrument instead of flat panels holding neumorphic parts.

   Applies wherever this file is loaded, which is every authenticated page:
   staff pages AND the client portal. The public marketing pages (index,
   videos) never load industrial.css, so they keep the dark cinema look.
   Every value here is a token, so light and dark both follow. Placed last so
   it wins the ties against the light + dark blocks above.
   ========================================================================== */

/* no workshop sheen on the ground, no embossed ink on headings */
body::after { background: none !important; }
body :is(h1, h2, h3, h4, .display, .sec, .list-head) { text-shadow: none !important; }
body .psf-shell { box-shadow: none !important; }

/* keys stop being molded: no throw, no travel on press. (The button selectors
   repeat the :not() chain from the physics rule above — it out-specifies a
   plain `button`, so the flat rule has to match its weight to win.) */
body :is(button:not(.tab):not(.mx):not(.chip):not(.psf-burger):not(.cx):not(.x),
  .btn, .btn-solid, .btn-outline, .newbtn, .sec-btn, .cta,
  .rc-add, .site-mini, .conv-send, .chat-new, .upl-btn, .rpush, .feed-add, .feed-file,
  .rstbtn, .addrole, .chip, .badge, .count, .tag, .team-tag, .rchip, .kchip,
  .cchips span, .t-points span, .emp-ini, .cv-ic, .av) {
  box-shadow: none !important;
  transition: background-color 200ms var(--ind-spring), border-color 200ms var(--ind-spring),
              color 200ms var(--ind-spring) !important;
}
body :is(button:not(.tab):not(.mx):not(.chip):not(.psf-burger):not(.cx):not(.x),
  .btn, .btn-solid, .newbtn, .sec-btn, .cta, .conv-send, .rpush):active {
  box-shadow: none !important; transform: none !important;
}
/* ...and gain a machined edge instead — the same hairline the modules use, so
   a key reads as a cut surface, not a lump. Bare icon buttons and dashed
   "add" affordances opt out. */
body :is(button:not(.tab):not(.mx):not(.cx):not(.x):not(.rc-x):not(.psf-burger),
  .btn, .btn-solid, .btn-outline, .newbtn, .sec-btn, .cta, .site-mini, .conv-send,
  .chat-new, .upl-btn, .rpush, .feed-add, .feed-file, .rstbtn, .addrole,
  .chip, .badge, .count, .tag, .team-tag, .rchip, .kchip, .emp-ini, .cv-ic, .av):not(.rc-add):not(.cf-add-contact) {
  border: 1px solid var(--ind-line) !important;
}
body :is(button:not(.tab):not(.rc-x):not(.psf-burger), .btn, .btn-outline,
  .sec-btn, .site-mini, .chat-new, .upl-btn, .feed-file, .rstbtn, .addrole):hover {
  border-color: var(--ind-hov) !important;
}
body :is(.rc-add, .cf-add-contact):not(.tab):not(.mx):not(.chip):not(.psf-burger):not(.cx):not(.x) {
  border: 1px dashed var(--ind-hov) !important;
}
body :is(.rc-add, .cf-add-contact):not(.tab):not(.mx):not(.chip):not(.psf-burger):not(.cx):not(.x):hover {
  border-color: var(--psf-steel) !important;
}
/* status pills (my work, task page) carry their state in the edge — the
   blanket hairline above would wash it out */
body :is(.st.st-doing, .st.st-done, .st.st-review, .st.st-blocked) { border-color: var(--psf-steel) !important; }
body .st.st-blocked, body .st.late { border-color: var(--psf-warn) !important; }
/* primary keys: flat steel fill, edged in its own accent */
body :is(.btn-solid, .newbtn:not(.ghost), .cta, .btn.push, button.go, .conv-send,
  .feed-add, .rpush, .subbtn, .chip.active) { border-color: var(--psf-steel) !important; }
body :is(.btn-solid, .newbtn:not(.ghost), .cta, .btn.push, button.go, .conv-send,
  .feed-add, .rpush, .subbtn):hover {
  background: var(--psf-steel-deep) !important; border-color: var(--psf-steel-deep) !important;
}

/* data slots: a well one shade down with a hairline, not a machined recess */
body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),
  textarea, select, .pin, .site-in, .site-ta) {
  background: var(--psf-black) !important;
  border: 1px solid var(--ind-line) !important;
  box-shadow: none !important;
}
body :is(input, textarea, select, .pin):focus {
  border-color: var(--psf-steel) !important;
  box-shadow: 0 0 0 2px var(--psf-steel-shadow) !important;
}
/* a field a form is still waiting on — .missing needs this weight to beat the
   blanket input rule above */
body :is(input, textarea, select).missing:not([type=checkbox]):not([type=radio]):not([type=range]) {
  border-color: var(--psf-warn) !important;
}
/* native widgets (date picker icon, select arrow) follow the chassis, not the
   page's original dark-only `color-scheme` */
body :is(input, textarea, select) { color-scheme: light; }
html[data-theme="dark"] body :is(input, textarea, select) { color-scheme: dark; }
body :is(.sp-msg.ai, .cmsg .bubble, .spark-messages, .conv-messages, .pick,
  .pg-bar, .pp-bar, .hbar .bar, .upbar, .err, .auth-err, .banner) {
  box-shadow: none !important; border: 1px solid var(--ind-line) !important;
}
body :is(.pg-bar, .pp-bar, .hbar .bar) i { box-shadow: none !important; }

/* section groove flattens to a rule; lamps stop glowing */
body h2.sec::after {
  height: 1px !important; background: var(--ind-line) !important; box-shadow: none !important;
}
body :is(.live-dot, .notif-dot, .dot, .sev) { box-shadow: none !important; }

/* the sidebar and the rendered proposal keep their own rules — no hairlines there */
body .psf-shell :is(button, a, .chip, .badge, .psf-av) { border: none !important; }
body .doc :is(button, input, .d-sign-btn) { border: none !important; }
body .doc .d-sign-btn { border: 1px solid var(--p-accent) !important; }
body .doc input {
  border-bottom: 1px solid var(--p-border-lt) !important; background: transparent !important;
}

/* ---- the rendered proposal document (.doc) keeps its OWN brand palette ----
   It is a client-facing deliverable, not backend chrome, so the skin must not
   reach inside it (same fence as .psf-shell above). Without this, the blanket
   h1–h4 rule repaints the cover headline dark ink + white emboss on the dark
   cover — the glyphs vanish and only the shadow reads. Sizes still come from
   render.js's DOC_CSS; only what the skin forces is restated here. */
.doc { position: relative; z-index: 1; }
.doc, .doc * { text-shadow: none !important; }
.doc h1, .doc h2, .doc h3, .doc h4 {
  font-family: 'Outfit', sans-serif !important; font-weight: 700 !important;
  color: var(--p-head) !important; letter-spacing: 0.02em !important;
}
.doc .d-display { font-weight: 600 !important; }
.doc .d-cover-tag, .doc .d-num-head .n, .doc .d-cover-meta { font-family: 'IBM Plex Mono', monospace !important; }
/* signature block: hairline field + brand key, not machined metal */
.doc input {
  background: transparent !important; border: none !important;
  border-bottom: 1px solid var(--p-border-lt) !important; border-radius: 0 !important;
  box-shadow: none !important; color: var(--p-head) !important;
  font-family: 'Manrope', sans-serif !important;
}
.doc input:focus { border-bottom-color: var(--p-accent) !important; box-shadow: none !important; }
.doc .d-sign-btn {
  background: var(--p-accent) !important; color: #101114 !important;
  border: 1px solid var(--p-accent) !important; border-radius: 3px !important;
  box-shadow: none !important; transform: none !important;
  font-family: 'IBM Plex Mono', monospace !important; font-weight: 500 !important;
}
.doc .d-sign-btn:hover { background: var(--p-accent-2) !important; border-color: var(--p-accent-2) !important; color: var(--p-head) !important; }

/* ==========================================================================
   SECTION HEADS ARE KICKERS (DESIGN-SYSTEM.md §3) — BACKEND ONLY, both themes.
   Scoped to body.psf-has-shell: the staff shell renders only for staff, so
   the portal / webpage / proposal surfaces are untouched (site surfaces:
   BACKEND · PORTAL · WEBPAGE · PROPOSALS — see DESIGN.md).
   The 44px rule is part of the label; the old machined groove is retired.
   Sits at the end of the file so it outranks the theme heading overrides. */
/* House amendment (Jul 29 2026): NO leading dash/rule on backend kickers —
   the label stands alone. DESIGN-SYSTEM.md §3 records this. */
body.psf-has-shell h2.sec {
  position: relative; padding-bottom: 0;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--ind-mono) !important; font-weight: 600 !important;
  font-size: 11.5px !important; letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--psf-steel) !important; text-shadow: none !important;
}
body.psf-has-shell h2.sec::before { display: none !important; content: none !important; }
body.psf-has-shell h2.sec::after { display: none !important; }

/* Flat-take shape scale (DESIGN-SYSTEM §4/§8): pages opting into the flat
   take (body.psf-flat) drop the rounded chassis for the system's radii —
   6px panels and rows, 3px controls. Nothing is pill-shaped. */
body.psf-flat :is(.card, .tcard, .acard, .fcard, .prop-card, .job-card, .stat,
  .tstat, .node, .qrow, .chart, .item, .inv-box, .compose, .composer, .msg,
  .lrow, .rel-row, .aud, .ev, .coll, div.signed, .contact, .site-sec,
  .site-item, .notif-card, .feed, .grp .task, .cust-form, .cardEditor,
  .queue-item, .team, .spark, .proj, .taskgroup, .cast-call, .pipe, .cust,
  .intro-card, .news-card, .card-auth, .mcard, .cust-card, .rc-cat) {
  border-radius: 6px !important;
}
body.psf-flat :is(.row, a.emp, .emp, .deal-row, .crow, .todo, .task, .time-row,
  .eng, .krow, .cast-app, .hbar, .capp, .call, .prow, .attn-item, .feed-item,
  .up-row, .snap a, .cmsg, .att .fcard, .conv, .sp-msg, .cmsg .bubble) {
  border-radius: 6px !important;
}
body.psf-flat :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),
  textarea, select, .pin, button, .btn, .btn-solid, .btn-outline, .newbtn,
  .conv-send, .chat-new, .qa, .badge, .cv-badge, .team-tag, .emp-role,
  .rchip, .grip, .fk, .fk2, .pk) {
  border-radius: 3px !important;
}
/* backend section labels (task/job pages use .sec-label) match the kicker */
body.psf-has-shell .sec-label {
  color: var(--psf-steel) !important;
  letter-spacing: 0.18em !important;
  font-weight: 600;
}