/* ════════════════════════════════════════════════════════════════════════════════════════════════
   HUDZ · THE BRAND — the logo, its light, the sidebar it lives on, and the two intro screens.
   Owner-APPROVED 2026-10-03 23:15 (glass-mockups/hudz-brand-v2.html is the reference; the values
   below are the owner's own — memory/hudz-brand.md). Markup: platform/hudz_logo.py (the server writes
   it) and static/hudz-brand.js (the system intro). A KIT stylesheet (qa/gates/saul_theme.py KIT): new
   components belong in the kit, with a Day and a Dusk value and an Arabic reading.

   Palette (the owner's board): cream #F8EFE4 · orange #FF8A3D · black #1A1714 · taupe #A69786.
   The brand orange is for the LOGO, THE GLOW and decoration only; buttons and orange TEXT keep the app's
   deeper accent (--act / --accent) so they stay readable.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── logo roles · Day (a light ground): dark blade, dark letters, a soft halo ── */
:root{
  --b-cream:#F8EFE4; --b-orange:#FF8A3D; --b-black:#1A1714; --b-taupe:#A69786;
  --f-brand:'Jost',-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,sans-serif;
  --mk-a:#1A1714; --wm:#1A1714; --hz-tagc:#4A433B;
  --gl-core:#FF8A3D; --core-o:0;
  --gl-far:rgba(255,138,61,.003); --gl-near:rgba(255,138,61,.516); --bk-halo:rgba(0,0,0,0);
  --spill-a:.217; --spill-b:.079;
  --in-bg:#F8EFE4; --in-ink:#1A1714;
  --in-veil:radial-gradient(80% 60% at 50% 116%,rgba(255,150,70,.30),transparent 70%),radial-gradient(120% 90% at 50% 40%,transparent 62%,rgba(150,100,60,.12));
}
/* …Dusk, and anywhere the ground is dark (the rail, the phone bars, a black tile): cream blade + cream
   letters, the full halo, light on the surface around it */
:root[data-theme="dark"],.rail,.sc-rail,.hz-on-dark{
  --mk-a:#F8EFE4; --wm:#F8EFE4; --hz-tagc:#CDC2B4;
  --gl-core:#FF8A3D; --core-o:0;
  --gl-far:rgba(255,138,61,.008); --gl-near:rgba(255,152,72,.933); --bk-halo:rgba(248,239,228,.337);
  --spill-a:.453; --spill-b:.158;
}
:root[data-theme="dark"]{
  --in-bg:#14100D; --in-ink:#F8EFE4;
  --in-veil:radial-gradient(70% 55% at 50% 118%,rgba(255,138,61,.20),transparent 70%),radial-gradient(120% 90% at 50% 40%,transparent 58%,rgba(0,0,0,.34));
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --mk-a:#F8EFE4; --wm:#F8EFE4; --hz-tagc:#CDC2B4;
  --gl-far:rgba(255,138,61,.008); --gl-near:rgba(255,152,72,.933); --bk-halo:rgba(248,239,228,.337);
  --spill-a:.453; --spill-b:.158;
  --in-bg:#14100D; --in-ink:#F8EFE4;
  --in-veil:radial-gradient(70% 55% at 50% 118%,rgba(255,138,61,.20),transparent 70%),radial-gradient(120% 90% at 50% 40%,transparent 58%,rgba(0,0,0,.34));
}}
/* ── the mark ── */
.hz-mark{display:block;overflow:visible;height:var(--h,96px);width:auto;aspect-ratio:270/1040;flex:none}
.hz-mark .bk{fill:var(--mk-a)}
.hz-mark .bk-h{fill:var(--bk-halo)}
.hz-mark .or{fill:var(--b-orange)}
.hz-mark .h-far{fill:var(--gl-far);opacity:.82}
.hz-mark .h-near{fill:var(--gl-near);opacity:.92}
.hz-mark .core{fill:var(--gl-core);opacity:var(--core-o)}
.hz-mark.mono .bk,.hz-mark.mono .or{fill:var(--mono)}
.hz-mark .hz-halo,.hz-mark .core-g{transform-box:fill-box;transform-origin:50% 50%}
/* breathing light — one 4 s cycle; the far halo widest, the core steadiest */
/* The halo layers are SVG blurs: every change of their opacity re-runs the blur. At 60 changes a second, on the
   rail, the top bar and the wordmark at once, the breathing alone kept a CPU core busy (backlog 76). The same
   ease-in-out curve is written out as 10 changes a second (steps between the eased stops) — the eye reads a slow
   4 s breath the same; the machine does a sixth of the work. The spill too: one smooth 60-a-second animation
   anywhere on the page keeps the whole page (and the glass behind it) being redrawn 60 times a second. */
