/* ════════════════════════════════════════════════════════════════════════════════════════════════
   THE SAUL THEME ON EVERY CLASSIC PAGE (owner, 2026-09-30): "the approved design must apply to EVERY
   page — inner pages too — and everything built in the future must use it. Nothing may disappear or
   change function." docs/SAUL_UI.md §2 "The theme on every page".

   HOW. The render seam (app._render → _saul_theme) links this file right before </head> of every
   page it renders (not the printable pages, not a page that already extends _saul_shell.html, and
   not when the company switch `ui.shell` is "classic") and marks <html data-saul-theme>. Nothing here
   applies without that mark, so the switch still puts every page back exactly as it was.

   ONE MAPPING, NOT SIXTY RE-WRITES. The classic pages are standalone templates whose own <style>
   blocks read the Atelier tokens (atrium.css: --bg --card --text --muted --accent --display …).
   §1 redefines those token names with the design's values — light AND dark (the classic bodies had no
   dark theme), orange AND black — at a specificity (`:root[data-saul-theme]`, 0-2-0) that beats a
   page's own `:root{…}`. §2–§9 then re-shape the shared vocabulary (type, the department bar, cards,
   KPI tiles, tables, buttons, chips, banners, forms, drawers, empty states) to the kit's look.

   SPECIFICITY RULE. Component rules sit behind `:where(:root[data-saul-theme])`, so they weigh
   exactly what the page's own base rule weighs and win only by coming later: a page's VARIANT
   (`.btn.danger`, `.kpi.alarm`, an inline style) still wins, so no meaning a page gave a control is
   repainted away. Only type (§2) and a few decorative resets are stronger, on purpose.

   NO NEW CLASSES. This file only re-skins classes that already exist; new pages use the kit
   (saul-ui.css, _saul_ui.html) — qa/gates/saul_theme.py enforces both.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── §1 · tokens: the design's values under the classic names ──────────────────────────────────── */
:root[data-saul-theme]{
  color-scheme:light;
  /* the design's own tokens — the same values as saul-ui.css, so a rule here can say what it means */
  --bg:#F4F2EE; --rail:#EDEAE4; --surface:#FFFFFF; --sunken:rgba(246,243,238,.72); --hover:rgba(255,255,255,.82); --device:#1B1916;
  --line:rgba(28,25,21,.10); --line-soft:rgba(28,25,21,.06); --line-strong:rgba(28,25,21,.18);
  --ink:#1C1915; --ink-2:#4F4941; --ink-3:#625B51; --ink-4:#B2AA9E;
  --accent:#C25B38; --accent-2:#A8472A; --accent-ink:#FFF8F3; --accent-soft:rgba(194,91,56,.10);
  --act:#B4522F; --act-hover:#9C4426; --act-ink:#FFF8F3;
  --act-sh:0 0 0 1px rgba(255,166,92,.5),0 0 18px -2px rgba(240,120,36,.6);
  --btn-glow:0 0 0 1px rgba(255,255,255,.55) inset,0 0 13px -3px rgba(240,120,36,.4),0 6px 18px -8px rgba(240,120,36,.62);
  --btn-dark:linear-gradient(rgba(20,12,6,.075),rgba(20,12,6,.075)); --btn-dark-hi:rgba(20,10,4,.17); --focus:#9C3E1E;
  --tile-sheen:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0) 46%);
  --tile-hover:0 0 0 1px rgba(255,186,128,.45),0 14px 38px -14px rgba(240,120,36,.55);
  --pos:#12703F; --pos-bg:#E6F3EC; --pos-line:#B6DCC7; --pos-fill:#2E9D63;
  --neg:#C01818; --neg-bg:rgba(224,38,31,.09); --neg-line:rgba(224,38,31,.30); --neg-fill:#E0261F;
  --neg-1:#F2A09A; --neg-2:#E0261F; --neg-3:#A51212;
  --warn:#8A5400; --warn-bg:#FCF2DA; --warn-line:#ECD08F; --warn-fill:#E2A11C;
  --info:#2355C2; --info-bg:rgba(35,85,194,.09); --info-line:rgba(35,85,194,.26); --info-fill:#3D6FE0;
  --lock:#4F5C6E; --lock-bg:rgba(79,92,110,.09); --lock-line:rgba(79,92,110,.24); --lock-fill:#8793A3;
  --bar:#C9C2B6; --bar-2:rgba(28,25,21,.07);
  --scrim:rgba(28,25,21,.38);
  --sh-1:0 1px 2px rgba(28,25,21,.05);
  --sh-2:0 1px 2px rgba(28,25,21,.05),0 14px 34px -18px rgba(28,25,21,.22);
  --sh-3:0 30px 70px -24px rgba(28,25,21,.42);
  /* the glass */
  --r:22px; --blur:28px; --sat:118%;
  --panel:rgba(255,255,255,.8); --glass:rgba(255,255,255,.62); --float:rgba(255,255,255,.9); --chrome:rgba(246,244,240,.72);
  --row-hover:rgba(120,60,30,.045);
  --edge:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 1px 0 rgba(255,255,255,.95);
  --lift:0 1px 1px rgba(28,25,21,.04),0 16px 36px -20px rgba(120,60,30,.24);
  /* status light: the corner glow behind the icon chip and the short top edge */
  --pos-glow:rgba(46,157,99,.15); --neg-glow:rgba(224,38,31,.11); --warn-glow:rgba(226,161,28,.2); --info-glow:rgba(61,111,224,.11);
  --pos-edge:rgba(46,157,99,.85); --neg-edge:rgba(224,38,31,.85); --warn-edge:rgba(226,161,28,.9); --info-edge:rgba(61,111,224,.7);
  /* the ambient light of the page (orange, never rose) and the ember that spills out of the rail */
  --amb-base:linear-gradient(180deg,#F6F4F0,#EFEBE5);
  --amb-1:rgba(228,112,30,.46); --amb-2:rgba(240,142,40,.38); --amb-3:rgba(206,199,187,.6); --amb-4:rgba(180,82,47,.12);
  --spill-1:rgba(230,118,40,.24); --spill-2:rgba(230,118,40,.07);
  /* the smoked rail — the same in both themes: it is the one dark object on a light page */
  --smoke:linear-gradient(180deg,rgba(16,14,13,.88),rgba(24,21,19,.86) 45%,rgba(26,20,16,.9));
  --smoke-flat:rgba(20,18,16,.88);
  --ember-line:rgba(255,168,92,.9); --ember-1:rgba(240,118,36,.5); --ember-2:rgba(228,108,32,.16); --ember-3:rgba(214,96,30,.32); --ember-4:rgba(214,96,30,.08);
  --ember-mark:#FF9A55; --ember-ic:#FFA566;
  --grain-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .92 .2 0 0 0 -.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --f-display:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter','IBM Plex Sans Arabic',system-ui,sans-serif;
  --f-ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','IBM Plex Sans Arabic',system-ui,'Segoe UI',sans-serif;
  --f-ar:'IBM Plex Sans Arabic',-apple-system,system-ui,'Segoe UI',Tahoma,sans-serif;
  --f-mono:ui-monospace,'SF Mono','IBM Plex Mono',Menlo,Consolas,monospace;
  --mark:#C25B38; --mark-ink:#FFF8F3; --focus:#C25B38; --act-soft:rgba(180,82,47,.10); --act-line:rgba(180,82,47,.34);

  /* the classic (Atelier) names, bridged — every classic <style> block reads these */
  --bg-2:var(--rail); --card:var(--surface); --raised:var(--surface); --inset:var(--sunken);
  --text:var(--ink); --muted:var(--ink-3); --faint:var(--ink-4);
  --accent:var(--act); --accent-bright:var(--act-hover); --accent-ink:var(--act-ink);
  --accent-soft:var(--act-soft); --accent-line:var(--act-line);
  --teal:var(--info); --teal-soft:var(--info-bg);
  --green:var(--pos); --green-soft:var(--pos-bg);
  --amber:var(--warn); --amber-soft:var(--warn-bg);
  --red:var(--neg); --grey:var(--lock);
  --display:var(--f-display); --body:var(--f-ui);
  --shadow:var(--sh-1); --card-radius:var(--r); --grain:none;
}
:root[data-saul-theme][lang="ar"]{--body:var(--f-ar)}
@media (prefers-color-scheme: dark){:root[data-saul-theme]:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#131210; --rail:#191816; --surface:#1F1D1A; --sunken:rgba(242,237,230,.045); --hover:rgba(242,237,230,.07); --device:#050505;
  --line:rgba(242,237,230,.11); --line-soft:rgba(242,237,230,.065); --line-strong:rgba(242,237,230,.2);
  --ink:#F4EFE8; --ink-2:#D9D1C6; --ink-3:#B3AA9E; --ink-4:#6F685E;
  --accent:#EB8157; --accent-2:#F29A76; --accent-ink:#1B120D; --accent-soft:rgba(235,129,87,.14);
  --act:#EB8157; --act-hover:#F29A76; --act-ink:#1B120D;
  --act-sh:0 0 0 1px rgba(255,170,100,.4),0 0 20px -2px rgba(240,120,36,.7);
  --btn-glow:0 0 0 1px rgba(255,255,255,.05) inset,0 0 14px -3px rgba(240,120,36,.5),0 6px 18px -8px rgba(240,120,36,.7);
  --btn-dark:linear-gradient(rgba(0,0,0,.26),rgba(0,0,0,.26)); --btn-dark-hi:rgba(0,0,0,.26); --focus:#FFB27A;
  --tile-sheen:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,0) 46%);
  --tile-hover:0 0 0 1px rgba(255,170,100,.3),0 14px 38px -14px rgba(240,120,36,.55);
  --pos:#5FCF8E; --pos-bg:rgba(95,207,142,.12); --pos-line:rgba(95,207,142,.32); --pos-fill:#3DB574;
  --neg:#FF4D4D; --neg-bg:rgba(255,77,77,.13); --neg-line:rgba(255,77,77,.36); --neg-fill:#E5262A;
  --neg-1:#7A2A2A; --neg-2:#E5262A; --neg-3:#FF4D4D;
  --warn:#F5C66A; --warn-bg:rgba(245,198,106,.12); --warn-line:rgba(245,198,106,.32); --warn-fill:#E0A536;
  --info:#A6C0FF; --info-bg:rgba(143,176,255,.12); --info-line:rgba(143,176,255,.32); --info-fill:#6B92F2;
  --lock:#AAB4C2; --lock-bg:rgba(170,180,194,.10); --lock-line:rgba(170,180,194,.28); --lock-fill:#6E7888;
  --bar:#4F4A42; --bar-2:rgba(242,237,230,.08);
  --scrim:rgba(0,0,0,.62);
  --sh-1:0 1px 0 rgba(255,255,255,.02);
  --sh-2:0 1px 0 rgba(255,255,255,.02),0 16px 40px -20px rgba(0,0,0,.75);
  --sh-3:0 30px 80px -20px rgba(0,0,0,.85);
  --panel:rgba(34,31,28,.72); --glass:rgba(242,237,230,.055); --float:rgba(31,28,25,.92); --chrome:rgba(21,19,17,.74);
  --row-hover:rgba(255,236,220,.04);
  --edge:inset 0 0 0 1px rgba(255,236,220,.075),inset 0 1px 0 rgba(255,240,228,.09);
  --lift:0 1px 1px rgba(0,0,0,.3),0 18px 40px -22px rgba(0,0,0,.85);
  --pos-glow:rgba(61,181,116,.15); --neg-glow:rgba(229,38,42,.17); --warn-glow:rgba(224,165,54,.16); --info-glow:rgba(107,146,242,.14);
  --pos-edge:rgba(95,207,142,.8); --neg-edge:rgba(255,77,77,.85); --warn-edge:rgba(245,198,106,.85); --info-edge:rgba(166,192,255,.7);
  --amb-base:linear-gradient(180deg,#161412,#110F0E);
  --amb-1:rgba(214,96,30,.2); --amb-2:rgba(230,120,40,.12); --amb-3:rgba(64,54,46,.5); --amb-4:rgba(180,82,47,.08);
  --spill-1:rgba(230,118,40,.16); --spill-2:rgba(230,118,40,.045);
  --smoke:linear-gradient(180deg,rgba(9,8,7,.9),rgba(15,13,12,.88) 45%,rgba(20,15,12,.92));
  --smoke-flat:rgba(13,12,11,.9);
  --mark:#EB8157; --mark-ink:#1B120D; --focus:#EB8157; --act-soft:rgba(235,129,87,.14); --act-line:rgba(235,129,87,.40);
}}
:root[data-saul-theme][data-theme="dark"]{
  color-scheme:dark;
  --bg:#131210; --rail:#191816; --surface:#1F1D1A; --sunken:rgba(242,237,230,.045); --hover:rgba(242,237,230,.07); --device:#050505;
  --line:rgba(242,237,230,.11); --line-soft:rgba(242,237,230,.065); --line-strong:rgba(242,237,230,.2);
  --ink:#F4EFE8; --ink-2:#D9D1C6; --ink-3:#B3AA9E; --ink-4:#6F685E;
  --accent:#EB8157; --accent-2:#F29A76; --accent-ink:#1B120D; --accent-soft:rgba(235,129,87,.14);
  --act:#EB8157; --act-hover:#F29A76; --act-ink:#1B120D;
  --act-sh:0 0 0 1px rgba(255,170,100,.4),0 0 20px -2px rgba(240,120,36,.7);
  --btn-glow:0 0 0 1px rgba(255,255,255,.05) inset,0 0 14px -3px rgba(240,120,36,.5),0 6px 18px -8px rgba(240,120,36,.7);
  --btn-dark:linear-gradient(rgba(0,0,0,.26),rgba(0,0,0,.26)); --btn-dark-hi:rgba(0,0,0,.26); --focus:#FFB27A;
  --tile-sheen:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,0) 46%);
  --tile-hover:0 0 0 1px rgba(255,170,100,.3),0 14px 38px -14px rgba(240,120,36,.55);
  --pos:#5FCF8E; --pos-bg:rgba(95,207,142,.12); --pos-line:rgba(95,207,142,.32); --pos-fill:#3DB574;
  --neg:#FF4D4D; --neg-bg:rgba(255,77,77,.13); --neg-line:rgba(255,77,77,.36); --neg-fill:#E5262A;
  --neg-1:#7A2A2A; --neg-2:#E5262A; --neg-3:#FF4D4D;
  --warn:#F5C66A; --warn-bg:rgba(245,198,106,.12); --warn-line:rgba(245,198,106,.32); --warn-fill:#E0A536;
  --info:#A6C0FF; --info-bg:rgba(143,176,255,.12); --info-line:rgba(143,176,255,.32); --info-fill:#6B92F2;
  --lock:#AAB4C2; --lock-bg:rgba(170,180,194,.10); --lock-line:rgba(170,180,194,.28); --lock-fill:#6E7888;
  --bar:#4F4A42; --bar-2:rgba(242,237,230,.08);
  --scrim:rgba(0,0,0,.62);
  --sh-1:0 1px 0 rgba(255,255,255,.02);
  --sh-2:0 1px 0 rgba(255,255,255,.02),0 16px 40px -20px rgba(0,0,0,.75);
  --sh-3:0 30px 80px -20px rgba(0,0,0,.85);
  --panel:rgba(34,31,28,.72); --glass:rgba(242,237,230,.055); --float:rgba(31,28,25,.92); --chrome:rgba(21,19,17,.74);
  --row-hover:rgba(255,236,220,.04);
  --edge:inset 0 0 0 1px rgba(255,236,220,.075),inset 0 1px 0 rgba(255,240,228,.09);
  --lift:0 1px 1px rgba(0,0,0,.3),0 18px 40px -22px rgba(0,0,0,.85);
  --pos-glow:rgba(61,181,116,.15); --neg-glow:rgba(229,38,42,.17); --warn-glow:rgba(224,165,54,.16); --info-glow:rgba(107,146,242,.14);
  --pos-edge:rgba(95,207,142,.8); --neg-edge:rgba(255,77,77,.85); --warn-edge:rgba(245,198,106,.85); --info-edge:rgba(166,192,255,.7);
  --amb-base:linear-gradient(180deg,#161412,#110F0E);
  --amb-1:rgba(214,96,30,.2); --amb-2:rgba(230,120,40,.12); --amb-3:rgba(64,54,46,.5); --amb-4:rgba(180,82,47,.08);
  --spill-1:rgba(230,118,40,.16); --spill-2:rgba(230,118,40,.045);
  --smoke:linear-gradient(180deg,rgba(9,8,7,.9),rgba(15,13,12,.88) 45%,rgba(20,15,12,.92));
  --smoke-flat:rgba(13,12,11,.9);
  --mark:#EB8157; --mark-ink:#1B120D; --focus:#EB8157; --act-soft:rgba(235,129,87,.14); --act-line:rgba(235,129,87,.40);
}
/* BUTTON COLOUR = BLACK — after both dark blocks (saul-ui.css learned why) */
:root[data-saul-theme][data-accent="black"]{--act:var(--ink);--act-hover:var(--ink-2);--act-ink:var(--surface);
  --act-soft:rgba(127,120,110,.14);--act-line:var(--line-strong);
  --act-sh:0 0 0 1px rgba(255,255,255,.12),0 0 18px -2px rgba(240,120,36,.55)}
