/* PEMS TSM - SKIN (Stream R, 3 Nov 2026). The quote-template language (wipai/quote_render.php) applied to every screen,
   in every theme, through the skin tokens defined per theme in 00-theme.css:
     --band-bg/--band-text/--band-accent  charcoal section band, white uppercase letter-spaced title, orange accent span
     --th-bg/--th-text                    grey table head with a 2px orange rule under it
     --row-line                           1px row dividers           --sub-bg   subtotal rows
     --box-line                           1px silver panel borders   --tint     orange-tinted note background
     --lbl                                small uppercase orange field labels
   Loaded from index.html AFTER style.css / ui.css. Component CSS owned by other streams is only ever overridden here
   (never edited): .jc-* job card, .ws-* workspace, .tsm-* grids, .stk-* stock, .cj-* contracts, .tj- and .fa- tech app.
   No hard-coded colours except the two brand constants (--brand-black / --brand-orange) for the orange bar.           */

/* ---------- 1. orange bar + charcoal shell ---------- */
html .top{border-top:5px solid var(--accent);height:calc(var(--top-h) + 5px);background:var(--surface-1);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--box-line)}
html .side .brand{border-bottom:3px solid var(--accent);margin-bottom:6px}
html .side nav a.on{background:var(--accent);color:#fff;border-radius:var(--r-sm)}
html .side nav a.on .ic{color:#fff}
html .side nav a.on::before{display:none}
html .sidefoot{border-top:1px solid var(--sb-line)}
html .bottom{border-top:3px solid var(--accent)}

/* ---------- 2. section bands: every heading that introduces a block ---------- */
html .view>h1:first-child,html .st-head h2,html .cj-head h2,html .stk-card>h3,html .card>h3,html .panel>h3,html .fa-card>h3,html .tj-card>h3,html .rl h4,html .jc-panel>h4,html .cj-panel>h4,html .modal>h3,html .tsm-pop-h,html .ws-ph,html .ap-h,html .tsm-sec{
  display:flex;align-items:center;gap:8px;background:var(--band-bg);color:var(--band-text);text-transform:uppercase;letter-spacing:.09em;font-weight:700;border-radius:var(--r-xs);border-left:5px solid var(--accent)
}
html .view>h1:first-child{font-size:15px;padding:9px 12px;margin:0 0 14px;letter-spacing:.12em}
html .view>h1:first-child small,html .view>h1:first-child .muted{color:var(--band-accent);text-transform:none;letter-spacing:0;font-weight:500}
html .card>h3,html .panel>h3,html .fa-card>h3,html .tj-card>h3,html .stk-card>h3{font-size:11.5px;padding:7px 10px;margin:-18px -18px 12px;border-radius:var(--r-xs) var(--r-xs) 0 0;border-left:0;border-bottom:2px solid var(--accent)}
html .stk-card>h3{margin:-12px -14px 10px}
html .fa-card>h3{margin:-16px -16px 12px}
html .tj-card>h3{margin:-12px -12px 10px}
html .card>h3 span,html .card>h3 small,html .card>h3 .muted,html .card>h3 b{color:var(--band-accent);text-transform:none;letter-spacing:0}
html .card>h3 .btn,html .card>h3 button,html .stk-card>h3 .btn{text-transform:none;letter-spacing:0;height:26px;padding:0 9px;font-size:12px;color:var(--text);background:var(--surface-1);border-color:var(--box-line)}
html .rl h4,html .jc-panel>h4,html .cj-panel>h4{font-size:10.5px;padding:5px 8px;margin:-8px -10px 8px;border-radius:var(--r-xs) var(--r-xs) 0 0;border-left:0;border-bottom:2px solid var(--accent);letter-spacing:.1em}
html .rl h4{margin:0 0 10px}
html .modal>h3{font-size:12.5px;padding:9px 14px;margin:-24px -24px 16px;border-radius:var(--r-xl) var(--r-xl) 0 0;border-left:0;border-bottom:3px solid var(--accent)}
html .modal>h3 small,html .modal>h3 span{color:var(--band-accent);text-transform:none;letter-spacing:0}
html .tsm-pop-h{font-size:11px;padding:7px 10px;border-left:0;border-bottom:2px solid var(--accent);border-radius:var(--r-xs) var(--r-xs) 0 0}
html .ws-ph{font-size:11px;padding:5px 6px 5px 10px;border-left:0;border-bottom:2px solid var(--accent);border-radius:0}
html .ws-ph .ws-pb{color:var(--band-text);text-transform:none;letter-spacing:0;font-weight:500}
html .ws-ph .ws-pb:hover{background:rgba(255,255,255,.14)}
html .ws-pane.act .ws-ph{border-bottom-color:var(--band-accent)}
html .ap-h{font-size:11.5px;padding:8px 10px;border-left:0;border-bottom:2px solid var(--accent)}
html .ap-h small{color:var(--band-accent);text-transform:none;letter-spacing:0;font-weight:500}
html .ap-h .ap-x{color:var(--band-text);background:transparent;border-color:transparent}
html .st-head h2,html .cj-head h2{font-size:13px;padding:7px 12px;flex:1}
html .tsm-sec{font-size:10.5px;padding:5px 8px;border-left:0;border-bottom:2px solid var(--accent)}

/* ---------- 3. boxes: 1px silver border, crisp corners, no floating shadows ---------- */
html .card,html .stat,html .panel,html .jobhead,html .tw,html .fa-card,html .tj-card,html .stk-card,html .cj-panel,html .jc-panel,html .ws-pane,html .modal,html .tsm-pop,html .ap-pop,html .empty,html .jc-box,html .cj-head,html .cj-foot{border-color:var(--box-line);box-shadow:none;border-radius:var(--r-md)}
html .card,html .stat,html .fa-card,html .tj-card,html .stk-card,html .cj-panel,html .jc-panel{background:var(--surface-1)}
html .jc-panel{border-radius:var(--r-xs)}
html .modal{border-radius:var(--r-xl)}
html .tsm-pop,html .ap-pop{box-shadow:var(--sh-pop)}
html .panel{border-top:0;border-radius:0 0 var(--r-md) var(--r-md)}
html .stat::before{display:none}
html .stat b{color:var(--text)}
html .stat span{text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;color:var(--lbl);font-weight:700}
html .ws-pane.act{border-color:var(--accent)}

/* ---------- 4. field labels: small uppercase orange ---------- */
html .fgrid label span,html .fl>span,html .jc-f>span,html .jc-strip span,html .jc-head .cell small,html .kv dt,html .kv .k,html .rl .row span:first-child,html .jc-name>span,html .jc-boxwrap>div.jc-lbl,html .tj-card .k,html .stk-card .k,html .cj-panel .k,html .meta .k,html .tsm-row>span:first-child{
  text-transform:uppercase;letter-spacing:.05em;font-size:10px;font-weight:700;color:var(--lbl)
}
html .jc-boxwrap>div.jc-lbl{font-size:11px;letter-spacing:.08em;color:var(--lbl)}
html .jc-boxwrap>div.jc-lbl button{text-transform:none;letter-spacing:0}

/* ---------- 5. tables and grids: grey head with the 2px orange rule, fine row lines, tinted hover, bold subtotals ---------- */
html .tbl th{background:var(--th-bg);color:var(--th-text);border-bottom:2px solid var(--accent);height:32px;letter-spacing:.07em}
html .tbl thead tr:first-child th:first-child,html .tbl thead tr:first-child th:last-child{border-radius:0}
html .tbl td{border-bottom:1px solid var(--row-line)}
html .tbl tbody tr:hover td{background:var(--tint)}
html .tbl tr.sub td,html .tbl tfoot td,html .tbl tr.total td{font-weight:700;background:var(--sub-bg)}
html .tbl tr.grand td,html .totals .grand,html .jc-tot.grand{background:var(--accent);color:var(--on-accent)}
html th .tsm-lbl{color:var(--th-text)}
html .tsm-gt{background:var(--surface-2);border:1px solid var(--box-line);border-radius:var(--r-sm);padding:6px 8px}
html .tsm-chip{border-radius:var(--r-sm)}
html .tsm-count{color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;font-weight:700}
html .frow th{background:var(--th-bg);border-bottom:1px solid var(--row-line)}

/* ---------- 6. buttons and tabs ---------- */
html .btn{border-radius:var(--r-sm);background:var(--surface-1);border-color:var(--line-strong);font-weight:600}
html .btn:hover:not(:disabled):not(.primary):not(.bad){border-color:var(--accent);background:var(--tint);color:var(--text)}
html .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
html .btn.primary:hover{background:var(--accent-press);border-color:var(--accent-press)}
html .btn.navy{background:var(--band-bg);color:var(--band-text);border-color:var(--band-bg)}
html .btn.ghost{background:transparent;border-color:transparent}
html .btn.ghost:hover:not(:disabled){background:var(--tint);border-color:transparent}
html .tabs{border-bottom:2px solid var(--box-line)}
html .tabs button{border-radius:0;height:40px;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;font-weight:600}
html .tabs button.on{color:var(--text);box-shadow:inset 0 -3px 0 var(--accent)}
html .tab-ind{display:none}
html .jc-tabs button{border-radius:var(--r-xs) var(--r-xs) 0 0;text-transform:uppercase;letter-spacing:.03em;font-size:10.5px;font-weight:600;padding:5px 8px;background:var(--surface-2);border-color:var(--box-line)}
html .jc-tabs button.on{background:var(--surface-1);border-top:3px solid var(--accent)}
html .jc-tabrow{background:var(--surface-2);border-bottom:1px solid var(--box-line)}
html .seg{border-radius:var(--r-sm);padding:2px;background:var(--surface-3);border:1px solid var(--box-line)}
html .seg button,html .seg .ws-sb{border-radius:var(--r-xs);text-transform:uppercase;letter-spacing:.05em;font-size:10.5px;font-weight:600}
html .seg button.on,html .ws-seg .ws-sb.on{background:var(--band-bg);color:var(--band-text)}
html .ws-seg{border-radius:var(--r-sm)}
html .iconbtn,html .cmdk-btn{border-radius:var(--r-sm)}

/* ---------- 7. job card: charcoal top bar, orange header rule, charcoal bottom bar with the live value in orange ---------- */
html .jc.jcm,html .jc.jci{border-radius:var(--r-md)}
html .jc-top{background:var(--band-bg);color:var(--band-text);border-bottom:3px solid var(--accent)}
html .jc-top .btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:var(--band-text);border-radius:var(--r-sm);text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:600}
html .jc-top .btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}
html .jc-jump{text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;font-weight:700;color:var(--band-accent)}
html .jc-jump input{border-radius:var(--r-sm);border-color:var(--accent)}
html .jc-sep{background:rgba(255,255,255,.22)}
html .jc-head{background:var(--surface-1);border-bottom:3px solid var(--accent)}
html .jc-head h2{letter-spacing:.02em}
html .jc-head .jc-no{color:var(--lbl)}
html .jc-strip{background:var(--surface-2);border-bottom:1px solid var(--box-line)}
html .jc-box{border-radius:var(--r-xs);border-color:var(--box-line)}
html .jc-foot{background:var(--band-bg);color:var(--band-text);border-top:3px solid var(--accent)}
html .jc-foot .btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:var(--band-text);text-transform:uppercase;letter-spacing:.05em;font-size:11px}
html .jc-foot .btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}
html .jc-foot .jc-tot{color:var(--band-text)}
html .jc-foot .jc-tot b{color:var(--band-accent);font-size:17px}
html .jc-foot .jc-tot small,html .jc-foot .jc-text3{color:rgba(255,255,255,.72)}
html .jc-livebar .jc-live{border:1px solid var(--box-line);border-radius:var(--r-xs);background:var(--surface-2)}
html .jc-livebar .jc-live b{color:var(--lbl)}
html .jc-tabs button small{background:var(--accent);color:#fff}
html .jc-warnbox,html .jc-offbar{background:var(--tint);border-left:4px solid var(--accent);border-radius:0}

/* ---------- 8. notes, alerts, toasts: tinted with the orange left rule ---------- */
html .note,html .tsm-note,html .warn,html .jc-note,html .st-note{background:var(--tint);border:0;border-left:4px solid var(--accent);border-radius:0;color:var(--text)}
html .warn{color:var(--text)}
html .toast{border-radius:var(--r-sm);border-left:4px solid var(--accent)}
html .toast.err{border-left-color:var(--bad)}
html .chip{border-radius:var(--r-xs)}
html .empty{border-style:solid;border-color:var(--box-line);background:var(--surface-2)}

/* ---------- 9. totals, invoice-style figures ---------- */
html .totals{border-top:1px solid var(--box-line);padding-top:10px;text-transform:uppercase;letter-spacing:.06em;font-size:11px}
html .totals b{font-size:15px;letter-spacing:0;color:var(--text)}
html .totals .grand,html .cj-foot .tot{background:var(--accent);color:var(--on-accent);padding:4px 10px;border-radius:var(--r-xs);letter-spacing:.02em}
html .cj-foot{background:var(--surface-2);border-top:2px solid var(--accent)}

/* ---------- 10. forms, dialogs, pop-ups ---------- */
html input,html select,html textarea{border-radius:var(--r-sm);border-color:var(--line-strong)}
html input:focus,html select:focus,html textarea:focus{border-color:var(--accent);box-shadow:0 0 0 var(--focus-w) var(--accent-soft)}
html .fbar,html .stk-bar,html .cj-bar,html .st-head{padding:6px 8px;background:var(--surface-2);border:1px solid var(--box-line);border-radius:var(--r-sm)}
html .st-head{padding:0;background:transparent;border:0}
html .modal{border:1px solid var(--box-line)}
html .tsm-pop{border-radius:var(--r-md)}
html .gsr{border-top:1px solid var(--box-line)}

/* ---------- 11. login: orange bar on the card ---------- */
html .login .lg{border-top:6px solid var(--accent);border-radius:var(--r-md)}
html .login .lg h1,html .login .lg h2{letter-spacing:.08em;text-transform:uppercase;font-size:14px}

/* ---------- 12. tech app (phone): the same bands and borders, bigger ---------- */
html .fa-card>h3,html .tj-card>h3{font-size:12px}
html .tj-bar{border-top:3px solid var(--accent)}
html .tj-chip{border-radius:var(--r-xs)}
html .vbar{border-top:3px solid var(--accent)}

/* ---------- 13. wall display + print keep their own look ---------- */
@media print{html .view>h1:first-child,html .card>h3,html .modal>h3{background:#fff!important;color:#000!important;border-left:0;border-bottom:2px solid #000}}

/* ---------- 14. screens with their own headers (stock, dashboard widgets, SLA, noticeboard, tech, contracts, triggers) ---------- */
html .stk-hd,html .tj-h,html .tdy-head,html .st-head{align-items:center}
html .stk-hd h1,html .tj-h h1,html .tj-h h2,html .tdy-head h1,html .ws-title,html .view .wsh h1,html .view>div>h1:first-child{
  display:inline-flex;align-items:center;gap:8px;background:var(--band-bg);color:var(--band-text);text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:15px;padding:9px 12px;margin:0;border-radius:var(--r-xs);border-left:5px solid var(--accent)
}
html .stk-hd{margin-bottom:12px}
html .stk-hd .muted,html .stk-hd small{display:block;flex-basis:100%;margin-top:4px}
html .sla-card,html .nba,html .tdy-card{border-color:var(--box-line);box-shadow:none;border-radius:var(--r-md)}
html .sla-card>h3,html .nba-h,html .cc-notes-h,html .cc-strip-h{background:var(--band-bg);color:var(--band-text);text-transform:uppercase;letter-spacing:.09em;font-weight:700;font-size:11.5px;padding:7px 10px;border-radius:var(--r-xs) var(--r-xs) 0 0;border-bottom:2px solid var(--accent);display:flex;align-items:center;gap:8px}
html .sla-card>h3{margin:-14px -16px 10px}
html .nba-h{font-size:12px;letter-spacing:.09em;margin:-16px -16px 12px;padding:8px 12px}
html .sla-card>h3 .btn,html .sla-card>h3 .pill{text-transform:none;letter-spacing:0}
/* pill-style sub tabs (stock, contracts, triggers, admin) become TSM tabs: flat, uppercase, orange underline on the active one */
html .stk-tabs,html .cj-tabs,html .st-tabs,html .ad-tabs{gap:0;border-bottom:2px solid var(--box-line);padding-bottom:0;margin-bottom:12px}
html .stk-tabs a,html .cj-tabs a,html .cj-tabs button,html .st-tabs a,html .st-tabs button,html .ad-tabs a,html .ad-tabs button{border-radius:0;border:0;background:transparent;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;font-weight:600;padding:9px 12px;color:var(--text-2)}
html .stk-tabs a:hover,html .cj-tabs a:hover,html .cj-tabs button:hover{background:var(--tint);color:var(--text)}
html .stk-tabs a.on,html .cj-tabs a.on,html .cj-tabs button.on,html .st-tabs .on,html .ad-tabs .on{background:transparent;color:var(--text);box-shadow:inset 0 -3px 0 var(--accent);border-color:transparent}
/* generic "k / v" rows used by many detail screens */
html .kv>div>span:first-child,html .kv>div>small,html .meta td.k,html .tsm-row>label{text-transform:uppercase;letter-spacing:.05em;font-size:10px;font-weight:700;color:var(--lbl)}
html .jobhead h1{letter-spacing:.02em}
html .jobhead::before{display:none}
html .jobhead{border-top:4px solid var(--accent)}

/* ---------- 15. headers that sit beside a description (stock, tech) + tech app sub-tabs as TSM tabs ---------- */
html .stk-hd{flex-wrap:wrap}
html .stk-hd h1{flex:1 1 100%}
html .fa h1{display:inline-flex;align-items:center;gap:8px;background:var(--band-bg);color:var(--band-text);text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:14px;padding:8px 12px;margin:0;border-radius:var(--r-xs);border-left:5px solid var(--accent)}
html .tj-top button{border-radius:var(--r-sm)}
html .tj-sub{gap:0;border-bottom:2px solid var(--box-line);padding-bottom:0;margin-bottom:8px}
html .tj-sub button{border-radius:0;border:0;background:transparent;text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:700;color:var(--text-2);padding:0 14px;min-height:44px}
html .tj-sub button.on{background:transparent;color:var(--text);box-shadow:inset 0 -3px 0 var(--accent)}

/* ---------- 16. page titles on screens with their own header bars (route checklist, docs/THEME.md) ---------- */
html .view>h1,html .view>h2:first-of-type,html .ws-bar h1.ws-h,html .ax-head h1,html .mg-hd h1,html .ins-hd h1,html .nb-top h1,html .cj-bar h2,html .ai-top h1,html .wb-top h1,html .sla>h1,html .ah>h1,html .dnb-page>h1{
  display:inline-flex;align-items:center;gap:8px;background:var(--band-bg);color:var(--band-text);text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:14px;line-height:1.2;padding:8px 12px;border-radius:var(--r-xs);border-left:5px solid var(--accent)
}
html .view>h1{display:flex;margin:0 0 14px}
html .view>h1 small,html .view>h1 .muted,html .view>h2:first-of-type small,html .mg-hd h1 small,html .ins-hd h1 small,html .nb-top h1 small,html .ai-top h1 small{color:var(--band-accent);text-transform:none;letter-spacing:0;font-weight:500}
html .ws-bar h1.ws-h{font-size:12px;padding:6px 10px;margin:0}
/* tables outside the shared .tbl grid: same grey head with the orange rule (header rows only; row-header th in tbody stay as they are) */
html .view table thead th{background:var(--th-bg);color:var(--th-text);border-bottom:2px solid var(--accent);text-transform:uppercase;letter-spacing:.06em;font-size:11px}
html .view table tbody td{border-bottom-color:var(--row-line)}
/* sub-tab rows drawn as pills (egress, xero, AI, triggers) become flat TSM tabs */
html .eg-sub,html .xr-sub,html .ai-sub,html .st-sub{display:flex;gap:0;border-bottom:2px solid var(--box-line);padding-bottom:0;margin-bottom:12px;flex-wrap:wrap}
html .eg-sub button,html .xr-sub button,html .ai-sub button,html .st-sub button{border-radius:0;border:0;background:transparent;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;font-weight:600;padding:9px 12px;color:var(--text-2);box-shadow:none}
html .eg-sub button:hover,html .xr-sub button:hover,html .ai-sub button:hover,html .st-sub button:hover{background:var(--tint);color:var(--text)}
html .eg-sub button.on,html .xr-sub button.on,html .ai-sub button.on,html .st-sub button.on{background:transparent;color:var(--text);box-shadow:inset 0 -3px 0 var(--accent)}
/* chip-like buttons (saved views, period pickers, AI examples): squarer, silver border, orange when on */
html .sv-bar .sv,html .mg-hd .ac button,html .ai-chips-eg button,html .mg-tt .mg-btn{border-radius:var(--r-sm);border-color:var(--box-line)}
html .sv-bar .sv.on,html .mg-hd .ac button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* management tiles: action links as small square buttons; tiles get the silver box and an orange top rule */
html .mg-tile .ac button,html .mg-btn{border-radius:var(--r-sm);border-color:var(--box-line);text-transform:uppercase;letter-spacing:.04em;font-size:10.5px;font-weight:600}
html .mg-tile{border-color:var(--box-line);border-top:3px solid var(--accent);border-radius:var(--r-sm);box-shadow:none}

/* ---------- 17. muted text inside any banded title stays readable (light orange on charcoal) ---------- */
html .fa h1 small,html .fa h1 .muted,html .stk-hd h1 small,html .stk-hd h1 .muted,html .ax-head h1 small,html .wb-top h1 small,html .cj-bar h2 small,html .ws-bar h1 small,html .sla>h1 small,html .ah>h1 small,html .dnb-page>h1 small,html .tj-h h1 small,html .tdy-head h1 small,html .view>div>h1:first-child small,html .view>h1 span:not(.pill):not(.chip):not(.badge),html .view>h2:first-of-type span:not(.pill):not(.chip):not(.badge){color:var(--band-accent);text-transform:none;letter-spacing:0;font-weight:500}
html .fa-hello h1{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
html .fa-hello h1 small{font-size:12px;display:block}

/* ---------- 18. morning-wave screens (codes, employees, invoicing, timesheets, checklists, memo scripts) ---------- */
html .cd-head>h2,html .iv-head>h2,html .ts-head>h2,html .ck-head>h2,html .ms-head>h2{display:inline-flex;align-items:center;gap:8px;background:var(--band-bg);color:var(--band-text);text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:14px;line-height:1.2;padding:8px 12px;margin:0;border-radius:var(--r-xs);border-left:5px solid var(--accent)}
html .cd-head>h2 small,html .iv-head>h2 small,html .ts-head>h2 small,html .ck-head>h2 small,html .ms-head>h2 small,html .cd-head>h2 span,html .iv-head>h2 span,html .ts-head>h2 span,html .ck-head>h2 span,html .ms-head>h2 span{color:var(--band-accent);text-transform:none;letter-spacing:0;font-weight:500}
html .cd-sub,html .ts-sub,html .ck-sub,html .iv-sub{display:flex;gap:0;border-bottom:2px solid var(--box-line);padding-bottom:0;margin-bottom:12px;flex-wrap:wrap}
html .cd-sub>button,html .ts-sub>button,html .ck-sub>button,html .iv-sub>button{border-radius:0;border:0;background:transparent;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;font-weight:600;padding:9px 12px;color:var(--text-2);box-shadow:none}
html .cd-sub>button:hover,html .ts-sub>button:hover,html .ck-sub>button:hover,html .iv-sub>button:hover{background:var(--tint);color:var(--text)}
html .cd-sub>button.on,html .ts-sub>button.on,html .ck-sub>button.on,html .iv-sub>button.on{background:transparent;color:var(--text);box-shadow:inset 0 -3px 0 var(--accent)}

/* ===== 19. ALL CAPS headings & tabs (Stream CAPS, Ryan 3 Nov 2026: "ALL CAPS ALL HEADINGS AND TABS ALL THE TIME").
   On by default; a user can switch it off in Appearance (html[data-caps="off"]). Headings, tab strips, sub-tabs, segments,
   view chips, grid column headers, side-nav items + section labels, tech-app headers and bottom nav. Body text, inputs,
   notes/memos and grid cell data are NOT touched. ===== */
html:not([data-caps="off"]) :is(h1,h2,h3,h4,h5,h6,th,[role="tab"],[role="tablist"] > *,.tabs button,.tabs a,.jc-tabs button,.jc-tabrow button,
  [class$="-tabs"] > button,[class$="-tabs"] > a,[class$="-tabs"] button,[class$="-tabrow"] button,[class$="-seg"] > button,[class$="-seg"] > a,
  [class$="-sub"] > button,[class$="-sub"] > a,.seg > button,.seg > a,.sv,.sv-l,.nav-g,.side nav a,.side nav summary,.navx-seg button,.navx-sw a,
  .bottom a,.bottom button,.ap-t,.ap-h b,.card-title,.panel-title,.ws-ph,.tj-h,.fa-card > h3,.stat span){
  text-transform:uppercase;letter-spacing:.05em
}
/* keep secondary text inside a heading (customer names, counts, hints) in its own case where the skin already said so */
html:not([data-caps="off"]) :is(h1,h2,h3,h4) :is(small,.muted,.vh-sub,input,select,textarea){text-transform:none;letter-spacing:0}
html:not([data-caps="off"]) :is(input,select,textarea,option,.jc-memos,.memo,.note-body,td){text-transform:none}