@keyframes hz-br-far{0%{opacity:0.520}2.5%{opacity:0.522}5%{opacity:0.529}7.5%{opacity:0.542}10%{opacity:0.559}12.5%{opacity:0.582}15%{opacity:0.610}17.5%{opacity:0.643}20%{opacity:0.679}22.5%{opacity:0.719}25%{opacity:0.760}27.5%{opacity:0.801}30%{opacity:0.841}32.5%{opacity:0.877}35%{opacity:0.910}37.5%{opacity:0.938}40%{opacity:0.961}42.5%{opacity:0.978}45%{opacity:0.991}47.5%{opacity:0.998}50%{opacity:1.000}52.5%{opacity:0.998}55%{opacity:0.991}57.5%{opacity:0.978}60%{opacity:0.961}62.5%{opacity:0.938}65%{opacity:0.910}67.5%{opacity:0.877}70%{opacity:0.841}72.5%{opacity:0.801}75%{opacity:0.760}77.5%{opacity:0.719}80%{opacity:0.679}82.5%{opacity:0.643}85%{opacity:0.610}87.5%{opacity:0.582}90%{opacity:0.559}92.5%{opacity:0.542}95%{opacity:0.529}97.5%{opacity:0.522}100%{opacity:0.520}}
@keyframes hz-br-near{0%{opacity:0.700}2.5%{opacity:0.701}5%{opacity:0.706}7.5%{opacity:0.714}10%{opacity:0.724}12.5%{opacity:0.739}15%{opacity:0.756}17.5%{opacity:0.777}20%{opacity:0.800}22.5%{opacity:0.824}25%{opacity:0.850}27.5%{opacity:0.876}30%{opacity:0.900}32.5%{opacity:0.923}35%{opacity:0.944}37.5%{opacity:0.961}40%{opacity:0.976}42.5%{opacity:0.986}45%{opacity:0.994}47.5%{opacity:0.999}50%{opacity:1.000}52.5%{opacity:0.999}55%{opacity:0.994}57.5%{opacity:0.986}60%{opacity:0.976}62.5%{opacity:0.961}65%{opacity:0.944}67.5%{opacity:0.923}70%{opacity:0.900}72.5%{opacity:0.876}75%{opacity:0.850}77.5%{opacity:0.824}80%{opacity:0.800}82.5%{opacity:0.777}85%{opacity:0.756}87.5%{opacity:0.739}90%{opacity:0.724}92.5%{opacity:0.714}95%{opacity:0.706}97.5%{opacity:0.701}100%{opacity:0.700}}
@keyframes hz-br-core{0%{opacity:calc(var(--core-o)*0.840)}2.5%{opacity:calc(var(--core-o)*0.841)}5%{opacity:calc(var(--core-o)*0.843)}7.5%{opacity:calc(var(--core-o)*0.847)}10%{opacity:calc(var(--core-o)*0.853)}12.5%{opacity:calc(var(--core-o)*0.861)}15%{opacity:calc(var(--core-o)*0.870)}17.5%{opacity:calc(var(--core-o)*0.881)}20%{opacity:calc(var(--core-o)*0.893)}22.5%{opacity:calc(var(--core-o)*0.906)}25%{opacity:calc(var(--core-o)*0.920)}27.5%{opacity:calc(var(--core-o)*0.934)}30%{opacity:calc(var(--core-o)*0.947)}32.5%{opacity:calc(var(--core-o)*0.959)}35%{opacity:calc(var(--core-o)*0.970)}37.5%{opacity:calc(var(--core-o)*0.979)}40%{opacity:calc(var(--core-o)*0.987)}42.5%{opacity:calc(var(--core-o)*0.993)}45%{opacity:calc(var(--core-o)*0.997)}47.5%{opacity:calc(var(--core-o)*0.999)}50%{opacity:calc(var(--core-o)*1.000)}52.5%{opacity:calc(var(--core-o)*0.999)}55%{opacity:calc(var(--core-o)*0.997)}57.5%{opacity:calc(var(--core-o)*0.993)}60%{opacity:calc(var(--core-o)*0.987)}62.5%{opacity:calc(var(--core-o)*0.979)}65%{opacity:calc(var(--core-o)*0.970)}67.5%{opacity:calc(var(--core-o)*0.959)}70%{opacity:calc(var(--core-o)*0.947)}72.5%{opacity:calc(var(--core-o)*0.934)}75%{opacity:calc(var(--core-o)*0.920)}77.5%{opacity:calc(var(--core-o)*0.906)}80%{opacity:calc(var(--core-o)*0.893)}82.5%{opacity:calc(var(--core-o)*0.881)}85%{opacity:calc(var(--core-o)*0.870)}87.5%{opacity:calc(var(--core-o)*0.861)}90%{opacity:calc(var(--core-o)*0.853)}92.5%{opacity:calc(var(--core-o)*0.847)}95%{opacity:calc(var(--core-o)*0.843)}97.5%{opacity:calc(var(--core-o)*0.841)}100%{opacity:calc(var(--core-o)*0.840)}}
@keyframes hz-br-spill{0%{opacity:0.740;transform:scale(1.0000)}2.5%{opacity:0.741;transform:scale(1.0002)}5%{opacity:0.745;transform:scale(1.0010)}7.5%{opacity:0.752;transform:scale(1.0023)}10%{opacity:0.761;transform:scale(1.0041)}12.5%{opacity:0.774;transform:scale(1.0065)}15%{opacity:0.789;transform:scale(1.0094)}17.5%{opacity:0.806;transform:scale(1.0128)}20%{opacity:0.826;transform:scale(1.0166)}22.5%{opacity:0.848;transform:scale(1.0207)}25%{opacity:0.870;transform:scale(1.0250)}27.5%{opacity:0.892;transform:scale(1.0293)}30%{opacity:0.914;transform:scale(1.0334)}32.5%{opacity:0.934;transform:scale(1.0372)}35%{opacity:0.951;transform:scale(1.0406)}37.5%{opacity:0.966;transform:scale(1.0435)}40%{opacity:0.979;transform:scale(1.0459)}42.5%{opacity:0.988;transform:scale(1.0477)}45%{opacity:0.995;transform:scale(1.0490)}47.5%{opacity:0.999;transform:scale(1.0498)}50%{opacity:1.000;transform:scale(1.0500)}52.5%{opacity:0.999;transform:scale(1.0498)}55%{opacity:0.995;transform:scale(1.0490)}57.5%{opacity:0.988;transform:scale(1.0477)}60%{opacity:0.979;transform:scale(1.0459)}62.5%{opacity:0.966;transform:scale(1.0435)}65%{opacity:0.951;transform:scale(1.0406)}67.5%{opacity:0.934;transform:scale(1.0372)}70%{opacity:0.914;transform:scale(1.0334)}72.5%{opacity:0.892;transform:scale(1.0293)}75%{opacity:0.870;transform:scale(1.0250)}77.5%{opacity:0.848;transform:scale(1.0207)}80%{opacity:0.826;transform:scale(1.0166)}82.5%{opacity:0.806;transform:scale(1.0128)}85%{opacity:0.789;transform:scale(1.0094)}87.5%{opacity:0.774;transform:scale(1.0065)}90%{opacity:0.761;transform:scale(1.0041)}92.5%{opacity:0.752;transform:scale(1.0023)}95%{opacity:0.745;transform:scale(1.0010)}97.5%{opacity:0.741;transform:scale(1.0002)}100%{opacity:0.740;transform:scale(1.0000)}}
.hz-mark .h-far,.hz-wm .z-far{animation:hz-br-far 4s steps(1,end) infinite}
.hz-mark .h-near,.hz-wm .z-near{animation:hz-br-near 4s steps(1,end) -.4s infinite}
.hz-mark .core,.hz-wm .z-core{animation:hz-br-core 4s steps(1,end) -.2s infinite}
.hz-spill .sp{animation:hz-br-spill 4s steps(1,end) infinite}
/* reduced motion (the app's Experience "Motion: Reduced" OR the device's setting): the light stays lit,
   it just does not move */
:root[data-motion="reduced"] :is(.h-far,.h-near,.core,.sp,.z-far,.z-near,.z-core){animation:none!important}
/* nobody is using the page (static/hudz-rest.js): the light holds its frame, and moves on again at the first input */
:root[data-hz-rest] :is(.h-far,.h-near,.core,.sp,.z-far,.z-near,.z-core){animation-play-state:paused}
@media (prefers-reduced-motion:reduce){:is(.h-far,.h-near,.core,.sp,.z-far,.z-near,.z-core){animation:none!important}}

/* light spilling onto the surface around the blade (soft on Day, a real wash on Dusk) */
.hz-wrap{position:relative;display:block;isolation:isolate;flex:none}
.hz-spill{position:absolute;z-index:-1;pointer-events:none;left:80.6%;top:52%;width:calc(var(--h)*1.5*.454);height:calc(var(--h)*2.1*.454);margin:calc(var(--h)*-1.05*.454) 0 0 calc(var(--h)*-.75*.454)}
.hz-spill .sp{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,138,61,var(--spill-a)),rgba(255,138,61,calc(var(--spill-a)*.42)) 38%,rgba(255,138,61,calc(var(--spill-b)*.5)) 66%,transparent 100%)}
.hz-spill::after{content:"";position:absolute;left:34%;right:34%;top:14%;bottom:14%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,176,110,calc(var(--spill-a)*.9)),transparent);filter:blur(calc(var(--h)*.04))}
.hz-wrap.nospill .hz-spill{display:none}

/* ── the wordmark ── */
.hz-wm{display:block;overflow:visible;color:var(--wm);width:var(--wmw,280px);height:calc(var(--wmw,280px)*148/1120);flex:none}
.hz-wm .z-cream{fill:currentColor;opacity:0}
.hz-wm .z-far{fill:var(--gl-far);opacity:.8}
.hz-wm .z-near{fill:var(--gl-near);opacity:.9}
.hz-wm .z-body{fill:var(--b-orange)}
.hz-wm .z-core{stroke:var(--gl-core);fill:none;opacity:var(--core-o)}

