/* ===== Brighella design system — self-hosted webfonts ===== */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 600;font-display:swap;src:url('assets/fonts/dm-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300 600;font-display:swap;src:url('assets/fonts/dm-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/dm-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/dm-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/dm-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/dm-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* ===== Brighella tokens (light theme = default) + prototype→Brighella bridge =====
   Dark theme overrides the primitives under body.dark (see B12 block below); every
   prototype var name (--navy/--amber/--blue-t…) aliases a Brighella token, so both
   themes recolour automatically. */
:root{
  color-scheme:light;
  --bg-base:#e6e8ec;--bg-surface:#f0f2f5;--bg-elevated:#dde1e6;--bg-overlay:#cfd4db;--bg-paper:#fff;
  --border-subtle:rgba(30,41,59,.18);--border-default:#797f8e;--border-strong:#5f6573;
  --text-primary:#1a2332;--text-secondary:#4b5563;--text-muted:#5b6675;--text-inverse:#fff;
  --accent:#0e7490;--accent-hover:#0b5e74;--accent-dim:rgba(14,116,144,.10);
  --accent-warm:#b45309;--accent-warm-dim:rgba(180,83,9,.10);
  --success:#047857;--success-dim:rgba(4,120,87,.08);--warning:#b45309;--warning-dim:rgba(180,83,9,.08);
  --danger:#dc2626;--danger-dim:rgba(220,38,38,.08);--info:#2563eb;--info-dim:rgba(37,99,235,.08);
  --chart-1:#0b3a82;--chart-2:#1d4ed8;--chart-3:#2563eb;--chart-4:#06b6d4;--chart-5:#38bdf8;--chart-6:#7dd3fc;--chart-track:#dde2ea;
  /* network address-band tints (categorical, low-alpha — read on any surface) */
  --band-reserved:rgba(120,120,135,.10);--band-static:rgba(40,170,90,.08);--band-dhcp:rgba(240,150,40,.10);--band-custom:rgba(150,120,200,.10);
  /* modal/overlay scrim */
  --scrim:rgba(0,0,0,.55);
  --font-sans:'DM Sans',system-ui,-apple-system,Roboto,sans-serif;--font-mono:'DM Mono','Fira Code',ui-monospace,Menlo,monospace;
  --radius-sm:4px;--radius:8px;--radius-lg:12px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);--shadow-md:0 4px 12px rgba(0,0,0,.06);
  --transition:200ms cubic-bezier(0.16,1,0.3,1);--transition-fast:100ms cubic-bezier(0.16,1,0.3,1);
  /* — bridge: prototype names → Brighella tokens — */
  --navy:var(--bg-base);--navy2:var(--bg-surface);--section:var(--bg-elevated);
  --amber:var(--accent);
  --blue-f:var(--accent-dim);--blue-t:var(--accent);
  --teal-f:var(--success-dim);--teal-t:var(--success);
  --amber-f:var(--accent-warm-dim);--amber-t:var(--accent-warm);
  --red:var(--danger);--red-f:var(--danger-dim);--red-t:var(--danger);
  --green-f:var(--success-dim);--green-t:var(--success);
  --bg:var(--bg-base);--card:var(--bg-surface);--border:var(--border-default);
  --text:var(--text-primary);--muted:var(--text-secondary);--ink-accent:var(--accent);
  --sans:var(--font-sans)}
