/* ==================================================================================================================
   CASPIAN STANDARD (V245, owner 11/11/2026) - the ONE file for how data is shown: the three text colours, the type sizes, the status chip, the page band,
   panels, spec rows, the progress strip, tabs and the table standard. Loaded LAST (templates/ui/head.html components()), after caspian-ui.css and the
   compatibility layer, so nothing after it restyles a table, a chip, a header or a label. Fonts and the older token names live in static/ui/tokens.css and
   read the names defined here. Approved references: hbl-page.html (band, progress, panels, spec rows) and data-display-standard.html (tables, chips).
   Printed documents (.document-canvas, .doc-sheet, .document-panel, .print-sheet, .jl-sheet) are never touched.
   ================================================================================================================== */

/* ---- 1. tokens */
:root{
  --t1:#0f172a; --t2:#334155; --t3:#475569; --t-ph:#64748b;      /* values and titles / labels and headers / small meta; --t-ph is for placeholders ONLY */
  --g-bg:#dcfce7; --g-fg:#14532d; --g-bd:#86efac;                 /* done */
  --a-bg:#fef3c7; --a-fg:#78350f; --a-bd:#fcd34d;                 /* waiting */
  --r-bg:#fee2e2; --r-fg:#7f1d1d; --r-bd:#fca5a5;                 /* missing / error */
  --b-bg:#dbeafe; --b-fg:#1e3a8a; --b-bd:#93c5fd;                 /* ready / information */
  --n-bg:#f1f5f9; --n-fg:#334155; --n-bd:#cbd5e1;                 /* not started */
  --bad-k:#b91c1c; --done:#15803d;
  --band:#0f2744; --band-2:#16365c; --band-fg:#ffffff; --band-m:#c3d0e2; --band-link:#cfe0ff;
  --row-need:color-mix(in srgb,var(--a-bg) 45%,var(--surface));
}
:root[data-theme="dark"]{
  --t1:#f1f5f9; --t2:#d3dae4; --t3:#aab4c3; --t-ph:#8a95a6;
  --g-bg:#12361f; --g-fg:#bbf7d0; --g-bd:#1f6b3a; --a-bg:#3a2c0b; --a-fg:#fde68a; --a-bd:#7a5a12; --r-bg:#3d1515; --r-fg:#fecaca; --r-bd:#7f2626;
  --b-bg:#152a52; --b-fg:#bfdbfe; --b-bd:#2c4f8f; --n-bg:#222a36; --n-fg:#d3dae4; --n-bd:#3a4456; --bad-k:#f87171; --done:#4ade80;
  --band:#0e2240; --band-2:#173158; --band-m:#9fb3cf;
}