/* ── lockups ── */
.hz-lk{--W:300px;position:relative;display:flex;flex-direction:column;align-items:center;flex:none}
.hz-lk.stack{gap:0}   /* the kit's own `.stack{gap:20px}` utility shares the class name: the lockup's spacing is the board's, set by the margins below */
.hz-lk.stack .hz-wrap{--h:calc(var(--W)*.74);height:var(--h);margin-bottom:calc(var(--W)*.093)}
.hz-lk .hz-wm{--wmw:var(--W)}
.hz-tg{margin-top:calc(var(--W)*.091);font:300 calc(var(--W)*.0486)/1 var(--f-brand);letter-spacing:.62em;padding-inline-start:.62em;text-transform:uppercase;color:var(--hz-tagc);white-space:nowrap}
:root[lang="ar"] .hz-tg{font-family:var(--f-ar,'IBM Plex Sans Arabic',-apple-system,system-ui,'Segoe UI',Tahoma,sans-serif);font-weight:300;letter-spacing:0;padding:0;text-transform:none;font-size:calc(var(--W)*.066)}
/* the horizontal lockup — board proportions; .ui = the sidebar cut (a bigger wordmark, optical small-size blades, heavier strokes) */
.hz-lk.h{--mh:calc(var(--W)*.64);--cap:calc(var(--W)*.132);flex-direction:row;align-items:center;gap:calc(var(--W)*.21)}
.hz-lk.h .hz-wrap{--h:var(--mh);height:var(--mh);margin:0}
.hz-lk.h .hz-wm{--wmw:calc(var(--cap)*7.5676)}
.hz-lk.h.ui{--mh:40px;--cap:13.5px;gap:13px}
.hz-lk.h .hz-tg{display:none}

/* ════════════ THE SIDEBAR (owner 2026-10-03 23:10) ════════════
   Solid brand black #1A1714 — no see-through haze, no backdrop blur, no white sheen, no grain — with
   the orange light rising from BELOW kept: a 1.5px hot orange edge at the foot and two warm radial
   blooms. The logo's orange is the one light on it. The same in Day and Dusk, on the full shell
   (.rail) and on a classic page's chrome (.sc-rail), wide, compact and as the phone's drawer. */
.rail,.sc.sc-rail{
  background:
    linear-gradient(90deg,transparent 6%,rgba(255,168,92,.9) 50%,transparent 94%) 50% 100%/100% 1.5px no-repeat,
    radial-gradient(120% 26% at 50% 106%,rgba(240,118,36,.5),rgba(228,108,32,.16) 52%,transparent 100%),
    radial-gradient(170% 62% at 50% 104%,rgba(214,96,30,.32),rgba(214,96,30,.08) 58%,transparent 90%),
    #1A1714;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:6px 0 28px -18px rgba(20,16,12,.5);
  --nav-on:rgba(255,255,255,.07); --nav-sh:none}