*{box-sizing:border-box}body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Brighella base: focus ring (WCAG 2.4.7, accent outline) + themed scrollbar */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}:focus:not(:focus-visible){outline:none}
/* Screen titles are focused programmatically (tabindex=-1) only to announce the screen to SRs — never show a focus ring. */
.title[tabindex="-1"]:focus{outline:none}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-base)}::-webkit-scrollbar-thumb{background:var(--bg-overlay);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy)}
.lcard{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:14px;padding:28px 30px;width:330px;box-shadow:var(--shadow-md)}
.lcard h1{margin:0 0 2px;font-size:20px}.lcard .sub{color:var(--muted);font-size:12px;margin-bottom:18px}
.lcard label{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px}
.lcard input{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit}
.lcard button{width:100%;margin-top:16px;background:var(--accent);border:none;color:var(--text-inverse);font-weight:600;padding:10px;border-radius:8px;cursor:pointer;font-family:inherit}.lcard button:hover{background:var(--accent-hover)}
.err{color:var(--red-t);font-size:12px;margin-top:10px;min-height:16px}
.app{display:none;min-height:100vh}.app.on{display:flex}
.sidebar{width:222px;background:var(--bg-base);color:var(--text-secondary);flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid var(--border-default)}
.brand{padding:16px 18px;border-bottom:1px solid var(--border-default)}.brand h1{font-size:16px;margin:0;color:var(--text-primary)}.brand .sub{font-size:11px;color:var(--text-muted);margin-top:3px}
/* Accessibility helpers (audit D2-1, D9-4): screen-reader-only content + skip-to-content link that
   appears only when focused by keyboard. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-48px;z-index:1000;background:var(--accent);color:var(--text-inverse);padding:8px 14px;border-radius:0 0 8px 8px;font-size:13px;font-weight:600;text-decoration:none;transition:top var(--transition-fast,120ms) ease}
.skip:focus{top:0}
.nav{padding:6px 0}.nav-group{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);padding:11px 18px 3px}
.nav-group[role=button]{cursor:pointer;user-select:none;display:flex;align-items:center;gap:5px}.nav-group[role=button]:hover{color:var(--text-secondary)}
.ng-chev{font-size:9px;transition:transform .15s ease;display:inline-block}
.nav-grp.collapsed .ng-chev{transform:rotate(-90deg)}
.nav-grp.collapsed .nav-items{display:none}
.nav a{display:flex;gap:9px;padding:7px 18px;color:var(--text-secondary);cursor:pointer;font-size:13px;border-left:3px solid transparent}
.nav a:hover{background:var(--bg-elevated);color:var(--text-primary)}.nav a.active{background:var(--accent-dim);color:var(--accent);border-left-color:var(--accent)}
.nav .dot{width:7px;height:7px;border-radius:50%;background:var(--text-muted);margin-top:5px}.nav a.active .dot{background:var(--accent)}
.foot{padding:12px 18px;font-size:10px;color:var(--text-muted);border-top:1px solid var(--border-default)}
.main{flex:1;min-width:0}
.topbar{background:var(--bg-surface);color:var(--text-primary);padding:11px 24px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:5;border-bottom:1px solid var(--border-default)}
.topbar .live{font-size:11px;color:var(--text-secondary)}.topbar .live b{color:var(--success)}
.topbar button{background:transparent;border:1px solid var(--border-default);color:var(--text-secondary);border-radius:7px;padding:6px 11px;font-size:12px;cursor:pointer}.topbar button:hover{border-color:var(--border-strong);color:var(--text-primary)}
.content{padding:22px 26px 70px;max-width:1180px}
h2.title{font-size:20px;margin:0 0 2px}.crumb{color:var(--muted);font-size:12px;margin-bottom:18px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.kpi{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--border-subtle);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow-sm)}
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.kpi .lab{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-secondary);font-weight:600}.kpi .val{font-size:26px;font-weight:700;margin-top:6px;color:var(--text-primary)}.kpi .note{font-size:11px;color:var(--muted);margin-top:3px}
.kpi.blue::before{background:var(--accent)}
.kpi.teal::before{background:var(--success)}
.kpi.amber::before{background:var(--accent-warm)}
.kpi.red::before{background:var(--danger)}
.kpi .kpi-spk{margin-top:6px;line-height:1;opacity:.7}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}@media(max-width:880px){.grid2{grid-template-columns:1fr}}
.banner{background:linear-gradient(90deg,var(--bg-surface),var(--bg-elevated));color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:12px;padding:16px 20px;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center}
.banner .big{font-size:30px;font-weight:700}.banner .ph2{font-size:12px;color:var(--text-secondary)}
.panel{background:var(--card);border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.ph{background:transparent;color:var(--text-muted);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:11px 15px 8px;border-bottom:1px solid var(--border-subtle)}.pb{padding:12px 16px}
.dashgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;align-items:start;margin-bottom:18px}
.dashcard{background:var(--card);border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm)}
.dashcard.wide{grid-column:1/-1}
.dashcard .kpis{margin-bottom:0}
/* compact Shows tiles — fixed-width, pack left, never stretch */
.showgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,232px));gap:12px;justify-content:start;align-items:start;margin-bottom:18px}
.showtile{background:var(--card);border:1px solid var(--border-subtle);border-radius:12px;padding:11px 12px;cursor:pointer;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:6px;transition:border-color var(--transition,150ms ease)}
.showtile:hover,.showtile:focus-visible{border-color:var(--accent);outline:none}
.st-h{display:flex;align-items:center;justify-content:space-between;gap:6px}
.st-name{font-weight:600;font-size:14px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-prem{font-size:12px;color:var(--text-secondary)}
.st-rd{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted)}
.st-gauge{flex:1;max-width:90px;height:6px;background:var(--chart-track);border-radius:3px;overflow:hidden;display:inline-block}
.st-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:16px}
.st-meta{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
@media(max-width:520px){.showgrid{grid-template-columns:repeat(auto-fill,minmax(46%,1fr))}}
.dashbanner{background:linear-gradient(90deg,var(--bg-surface),var(--bg-elevated));color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:8px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center}
.crewquick label{font-size:12px;color:var(--muted)}
.crewquick input,.crewquick select{display:block;padding:7px 9px;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:14px;background:var(--card);color:var(--text);margin-top:3px}
body.dark .crewquick input,body.dark .crewquick select{background:var(--bg-elevated)}
.row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border-subtle);font-size:13px}.row:last-child{border:none}.row .k{color:var(--muted)}.row .v{font-weight:600}.row input{border:1px solid var(--border);border-radius:6px;padding:5px 8px;text-align:right;min-width:160px;font-family:inherit}
.mile{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:13px}.mile .d{width:60px;font-weight:600;color:var(--accent)}.mile.hot .d{color:var(--danger)}.mile .dot2{width:9px;height:9px;border-radius:50%;background:var(--accent)}.mile.hot .dot2{background:var(--danger)}
.contact{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border-subtle)}.contact:last-child{border:none}.av{width:30px;height:30px;border-radius:4px;background:var(--bg-elevated);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}.contact .nm{font-weight:600;font-size:13px}.contact .rl{font-size:11px;color:var(--muted)}.contact .em{margin-left:auto;font-size:12px;color:var(--accent)}
table{width:100%;border-collapse:collapse;font-size:13px}thead th{background:transparent;color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:8px 9px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--border-strong)}
tbody td{padding:5px 9px;border-bottom:1px solid var(--border-subtle);vertical-align:middle}tbody tr{transition:background var(--transition,150ms ease)}tbody tr:hover{background:var(--bg-elevated)}
td input,td select{font-family:inherit;font-size:13px;border:1px solid transparent;background:transparent;border-radius:5px;padding:4px 6px;width:100%;min-width:60px}
td input:hover,td select:hover{border-color:var(--border)}td input:focus,td select:focus{border-color:var(--accent);outline:none;background:var(--bg-elevated)}
td.num input{text-align:right}.money{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.tog{cursor:pointer;font-size:16px;text-align:center;user-select:none;color:var(--muted)}.tog.on{color:var(--green-t)}
.chip{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500;letter-spacing:.01em}
.fld{padding:7px 9px;border:1px solid var(--border);border-radius:7px;font-family:inherit;font-size:13px;background:var(--card);color:var(--text)}
.fld:focus{outline:none;border-color:var(--blue-t)}
.moremenu{position:absolute;right:0;top:42px;z-index:40;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 34px rgba(0,0,0,.3);padding:6px;min-width:200px;flex-direction:column;gap:2px}
.moremenu button{display:block;width:100%;text-align:left;background:transparent;border:none;color:var(--text);padding:9px 11px;border-radius:7px;cursor:pointer;font-family:inherit;font-size:13px}
.moremenu button:hover{background:var(--blue-f)}
/* base chrome for content form controls so native selects/textareas aren't bare (esp. dark mode).
   More-specific scoped rules (td input/select, .pbtreerow, .crewquick, .sheet-b, .fld, inline styles) override this.
   Plain element selectors (specificity 0,0,1) are intentionally weaker than td input (0,0,2) so table inline
   editing stays transparent. Type overrides below revert native controls that shouldn't inherit card chrome. */
input{font-family:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--border);border-radius:7px;background:var(--card);color:var(--text);max-width:100%}
input[type=checkbox],input[type=radio],input[type=range]{background:initial;border:initial;padding:initial;border-radius:initial;width:auto;max-width:none;font-size:initial;color:initial}
select{font-family:inherit;font-size:13px;padding:6px 9px;border:1px solid var(--border);border-radius:7px;background:var(--card);color:var(--text);max-width:100%}
textarea{font-family:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--border);border-radius:7px;background:var(--card);color:var(--text)}
.subrow td{background:var(--bg-elevated);color:var(--text-primary);font-weight:600}.controw td{background:var(--accent-warm-dim);color:var(--accent-warm);font-weight:600}.totrow td{background:var(--bg-overlay);color:var(--text-primary);font-weight:700}
.addbtn{margin:12px 0;background:var(--card);border:1px dashed var(--blue-t);color:var(--blue-t);border-radius:8px;padding:8px 14px;cursor:pointer;font-family:inherit;font-size:13px}.addbtn:hover{background:var(--blue-f)}
input[type=file]{font-family:inherit;font-size:13px;color:var(--muted);max-width:100%}
input[type=file]::file-selector-button{margin-right:10px;background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:7px 13px;cursor:pointer;font-family:inherit;font-size:13px;transition:background var(--transition,150ms ease),border-color var(--transition,150ms ease),color var(--transition,150ms ease)}
input[type=file]::file-selector-button:hover{background:var(--blue-f);border-color:var(--blue-t);color:var(--blue-t)}
input[type=file]::-webkit-file-upload-button{margin-right:10px;background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:7px 13px;cursor:pointer;font-family:inherit;font-size:13px}
.delx{cursor:pointer;color:var(--text-muted);font-weight:700}.delx:hover{color:var(--danger)}
.dragh{cursor:grab;color:var(--text-muted);text-align:center;user-select:none;font-size:15px;width:22px}.dragh:active{cursor:grabbing}tr.dover td{box-shadow:inset 0 2px 0 var(--blue-t)}
.filterbar{margin-bottom:12px;display:flex;gap:10px;align-items:center}.filterbar input{padding:8px 11px;border:1px solid var(--border);border-radius:8px;min-width:230px;font-family:inherit}.fcount{font-size:12px;color:var(--muted);margin-left:auto}
.gtext{line-height:1.65}.note{font-size:12px;color:var(--muted);margin-top:10px}
thead th.srt{cursor:pointer}thead th.srt:hover{color:var(--amber)}
.loading{padding:48px 0;text-align:center;color:var(--muted)}.spin{width:26px;height:26px;border:3px solid var(--border);border-top-color:var(--blue-t);border-radius:50%;display:inline-block;animation:sp .8s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
.empty{padding:22px 16px;text-align:center;color:var(--muted);font-size:13px}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(22px);background:var(--bg-overlay);color:var(--text-primary);border:1px solid var(--border-default);padding:10px 18px;border-radius:9px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:60;box-shadow:var(--shadow-md)}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}#toast.bad{background:var(--danger);color:var(--text-inverse);border-color:transparent}
/* In-app "new version ready" prompt (D4-1) — persistent + tappable, unlike the auto-dismiss toast */
#updbar{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:var(--accent);color:var(--text-inverse);padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;z-index:70;box-shadow:var(--shadow-md)}
#updbar button{background:var(--text-inverse);color:var(--accent);border:0;border-radius:7px;padding:6px 14px;font-weight:700;font-family:inherit;font-size:13px;cursor:pointer;min-height:36px}
/* role: viewers see data, not edit affordances */
body.viewer td input,body.viewer td select,body.viewer .row input{pointer-events:none;border-color:transparent!important;background:transparent!important;-webkit-appearance:none;appearance:none}
body.viewer .delx,body.viewer .dragh,body.viewer .tog{display:none!important}
/* hide only row-mutating buttons for viewers; chat/comment/tabs/print stay usable */
/* viewers: hide every action button by default, then re-show only the few non-editing ones
   (chat/comment send, room + list navigation). New edit buttons are hidden automatically. */