/* ---- 2. type: body 14px, numbers tabular everywhere, no monospace in the interface */
body:not(#_){font-family:var(--font);font-size:14px;color:var(--t1);font-variant-numeric:tabular-nums;background:var(--bg)}
body:not(#_) main :is(code,kbd,samp,.mono,.id,.num,.ltr-id):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *,.jl-sheet *,pre *)){font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
body:not(#_) :is(input,textarea)::placeholder{color:var(--t-ph);opacity:1}
/* label and value: the same size; the label is medium --t2, the value semibold --t1 (700 is for the page title and panel titles only) */
body:not(#_) main :is(.cs-k,.ui-oc-kv dt,.kv dt,dl.spec dt):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){font-size:14px;font-weight:500;color:var(--t2)}
body:not(#_) main :is(.cs-v,.ui-oc-kv dd,.kv dd,dl.spec dd):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){font-size:14px;font-weight:600;color:var(--t1)}
body:not(#_) main :is(label,.ui-field>label,.field>label,.form-label):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *,.page-band *)){color:var(--t2);font-weight:500}

/* ---- 3. status chip: tinted background + dark text + 1px border, the full word, never cut. One component for every chip family of the system. */
body:not(#_) :is(.cs-chip,.pill,.badge,.ui-badge,.status-pill,.direction-pill,.aic-chip,.aix-chip,.aix-badge,.rw-chip,.rw-pill,.rw-st,.st,.dd73-provider-chip,.c-chip,.l141-chip,.csp-badge-pill,.container-risk-badge,.cf-tag,.aix-stage,.hm-chip):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *)){
  display:inline-flex;align-items:center;gap:5px;box-sizing:border-box;height:22px;min-height:22px;padding:0 9px;border:1px solid var(--n-bd);border-radius:11px;background:var(--n-bg);color:var(--n-fg);
  font-family:var(--font);font-size:12px;font-weight:600;line-height:20px;white-space:nowrap;overflow:visible;text-overflow:clip;max-width:none;text-decoration:none;flex:none}
body:not(#_) :is(.cs-chip,.pill,.badge,.ui-badge,.status-pill,.direction-pill,.aic-chip,.aix-chip,.aix-badge,.rw-chip,.rw-pill,.rw-st,.st,.dd73-provider-chip,.c-chip,.l141-chip,.container-risk-badge,.cf-tag,.aix-stage):not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *,.cs-tagged))::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:none;-webkit-mask:none;mask:none}
body:not(#_) :is(.pill:has(> .ui-icon),.ui-badge:has(> .ui-icon))::before{display:none}
body:not(#_) :is(.cs-chip.g,.pill-ok,.pill.good,.pill.ok,.pill.success,.ui-badge-good,.status-pill.success,.status-pill.status-paid,.status-pill.status-posted,.status-pill.status-approved,.status-pill.status-issued,.aic-chip.ok,.aix-chip.ok,.rw-chip.ok,.rw-chip.good,.rw-pill.good,.rw-st.good,.st.good,.l141-chip.ok,.l141-chip.is-good,.dd73-provider-chip.provider-agent){background:var(--g-bg);color:var(--g-fg);border-color:var(--g-bd)}
body:not(#_) :is(.cs-chip.a,.pill-warn,.pill.warn,.pill.warning,.ui-badge-warn,.status-pill.warning,.status-pill.status-draft,.status-pill.status-part_paid,.aic-chip.warn,.aix-chip.warn,.aix-badge.s-NEEDS_REVIEW,.rw-chip.warn,.rw-pill.warn,.rw-st.warn,.st.warn,.l141-chip.warn,.l141-chip.is-warn){background:var(--a-bg);color:var(--a-fg);border-color:var(--a-bd)}
body:not(#_) :is(.cs-chip.r,.pill-bad,.pill.crit,.pill.bad,.pill.danger,.ui-badge-crit,.status-pill.danger,.status-pill.status-cancelled,.status-pill.status-void,.aic-chip.bad,.aix-chip.bad,.rw-chip.bad,.rw-chip.crit,.rw-pill.crit,.rw-st.crit,.st.crit,.l141-chip.bad,.l141-chip.is-bad){background:var(--r-bg);color:var(--r-fg);border-color:var(--r-bd)}
body:not(#_) :is(.cs-chip.b,.pill-info,.pill.info,.ui-badge-info,.aic-chip.info,.aix-chip.info,.rw-chip.info,.rw-pill.info,.rw-st.info,.st.info,.l141-chip.info,.dd73-provider-chip.provider-carrier){background:var(--b-bg);color:var(--b-fg);border-color:var(--b-bd)}
body:not(#_) :is(.aix-chips,.rw-chips,.c-status){background:transparent;border:0;padding:0;height:auto;min-height:0;display:inline-flex;flex-wrap:wrap;gap:6px;border-radius:0}
body:not(#_) :is(.aix-chips,.rw-chips,.c-status)::before{display:none}
/* a tag: a small square label beside a value (mode, "bill-to", SOC owner) - not a status */
body:not(#_) .cs-tag{display:inline-block;font-size:11.5px;font-weight:600;line-height:1.5;padding:1px 7px;border-radius:5px;background:var(--n-bg);color:var(--n-fg);border:1px solid var(--n-bd);white-space:nowrap;vertical-align:1px}
body:not(#_) .cs-tag.r{background:var(--r-bg);color:var(--r-fg);border-color:var(--r-bd)}
body:not(#_) .cs-tag.b{background:var(--b-bg);color:var(--b-fg);border-color:var(--b-bd)}
body:not(#_) .cs-tag.a{background:var(--a-bg);color:var(--a-fg);border-color:var(--a-bd)}

/* ---- 4. page band: the ONE page header (templates/ui/page_band.html). Navy, white text, not sticky; row 2 = up to six facts. Logical properties: RTL mirrors. */
body:not(#_) .page-band{position:static;display:block;margin:0 0 16px;padding:0;border:0;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,var(--band),var(--band-2));color:var(--band-fg);box-shadow:none}
body:not(#_) .page-band .pb-top{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:flex-start;justify-content:space-between;padding:14px 22px 16px}
body:not(#_) .page-band .pb-id{min-width:0;flex:1 1 380px}
body:not(#_) .page-band .pb-crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;font-weight:500;color:var(--band-m);margin:0 0 6px;letter-spacing:0;text-transform:none}
body:not(#_) .page-band .pb-crumb a{color:var(--band-link);font-weight:500;text-decoration:none}
body:not(#_) .page-band .pb-crumb a:hover{text-decoration:underline}
body:not(#_) .page-band .pb-ttl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
body:not(#_) .page-band h1{margin:0;font-family:var(--font);font-size:22px;line-height:1.3;font-weight:700;color:var(--band-fg);letter-spacing:-.01em;overflow-wrap:anywhere}
body:not(#_) .page-band .pb-name{font-size:14px;font-weight:500;color:var(--band-m)}
body:not(#_) .page-band .pb-desc{margin:4px 0 0;font-size:13.5px;color:var(--band-m);max-width:90ch}
body:not(#_) .page-band .pb-extra{margin:8px 0 0;color:var(--band-m);font-size:12.5px}
body:not(#_) .page-band .pb-extra a{color:var(--band-link)}
/* chips on the band: the status is solid, the others are glass */
body:not(#_) .page-band :is(.cs-chip,.pill,.badge,.ui-badge,.status-pill,.rw-chip,.rw-pill,.rw-st,.st,.l141-chip,.aix-chip,.aix-badge,.cs-tag){height:24px;border-radius:12px;padding:0 10px;background:rgba(255,255,255,.12);color:#e6eefb;border:1px solid rgba(255,255,255,.22)}
body:not(#_) .page-band :is(.cs-chip.g,.pill-ok,.pill.good,.pill.ok,.ui-badge-good,.status-pill.success,.rw-chip.good,.rw-chip.ok,.rw-pill.good,.rw-st.good,.st.good,.l141-chip.ok,.aix-chip.ok){background:#15803d;color:#fff;border-color:#15803d}
body:not(#_) .page-band :is(.cs-chip.a,.pill-warn,.pill.warn,.ui-badge-warn,.status-pill.warning,.rw-chip.warn,.rw-pill.warn,.rw-st.warn,.st.warn,.l141-chip.warn,.aix-chip.warn){background:#fcd34d;color:#422006;border-color:#fcd34d}
body:not(#_) .page-band :is(.cs-chip.r,.pill-bad,.pill.crit,.pill.bad,.ui-badge-crit,.status-pill.danger,.rw-chip.crit,.rw-chip.bad,.rw-pill.crit,.rw-st.crit,.st.crit,.l141-chip.bad,.aix-chip.bad){background:#dc2626;color:#fff;border-color:#dc2626}
/* actions: every button on the band is outlined white; the ONE primary is the white button */
body:not(#_) .page-band .pb-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;margin:0}
body:not(#_) .page-band .pb-acts :is(form,.rw-inline,.rw-act){display:inline-flex;margin:0;gap:8px;align-items:center}
body:not(#_) .page-band .pb-acts :is(a.btn,button,.btn,.rw-btn,.l141-btn,.cf-btn,.aix-btn,summary.btn,summary.rw-btn):not(:where(.ui-menu-list *,.rw-menu *)){height:30px;min-height:30px;padding:0 14px;border-radius:7px;font-size:13px;font-weight:600;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:none}
body:not(#_) .page-band .pb-acts :is(a.btn,button,.btn,.rw-btn,.l141-btn,.cf-btn,.aix-btn,summary.btn,summary.rw-btn):not(:where(.ui-menu-list *,.rw-menu *)):hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6);color:#fff}
body:not(#_) .page-band .pb-acts :is(.primary,.btn-primary,.is-primary,.btn:not(.secondary,.ghost,.quiet,.danger):first-of-type):not(:where(.ui-menu-list *,.rw-menu *,.secondary)){background:#fff;color:var(--band);border-color:#fff}
body:not(#_) .page-band .pb-acts :is(.primary,.btn-primary,.is-primary,.btn:not(.secondary,.ghost,.quiet,.danger):first-of-type):not(:where(.ui-menu-list *,.rw-menu *,.secondary)):hover{background:#e6eefb;color:var(--band);border-color:#e6eefb}
body:not(#_) .page-band .pb-acts :is(button,.btn,.rw-btn):is(:disabled,[aria-disabled=true]){opacity:.55}
body:not(#_) .page-band .pb-acts .rw-why{color:var(--band-m);font-size:12px}
body:not(#_) .page-band .pb-acts .ui-icon{color:currentColor}
/* the menus opened from the band are ordinary light menus */
body:not(#_) .page-band :is(.ui-menu-list,.rw-menu){color:var(--t1)}
body:not(#_) .page-band{overflow:visible}
body:not(#_) .page-band .pb-facts{border-end-start-radius:14px;border-end-end-radius:14px}
/* facts strip */
body:not(#_) .page-band .pb-facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding:0;border-top:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.14)}
body:not(#_) .page-band .pb-facts[data-n="1"]{grid-template-columns:minmax(0,1fr)}
body:not(#_) .page-band .pb-facts[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
body:not(#_) .page-band .pb-facts[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
body:not(#_) .page-band .pb-facts[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
body:not(#_) .page-band .pb-facts[data-n="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
body:not(#_) .page-band .pb-facts>div{padding:11px 22px;border-inline-end:1px solid rgba(255,255,255,.1);min-width:0}
body:not(#_) .page-band .pb-facts>div:last-child{border-inline-end:0}
body:not(#_) .page-band .pb-fl{margin:0;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--band-m)}
body:not(#_) [dir=rtl] .page-band .pb-fl,body:not(#_) .page-band:lang(ar) .pb-fl{letter-spacing:0;font-size:12px}
body:not(#_) .page-band .pb-fv{margin:3px 0 0;font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(#_) .page-band .pb-fv a{color:var(--band-link);font-weight:600;text-decoration:none}
body:not(#_) .page-band .pb-fs{margin:0;font-size:12px;color:var(--band-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1000px){body:not(#_) .page-band .pb-facts{grid-template-columns:repeat(3,minmax(0,1fr))}body:not(#_) .page-band .pb-facts>div{border-bottom:1px solid rgba(255,255,255,.1)}}
@media print{body:not(#_) .page-band{background:none;color:#000;border:1px solid #999}body:not(#_) .page-band :is(h1,.pb-fv,.pb-fl,.pb-fs,.pb-desc,.pb-crumb){color:#000}body:not(#_) .page-band .pb-acts{display:none}}

/* ---- 5. panels: every section is a white card with a title bar; 16px between panels; nothing floats outside a panel */
body:not(#_) .cs-panel{box-sizing:border-box;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:none;margin:0;padding:0;min-width:0}
body:not(#_) .cs-phd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;min-height:22px;padding:10px 18px;background:var(--surface-2);border-bottom:1px solid var(--line);margin:0}
body:not(#_) .cs-phd :is(b,h2,h3,.cs-pt){margin:0;font-size:14.5px;font-weight:700;color:var(--t1);line-height:1.4}
body:not(#_) .cs-phd :is(span,small).cs-pm,body:not(#_) .cs-phd>span:not(.cs-pt,.cs-chip,.cs-tag){font-size:12.5px;color:var(--t2);font-weight:500}
body:not(#_) .cs-pbody{padding:14px 18px}
body:not(#_) .cs-stack{display:grid;gap:16px;min-width:0}
body:not(#_) .cs-stack>*{min-width:0;margin:0}
body:not(#_) .cs-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
body:not(#_) .cs-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
body:not(#_) .cs-body>*{min-width:0}
@media (max-width:1100px){body:not(#_) .cs-body{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){body:not(#_) .cs-cols{grid-template-columns:minmax(0,1fr)}}

/* ---- 6. spec rows: label 130px | value, a rule between rows (replaces floating label/value columns) */
body:not(#_) .cs-spec{display:grid;margin:0;padding:0}
body:not(#_) .cs-r{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;align-items:center;margin:0;padding:10px 18px;border-bottom:1px solid var(--line-2)}
body:not(#_) .cs-r:last-child{border-bottom:0}
body:not(#_) .cs-spec.wide .cs-r{grid-template-columns:170px minmax(0,1fr)}
body:not(#_) .cs-k{margin:0;line-height:1.4}
body:not(#_) .cs-v{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;line-height:1.4;overflow-wrap:anywhere}
body:not(#_) .cs-v .cs-mut{font-weight:500;color:var(--t2)}
body:not(#_) .cs-rel .cs-r{grid-template-columns:minmax(0,1fr) auto}
/* a spec grid of two columns of rows inside one panel (wide panels) */
body:not(#_) .cs-spec.c2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
body:not(#_) .cs-spec.c2>.cs-r:nth-child(odd){border-inline-end:1px solid var(--line-2)}
body:not(#_) .cs-spec.c2>.cs-r:nth-last-child(-n+2):nth-child(odd),body:not(#_) .cs-spec.c2>.cs-r:last-child{border-bottom:0}
@media (max-width:900px){body:not(#_) .cs-spec.c2{grid-template-columns:minmax(0,1fr)}}

/* ---- 7. progress: done = green tick, not in scope = dashed, current = blue ring */
body:not(#_) .cs-prog{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 22px 12px}
body:not(#_) .cs-prog-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 12px}
body:not(#_) .cs-prog-h b{font-size:14.5px;font-weight:700;color:var(--t1)}
body:not(#_) .cs-prog-h span{font-size:12.5px;color:var(--t2)}
body:not(#_) .cs-steps{display:flex;margin:0;padding:0;list-style:none}
body:not(#_) .cs-st{flex:1;position:relative;min-width:0;padding-block-start:24px;padding-inline-end:6px}
body:not(#_) .cs-st::before{content:"";position:absolute;top:8px;inset-inline-start:18px;inset-inline-end:0;height:3px;border-radius:2px;background:var(--line-2)}
body:not(#_) .cs-st.done::before{background:var(--done)}
body:not(#_) .cs-st:last-child::before{display:none}
body:not(#_) .cs-st>i{position:absolute;top:0;inset-inline-start:0;box-sizing:border-box;width:18px;height:18px;border-radius:50%;background:var(--surface);border:2px solid var(--n-bd);display:grid;place-items:center}
body:not(#_) .cs-st.done>i{background:var(--done);border-color:var(--done)}
body:not(#_) .cs-st.done>i::after{content:"";width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
body:not(#_) .cs-st.skip>i{border-style:dashed}
body:not(#_) .cs-st.now>i{border:3px solid var(--brand)}
body:not(#_) .cs-st.stop>i{border:3px solid var(--bad-k)}
body:not(#_) .cs-st :is(b,a.cs-st-l){display:block;font-size:12.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
body:not(#_) .cs-st small{display:block;font-size:12px;color:var(--t2)}
body:not(#_) .cs-st.skip :is(b,a.cs-st-l){color:var(--t3);font-weight:500}
body:not(#_) .cs-st.now :is(b,a.cs-st-l){color:var(--brand)}
body:not(#_) .cs-st.stop :is(b,a.cs-st-l){color:var(--bad-k)}

/* ---- 8. tabs: one white bar, the current tab underlined */
body:not(#_) .cs-tabs{display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 10px;overflow-x:auto;margin:0;position:static}
body:not(#_) .cs-tabs>:is(a,button){padding:12px 12px 10px;font-size:13.5px;font-weight:600;color:var(--t2);background:none;border:0;border-bottom:3px solid transparent;border-radius:0;white-space:nowrap;text-decoration:none;height:auto;min-height:0;box-shadow:none}
body:not(#_) .cs-tabs>:is([aria-current],[aria-selected=true],.on,.active,.is-active){color:var(--brand);border-bottom-color:var(--brand)}
body:not(#_) .cs-tabs>* :is(em,.rw-count,.cs-n){font-style:normal;font-size:11.5px;font-weight:600;background:var(--n-bg);color:var(--n-fg);border-radius:9px;padding:1px 7px;margin-inline-start:5px}

/* ---- 9. timeline (key dates) and the amber callout */
body:not(#_) .cs-tl{padding:6px 18px 12px;margin:0;list-style:none}
body:not(#_) .cs-ti{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-2)}
body:not(#_) .cs-ti:last-child{border-bottom:0}
body:not(#_) .cs-dot{width:10px;height:10px;border-radius:50%;background:var(--done);margin:auto}
body:not(#_) .cs-dot.o{box-sizing:border-box;background:var(--surface);border:2px solid var(--brand)}
body:not(#_) .cs-dot.n{box-sizing:border-box;background:var(--surface);border:2px dashed var(--n-bd)}
body:not(#_) .cs-ti b{font-size:13px;font-weight:600;color:var(--t1)}
body:not(#_) .cs-ti small{display:block;font-size:12px;color:var(--t2)}
body:not(#_) .cs-ti .cs-d{font-size:12.5px;font-weight:500;color:var(--t1);white-space:nowrap}
body:not(#_) .cs-callout{margin:0 18px 16px;padding:12px 14px;border-radius:10px;background:var(--a-bg);border:1px solid var(--a-bd);color:var(--a-fg);font-size:12.5px;display:grid;gap:10px;justify-items:start}
body:not(#_) .cs-bar{display:inline-block;width:110px;height:7px;border-radius:4px;background:var(--line-2);overflow:hidden;vertical-align:middle}
body:not(#_) .cs-bar>i{display:block;height:100%;background:var(--done)}
body:not(#_) .cs-bar.a>i{background:#d97706}
body:not(#_) .cs-bar.r>i{background:var(--bad-k)}

/* ---- 10. THE TABLE STANDARD - every table of the interface. Columns by content (never table-layout:fixed), names wrap, a chip or a document number is never
   cut, no cell paints over its neighbour (a table wider than its card scrolls inside .cs-tw / .table-wrap). Tables that are entry grids (they hold inputs)
   keep their own cell padding (the 28px grid rules) but share the header, type and colours. */
body:not(#_) main table:not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *,.jl-rows,.jl-sheet *,.cs-raw)){font-family:var(--font);border-collapse:separate;border-spacing:0;table-layout:auto}
body:not(#_) main table:not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *,.jl-rows,.jl-sheet *,.cs-raw)) th{background:var(--surface-2);color:var(--t2);font-size:12px;font-weight:600;text-align:start;border-block-end:1px solid var(--line);padding:9px 14px;white-space:nowrap;letter-spacing:0;text-transform:none}
body:not(#_) main table:not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *,.jl-rows,.jl-sheet *,.cs-raw)) td{border-block-end:1px solid var(--line-2);font-size:13.5px;color:var(--t1);vertical-align:top}
body:not(#_) main table:not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *,.jl-rows,.jl-sheet *,.cs-raw)):not(:has(td :is(input:not([type=hidden],[type=checkbox],[type=radio]),select,textarea))) td{padding:10px 14px;max-width:320px;height:auto;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}
body:not(#_) main table:not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *,.jl-rows,.jl-sheet *,.cs-raw)) tbody tr:last-child td{border-block-end:0}
body:not(#_) main table:not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *,.jl-rows,.jl-sheet *,.cs-raw)) tbody tr:hover td{background:var(--brand-soft)}
body:not(#_) main table:not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *,.jl-rows,.jl-sheet *)) td :is(bdi,.id,.mono,.num,.doc,.nw,.cs-chip,.cs-tag,time){white-space:nowrap}
/* two ids: the cell rule above carries a long :not() chain, a number or a .nw cell must still win over its white-space:normal */
body:not(#_):not(#__) main td:is(.num,.n,.amount,.money),body:not(#_):not(#__) main th:is(.num,.n,.amount,.money){text-align:end;white-space:nowrap}
body:not(#_):not(#__) main td.nw{white-space:nowrap}
/* a long number-column header takes two lines instead of making the table scroll (House B/L D&D tab at 1366) */
body:not(#_):not(#__) main .ft-table thead th{white-space:normal;vertical-align:bottom}
/* two lines in a cell: the first is the value, the second never smaller than 12.5px, never lighter than --t3 */
body:not(#_) main td .l1{font-weight:600;color:var(--t1)}
body:not(#_) main td :is(.l2,small,.sub,.muted,.rw-sub){font-size:12.5px;color:var(--t3);font-weight:400}
body:not(#_) main td .l2{margin-top:2px}
/* the ONE row colour: this row needs action (amber, a bar at the start) */
body:not(#_) main table tbody tr:is(.need,.is-need,.cs-need)>td{background:var(--row-need)}
body:not(#_) main table tbody tr:is(.need,.is-need,.cs-need)>td:first-child{box-shadow:inset 3px 0 0 var(--a-bd)}
body:not(#_) [dir=rtl] main table tbody tr:is(.need,.is-need,.cs-need)>td:first-child{box-shadow:inset -3px 0 0 var(--a-bd)}
/* a group heading row */
body:not(#_) main table tr.cs-grp>td{background:var(--surface-2);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--t2);padding:7px 14px}
body:not(#_) [dir=rtl] main table tr.cs-grp>td{letter-spacing:0;font-size:12.5px}
/* the scrolling wrapper and the links in a table (no browser-default underlined links) */
body:not(#_) :is(.cs-tw,.table-wrap,.v44-table){max-width:100%;overflow-x:auto}
body:not(#_) main table:not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *,.jl-sheet *)) td a:not(.btn,.rw-btn,.cs-btn,.l141-btn,.cf-btn){color:var(--brand);font-weight:600;text-decoration:none}
body:not(#_) main table td a:not(.btn,.rw-btn,.cs-btn,.l141-btn,.cf-btn):hover{text-decoration:underline}
/* the 28px action button of a row: filled = the next action, .o = secondary */
body:not(#_) .cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;height:28px;min-height:28px;padding:0 12px;border-radius:7px;font-family:var(--font);font-size:12.5px;font-weight:600;white-space:nowrap;border:1px solid var(--brand);background:var(--brand);color:var(--brand-fg);cursor:pointer;text-decoration:none}
body:not(#_) .cs-btn.o{background:var(--surface);color:var(--brand);border-color:var(--b-bd)}
body:not(#_) .cs-btn:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--brand-fg);text-decoration:none}
body:not(#_) .cs-btn.o:hover{background:var(--brand-soft);color:var(--brand);border-color:var(--brand)}

/* ---- 11. filters row and the search field: 32px at the start for the icon, on every page */
body:not(#_) .cs-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
body:not(#_) .cs-filters .cs-count{margin-inline-start:auto;color:var(--t2);font-size:12.5px}
body:not(#_) .cs-search{position:relative;flex:0 1 340px;min-width:200px}
body:not(#_) .cs-search>:is(svg,.ui-icon){position:absolute;inset-inline-start:10px;top:50%;width:14px;height:14px;margin-top:-7px;color:var(--t3);stroke:currentColor;pointer-events:none}
body:not(#_) .cs-search>input{width:100%;box-sizing:border-box;padding-inline-start:32px}
body:not(#_) input[type=search]{padding-inline-start:32px}

/* ---- 12. the sender line of an AI Inbox case and a file name with its icon */
body:not(#_) .cs-sender{display:flex;flex-wrap:wrap;gap:4px 16px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--surface-2);font-size:13px;color:var(--t2)}
body:not(#_) .cs-sender b{color:var(--t1)}
body:not(#_) .cs-file{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--t2)}
body:not(#_) .cs-file :is(svg,.ui-icon){width:13px;height:13px;color:var(--t3);flex:none}
/* band values are never cut ("CSS-2026-0000…" is forbidden): a long value wraps; links on the band stay light */
body:not(#_) main .page-band :is(.pb-fv,.pb-fs){white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
body:not(#_) main .page-band :is(.pb-fv,.pb-fs,.pb-crumb,.pb-extra,.pb-name,.pb-desc) a:not(.btn,.rw-btn){color:var(--band-link)}

/* ---- 13. shared rules asked for by the record pages (V245 integration) */
body:not(#_) .cs-spec.c2>.cs-r.full{grid-column:1/-1}
body:not(#_) main .page-band a bdi{color:inherit}
body:not(#_) main .muted:not(:where(.document-canvas *,.doc-sheet *,.document-panel *,.print-sheet *,.page-band *)){color:var(--t3)}
/* a stage label is never cut: with many stages it wraps to two lines */
body:not(#_) .cs-st :is(b,a.cs-st-l){white-space:normal;overflow:visible;text-overflow:clip}
/* related records: number at the start, chip at the end; a long chip drops to its own line instead of colliding */
body:not(#_) .cs-rel .cs-r{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 10px}
body:not(#_) .cs-rel .cs-r>dd{margin:0;margin-inline-start:auto}
/* free text isolated in <bdi> (audit values, file names) wraps; document numbers stay whole */
body:not(#_) main table td bdi.cs-wrap{white-space:normal;overflow-wrap:anywhere}
body:not(#_) .lr .d .ref{display:inline;max-width:none;overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere}
/* a small explanatory line inside a panel */
body:not(#_) .cs-note{margin:0;font-size:12.5px;font-weight:400;line-height:1.5;color:var(--t2)}
body:not(#_) .cs-pbody>.cs-note+*,body:not(#_) .cs-pbody>*+.cs-note{margin-top:10px}
/* the route arrow on the band is light like the rest of the band */
body:not(#_) main .page-band .arr{color:var(--band-m)}
/* search fields: the control rules of the compatibility layer are heavier, so this one carries a second id weight */
body:not(#_):not(#__) :is(input[type=search],.cs-search>input){padding-inline-start:32px}
/* a filter select is as wide as its words (compat.css leaves a bare select at its 360px maximum) */
body:not(#_) .cs-filters select{width:auto;max-width:240px;flex:0 0 auto}
/* a party name (ui/party.html .pnm-n) inside a table cell wraps to a second line - never an ellipsis */
body:not(#_) main table td .pnm .pnm-n,body:not(#_) main table td .pnm .pnm-n bdi{max-width:none;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}