/* no backdrop-filter: the glass turns (nearly) opaque */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root[data-saul-theme]{--panel:#FFFCF9;--float:#FFFFFF;--chrome:#F6F3EF}
  :root[data-saul-theme][data-theme="dark"]{--panel:#221F1C;--float:#221F1C;--chrome:#181614}
  @media (prefers-color-scheme: dark){:root[data-saul-theme]:not([data-theme="light"]){--panel:#221F1C;--float:#221F1C;--chrome:#181614}}
}

/* ── §2 · type and the page ────────────────────────────────────────────────────────────────────── */
:root[data-saul-theme] body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:root[data-saul-theme][lang="ar"] body{font-family:var(--f-ar)}
/* THE LIGHT OF THE PAGE (Smoke·Ember). The classic pages' paper grain is not part of the design; in its
   place, one fixed, unblurred, unanimated layer carries the soft orange ambient glow, and a second the
   ember that spills out of the rail into the content's lower-start corner. Both sit under everything. */
:root[data-saul-theme] body::before,:root[data-saul-theme] body::after{content:"";position:fixed;inset:0;height:auto;pointer-events:none;
  z-index:-1;opacity:1;mix-blend-mode:normal;animation:none;background-image:none}
:root[data-saul-theme] body::before{background:
  radial-gradient(32vmax 26vmax at calc(6vw + 32vmax) 4vmax,var(--amb-1),transparent),
  radial-gradient(29vmax 24vmax at calc(100vw + 18vmax - 29vmax) calc(26vh + 24vmax),var(--amb-2),transparent),
  radial-gradient(30vmax 22vmax at calc(22vw + 30vmax) calc(100vh + 28vmax - 22vmax),var(--amb-3),transparent),
  radial-gradient(20vmax 15vmax at calc(36vw + 20vmax) calc(30vh + 15vmax),var(--amb-4),transparent),
  var(--amb-base)!important}
:root[data-saul-theme] body::after{display:none}
@media (min-width:761px){
  :root[data-saul-theme][data-saul-rail] body::after{display:block;inset:auto 0 0 0;height:52vh;
    background:radial-gradient(min(620px,60vw) 100% at 252px 100%,var(--spill-1),var(--spill-2) 45%,transparent 72%)!important}
  :root[data-saul-theme][data-saul-rail][dir="rtl"] body::after{background:radial-gradient(min(620px,60vw) 100% at calc(100% - 252px) 100%,var(--spill-1),var(--spill-2) 45%,transparent 72%)!important}
}
/* the reader folded the rail away (owner, 2026-10-01): no rail, no ember spilling out of it */
:root[data-saul-theme][data-saul-rail][data-rail="closed"] body::after{display:none}
@media (min-width:761px) and (max-width:900px){
  :root[data-saul-theme][data-saul-rail] body::after{background:radial-gradient(60vw 100% at 92px 100%,var(--spill-1),var(--spill-2) 45%,transparent 72%)!important}
  :root[data-saul-theme][data-saul-rail][dir="rtl"] body::after{background:radial-gradient(60vw 100% at calc(100% - 92px) 100%,var(--spill-1),var(--spill-2) 45%,transparent 72%)!important}
}
:where(:root[data-saul-theme]) :where(button,input,select,textarea):where(:not(.sc *)){font-family:inherit}
html:where([data-saul-theme])[lang="ar"] :is(button,input,select,textarea){font-family:var(--f-ar)}
:root[data-saul-theme] :is(h1,h2,h3,h4){font-family:var(--f-display);text-wrap:balance}
:root[data-saul-theme][lang="ar"] :is(h1,h2,h3,h4){letter-spacing:0}
/* the page title: one per page, the kit's `.h1` (the classic heroes ran 30–84px bold) */
:root[data-saul-theme] h1:not(.sc *){font-weight:500;font-size:28px;line-height:1.24;letter-spacing:-.024em}
:root[data-saul-theme][lang="ar"] h1:not(.sc *){font-family:var(--f-ar);letter-spacing:0;line-height:1.5}
:root[data-saul-theme] :is(h2,h3):not(.sc *){font-weight:600;letter-spacing:-.012em}
:where(:root[data-saul-theme]) :is(.phero,.dhero,.hero,.head,.ph) p{color:var(--ink-2)}
:where(:root[data-saul-theme]) :is(.phero,.dhero,.hero){margin-top:26px}
:root[data-saul-theme] .eyebrow{font:600 11px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
:root[data-saul-theme][lang="ar"] .eyebrow{letter-spacing:0;font-size:12px}
:where(:root[data-saul-theme]) a:where(:not([class]):not(.sc *)){color:var(--act-hover);text-decoration-color:var(--act-line);text-underline-offset:2px}
:where(:root[data-saul-theme]) a:where(:not([class]):not(.sc *)):hover{color:var(--act)}
:root[data-saul-theme] :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:where(:root[data-saul-theme]) :is(code,kbd,samp,.mono){font-family:var(--f-mono)}
:where(:root[data-saul-theme]) :is(td,.num,.money,.amount,.amt,[data-num]){font-variant-numeric:tabular-nums lining-nums}
:where(:root[data-saul-theme]) ::selection{background:var(--act-soft)}

/* ── §3 · the classic department bar (atrium .topbar/.brand/.topnav) → the kit's quiet row + tabs ── */
:root[data-saul-theme] .brand .mark{background:linear-gradient(155deg,#D0724A,#B4522F 55%,#93411F);color:#FFF8F3;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 12px -6px rgba(200,80,30,.6);font-weight:650;border-radius:10px}
:root[data-saul-theme] .brand .t{font:650 14.5px/1.15 var(--f-display);letter-spacing:.2em}
:root[data-saul-theme] .brand .s{color:var(--ink-3);font-size:11px;letter-spacing:.09em}
:root[data-saul-theme][lang="ar"] .brand .s{letter-spacing:0}
/* departments: quiet, like the rail's links; the one you are in is lifted, not filled */
:root[data-saul-theme] .topnav{gap:4px 6px}
:root[data-saul-theme] .topnav a{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px;border-radius:9px;
  border:1px solid transparent;background:transparent;color:var(--ink-2);font:500 13px/1.2 var(--f-ui)}
:root[data-saul-theme][lang="ar"] .topnav a{font-family:var(--f-ar)}
:root[data-saul-theme] .topnav a:hover{background:var(--hover);color:var(--ink);border-color:transparent}
:root[data-saul-theme] .topnav a.active,:root[data-saul-theme] .topnav a.active:hover{background:var(--hover);color:var(--ink);
  border-color:transparent;box-shadow:var(--edge),var(--sh-1);font-weight:600}
/* a page's own sections: the kit's tabs — bordered, the selected one in the colour of action */
:root[data-saul-theme] .topnav a.sec{min-height:32px;padding:0 11px;font-size:12.5px;font-weight:500;border-radius:10px;
  border:1px solid var(--line);background:var(--glass);color:var(--ink-2);box-shadow:none}
:root[data-saul-theme] .topnav a.sec:hover{border-color:var(--line-strong);color:var(--ink);background:var(--hover)}
:root[data-saul-theme] .topnav a.sec.active,:root[data-saul-theme] .topnav a.sec.active:hover{background:var(--act);color:var(--act-ink);border-color:transparent;box-shadow:var(--act-sh);font-weight:500}
/* a call to action in the bar (⬆ Import): the accent as an outline, so it never reads as "selected" */
:root[data-saul-theme] .topnav a.go,:root[data-saul-theme] .topnav a.sec.go{background:var(--glass);color:var(--act-hover);border-color:var(--act-line)}
:root[data-saul-theme] .topnav a.go:hover,:root[data-saul-theme] .topnav a.sec.go:hover{background:var(--act-soft);color:var(--act-hover)}
:root[data-saul-theme] .topnav a.go.active{background:var(--act);color:var(--act-ink);border-color:var(--act)}
:root[data-saul-theme] .nvbr{margin:2px 0}
:where(:root[data-saul-theme]) .icbtn{border-radius:11px;background:var(--glass);border-color:var(--line);color:var(--ink-2)}
/* counts use the accent, never red (rule 9) */
:where(:root[data-saul-theme]) .flagcount{background:var(--act);color:var(--act-ink);font-family:var(--f-ui)}

/* ── §4 · cards and the classic KPI tiles ──────────────────────────────────────────────────────── */
/* the surface comes from the token (--card → --surface); a page's own inverted card (HQ's health
   and enter cards paint var(--text)) keeps its inversion in both themes */
/* Smoke·Ember: milky frosted glass (not backdrop-blurred — a card lies on the page's soft light, never
   over text): the translucent panel, a white inner edge instead of a grey border, a warm soft lift */
:where(:root[data-saul-theme]) :is(.card,.tile,.scard,.ncard,.pcard,.panel,.dcard,.rd-card,.acard,.chartcard,.ireq,.rpbox,.dgbox){background:var(--tile-sheen),var(--panel);border-color:transparent;
  border-radius:var(--r);box-shadow:var(--edge),var(--lift);transition:box-shadow .25s,background .2s}
:where(:root[data-saul-theme]) :is(.card,.tile) :is(h2,h3):first-child{font-size:15.5px;font-weight:500}
:root[data-saul-theme] .tile h2{font:600 11px/1.3 var(--f-ui);letter-spacing:.08em;color:var(--ink-3)}
:root[data-saul-theme][lang="ar"] .tile h2{letter-spacing:0;font-size:12px}
/* the design is calm: nothing jumps on hover */
:root[data-saul-theme] :is(.tile,.scard,.ncard,.pcard,.kpi,.card):hover{transform:none}
:root[data-saul-theme] :is(.tile,.scard,.ncard,.pcard,.kpi,.card,.panel,.dcard,.rd-card,.acard,.chartcard):hover{border-color:transparent;box-shadow:var(--edge),var(--tile-hover)}
:root[data-saul-theme] :is(.scard,.ncard,.pcard):hover{background:var(--tile-sheen),var(--hover)}
/* KPI tiles: a white card with an ink figure — colour is kept for meaning, not decoration */
:where(:root[data-saul-theme]) .kpi,
:where(:root[data-saul-theme]) .kpi:is(.bt-rev,.bt-aov,.bt-roas,.bt-stock,.bt-cust,.bt-ship),
:where(:root[data-saul-theme]) .kpi:is(:nth-child(1),:nth-child(2),:nth-child(3),:nth-child(4),:nth-child(5),:nth-child(6)){
  background:var(--tile-sheen),var(--panel);color:var(--ink);border:1px solid transparent;border-radius:20px;box-shadow:var(--edge),var(--lift)}
:where(:root[data-saul-theme]) .kpi::after{display:none}
:where(:root[data-saul-theme]) .kpi::before{opacity:.5}
:where(:root[data-saul-theme]) .kpi .v{font-family:var(--f-display);font-weight:600;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
:where(:root[data-saul-theme]) .kpi .l{color:var(--ink-3)}
:where(:root[data-saul-theme]) .kpi .spark{color:var(--ink-4);opacity:.35}
:where(:root[data-saul-theme]) .kpi.alarm{background:var(--neg-bg);border-color:var(--neg-line)}
:where(:root[data-saul-theme]) .kpi.alarm .v,:where(:root[data-saul-theme]) .kpi.alarm .l{color:var(--neg)}
:where(:root[data-saul-theme]) :is(.scard .big,.scard .h,.nt,.dtitle){font-weight:500}
:where(:root[data-saul-theme]) :is(.scard .ic,.nicon){background:var(--glass);box-shadow:inset 0 0 0 1px var(--line-soft);color:var(--ink-3)}
/* the Commerce ticker: an ink strip, the figures in the accent */
:where(:root[data-saul-theme]) .ticker{box-shadow:none;border-radius:12px}

/* ── §5 · tables — the kit's `table.t`: small-caps headers, quiet rules, tabular figures ─────────── */
:where(:root[data-saul-theme]) th:where(:not(.sc *)){font-family:var(--f-ui);font-weight:600;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-3);border-bottom-color:var(--line)}
:root[data-saul-theme][lang="ar"] th{letter-spacing:0;font-size:11.5px}
:where(:root[data-saul-theme]) td{border-color:var(--line-soft)}
:where(:root[data-saul-theme]) tfoot td{border-top-color:var(--line-strong)}

/* ── §6 · buttons — the kit's `.btn` / `.btn.pri` / `.btn.ghost` ──────────────────────────────── */
:where(:root[data-saul-theme]) .btn{border-radius:10px;font-family:var(--f-ui);font-weight:500;letter-spacing:0}
:where(:root[data-saul-theme]) .btn:not(.primary):not(.pri):not(.go):not(.danger):not(.ghost){background:var(--glass);border-color:var(--line);color:var(--ink);box-shadow:var(--btn-glow)}
:where(:root[data-saul-theme]) .btn:not(.primary):not(.pri):not(.go):not(.danger):not(.ghost):hover{background:var(--btn-dark),var(--hover);border-color:var(--line-strong)}
:where(:root[data-saul-theme]) :is(.btn.primary,.btn.pri,.btn.go){background:var(--act);border-color:transparent;color:var(--act-ink);box-shadow:var(--act-sh)}
:where(:root[data-saul-theme]) :is(.btn.primary,.btn.pri,.btn.go):hover{background:linear-gradient(var(--btn-dark-hi),var(--btn-dark-hi)),var(--act);border-color:transparent}
:where(:root[data-saul-theme]) .btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
:where(:root[data-saul-theme]) .btn.danger{color:var(--neg);border-color:var(--neg-line);background:var(--glass);box-shadow:var(--btn-glow)}
:where(:root[data-saul-theme]) .btn.danger:hover{background:var(--neg-bg)}
:where(:root[data-saul-theme]) :is(.rcgo,button.act){border-radius:10px;background:var(--act);color:var(--act-ink);box-shadow:var(--act-sh)}
:where(:root[data-saul-theme]) :is(.rcgo,button.act):hover{background:linear-gradient(var(--btn-dark-hi),var(--btn-dark-hi)),var(--act)}
:where(:root[data-saul-theme]) .mini{border-radius:8px;font-weight:500}
:where(:root[data-saul-theme]) .mini:hover{background:var(--btn-dark),var(--hover);color:var(--ink);border-color:var(--ink-4)}
:where(:root[data-saul-theme]) .mini.go{background:var(--act);color:var(--act-ink);border-color:transparent;box-shadow:var(--act-sh)}
:where(:root[data-saul-theme]) .rbtn.on,:where(:root[data-saul-theme]) .rbtn:hover{background:var(--act);color:var(--act-ink)}
/* a button no page styled (the browser's own grey box) gets the kit's secondary button */
:where(:root[data-saul-theme]) button:where(:not([class]):not([style]):not(.sc *)){display:inline-flex;align-items:center;gap:6px;
  min-height:30px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:var(--glass);color:var(--ink);box-shadow:var(--btn-glow);
  font:500 13px/1.2 var(--f-ui);cursor:pointer}
:where(:root[data-saul-theme]) button:where(:not([class]):not([style]):not(.sc *)):hover{background:var(--btn-dark),var(--hover);border-color:var(--line-strong)}
:where(:root[data-saul-theme]) :is(.btn,button)[disabled]{cursor:not-allowed}
/* selected segments and filter tabs: the colour of action (they were ink-filled) */
:where(:root[data-saul-theme]) :is(.seg button.on,.seg a.on,.tabs button.on,.tabs a.on,.tab.on,.tx-types button.on,.kinds button.on,
  .prio-chips button.on,.reasonbar button.on,.ftab.on,.scoperow .chip.on,.chips button.on,.filters button.on){
  background:var(--act);color:var(--act-ink);border-color:transparent;box-shadow:var(--act-sh)}

/* Finance → Setup → "Allow editing past records": the setting is the kit's two-state segmented control, Off | On —
   the same `.seg` the profile menu uses for Language and Negative numbers — drawn here for THAT card only (the id),
   so no other page's own `.seg` moves. The chosen side is `.on` (the colour of action, rule above). */
:where(:root[data-saul-theme] #editPosted) .seg{display:inline-flex;padding:2px;gap:2px;border:1px solid var(--line);border-radius:11px;background:var(--glass)}
:where(:root[data-saul-theme] #editPosted) .seg button{display:inline-flex;align-items:center;min-height:0;height:30px;padding:0 16px;border:0;border-radius:9px;
  background:none;box-shadow:none;color:var(--ink-3);font:500 12.5px/1 var(--f-ui);cursor:pointer;white-space:nowrap}
:where(:root[data-saul-theme] #editPosted) .seg button:not(.on):hover{color:var(--ink);background:var(--btn-dark)}

/* People → Flags pins its selected filter tab by id (1-2-0) */
:root[data-saul-theme] #flags .ftab.on{background:var(--act);color:var(--act-ink);border-color:var(--act)}

/* ── §7 · chips, pills and badges — the five meanings (pos · neg · warn · info · lock) ─────────── */
:where(:root[data-saul-theme]) :is(.pill,.chip,.badge,.tag,.tpill,.custbadge,.ptag,.rbchip){font-family:var(--f-ui);font-weight:600;letter-spacing:.01em}
/* `:is(a,b):is(c,d)` weighs 0-2-0 — exactly a page's own `.pill.ok` — so the later rule (this one) wins */
:where(:root[data-saul-theme]) :is(.pill,.badge,.chip):is(.ok,.good,.done,.paid){background:var(--pos-bg);color:var(--pos)}
:where(:root[data-saul-theme]) :is(.pill,.badge,.chip):is(.low,.warn,.soon,.draft,.pending){background:var(--warn-bg);color:var(--warn)}
:where(:root[data-saul-theme]) :is(.pill,.badge,.chip):is(.out,.bad,.err,.high,.danger,.neg,.overdue){background:var(--neg-bg);color:var(--neg)}
:where(:root[data-saul-theme]) :is(.pill,.badge,.chip):is(.info){background:var(--info-bg);color:var(--info)}
:where(:root[data-saul-theme]) :is(.pill,.badge,.chip):is(.mut,.closed,.locked){background:var(--lock-bg);color:var(--lock)}
/* a COD-risk band: low risk is good news, high risk is the problem */
:where(:root[data-saul-theme]) .custbadge.low{background:var(--pos-bg);color:var(--pos)}
:where(:root[data-saul-theme]) .custbadge.medium{background:var(--warn-bg);color:var(--warn)}
:where(:root[data-saul-theme]) .custbadge.high{background:var(--neg-bg);color:var(--neg)}
/* a transaction's TYPE is not a verdict (rule 2: costs are ink) — only "not posted" is red */
:where(:root[data-saul-theme]) .tpill,:where(:root[data-saul-theme]) .tpill:is(.expense,.bill,.payment,.receipt,.contribution,.draw,.advance){background:var(--sunken);color:var(--ink-2);border:1px solid var(--line)}
:where(:root[data-saul-theme]) .tpill:is(.unposted,.unlinked){background:var(--neg-bg);color:var(--neg);border-color:var(--neg-line)}
:where(:root[data-saul-theme]) .rbchip.bad{border-color:var(--neg-line)}
:where(:root[data-saul-theme]) .rbchip.good{border-color:var(--pos-line)}
:where(:root[data-saul-theme]) .ptag.probation{border-color:var(--warn-line)}
:where(:root[data-saul-theme]) .ptag.on_leave{border-color:var(--info-line)}
:where(:root[data-saul-theme]) .badge-live{color:var(--pos);background:var(--pos-bg)}
:where(:root[data-saul-theme]) .badge-soon{color:var(--ink-3);background:var(--sunken)}
:where(:root[data-saul-theme]) .aging-alert{color:var(--neg);background:var(--neg-bg);border-color:var(--neg-line)}
:where(:root[data-saul-theme]) .alarm.on{color:var(--neg)}

/* ── §8 · banners and notes ────────────────────────────────────────────────────────────────────── */
/* the Rehearsal banner every finance page carries before launch: "needs attention" (amber) */
:root[data-saul-theme] #borBanner{background:var(--warn-bg)!important;border:1px solid var(--warn-line)!important;color:var(--warn)!important;
  border-radius:12px!important;padding:11px 14px!important;font-family:var(--f-ui)}
:root[data-saul-theme] #borBanner a{color:inherit!important;text-decoration:underline;text-underline-offset:2px}
:where(:root[data-saul-theme]) :is(.warnstrip){background:var(--warn-bg);border-color:var(--warn-line)}
:where(:root[data-saul-theme]) .note{background:var(--glass);border-color:var(--line-soft);color:var(--ink-2)}
:where(:root[data-saul-theme]) :is(.hint,.sub,.meta,.muted){color:var(--ink-3)}
/* empty states: centred, quiet */
:where(:root[data-saul-theme]) :is(.empty,.none):where(:not(.sc *)){color:var(--ink-3)}

/* status colours written straight into the markup (style="color:#b23") speak the five meanings, so
   they stay legible on the dark theme (light: the same hue within a shade) */
:root[data-saul-theme] :is([style*="color:#b23"],[style*="color:#B23"],[style*="color:#c0433a"],[style*="color:#a2352b"],[style*="color:#9b2c2c"],
  [style*="color:#b23c2e"],[style*="color:#B23C2E"],[style*="color:#9c2f22"],[style*="color:#991b1b"],[style*="color:#b91c1c"],[style*="color:#a8302a"]):not([style*="background"]){color:var(--neg)!important}
:root[data-saul-theme] :is([style*="color:#1a7f4b"],[style*="color:#166534"],[style*="color:#0f6e56"],[style*="color:#1f8a4c"],[style*="color:#4e6b3a"],
  [style*="color:#256b5d"],[style*="color:#1d9e75"]):not([style*="background"]){color:var(--pos)!important}
:root[data-saul-theme] :is([style*="color:#92400e"],[style*="color:#9a6400"],[style*="color:#8a5a12"],[style*="color:#8a5e12"],[style*="color:#a76"],
  [style*="color:#b5730f"],[style*="color:#8a4b00"],[style*="color:#c2560c"]):not([style*="background"]){color:var(--warn)!important}
:root[data-saul-theme] :is([style*="color:#1f6fa6"],[style*="color:#1e40af"]):not([style*="background"]){color:var(--info)!important}
/* …and the same colours set by a script (el.style.color = '#1a7f4b' is kept as rgb(…)) */
:root[data-saul-theme] :is([style*="color: rgb(187, 34, 51)"],[style*="color: rgb(192, 67, 58)"],[style*="color: rgb(178, 60, 46)"],[style*="color: rgb(162, 53, 43)"]):not([style*="background"]){color:var(--neg)!important}
:root[data-saul-theme] :is([style*="color: rgb(26, 127, 75)"],[style*="color: rgb(22, 101, 52)"],[style*="color: rgb(15, 110, 86)"]):not([style*="background"]){color:var(--pos)!important}
:root[data-saul-theme] :is([style*="color: rgb(146, 64, 14)"],[style*="color: rgb(154, 100, 0)"],[style*="color: rgb(138, 90, 18)"]):not([style*="background"]){color:var(--warn)!important}
:root[data-saul-theme] :is([style*="background:#fef3c7"],[style*="background:#fffbeb"],[style*="background:#FEF3C7"]){background:var(--warn-bg)!important;color:var(--warn)!important;border-color:var(--warn-line)!important}
:root[data-saul-theme] :is([style*="background:#fee2e2"],[style*="background:#fde8e8"],[style*="background:#fef2f2"],[style*="background:#fecaca"]){background:var(--neg-bg)!important;color:var(--neg)!important;border-color:var(--neg-line)!important}
:root[data-saul-theme] :is([style*="background:#dcfce7"],[style*="background:#f0fdf4"]){background:var(--pos-bg)!important;color:var(--pos)!important;border-color:var(--pos-line)!important}
:root[data-saul-theme] [style*="background:#fff;"],:root[data-saul-theme] [style*="background:#fff\""],
:root[data-saul-theme] [style*="background:#ffffff"],:root[data-saul-theme] [style*="background:white"]{background:var(--surface)!important}

/* page classes that wrote a status colour straight in (light-only hex) — said in the five meanings,
   so they hold on the dark theme too */
:where(:root[data-saul-theme]) .impact{background:var(--neg-bg);border-color:var(--neg-line);color:var(--neg)}
:where(:root[data-saul-theme]) .badge.risk{background:var(--neg-bg);color:var(--neg)}
:where(:root[data-saul-theme]) .srow.hirisk{border-inline-start-color:var(--neg-fill)}
:where(:root[data-saul-theme]) .tx-post{color:var(--act-ink);border-radius:10px}
/* a classed button no rule ever drew (People → Flags, "↻ Recompute now") */
:where(:root[data-saul-theme]) .acbtn{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border:1px solid var(--line);
  border-radius:10px;background:var(--glass);color:var(--ink);font:500 12px/1.4 var(--f-ui);cursor:pointer}
/* commerce.css pins `.scard .go` (a card's corner arrow) absolutely; a `.mini.go` BUTTON in a card is
   not that arrow — it overlapped the card's title (Inventory → Items, "+ Product") */
:root[data-saul-theme] .scard button.mini.go{position:static;font-size:12px;top:auto;right:auto}

/* the till (owner, 2026-09-30: colours and type only): "Take payment" is the sell screen's primary action,
   so it is the colour of action (it was a fixed near-black that vanished on the dark theme); the chosen
   way to pay reads on either accent */
:where(:root[data-saul-theme]) .sell{background:var(--act);color:var(--act-ink);box-shadow:var(--act-sh)}
:where(:root[data-saul-theme]) .pay button.on{color:var(--act-ink)}

/* ── §9 · forms ────────────────────────────────────────────────────────────────────────────────── */
:where(:root[data-saul-theme]) :is(input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button])),select,textarea):where(:not(.sc *)){
  background-color:var(--surface);color:var(--ink);border-color:var(--line-strong)}
:where(:root[data-saul-theme]) :is(input,select,textarea):where(:not(.sc *)):focus{border-color:var(--ink-4)}
:where(:root[data-saul-theme]) :is(input,select,textarea)::placeholder{color:var(--ink-4)}
:where(:root[data-saul-theme]) :is(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--act)}
:where(:root[data-saul-theme]) :is(.fi,.field){background:var(--surface);border-color:var(--line-strong)}
:where(:root[data-saul-theme]) :is(.fi,.field):focus{border-color:var(--ink-4);box-shadow:0 0 0 3px var(--act-soft)}
:where(:root[data-saul-theme]) :is(.fl,label.lbl){color:var(--ink-3)}

/* ── §10 · drawers — the classic drawers wait off-screen; their shadow must not leak onto the edge ── */
:root[data-saul-theme] :is(#acd,#jed,#ddd,#sdd):not(.on){box-shadow:none!important;visibility:hidden}
:where(:root[data-saul-theme]) :is(#acd,#jed,#ddd,#sdd){background:var(--surface);border-color:var(--line)}
:where(:root[data-saul-theme]) .drawer:where(:not(.sc)){background:var(--surface);border-color:var(--line);box-shadow:var(--edge),var(--sh-3)}
:where(:root[data-saul-theme]) .drawer-veil{background:var(--scrim)}
:where(:root[data-saul-theme]) :is(.dact){background:var(--surface)}
:where(:root[data-saul-theme]) .dsh{color:var(--ink-3)}
:where(:root[data-saul-theme]) #toast{background:var(--ink);color:var(--surface)}

/* ── §11 · phone ──────────────────────────────────────────────────────────────────────────────── */
@media (max-width:720px){
  :root[data-saul-theme] h1:not(.sc *){font-size:23px}
  :root[data-saul-theme] .topnav a{min-height:30px;padding:0 9px;font-size:12.5px}
  :root[data-saul-theme] .topnav a.sec{font-size:12px}
  /* a table the page already let scroll sideways keeps readable columns instead of squeezing its
     inputs to a few characters (Finance → Journal's entry lines on a phone) */
  :root[data-saul-theme] :is([style*="overflow-x:auto"],[style*="overflow:auto"],.tw,.scroll) > table{min-width:600px}
}
@media print{:root[data-saul-theme]{color-scheme:light}:root[data-saul-theme] body::before,:root[data-saul-theme] body::after{display:none}}

/* ── §9 · BUTTONS & TILES — the one flat glass system (owner, 2026-10-01) ────────────────────────────
   The same tokens as the kit (saul-ui.css): no bevels, no heavy gradients or shadows — a translucent
   fill, a hairline, a warm orange light behind (--act-sh primary, --btn-glow secondary), a soft dark
   light on hover, a clear focus ring. Chips and segmented/filter controls wear it too; tiles are
   frosted glass with a sheen on top and an orange glow on hover. */
:root[data-saul-theme] :is(.seg,.chips button,.filters button,.tabs button,.tabs a,.ftab,.tx-types button,.kinds button,.prio-chips button,.reasonbar button,.scoperow .chip,.rbtn,.acbtn,.icbtn):not(.on){box-shadow:var(--btn-glow)}
:root[data-saul-theme] :is(.chips button,.filters button,.tabs button,.tabs a,.ftab,.tx-types button,.kinds button,.prio-chips button,.reasonbar button,.scoperow .chip,.rbtn,.acbtn,.icbtn,.mini,.btn):hover:not(.on):not(.pri):not(.primary):not(.go){background-image:var(--btn-dark)}
:root[data-saul-theme] :is(.btn,.mini,.rbtn,.acbtn,.icbtn,.rcgo,button.act,.chips button,.filters button,.tabs button,.tabs a,.ftab,.seg button,.seg a,button):focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ════ EMBER GLASS (owner, 2026-10-01; mockup hudz-glass-v7 themes 3 and 2) ═══════════════════════════
   Light = "Ember Glass · Day", dark = "Ember Glass · Dusk". Values only: clear blurry glass (low fill, blur,
   a thin luminous rim, a specular corner), warm orange light shapes on the FIXED page layer behind the
   panels, quiet backing plates under numbers and buttons so text stays AA. Problems are a deep true red
   (never coral or rose) in both themes. Status colour stays in the icon-chip corner and the 2px top edge. */
:root[data-saul-theme]{
  --ink-2:#463F37; --ink-3:#554E45;
  --panel:rgba(255,255,255,.34); --glass:rgba(255,255,255,.5); --float:rgba(255,255,255,.8); --chrome:rgba(250,248,245,.42);
  --hover:rgba(255,255,255,.7); --plate:rgba(255,255,255,.5);
  --edge:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(28,25,21,.05);
  --lift:0 24px 48px -26px rgba(120,60,30,.32),0 1px 2px rgba(28,25,21,.05);
  --spec:radial-gradient(150px 100px at 100% 100%,rgba(255,255,255,.55),transparent 70%),linear-gradient(150deg,rgba(255,255,255,.5),rgba(255,255,255,0) 32%);
  --tile-sheen:var(--spec);
  --blur:24px; --sat:135%;
  --amb-base:linear-gradient(180deg,#F5F2ED,#EEE9E2);
  --amb-1:rgba(228,112,30,.26); --amb-2:rgba(240,142,40,.2); --amb-3:rgba(206,199,187,.5); --amb-4:rgba(180,82,47,.1);
  --shop:.8; --sh1:#FFB347; --sh2:#F27A2A; --sh3:#C9501F; --sq-glow:rgba(242,122,42,.35);
  --neg:#B01010; --neg-bg:rgba(200,20,16,.09); --neg-line:rgba(200,20,16,.32); --neg-fill:#CC1A12;
  --neg-1:#E27068; --neg-2:#CC1A12; --neg-3:#9A0E0E;
  --neg-glow:rgba(200,20,16,.13); --neg-edge:rgba(204,26,18,.9);
}
@media (prefers-color-scheme: dark){:root[data-saul-theme]:not([data-theme="light"]){
  --bg:#211B17;
  --ink:#F5F1EB; --ink-2:#DAD3C9; --ink-3:#C6BEB3;
  --accent:#FF9A55; --act:#EB8157;
  --panel:rgba(38,31,26,.5); --glass:rgba(12,12,14,.42); --float:rgba(42,35,30,.82); --chrome:rgba(34,28,24,.5);
  --hover:rgba(255,255,255,.1); --plate:rgba(12,12,14,.42);
  --line:rgba(255,255,255,.11); --line-soft:rgba(255,255,255,.07);
  --edge:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.04);
  --lift:0 30px 60px -32px rgba(0,0,0,.8),0 2px 6px -2px rgba(0,0,0,.4);
  --spec:radial-gradient(150px 100px at 100% 100%,rgba(255,255,255,.11),transparent 70%),linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,0) 30%);
  --tile-sheen:var(--spec);
  --blur:24px; --sat:150%;
  --amb-base:radial-gradient(90vw 70vh at 72% 0%,#2E2620,transparent 70%),radial-gradient(80vw 60vh at 10% 100%,#33241A,transparent 70%),#1E1915;
  --amb-1:rgba(232,110,30,.2); --amb-2:rgba(240,140,40,.16); --amb-3:rgba(180,82,47,.12); --amb-4:rgba(240,150,60,.1);
  --shop:.78; --sh1:#FFB65C; --sh2:#EE8238; --sh3:#C25B38; --sq-glow:rgba(242,122,42,.35);
  --pos:#62D69C; --warn:#F5C66A;
  --neg:#FF4D4D; --neg-bg:rgba(229,38,42,.17); --neg-line:rgba(255,77,77,.4); --neg-fill:#E5262A;
  --neg-1:#8A2020; --neg-2:#E5262A; --neg-3:#FF4D4D;
  --neg-glow:rgba(229,38,42,.22); --neg-edge:rgba(255,77,77,.95);
  --smoke:linear-gradient(180deg,rgba(14,13,13,.6),rgba(18,16,15,.56) 50%,rgba(22,17,14,.62));
  --smoke-flat:rgba(18,16,15,.6);
}}
:root[data-saul-theme][data-theme="dark"]{
  --bg:#211B17;
  --ink:#F5F1EB; --ink-2:#DAD3C9; --ink-3:#C6BEB3;
  --accent:#FF9A55; --act:#EB8157;
  --panel:rgba(38,31,26,.5); --glass:rgba(12,12,14,.42); --float:rgba(42,35,30,.82); --chrome:rgba(34,28,24,.5);
  --hover:rgba(255,255,255,.1); --plate:rgba(12,12,14,.42);
  --line:rgba(255,255,255,.11); --line-soft:rgba(255,255,255,.07);
  --edge:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.04);
  --lift:0 30px 60px -32px rgba(0,0,0,.8),0 2px 6px -2px rgba(0,0,0,.4);
  --spec:radial-gradient(150px 100px at 100% 100%,rgba(255,255,255,.11),transparent 70%),linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,0) 30%);
  --tile-sheen:var(--spec);
  --blur:24px; --sat:150%;
  --amb-base:radial-gradient(90vw 70vh at 72% 0%,#2E2620,transparent 70%),radial-gradient(80vw 60vh at 10% 100%,#33241A,transparent 70%),#1E1915;
  --amb-1:rgba(232,110,30,.2); --amb-2:rgba(240,140,40,.16); --amb-3:rgba(180,82,47,.12); --amb-4:rgba(240,150,60,.1);
  --shop:.78; --sh1:#FFB65C; --sh2:#EE8238; --sh3:#C25B38; --sq-glow:rgba(242,122,42,.35);
  --pos:#62D69C; --warn:#F5C66A;
  --neg:#FF4D4D; --neg-bg:rgba(229,38,42,.17); --neg-line:rgba(255,77,77,.4); --neg-fill:#E5262A;
  --neg-1:#8A2020; --neg-2:#E5262A; --neg-3:#FF4D4D;
  --neg-glow:rgba(229,38,42,.22); --neg-edge:rgba(255,77,77,.95);
  --smoke:linear-gradient(180deg,rgba(14,13,13,.6),rgba(18,16,15,.56) 50%,rgba(22,17,14,.62));
  --smoke-flat:rgba(18,16,15,.6);
}
/* clear glass on the classic cards too */
:where(:root[data-saul-theme]) :is(.card,.tile,.scard,.ncard,.pcard,.panel,.dcard,.rd-card,.acard,.chartcard,.ireq,.rpbox,.dgbox,.kpi){
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));backdrop-filter:blur(var(--blur)) saturate(var(--sat))}