body.viewer .addbtn{display:none!important}
body.viewer .addbtn[onclick*="sendChat"],body.viewer .addbtn[onclick*="sendComment"],body.viewer .addbtn[onclick*="setRoom"],body.viewer .addbtn[onclick*="setListKey"],body.viewer .addbtn[onclick*="sendFlash"],body.viewer .addbtn[onclick*="flashTest"],body.viewer .addbtn[onclick*="openFlashColor"]{display:inline-block!important}
#flashfx{position:fixed;inset:0;z-index:100000;pointer-events:none;background:var(--amber);animation:flashpulse .9s ease-out forwards}
@keyframes flashpulse{0%{opacity:0}10%{opacity:.85}25%{opacity:.12}40%{opacity:.8}55%{opacity:.12}70%{opacity:.65}100%{opacity:0}}
body.viewer .ro-hide{display:none!important}
/* comments */
.cbtn{display:inline-flex;align-items:center;justify-content:center;gap:2px;min-width:28px;height:28px;padding:0 5px;border-radius:7px;cursor:pointer;color:var(--text-muted);font-weight:600;font-size:15px;line-height:1;white-space:nowrap;vertical-align:middle;transition:background var(--transition,120ms ease),color var(--transition,120ms ease)}
.cbtn:hover,.cbtn:focus-visible{color:var(--accent);background:var(--accent-dim)}
.cbtn .cn{color:var(--accent-warm);font-weight:700;font-size:12px}
/* Network band tints — derive from existing palette vars, dark-mode safe */
.band-router{background:var(--blue-f)}
.band-reserved{background:var(--band-reserved)}
.band-static{background:var(--band-static)}
.band-dhcp{background:var(--band-dhcp)}
.band-custom{background:var(--band-custom)}
tr.gridrow.ghost td{opacity:.45}
tr.gridrow.dupe{outline:2px solid var(--red-t);outline-offset:-2px}
.bandedit{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:8px 14px;font-size:13px}
.bandedit label{display:flex;gap:4px;align-items:center;color:var(--text)}
.bandedit input{width:58px;padding:4px 6px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text)}
.minimap{display:flex;flex-wrap:wrap;gap:1px;padding:8px 14px}
.minimap .mc{width:9px;height:9px;border-radius:2px;cursor:pointer;box-sizing:border-box}
.minimap .mc.filled{outline:1px solid rgba(0,0,0,.35)}
.minimap .mc.dupe{outline:2px solid var(--red-t)}
/* modal */
.modal{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;z-index:70}
.modal .box{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:14px;width:560px;max-width:94vw;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-md)}
.modal .mh{background:var(--bg-elevated);color:var(--text-primary);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:600;border-bottom:1px solid var(--border-subtle)}
.modal .mh .x{cursor:pointer;font-size:18px}.modal .mb{padding:14px 16px;overflow:auto}
.cmsg{padding:8px 0;border-bottom:1px solid var(--border-subtle);font-size:13px}.cmsg:last-child{border:none}
/* expandable sub-rows (mic plot scenes) */
.exp{cursor:pointer;user-select:none;color:var(--blue-t);font-weight:700;width:22px;text-align:center}
.scenes td{background:var(--bg-elevated)}
/* credentials reveal */
.cred{font-family:var(--font-mono);letter-spacing:1px}
@media print{
  .sidebar,.topbar,.addbtn,.delx,.dragh,.filterbar,.cbtn,.exp,#toast{display:none!important}
  body{background:#fff;font-size:11px}.app.on{display:block}.main{min-width:0}.content{padding:0;max-width:none}
  .panel{break-inside:avoid;border:1px solid #999}thead th{background:#222!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.printhead{display:none}
.bulkbar{display:flex;gap:14px;align-items:center;background:var(--accent-warm-dim);color:var(--accent-warm);border:1px solid var(--accent-warm);border-radius:8px;padding:8px 12px;margin-bottom:10px;font-weight:600;font-size:13px}
.bulkbar button{cursor:pointer}.grouplab{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--muted);margin:0 0 10px 2px;cursor:pointer}
th.bulkcol,td.bulkcol{width:24px;text-align:center;padding-left:6px;padding-right:0}
.rflag{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle;cursor:help;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.15)}.rflag-clash{background:var(--red-t)}.rflag-warn{background:var(--amber-t)}
#sig-wrap{position:relative;overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--card)}
#sig-canvas{position:relative;transform-origin:0 0}
.signode{position:absolute;width:176px;min-height:44px;box-sizing:border-box;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:5px 9px;font-size:12px;color:var(--text);cursor:pointer;user-select:none}
.signode.con{background:var(--accent-dim);color:var(--text-primary);border-color:var(--accent)}
.signode .nb{font-size:9.5px;color:var(--muted);margin-top:2px}
.signode.con .nb{color:var(--text-secondary)}
.signode.locked{box-shadow:inset 0 0 0 2px var(--amber)}
.signode .lockbadge,.signote .lockbadge{position:absolute;top:-7px;right:-7px;font-size:11px}
.sigedge-svg{position:absolute;inset:0;pointer-events:none;overflow:visible}
.signote{position:absolute;box-sizing:border-box;background:var(--amber-f);border:1px solid var(--amber-t);border-radius:6px;padding:6px 8px;font-size:12px;color:var(--text);min-width:90px;min-height:34px}
.sigresize{position:absolute;right:-2px;bottom:-2px;width:14px;height:14px;cursor:nwse-resize;font-size:9px;line-height:14px;text-align:center;color:var(--muted);opacity:.55;user-select:none}
.siggroup{position:absolute;border:1.5px dashed var(--muted);border-radius:12px;background:transparent;pointer-events:none}
.siggroup .gl{position:absolute;top:-9px;left:10px;background:var(--card);padding:0 6px;font-size:10px;color:var(--muted)}
.sigtool{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;margin:6px 0 10px;background:var(--card);border:1px solid var(--border);border-radius:10px}
#helptip{position:fixed;z-index:100000;max-width:280px;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:12.5px;line-height:1.4;box-shadow:0 8px 28px rgba(0,0,0,.28);pointer-events:none;opacity:0;transition:opacity .08s;display:none}
#helptip.on{display:block;opacity:1}
body.help-mode [data-help-key],body.help-mode [data-help],body.help-mode [data-v],body.help-mode .rflag,body.help-mode [title]{cursor:help}
/* help toggle (?): orange when active, normal when off */
[aria-label="Toggle help mode"]{transition:color .12s,background .12s,border-color .12s}
body.help-mode [aria-label="Toggle help mode"]{color:var(--accent-warm);border-color:var(--accent-warm);background:var(--accent-warm-dim);font-weight:700}
tr.rechi>td{background:var(--blue-f)!important;box-shadow:inset 0 0 0 2px var(--blue-t);transition:background .3s}
.warnbang{display:inline-block;background:var(--red-t);color:var(--card);border-radius:50%;width:16px;height:16px;line-height:16px;text-align:center;font-weight:700;font-size:11px;margin-right:5px;cursor:help}
.clashbar{background:var(--red-f);color:var(--red-t);border:1px solid currentColor;border-radius:8px;padding:8px 12px;margin:0 0 10px;font-weight:600;font-size:13px}
.alertstrip{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.alertchip{cursor:pointer;border:1px solid currentColor;background:var(--amber-f);color:var(--amber-t);border-radius:999px;padding:6px 12px;font-weight:600;font-size:12px}
.alertchip.overdue,.alertchip.rf_clash,.alertchip.budget{background:var(--red-f);color:var(--red-t)}
.palbox{background:var(--card);width:min(560px,92vw);margin:8vh auto 0;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;align-self:flex-start}
#palette .palbox input{width:100%;border:none;border-bottom:1px solid var(--border);padding:16px;font-size:16px;font-family:inherit;outline:none;box-sizing:border-box}
.palres{max-height:60vh;overflow:auto}
.palrow{padding:10px 16px;cursor:pointer;display:flex;gap:10px;align-items:baseline;border-bottom:1px solid var(--border)}
.palrow.sel,.palrow:hover{background:var(--accent-dim)}
.palsub{color:var(--muted);font-size:12px;margin-left:auto}
.palicon{opacity:.55}
.attthumb{max-height:44px;max-width:64px;vertical-align:middle;border-radius:4px;border:1px solid var(--border)}
a.attpdf{display:inline-block;font-size:22px;text-decoration:none;border:none;max-height:none;max-width:none}
.navbadge{display:inline-block;min-width:18px;text-align:center;margin-left:6px;padding:0 5px;border-radius:9px;background:var(--red-t);color:var(--card);font-size:11px;font-weight:700;line-height:18px}
.newdot{color:var(--red-t);font-size:10px}
th.tick,td.tick{text-align:center;width:34px;white-space:nowrap}
td.tick input[type=checkbox]{transform:scale(1.2);cursor:pointer}
td.onc{font-weight:700;background:var(--amber-f);color:var(--amber-t)}
body.viewer td.tick input{display:none}
body.wide .content{max-width:none}
/* sticky leading columns (select · drag · first data column) on every generic table —
   only matters when the table is wide enough to scroll; a no-op otherwise */
table.gtable .bulkcol,table.gtable .draghh,table.gtable .dragh,table.gtable .firstcol{position:sticky;background:var(--card);z-index:2}
table.gtable .bulkcol{left:0}table.gtable .draghh,table.gtable .dragh{left:24px}table.gtable .firstcol{left:46px}
table.gtable thead .bulkcol,table.gtable thead .draghh,table.gtable thead .firstcol{background:var(--bg-surface);z-index:4}
table.gtable tbody tr:nth-child(even) .bulkcol,table.gtable tbody tr:nth-child(even) .dragh,table.gtable tbody tr:nth-child(even) .firstcol{background:var(--card)}
table.gtable .firstcol input{min-width:120px}
td.cc{text-align:center;width:26px}
/* C1: sticky first data column on wide bespoke tables (drag handle + identifying column) */
table.bgtable .dragh,table.bgtable .draghh{position:sticky;left:0;background:var(--card);z-index:2}
table.bgtable .firstcol{position:sticky;left:24px;background:var(--card);z-index:2}
table.bgtable thead .firstcol,table.bgtable thead .draghh{background:var(--bg-surface);z-index:4}
table.bgtable tbody tr:nth-child(even) .dragh,table.bgtable tbody tr:nth-child(even) .firstcol{background:var(--card)}
table.bgtable tr[data-rc] .firstcol,table.bgtable tr[data-rc] .dragh{background:var(--rowbg)}
table.bgtable .firstcol input{min-width:120px}
/* subtle full-cell gridlines — opt-in via body.grid (⊞ Grid toggle); var(--border) adapts in dark mode.
   Scoped to #view so it covers every on-screen table (generic + bespoke); print windows are separate docs. */
body.grid #view table td,body.grid #view table th{border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.swbtn{cursor:pointer;display:inline-block;line-height:1}
.swdot{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid var(--border-default);vertical-align:middle;background:transparent}
tr[data-rc] td{background:var(--rowbg)!important}
.colorpop{position:absolute;z-index:99999;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:10px;box-shadow:var(--shadow-md);padding:10px;display:flex;flex-direction:column;gap:8px}
.colorpop .cpr{display:flex;gap:7px;align-items:center;flex-wrap:wrap;max-width:204px}
.colorpop .swdot{cursor:pointer;width:22px;height:22px}
.colorpop input[type=color]{width:42px;height:30px;border:1px solid var(--border);border-radius:6px;cursor:pointer;background:var(--card);padding:2px}
.colorpop button{cursor:pointer;padding:5px 11px;border:1px solid var(--border);border-radius:6px;background:var(--card);font-family:inherit}
.colorpop .cpapply{background:var(--accent);color:var(--text-inverse);border-color:transparent;font-weight:600}
body.viewer td.cc .swbtn{pointer-events:none;opacity:.4}
#offbar{position:fixed;top:0;left:0;right:0;z-index:99999;background:var(--red-t);color:var(--card);text-align:center;padding:7px 12px;font-size:13px;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.2)}
body.offline{--offset:0}
@media print{.bulkbar,.grouplab,th.bulkcol,td.bulkcol{display:none!important}}
body.viewer .bulkbar,body.viewer th.bulkcol,body.viewer td.bulkcol{display:none!important}
/* ===== touch / iPad mode — scoped to body.touch; desktop is untouched ===== */
.hamb{display:none}
#drawerov{display:none}
body.compact .hamb{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:20px;background:transparent;border:1px solid var(--border-default);color:var(--text-secondary);border-radius:8px;cursor:pointer;margin-right:10px;flex-shrink:0}
body.compact .sidebar{position:fixed;left:0;top:0;height:100vh;z-index:1000;transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 30px rgba(0,0,0,.4)}
body.compact.drawer-open .sidebar{transform:translateX(0)}
body.compact.drawer-open #drawerov{display:block;position:fixed;inset:0;background:var(--scrim);z-index:999}
/* ≥44px tap targets */
body.touch .addbtn,body.touch .topbar button{min-height:44px}
body.touch td input,body.touch td select,body.touch .row input,body.touch #chatinput,body.touch .lcard input,body.touch .lcard button,body.touch .filterbar input{min-height:44px}
body.touch .nav a{padding-top:12px;padding-bottom:12px;min-height:44px;box-sizing:border-box}
/* C1: chart filter affordances get ≥44px tap targets on touch */
body.touch .filter-pill{min-height:44px;display:inline-flex;align-items:center}
body.touch .bar-row.chart-seg{min-height:44px}
body.touch .tog,body.touch .swbtn,body.touch .cbtn,body.touch .delx,body.touch .exp{min-width:44px;min-height:44px;line-height:44px}
/* always-visible affordances — no hover-only cues on touch */
body.touch td input,body.touch td select{border-color:var(--border)}
body.touch thead th.srt{color:var(--amber)}
/* momentum scroll on the horizontal table containers */
.panel [style*="overflow-x"],table.gtable{-webkit-overflow-scrolling:touch}
/* touch reorder ↑/↓ (drag handle is unreliable with a finger) */
.movebtns{display:none}.draggly{display:inline}
body.touch .movebtns{display:inline-flex;flex-direction:column;gap:2px}
body.touch .draggly{display:none}
.mvb{cursor:pointer;border:1px solid var(--border);border-radius:5px;background:var(--card);width:30px;height:21px;line-height:19px;font-size:11px;text-align:center;color:var(--blue-t);user-select:none}
.mvb:active{background:var(--blue-f)}
body.viewer .movebtns{display:none!important}
@media print{.hamb,#drawerov,.movebtns{display:none!important}}
/* B8: budget bars + gauge (inline CSS, print-friendly) */
.bchart{padding:4px 2px}.brow{margin:9px 0}
.blab{display:flex;justify-content:space-between;font-size:12px;margin-bottom:3px;gap:8px}
.btrack{position:relative;background:var(--bg-elevated);border-radius:6px;height:18px;overflow:hidden}
.bfill{position:absolute;top:0;left:0;height:100%;border-radius:6px}
.bfill.bplan{background:var(--blue-t);opacity:.32}.bfill.breal{background:var(--blue-t)}
.gauge{height:26px;border-radius:13px;background:var(--bg-elevated);position:relative;overflow:hidden}
.gaugefill{position:absolute;top:0;left:0;height:100%;border-radius:13px}
/* ===== Brighella charts (charts-ui.js) — dependency-free inline SVG ===== */
.bchart-donut{position:relative;display:inline-flex;flex-shrink:0}
.bchart-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.bchart-val{font-size:1.45em;font-weight:600;color:var(--text-primary);line-height:1}
.bchart-sub{font-size:11px;color:var(--text-muted);margin-top:3px}
.bars{display:flex;flex-direction:column;gap:7px}
.bar-row{display:flex;align-items:center;gap:10px;font-size:12px}
.bar-label{flex:0 0 36%;max-width:36%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary)}
.bar-track{flex:1;height:14px;background:var(--chart-track);border-radius:4px;overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:4px;transition:width var(--transition,150ms ease)}
.bar-val{flex:0 0 auto;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-primary);min-width:46px;text-align:right}
.chart-legend{display:flex;flex-direction:column;gap:5px;font-size:12px}
.chart-legend .lg{display:flex;align-items:center;gap:7px}
.chart-legend .sw{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.spark{display:inline-block;vertical-align:middle}
/* P5.1 RF spectrum */
.spectrum-panel{background:var(--bg-elevated);border:1px solid var(--border);border-radius:10px;padding:8px 10px 4px;margin:0 0 10px}
.spectrum{display:block;width:100%;height:auto}
.spec-axis{font-size:9px;fill:var(--text-muted)}
.spectrum-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--text-muted);margin-top:4px}
.spectrum-legend .sl-car{color:var(--accent)}.spectrum-legend .sl-clash{color:var(--danger)}.spectrum-legend .sl-im,.spectrum-legend .sl-thr{color:var(--warning)}
/* P5.3 input relationship-chain */
.patch-chain{display:flex;flex-wrap:wrap;align-items:stretch;gap:4px;margin:0 0 8px}
.pc-step{display:flex;flex-direction:column;gap:1px;border:1px solid var(--border);border-radius:8px;padding:5px 9px;min-width:0}
.pc-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}
.pc-val{font-size:12px;font-weight:600;color:var(--text-primary)}
.pc-step.pc-ok{border-color:var(--success);background:var(--success-dim)}
.pc-step.pc-warn{border-color:var(--accent-warm);background:var(--accent-warm-dim)}
.pc-step.pc-missing{border-color:var(--danger);background:var(--danger-dim)}
.pc-arrow{align-self:center;color:var(--text-muted);font-size:13px}
.pc-flags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.pc-link{font-size:12px;margin-bottom:6px}
/* P6.1 calendar grid */
.calbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.segmented{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.seg{background:var(--card);color:var(--text-secondary);border:none;border-left:1px solid var(--border);padding:6px 12px;font-size:13px;font-family:inherit;cursor:pointer}
.seg:first-child{border-left:none}.seg:hover{background:var(--bg-elevated);color:var(--text-primary)}.seg.on{background:var(--accent);color:var(--text-inverse)}
.calnav{display:inline-flex;align-items:center;gap:8px}.calmlab{font-weight:600;font-size:15px;min-width:140px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.cal-wd{background:var(--bg-elevated);color:var(--text-muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:6px 8px;text-align:center}
.cal-cell{background:var(--card);min-height:92px;padding:4px 5px;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.cal-cell.oom{background:var(--bg-elevated)}.cal-cell.oom .cal-dn{color:var(--text-muted);opacity:.6}
.cal-cell.today{box-shadow:inset 0 0 0 2px var(--accent)}
.cal-dn{font-size:12px;font-weight:600;color:var(--text-secondary);align-self:flex-end}.cal-cell.today .cal-dn{color:var(--accent)}
.cal-ev{font-size:11px;line-height:1.3;border-radius:4px;padding:1px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid transparent}
.cal-ev.lk{cursor:pointer}.cal-milestone{background:var(--accent-dim);color:var(--accent)}.cal-task{background:var(--accent-warm-dim);color:var(--accent-warm)}.cal-schedule{background:var(--success-dim);color:var(--success)}
.cal-ev.lk:hover{border-color:currentColor}
.cal-more{font-size:10px;color:var(--text-muted);padding-left:3px}
@media(max-width:640px){.cal-cell{min-height:64px}.cal-ev{font-size:10px}}
/* P6.2 portfolio gantt / timeline */
.gantt-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px;background:var(--card)}
.gantt{padding:0 0 6px}
.gantt-head{position:relative;height:22px;border-bottom:1px solid var(--border);margin-left:160px}
.gantt-tick{position:absolute;top:4px;font-size:10px;color:var(--text-muted);border-left:1px solid var(--border);padding-left:4px;height:14px;white-space:nowrap}
.gantt-row{display:flex;align-items:center;border-bottom:1px solid var(--border-subtle);min-height:34px}
.gantt-lbl{width:160px;flex-shrink:0;font-size:12px;font-weight:600;color:var(--text-primary);padding:4px 8px;display:flex;flex-direction:column;gap:2px}
.gantt-track{position:relative;height:34px;flex-shrink:0}
.gantt-bar{position:absolute;top:7px;height:20px;border-radius:5px;font-size:10px;color:var(--text-inverse);line-height:20px;padding:0 6px;overflow:hidden;white-space:nowrap;opacity:.82}
.gantt-bar.on{opacity:1;box-shadow:0 0 0 2px var(--text-primary)}
.gantt-mi{position:absolute;top:9px;transform:translateX(-50%);font-size:13px;color:var(--accent-warm);pointer-events:auto}.gantt-mi.star{color:var(--accent-warm);font-size:15px;top:7px}
.gantt-today{position:absolute;top:0;bottom:0;width:2px;background:var(--danger);z-index:1}
.gantt-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:11px;color:var(--text-muted)}
.gantt-leg{display:inline-flex;align-items:center;gap:5px}.gantt-sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.gantt-sw-fill{background:var(--text-secondary)}
.gantt-zoom{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-bottom:8px}
.gantt-fill{position:absolute;left:0;top:0;bottom:0;background:rgba(0,0,0,.28);border-radius:5px 0 0 5px}
.gantt-bl{position:relative;z-index:1}
.gantt-meta{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.gantt-res{font-size:10px;color:var(--text-muted)}
/* production task Gantt (CPM) */
.tg{align-items:flex-start}
.tg-labels{flex-shrink:0;border-right:1px solid var(--border);background:var(--card)}
.tg-lbl{display:flex;flex-direction:column;justify-content:center;padding:2px 8px;border-bottom:1px solid var(--border-subtle);overflow:hidden}
.tg-lbl.crit .tg-t{color:var(--danger);font-weight:600}
.tg-t{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}
.tg-who{font-size:10px;color:var(--text-muted)}
.tg-track{position:relative;flex-shrink:0;background:var(--card)}
.tg-barrow{position:absolute;left:0;width:100%}
.tg-bar{position:absolute;top:6px;height:18px;background:var(--accent);border-radius:5px;overflow:hidden;color:var(--text-inverse);font-size:10px;line-height:18px}
.tg-bar.crit{box-shadow:0 0 0 2px var(--danger)}
.tg-fill{position:absolute;left:0;top:0;bottom:0;background:rgba(0,0,0,.28);border-radius:5px 0 0 5px}
.tg-mil{position:absolute;top:0;bottom:0;border-left:1px dashed var(--accent-warm);opacity:.6}
.tg-meta{margin:0 0 8px}
/* P7 changed-since strip + snooze */
.changed-strip{background:var(--accent-dim);border:1px solid var(--accent);border-radius:10px;padding:8px 12px;margin-bottom:12px}
.cs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--text-primary)}
.cs-list{margin-top:6px;display:flex;flex-direction:column;gap:2px}
.cs-item{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary)}
.snoozed-box{margin-top:10px;border:1px solid var(--border-subtle);border-radius:10px;padding:6px 12px;background:var(--bg-elevated)}
.snoozed-box summary{cursor:pointer;font-size:13px;color:var(--text-secondary)}
/* SMPTE / songs running-order views */
.ro-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;color:var(--text-secondary)}
.ro-tl{padding:0 0 8px}
.ro-head{position:relative;height:18px;border-bottom:1px solid var(--border);margin-bottom:6px}
.ro-tick{position:absolute;top:2px;font-size:10px;color:var(--text-muted);border-left:1px solid var(--border);padding-left:3px}
.ro-track{position:relative;height:34px}
.ro-bar{position:absolute;top:6px;height:22px;border-radius:5px;font-size:10px;color:var(--text-inverse);line-height:22px;padding:0 6px;overflow:hidden;white-space:nowrap;opacity:.9}
.ro-bar.ro-gap{box-shadow:-3px 0 0 var(--warning)}.ro-bar.ro-overlap{box-shadow:0 0 0 2px var(--danger)}
.caller-now{background:var(--accent-dim);border:1px solid var(--accent);border-radius:12px;padding:16px 18px;margin-bottom:10px}
.cn-tag{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:1px}
.cn-title{font-size:26px;font-weight:700;color:var(--text-primary);margin:2px 0}
.cn-tc{font-family:var(--font-mono);font-size:14px;color:var(--text-secondary)}
.cn-cue{font-family:var(--font-mono);font-size:13px;color:var(--accent);margin-top:6px}
.cn-mics{font-size:13px;color:var(--text-secondary);margin-top:4px}
.cn-notes{font-size:13px;color:var(--text-muted);margin-top:6px}
.caller-next{font-size:14px;color:var(--text-secondary);padding:6px 4px}.caller-next .cn-tag{display:inline;margin-right:6px}
.caller-ctrl{display:flex;align-items:center;gap:12px;margin:8px 0 14px}
.caller-list{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.caller-row{display:flex;gap:10px;align-items:center;padding:7px 12px;border-bottom:1px solid var(--border-subtle);cursor:pointer;font-size:13px}
.caller-row:last-child{border-bottom:none}.caller-row:hover{background:var(--bg-elevated)}
.caller-row.on{background:var(--accent-dim)}
.cr-no{width:28px;color:var(--text-muted);font-weight:600}.cr-t{flex:1;color:var(--text-primary)}.cr-tc{font-family:var(--font-mono);color:var(--text-secondary)}.cr-d{width:48px;text-align:right;color:var(--text-muted)}
/* interactive segments/rows (Phase B wires the behaviour) */
.chart-seg{cursor:pointer;transition:opacity var(--transition,150ms ease)}
.chart-seg:hover,.chart-seg:focus-visible{opacity:.78;outline:none}
.bar-row.chart-seg:hover,.bar-row.chart-seg:focus-visible{background:var(--bg-elevated);border-radius:4px}
/* ===== Phase C: interaction primitives ===== */
/* skeleton loaders */
.skeleton{background:linear-gradient(90deg,var(--bg-elevated) 25%,var(--bg-overlay) 50%,var(--bg-elevated) 75%);background-size:200% 100%;animation:sk-shimmer 1.4s infinite;border-radius:var(--radius-sm)}
@keyframes sk-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-screen{padding:4px 0}.sk-line{display:block}.sk-card{height:84px;border-radius:12px;margin-bottom:14px}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:14px 0 22px}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}
/* empty states */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:44px 24px;gap:8px}
.empty-state .es-icon{font-size:32px;opacity:.55}
.empty-state .es-title{font-size:16px;font-weight:600;color:var(--text-primary)}
.empty-state .es-desc{font-size:13px;color:var(--text-secondary);max-width:380px}
.empty-state .es-action{margin-top:8px}
/* filter pills */
.filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.filter-pill{padding:6px 14px;border-radius:999px;font-size:13px;font-weight:500;background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border-default);cursor:pointer;transition:all var(--transition,150ms ease);user-select:none}
.filter-pill:hover{border-color:var(--border-strong);color:var(--text-primary)}
.filter-pill.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
/* density (per-device): compact / cozy(default) / comfortable */
body.density-compact #view tbody td,body.density-compact #view thead th{padding-top:2px;padding-bottom:2px}
body.density-compact #view .bar-row,body.density-compact #view .row{padding-top:2px;padding-bottom:2px}
body.density-comfortable #view tbody td,body.density-comfortable #view thead th{padding-top:10px;padding-bottom:10px}
body.density-comfortable #view .row{padding-top:11px;padding-bottom:11px}
/* ===== Phase D: motion — state-feedback only, 150ms, reduced-motion safe ===== */
@keyframes flash-ok{0%{background-color:var(--success-dim)}100%{background-color:transparent}}
@keyframes flash-bad{0%{background-color:var(--danger-dim)}100%{background-color:transparent}}
.flash-ok{animation:flash-ok .6s ease-out}
.flash-bad{animation:flash-bad .85s ease-out}
/* button press feedback */
.addbtn,.topbar button,.btn,.filter-pill,.lcard button{transition:transform var(--transition-fast,100ms ease),background var(--transition,150ms ease),border-color var(--transition,150ms ease),color var(--transition,150ms ease)}
.addbtn:active,.topbar button:active,.btn:active,.filter-pill:active,.lcard button:active{transform:scale(.97)}
/* loading button: hide label, show inline spinner */
.btn-loading{color:transparent!important;position:relative;pointer-events:none}
.btn-loading::after{content:'';position:absolute;top:50%;left:50%;width:1em;height:1em;margin:-.5em 0 0 -.5em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite;color:var(--text-inverse)}
@media (prefers-reduced-motion:reduce){.flash-ok,.flash-bad{animation:none}.addbtn:active,.topbar button:active,.btn:active,.filter-pill:active,.lcard button:active{transform:none}.btn-loading::after{animation:none}}
@media print{.bfill,.gaugefill{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
/* T1: on touch, generic-table text/select inputs are read-only-looking — a tap opens the edit
   sheet instead of inline editing (no horizontal-pan editing). Checkboxes/toggles stay inline. */
body.touch table.gtable td input:not([type=checkbox]),body.touch table.gtable td select{pointer-events:none;background:transparent;border-color:transparent}
body.touch table.gtable tbody tr{cursor:pointer}
/* edit sheet: bottom sheet (portrait) / right panel (landscape) */
#sheetov{display:none;position:fixed;inset:0;background:var(--scrim);z-index:1500}
#editsheet{display:none;position:fixed;z-index:1501;background:var(--card);flex-direction:column;left:0;right:0;bottom:0;max-height:85vh;border-radius:16px 16px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.3)}
#editsheet.on{display:flex}#sheetov.on{display:block}
@media(orientation:landscape){#editsheet{left:auto;right:0;top:0;bottom:0;width:min(560px,46vw);max-height:none;border-radius:0;box-shadow:-8px 0 40px rgba(0,0,0,.3)}}
.sheet-h{background:var(--bg-elevated);color:var(--text-primary);padding:14px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:600;border-bottom:1px solid var(--border-subtle)}
.sheet-h .x{cursor:pointer;font-size:20px}
/* P1: detail-panel tabs + Activity/Links views */
.sheet-tabs{display:flex;gap:6px;padding:8px 12px 0;border-bottom:1px solid var(--border-default);flex-shrink:0}
.sheet-tab{padding:8px 12px;font-size:13px;font-weight:500;color:var(--text-secondary);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color var(--transition,150ms ease),border-color var(--transition,150ms ease);min-height:40px}
.sheet-tab:hover{color:var(--text-primary)}
.sheet-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.detail-hist{display:flex;flex-direction:column;gap:2px}
.dh-row{padding:8px 2px;border-bottom:1px solid var(--border-subtle);font-size:13px}
.dh-row:last-child{border-bottom:none}
.dh-when{display:block;font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}
.dh-act{color:var(--text-primary)}
.detail-links .row{display:flex;justify-content:space-between;padding:9px 2px;border-bottom:1px solid var(--border-subtle);font-size:13px}
.detail-links .row .k{color:var(--text-secondary)}.detail-links .row .v{font-weight:600}
/* P2: status board (kanban) lens */
.status-board{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;align-items:flex-start}
.board-col{flex:0 0 260px;min-width:260px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;display:flex;flex-direction:column;max-height:70vh}
.board-col-h{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border-subtle);position:sticky;top:0;background:var(--bg-surface);border-radius:12px 12px 0 0}
.board-col-b{padding:8px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:40px}
.board-card{position:relative;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:8px;padding:10px 30px 10px 12px;cursor:pointer;transition:border-color var(--transition,150ms ease),background var(--transition,150ms ease)}
.board-card:hover,.board-card:focus-visible{border-color:var(--accent);outline:none}
.board-card[draggable=true]{cursor:grab}.board-card[draggable=true]:active{cursor:grabbing}
.bc-title{font-size:13px;font-weight:500;color:var(--text-primary)}
.bc-sub{font-size:11px;color:var(--text-secondary);margin-top:3px}
.bc-move{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:6px;background:none;color:var(--text-muted);font-size:15px;line-height:1;cursor:pointer}
.bc-move:hover{background:var(--bg-overlay);color:var(--text-primary)}
.bc-empty{padding:12px;text-align:center;color:var(--text-muted)}
.boardmenu{min-width:160px}
body.touch .board-col{flex-basis:80vw;min-width:80vw}
body.touch .bc-move{width:40px;height:40px}
.sheet-b{padding:14px 16px;overflow:auto;flex:1;-webkit-overflow-scrolling:touch}
.sheet-b .field{margin:0 0 12px}
.sheet-b label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:4px}
.sheet-b .field input,.sheet-b .field select{width:100%;border:1px solid var(--border);border-radius:9px;padding:11px;font-size:16px;font-family:inherit;background:var(--bg-elevated);color:var(--text);min-height:44px}
.sheet-b .field .tog{font-size:26px;cursor:pointer}.sheet-b .field .ro{font-size:15px;color:var(--text)}
.sheet-b .field .relmulti{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sheet-b .field .relmulti .chip{display:inline-flex;align-items:center;gap:4px;font-size:13px;padding:4px 9px}
.sheet-b .field .relmulti .chip .cbtn{font-size:15px;line-height:1;min-width:0;height:auto;padding:0;background:none}
.sheet-b .field .relmulti select{width:auto;min-width:120px;min-height:34px;padding:6px 9px;font-size:13px}
.sheet-acts{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);flex-wrap:wrap}
.sheet-acts button{flex:1;min-width:88px;min-height:48px;border:1px solid var(--border);border-radius:9px;background:var(--card);font-family:inherit;font-size:14px;cursor:pointer}
body.viewer .sheet-b input,body.viewer .sheet-b select,body.viewer .sheet-b .tog{pointer-events:none;background:transparent;border-color:transparent}
body.viewer .sheet-acts .actcolour,body.viewer .sheet-acts .actdel{display:none}
/* ===== Prompt Book — full-width PDF + toolbar + popups ===== */
.pbtoolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;margin:6px 0 12px;background:var(--card);border:1px solid var(--border);border-radius:10px;position:sticky;top:0;z-index:5}
.pbtoolbar select{padding:6px 8px;border:1px solid var(--border);border-radius:6px;font-family:inherit;background:var(--card);color:var(--text);max-width:160px}
.pbtbsep{width:1px;align-self:stretch;background:var(--border);margin:0 2px}
.pbstagewrap{text-align:center}
.pbempty{border:2px dashed var(--border);border-radius:12px;padding:48px 16px;text-align:center;background:var(--card)}
.pbemptytitle{font-size:18px;font-weight:600;margin-bottom:12px;color:var(--muted)}
.pbmodal{position:fixed;inset:0;background:var(--scrim);z-index:60;display:flex;align-items:center;justify-content:center}
.pbmodalcard{width:560px;max-width:94vw;background:var(--card);border:1px solid var(--border);border-radius:12px;max-height:88vh;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.4)}
.pbtreerow{display:flex;align-items:center;gap:6px;padding:3px 4px;border-bottom:1px solid var(--border)}
.pbtreerow.pbact{background:var(--blue-f)}
.pbtreerow.pbscene{padding-left:18px}
.pbtreerow input,.pbtreerow select{padding:5px 6px;border:1px solid var(--border);border-radius:6px;font-family:inherit;background:var(--card);color:var(--text)}
.pbtog{cursor:pointer;width:18px;text-align:center;user-select:none;font-size:13px}
.pbind{width:18px;text-align:center;color:var(--muted)}
.pbjump{margin:0;padding:2px 7px}
body.dark .pbtreerow input,body.dark .pbtreerow select,body.dark .pbtoolbar input,body.dark .pbtoolbar select{background:var(--bg-elevated)}
.ph2lbl{font-weight:600;font-size:13px;color:var(--muted);margin:14px 0 6px;border-bottom:1px solid var(--border);padding-bottom:3px}
.ph2lbl:first-child{margin-top:0}
.midimon{font-family:var(--font-mono);font-size:12px;max-height:170px;overflow:auto;border:1px solid var(--border);border-radius:8px;background:var(--bg)}
.midimonrow{display:flex;gap:10px;padding:3px 8px;border-bottom:1px solid var(--border);white-space:nowrap}
.midimonrow:last-child{border-bottom:none}
.midimonv{flex:0 0 110px;font-weight:600}
.midimonv.ok{color:var(--green-t)} .midimonv.warn{color:var(--amber-t)} .midimonv.mute{color:var(--muted)}
.midimonl{color:var(--text);overflow:hidden;text-overflow:ellipsis}
.addbtn.armed{background:var(--accent-warm);color:var(--text-inverse);border-color:var(--accent-warm);animation:learnpulse 1s ease-in-out infinite}
@keyframes learnpulse{0%,100%{opacity:1}50%{opacity:.55}}
/* ===== B12: dark mode — only the palette changes, via CSS variables under body.dark ===== */
body.dark{
  color-scheme:dark;
  --bg-base:#0a0e14;--bg-surface:#111825;--bg-elevated:#182234;--bg-overlay:#1e2d42;
  --border-subtle:rgba(255,255,255,.05);--border-default:rgba(255,255,255,.08);--border-strong:rgba(255,255,255,.14);
  --text-primary:#e2e8f0;--text-secondary:#7b8ba3;--text-muted:#4b5c73;--text-inverse:#0a0e14;
  --accent:#06b6d4;--accent-hover:#22d3ee;--accent-dim:rgba(6,182,212,.12);
  --accent-warm:#e2a857;--accent-warm-dim:rgba(226,168,87,.12);
  --success:#34d399;--success-dim:rgba(52,211,153,.12);--warning:#fbbf24;--warning-dim:rgba(251,191,36,.12);
  --danger:#f87171;--danger-dim:rgba(248,113,113,.12);--info:#60a5fa;--info-dim:rgba(96,165,250,.12);
  --chart-track:#22324a;
  --shadow-sm:0 1px 3px rgba(0,0,0,.45),0 0 0 1px rgba(6,182,212,.04);--shadow-md:0 4px 16px rgba(0,0,0,.55),0 0 0 1px rgba(6,182,212,.06);
  /* bridge aliases must be RE-declared here so var() re-resolves against the dark
     primitives above — a custom property's var() is substituted at its declaring
     element, so the :root copies would otherwise stay frozen at light values. */
  --navy:var(--bg-base);--navy2:var(--bg-surface);--section:var(--bg-elevated);
  --amber:var(--accent);
  --blue-f:var(--accent-dim);--blue-t:var(--accent);
  --teal-f:var(--success-dim);--teal-t:var(--success);
  --amber-f:var(--accent-warm-dim);--amber-t:var(--accent-warm);
  --red:var(--danger);--red-f:var(--danger-dim);--red-t:var(--danger);
  --green-f:var(--success-dim);--green-t:var(--success);
  --bg:var(--bg-base);--card:var(--bg-surface);--border:var(--border-default);
  --text:var(--text-primary);--muted:var(--text-secondary);--ink-accent:var(--accent);
  --sans:var(--font-sans);
}
/* ===== Medium theme — a lighter Nordic dark (brighter rooms). Same dark accent/
   status as body.dark, lighter surfaces. Bridge aliases re-declared (freeze-fix). ===== */