[dir="rtl"] .rail,[dir="rtl"] .sc.sc-rail{box-shadow:-6px 0 28px -18px rgba(20,16,12,.5)}
#saul-chrome-rail{--nav-on:rgba(255,255,255,.07);--nav-sh:none}
/* the column the full shell paints behind the (sticky) rail so it reads full height: the same black */
.app{background:linear-gradient(to right,#1A1714 0 var(--railw),transparent var(--railw)) no-repeat}
[dir="rtl"] .app{background:linear-gradient(to left,#1A1714 0 var(--railw),transparent var(--railw)) no-repeat}
.rail .entity{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.12)}
@media (max-width:760px){
  .app,[dir="rtl"] .app{background:none}
  .rail,:root[data-rail="closed"] .rail,.sc.sc-rail{
    background:
      linear-gradient(90deg,transparent 6%,rgba(255,168,92,.9) 50%,transparent 94%) 50% 100%/100% 1.5px no-repeat,
      radial-gradient(120% 26% at 50% 106%,rgba(240,118,36,.5),rgba(228,108,32,.16) 52%,transparent 100%),
      radial-gradient(170% 62% at 50% 104%,rgba(214,96,30,.32),rgba(214,96,30,.08) 58%,transparent 90%),
      #1A1714}
}

/* the brand header of the rail: the lockup — mark + HUDZ (the orange Z); folded = the mark alone */
.rail .brand,.sc-rail .sc-brand{padding:4px 8px 2px}
.rail .brand .hz-lk,.sc-rail .sc-brand .hz-lk{min-width:0}
.rail .brand .hz-lk.h.ui,.sc-rail .sc-brand .hz-lk.h.ui{gap:13px}
.sc-brand .sc-mark{width:auto;height:auto;background:none;box-shadow:none;border-radius:0;display:block;font:inherit;color:inherit!important}
@media (min-width:761px) and (max-width:900px){
  .rail .brand .hz-wm,.sc-rail .sc-brand .hz-wm{display:none}
  .rail .brand .hz-lk,.sc-rail .sc-brand .hz-lk{gap:0}
  .rail .nv.on::before{display:none}   /* the approved folded rail shows the active plate alone (the marker is for the wide rail) */
}

/* the top bar's own mark: the lockup on a phone; the mark alone on a wide screen where the reader folded the rail */
.top .mark,.sc-top .sc-mark{width:auto;height:auto;min-height:0;border-radius:0;background:none;box-shadow:none;color:inherit!important;font:inherit;padding:0 2px}
.top .mark .hz-lk.h,.sc-top .sc-mark .hz-lk.h{--mh:30px;--cap:10.5px;gap:10px}
.top .mark .hz-wm,.sc-top .sc-mark .hz-wm{display:none}
@media (max-width:760px){
  .top .mark .hz-wm,.sc-top .sc-mark .hz-wm{display:block}
  .top .mark,.sc-top .sc-mark{display:flex;align-items:center}
}

/* THE PHONE'S TOP BAR wears the SAME texture as the sidebar (owner 2026-10-04, "should also not have the
   white shadow that doesn't clear the black, orange and other colors in the bar"): solid brand black #1A1714 —
   no see-through haze, no backdrop blur, no white sheen / specular highlight / inset white shadow / light hairline
   — with the orange light rising from BELOW kept: a hot 1.5px edge at the bar's foot and a warm bloom, so the
   lockup's orange is the one light on it. The same in Day and Dusk (the sidebar is solid black in both), on the
   full shell's bar (`.top`, painted by its ::before) and on a classic page's (`.sc-top`).
   NO KIT TOKEN (--ink, --line, --surface, --glass, --accent …) is re-defined on the bar: the profile menu and the
   other popovers live INSIDE it and would inherit a dark bar's tokens (a light panel with cream text). Only the
   bar's own controls — the direct buttons and the avatar — are styled, explicitly, on quiet plates. */
@media (max-width:760px){
  .top,.sc-top{border-bottom:0;box-shadow:0 8px 24px -18px rgba(20,16,12,.6);
    --hz-bar:linear-gradient(90deg,transparent 6%,rgba(255,168,92,.9) 50%,transparent 94%) 50% 100%/100% 1.5px no-repeat,
      radial-gradient(70% 130% at 50% 122%,rgba(240,118,36,.4),rgba(228,108,32,.12) 55%,transparent 100%),
      #1A1714}
  .top::before{background:var(--hz-bar);-webkit-backdrop-filter:none;backdrop-filter:none}
  .sc-top{background:var(--hz-bar);-webkit-backdrop-filter:none;backdrop-filter:none}
  /* the lockup in the bar sits on black: the dark-ground role (cream blade + letters, the full halo) — brand tokens only */
  .top .mark,.sc-top .sc-mark{--mk-a:#F8EFE4; --wm:#F8EFE4; --hz-tagc:#CDC2B4; --gl-far:rgba(255,138,61,.008); --gl-near:rgba(255,152,72,.933);
    --bk-halo:rgba(248,239,228,.337); --spill-a:.453; --spill-b:.158}
  /* the bar's own buttons on quiet plates (direct controls only — never the menu's own theme button) */
  .top>.icb,.top .tools>.icb,.sc-top>.icb,.sc-top .sc-tools>.icb{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.08);box-shadow:none;color:#E6DDD2}
  .top>.icb:hover,.top .tools>.icb:hover,.sc-top>.icb:hover,.sc-top .sc-tools>.icb:hover{background:rgba(255,255,255,.1);color:#F4EFE8}
  .top .tools>#saul-ai.icb.ai,.sc-top .sc-tools>#saul-ai.icb.ai{border-color:rgba(255,255,255,.08);box-shadow:none}
  .top .tools>.icb>.cnt,.sc-top .sc-tools>.icb>.cnt{border-color:#1A1714}
  .top .avbtn>.av,.sc-top .avbtn>.av{background:rgba(242,237,230,.07);color:#D9D1C6;box-shadow:inset 0 0 0 1px rgba(242,237,230,.12)}
}

/* PHONE: the top bar carries the lockup (so the drawer's own header would only repeat it just below), the
   breadcrumbs make room for it (they stay in the page; the approved phone bar is mark · spacer · ✦ · inbox · you),
   and the drawer fits the screen — it was as tall as its links (≈1,080px), so its foot, its ember light and the last
   departments sat below the fold, unreachable (DEFECT-840) */
@media (max-width:760px){
  .top .crumbs,.sc-top .sc-crumbs{display:none}
  .top .tools,.sc-top .sc-tools{margin-inline-start:auto}
  .rail .brand,.sc-rail .sc-brand{display:none}
  .rail,:root[data-rail="closed"] .rail{max-height:calc(100vh - var(--drawer-top,58px));max-height:calc(100dvh - var(--drawer-top,58px))}
  .sc.sc-rail{max-height:calc(100vh - var(--drawer-top,0px));max-height:calc(100dvh - var(--drawer-top,0px))}
}

/* a classic page's own header (the "H" square the 60-odd classic templates draw in `.brand .mark`) wears the
   lit mark as an image — CSS only, no template or control changes; `ui.shell=classic` puts the old tile back */
:root{--hz-mark-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 -30 340 1100'%3E%3Cdefs%3E%3Cfilter id='n' x='-600%25' y='-20%25' width='1300%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='5.8'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M42 235C20 292-6 392-6 520C-6 668 10 800 37 910C53 830 62 690 62 540C62 410 56 310 42 235Z' fill='%231A1714'/%3E%3Cpath d='M213 5C228 130 252 330 252 530C252 720 232 900 207 1035C183 900 164 720 164 530C164 330 198 130 213 5Z' fill='%23FF8A3D' opacity='.516' filter='url(%23n)'/%3E%3Cpath d='M213 5C228 130 252 330 252 530C252 720 232 900 207 1035C183 900 164 720 164 530C164 330 198 130 213 5Z' fill='%23FF8A3D'/%3E%3C/svg%3E");--hz-wm-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-30 -40 1180 228'%3E%3Cdefs%3E%3Cfilter id='n' x='-60%25' y='-70%25' width='220%25' height='240%25'%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='%231A1714' stroke-width='21'%3E%3Cpath d='M10.5 0V148M169.5 0V148M10.5 74H169.5'/%3E%3Cpath transform='translate(335 0)' d='M10.5 0V60.5A77 77 0 0 0 164.5 60.5V0'/%3E%3Cpath transform='translate(655 0)' d='M10.5 0V148M0 10.5H106A63.5 63.5 0 0 1 106 137.5H0'/%3E%3C/g%3E%3Cg transform='translate(960 0)'%3E%3Cpolygon points='0,0 160,0 160,21 32.6,127 160,127 160,148 0,148 0,127 127.4,21 0,21' fill='%23FF8A3D' opacity='.516' filter='url(%23n)'/%3E%3Cpolygon points='0,0 160,0 160,21 32.6,127 160,127 160,148 0,148 0,127 127.4,21 0,21' fill='%23FF8A3D'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-theme="dark"]{--hz-mark-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 -30 340 1100'%3E%3Cdefs%3E%3Cfilter id='n' x='-600%25' y='-20%25' width='1300%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='5.8'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M42 235C20 292-6 392-6 520C-6 668 10 800 37 910C53 830 62 690 62 540C62 410 56 310 42 235Z' fill='rgba(248,239,228,.337)' filter='url(%23n)'/%3E%3Cpath d='M42 235C20 292-6 392-6 520C-6 668 10 800 37 910C53 830 62 690 62 540C62 410 56 310 42 235Z' fill='%23F8EFE4'/%3E%3Cpath d='M213 5C228 130 252 330 252 530C252 720 232 900 207 1035C183 900 164 720 164 530C164 330 198 130 213 5Z' fill='%23FF8A3D' opacity='.933' filter='url(%23n)'/%3E%3Cpath d='M213 5C228 130 252 330 252 530C252 720 232 900 207 1035C183 900 164 720 164 530C164 330 198 130 213 5Z' fill='%23FF8A3D'/%3E%3C/svg%3E");--hz-wm-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-30 -40 1180 228'%3E%3Cdefs%3E%3Cfilter id='n' x='-60%25' y='-70%25' width='220%25' height='240%25'%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='%23F8EFE4' stroke-width='21'%3E%3Cpath d='M10.5 0V148M169.5 0V148M10.5 74H169.5'/%3E%3Cpath transform='translate(335 0)' d='M10.5 0V60.5A77 77 0 0 0 164.5 60.5V0'/%3E%3Cpath transform='translate(655 0)' d='M10.5 0V148M0 10.5H106A63.5 63.5 0 0 1 106 137.5H0'/%3E%3C/g%3E%3Cg transform='translate(960 0)'%3E%3Cpolygon points='0,0 160,0 160,21 32.6,127 160,127 160,148 0,148 0,127 127.4,21 0,21' fill='%23FF8A3D' opacity='.933' filter='url(%23n)'/%3E%3Cpolygon points='0,0 160,0 160,21 32.6,127 160,127 160,148 0,148 0,127 127.4,21 0,21' fill='%23FF8A3D'/%3E%3C/g%3E%3C/svg%3E")}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--hz-mark-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 -30 340 1100'%3E%3Cdefs%3E%3Cfilter id='n' x='-600%25' y='-20%25' width='1300%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='5.8'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M42 235C20 292-6 392-6 520C-6 668 10 800 37 910C53 830 62 690 62 540C62 410 56 310 42 235Z' fill='rgba(248,239,228,.337)' filter='url(%23n)'/%3E%3Cpath d='M42 235C20 292-6 392-6 520C-6 668 10 800 37 910C53 830 62 690 62 540C62 410 56 310 42 235Z' fill='%23F8EFE4'/%3E%3Cpath d='M213 5C228 130 252 330 252 530C252 720 232 900 207 1035C183 900 164 720 164 530C164 330 198 130 213 5Z' fill='%23FF8A3D' opacity='.933' filter='url(%23n)'/%3E%3Cpath d='M213 5C228 130 252 330 252 530C252 720 232 900 207 1035C183 900 164 720 164 530C164 330 198 130 213 5Z' fill='%23FF8A3D'/%3E%3C/svg%3E");--hz-wm-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-30 -40 1180 228'%3E%3Cdefs%3E%3Cfilter id='n' x='-60%25' y='-70%25' width='220%25' height='240%25'%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='%23F8EFE4' stroke-width='21'%3E%3Cpath d='M10.5 0V148M169.5 0V148M10.5 74H169.5'/%3E%3Cpath transform='translate(335 0)' d='M10.5 0V60.5A77 77 0 0 0 164.5 60.5V0'/%3E%3Cpath transform='translate(655 0)' d='M10.5 0V148M0 10.5H106A63.5 63.5 0 0 1 106 137.5H0'/%3E%3C/g%3E%3Cg transform='translate(960 0)'%3E%3Cpolygon points='0,0 160,0 160,21 32.6,127 160,127 160,148 0,148 0,127 127.4,21 0,21' fill='%23FF8A3D' opacity='.933' filter='url(%23n)'/%3E%3Cpolygon points='0,0 160,0 160,21 32.6,127 160,127 160,148 0,148 0,127 127.4,21 0,21' fill='%23FF8A3D'/%3E%3C/g%3E%3C/svg%3E")}}
:root[data-saul-theme] body .brand .mark,:root[data-saul-shell="1"] body > header .brand .mark{
  font-size:0;line-height:0;color:transparent;background:var(--hz-mark-img) center/auto 82% no-repeat;box-shadow:none;border-radius:0}
/* the few classic headers that SPELL the product name as text beside the mark (connections, users, the refusal page — marked
   data-hz-wordmark): the approved wordmark, HUDZ with the lit Z, replaces the letters; the text stays in the page for readers and tests */
:root[data-saul-theme] body .brand .t[data-hz-wordmark]{font-size:0;line-height:0;letter-spacing:0;color:transparent;display:block;
  width:calc(var(--hz-wm-cap,13px)*7.973);height:calc(var(--hz-wm-cap,13px)*1.5405);margin:-2px 0;background:var(--hz-wm-img) 0 50%/contain no-repeat}
:root[dir="rtl"][data-saul-theme] body .brand .t[data-hz-wordmark]{background-position:100% 50%}
/* …and the assistant's loading orbit: the lit mark where the letter H sat */
:root[data-saul-theme] .hubload-orbit .mark,:root[data-saul-shell="1"] .hubload-orbit .mark{font-size:0;line-height:0;color:transparent;background:var(--hz-mark-img) 50% 50%/auto 46% no-repeat;box-shadow:none;border-radius:0}

/* ════════════ THE SYSTEM INTRO — plays full screen when HUDZ is opened fresh (static/hudz-brand.js) ════════════
   ~2.45 s: the split closes → the orange blade ignites → HUDZ spaces in, the Z lights up → A HIGHER VIEW →
   a bright edge sweeps across and reveals the page. Skippable at any moment (click, tap, any key).
   Reduced motion: a calm fade (the whole lit lockup arrives together, holds, dissolves — no sliding, no sweep).
   Every animation is !important-delayed so a frame can be frozen (--ft, --ps) for tests and screenshots. */
html[data-hz-intro="1"]::before{content:"";display:block;position:fixed;inset:0;z-index:2147483639;background:var(--in-bg);border-radius:0;box-shadow:none;opacity:1;width:auto;height:auto}
#hz-intro,#hz-intro *{animation-delay:calc(var(--d,0ms) - var(--ft,0ms))!important;animation-fill-mode:both!important;animation-play-state:var(--ps,running)!important}
#hz-intro{--ft:0ms;--ps:running;position:fixed;inset:0;z-index:2147483640;display:grid;place-items:center;overflow:hidden;cursor:pointer;color:var(--in-ink);background:var(--in-bg);user-select:none;-webkit-user-select:none;visibility:visible}
#hz-intro::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--in-veil)}
#hz-intro:focus,#hz-intro:focus-visible,#atr-intro:focus,#atr-intro:focus-visible{outline:none}
#hz-intro .hz-in-lock{position:relative;display:flex;flex-direction:column;align-items:center;z-index:2}
#hz-intro .hz-in-lock .hz-lk{--W:min(76vw,50vh)}
#hz-intro .hz-in-skip{position:absolute;z-index:6;inset-inline:0;bottom:16px;margin-inline:auto;width:max-content;max-width:90%;padding:7px 14px;border-radius:99px;font:500 11.5px/1 var(--f-ui,-apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif);letter-spacing:.02em;color:var(--in-ink);opacity:.62;
  background:rgba(128,118,108,.14);box-shadow:inset 0 0 0 1px rgba(128,118,108,.28);display:flex;gap:8px;align-items:center;pointer-events:none}
:root[lang="ar"] #hz-intro .hz-in-skip{font-family:var(--f-ar,'IBM Plex Sans Arabic',-apple-system,system-ui,sans-serif)}
#hz-intro .hz-in-sweep{position:absolute;z-index:5;top:-5%;bottom:-5%;width:30%;pointer-events:none;inset-inline-start:0;transform:translateX(var(--hz-sw0,-50%));
  background:linear-gradient(90deg,transparent,rgba(255,150,70,.0) 14%,rgba(255,160,90,.22) 38%,rgba(255,244,230,.96) 50%,rgba(255,160,90,.30) 56%,rgba(255,150,70,.0) 86%,transparent)}
:root[dir="rtl"] #hz-intro .hz-in-sweep{--hz-sw0:50%}   /* a custom property, not `transform`: scripts/test_i18n.py forbids an RTL rule on an id that sets transform / display / opacity / visibility (it would out-rank a `#id.state` rule) */
/* normal motion — 2.45 s */
#hz-intro:not(.rm){--d:1960ms;animation:hz-in-wipe 500ms cubic-bezier(.62,0,.22,1) both}
:root[dir="rtl"] #hz-intro:not(.rm){animation-name:hz-in-wipe-r}
@keyframes hz-in-wipe{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
@keyframes hz-in-wipe-r{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 100% 0 0)}}
#hz-intro:not(.rm) .hz-in-sweep{--d:1960ms;animation:hz-in-sweep 500ms cubic-bezier(.62,0,.22,1) both}
@keyframes hz-in-sweep{from{inset-inline-start:0%;opacity:0}8%{opacity:1}92%{opacity:1}to{inset-inline-start:100%;opacity:0}}
#hz-intro:not(.rm) .hz-in-skip{--d:500ms;animation:hz-in-fade .4s ease-out both}
@keyframes hz-in-fade{from{opacity:0}to{opacity:.62}}
/* 1 · the split closes */
#hz-intro:not(.rm) .bk-g{--d:140ms;animation:hz-in-bk 860ms cubic-bezier(.16,1,.3,1) both}
#hz-intro:not(.rm) .or-g{--d:140ms;animation:hz-in-or 860ms cubic-bezier(.16,1,.3,1) both}
@keyframes hz-in-bk{from{opacity:0;transform:translate(-200px,-40px)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes hz-in-or{from{opacity:0;transform:translate(200px,56px)}60%{opacity:1}to{opacity:1;transform:none}}
/* 2 · the orange blade ignites; its light blooms */
#hz-intro:not(.rm) .or{--d:880ms;animation:hz-in-dim 420ms ease-out both}
@keyframes hz-in-dim{from{opacity:.38}to{opacity:1}}
#hz-intro:not(.rm) .hz-halo{--d:880ms;animation:hz-in-flare 700ms cubic-bezier(.2,.7,.2,1) both}
@keyframes hz-in-flare{0%{opacity:0;transform:scale(.5,.86)}26%{opacity:1;transform:scale(1.9,1.05)}58%{opacity:.82;transform:scale(1.15,1)}100%{opacity:1;transform:none}}
#hz-intro:not(.rm) .core-g{--d:880ms;animation:hz-in-core 560ms ease-out both}
@keyframes hz-in-core{0%{opacity:0}30%{opacity:1}50%{opacity:.78}100%{opacity:1}}
#hz-intro:not(.rm) .bk-h{--d:880ms;animation:hz-in-core 700ms ease-out both}
#hz-intro:not(.rm) .hz-spill{--d:880ms;animation:hz-in-bloom 1100ms cubic-bezier(.2,.7,.2,1) both}
@keyframes hz-in-bloom{0%{opacity:0;transform:scale(.35)}24%{opacity:1;transform:scale(1.55)}100%{opacity:1;transform:scale(1)}}
/* 3 · HUDZ spaces in, letter by letter; the Z lights up */
#hz-intro:not(.rm) .L{animation:hz-in-let 560ms cubic-bezier(.2,.8,.2,1) both}
#hz-intro:not(.rm) .L1{--d:1230ms;--sx:130px}
#hz-intro:not(.rm) .L2{--d:1320ms;--sx:44px}
#hz-intro:not(.rm) .L3{--d:1410ms;--sx:-44px}
#hz-intro:not(.rm) .L4{--d:1500ms;--sx:-130px}
@keyframes hz-in-let{from{opacity:0;transform:translateX(var(--sx))}to{opacity:1;transform:none}}
#hz-intro:not(.rm) .z-cream{--d:1700ms;animation:hz-in-zc 260ms ease-in both}
@keyframes hz-in-zc{from{opacity:1}to{opacity:0}}
#hz-intro:not(.rm) .z-lit{--d:1700ms;animation:hz-in-zl 520ms ease-out both}
@keyframes hz-in-zl{0%{opacity:0}30%{opacity:1}52%{opacity:.8}100%{opacity:1}}
/* 4 · A HIGHER VIEW fades in */
#hz-intro:not(.rm) .hz-tg{--d:1760ms;animation:hz-in-tag 560ms cubic-bezier(.2,.8,.2,1) both}
@keyframes hz-in-tag{from{opacity:0;letter-spacing:.4em}to{opacity:1;letter-spacing:.62em}}
:root[lang="ar"] #hz-intro:not(.rm) .hz-tg{animation-name:hz-in-tag-ar}
@keyframes hz-in-tag-ar{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* reduced motion — a calm fade: the whole lit lockup arrives together, holds, and dissolves; no sliding, no sweep.
   Driven from hudz-brand.js with the Web Animations API (700 ms in, a hold, 420 ms out — 1.9 s in all), so the app's
   page-wide reduced-motion rules, which switch CSS animations off, leave it alone on purpose. */
#hz-intro.rm .hz-in-sweep{display:none}
#hz-intro.skipping{animation:none!important;transition:opacity .22s ease;opacity:0;pointer-events:none}
#hz-intro.skipping *{animation:none!important}
@media print{#hz-intro,html[data-hz-intro="1"]::before{display:none!important}}

/* ════════════ THE DEPARTMENT INTRO — "a blade of light, then the department" (static/atrium.js) ════════════
   The short screen shown when a main department is opened: the SAME orange blade as the logo, glowing beside
   the name. ~1.2 s, skippable (click, tap, any key), mirrored in Arabic. It veils the page's content area
   only — the rail and the top bar stay where they are (atrium.js measures them into --hz-di-*). */
#atr-intro{--ft:0ms;--ps:running;--d:960ms;--dx:-18px;position:fixed;z-index:1110;inset-block:var(--hz-di-top,0px) 0;inset-inline:var(--hz-di-start,0px) 0;
  display:grid;place-items:center;overflow:hidden;cursor:pointer;color:var(--ink,#1C1915);padding:0;
  background:var(--hz-di-veil);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  animation:hz-di-veil 280ms ease-in both}
:root[dir="rtl"] #atr-intro{--dx:18px}
:root{--hz-di-veil:linear-gradient(180deg,rgba(248,239,228,.9),rgba(246,236,224,.94));--hz-di-ink:#1C1915;--hz-di-ink-2:#4F4941;--hz-di-bar:rgba(28,25,21,.12)}
:root[data-theme="dark"]{--hz-di-veil:linear-gradient(180deg,rgba(26,20,16,.88),rgba(22,17,14,.93));--hz-di-ink:#F5F1EB;--hz-di-ink-2:#DAD3C9;--hz-di-bar:rgba(255,255,255,.14)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--hz-di-veil:linear-gradient(180deg,rgba(26,20,16,.88),rgba(22,17,14,.93));--hz-di-ink:#F5F1EB;--hz-di-ink-2:#DAD3C9;--hz-di-bar:rgba(255,255,255,.14)}}
#atr-intro,#atr-intro *{animation-delay:calc(var(--d,0ms) - var(--ft,0ms))!important;animation-fill-mode:both!important;animation-play-state:var(--ps,running)!important}
@keyframes hz-di-veil{from{opacity:1}to{opacity:0}}
#atr-intro .hz-di-g{position:relative;z-index:2;display:flex;align-items:center;gap:30px}
#atr-intro .hz-di-bl{--h:150px;display:block;position:relative}
#atr-intro .hz-di-bl svg.hz-mark{transform-origin:50% 50%;animation:hz-di-bl 480ms cubic-bezier(.2,.8,.2,1) both;--d:0ms}
@keyframes hz-di-bl{from{transform:scaleY(.06);opacity:0}to{transform:none;opacity:1}}
#atr-intro .hz-di-bl .hz-spill{left:50%;width:calc(var(--h)*3.4);height:calc(var(--h)*2.3);margin:calc(var(--h)*-1.15) 0 0 calc(var(--h)*-1.7);animation:hz-in-bloom 900ms cubic-bezier(.2,.7,.2,1) both;--d:240ms}
#atr-intro .hz-di-bl .hz-halo{animation:hz-di-ig 700ms cubic-bezier(.2,.7,.2,1) both;--d:240ms}
@keyframes hz-di-ig{0%{opacity:0;transform:scale(.6,.9)}30%{opacity:1;transform:scale(1.8,1.04)}60%{opacity:.85;transform:scale(1.12,1)}100%{opacity:1;transform:none}}
#atr-intro .hz-di-bl .core-g{animation:hz-in-core 560ms ease-out both;--d:240ms}
#atr-intro .hz-di-bl .or{animation:hz-in-dim 360ms ease-out both;--d:230ms}
#atr-intro .hz-di-tx{display:flex;flex-direction:column;gap:6px;min-width:0}
#atr-intro .hz-di-ey{display:flex;align-items:center;gap:9px;font:600 11.5px/1 var(--f-ui,-apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--hz-di-ink-2);animation:hz-di-in 420ms cubic-bezier(.2,.8,.2,1) both;--d:160ms}
:root[lang="ar"] #atr-intro .hz-di-ey{letter-spacing:0;font-size:13px;font-family:var(--f-ar,'IBM Plex Sans Arabic',-apple-system,system-ui,sans-serif)}
#atr-intro .hz-di-ey .ic{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:var(--chip-bg,rgba(255,255,255,.42));box-shadow:inset 0 0 0 1px var(--line,rgba(28,25,21,.1));color:var(--dc,var(--accent,#C25B38))}
#atr-intro .hz-di-ey .ic svg.i{width:15px;height:15px;stroke-width:2}
#atr-intro .hz-di-nm{margin:0;font:500 72px/1.02 var(--f-display,-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif);letter-spacing:-.034em;color:var(--hz-di-ink);animation:hz-di-name 560ms cubic-bezier(.2,.8,.2,1) both;--d:220ms}
:root[lang="ar"] #atr-intro .hz-di-nm{font:600 64px/1.25 var(--f-ar,'IBM Plex Sans Arabic',-apple-system,system-ui,sans-serif);letter-spacing:0;animation-name:hz-di-name-ar}
@keyframes hz-di-name{from{opacity:0;transform:translateX(var(--dx));letter-spacing:.02em}to{opacity:1;transform:none;letter-spacing:-.034em}}
@keyframes hz-di-name-ar{from{opacity:0;transform:translateX(var(--dx))}to{opacity:1;transform:none}}
@keyframes hz-di-in{from{opacity:0;transform:translateX(var(--dx))}to{opacity:1;transform:none}}
#atr-intro .hz-di-sb{font:400 16px/1.4 var(--f-ui,-apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif);color:var(--hz-di-ink-2);animation:hz-di-up 460ms cubic-bezier(.2,.8,.2,1) both;--d:460ms}
:root[lang="ar"] #atr-intro .hz-di-sb{font-family:var(--f-ar,'IBM Plex Sans Arabic',-apple-system,system-ui,sans-serif)}
@keyframes hz-di-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#atr-intro .hz-di-ln{position:relative;margin-top:10px;height:3px;border-radius:3px;background:var(--hz-di-bar);overflow:hidden}
#atr-intro .hz-di-ln i{position:absolute;inset-block:0;inset-inline-start:0;width:100%;border-radius:3px;transform-origin:var(--so,0%) 50%;
  background:linear-gradient(90deg,#FF8A3D,#FFC38A);box-shadow:0 0 10px 1px rgba(255,138,61,.8);animation:hz-di-ln 760ms cubic-bezier(.4,0,.2,1) both;--d:260ms}
:root[dir="rtl"] #atr-intro .hz-di-ln i{background:linear-gradient(270deg,#FF8A3D,#FFC38A);--so:100%}
@keyframes hz-di-ln{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#atr-intro .hz-di-sw{position:absolute;z-index:3;top:0;bottom:0;width:26%;pointer-events:none;inset-inline-start:0;transform:translateX(var(--hz-sw0,-50%));
  background:linear-gradient(90deg,transparent,rgba(255,170,100,.0) 10%,rgba(255,180,110,.22) 42%,rgba(255,238,218,.55) 50%,rgba(255,180,110,.22) 58%,transparent 90%);
  animation:hz-di-sw 520ms cubic-bezier(.5,0,.3,1) both;--d:560ms}
:root[dir="rtl"] #atr-intro .hz-di-sw{--hz-sw0:50%}
@keyframes hz-di-sw{from{inset-inline-start:0%;opacity:0}15%{opacity:1}85%{opacity:1}to{inset-inline-start:100%;opacity:0}}
#atr-intro.skipping{animation:none!important;transition:opacity .2s;opacity:0;pointer-events:none}
#atr-intro.skipping *{animation:none!important}
@media (max-width:760px){
  #atr-intro{--dx:0px}
  #atr-intro .hz-di-g{flex-direction:column;gap:20px;text-align:center}
  #atr-intro .hz-di-bl{--h:96px}
  #atr-intro .hz-di-tx{align-items:center}
  #atr-intro .hz-di-nm{font-size:46px}
  :root[lang="ar"] #atr-intro .hz-di-nm{font-size:44px}
  #atr-intro .hz-di-sb{font-size:14.5px}
  #atr-intro .hz-di-ln{width:200px}
  @keyframes hz-di-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media print{#atr-intro{display:none!important}}

/* ════════════ THE LOGIN — "the first thing people see" (templates/auth.html) ════════════
   The full lit lockup on the ground it was designed for, and a calm glass card for the form. Every control
   the page had (email or username, password, sign in, create a company, the sign-up fields) is still here. */
.hzl{position:relative;min-height:100vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;isolation:isolate}
.hzl-ground{position:fixed;inset:0;z-index:-2;
  background:radial-gradient(70% 70% at 22% 108%,rgba(255,146,64,.5),transparent 70%),radial-gradient(60% 60% at 80% -10%,rgba(255,190,120,.4),transparent 70%),linear-gradient(180deg,#FBF4EA,#F4E7D6)}
:root[data-theme="dark"] .hzl-ground{background:radial-gradient(60% 70% at 26% 100%,rgba(214,96,26,.5),transparent 70%),radial-gradient(50% 50% at 86% 0%,rgba(150,70,22,.34),transparent 70%),linear-gradient(180deg,#17120F,#120E0B)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hzl-ground{background:radial-gradient(60% 70% at 26% 100%,rgba(214,96,26,.5),transparent 70%),radial-gradient(50% 50% at 86% 0%,rgba(150,70,22,.34),transparent 70%),linear-gradient(180deg,#17120F,#120E0B)}}
.hzl-ground::after{content:"";position:absolute;inset:0;background:var(--grain-l) 0 0/160px;opacity:.5;mix-blend-mode:soft-light}
.hzl-h{display:grid;place-items:center;padding:30px}
.hzl-h .hz-lk{--W:min(360px,34vw)}
.hzl-f{display:grid;place-items:center;padding:30px 36px 30px 0}
:root[dir="rtl"] .hzl-f{padding:30px 0 30px 36px}
.hzl-c{width:min(410px,100%);position:relative;z-index:1}
.hzl-eye{position:absolute;inset-inline-end:6px;top:6px;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:10px;background:none;color:var(--ink-3,#625B51);cursor:pointer;padding:0}
.hzl-eye:hover{background:var(--hover,rgba(255,255,255,.7));color:var(--ink,#1C1915)}
.hzl-eye svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.hzl-pw{position:relative}
.hzl-pw input{padding-inline-end:46px}
/* the card and its form, as the approved login draws them: a calm glass card, sentence-case labels, tall soft fields, one button */
.hzl .hzl-c .card{padding:30px 28px 26px;border-radius:26px}
.hzl .hzl-c h1{font:600 22px/1.25 var(--f-display,var(--display,-apple-system,BlinkMacSystemFont,'Inter',system-ui,sans-serif));letter-spacing:-.02em;margin:0 0 6px}
:root[lang="ar"] .hzl .hzl-c h1{font-family:var(--f-ar,'IBM Plex Sans Arabic',-apple-system,system-ui,sans-serif);letter-spacing:0}
.hzl .hzl-c .sub{margin:0 0 20px;font-size:13.5px;line-height:1.5;color:var(--ink-2,var(--muted))}
.hzl .hzl-c .card label{font:600 12px/1.2 var(--f-ui,var(--body,-apple-system,system-ui,sans-serif));letter-spacing:0;text-transform:none;color:var(--ink-2,var(--muted));margin:0 0 7px}
:root[lang="ar"] .hzl .hzl-c .card label{font-family:var(--f-ar,'IBM Plex Sans Arabic',-apple-system,system-ui,sans-serif)}
.hzl .hzl-c .card input,.hzl .hzl-c .card select{height:46px;border:0;border-radius:13px;padding:0 14px;background:rgba(255,255,255,.62);color:var(--ink,var(--text));
  font:400 14.5px var(--f-ui,var(--body,-apple-system,system-ui,sans-serif));box-shadow:inset 0 0 0 1px var(--line,rgba(28,25,21,.1));margin-bottom:14px;outline:none}
:root[data-theme="dark"] .hzl .hzl-c .card input,:root[data-theme="dark"] .hzl .hzl-c .card select{background:rgba(12,12,14,.42)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hzl .hzl-c .card input,:root:not([data-theme="light"]) .hzl .hzl-c .card select{background:rgba(12,12,14,.42)}}
.hzl .hzl-c .card input::placeholder{color:var(--ink-3,var(--muted));opacity:.8}
.hzl .hzl-c .card input:focus,.hzl .hzl-c .card input:focus-visible,.hzl .hzl-c .card select:focus{border:0;box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px rgba(255,138,61,.18)}
.hzl .hzl-c .card .hzl-pw input{margin-bottom:14px}
.hzl .hzl-c .card .go{height:46px;padding:0;border-radius:13px;font-size:14.5px;background:var(--act,var(--accent));color:var(--act-ink,var(--accent-ink))}
.hzl .hzl-c .card .go:hover{background:var(--act-hover,var(--accent-bright))}   /* the action colour (terracotta by day, coral by dusk) — not the brighter orange text accent, which is for text and the glow */
.hzl .hzl-c .card .alt{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft,rgba(28,25,21,.06));display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;text-align:start;color:var(--ink-3,var(--muted))}
.hzl .hzl-c .card .alt a{font-weight:600}
.hzl .hzl-c .card .alt .hzl-bw{font-weight:500;letter-spacing:.12em}
.hzl .hzl-c .foot{margin-top:18px}
@media (max-width:760px){
  .hzl{grid-template-columns:minmax(0,1fr);align-content:center;padding:26px 0}
  .hzl-h{padding:6px 20px 14px}
  .hzl-h .hz-lk{--W:min(250px,64vw)}
  .hzl-f,:root[dir="rtl"] .hzl-f{padding:0 16px}
}

/* ════════════ STATUS GLOW — a status shines from behind the glass (owner 2026-10-04 14:00) ════════════
   "Each card should have a colour as if it's shining behind the glass, fading." The approved brand board's tiles tint
   their whole small face from the top-start corner (a 150×96 ellipse on a ≈182×119 tile = 82% × 81%); on the live system's
   real, much wider cards the same fixed 150×96 patch was a speck. The glow is now sized in PROPORTION to the card or tile
   (85% × 82% of it), so a wide card is as tinted as the board's small one; RTL starts it on the right. It is the status
   colour only — the kit's pos / warn / neg glow, which the kit hands a card as `--tg` (its worst-thing rule, `.hc.pos` …) and
   which the HQ department tiles take from their own `data-tone` through the brand's `--hz-tile-glow` (the brand never
   defines a kit token: qa/gates/brand_tokens.py). No status, no glow: transparent, neutral glass exactly as before. The 2px
   edge keeps the kit's colour (`--te`). CSS only: no markup, link, id or behaviour changes. */
.card::before,.hc::before{background:radial-gradient(85% 82% at 0 0,var(--tg,transparent),transparent 100%)}
[dir="rtl"] :is(.card,.hc)::before{background:radial-gradient(85% 82% at 100% 0,var(--tg,transparent),transparent 100%)}

/* HQ · Company health: each department square is its own glass tile (the board's tile), with its status glow and edge — the same
   squares, order, text, links, hover (a lift, as every tile) and phone grid; they were flat cells divided by hairlines in one card */
.hq-strip{gap:12px;padding:2px 20px 20px}
.hq-strip .hq-dep{isolation:isolate;padding:15px 16px 16px;gap:12px;border-radius:20px;background:var(--tile-sheen),var(--plate);box-shadow:var(--edge),var(--lift);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));backdrop-filter:blur(var(--blur)) saturate(var(--sat));transition:box-shadow .25s,background .2s}
.hq-strip .hq-dep:hover{background:var(--tile-sheen),var(--hover);box-shadow:var(--edge),var(--tile-hover)}
.hq-strip .hq-dep::before,.hq-strip .hq-dep+.hq-dep::before,.hq-strip .hq-dep:nth-child(4n+1)::before{content:"";display:block;position:absolute;inset:0;width:auto;height:auto;
  border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(85% 82% at 0 0,var(--hz-tile-glow,transparent),transparent 100%)}
[dir="rtl"] .hq-strip .hq-dep::before,[dir="rtl"] .hq-strip .hq-dep+.hq-dep::before,[dir="rtl"] .hq-strip .hq-dep:nth-child(4n+1)::before{background:radial-gradient(85% 82% at 100% 0,var(--hz-tile-glow,transparent),transparent 100%)}
.hq-strip .hq-dep::after{inset-inline-start:16px;width:min(46%,180px);background:linear-gradient(90deg,var(--te,transparent),transparent)}
[dir="rtl"] .hq-strip .hq-dep::after{background:linear-gradient(270deg,var(--te,transparent),transparent)}
.hq-dep[data-tone="pos"]{--hz-tile-glow:var(--pos-glow)} .hq-dep[data-tone="warn"]{--hz-tile-glow:var(--warn-glow)} .hq-dep[data-tone="neg"]{--hz-tile-glow:var(--neg-glow)}
.hq-strip .hq-dep[data-tone="neg"]::before{animation:ember-breathe 6s ease-in-out infinite alternate}
/* HQ · the compact health card's department chips are the same glass tiles (owner 2026-10-18: "glass"), the strip's rule
   carried over — the plate, the sheen, the edge and lift, the status glow from the start corner, the edge line; existing tokens only */
.hs-chips .hs-dc{position:relative;isolation:isolate;border:0;border-radius:18px;padding:9px 14px;background:var(--tile-sheen),var(--plate);
  box-shadow:var(--edge),var(--lift);-webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  transition:box-shadow .25s,background .2s}
.hs-chips a.hs-dc:hover{background:var(--tile-sheen),var(--hover);box-shadow:var(--edge),var(--tile-hover)}
.hs-chips .hs-dc::before{content:"";display:block;position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(85% 82% at 0 0,var(--hz-tile-glow,transparent),transparent 100%)}
[dir="rtl"] .hs-chips .hs-dc::before{background:radial-gradient(85% 82% at 100% 0,var(--hz-tile-glow,transparent),transparent 100%)}
.hs-chips .hs-dc::after{content:"";position:absolute;top:0;inset-inline-start:14px;width:min(46%,60px);height:2px;border-radius:0 0 2px 2px;
  background:linear-gradient(90deg,var(--hz-tile-edge,transparent),transparent)}
[dir="rtl"] .hs-chips .hs-dc::after{background:linear-gradient(270deg,var(--hz-tile-edge,transparent),transparent)}
.hs-dc[data-tone="pos"]{--hz-tile-glow:var(--pos-glow);--hz-tile-edge:var(--pos-edge)} .hs-dc[data-tone="warn"]{--hz-tile-glow:var(--warn-glow);--hz-tile-edge:var(--warn-edge)}
.hs-dc[data-tone="neg"]{--hz-tile-glow:var(--neg-glow);--hz-tile-edge:var(--neg-edge)}
.hs-chips .hs-dc[data-tone="neg"]::before{animation:ember-breathe 6s ease-in-out infinite alternate}
@media (max-width:760px){
  .hq-strip{gap:10px;padding:2px 14px 14px}
  .hq-strip .hq-dep{padding:13px 14px;gap:9px;border-radius:18px}
}