/* ════ EMBER GLASS v2 · department headers, controls, dropdowns (owner, 2026-10-01) ═══════════════════
   A department page's own header band (Media Buying, Marketing …) is the glass bar; its buttons are the
   flat glass buttons; the date range, every <select> and every menu/popover is glass in Day and Dusk.
   Values only — no markup, id or behaviour changes. */
:root[data-saul-theme] body > header{background:var(--chrome);-webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  border-bottom:1px solid var(--line-soft);color:var(--ink)}
:root[data-saul-theme] body > header :is(.brand .t,h1,.logo h1){color:var(--ink)}
:root[data-saul-theme] body > header :is(.brand .s,.muted){color:var(--ink-3)}
:root[data-saul-theme] :is(.btn-ghost,.nav-peek){background:var(--glass);border:1px solid var(--line);color:var(--ink);box-shadow:var(--btn-glow);font-weight:500}
:root[data-saul-theme] :is(.btn-ghost,.nav-peek):hover{background:var(--btn-dark),var(--hover);border-color:var(--line-strong);box-shadow:var(--btn-glow);filter:none}
:root[data-saul-theme] .btn-hub{background:var(--glass);border:1px solid var(--act-line);color:var(--act-hover);box-shadow:var(--btn-glow);font-weight:600}
:root[data-saul-theme] .btn-hub:hover{background:var(--act-soft);color:var(--act-hover)}
:root[data-saul-theme] .btn-hub.active{background:var(--act);color:var(--act-ink);border-color:transparent;box-shadow:var(--act-sh)}
:root[data-saul-theme] .btn-green{background:var(--pos-bg);border:1px solid var(--pos-line);color:var(--pos);box-shadow:var(--edge)}
:root[data-saul-theme] .btn-amber{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn);box-shadow:var(--edge)}
:root[data-saul-theme] .btn-red{background:var(--neg-bg);border:1px solid var(--neg-line);color:var(--neg);box-shadow:var(--edge)}
:root[data-saul-theme] :is(.btn-green,.btn-amber,.btn-red):hover{filter:brightness(1.12);box-shadow:var(--edge)}
/* the one date range */
:root[data-saul-theme] .sdr-pill{background:var(--glass);border:1px solid var(--line);color:var(--ink);box-shadow:var(--btn-glow);-webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));backdrop-filter:blur(var(--blur)) saturate(var(--sat))}
:root[data-saul-theme] .sdr-pill:hover{background:var(--btn-dark),var(--hover);border-color:var(--line-strong)}
:root[data-saul-theme] .sdr-pill .sdr-chev{color:var(--ink-3)}
:root[data-saul-theme] .sdr.open .sdr-pill{background:var(--act-soft);border-color:var(--act-line)}
:root[data-saul-theme] .sdr-chip{background:var(--glass);border:1px solid var(--line);color:var(--ink)}
:root[data-saul-theme] .sdr-chip:hover{background:var(--hover);border-color:var(--line-strong)}
:root[data-saul-theme] .sdr-chip.on{background:var(--act);color:var(--act-ink);border-color:transparent;box-shadow:var(--act-sh)}
:root[data-saul-theme] :is(.sdr-sel-d,.sdr-nav){background:var(--glass);color:var(--ink);border-color:var(--line)}
:root[data-saul-theme] .sdr-day{color:var(--ink)}
:root[data-saul-theme] .sdr-day:hover{background:var(--hover)}
/* every dropdown, menu and popover */
:root[data-saul-theme] :is(.sdr-pop,.setmenu,.snzmenu,.inv-menu,#smenu,[role=menu]:not(.sc *),[role=listbox]:not(.sc *)){background:var(--float);color:var(--ink);
  border:1px solid var(--line);box-shadow:var(--edge),var(--lift);-webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));backdrop-filter:blur(var(--blur)) saturate(var(--sat))}