body.medium{
  color-scheme:dark;
  --bg-base:#0f1520;--bg-surface:#16202f;--bg-elevated:#1d2a3d;--bg-overlay:#24354c;
  --border-subtle:rgba(255,255,255,.07);--border-default:rgba(255,255,255,.11);--border-strong:rgba(255,255,255,.18);
  --text-primary:#dde3f0;--text-secondary:#8a96b0;--text-muted:#505c78;--text-inverse:#0a0e14;
  --accent:#06b6d4;--accent-hover:#22d3ee;--accent-dim:rgba(6,182,212,.12);
  --accent-warm:#e2a857;--accent-warm-dim:rgba(226,168,87,.12);
  --success:#34d399;--success-dim:rgba(52,211,153,.12);--warning:#fbbf24;--warning-dim:rgba(251,191,36,.12);
  --danger:#f87171;--danger-dim:rgba(248,113,113,.12);--info:#60a5fa;--info-dim:rgba(96,165,250,.12);
  --chart-track:#22324a;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4),0 0 0 1px rgba(6,182,212,.04);--shadow-md:0 4px 16px rgba(0,0,0,.48),0 0 0 1px rgba(6,182,212,.05);
  --navy:var(--bg-base);--navy2:var(--bg-surface);--section:var(--bg-elevated);
  --amber:var(--accent);--blue-f:var(--accent-dim);--blue-t:var(--accent);
  --teal-f:var(--success-dim);--teal-t:var(--success);--amber-f:var(--accent-warm-dim);--amber-t:var(--accent-warm);
  --red:var(--danger);--red-f:var(--danger-dim);--red-t:var(--danger);--green-f:var(--success-dim);--green-t:var(--success);
  --bg:var(--bg-base);--card:var(--bg-surface);--border:var(--border-default);
  --text:var(--text-primary);--muted:var(--text-secondary);--ink-accent:var(--accent);--sans:var(--font-sans);
}
/* ===== Brighella class aliases — pasted component-source snippets render on-brand
   without edits. New class names (not used by the prototype) → no collisions. ===== */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;box-shadow:var(--shadow-sm);padding:16px}
.stat-card{position:relative;overflow:hidden;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow-sm)}
.stat-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:500;line-height:1.4}
.badge-success{background:var(--success-dim);color:var(--success)}.badge-warning{background:var(--warning-dim);color:var(--warning)}
.badge-danger{background:var(--danger-dim);color:var(--danger)}.badge-info{background:var(--info-dim);color:var(--info)}
.badge-accent{background:var(--accent-dim);color:var(--accent)}.badge-warm{background:var(--accent-warm-dim);color:var(--accent-warm)}
.badge-neutral{background:var(--bg-overlay);color:var(--text-secondary)}
.bg-table{width:100%;border-collapse:collapse;font-size:13px}
.bg-table thead th{background:transparent;color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:8px 9px;text-align:left;border-bottom:1px solid var(--border-strong)}
.bg-table tbody td{padding:5px 9px;border-bottom:1px solid var(--border-subtle)}
.bg-table tbody tr:hover{background:var(--bg-elevated)}
body.dark tbody tr:nth-child(even){background:transparent}
body.dark table.gtable tbody tr:nth-child(even) .bulkcol,body.dark table.gtable tbody tr:nth-child(even) .dragh,body.dark table.gtable tbody tr:nth-child(even) .firstcol,body.dark table.bgtable tbody tr:nth-child(even) .dragh,body.dark table.bgtable tbody tr:nth-child(even) .firstcol{background:var(--card)}
body.dark td input:focus,body.dark td select:focus{background:var(--bg-elevated)}
body.dark .sheet-b .field input,body.dark .sheet-b .field select,body.dark .colorpop input[type=color]{background:var(--bg-elevated);color:var(--text)}
body.dark .scenes td{background:var(--bg-elevated)}
body.dark .row,body.dark .contact,body.dark .cmsg{border-color:var(--border-subtle)}
body.dark .btrack,body.dark .gauge{background:var(--bg-elevated)}
body.dark .colorpop,body.dark .modal .box,body.dark .palbox,body.dark .lcard,body.dark #editsheet{background:var(--card);color:var(--text)}
body.dark input,body.dark select,body.dark textarea{color:var(--text)}
body.dark input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),body.dark select,body.dark textarea{background:var(--card)}
body.dark input[type=date]::-webkit-calendar-picker-indicator,body.dark input[type=time]::-webkit-calendar-picker-indicator,body.dark input[type=datetime-local]::-webkit-calendar-picker-indicator,body.dark input[type=month]::-webkit-calendar-picker-indicator,body.dark input[type=week]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.4)}
body.dark input[type=date],body.dark input[type=time],body.dark input[type=datetime-local]{color-scheme:dark}
body.dark .login{background:var(--bg-base)}
.accgrp{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:12px 0 4px;font-weight:700}
.accrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--border)}
.acclbl{font-size:13px}
.accseg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.segbtn{border:none;background:var(--card);color:var(--muted);font:inherit;font-size:12px;padding:4px 10px;cursor:pointer}
.segbtn+.segbtn{border-left:1px solid var(--border)}
.segbtn.on{background:var(--blue-f);color:var(--blue-t);font-weight:700}
.segbtn:disabled{opacity:.4;cursor:not-allowed}
.notecell{display:inline-flex;align-items:flex-start;gap:2px;width:100%}
.noteta{width:100%;min-width:130px;font:inherit;font-size:13px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);padding:4px 6px;height:30px;line-height:18px;resize:vertical;overflow:hidden}
.noteta:focus,.noteta.exp{height:96px;overflow:auto;outline:none;border-color:var(--blue-t)}
.noteexp{display:inline-flex;align-items:center;justify-content:center;width:28px;height:30px;border-radius:7px;cursor:pointer;color:var(--text-muted);font-size:15px;user-select:none;flex:0 0 auto;transition:background var(--transition,120ms ease),color var(--transition,120ms ease)}
.noteexp:hover,.noteexp:focus-visible{color:var(--accent);background:var(--accent-dim)}
/* ===== Design taste upgrades (redesign-preserve pass) ===== */
/* Headings: prevent orphaned single words on narrow containers */
h1,h2,h3,h4,h2.title,.banner .big,.cn-title,.kpi .lab,.ph{text-wrap:balance}
/* Numeric values: tabular figures so columns align precisely */
.kpi .val,.bchart-val,.blab,.bar-val,.gantt-lbl,.cr-tc,.cn-tc,.ro-bar,.tg-t{font-variant-numeric:tabular-nums}
/* Sidebar brand mark: slightly heavier presence */
.brand h1{font-weight:600;letter-spacing:-.01em}
/* Topbar: consistent border-radius with system token */
.topbar button{border-radius:var(--radius)}
/* Filter pills: spring easing already inherits from --transition token; add explicit will-change for GPU promotion */
.showtile,.board-card,.filter-pill{will-change:border-color}
/* Scrollbar: thinner, subtler on narrow panels */
.sidebar::-webkit-scrollbar,.palres::-webkit-scrollbar,.sheet-b::-webkit-scrollbar{width:5px}
/* Active nav item: smooth border-left growth */
.nav a{transition:background var(--transition),color var(--transition),border-left-color var(--transition-fast)}
@media(prefers-reduced-motion:reduce){
  .nav a{transition:none}
  .showtile,.board-card,.filter-pill{will-change:auto}
}
/* ===== Design taste upgrades pass 2 — Doppelrand depth + typography polish ===== */
html{scroll-behavior:smooth}
/* Display numbers & large headings: negative tracking gives weight and presence */
.kpi .val,.banner .big,.cn-title{letter-spacing:-.02em}
h2.title{letter-spacing:-.01em}
/* Card surfaces: inner top-edge highlight simulates a physical glass-on-tray depth
   (Doppelrand technique — outer shadow for depth, inner highlight for surface plane).
   var(--shadow-sm) resolves to the correct dark/medium tinted value automatically. */