:root[data-saul-theme] select:not(.sc *){background-color:var(--glass);color:var(--ink);border:1px solid var(--line);box-shadow:var(--btn-glow);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));backdrop-filter:blur(var(--blur)) saturate(var(--sat))}
:root[data-saul-theme] select:not(.sc *):hover{border-color:var(--line-strong)}
:root[data-saul-theme] select:not(.sc *):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:root[data-saul-theme] :is(option,optgroup){background:var(--surface,#fff);color:var(--ink)}
:root[data-saul-theme] input[type=date]:not(.sc *),:root[data-saul-theme] input[type=time]:not(.sc *){background-color:var(--glass);color:var(--ink);border:1px solid var(--line)}
/* an unclassed button wears the glass (§6), so its icon is the colour of action, not the cream a filled clay button wants */
:root[data-saul-theme] button:not([class]):not([style]):not(.sc *) .ic{color:var(--act)!important}

/* ── OPTIONAL VAT (2026-10-04): the kit's VAT card, confirmation panel, form controls and invoice lines (saul-ui.css),
   mapped onto the classic Finance → Setup and Invoices pages — the classic page loads this sheet, not saul-ui.css;
   the same scoping `.seg` uses above (#editPosted). CSS only. ── */
:where(:root[data-saul-theme]) .srow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 22px;align-items:center;padding:14px 0;border-top:1px solid var(--line-soft)}
:where(:root[data-saul-theme]) .srow.first{border-top:0;padding-top:4px}
:where(:root[data-saul-theme]) .srow .sl{font:600 13.5px/1.35 var(--f-ui)}
:where(:root[data-saul-theme]) .srow .sd{margin-top:3px;max-width:64ch;font-size:12.5px;line-height:1.55;color:var(--ink-3)}
:where(:root[data-saul-theme]) .srow .ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
:where(:root[data-saul-theme]) .srow.dim .sl,:where(:root[data-saul-theme]) .srow.dim .sd,:where(:root[data-saul-theme]) .srow.dim .ctl>*:not(a){opacity:.5}
:where(:root[data-saul-theme]) .rate{font:600 20px/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
:where(:root[data-saul-theme]) .owed{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin-top:6px;padding:11px 14px;border-radius:14px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line-soft);font-size:12.5px;color:var(--ink-2)}
:where(:root[data-saul-theme]) .owed .acn{font:500 11.5px ui-monospace,'SF Mono',Menlo,monospace;color:var(--ink-3)}
:where(:root[data-saul-theme]) .owed .amt{font-size:14px;font-weight:600;color:var(--ink)}
:where(:root[data-saul-theme]) .owed .sp,:where(:root[data-saul-theme]) .foot .sp,:where(:root[data-saul-theme]) .cf .sp{flex:1;min-width:8px}
:where(:root[data-saul-theme]) .foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--ink-3)}
:where(:root[data-saul-theme]) .mirror-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 2px -6px;font:600 10.5px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
:where(:root[data-saul-theme][lang="ar"]) .mirror-l{letter-spacing:0;font-size:12px}
:where(:root[data-saul-theme]) .cf{margin-top:12px;padding:18px 20px 16px;border-radius:20px;overflow:visible}
:where(:root[data-saul-theme]) .cf .ch{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;margin-bottom:14px}
:where(:root[data-saul-theme]) .cf .ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:1}
:where(:root[data-saul-theme]) .cf[data-tone="warn"] .ico{background:var(--warn-bg);color:var(--warn)}
:where(:root[data-saul-theme]) .cf[data-tone="info"] .ico{background:var(--info-bg);color:var(--info)}
:where(:root[data-saul-theme]) .cf h4{margin:3px 0 3px;font:600 16px/1.3 var(--f-display);letter-spacing:-.012em}
:where(:root[data-saul-theme][lang="ar"]) .cf h4{font-family:var(--f-ar);letter-spacing:0}
:where(:root[data-saul-theme]) .cf .ch p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.55}
:where(:root[data-saul-theme]) .cf .sec{margin-bottom:8px;font:600 10.5px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
:where(:root[data-saul-theme][lang="ar"]) .cf .sec{letter-spacing:0;font-size:12px}
:where(:root[data-saul-theme]) .cf .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:14px 0}
:where(:root[data-saul-theme]) .cf .col2{padding:13px 15px;border-radius:14px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line-soft);min-width:0}
:where(:root[data-saul-theme]) .cf .col2 h5{margin:0 0 8px;font:600 10.5px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
:where(:root[data-saul-theme][lang="ar"]) .cf .col2 h5{letter-spacing:0;font-size:12px}
:where(:root[data-saul-theme]) .lst{list-style:none;margin:0;padding:0;display:grid;gap:8px}
:where(:root[data-saul-theme]) .lst li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;font-size:12.8px;line-height:1.5;color:var(--ink-2)}
:where(:root[data-saul-theme]) .lst li svg{width:16px;height:16px;margin-top:2px}
:where(:root[data-saul-theme]) .lst.chg li svg{color:var(--accent)}
:where(:root[data-saul-theme]) .lst.keep li svg{color:var(--pos)}
:where(:root[data-saul-theme]) .cf .when{display:flex;gap:10px 22px;align-items:center;flex-wrap:wrap}
:where(:root[data-saul-theme]) .cf .when .inp{width:170px}
:where(:root[data-saul-theme]) .cf .when .inp:disabled{opacity:.45}
:where(:root[data-saul-theme]) .cf .ft{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-top:14px}
:where(:root[data-saul-theme]) .cf .ft .who{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3)}
:where(:root[data-saul-theme]) .cf .ft .acts{display:flex;gap:8px;flex-wrap:wrap;margin-inline-start:auto}
:where(:root[data-saul-theme]) .cf.sm{padding:14px 16px 12px;margin-top:0}
:where(:root[data-saul-theme]) .cf.sm .ch{margin-bottom:10px}
:where(:root[data-saul-theme]) .cf.sm h4{font-size:14px}
:where(:root[data-saul-theme]) .co{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--line-soft);background:var(--sunken);font-size:12.5px;line-height:1.55;color:var(--ink-2)}
:where(:root[data-saul-theme]) .co svg{width:18px;height:18px;margin-top:1px}
:where(:root[data-saul-theme]) .co b{color:var(--ink);font-weight:600}
:where(:root[data-saul-theme]) .co.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
:where(:root[data-saul-theme]) .co.warn b{color:inherit}
:where(:root[data-saul-theme]) .co.info{background:var(--info-bg);border-color:var(--info-line);color:var(--info)}
:where(:root[data-saul-theme]) .co.info b{color:inherit}
:where(:root[data-saul-theme]) .rad{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--ink);cursor:pointer}
:where(:root[data-saul-theme]) .rad input{accent-color:var(--act);width:16px;height:16px;min-width:0;margin:0;padding:0}
:where(:root[data-saul-theme]) .fl{display:block;margin:0 0 5px;font-size:12px;color:var(--ink-3)}
:where(:root[data-saul-theme]) .fl .req{color:var(--neg);font-weight:600;margin-inline-start:4px}
:where(:root[data-saul-theme]) .inp,:where(:root[data-saul-theme]) .sel,:where(:root[data-saul-theme]) .ta{font:400 13px/1.2 var(--f-ui);height:34px;width:100%;min-width:0;padding:0 11px;border:0;border-radius:10px;background:var(--glass);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);box-sizing:border-box}
:where(:root[data-saul-theme][lang="ar"]) :is(.inp,:where(:root[data-saul-theme]) .sel,:where(:root[data-saul-theme]) .ta){font-family:var(--f-ar)}
:where(:root[data-saul-theme]) .ta{height:auto;min-height:62px;padding:9px 11px;line-height:1.5;resize:vertical;display:block}
:where(:root[data-saul-theme]) .inp::placeholder,:where(:root[data-saul-theme]) .ta::placeholder{color:var(--ink-3);opacity:.8}
:where(:root[data-saul-theme]) .inp:focus-visible,:where(:root[data-saul-theme]) .sel:focus-visible,:where(:root[data-saul-theme]) .ta:focus-visible{outline:none;box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px var(--accent-soft)}
:where(:root[data-saul-theme]) .inp.num{direction:ltr;text-align:right}
:where(:root[data-saul-theme]) select.sel{-webkit-appearance:none;appearance:none;padding-inline-end:30px;cursor:pointer;min-width:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23918779' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:12px}
:where(:root[data-saul-theme][dir="rtl"]) select.sel{background-position:left 10px center}
:where(:root[data-saul-theme]) .sel option{background:var(--float,#fff);color:var(--ink)}
:where(:root[data-saul-theme]) .inp.chg,:where(:root[data-saul-theme]) .sel.chg{box-shadow:inset 0 0 0 1.5px var(--accent)}
:where(:root[data-saul-theme]) .seg.lgs button{height:30px;padding:0 16px}
:where(:root[data-saul-theme]) .ivf{margin-top:12px;padding-top:14px;border-top:1px solid var(--line);container:ivf/inline-size}
:where(:root[data-saul-theme]) .ivf .g3{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,.9fr);gap:10px;margin-top:10px}
:where(:root[data-saul-theme]) .lg{display:grid;gap:0;margin-top:14px}
:where(:root[data-saul-theme]) .lg-h,:where(:root[data-saul-theme]) .lg-r{display:grid;grid-template-columns:minmax(0,1.9fr) 76px 112px minmax(0,150px) 120px 30px;gap:10px;align-items:start}
:where(:root[data-saul-theme]) .lg.nv .lg-h,:where(:root[data-saul-theme]) .lg.nv .lg-r{grid-template-columns:minmax(0,1.9fr) 76px 112px 120px 30px}
:where(:root[data-saul-theme]) .lg-h{padding:0 0 7px;border-bottom:1px solid var(--line);font:600 10.5px/1.2 var(--f-ui);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
:where(:root[data-saul-theme][lang="ar"]) .lg-h{letter-spacing:0;font-size:11.5px}
:where(:root[data-saul-theme]) .lg-h .num{text-align:end}
:where(:root[data-saul-theme]) .lg-r{padding:10px 0;border-bottom:1px solid var(--line-soft)}
:where(:root[data-saul-theme]) .lg-r .it .sk{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px;font-size:11.5px;color:var(--ink-3)}
:where(:root[data-saul-theme]) .lg-r .it .sk .sel{width:auto;height:24px;padding:0 26px 0 8px;font-size:11.5px;border-radius:99px}
:where(:root[data-saul-theme][dir="rtl"]) .lg-r .it .sk .sel{padding:0 8px 0 26px}
:where(:root[data-saul-theme]) .lg-r .tt{padding-top:7px;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;text-align:end}
:where(:root[data-saul-theme]) .lg-r .tt small{display:block;margin-top:2px;font-size:10.5px;font-weight:500;color:var(--ink-3);white-space:nowrap}
:where(:root[data-saul-theme]) .lg-r .rm{height:34px;width:30px;padding:0;display:grid;place-items:center;border:0;border-radius:9px;background:none;color:var(--ink-3);cursor:pointer}
:where(:root[data-saul-theme]) .lg-r .rm:hover{background:var(--hover);color:var(--neg)}
:where(:root[data-saul-theme]) .lg-r .rm svg{width:15px;height:15px}
:where(:root[data-saul-theme]) .lg-r [data-l]::before{display:none}
:where(:root[data-saul-theme]) .hnt{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px;font-size:11px;line-height:1.35;color:var(--ink-3)}
:where(:root[data-saul-theme]) .hnt i{font-style:normal;padding:1px 7px;border-radius:99px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line-soft);font-weight:500;white-space:nowrap}
:where(:root[data-saul-theme]) .hnt.ln i{color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-soft)}
:where(:root[data-saul-theme]) .hnt a{color:var(--accent);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
:where(:root[data-saul-theme]) .ivb{display:flex;gap:12px 16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-top:14px}
:where(:root[data-saul-theme]) .ivb .l{display:grid;gap:10px;max-width:520px}
:where(:root[data-saul-theme]) .tot{width:min(390px,100%);margin-inline-start:auto;padding:14px 16px;border-radius:16px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);font-size:13px}
:where(:root[data-saul-theme]) .tot .r{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:4px 0}
:where(:root[data-saul-theme]) .tot .r .s{font-size:11.5px;color:var(--ink-3);display:block;margin-top:1px}
:where(:root[data-saul-theme]) .tot .r.t{margin-top:7px;padding-top:11px;border-top:1px solid var(--line-strong);font:600 15px/1.2 var(--f-ui)}
:where(:root[data-saul-theme]) .tot .r.t .amt{font-size:17px}
:where(:root[data-saul-theme]) .tot .r.mute{color:var(--ink-3)}
:where(:root[data-saul-theme]) .tot .r .amt{font-weight:600}
:where(:root[data-saul-theme]) .tot .nf{font-size:12px;color:var(--ink-3);margin-top:8px}
:where(:root[data-saul-theme]) .qn{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;color:var(--ink-3)}
:where(:root[data-saul-theme]) .qn svg{width:15px;height:15px}
:where(:root[data-saul-theme]) .qn a{color:var(--accent);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
/* ── the new-invoice line's product picker (DEFECT-1250; .ivpk, scoped to the line cell — `.pk` was Inventory's palette label, DEFECT-1254): a listbox under the line's combobox, and "Goods leave from" ── */
:where(:root[data-saul-theme]) .ivfrom{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
:where(:root[data-saul-theme]) .ivfrom[hidden]{display:none}
:where(:root[data-saul-theme]) .lg-r .sk .ivpk-sk{display:contents}
:where(:root[data-saul-theme]) .lg-r .c-it{position:relative}
:where(:root[data-saul-theme]) .lg-r .c-it > .ivpk{position:absolute;z-index:40;inset-inline:0;top:38px;max-height:min(320px,60vh);overflow:auto;padding:6px;border-radius:14px;background:var(--float);border:1px solid var(--line);box-shadow:var(--edge),var(--lift)}
:where(:root[data-saul-theme]) .lg-r .c-it > .ivpk[hidden]{display:none}
:where(:root[data-saul-theme]) .ivpk-o{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:8px 10px;border-radius:9px;cursor:pointer;align-items:center}
:where(:root[data-saul-theme]) .ivpk-o[aria-selected="true"],:where(:root[data-saul-theme]) .ivpk-o:hover{background:var(--hover)}
:where(:root[data-saul-theme]) .ivpk-nm{font-size:13px;font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-saul-theme]) .ivpk-mt{grid-column:1;font-size:11.5px;color:var(--ink-3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-saul-theme]) .ivpk-pr{grid-row:1;grid-column:2;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap}
:where(:root[data-saul-theme]) .ivpk-oh{grid-row:2;grid-column:2;font-size:11.5px;color:var(--ink-3);text-align:end;white-space:nowrap}
:where(:root[data-saul-theme]) .ivpk-oh.ivpk-none{color:var(--warn)}
:where(:root[data-saul-theme]) .ivpk-o .mono,:where(:root[data-saul-theme]) .lg-r .sk .mono{font-family:var(--f-mono);direction:ltr;unicode-bidi:isolate}
:where(:root[data-saul-theme]) .ivpk-e{padding:10px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
@container ivf (max-width:780px){:where(:root[data-saul-theme]) .lg-r .c-it > .ivpk{inset-inline-end:-48%}:where(:root[data-saul-theme]) .ivpk-nm,:where(:root[data-saul-theme]) .ivpk-mt{white-space:normal;overflow-wrap:anywhere}}
@media (max-width:760px){:where(:root[data-saul-theme]) .srow{grid-template-columns:minmax(0,1fr)}
:where(:root[data-saul-theme]) .srow .ctl{justify-content:flex-start}
:where(:root[data-saul-theme]) .cf{padding:16px 14px 14px}
:where(:root[data-saul-theme]) .cf .cols{grid-template-columns:minmax(0,1fr)}
:where(:root[data-saul-theme]) .cf .when .inp{width:100%}
:where(:root[data-saul-theme]) .cf .ft{flex-direction:column;align-items:stretch}
:where(:root[data-saul-theme]) .cf .ft .acts{margin-inline-start:0;justify-content:flex-end}
:where(:root[data-saul-theme]) .ivf .g3{grid-template-columns:minmax(0,1fr)}
:where(:root[data-saul-theme]) .ivb{flex-direction:column;align-items:stretch}
:where(:root[data-saul-theme]) .ivb .l{max-width:none}
:where(:root[data-saul-theme]) .tot{width:100%}
:where(:root[data-saul-theme]) .owed .acn{display:none}

}
@container ivf (max-width:780px){:where(:root[data-saul-theme]) .lg-h{display:none}
:where(:root[data-saul-theme]) .lg-r,:where(:root[data-saul-theme]) .lg.nv .lg-r{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"it it r" "q p t" "v v v";gap:8px 10px;padding:13px 0}
:where(:root[data-saul-theme]) .lg.nv .lg-r{grid-template-areas:"it it r" "q p t"}
:where(:root[data-saul-theme]) .lg-r .c-it{grid-area:it}
:where(:root[data-saul-theme]) .lg-r .c-q{grid-area:q}
:where(:root[data-saul-theme]) .lg-r .c-p{grid-area:p}
:where(:root[data-saul-theme]) .lg-r .c-t{grid-area:t}
:where(:root[data-saul-theme]) .lg-r .c-v{grid-area:v}
:where(:root[data-saul-theme]) .lg-r .c-r{grid-area:r;justify-self:end;align-self:start}
:where(:root[data-saul-theme]) .lg-r [data-l]::before{display:block;content:attr(data-l);margin-bottom:4px;font:600 10px/1.2 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
:where(:root[data-saul-theme][lang="ar"]) .lg-r [data-l]::before{letter-spacing:0;font-size:11px}
:where(:root[data-saul-theme]) .lg-r .tt{padding-top:0;text-align:start}
:where(:root[data-saul-theme]) .lg-r .tt .v{display:block;padding-top:7px}

}

/* the kit's small helpers the two VAT surfaces use (saul-ui.css: amounts with their currency, the small type,
   the chip's icon gap) — only inside the VAT card and the new-invoice form, so no other classic surface moves */
:where(:root[data-saul-theme]) :is(#vat,#ivNew) .amt{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;display:inline-flex;align-items:baseline;gap:4px}
:where(:root[data-saul-theme]) :is(#vat,#ivNew) .amt .n{unicode-bidi:isolate}
:where(:root[data-saul-theme]) :is(#vat,#ivNew) .cur{font-size:.74em;font-variant-caps:all-small-caps;letter-spacing:.05em;color:var(--ink-3);font-weight:500}
:where(:root[data-saul-theme]) :is(#vat,#ivNew) .xs{font-size:11.5px}
:where(:root[data-saul-theme]) :is(#vat,#ivNew) .sm{font-size:12.5px}
:where(:root[data-saul-theme]) :is(#vat,#ivNew) .ink2{color:var(--ink-2)}
:where(:root[data-saul-theme]) :is(#vat,#ivNew) .chip{display:inline-flex;align-items:center;gap:5px}

/* ── CANCEL AND REPLACE (2026-10-05): the kit's editor drawer, register marks, live preview and after-state
   (saul-ui.css "CANCEL AND REPLACE") on the classic Invoices and Purchases pages — the same rules scoped to
   the theme mark, the way the OPTIONAL VAT components reach these pages; plus the kit's chips, buttons and
   amount helpers these surfaces need, scoped to the drawer (#ieDrawer) and the two registers (#ivBody, #iList). */
:where(:root[data-saul-theme]) tr.dimr td{opacity:.62}
:where(:root[data-saul-theme]) tr.dimr td.keep{opacity:1}
:where(:root[data-saul-theme]) .hl-new td{background:var(--pos-bg)}
:where(:root[data-saul-theme]) tr.nt td{padding:0 12px 11px 20px!important;border-bottom:1px solid var(--line-soft)}
:where(:root[data-saul-theme]) tr.nt:hover td{background:none!important}
:where(:root[data-saul-theme]) .nline{display:flex;align-items:flex-start;gap:8px;flex-wrap:nowrap;font-size:12px;line-height:1.5;color:var(--ink-3)}
:where(:root[data-saul-theme]) .nline>span{flex:1 1 0;min-width:0}
:where(:root[data-saul-theme]) .nline svg.i{width:14px;height:14px;flex:none;margin-top:2px}
:where(:root[data-saul-theme]) .nline.lock{color:var(--lock)}
:where(:root[data-saul-theme]) .nline a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
:where(:root[data-saul-theme]) .acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
:where(:root[data-saul-theme]) .btn.sm svg.i{width:13px;height:13px}
:where(:root[data-saul-theme]) .chip.mn{font-family:var(--f-mono);font-weight:500;letter-spacing:0}
:where(:root[data-saul-theme]) .chip.sq{padding-inline:9px}
:where(:root[data-saul-theme]) .scrimx{position:fixed;inset:0;z-index:8990;background:var(--scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
:where(:root[data-saul-theme]) .scrimx.on{opacity:1;visibility:visible}
:where(:root[data-saul-theme]) .edr{position:fixed;top:0;bottom:0;inset-inline-end:0;z-index:8995;width:min(1080px,calc(100vw - 316px));container:drw/inline-size;
  transform:translateX(105%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility .28s;
  display:flex;flex-direction:column;background:var(--float);color:var(--ink);border-inline-start:1px solid var(--line);box-shadow:var(--sh-3);
  -webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);text-align:start}
:where(:root[data-saul-theme][dir="rtl"]) .edr{transform:translateX(-105%)}
:where(:root[data-saul-theme]) .edr.on{transform:none;visibility:visible}
:where(:root[data-saul-theme]) .edr svg.i{width:14px;height:14px;flex:none;vertical-align:-2px}
:where(:root[data-saul-theme]) .edr.cmp{width:min(660px,calc(100vw - 316px))}
@media (max-width:1180px){:where(:root[data-saul-theme]) .edr,:where(:root[data-saul-theme]) .edr.cmp{width:min(1080px,100vw)}
}
:where(:root[data-saul-theme]) body.dopen{overflow:hidden}
:where(:root[data-saul-theme]) .edr .dh{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:18px 22px 14px;border-bottom:1px solid var(--line)}
:where(:root[data-saul-theme]) .edr .dh .cap{margin-bottom:6px}
:where(:root[data-saul-theme]) .edr .dh h3{margin:0;font:600 19px/1.25 var(--f-display);letter-spacing:-.015em}
:where(:root[data-saul-theme][lang="ar"]) .edr .dh h3{font-family:var(--f-ar);letter-spacing:0}
:where(:root[data-saul-theme]) .edr .dh .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
:where(:root[data-saul-theme]) .edr .icb{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:11px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;color:var(--ink-2);flex:none}
:where(:root[data-saul-theme]) .edr .icb svg.i{display:block;width:16px;height:16px}
:where(:root[data-saul-theme]) .edr .db{flex:1;overflow-y:auto;padding:18px 22px 26px;display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);gap:22px;align-content:start;align-items:start}
:where(:root[data-saul-theme]) .edr.cmp .db{grid-template-columns:minmax(0,1fr)}
:where(:root[data-saul-theme]) .edr .df{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 18px;align-items:end;padding:14px 22px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--float)}
:where(:root[data-saul-theme]) .edr .df .why{min-width:0}
:where(:root[data-saul-theme]) .edr .df .why .ta{min-height:46px;height:46px;resize:none}
:where(:root[data-saul-theme]) .edr .df .why small{display:block;margin-top:6px;font-size:11.5px;color:var(--ink-3)}
:where(:root[data-saul-theme]) .edr .df .why small.warn{color:var(--warn)}
:where(:root[data-saul-theme]) .edr .df .acts{display:flex;gap:8px;align-items:center;padding-bottom:22px}
:where(:root[data-saul-theme]) .edr .ed-l,:where(:root[data-saul-theme]) .edr .ed-r{min-width:0;display:grid;gap:14px;align-content:start}
:where(:root[data-saul-theme]) .edr .sec{font:600 10.5px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;justify-content:space-between;gap:10px}
:where(:root[data-saul-theme][lang="ar"]) .edr .sec{letter-spacing:0;font-size:12px}
:where(:root[data-saul-theme]) .edr .sec .link{color:var(--accent);font-weight:600;cursor:pointer;display:inline-flex;gap:4px;align-items:center;text-transform:none;letter-spacing:0;font-size:12px;background:none;border:0;padding:0}
:where(:root[data-saul-theme]) .edr .sec .link svg.i{width:12px;height:12px}
:where(:root[data-saul-theme]) .edr .fx{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:10px}
:where(:root[data-saul-theme]) .edr .fx .span2{grid-column:span 2}
:where(:root[data-saul-theme]) .edr .fx .hl{font-size:11px;color:var(--ink-3);margin-top:5px;line-height:1.4;display:flex;gap:4px;align-items:center}
:where(:root[data-saul-theme]) .edr .fx .hl svg.i{width:12px;height:12px}
:where(:root[data-saul-theme]) .edr .fx .hl.bad{color:var(--neg);font-weight:600}
:where(:root[data-saul-theme]) .edr .lg-h{grid-template-columns:minmax(0,1fr) 64px 92px 98px;gap:8px 10px}
:where(:root[data-saul-theme]) .edr .lg-r{grid-template-columns:minmax(0,1fr) 64px 92px 98px;grid-template-areas:"it q p t" "v v v v";gap:8px 10px;align-items:start;padding:12px 0}
:where(:root[data-saul-theme]) .edr .c-it{grid-area:it}
:where(:root[data-saul-theme]) .edr .c-q{grid-area:q}
:where(:root[data-saul-theme]) .edr .c-p{grid-area:p}
:where(:root[data-saul-theme]) .edr .c-t{grid-area:t}
:where(:root[data-saul-theme]) .edr .c-v{grid-area:v;display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap}
:where(:root[data-saul-theme]) .edr .c-v .sel{width:176px;flex:none}
:where(:root[data-saul-theme]) .edr .c-v .hh{flex:1;min-width:150px}
:where(:root[data-saul-theme]) .edr .c-v .hnt{margin-top:0}
:where(:root[data-saul-theme]) .edr .lg-r .it .nm{display:block;font-size:13px;font-weight:500;line-height:1.35}
:where(:root[data-saul-theme]) .edr .lg-r .tt small{display:none}
:where(:root[data-saul-theme]) .edr .lg-r .tt{padding-top:7px}
:where(:root[data-saul-theme]) .edr .was{display:block;margin-top:3px;font-size:10.5px;color:var(--ink-3);white-space:nowrap}
:where(:root[data-saul-theme]) .edr .was b{color:var(--accent);font-weight:600}
:where(:root[data-saul-theme]) .edr .was svg.i{width:12px;height:12px;vertical-align:-2px;margin-inline-end:4px}
:where(:root[data-saul-theme]) .edr .inr{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
:where(:root[data-saul-theme]) .edr .inr .cap2{font-size:12.5px;color:var(--ink-2)}
:where(:root[data-saul-theme]) .edr .tot{width:100%;margin:0}
:where(:root[data-saul-theme]) .edr .co.lock{background:var(--lock-bg);border-color:var(--lock-line);color:var(--lock)}
:where(:root[data-saul-theme]) .edr .co.lock b{color:inherit}
:where(:root[data-saul-theme]) .edr .co.plain svg{color:var(--ink-3)}
:where(:root[data-saul-theme]) .rmv{display:grid;gap:12px;padding:15px 16px;border-radius:16px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line)}
:where(:root[data-saul-theme]) .rmv h5{margin:0;font:600 13.5px/1.35 var(--f-ui)}
:where(:root[data-saul-theme]) .rmv p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
:where(:root[data-saul-theme]) .rmv .opt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}
:where(:root[data-saul-theme]) .rmv .rr{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
:where(:root[data-saul-theme]) .rmd{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:10px 14px;border-radius:14px;background:var(--warn-bg);box-shadow:inset 0 0 0 1px var(--warn-line);color:var(--warn);font-size:12.5px;line-height:1.5}
:where(:root[data-saul-theme]) .rmd svg.i{width:16px;height:16px;flex:none}
:where(:root[data-saul-theme]) .rmd a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
:where(:root[data-saul-theme]) .pv{padding:16px 16px 6px;border-radius:20px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
:where(:root[data-saul-theme]) .pv .ph{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
:where(:root[data-saul-theme]) .pv .ph h4{margin:0;font:600 15px/1.3 var(--f-display);letter-spacing:-.012em}
:where(:root[data-saul-theme][lang="ar"]) .pv .ph h4{font-family:var(--f-ar);letter-spacing:0}
:where(:root[data-saul-theme]) .pv .ph small{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-3)}
:where(:root[data-saul-theme]) .live{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px 0 8px;border-radius:99px;font:600 11px/1 var(--f-ui);color:var(--pos);background:var(--pos-bg);border:1px solid var(--pos-line)}
:where(:root[data-saul-theme]) .live i{width:7px;height:7px;border-radius:50%;background:var(--pos-fill);animation:lv 2.4s ease-out infinite}
@keyframes lv{0%{box-shadow:0 0 0 0 rgba(46,157,99,.5)}
70%,100%{box-shadow:0 0 0 7px rgba(46,157,99,0)}
}
:where(:root[data-saul-theme][data-motion="reduced"]) .live i{animation:none}
:where(:root[data-saul-theme]) .tl{display:grid}
:where(:root[data-saul-theme]) .st{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 12px;position:relative;padding-bottom:16px}
:where(:root[data-saul-theme]) .st::before{content:"";position:absolute;inset-inline-start:13.25px;top:32px;bottom:3px;width:1.5px;background:var(--line)}
:where(:root[data-saul-theme]) .st:last-child{padding-bottom:12px}
:where(:root[data-saul-theme]) .st:last-child::before{display:none}
:where(:root[data-saul-theme]) .st .dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 12px/1 var(--f-ui);background:var(--surface);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
:where(:root[data-saul-theme]) .st.on .dot{background:var(--act);color:var(--act-ink);box-shadow:var(--act-sh)}
:where(:root[data-saul-theme]) .st .sb{min-width:0}
:where(:root[data-saul-theme]) .st h5{margin:3px 0 4px;font:600 13.5px/1.35 var(--f-ui);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
:where(:root[data-saul-theme]) .st p{margin:0 0 8px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
:where(:root[data-saul-theme]) .st p b{color:var(--ink);font-weight:600}
:where(:root[data-saul-theme]) .kv2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:10px 12px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-soft);font-size:12.5px}
:where(:root[data-saul-theme]) .kv2 .k{color:var(--ink-3)}
:where(:root[data-saul-theme]) .kv2 .v{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap;direction:ltr}
:where(:root[data-saul-theme]) .kv2 .z{color:var(--ink-4)}
:where(:root[data-saul-theme]) .ne{margin-top:2px;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-soft);background:var(--surface)}
:where(:root[data-saul-theme]) .ne .nh,:where(:root[data-saul-theme]) .ne .nr{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:6px 8px;align-items:baseline;padding:9px 12px}
:where(:root[data-saul-theme]) .ne .nh{font:600 10px/1.2 var(--f-ui);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line)}
:where(:root[data-saul-theme][lang="ar"]) .ne .nh{letter-spacing:0;font-size:11px}
:where(:root[data-saul-theme]) .ne .nr{border-top:1px solid var(--line-soft);font-size:12.5px}
:where(:root[data-saul-theme]) .ne .nr:first-of-type{border-top:0}
:where(:root[data-saul-theme]) .ne .nr .lb{font-weight:500;line-height:1.35}
:where(:root[data-saul-theme]) .ne .nr .lb small{display:block;margin-top:2px;font-size:11px;font-weight:400;color:var(--ink-3)}
:where(:root[data-saul-theme]) .ne .nr .vv{text-align:end;font-variant-numeric:tabular-nums;direction:ltr;white-space:nowrap}
:where(:root[data-saul-theme]) .ne .nr .vv.d{font-weight:600}
:where(:root[data-saul-theme]) .ne .nr .vv::before{display:none}
:where(:root[data-saul-theme]) .ne .nh span:not(:first-child){text-align:end}
:where(:root[data-saul-theme]) .ne .nr .zero{color:var(--ink-4);font-weight:400}
:where(:root[data-saul-theme]) .ne .nt{padding:9px 12px;border-top:1px solid var(--line-soft);font-size:12px;line-height:1.55;color:var(--ink-2);display:flex;gap:8px;align-items:flex-start}
:where(:root[data-saul-theme]) .ne .nt svg.i{width:15px;height:15px;margin-top:1px;color:var(--ink-3);flex:none}
:where(:root[data-saul-theme]) .orig{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-soft);font-size:12.5px}
:where(:root[data-saul-theme]) .orig .no{font:600 12.5px var(--f-mono);text-decoration:line-through;text-decoration-color:var(--ink-4);color:var(--ink-3)}
:where(:root[data-saul-theme]) .emp{display:grid;place-items:center;gap:8px;padding:26px 14px 28px;text-align:center;color:var(--ink-3);font-size:12.5px}
:where(:root[data-saul-theme]) .emp .ei{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line)}
:where(:root[data-saul-theme]) .emp .ei svg.i{width:16px;height:16px}
:where(:root[data-saul-theme]) .emp b{color:var(--ink-2);font-weight:600;font-size:13px}
:where(:root[data-saul-theme]) .okh{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;padding:18px 22px;border-bottom:1px solid var(--line-soft)}
:where(:root[data-saul-theme]) .okh .ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--pos-bg);color:var(--pos);box-shadow:0 0 0 6px var(--pos-glow)}
:where(:root[data-saul-theme]) .okh .ico svg.i{width:22px;height:22px}
:where(:root[data-saul-theme]) .okh h3{margin:2px 0 4px;font:600 20px/1.25 var(--f-display);letter-spacing:-.015em}
:where(:root[data-saul-theme][lang="ar"]) .okh h3{font-family:var(--f-ar);letter-spacing:0}
:where(:root[data-saul-theme]) .okh p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
:where(:root[data-saul-theme]) .chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
:where(:root[data-saul-theme]) .dc{padding:13px 14px;border-radius:16px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);min-width:0;display:grid;gap:8px;align-content:start}
:where(:root[data-saul-theme]) .dc .no{font:600 13.5px var(--f-mono);word-break:break-all}
:where(:root[data-saul-theme]) .dc .no.gone{text-decoration:line-through;text-decoration-color:var(--ink-4);color:var(--ink-3)}
:where(:root[data-saul-theme]) .dc .ds{font-size:12px;color:var(--ink-3);line-height:1.45}
:where(:root[data-saul-theme]) .dc .am{font-size:12.5px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px}
:where(:root[data-saul-theme]) .dc .am .v{text-align:end;font-variant-numeric:tabular-nums;direction:ltr;white-space:nowrap}
:where(:root[data-saul-theme]) .dc .chip{justify-self:start}
:where(:root[data-saul-theme]) .aud{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border-radius:16px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line)}
:where(:root[data-saul-theme]) .aud .ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--lock-bg);color:var(--lock);box-shadow:inset 0 0 0 1px var(--lock-line)}
:where(:root[data-saul-theme]) .aud .ico svg.i{width:16px;height:16px}
:where(:root[data-saul-theme]) .aud .tx{font-size:12.8px;line-height:1.6;color:var(--ink-2)}
:where(:root[data-saul-theme]) .aud .tx b{color:var(--ink);font-weight:600}
:where(:root[data-saul-theme]) .aud .tx q{font-style:normal;color:var(--ink)}
:where(:root[data-saul-theme]) .aud .tx q::before{content:"“"}
:where(:root[data-saul-theme]) .aud .tx q::after{content:"”"}
:where(:root[data-saul-theme][lang="ar"]) .aud .tx q::before{content:"«"}
:where(:root[data-saul-theme][lang="ar"]) .aud .tx q::after{content:"»"}
:where(:root[data-saul-theme]) .aud .tm{display:block;margin-top:4px;font-size:11.5px;color:var(--ink-3)}
:where(:root[data-saul-theme]) .aud .chg-l{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:3px;font-size:12px;color:var(--ink-3)}
:where(:root[data-saul-theme]) .aud .chg-l li::before{content:"•";margin-inline-end:7px;color:var(--ink-4)}
:where(:root[data-saul-theme]) .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
@container drw (max-width:900px){:where(:root[data-saul-theme]) .edr .dh{padding:14px 16px 12px}
:where(:root[data-saul-theme]) .edr .db{grid-template-columns:minmax(0,1fr);padding:16px 16px 22px;gap:18px}
:where(:root[data-saul-theme]) .edr .df{grid-template-columns:minmax(0,1fr);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
:where(:root[data-saul-theme]) .edr .df .acts{padding-bottom:0;justify-content:flex-end}
:where(:root[data-saul-theme]) .edr .df .why .ta{min-height:54px;height:54px}
:where(:root[data-saul-theme]) .okh{padding:16px}
:where(:root[data-saul-theme]) .chain{grid-template-columns:minmax(0,1fr)}
}
@container drw (max-width:620px){:where(:root[data-saul-theme]) .edr .fx{grid-template-columns:minmax(0,1fr)}
:where(:root[data-saul-theme]) .edr .fx .span2{grid-column:auto}
:where(:root[data-saul-theme]) .edr .lg-h{display:none}
:where(:root[data-saul-theme]) .edr .lg-r{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"it it it" "q p t" "v v v";gap:8px 10px;padding:13px 0}
:where(:root[data-saul-theme]) .edr .lg-r [data-l]::before{display:block;content:attr(data-l);margin-bottom:4px;font:600 10px/1.2 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
:where(:root[data-saul-theme][lang="ar"]) .edr .lg-r [data-l]::before{letter-spacing:0;font-size:11px}
:where(:root[data-saul-theme]) .edr .lg-r .tt{padding-top:0;text-align:start}
:where(:root[data-saul-theme]) .edr .lg-r .tt .v{display:block;padding-top:7px}
:where(:root[data-saul-theme]) .edr .c-v{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
:where(:root[data-saul-theme]) .edr .c-v .sel{width:100%}
:where(:root[data-saul-theme]) .edr .c-v .hh{min-width:0}
:where(:root[data-saul-theme]) .edr .dh h3{font-size:17px}
:where(:root[data-saul-theme]) .okh h3{font-size:18px}
:where(:root[data-saul-theme]) .ne .nh{display:none}
:where(:root[data-saul-theme]) .ne .nr{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px 8px}
:where(:root[data-saul-theme]) .ne .nr .lb{grid-column:1/-1}
:where(:root[data-saul-theme]) .ne .nr .vv::before{display:block;content:attr(data-l);margin-bottom:1px;font:600 9.5px/1.2 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-align:end}
:where(:root[data-saul-theme][lang="ar"]) .ne .nr .vv::before{letter-spacing:0;font-size:10.5px}
:where(:root[data-saul-theme]) .kv2{grid-template-columns:minmax(0,1fr) auto}
:where(:root[data-saul-theme]) .pv{padding:14px 12px 4px}
:where(:root[data-saul-theme]) .st{grid-template-columns:24px minmax(0,1fr);gap:0 10px}
:where(:root[data-saul-theme]) .st .dot{width:24px;height:24px;font-size:11px}
:where(:root[data-saul-theme]) .st::before{inset-inline-start:11.25px;top:28px}
:where(:root[data-saul-theme]) .rmv .rr{justify-content:stretch}
:where(:root[data-saul-theme]) .rmv .rr .btn{flex:1}
}
:where(:root[data-saul-theme]) :is(#ivBody,#iList) button svg.i{width:12px;height:12px;vertical-align:-2px;margin-inline-end:3px}
:where(:root[data-saul-theme]) :is(#ieDrawer,#ivBody,#iList) .chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding-inline:6px 9px;border-radius:99px;font:600 11.5px/1 var(--f-ui);white-space:nowrap;border:1px solid transparent;vertical-align:middle}
:where(:root[data-saul-theme]) :is(#ieDrawer,#ivBody,#iList) .chip svg.i{width:13px;height:13px;stroke-width:2;vertical-align:0}
:where(:root[data-saul-theme]) :is(#ieDrawer,#ivBody,#iList) .chip.pos{color:var(--pos);background:var(--pos-bg);border-color:var(--pos-line)}
:where(:root[data-saul-theme]) :is(#ieDrawer,#ivBody,#iList) .chip.neg{color:var(--neg);background:var(--neg-bg);border-color:var(--neg-line)}
:where(:root[data-saul-theme]) :is(#ieDrawer,#ivBody,#iList) .chip.warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
:where(:root[data-saul-theme]) :is(#ieDrawer,#ivBody,#iList) .chip.info{color:var(--info);background:var(--info-bg);border-color:var(--info-line)}
:where(:root[data-saul-theme]) :is(#ieDrawer,#ivBody,#iList) .chip.lock{color:var(--lock);background:var(--lock-bg);border-color:var(--lock-line)}
:where(:root[data-saul-theme]) :is(#ieDrawer,#ivBody,#iList) .chip.plain{color:var(--ink-2);background:var(--sunken);border-color:var(--line)}
:where(:root[data-saul-theme]) #ieDrawer .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 13px;border-radius:10px;border:1px solid var(--line);background:var(--glass);box-shadow:var(--btn-glow);transition:background .18s,box-shadow .18s;color:var(--ink);font:500 13px/1 var(--f-ui);cursor:pointer;white-space:nowrap;text-decoration:none;flex:none}
:where(:root[data-saul-theme]) #ieDrawer .btn:hover{background:var(--btn-dark),var(--hover);border-color:var(--line-strong)}
:where(:root[data-saul-theme]) #ieDrawer .btn svg.i{width:14px;height:14px}
:where(:root[data-saul-theme]) #ieDrawer .btn[disabled]{opacity:.42;cursor:not-allowed}
:where(:root[data-saul-theme]) #ieDrawer .btn[disabled]:hover{background:var(--glass);border-color:var(--line);filter:none}
:where(:root[data-saul-theme]) #ieDrawer .btn.pri{background:var(--act);border-color:transparent;color:var(--act-ink);box-shadow:var(--act-sh)}
:where(:root[data-saul-theme]) #ieDrawer .btn.pri:hover{background:linear-gradient(var(--btn-dark-hi),var(--btn-dark-hi)),var(--act);border-color:transparent}
:where(:root[data-saul-theme]) #ieDrawer .btn.pri[disabled]:hover{background:var(--act);border-color:transparent}
:where(:root[data-saul-theme]) #ieDrawer .btn.sm{height:28px;padding-inline:11px;font-size:12.5px}
:where(:root[data-saul-theme]) #ieDrawer .amt{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;display:inline-flex;align-items:baseline;gap:4px}
:where(:root[data-saul-theme]) #ieDrawer .amt .n{unicode-bidi:isolate}
:where(:root[data-saul-theme]) #ieDrawer .cur{font-size:.74em;font-variant-caps:all-small-caps;letter-spacing:.05em;color:var(--ink-3);font-weight:500}
:where(:root[data-saul-theme]) #ieDrawer .xs{font-size:11.5px}
:where(:root[data-saul-theme]) #ieDrawer .sm{font-size:12.5px}
:where(:root[data-saul-theme]) #ieDrawer .muted{color:var(--ink-3)}
:where(:root[data-saul-theme]) #ieDrawer .ink2{color:var(--ink-2)}
:where(:root[data-saul-theme]) #ieDrawer .mono{font-family:var(--f-mono);font-size:.93em;letter-spacing:-.01em}
:where(:root[data-saul-theme]) #ieDrawer .seg{display:inline-flex;gap:0;padding:3px;border-radius:99px;background:var(--sunken);border:1px solid var(--line-soft)}
:where(:root[data-saul-theme]) #ieDrawer .seg button{font:500 12.5px/1 var(--f-ui);padding:0 12px;height:26px;border:0;border-radius:99px;background:none;color:var(--ink-2);cursor:pointer}
:where(:root[data-saul-theme]) #ieDrawer .seg button.on{background:var(--float);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
:where(:root[data-saul-theme]) #ieDrawer .seg button[disabled]{opacity:.5;cursor:not-allowed}
:where(:root[data-saul-theme]) #ieDrawer .kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px 22px;margin:0}

/* ── §A · the activity log's History box on a CLASSIC page (inventory, invoices, users, the order drawer) ──
   The classes are the kit's (saul-ui.css "ACTIVITY"); a classic page does not load the kit file, so the same
   rules are stated here under the theme mark, on the theme's own tokens — no colour of their own. */
:where(:root[data-saul-theme]) .ah-box{margin-top:14px;border-radius:14px;background:var(--panel);box-shadow:var(--edge);overflow:hidden}
:where(:root[data-saul-theme]) .ah-box .ah-title{font:600 10.5px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:10px 14px;border-bottom:1px solid var(--line-soft)}
:where(:root[data-saul-theme]) .ah-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:9px 14px;border-top:1px solid var(--line-soft);cursor:pointer;font-size:13px}
:where(:root[data-saul-theme]) .ah-list>.ah-row:first-child{border-top:0}
:where(:root[data-saul-theme]) .ah-row:hover{background:var(--row-hover)}
:where(:root[data-saul-theme]) .ah-when{font:400 11.5px/1.5 var(--f-mono);color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
:where(:root[data-saul-theme]) .ah-who{font-weight:600;color:var(--ink);line-height:1.4}
:where(:root[data-saul-theme]) .ah-what{line-height:1.45;color:var(--ink-2)}
:where(:root[data-saul-theme]) .ah-what .ref{color:var(--ink);font-weight:600}
:where(:root[data-saul-theme]) .ah-when .ah-ago{display:block;font:400 11px/1.4 var(--f-ui);color:var(--ink-4)}
:where(:root[data-saul-theme]) .ah-day{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 14px 4px;font:600 11px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border-top:1px solid var(--line-soft)}
:where(:root[data-saul-theme]) .ah-day-n{font:400 12px/1.2 var(--f-ui);letter-spacing:0;text-transform:none;color:var(--ink-3)}
:where(:root[data-saul-theme]) .ah-title .ah-day-n{margin-inline-start:8px}
:where(:root[data-saul-theme]) .ah-chg{border-collapse:collapse;margin:6px 0;font-size:12px;max-width:100%}
:where(:root[data-saul-theme]) .ah-chg th{text-align:start;font-weight:600;color:var(--ink-3);padding-block:3px;padding-inline:0 12px;vertical-align:top;white-space:nowrap}
:where(:root[data-saul-theme]) .ah-chg td{padding:3px 0;color:var(--ink);overflow-wrap:anywhere}
:where(:root[data-saul-theme]) .ah-chg .ah-was{color:var(--ink-3);text-decoration:line-through}
:where(:root[data-saul-theme]) .ah-chg .ah-arrow{color:var(--ink-4);padding:0 4px}
:where(:root[data-saul-theme]) .ah-tech{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);border-top:1px dashed var(--line-soft);margin-top:6px;padding-top:6px}
:where(:root[data-saul-theme]) .ah-inline{min-width:0;max-width:100%;padding:0 0 12px}
:where(:root[data-saul-theme]) .ah-frag{unicode-bidi:isolate;display:inline-block;max-width:100%}
:where(:root[data-saul-theme]) .ah-sep{color:var(--ink-4)}
:where(:root[data-saul-theme]) .ah-box .ah-what,:where(:root[data-saul-theme]) .ah-box .ah-sum{white-space:normal;overflow-wrap:anywhere;word-break:normal}
:where(:root[data-saul-theme]) .ah-sum{font-size:12px;color:var(--ink-3);overflow-wrap:anywhere}
:where(:root[data-saul-theme]) .ah-imp{font-size:11px;color:var(--warn)}
:where(:root[data-saul-theme]) .ah-row .chip{justify-self:end;align-self:start;display:inline-flex;align-items:center;height:22px;padding-inline:8px;border-radius:99px;font:600 11px/1 var(--f-ui);white-space:nowrap;border:1px solid transparent}
:where(:root[data-saul-theme]) .ah-row .chip.pos{color:var(--pos);background:var(--pos-bg);border-color:var(--pos-line)}
:where(:root[data-saul-theme]) .ah-row .chip.neg{color:var(--neg);background:var(--neg-bg);border-color:var(--neg-line)}
:where(:root[data-saul-theme]) .ah-row .chip.warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
:where(:root[data-saul-theme]) .ah-detail{grid-column:1 / -1;display:none;font-size:12px;color:var(--ink-2);background:var(--sunken);border:1px solid var(--line-soft);border-radius:10px;padding:8px 10px}
:where(:root[data-saul-theme]) .ah-row.open .ah-detail{display:block}
:where(:root[data-saul-theme]) .ah-detail .kv{display:flex;gap:8px;padding:2px 0;margin:0}
:where(:root[data-saul-theme]) .ah-detail .kv b{min-width:60px;color:var(--ink-3);font-weight:600;flex:none}
:where(:root[data-saul-theme]) .ah-detail pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:400 11.5px/1.5 var(--f-mono);color:var(--ink)}
:where(:root[data-saul-theme]) .ah-detail a{color:var(--accent)}
:where(:root[data-saul-theme]) .ah-empty{padding:12px 14px;font-size:12.5px;color:var(--ink-3)}
:where(:root[data-saul-theme]) .ah-box .ah-more{padding:8px 14px;font-size:12px;border-top:1px solid var(--line-soft)}
:where(:root[data-saul-theme]) .ah-box .ah-more a{color:var(--accent);text-decoration:none}
@media(max-width:640px){:where(:root[data-saul-theme]) .ah-row{grid-template-columns:minmax(0,1fr) auto} :where(:root[data-saul-theme]) .ah-when{grid-column:1 / -1;order:3;display:flex;gap:8px} :where(:root[data-saul-theme]) .ah-when .ah-ago{display:inline}}

/* ── §B · WHO DID THIS on a CLASSIC page — the kit's component (saul-ui.css "WHO DID THIS") restated under the theme
   mark on the theme's own tokens, as §A does for the History box. No colour of its own. ── */
:where(:root[data-saul-theme]) .ae-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:where(:root[data-saul-theme]) .ae-end{margin-inline-start:auto;display:inline-flex}
:where(:root[data-saul-theme]) .ae-ic svg.i,:where(:root[data-saul-theme]) .ae-pop svg.i,:where(:root[data-saul-theme]) .ae-dr svg.i,:where(:root[data-saul-theme]) .ae-hbox svg.i{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
:where(:root[data-saul-theme]) .ae-ic{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;margin:0;border:1px solid var(--line);border-radius:9px;background:var(--glass);color:var(--ink-3);cursor:pointer;flex:none;position:relative;vertical-align:middle;box-shadow:var(--btn-glow);font:inherit;line-height:1}
:where(:root[data-saul-theme]) .ae-ic svg.i{width:16px;height:16px;margin:0;display:block}
:where(:root[data-saul-theme]) .ae-ic:hover{color:var(--ink);background:var(--hover)}
:where(:root[data-saul-theme]) .ae-ic[aria-expanded="true"]{background:var(--act);color:var(--act-ink);border-color:transparent;box-shadow:var(--act-sh)}
:where(:root[data-saul-theme]) .ae-ic:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:where(:root[data-saul-theme]) .ae-ic::after{content:attr(data-tip);position:absolute;top:50%;transform:translateY(-50%);inset-inline-end:calc(100% + 8px);padding:6px 9px;border-radius:8px;background:var(--ink);color:var(--surface);font:500 11.5px/1 var(--f-ui);letter-spacing:0;text-transform:none;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:5}
:where(:root[data-saul-theme]) .ae-ic:hover::after,:where(:root[data-saul-theme]) .ae-ic:focus-visible::after{opacity:1}
:where(:root[data-saul-theme]) .ae-ic[aria-expanded="true"]::after{opacity:0}
:where(:root[data-saul-theme]) td.ae-icn,:where(:root[data-saul-theme]) th.ae-icn{width:1%;white-space:nowrap;text-align:end}
:where(:root[data-saul-theme]) .ae-pop{position:fixed;z-index:2147483215;width:380px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);display:none;flex-direction:column;background:var(--float);-webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);border-radius:18px;box-shadow:var(--edge),var(--sh-3);overflow:hidden;outline:0;color:var(--ink);font:400 13.5px/1.45 var(--f-ui);text-align:start;letter-spacing:0;text-transform:none}
:where(:root[data-saul-theme]) .ae-pop.on{display:flex}
:where(:root[data-saul-theme]) .ae-grab{display:none}
:where(:root[data-saul-theme]) .ae-ph{display:flex;align-items:center;gap:12px;padding:14px 14px 12px 16px;border-bottom:1px solid var(--line-soft)}
:where(:root[data-saul-theme]) .ae-ph .ae-pt{flex:1;min-width:0}
:where(:root[data-saul-theme]) .ae-hico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--sunken);color:var(--ink-3);flex:none}
:where(:root[data-saul-theme]) .ae-hico svg.i{width:17px;height:17px;margin:0}
:where(:root[data-saul-theme]) .ae-t{font:600 10.5px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
:where(:root[data-saul-theme]) .ae-ph h3{margin:3px 0 0;font:600 15px/1.3 var(--f-ui);letter-spacing:0;color:var(--ink);overflow-wrap:anywhere}
:where(:root[data-saul-theme]) .ae-x{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;background:var(--glass);cursor:pointer;color:var(--ink-2);flex:none;padding:0;margin:0;box-shadow:var(--btn-glow)}
:where(:root[data-saul-theme]) .ae-x:hover{color:var(--ink);background:var(--btn-dark),var(--hover)}
:where(:root[data-saul-theme]) .ae-x svg.i{display:block;margin:0}
:where(:root[data-saul-theme]) .ae-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:where(:root[data-saul-theme]) .ae-body{overflow-y:auto;padding:2px 16px 4px;min-height:0}
:where(:root[data-saul-theme]) .ae-r{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 12px;padding:11px 0;border-top:1px solid var(--line-soft);align-items:start}
:where(:root[data-saul-theme]) .ae-r:first-child{border-top:0}
:where(:root[data-saul-theme]) .ae-av{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;font:600 11px/1 var(--f-ui);background:var(--glass);color:var(--ink-2);border:0;box-shadow:inset 0 0 0 1px var(--line)}
:where(:root[data-saul-theme]) .ae-av svg.i{width:15px;height:15px;margin:0}
:where(:root[data-saul-theme]) .ae-k{font:600 10.5px/1.2 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
:where(:root[data-saul-theme]) .ae-v{font-weight:600;font-size:13.5px;line-height:1.4;color:var(--ink)}
:where(:root[data-saul-theme]) .ae-role{font-weight:400;color:var(--ink-3)}
:where(:root[data-saul-theme]) .ae-s{font-size:12.5px;line-height:1.5;color:var(--ink-2);margin-top:1px}
:where(:root[data-saul-theme]) .ae-f{display:flex;flex-wrap:wrap;gap:8px;padding:11px 16px calc(13px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-soft);background:var(--sunken)}
:where(:root[data-saul-theme]) .ae-f .ae-btn{flex:1 1 0;min-width:0;white-space:nowrap}
:where(:root[data-saul-theme]) .ae-fn{font-size:12px;color:var(--ink-3);gap:8px;align-items:flex-start;flex-wrap:nowrap}
:where(:root[data-saul-theme]) .ae-fn svg.i{flex:none;margin-top:1px}
:where(:root[data-saul-theme]) .ae-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;padding-inline:11px;margin:0;border-radius:10px;border:1px solid var(--line);background:var(--glass);box-shadow:var(--btn-glow);transition:background .18s,box-shadow .18s;color:var(--ink);font:500 12.5px/1 var(--f-ui);cursor:pointer;white-space:nowrap;text-decoration:none;flex:none}
:where(:root[data-saul-theme]) .ae-btn:hover{background:var(--btn-dark),var(--hover);border-color:var(--line-strong)}
:where(:root[data-saul-theme]) .ae-btn svg.i{width:13px;height:13px}
:where(:root[data-saul-theme]) .ae-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
:where(:root[data-saul-theme]) .ae-back{display:block;transform:scaleX(-1)}
:where(:root[data-saul-theme][dir="rtl"]) .ae-back{transform:none}
:where(:root[data-saul-theme]) .ae-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding-inline:6px 9px;border-radius:99px;font:600 11.5px/1 var(--f-ui);white-space:nowrap;border:1px solid transparent;vertical-align:middle}
:where(:root[data-saul-theme]) .ae-chip svg.i{width:13px;height:13px;stroke-width:2}
:where(:root[data-saul-theme]) .ae-chip.info{color:var(--info);background:var(--info-bg);border-color:var(--info-line)}
:where(:root[data-saul-theme]) .ae-trail{list-style:none;margin:0;padding:6px 0 8px}
:where(:root[data-saul-theme]) .ae-step{position:relative;margin:0;padding:0}
:where(:root[data-saul-theme]) .ae-step::before{content:"";position:absolute;inset-inline-start:20px;top:36px;bottom:-4px;width:2px;background:var(--line)}
:where(:root[data-saul-theme]) .ae-step.last::before{display:none}
:where(:root[data-saul-theme]) .ae-stb{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:0 12px;align-items:start;width:100%;margin:0;padding:8px 6px;border:0;border-radius:12px;background:none;text-align:start;font:inherit;color:inherit;position:relative;box-shadow:none;height:auto;min-height:0}
:where(:root[data-saul-theme]) button.ae-stb{cursor:pointer}
:where(:root[data-saul-theme]) button.ae-stb:hover{background:var(--row-hover)}
:where(:root[data-saul-theme]) button.ae-stb:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
:where(:root[data-saul-theme]) .ae-dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--sunken);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line);position:relative;z-index:1}
:where(:root[data-saul-theme]) .ae-dot svg.i{width:15px;height:15px;margin:0}
:where(:root[data-saul-theme]) .ae-step.here .ae-dot{background:var(--act);color:var(--act-ink);box-shadow:none}
:where(:root[data-saul-theme]) .ae-step.here .ae-stb{background:var(--sunken)}
:where(:root[data-saul-theme]) .ae-sb{display:flex;flex-direction:column;gap:2px;min-width:0}
:where(:root[data-saul-theme]) .ae-st1{font-weight:600;font-size:13.5px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
:where(:root[data-saul-theme]) .ae-st1 .ae-chip{margin-inline-start:6px}
:where(:root[data-saul-theme]) .ae-st2{font-size:12.5px;line-height:1.45;color:var(--ink-3)}
:where(:root[data-saul-theme]) .ae-st2 b{font-weight:600;color:var(--ink-2)}
:where(:root[data-saul-theme]) .ae-sub{display:block}
:where(:root[data-saul-theme]) .ae-step.ae-locked .ae-st1{font-weight:500;color:var(--ink-3)}
:where(:root[data-saul-theme]) .ae-go{color:var(--ink-4);align-self:center;display:grid}
:where(:root[data-saul-theme]) .ae-go svg.i{width:14px;height:14px;margin:0}
:where(:root[data-saul-theme]) .ae-msg{padding:14px 0;font-size:13px;color:var(--ink-3)}
:where(:root[data-saul-theme]) .ae-n{unicode-bidi:isolate}
:where(:root[data-saul-theme]) .ae-scrim{position:fixed;inset:0;background:var(--scrim);z-index:2147483210;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
:where(:root[data-saul-theme]) .ae-scrim.on{opacity:1;visibility:visible}
:where(:root[data-saul-theme]) .ae-dr{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(560px,100%);background:var(--float);-webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);box-shadow:var(--sh-3);z-index:2147483212;transform:translateX(105%);transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility .28s;display:flex;flex-direction:column;border-inline-start:1px solid var(--line);visibility:hidden;padding-top:env(safe-area-inset-top,0px);color:var(--ink);font:400 13.5px/1.45 var(--f-ui);text-align:start}
:where(:root[data-saul-theme][dir="rtl"]) .ae-dr{transform:translateX(-105%)}
:where(:root[data-saul-theme]) .ae-dr.open,:where(:root[data-saul-theme][dir="rtl"]) .ae-dr.open{transform:none;visibility:visible}
:where(:root[data-saul-theme]) .ae-drh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
:where(:root[data-saul-theme]) .ae-drh .ae-cap{font:600 10.5px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
:where(:root[data-saul-theme]) .ae-drh h3{margin:6px 0 0;font:600 18px/1.3 var(--f-display);letter-spacing:-.012em;color:var(--ink);overflow-wrap:anywhere}
:where(:root[data-saul-theme]) .ae-drb{flex:1;overflow-y:auto;padding:0 0 calc(24px + env(safe-area-inset-bottom,0px))}
:where(:root[data-saul-theme]) .ae-dri{display:flex;flex-direction:column;gap:14px;padding:16px 20px 8px}
:where(:root[data-saul-theme]) .ae-hint{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
:where(:root[data-saul-theme]) .ae-card{position:relative;background:var(--panel);border-radius:14px;box-shadow:var(--edge),var(--lift);min-width:0;overflow:hidden}
:where(:root[data-saul-theme]) .ae-card .ah-count{padding:12px 20px 4px}
:where(:root[data-saul-theme]) .ah-row .chip{gap:5px}
:where(:root[data-saul-theme]) .ah-row .chip svg.i{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:where(:root[data-saul-theme]) .ae-card .ah-more{display:flex;justify-content:flex-start;padding:12px 20px;border-top:1px solid var(--line-soft);font-size:12.5px}
:where(:root[data-saul-theme]) .ae-card .ah-more a{color:var(--accent);text-decoration:none}
:where(:root[data-saul-theme]) .ae-card .ah-more a:hover{color:var(--accent-2);text-decoration:underline}
:where(:root[data-saul-theme]) .ae-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start}
:where(:root[data-saul-theme]) .ae-hbox .ae-hh{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 14px;margin:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer;box-shadow:none;height:auto}
:where(:root[data-saul-theme]) .ae-hbox .ae-hh:hover{background:var(--row-hover)}
:where(:root[data-saul-theme]) .ae-hbox .ae-hh:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
:where(:root[data-saul-theme]) .ae-hht{display:flex;align-items:center;gap:10px;min-width:0;font-size:13px;color:var(--ink-2);line-height:1.4;font-weight:400;letter-spacing:0;text-transform:none}
:where(:root[data-saul-theme]) .ae-hht svg.i{width:16px;height:16px;margin:0;flex:none;color:var(--ink-3)}
:where(:root[data-saul-theme]) .ae-hht>span{min-width:0;overflow-wrap:anywhere}
:where(:root[data-saul-theme]) .ae-hs{color:var(--ink-3)}
:where(:root[data-saul-theme]) .ae-hc{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--ink-3);flex:none;transition:transform .2s}
:where(:root[data-saul-theme]) .ae-hc svg.i{width:16px;height:16px;margin:0}
:where(:root[data-saul-theme]) .ae-hbox.open .ae-hc{transform:rotate(180deg)}
:where(:root[data-saul-theme]) .ae-hbox.open .ae-hh{border-bottom:1px solid var(--line-soft)}
:where(:root[data-saul-theme]) .ae-hbox [hidden]{display:none}
:where(:root[data-saul-theme]) .ae-mem{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 14px 12px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--ink-3);line-height:1.5}
:where(:root[data-saul-theme]) .ae-mem svg.i{flex:none;margin-top:2px}
:where(:root[data-saul-theme]) .ah-box .ah-sum{display:block}
:where(:root[data-saul-theme][dir="rtl"]) .ae-go svg.i{transform:scaleX(-1)}
:where(:root[data-saul-theme]) .ae-dr .chip{display:inline-flex;align-items:center;gap:5px}
:where(:root[data-saul-theme]) .ae-dr .chip svg.i{width:13px;height:13px;stroke-width:2}
:where(:root[data-saul-theme]) .ae-dr .ah-row{cursor:default}
:where(:root[data-saul-theme]) .ae-dr .ah-sum{display:block}
:where(:root[data-saul-theme]) .ae-hbox .ae-hh[disabled]{cursor:default}
:where(:root[data-saul-theme][lang="ar"]) .ae-t,:where(:root[data-saul-theme][lang="ar"]) .ae-k,:where(:root[data-saul-theme][lang="ar"]) .ae-drh .ae-cap{letter-spacing:0;font-size:11.5px}
@media (max-width:760px){
  :where(:root[data-saul-theme]) .ae-pop{inset:auto 0 0 0!important;width:auto;max-width:none;max-height:84vh;border-radius:22px 22px 0 0}
  :where(:root[data-saul-theme]) .ae-grab{display:block;width:40px;height:4px;border-radius:2px;background:var(--line-strong);margin:8px auto 0;flex:none}
  :where(:root[data-saul-theme]) .ae-body{padding-inline:16px}
  :where(:root[data-saul-theme]) .ae-ic{width:32px;height:32px}
  :where(:root[data-saul-theme]) .ae-ic::after{display:none}
  :where(:root[data-saul-theme]) .ae-hbox .ae-hh{padding:12px}
  :where(:root[data-saul-theme]) .ae-dri{padding-inline:14px}
}

/* ── the register rows as cards on a phone (.ixc-*) and the job title on Users & permissions (.ujt-*) — kit components (saul-ui.css), carried to the classic register pages (owner-approved mockup hudz-invoice-page-v1 s4/s6, 2026-10-12) ── */
:where(:root[data-saul-theme]) .ixc-only{display:none}:where(:root[data-saul-theme]) .ixc-lb{display:none}
@media (max-width:760px){:where(:root[data-saul-theme]) table.ixc-t>thead{display:none}:where(:root[data-saul-theme]) table.ixc-t,:where(:root[data-saul-theme]) table.ixc-t>tbody{display:block;width:100%}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px 12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line-soft)}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr:last-child{border-bottom:0}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr:hover>td{background:none}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td{display:block;padding:0!important;border:0!important;min-width:0!important;max-width:none!important;width:auto!important;text-align:start!important;white-space:normal!important}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td[colspan]{grid-column:1/-1}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td{background:transparent!important}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td.ixc-id a{color:var(--accent)!important;text-decoration:none}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td.ixc-x{display:none!important}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td.ixc-only{display:block!important}:where(:root[data-saul-theme]) table.ixc-t .ixc-lb{display:block!important;margin-bottom:2px;font:600 10px/1.2 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}:where(:root[data-saul-theme][lang="ar"]) table.ixc-t .ixc-lb{letter-spacing:0;font-size:11px}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td.ixc-id{grid-area:1/1;font-family:var(--f-mono);font-size:14px;font-weight:600}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td.ixc-ic{grid-area:1/2;justify-self:end;text-align:end!important}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td.ixc-k1{grid-area:2/1}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td.ixc-k2{grid-area:2/2;justify-self:end;text-align:end!important}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td.ixc-a1{grid-area:3/1}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td.ixc-a2{grid-area:3/2;justify-self:end;text-align:end!important}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td.ixc-s3{grid-area:3/1/auto/3}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td.ixc-b1{grid-area:4/1;font-size:12.5px;color:var(--ink-3)}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td.ixc-b2{grid-area:4/2;justify-self:end;text-align:end!important;font-size:12.5px;color:var(--ink-3)}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td.ixc-w{grid-column:1/-1}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td.ixc-full{grid-column:1/-1}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td.ixc-big,:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td.ixc-big .amt{font-size:20px;font-weight:600;color:var(--ink)}:where(:root[data-saul-theme]) table.ixc-t>tbody>tr>td.ixc-big .cur{font-size:11px}:where(:root[data-saul-theme]) table.ixc-t.ixc-flow>tbody>tr{align-items:start}
}
:where(:root[data-saul-theme]) .ujt-g{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}:where(:root[data-saul-theme]) .ujt-g input{box-sizing:border-box;width:100%;font:inherit;padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--card,var(--glass));color:var(--text,var(--ink))}:where(:root[data-saul-theme]) .ujt-h{font-size:11.5px;color:var(--ink-3);margin-top:3px}:where(:root[data-saul-theme]) .ujt-look{border-top:1px solid var(--line-soft);margin-top:14px;padding-top:12px}:where(:root[data-saul-theme]) .ujt-look-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:600;font-size:13.5px;margin-bottom:8px}:where(:root[data-saul-theme]) .ujt-look-h span{font-weight:400;font-size:11.5px;color:var(--ink-3);border:1px solid var(--line-soft);border-radius:99px;padding:2px 9px}:where(:root[data-saul-theme]) .ujt-lr{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:baseline;font-size:13px;padding:3px 0}:where(:root[data-saul-theme]) .ujt-lr>span:first-child{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}:where(:root[data-saul-theme][lang="ar"]) .ujt-lr>span:first-child{letter-spacing:0;font-size:11.5px}:where(:root[data-saul-theme]) .ujt-lr b{font-weight:600}:where(:root[data-saul-theme]) .ujt-save{font-size:12px;color:var(--ink-3);flex:1;align-self:center}:where(:root[data-saul-theme]) .ujt-tw{overflow-x:auto}:where(:root[data-saul-theme]) .ujt-tbl{width:100%;border-collapse:collapse;font-size:13px}:where(:root[data-saul-theme]) .ujt-tbl th{font-size:12px;font-weight:600;color:var(--ink-3);text-align:start;padding:9px 10px;border-bottom:1px solid var(--line)}:where(:root[data-saul-theme]) .ujt-tbl td{padding:9px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle;text-align:start}:where(:root[data-saul-theme]) .ujt-tbl tr.ujt-row{cursor:pointer}:where(:root[data-saul-theme]) .ujt-tbl tr.ujt-row:hover td{background:var(--row-hover)}:where(:root[data-saul-theme]) .ujt-nm{display:flex;gap:10px;align-items:center}:where(:root[data-saul-theme]) .ujt-av{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;flex:none}:where(:root[data-saul-theme]) .ujt-em{font-size:12px;color:var(--ink-3)}:where(:root[data-saul-theme]) .ujt-mut{color:var(--ink-3)}
@media (max-width:760px){:where(:root[data-saul-theme]) .ujt-g{grid-template-columns:1fr}:where(:root[data-saul-theme]) .ujt-lr{grid-template-columns:1fr;gap:2px}}

/* BACKFILL CARDS (hudz-backfill.js): layout only; every colour is an existing token. */
.hz-bf{margin-bottom:22px}
.hz-bf[hidden],[data-hz-backfill][hidden]{display:none}
.hz-bf-h{display:flex;flex-wrap:wrap;gap:10px 14px;padding:18px 20px 10px}
.hz-bf-b{padding:0 20px 18px}
.hz-bf h3{font-size:16px;line-height:1.3}
.hz-bf-meta{color:var(--ink-3);font-size:12.5px}
.hz-bf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:4px 0 14px}
.hz-bf-stats>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.hz-bf-stats b{font-size:20px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.hz-bf-stats span{font-size:12.5px;color:var(--ink-3)}
.hz-bf-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hz-bf-scroll table{width:100%;border-collapse:collapse;font-size:13.5px}
.hz-bf-scroll th{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);text-align:start;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.hz-bf-scroll td{padding:10px 12px;border-bottom:1px solid var(--line-soft)}
.hz-bf-scroll .hz-bf-r{text-align:end}
.hz-bf-scroll td:first-child,.hz-bf-scroll th:first-child{padding-inline-start:4px}
:root[lang="ar"] .hz-bf-scroll th{letter-spacing:0}
.hz-bf-skip{margin:6px 0 0;padding-inline-start:20px;font-size:13px;color:var(--ink-2)}
.hz-bf-act{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.hz-bf-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.hz-bf-wait{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hz-bf-err{margin-top:12px}
.hz-bf-ask{max-width:100%}
.hz-bf-ask>b{display:block;margin-bottom:2px}