.kpi,.showtile,.dashcard,.panel{box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.05)}
.board-card{box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.04)}
/* Topbar: directional underlight reinforces the sticky position in dark mode */
body.dark .topbar,body.medium .topbar{box-shadow:0 2px 12px rgba(0,0,0,.4),0 1px 0 var(--border-default)}
/* Floating overlays: heavier depth + cyan hairline edge for dark mode surfaces */
body.dark .moremenu,body.medium .moremenu{box-shadow:0 10px 34px rgba(0,0,0,.6),0 0 0 1px rgba(6,182,212,.07)}
body.dark .modal .box,body.medium .modal .box{box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 0 1px rgba(6,182,212,.06)}
body.dark .palbox,body.medium .palbox{box-shadow:0 20px 60px rgba(0,0,0,.65),0 0 0 1px rgba(6,182,212,.06)}
body.dark #toast,body.medium #toast{box-shadow:0 8px 28px rgba(0,0,0,.55),0 0 0 1px rgba(6,182,212,.06)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== Admin area forms (2026-07-05) — consistent labels + a real primary button ===== */
/* Primary action button (solid accent) — the `.btn` class was referenced but never defined; `.addbtn`
   is the DASHED "+add" affordance and shouldn't be used for Save/submit. */
.btn{background:var(--accent);border:1px solid var(--accent);color:var(--text-inverse);font-weight:600;border-radius:8px;padding:8px 16px;cursor:pointer;font-family:inherit;font-size:13px}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn:disabled{opacity:.5;cursor:default}
/* Stacked form fields inside admin panels — label above a full-width control (matches .lcard/.sheet-b). */
.admin-form label{display:block;font-size:12px;color:var(--text-secondary);margin:10px 0 4px}
.admin-form input,.admin-form select{width:100%;max-width:360px}
.admin-form .grid2 input,.admin-form .grid2 select{max-width:none}

/* ===== UI/UX pass (2026-07-03) — token-level polish, no new identity ===== */
/* Mobile: the presence indicator is display-only and must never intercept a tap meant for the
   hamburger; keep the hamburger above topbar status chrome so the drawer always opens. */
.topbar #online{pointer-events:none}
body.compact .hamb{position:relative;z-index:6}
/* Opt-in truncating table cell — pair with title="<full text>" so hover reveals clipped content. */
td.truncate{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Light theme parity: the topbar kept its shadow only under dark/medium; give light a hairline too. */
body:not(.dark):not(.medium) .topbar{box-shadow:0 1px 0 var(--border-default)}
/* Light theme parity: table zebra + editable-cell field backgrounds were scoped to dark/medium only. */
body:not(.dark):not(.medium) #view table tbody tr:nth-child(even){background:var(--bg-elevated)}
body:not(.dark):not(.medium) td input:focus,body:not(.dark):not(.medium) td select:focus{background:#fff}
/* Even out the org Contacts card grid so short cards don't look ragged next to full ones. */
.contact{min-height:88px}
/* Sparse content tables shouldn't stretch full width leaving a large void (e.g. Team & access). */
#view table.narrow{max-width:820px}
/* Lazy note placeholder — a light "＋ note" affordance shown instead of an empty <textarea> per row. */
.noteph{display:inline-block;color:var(--text-muted);font-size:12px;cursor:text;padding:3px 6px;border:1px dashed var(--border-default);border-radius:6px;opacity:.7}
.noteph:hover{opacity:1;border-color:var(--border-strong)}
/* Dashboard wayfinding: a horizontally-scrollable chip rail that jumps to any of the 18+ cards. */
.dashrail{display:flex;gap:6px;overflow-x:auto;padding:4px 0 12px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.dashrail .filter-pill{white-space:nowrap;flex:0 0 auto}
.dc-flash{animation:dcflash 1s ease-out}
@keyframes dcflash{0%{box-shadow:0 0 0 2px var(--accent,#38bdf8)}100%{box-shadow:0 0 0 2px transparent}}
@media(prefers-reduced-motion:reduce){.dc-flash{animation:none}}