/* ═══════════════════════════════════════════════════════════════════════════
   TARTIB SHELL — OrderTech's look for every Tartib app
   brand/tartib-shell.css → /brand/tartib-shell.css
   (after tartib-tokens.css, tartib-ui.css and the page's own <style>)

   Hussain, 30 Sep 2026: "lets fully re-design Tartib (koobs.tartib.app) and the
   rest of the tenants and make the page Style and same as OrderTech which we
   make look like Zoho Inventory but with deferent themes to choose from, for
   Tartib HR console lets make it same style with a simple touch of deferance"
   — and "take some idea from zoho people". He chose the Zoho People rail for
   HR: a slim icon rail with labels, each module's pages as tabs under the bar.

   ⚠️ OPT-IN, AND NOTHING HAPPENS WITHOUT IT. Every rule is under html.zs, so a
   page that links this file and does not put class="zs" on <html> looks exactly
   as it did. The hub, Assets and Loyalty link the same tokens and components
   and move over one at a time by adding the class.

   ⚠️ ORDERTECH'S NUMBERS, NOT A LOOKALIKE. The tokens below are the ones in
   console.ordertech.me (measured off Zoho Inventory on 30 Sep 2026) — the same
   48px bar, 13px body, 11px column heads, 18px page titles, 32px buttons at
   radius 5 — and the ten themes are the same ten, token for token. Tartib's
   own component classes (.card, .btn, .pill, table…) are re-pointed at those
   tokens, so every screen that already exists changes with nothing rewritten.

   ⚠️ A THEME IS TOKENS, NOT A SECOND STYLESHEET — OrderTech learnt that one
   the hard way (its first dark mode was a copy of every rule and left white
   tiles). Themes and dark mode below only redefine --z-* and --tc-*.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ 1 · TOKENS — number 1, Classic, the structural reference ═══════════════
   On html.zs AND .zs-mini: the miniatures on the Theme tab carry data-style
   themselves, so each one paints with its own theme's real tokens. */
/* ⚠️ THE COMPANY'S COLOUR ON html ONLY. The page writes it there (inline, from
   /v1/branding); a miniature that defined its own would paint every theme on
   the Theme tab in this fallback blue instead of the company's colour. */
html.zs{ --tc:#1A73E8; --tc-strong:#1A73E8; }
html.zs, .zs-mini{
  --tc-deep:color-mix(in srgb,var(--tc-strong) 80%,#000);
  --tc-ink:color-mix(in srgb,var(--tc-strong) 72%,#000);
  --tc-tint:color-mix(in srgb,var(--tc) 14%,#fff);
  --tc-wash:color-mix(in srgb,var(--tc) 9%,#fff);

  --top:48px;
  --zr-w:72px;              /* the rail */
  --zt-h:44px;              /* the module's tabs */
  --z-bar:#21263C; --z-bar-line:#181C2E; --z-bar-rule:transparent; --z-bar-2:#333850;
  --z-bar-ink:#F0F0F0; --z-bar-mute:#C6C9D8; --z-bar-ph:#9EA2B8; --z-bar-hover:rgba(255,255,255,.10);
  --z-qc:var(--tc-strong); --z-qc-ink:#fff; --z-avatar:#6C5CE7; --z-av-ring:var(--z-bar);
  --z-side:#F7F7FE; --z-side-line:#EAEAFB; --z-side-ink:#181C2E; --z-side-sub:#181C2E; --z-side-mute:#4C526C;
  --z-side-hover:#EBEBF9; --z-side-open:#EAEAFB; --z-side-on:var(--tc-strong); --z-side-on-ink:#fff;
  --z-side-here:var(--tc-strong);
  --z-canvas:#FFFFFF; --z-pbar:#FFFFFF; --z-pbar-line:#EBEAF2; --z-pbar-h:56px; --z-pbar-rule:1px;
  --z-rail-col:#262B40; --z-pill:var(--tc-strong); --z-link:#1C5BD9;
  --z-line:#E4E4EC; --z-line-2:#EBEAF2; --z-head:#F9F9FB; --z-th-ink:#6C718A; --z-cell:#3A3F57;
  --z-ink:#212529; --z-sub:#6C718A;
  --z-bg:#FFFFFF; --z-hover:#F1F1FA; --z-sel:color-mix(in srgb,var(--tc) 9%,#fff); --z-field-line:#DDDDDD;
  --z-btn:#F5F5F5; --z-btn-line:#DDDDDD; --z-btn-hover:#ECECEC;
  --z-green:#1e8a4c; --z-blue:#1a66d6; --z-amber:#b45f06; --z-red:#c93b3b;
  --z-thumb:32px;
  --z-font:Almarai,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* one type scale, one icon scale — Zoho's, as OrderTech's */
  --t-xs:11px; --t-sm:12px; --t-md:13px; --t-lg:16px; --t-xl:18px; --t-2xl:22px; --t-3xl:28px; --t-4xl:36px;
  --ic-xs:10px; --ic-sm:14px; --ic-md:16px; --ic-lg:16px;
  --z-fs:var(--t-md); --z-lh:1.6;
  --z-radius:6px; --z-btn-radius:5px;
  --z-shadow:0 1px 2px rgba(31,30,29,.06),0 1px 3px rgba(31,30,29,.05);
  /* rule 15 (13 Oct 2026): rows at working density on every page — what the "Compact" style alone had (11px 15px before) */
  --z-rowpad:7px 12px; --z-thpad:7px 12px;
}

/* ── Tartib's own vocabulary, re-pointed at those ─────────────────────────
   ⚠️ ON BODY AS WELL AS HTML. tartib-tokens.css sets each module's accent on
   [data-app="hr"], and topbar() writes that attribute on <body> too — so a
   value set only on <html> is overridden one element down, and every
   var(--accent) in the page would still read HR's old teal. */
html.zs, html.zs body{
  --bg:var(--z-canvas); --surface:var(--z-bg); --surface-2:var(--z-hover);
  --line:var(--z-line); --line-soft:var(--z-line-2);
  --ink:var(--z-ink); --body:var(--z-ink); --mute:var(--z-sub);
  --accent:var(--tc-strong); --accent-deep:var(--z-link); --accent-ink:var(--tc-strong);
  --accent-wash:var(--tc-wash); --accent-on:#fff;
  --r:var(--z-radius); --r-sm:5px; --shadow:var(--z-shadow);
  --shadow-md:0 4px 14px rgba(20,24,40,.10); --shadow-lg:0 18px 48px rgba(20,24,40,.16);
  --sans:var(--z-font);
}

/* ══ 2 · THE THEMES ═════════════════════════════════════════════════════════
   The ten are OrderTech's, token for token, so a person who chose Night there
   finds Night here. People is Tartib HR's own, and its default: the Zoho People
   shell — a navy bar over a navy rail — around a soft grey page. */
:is(html.zs,.zs-mini)[data-style="people"]{
  --z-bar:#243152; --z-bar-line:#1B2642; --z-bar-2:rgba(255,255,255,.12); --z-bar-ph:#AEB7CC;
  --z-bar-ink:#F3F5FA; --z-bar-mute:#C9D0E0; --z-bar-hover:rgba(255,255,255,.12); --z-av-ring:#243152;
  --z-side:#1B2642; --z-side-line:#1B2642; --z-side-ink:#E4E8F2; --z-side-sub:#E4E8F2; --z-side-mute:#AFB8CD;
  --z-side-hover:rgba(255,255,255,.08); --z-side-open:rgba(255,255,255,.10);
  --z-side-here:color-mix(in srgb,var(--tc) 55%,#fff);
  --z-canvas:#F3F5F9; --z-pbar:#FFFFFF; --z-pbar-line:#E6E9F0; --z-head:#F7F8FB; --z-hover:#F2F5FA;
  --z-line-2:#ECEFF4;
}
:is(html.zs,.zs-mini)[data-style="classic"]{ /* the tokens above */ }
:is(html.zs,.zs-mini)[data-style="night"]{
  --z-bar:color-mix(in srgb,var(--tc) 36%,#0d0f0d); --z-bar-line:color-mix(in srgb,var(--tc) 26%,#000);
  --z-bar-ink:#F3F5F1; --z-bar-mute:#D3DBD3; --z-bar-2:rgba(255,255,255,.10); --z-bar-ph:#AAB6AA;
  --z-side:#FCFAED; --z-side-line:#ECE7D6; --z-side-hover:#F3EFDF; --z-side-open:#EFEAD8;
  --z-side-mute:color-mix(in srgb,var(--tc-strong) 70%,#333);
  --z-head:#FAF8EF; --z-hover:#F4F2E7; --z-line-2:#EEEADF; --z-link:var(--tc-ink); --z-avatar:#8C6D4A;
}
:is(html.zs,.zs-mini)[data-style="lightbar"]{
  --z-bar:#FFFFFF; --z-bar-line:#E6E8EC; --z-bar-rule:var(--tc); --z-bar-ink:#202124; --z-bar-mute:#5F6368;
  --z-bar-hover:#F1F3F4; --z-bar-2:#F1F3F4; --z-bar-ph:#80868B; --z-av-ring:#FFFFFF;
  --z-side:#FFFFFF; --z-side-line:#EEF0F2; --z-side-hover:#F4F5F6; --z-side-open:#F4F5F6; --z-side-mute:#5F6368;
  --z-side-on:color-mix(in srgb,var(--tc) 15%,#fff); --z-side-on-ink:var(--tc-ink);
  --z-canvas:#F8F9FA; --z-pbar:#FFFFFF; --z-head:#FFFFFF; --z-hover:color-mix(in srgb,var(--tc) 7%,#fff);
  --z-line-2:#EEF0F2; --z-link:#1A73E8;
}
:is(html.zs,.zs-mini)[data-style="brandband"]{ --z-pbar:var(--tc-wash); --z-pbar-line:var(--tc); --z-pbar-rule:2px; }
:is(html.zs,.zs-mini)[data-style="compact"]{
  --top:44px; --zr-w:64px; --zt-h:40px; --z-pbar-h:48px; --z-thpad:7px 12px; --z-rowpad:7px 12px; --z-thumb:28px;
}
:is(html.zs,.zs-mini)[data-style="darkside"]{
  --z-bar:#FFFFFF; --z-bar-line:#E6E8EC; --z-bar-ink:#202124; --z-bar-mute:#5F6368; --z-bar-hover:#F1F3F4;
  --z-bar-2:#F1F3F4; --z-bar-ph:#80868B; --z-av-ring:#FFFFFF;
  --z-side:#1F2433; --z-side-line:#1F2433; --z-side-ink:#D9DCE6; --z-side-sub:#C3C7D4; --z-side-mute:#9CA2B8;
  --z-side-hover:rgba(255,255,255,.07); --z-side-open:rgba(255,255,255,.09);
  --z-side-here:color-mix(in srgb,var(--tc) 55%,#fff);
}
:is(html.zs,.zs-mini)[data-style="rail"]{
  --z-side:#262B40; --z-side-line:#262B40; --z-side-ink:#E6E8F2; --z-side-sub:#E6E8F2; --z-side-mute:#A9AEC4;
  --z-side-hover:rgba(255,255,255,.07); --z-side-open:rgba(255,255,255,.12);
}
:is(html.zs,.zs-mini)[data-style="card"]{
  --z-canvas:#F1F2F6; --z-side:#F1F2F6; --z-side-line:#F1F2F6; --z-side-hover:#E6E8EF; --z-side-open:#E6E8EF;
}
:is(html.zs,.zs-mini)[data-style="brandtop"]{
  --z-bar:var(--tc-strong); --z-bar-line:var(--tc-deep); --z-bar-ink:#FFFFFF; --z-bar-mute:#F2F5F2;
  --z-bar-hover:rgba(255,255,255,.16); --z-bar-2:rgba(255,255,255,.18); --z-bar-ph:#E3E9E3;
  --z-qc:#FFFFFF; --z-qc-ink:var(--tc-deep); --z-av-ring:#FFFFFF; --z-avatar:#2D2A26;
  --z-side:#F6F7F9; --z-side-line:color-mix(in srgb,var(--tc) 12%,#fff); --z-side-hover:color-mix(in srgb,var(--tc) 8%,#fff);
  --z-side-open:color-mix(in srgb,var(--tc) 12%,#fff); --z-side-mute:color-mix(in srgb,var(--tc-strong) 80%,#222);
  --z-side-on:var(--tc-deep); --z-side-here:var(--tc-deep);
  --z-head:color-mix(in srgb,var(--tc) 5%,#fff); --z-hover:color-mix(in srgb,var(--tc) 9%,#fff);
  --z-line-2:color-mix(in srgb,var(--tc) 12%,#fff); --z-link:var(--tc-ink);
}

/* ── dark: one palette, OrderTech's warm greys ────────────────────────────
   Every colour above is a token, so this is the whole of dark mode for every
   theme; each theme keeps only what makes it itself (its bar colour, its line,
   its band, its shape). The semantic four lift the way OrderTech's do — the
   light inks measure under 2:1 on a near-black panel. */
html.zs[data-theme="dark"]{
  --z-bar:#141827; --z-bar-line:#0B0E18; --z-bar-2:#262c44; --z-bar-ink:#F0F0F0; --z-bar-mute:#C6C9D8; --z-bar-ph:#9EA2B8;
  --z-bar-hover:rgba(255,255,255,.10); --z-bar-rule:transparent; --z-av-ring:var(--z-bar); --z-qc:var(--tc-strong); --z-qc-ink:#fff;
  --z-bg:#1B1916; --z-canvas:#131210; --z-hover:rgba(255,255,255,.045); --z-field-line:#3A352E;
  --z-sel:color-mix(in srgb,var(--tc) 22%,#1B1916);
  --z-side:#1B1916; --z-side-line:#332F29; --z-side-ink:#F0EDE6; --z-side-sub:#F0EDE6; --z-side-mute:#A6A099;
  --z-side-hover:rgba(255,255,255,.06); --z-side-open:rgba(255,255,255,.08);
  --z-side-on:var(--tc-strong); --z-side-on-ink:#fff; --z-side-here:color-mix(in srgb,var(--tc) 55%,#fff);
  --z-pbar:#1B1916; --z-pbar-line:#332F29;
  --z-line:#332F29; --z-line-2:#28241F; --z-head:#161512; --z-th-ink:#A6A099;
  --z-cell:#F0EDE6; --z-ink:#F0EDE6; --z-sub:#A6A099; --z-link:#8ab4f8;
  --z-btn:#221F1B; --z-btn-line:#3A352E; --z-btn-hover:rgba(255,255,255,.06);
  --tc-tint:color-mix(in srgb,var(--tc) 24%,#1B1916); --tc-wash:color-mix(in srgb,var(--tc) 14%,#1B1916);
  --tc-ink:color-mix(in srgb,var(--tc) 50%,#fff);
  --z-green:#81c995; --z-blue:#8ab4f8; --z-amber:#fdd663; --z-red:#f28b82;
}
html.zs[data-theme="dark"], html.zs[data-theme="dark"] body{
  --ok:#81C995; --ok-bg:#1E3A2A; --ok-line:#3C6B4A;
  --warn:#E0A44E; --warn-bg:#34260F; --warn-line:#6B4E1E;
  --hold:#E8D44D; --hold-bg:rgba(201,168,0,.16); --hold-line:#C9A800;
  --bad:#F28B82; --bad-bg:#3A1F1E; --bad-line:#7A3A36;
  --info:#8AB4F8; --info-bg:#1A2A45; --info-line:#35507D;
}
html.zs[data-style="brandtop"][data-theme="dark"]{
  --z-bar:var(--tc-strong); --z-bar-line:var(--tc-deep); --z-bar-ink:#FFFFFF; --z-bar-mute:#F2F5F2;
  --z-bar-hover:rgba(255,255,255,.16); --z-bar-2:rgba(255,255,255,.18); --z-bar-ph:#E3E9E3;
  --z-qc:#FFFFFF; --z-qc-ink:var(--tc-deep); --z-av-ring:#FFFFFF; --z-side-on:var(--tc-deep);
}
html.zs[data-style="people"][data-theme="dark"]{ --z-bar:#1A2238; --z-side:#141B2E; --z-side-line:#141B2E; }
html.zs[data-style="night"][data-theme="dark"]{ --z-bar:color-mix(in srgb,var(--tc) 36%,#0d0f0d); --z-bar-2:rgba(255,255,255,.10); }
html.zs[data-style="lightbar"][data-theme="dark"]{ --z-bar-rule:var(--tc); }
html.zs[data-style="brandband"][data-theme="dark"]{ --z-pbar:var(--tc-wash); --z-pbar-line:var(--tc); }
html.zs[data-style="card"][data-theme="dark"]{ --z-canvas:#131210; --z-side:#131210; --z-side-line:#131210; }

/* ══ 3 · THE PAGE ═══════════════════════════════════════════════════════════ */
html.zs body{font-family:var(--z-font);font-size:var(--z-fs);line-height:var(--z-lh);color:var(--z-ink);
  background:var(--z-canvas);letter-spacing:0}
html.zs[dir="rtl"] body{font-family:var(--z-font)}
html.zs body :is(button,input,select,textarea){font-family:inherit}
html.zs a{color:var(--z-link)}
html.zs :is(button:not(:disabled),a[href],[onclick],summary,select,label[for],tr.click,.stat.go){cursor:pointer}

/* ── the top bar: TartibUI's markup, OrderTech's bar ───────────────────── */
/* ⚠️ #chrome IS NOT A BOX. chrome() draws the bar inside it, and a sticky
   element cannot leave its parent: inside a box exactly its own height the
   bar never stuck. Scrolled past 48px it left with the page, while the tab
   row and the page bar, sticky at var(--top), hung 48px down with the page
   showing through above them. Without a box of its own, the bar's parent is
   the page and `position:sticky` holds it. #chrome is only ever filled, never
   measured, and its other children (the launcher) are fixed. (1 Oct 2026) */
html.zs body #chrome{display:contents}
html.zs body .top{height:var(--top);min-height:var(--top);background:var(--z-bar);color:var(--z-bar-ink);
  border:0;border-bottom:1px solid var(--z-bar-line);box-shadow:inset 0 3px 0 var(--z-bar-rule);
  padding:0 12px;gap:10px;z-index:50}
/* ⚠️ THE MARK IS NOT HIDDEN BESIDE THE RAIL ANY MORE (#200, §10 below): the
   rail starts under the bar and carries no mark, so the bar always does. Only
   the divider and the fold button go — HR's rail does not fold. */
html.zs body:has(.zrail) .top :is(.top-div,.rail-btn){display:none!important}
html.zs body .top .brand{gap:8px;min-width:0;flex:0 1 auto}
html.zs body .top .logo{height:26px;max-width:110px;background:rgba(255,255,255,.92);border-radius:5px;padding:2px 4px}
html.zs body .top .brand .co{font-size:var(--t-md);font-weight:700;color:var(--z-bar-ink);max-width:220px}
html.zs body .top .top-sep{color:var(--z-bar-mute);font-size:var(--t-md);margin:0 -2px;opacity:.7}
html.zs body .top .ttl{font-size:var(--t-md);font-weight:400;color:var(--z-bar-mute);white-space:nowrap}
/* icon buttons: 32px targets, 16px drawings — Zoho's bell and gear */
html.zs body .top .key-btn, html.zs body .top .zs-ib{width:32px;height:32px;border-radius:8px;border:0;background:transparent;
  color:var(--z-bar-ink);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:background-color .2s}
html.zs body .top .key-btn:hover, html.zs body .top .zs-ib:hover, html.zs body .top .zs-ib[aria-expanded="true"]{background:var(--z-bar-hover)}
html.zs body .top .key-btn svg, html.zs body .top .zs-ib svg{width:var(--ic-lg);height:var(--ic-lg)}
/* the grid of apps goes to the far end, where OrderTech keeps it */
html.zs body .top > .key-btn:first-child{order:20}
html.zs body .top .menu-btn{order:-1;display:none}
@media(max-width:760px){ html.zs body:has(.side) .top .menu-btn{display:inline-flex} }
/* the search: 34px, radius 7, the glass inside on the left */
html.zs body .top .zs-sr{position:relative;flex:0 1 300px;min-width:120px;margin-inline-start:auto}
html.zs body .top .zs-sr svg{position:absolute;inset-inline-start:12px;top:50%;width:var(--ic-md);height:var(--ic-md);
  margin-top:calc(var(--ic-md) / -2);color:var(--z-bar-ph);pointer-events:none}
html.zs body .top .zs-sr input#zs-q{width:100%;height:34px;margin:0;background:var(--z-bar-2);border:1px solid transparent;border-radius:7px;
  padding:0 12px 0 38px;font-size:var(--t-md);color:var(--z-bar-ink);transition:box-shadow .2s,background-color .2s}
html.zs[dir="rtl"] body .top .zs-sr input#zs-q{padding:0 38px 0 12px}
html.zs body .top .zs-sr input#zs-q::placeholder{color:var(--z-bar-ph)}
html.zs body .top .zs-sr input#zs-q:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--tc) 60%,transparent)}
html.zs body .top .zs-sr input#zs-q:focus{background:#fff;color:#212529;border-color:#fff;outline:0;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--tc) 45%,transparent)}
html.zs body .top .zs-sr:focus-within svg{color:#6C718A}
/* quick create: the one filled button on the bar */
html.zs body .top .zs-qc{width:34px;height:34px;border-radius:var(--z-btn-radius);background:var(--z-qc);color:var(--z-qc-ink)}
html.zs body .top .zs-qc:hover, html.zs body .top .zs-qc[aria-expanded="true"]{background:var(--z-qc);filter:brightness(1.08)}
/* Auto / Light / Dark, and the language: two small segmented controls */
html.zs body .top :is(.zs-thm,.lang){display:inline-flex;align-items:center;flex:none;gap:0;padding:0;background:transparent;
  border:1px solid color-mix(in srgb,var(--z-bar-mute) 35%,transparent);border-radius:var(--z-btn-radius);overflow:hidden}
html.zs body .top :is(.zs-thm,.lang) button{height:26px;padding:0 9px;border:0;border-radius:0;background:transparent;
  font-size:var(--t-sm);font-weight:400;line-height:1;color:var(--z-bar-mute);transition:background-color .2s,color .2s}
html.zs body .top :is(.zs-thm,.lang) button + button{border-inline-start:1px solid color-mix(in srgb,var(--z-bar-mute) 35%,transparent)}
html.zs body .top :is(.zs-thm,.lang) button:hover{color:var(--z-bar-ink);background:var(--z-bar-hover)}
html.zs body .top :is(.zs-thm,.lang) button.on{background:var(--z-bar-hover);color:var(--z-bar-ink);font-weight:700}
/* the account: 32px, ringed in the tenant's colour */
html.zs body .top .prof-chip{padding:0;gap:4px}
html.zs body .top .prof-chip:hover{background:transparent}
html.zs body .top .prof-av{width:32px;height:32px;border:0;font-size:var(--t-sm);
  box-shadow:0 0 0 2px var(--z-av-ring),0 0 0 3.5px var(--tc)}
html.zs body .top .prof-caret{display:none}
/* the dropdowns hang from the bar, in the page's colours */
html.zs body .prof-panel, html.zs body .zs-menu{background:var(--z-bg);color:var(--z-ink);border:1px solid var(--z-line);
  border-radius:6px;box-shadow:0 10px 30px rgba(17,24,39,.18)}
html.zs body .prof-link{font-size:var(--t-md);font-weight:400;color:var(--z-ink)}
html.zs body .prof-link:hover{background:var(--z-hover)}
html.zs body .prof-nm{font-size:var(--t-md);color:var(--z-ink)}
html.zs body .prof-em{font-size:var(--t-sm);color:var(--z-sub)}
html.zs body .prof-sep{border-top-color:var(--z-line-2)}
html.zs body .prof-tag{background:var(--tc-tint);color:var(--tc-ink)}
/* quick create's menu */
html.zs body .zs-menu{position:fixed;top:calc(var(--top) + 4px);z-index:80;width:300px;padding:8px 6px;display:grid;gap:2px}
html.zs body .zs-menu[hidden]{display:none}
html.zs body .zs-menu .qh{padding:6px 10px 4px;font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--z-sub)}
html.zs body .zs-menu button{display:flex;align-items:center;gap:9px;height:34px;padding:0 10px;border:0;border-radius:var(--z-btn-radius);
  background:transparent;font-size:var(--t-md);color:var(--z-ink);text-align:start;white-space:nowrap}
html.zs body .zs-menu button:hover, html.zs body .zs-menu button:focus-visible{background:var(--z-hover);outline:0}
html.zs body .zs-menu button .ic{color:var(--tc-strong)}
html.zs body .zs-menu button .ic svg{width:var(--ic-sm);height:var(--ic-sm);filter:none}
/* the app launcher and the language menu keep their shape and take the palette */
html.zs body .apps-box{background:var(--z-bg);color:var(--z-ink);border-color:var(--z-line)}
/* the launcher's settings links read as rows, not as links in a sentence — as on OrderTech's keypad */
html.zs body .apps-box .apps-ft a{color:var(--z-ink)}

/* ── the rail: Zoho People's, in the theme's side colours ───────────────── */
html.zs .zrail{display:none}
@media(min-width:761px){
  /* OrderTech's grouped menu stays in the page for the phone drawer; on a
     desktop the rail replaces it */
  /* ⚠️ :has(> .zrail) ON EVERY LAYOUT RULE: a page that opts in without the
     rail (the Workspace's account pages keep their 260px menu) must keep its
     own layout. */
  html.zs body .wrap:has(> .zrail) > nav.side{display:none}
  /* ⚠️ :has(.zrail), OR tartib-ui.css's `body:has(.side):not(.rail-off) .top`
     (0,3,1) keeps the bar 260px in, beside a menu that is no longer there. */
  /* the bar runs the full width, over the rail (§10) */
  html.zs body:has(.zrail) .top{margin-inline-start:0;position:sticky;top:0}
  html.zs body .wrap:has(> .zrail){display:block}
  html.zs body .wrap:has(> .zrail) > .main{margin-inline-start:var(--zr-w)}
  html.zs .zrail{position:fixed;top:var(--top);bottom:0;inset-inline-start:0;z-index:55;width:var(--zr-w);display:flex;flex-direction:column;
    align-items:center;gap:2px;padding:8px 0 10px;background:var(--z-side);border-inline-end:1px solid var(--z-side-line);
    overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
  html.zs .zrail::-webkit-scrollbar{display:none}
  /* the mark is the bar's now (§10) — the rail's own is gone, not moved */
  html.zs .zrail .zr-mark{display:none}
  html.zs .zrail .zr-mark img{width:30px;height:30px;border-radius:8px;display:block}
  html.zs .zrail .zr-it{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    width:calc(var(--zr-w) - 8px);min-height:58px;padding:7px 2px 6px;border:0;border-radius:8px;background:transparent;
    color:var(--z-side-mute);font-size:var(--t-xs);font-weight:400;line-height:1.2;text-align:center;
    transition:background-color .2s,color .2s}
  html.zs .zrail .zr-it .ic{width:34px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
    transition:background-color .2s,color .2s}
  html.zs .zrail .zr-it .ic svg{width:19px;height:19px;filter:none;stroke-width:1.7}
  html.zs .zrail .zr-it span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html.zs .zrail .zr-it:hover{background:var(--z-side-hover);color:var(--z-side-ink)}
  html.zs .zrail .zr-it.on{color:var(--z-side-ink);font-weight:700}
  html.zs .zrail .zr-it.on .ic{background:var(--z-side-on);color:var(--z-side-on-ink)}
  html.zs .zrail .zr-sp{flex:1 1 auto;min-height:10px}
  html.zs[data-style="compact"] .zrail .zr-it{min-height:52px;padding:5px 2px}
}

/* ── the module's pages, as tabs under the bar ─────────────────────────── */
html.zs .ztabs{display:flex;align-items:stretch;gap:2px;height:var(--zt-h);margin:0;padding:0 16px;
  background:var(--z-pbar);border-bottom:1px solid var(--z-pbar-line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  position:sticky;top:var(--top);z-index:30}
html.zs .ztabs::-webkit-scrollbar{display:none}
html.zs .ztabs[hidden]{display:none}
html.zs .ztabs .zt-t{flex:none;display:inline-flex;align-items:center;gap:7px;height:100%;padding:0 12px;margin:0;border:0;border-radius:0;
  background:transparent;font-size:var(--t-md);font-weight:400;color:var(--z-sub);white-space:nowrap;
  box-shadow:inset 0 -2px 0 transparent;transition:color .15s,box-shadow .15s}
html.zs .ztabs .zt-t:hover{color:var(--z-ink)}
html.zs .ztabs .zt-t.on{color:var(--z-ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--z-pill)}
/* a page's own tabs, lifted into the bar, wear the same underline */
html.zs .ztabs .tabs{display:flex;align-items:stretch;gap:2px;height:100%;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
html.zs .ztabs .tabs .tab{height:100%;min-height:0;padding:0 12px;margin:0;border:0;border-radius:0;background:transparent;
  font-size:var(--t-md);font-weight:400;color:var(--z-sub);box-shadow:inset 0 -2px 0 transparent}
html.zs .ztabs .tabs .tab:hover{color:var(--z-ink);background:transparent}
html.zs .ztabs .tabs .tab.on{background:transparent;color:var(--z-ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--z-pill)}

/* ── the work area ─────────────────────────────────────────────────────── */
html.zs body .wrap:has(> .zrail) > .main{padding:0 20px 48px;background:var(--z-canvas);min-height:calc(100vh - var(--top))}
html.zs body .wrap > .main > .ztabs{margin:0 -20px 16px}
/* breadcrumbs only on a record — a top-level page has its tab */
html.zs body .main .crumbs{margin:12px 0 -4px;font-size:var(--t-sm);min-height:0}
html.zs body .main .crumbs button, html.zs body .main .crumbs a{font-size:var(--t-sm);color:var(--z-link)}
html.zs body .main .crumbs .here{font-weight:700;color:var(--z-ink)}

/* ══ THE PAGE BAR ═══════════════════════════════════════════════════════════
   OrderTech's: the page's title on the left at 18px and its own buttons on the
   right, on a white band that runs the width of the work area. zsAfter() in
   the page marks the header a screen ALREADY draws — .pgh, a title row, or an
   h1 with its lede — as .zpbar; nothing is rebuilt, so every onclick stays. */
html.zs body .main .zpbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-height:var(--z-pbar-h);
  margin:0 -20px 16px;padding:8px 20px;box-sizing:border-box;background:var(--z-pbar);
  border-bottom:var(--z-pbar-rule) solid var(--z-pbar-line)}
/* ⚠️ ONLY UNDER A TAB ROW THAT SHOWS. The −16px cancels the row's 16px
   bottom margin so the bar sits on the tabs; a hidden row (All Settings, a
   one-page module) has no margin to cancel, and the bar slid 16px under the
   top bar. A tall window hid it — the sticky rule below holds the bar at
   var(--top) — but under 720px the bar is not sticky: Fatemeh's laptop
   (Windows at 125%, a bookmarks bar, ~696px of page) showed All Settings cut
   in half, 1 Oct 2026. */
html.zs body .main .ztabs:not([hidden]) + .zpbar{margin-top:-16px}
html.zs body .main .zpbar h1, html.zs body .main .zpbar > h2{flex:0 1 auto;margin:0;font-size:var(--t-xl);font-weight:700;
  letter-spacing:0;line-height:1.4;color:var(--z-ink);min-width:0}
html.zs body .main .zpbar h1 .ic, html.zs body .main .zpbar h2 .ic{color:var(--z-sub)}
html.zs body .main .zpbar :is(.mut,.lede){margin:0;font-size:var(--t-sm);color:var(--z-sub);line-height:1.4}
html.zs body .main .zpbar .lede{flex:1 1 100%;order:3;margin-top:-6px;max-width:90ch}
html.zs body .main .zpbar > :is(.btn,.btn-act,details,.row,div:last-child:not(.lede)):not(:first-child){margin-inline-start:auto}
html.zs body .main .zpbar > :is(.btn,.btn-act,details) ~ :is(.btn,.btn-act,details){margin-inline-start:0}
@media(min-width:761px) and (min-height:720px){
  html.zs body .main .zpbar{position:sticky;top:calc(var(--top) + var(--zt-h));z-index:25}
  html.zs body .main.zs-notabs .zpbar{top:var(--top)}
}

/* ══ 4 · THE COMPONENTS, IN ORDERTECH'S LOOK ═══════════════════════════════ */
html.zs body h1{font-size:var(--t-xl);font-weight:700;letter-spacing:0;color:var(--z-ink)}
html.zs body h2{font-size:var(--t-lg);font-weight:700;color:var(--z-ink)}
html.zs body .lede{font-size:var(--t-sm);color:var(--z-sub)}
html.zs body .mut{color:var(--z-sub)}

/* cards: flat panels with a 1px lift */
html.zs body .card{background:var(--z-bg);border:1px solid var(--z-line);border-radius:var(--z-radius);box-shadow:var(--z-shadow);
  padding:14px 16px}
html.zs body .card-t{font-size:var(--t-lg);font-weight:700;color:var(--z-ink)}
html.zs body .card-t :is(a,.lnk){font-size:var(--t-sm);font-weight:400;color:var(--z-link)}
html.zs body .sect{background:var(--z-bg);border-color:var(--z-line);border-radius:var(--z-radius);box-shadow:var(--z-shadow)}

/* stat tiles: white, the number in the severity's colour */
html.zs body .stats{gap:12px}
html.zs body .stat{background:var(--z-bg);border:1px solid var(--z-line);border-radius:var(--z-radius);box-shadow:var(--z-shadow);
  padding:12px 14px}
html.zs body .stat .k{font-size:var(--t-sm);font-weight:400;letter-spacing:0;text-transform:none;color:var(--z-sub)}
html.zs body .stat .v{font-size:var(--t-2xl);font-weight:700;letter-spacing:0;color:var(--z-ink)}
html.zs body .stat .s{font-size:var(--t-sm);color:var(--z-sub)}
/* ⚠️ THE SEVERITY'S 3px TOP EDGE IS tartib-ui.css's, AND IT STAYS A BORDER.
   A first pass drew it as an inset shadow over a 1px hairline — the same
   picture, and look-check (which reads border-top) caught that the colour the
   tile is known by was no longer where it is measured. Only the plain tiles'
   border is re-pointed; a tile with a severity keeps its coloured 3px edge
   (restated here because the hairline above outranks tartib-ui.css). */
html.zs body .stat:is(.bad,.warn,.ok,.info,.hold,.teal,.violet,.cyan){border-top-width:3px}
html.zs body .stat.bad{border-top-color:var(--bad-line)} html.zs body .stat.warn{border-top-color:var(--warn-line)}
html.zs body .stat.ok{border-top-color:var(--ok-line)} html.zs body .stat.info{border-top-color:var(--info-line)}
html.zs body .stat.hold{border-top-color:var(--hold-line)} html.zs body .stat.teal{border-top-color:var(--cat-7)}
html.zs body .stat.violet{border-top-color:var(--cat-2)} html.zs body .stat.cyan{border-top-color:var(--cat-8)}
/* the severity still speaks in the label and the number, as tartib-ui.css has it */
html.zs body .stat.bad :is(.k,.v){color:var(--bad)} html.zs body .stat.warn :is(.k,.v){color:var(--warn)}
html.zs body .stat.ok :is(.k,.v){color:var(--ok)} html.zs body .stat.info :is(.k,.v){color:var(--info)}
html.zs body .stat.hold :is(.k,.v){color:var(--hold)} html.zs body .stat.teal :is(.k,.v){color:var(--cat-7)}
html.zs body .stat.violet :is(.k,.v){color:var(--cat-2)} html.zs body .stat.cyan :is(.k,.v){color:var(--cat-8)}
html.zs body .stat.go:hover{box-shadow:0 2px 10px rgba(20,24,40,.10)}
html.zs body .ic svg{filter:none}

/* tables: 11px capitals on the header band, 13px cells, one line each */
html.zs body table{font-size:var(--t-md);border-collapse:collapse}
html.zs body th{background:var(--z-head);color:var(--z-th-ink);font-size:var(--t-xs);font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;padding:var(--z-thpad);border-bottom:1px solid var(--z-line-2);white-space:nowrap;line-height:1.5}
html.zs body td{padding:var(--z-rowpad);border-bottom:1px solid var(--z-line-2);color:var(--z-cell);font-size:var(--z-fs);
  line-height:1.5;vertical-align:middle}
html.zs body tbody tr:hover, html.zs body table tr:hover > td{background:var(--z-hover)}
html.zs body tr.click:hover td{background:var(--z-hover)}
html.zs body tr.click:hover :is(.emp-nm b, .emp-nm a, td > b:first-child){text-decoration:underline;text-underline-offset:3px}
html.zs body .scroll{border-radius:0}
/* ⚠️ ONE LINE PER ROW — Hussain, 30 Sep: "remove the second raw under the item
   and others and keep them as a column". What was a second line is its own
   column now (see the page); a cell that still carries two words keeps them on
   one line and says the rest on hover. */
html.zs body .main td{white-space:nowrap}
html.zs body .main td[colspan]:not([colspan="1"]), html.zs body .main td.wrap, html.zs body .main td :is(textarea,.msg){white-space:normal}
html.zs body .main .tabs.zs-dup{display:none}

/* pills: status words in a soft wash, as OrderTech's badges */
html.zs body .pill{font-size:var(--t-sm);font-weight:500;border-radius:4px;padding:1px 7px;line-height:1.6}
/* ⚠️ THE CLASSLESS PILL'S GREY IS A LITERAL (#EEF1F3 in tartib-ui.css), so in
   dark it stayed a light chip with grey ink on it. Only the classless one is
   touched — :not() keeps every severity pill's own wash. */
html.zs body .pill:not(.ok,.warn,.bad,.hold,.info,.teal,.violet,.cyan){background:color-mix(in srgb,var(--z-sub) 12%,var(--z-bg));
  color:color-mix(in srgb,var(--z-sub) 80%,var(--z-ink))}

/* buttons: 32px, radius 5, the primary in the tenant's colour */
html.zs body .btn, html.zs body .btn-act{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;
  padding:0 12px;border:1px solid var(--z-pill);border-radius:var(--z-btn-radius);background:var(--z-pill);color:#fff;
  font-size:var(--t-md);font-weight:400;line-height:1;box-shadow:none;white-space:nowrap;
  transition:background-color .2s,border-color .2s,box-shadow .2s}
html.zs body .btn:hover, html.zs body .btn-act:hover{background:var(--tc-deep);border-color:var(--tc-deep);
  box-shadow:0 2px 6px color-mix(in srgb,var(--tc) 35%,transparent)}
html.zs body .btn:active{transform:none}
html.zs body .btn.lime, html.zs body .btn-act{background:var(--z-pill);border-color:var(--z-pill);color:#fff}
html.zs body .btn.ghost, html.zs body summary.btn{background:var(--z-btn);border-color:var(--z-btn-line);color:var(--z-ink)}
html.zs body .btn.ghost:hover, html.zs body summary.btn:hover{background:var(--z-btn-hover);border-color:var(--z-btn-line);box-shadow:none}
html.zs body .btn.danger{background:var(--z-btn);border-color:var(--z-btn-line);color:var(--z-red)}
html.zs body .btn.danger:hover{background:color-mix(in srgb,var(--z-red) 10%,var(--z-bg));border-color:var(--z-red);box-shadow:none}
html.zs body .btn.sm{height:28px;padding:0 10px;font-size:var(--t-sm)}
html.zs body .btn[disabled]{opacity:.5;box-shadow:none}
html.zs body .btn:focus-visible, html.zs body .btn-act:focus-visible{outline:2px solid color-mix(in srgb,var(--tc) 50%,transparent);outline-offset:2px}

/* fields: 32px, a hairline, the tenant's colour on focus */
html.zs body label{font-size:var(--t-sm);font-weight:400;color:var(--z-sub)}
html.zs body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea){
  font-size:var(--t-md);color:var(--z-ink);background:var(--z-bg);border:1px solid var(--z-field-line);border-radius:4px}
html.zs body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),select){min-height:32px}
html.zs body :is(input,select,textarea):focus{border-color:var(--z-pill);box-shadow:0 0 0 2px var(--z-sel);outline:none}
html.zs body :is(input[type="checkbox"],input[type="radio"]){accent-color:var(--tc-strong)}

/* a page's own tabs: an underline, as the reference draws them */
html.zs body .main .tabs{display:flex;flex-wrap:wrap;gap:2px;margin:0 0 14px;padding:0;background:transparent;border:0;
  border-bottom:1px solid var(--z-line);border-radius:0;box-shadow:none}
html.zs body .main .tabs .tab{height:36px;min-height:0;padding:0 12px;margin:0 0 -1px;border:0;border-radius:0;background:transparent;
  font-size:var(--t-md);font-weight:400;color:var(--z-sub);box-shadow:inset 0 -2px 0 transparent}
html.zs body .main .tabs .tab:hover{color:var(--z-ink);background:transparent}
html.zs body .main .tabs .tab.on{background:transparent;color:var(--z-ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--z-pill)}
html.zs body .etabs{display:flex;flex-wrap:wrap;gap:2px;padding:0;background:transparent;border:0;border-bottom:1px solid var(--z-line);
  border-radius:0;box-shadow:none}
html.zs body .etabs .etab{height:36px;padding:0 12px;margin:0 0 -1px;border:0;border-radius:0;background:transparent;
  font-size:var(--t-md);font-weight:400;color:var(--z-sub);box-shadow:inset 0 -2px 0 transparent}
html.zs body .etabs .etab:hover{color:var(--z-ink);background:transparent}
html.zs body .etabs .etab.on{background:transparent;color:var(--z-ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--z-pill)}
html.zs body .seg{border:1px solid var(--z-field-line);border-radius:var(--z-btn-radius);background:var(--z-bg);padding:0;gap:0;overflow:hidden}
html.zs body .seg button{height:30px;border:0;border-radius:0;background:transparent;font-size:var(--t-md);font-weight:400;color:var(--z-sub);padding:0 12px}
html.zs body .seg button + button{border-inline-start:1px solid var(--z-field-line)}
html.zs body .seg button.on{background:var(--tc-tint);color:var(--tc-ink);font-weight:700}

/* dialogs: a white sheet, a hairline under the title */
html.zs body .dmask{background:rgba(16,20,32,.45)}
html.zs body .dbox{background:var(--z-bg);color:var(--z-ink);border:1px solid var(--z-line);border-radius:8px;
  box-shadow:0 18px 48px rgba(16,20,32,.22)}
html.zs body .dbox h2{font-size:var(--t-lg)}

/* notes */
html.zs body .msg{font-size:var(--t-sm);border-radius:5px}
html.zs body .backlink{font-size:var(--t-md);color:var(--z-link)}
html.zs body .spin{border-color:var(--z-line);border-top-color:var(--tc-strong)}

/* the employee file's header */
html.zs body .ehead{background:var(--z-bg);border:1px solid var(--z-line);border-radius:var(--z-radius);box-shadow:var(--z-shadow)}

/* ══ 5 · THE PHONE ══════════════════════════════════════════════════════════
   The rail is a desktop thing. On a phone the bar, the module's tabs (which
   scroll sideways) and the bottom bar and drawer the page already had. */
@media(max-width:760px){
  html.zs body .top{padding:0 8px;gap:6px}
  html.zs body .top .zs-sr, html.zs body .top .zs-thm, html.zs body .top .ttl, html.zs body .top .top-sep{display:none}
  html.zs body .wrap:has(> .zrail) > .main{padding:0 12px calc(78px + env(safe-area-inset-bottom))}
  html.zs body .wrap > .main > .ztabs{margin:0 -12px 12px;top:var(--top)}
  html.zs body .main .zpbar{margin:0 -12px 12px;padding:8px 12px}
  html.zs body .side{background:var(--z-bg)}
  /* ⚠️ THE BOTTOM BAR'S .tab IS NOT THE PAGE'S .tab. HR's own sheet styles a
     page tab as a bordered pill that fills when on, and the same class name on
     the bar picked that up: a green blob with its label white on green. */
  html.zs body .tabbar{background:var(--z-bg);border-top-color:var(--z-line)}
  html.zs body .tabbar .tab{color:var(--z-sub);background:transparent;border:0;border-radius:0;box-shadow:none;margin:0}
  html.zs body .tabbar .tab:hover{background:transparent}
  html.zs body .tabbar .tab.on{color:var(--tc-strong);background:transparent;border:0;font-weight:700}
  html.zs body .nav{color:var(--z-ink)}
  html.zs body .nav.on{background:var(--tc-strong);color:#fff}
}

/* ══ 6 · THE THEME TAB ═════════════════════════════════════════════════════ */
html.zs .zthm-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:10px}
html.zs .zthm-opt{position:relative;display:flex;flex-direction:column;gap:8px;text-align:start;width:100%;padding:8px 8px 10px;
  border:1px solid var(--z-line);border-radius:8px;background:var(--z-bg);color:var(--z-ink);transition:border-color .15s,box-shadow .15s}
html.zs .zthm-opt:hover{border-color:var(--z-field-line);box-shadow:0 2px 8px rgba(20,24,40,.08)}
html.zs .zthm-opt.on{border-color:var(--z-pill);box-shadow:inset 0 0 0 1px var(--z-pill)}
html.zs .zthm-opt b{display:flex;align-items:center;gap:6px;font-size:var(--t-md);line-height:1.4}
html.zs .zthm-opt b i{font-style:normal;font-weight:400;color:var(--z-sub)}
html.zs .zthm-opt b em{font-style:normal;font-weight:700;font-size:var(--t-xs);padding:1px 7px;border-radius:9px;
  background:var(--tc-tint);color:var(--tc-ink)}
html.zs .zthm-opt small{display:block;font-size:var(--t-sm);line-height:1.45;color:var(--z-sub)}
html.zs .zthm-opt .tick{position:absolute;top:-8px;inset-inline-end:-8px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--z-pill);color:#fff;font-size:12px;font-weight:700}
html.zs .zthm-opt .tick:empty{display:none}
/* the miniature: the theme's own tokens, drawn as bar, rail, tabs and rows */
.zs-mini{display:grid;grid-template-columns:22px 1fr;grid-template-rows:14px 10px 1fr;height:118px;border-radius:6px;overflow:hidden;
  border:1px solid rgba(20,24,40,.10);background:var(--z-canvas)}
.zs-mini .m-rl{grid-row:1 / -1;background:var(--z-side);display:flex;flex-direction:column;align-items:center;gap:5px;padding-top:18px}
.zs-mini .m-rl i{width:12px;height:9px;border-radius:3px;background:color-mix(in srgb,var(--z-side-mute) 45%,transparent)}
.zs-mini .m-rl i.on{background:var(--z-side-on)}
.zs-mini .m-bar{background:var(--z-bar);box-shadow:inset 0 2px 0 var(--z-bar-rule)}
.zs-mini .m-tabs{background:var(--z-pbar);border-bottom:1px solid var(--z-pbar-line);display:flex;align-items:center;gap:6px;padding:0 6px}
.zs-mini .m-tabs i{width:18px;height:3px;border-radius:2px;background:color-mix(in srgb,var(--z-sub) 50%,transparent)}
.zs-mini .m-tabs i.on{background:var(--z-pill)}
.zs-mini .m-pg{padding:6px;display:flex;flex-direction:column;gap:4px}
.zs-mini .m-pg .h{height:7px;border-radius:2px;background:var(--z-head)}
.zs-mini .m-pg .r{height:7px;border-bottom:1px solid var(--z-line-2);background:var(--z-bg)}
.zs-mini .m-pg .b{align-self:flex-end;width:26px;height:8px;border-radius:2px;background:var(--z-pill)}
.zs-mini[data-style="card"] .m-pg{margin:4px;border-radius:4px;background:var(--z-bg)}

/* ══ 7 · RIGHT TO LEFT ═════════════════════════════════════════════════════
   The rail moves to the right edge with inset-inline-start; the bar keeps the
   order tartib-tokens.css gives it ("always Profile is far right"). */
html.zs[dir="rtl"] body .top .zs-sr{margin-inline-start:0;margin-inline-end:auto}

/* ══ 8 · SETTINGS, ORDERTECH'S WAY ══════════════════════════════════════════
   OrderTech's settings are Zoho's (measured 30 Sep 2026): a settings page
   draws beside a settings menu of sections in 11px capitals, groups that
   fold, and the current page filled in the business's colour. Close Settings
   goes back to where you were.
   ⚠️ THE CARDS AND HR'S OWN MENU ARE GONE (#200, 4 Oct 2026): Settings itself
   and the menu beside every settings page are TartibUI.settings' now, one map
   for the Workspace and HR — their rules are §11. What stays here is the frame
   the menu sits in and the furniture of the pages beside it. */
html.zs .zset{display:grid;grid-template-columns:236px minmax(0,1fr);margin:0 -20px;min-height:calc(100vh - var(--top))}
html.zs .zset-nav{position:sticky;top:var(--top);align-self:start;height:calc(100vh - var(--top));overflow-y:auto;
  padding:10px 8px 24px;background:var(--z-bg);border-inline-end:1px solid var(--z-line);scrollbar-width:thin}
html.zs .zset-body{min-width:0;padding:0 20px 48px}
html.zs .zset-mback{display:none;align-items:center;gap:6px;width:100%;height:32px;margin:0 0 4px;padding:0 8px;
  border:0;border-radius:6px;background:transparent;font-size:var(--t-md);color:var(--z-ink);text-align:start}
html.zs .zset-mback:hover{background:var(--z-hover)}
html.zs .zset-mback .ic svg{width:14px;height:14px}
html.zs[dir="rtl"] .zset-mback .ic{transform:scaleX(-1)}
/* the close button, at the far end of every settings page's bar */
html.zs .zset-close .x{color:#E23D3D;font-size:var(--t-lg);line-height:1}
html.zs body .main .zpbar > .zset-close{margin-inline-start:auto}
html.zs body .main .zpbar :is(.zset-act,.zset-hact){display:flex;align-items:center;gap:8px;margin-inline-start:auto}

/* Settings' own header: the title, the business under it, Close settings */
html.zs .zset-hph{gap:16px}
html.zs .zset-hph h1 + .mut{display:block}

/* page furniture every settings page shares */
html.zs .zset-ttl{display:flex;align-items:center;gap:12px;flex:0 0 auto}
/* ⚠️ .zpbar h1 may shrink (min-width:0) — beside a filter it shrank under its own word */
html.zs body .main .zpbar .zset-ttl h1{flex:none}
html.zs body .zset-filter{height:32px;min-height:32px;padding:0 8px;border:1px solid var(--z-field-line);border-radius:5px;background:var(--z-bg);
  font-size:var(--t-md);color:var(--z-ink)}
html.zs body .card.zset-flush{padding:0;overflow:hidden}
html.zs .zset-u{display:flex;align-items:center;gap:12px}
html.zs .zset-av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--tc-tint);color:var(--tc-ink);font-size:var(--t-xs);font-weight:700;letter-spacing:.3px}
html.zs .zset-av.lg{width:56px;height:56px;font-size:var(--t-lg)}
html.zs :is(.zset-utable,.zset-rtable) .nm{color:var(--z-link);font-weight:500;text-decoration:none}
html.zs .zset-empty{padding:28px 12px;text-align:center;color:var(--z-sub)}
html.zs .zset-note{margin-top:10px;font-size:var(--t-sm);line-height:1.55;color:var(--z-sub)}
/* a user, beside the list */
html.zs .zset-split{display:grid;grid-template-columns:300px minmax(0,1fr);border:1px solid var(--z-line);border-radius:8px;
  background:var(--z-bg);overflow:hidden;min-height:60vh}
html.zs .zset-ulist{border-inline-end:1px solid var(--z-line);overflow-y:auto;max-height:calc(100vh - 170px)}
html.zs .zset-uli{display:flex;align-items:center;gap:12px;width:100%;padding:11px 16px;border:0;border-bottom:1px solid var(--z-line-2);
  border-radius:0;background:transparent;text-align:start;color:var(--z-ink)}
html.zs .zset-uli:hover{background:var(--z-hover)}
html.zs .zset-uli.on{background:var(--z-sel)}
html.zs .zset-uln{display:flex;flex-direction:column;min-width:0}
html.zs .zset-uln b{font-weight:500;color:var(--z-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.zs .zset-uln small{font-size:var(--t-sm);color:var(--z-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.zs .zset-udet{padding:16px 20px;min-width:0;background:var(--z-canvas)}
html.zs .zset-uhead{display:flex;align-items:flex-start;gap:16px;margin-bottom:12px}
html.zs .zset-uid{flex:1;min-width:0}
html.zs .zset-uid h2{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 4px;font-size:var(--t-xl);font-weight:700}
html.zs .zset-em{font-size:var(--t-sm);color:var(--z-sub)}
html.zs .zset-rl{margin-top:6px;font-size:var(--t-md)}
html.zs .zset-uact{display:flex;align-items:center;gap:8px}
html.zs .zset-x{border:0;background:transparent;font-size:22px;line-height:1;color:#E23D3D;padding:0 4px}
html.zs .zset-cardgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
html.zs body .card.zset-box{margin:0;padding:14px 16px}
html.zs .zset-box.zset-wide{grid-column:1 / -1}
html.zs .zset-bh{margin-bottom:10px;font-size:var(--t-lg);font-weight:700;color:var(--z-ink)}
html.zs .zset-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
html.zs .zset-fact .k{font-size:var(--t-xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--z-sub)}
html.zs .zset-fact .v{margin-top:2px;font-size:var(--t-md);font-weight:600;color:var(--z-ink);overflow-wrap:anywhere}
html.zs .zset-can{list-style:none;margin:0;padding:0;display:grid;gap:6px}
html.zs .zset-can li{display:flex;align-items:center;gap:8px;font-size:var(--t-md)}
html.zs .zset-can li span{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:700}
html.zs .zset-can li.y span{background:color-mix(in srgb,var(--ok,#1e8a4c) 16%,var(--z-bg));color:var(--ok,#1e8a4c)}
html.zs .zset-can li.n{color:var(--z-sub)} html.zs .zset-can li.n span{background:var(--z-hover);color:var(--z-sub)}
html.zs .zset-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px}
html.zs .zset-form label{display:flex;flex-direction:column;gap:4px;min-width:200px;flex:1 1 200px;max-width:320px}
html.zs .zset-form label > span{font-size:var(--t-sm);color:var(--z-sub)}
/* Add user, and a role's page */
html.zs body .dbox.zset-dlg{width:560px;max-width:calc(100vw - 32px);padding:18px 20px}
html.zs .zset-dlg h2{margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--z-line-2)}
html.zs .zset-fld2{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 14px;align-items:center;margin-bottom:12px}
html.zs .zset-fld2 label{font-size:var(--t-md);color:var(--z-ink)}
html.zs .zset-fld2 label em{font-style:normal;color:#E23D3D;margin-inline-start:2px}
html.zs body .zset-fld2 :is(input,select,textarea){width:100%;box-sizing:border-box}
html.zs body .zset-fld2 textarea{min-height:64px;resize:vertical;padding:7px 10px}
html.zs .zset-dfoot{display:flex;gap:10px;margin-top:16px;padding-top:12px;border-top:1px solid var(--z-line-2)}
/* Add user's choice: the password email (4 Oct 2026) — a checkbox its own size, beside its words */
html.zs body .zset-dlg label.acc-pwl{display:flex;align-items:center;gap:8px;margin:2px 0 10px;padding:0;font-size:var(--t-md);
  font-weight:400;color:var(--z-ink);cursor:pointer}
html.zs body .zset-dlg label.acc-pwl input[type=checkbox]{flex:none;width:16px;height:16px;min-height:0;margin:0;padding:0;accent-color:var(--tc-strong)}
/* Send invitation beside a user who cannot sign in yet */
html.zs .zset-utable .acc-inv{margin-inline-start:6px;vertical-align:middle}
/* a user's Sign-in card: the business role and the three things done to a login, one row of 32px controls */
html.zs .acc-sacts{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin-top:12px}
html.zs body .acc-sacts label.acc-bizl{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;font-size:var(--t-sm);font-weight:400;color:var(--z-sub)}
html.zs body .acc-sacts label.acc-bizl select{width:auto;min-width:140px;height:32px;min-height:32px}
html.zs body .card.zset-rolecard{padding:18px 20px;max-width:980px}
html.zs .zset-rolecard .zset-fld2{max-width:640px}
html.zs .zset-perm{width:100%;margin-top:8px;border:1px solid var(--z-line-2);border-radius:6px}
html.zs .zset-perm :is(th,td).c{text-align:center;width:84px}
html.zs .zset-foot{position:sticky;bottom:0;display:flex;gap:10px;align-items:center;max-width:980px;margin-top:14px;padding:12px 0;
  background:var(--z-canvas);border-top:1px solid var(--z-line)}
html.zs .zset-foot .zset-del{margin-inline-start:auto}
@media(max-width:1100px){
  html.zs .zset{grid-template-columns:200px minmax(0,1fr)}
  html.zs .zset-split{grid-template-columns:240px minmax(0,1fr)}
}
@media(max-width:900px){
  html.zs .zset-split{grid-template-columns:1fr} html.zs .zset-ulist{max-height:220px;border-inline-end:0;border-bottom:1px solid var(--z-line)}
  html.zs .zset-cardgrid, html.zs .zset-facts{grid-template-columns:1fr}
}
@media(max-width:760px){
  /* the phone keeps its drawer: the menu gives way to a way back */
  html.zs .zset{display:block;margin:0}
  html.zs .zset-nav{display:none}
  html.zs .zset-body{padding:0}
  html.zs .zset-mback{display:flex;margin:10px 0 4px;padding:0}
  html.zs .zset-fld2{grid-template-columns:1fr}
  html.zs .zset-uhead{flex-wrap:wrap}
}

/* ══ 9 · THE WORKSPACE (the hub at {tenant}.tartib.app/) ═════════════════════
   The same bar, palette, themes and dark mode as HR, on the page every
   person opens first. Its layout stays its own: the 54px strip of products on
   the dashboard, and the 260px menu on the account pages.
   ⚠️ THE BAR'S OWN TOKENS, RE-POINTED INSIDE THE BAR ONLY. The Workspace's
   search, bell and gear are drawn with --chrome-*, which tartib-tokens.css
   keeps for a white bar and which the side menu also reads — so they are
   re-pointed on .top and nowhere else. */
html.zs body .top{--chrome:var(--z-bar);--chrome-ink:var(--z-bar-ink);--chrome-mute:var(--z-bar-mute);
  --chrome-fill:var(--z-bar-2);--chrome-fill-hi:var(--z-bar-hover);--chrome-line:transparent;--chrome-accent:var(--z-bar-ink)}
/* ⚠️ AND THE MENUS BESIDE THE PAGE READ THE SAME TOKENS — the Workspace's
   account menu, HR's phone drawer and bottom bar. tartib-tokens.css darkens
   --chrome to a petrol #0A2E39 in dark mode, which under this shell's navy bar
   and warm-grey page was a third colour belonging to neither. */
html.zs body :is(.side,.tabbar){--chrome:var(--z-bg);--chrome-ink:var(--z-ink);--chrome-mute:var(--z-sub);
  --chrome-fill:var(--z-hover);--chrome-fill-hi:var(--z-hover);--chrome-line:var(--z-line)}
/* the business's own mark on a white plate, and its name, as HR's bar has them */
html.zs body .top .topbar-logo{height:26px;max-width:110px;background:rgba(255,255,255,.92);border-radius:5px;padding:2px 4px}
html.zs body .top .topbar-name{font-size:var(--t-md);font-weight:700;letter-spacing:0;color:var(--z-bar-ink)}
html.zs body .top .topbar-search{height:34px;border-radius:7px;border:1px solid transparent;font-size:var(--t-md)}
html.zs body .top .topbar-search:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--tc) 60%,transparent)}
html.zs body .top .topbar-btn{width:32px;height:32px;border:0;background:transparent}
html.zs body .top .topbar-btn:hover{background:var(--z-bar-hover)}
html.zs body .top .topbar-btn svg{width:var(--ic-lg);height:var(--ic-lg)}
html.zs body .top .gear-menu{background:var(--z-bg);border-color:var(--z-line);border-radius:6px;box-shadow:0 10px 30px rgba(17,24,39,.18)}
html.zs body .top .gear-item{color:var(--z-ink);font-size:var(--t-md)}
html.zs body .top .gear-item:hover{background:var(--z-hover)}
/* the strip of products, in the theme's side colours */
html.zs .ws-rail{background:var(--z-side);border-inline-end-color:var(--z-side-line)}
html.zs .ws-rail :is(a,button){color:var(--z-side-mute)}
html.zs .ws-rail :is(a,button):hover{background:var(--z-side-hover);color:var(--z-side-ink)}
html.zs .ws-rail .on{background:var(--z-side-on);color:var(--z-side-on-ink)}
html.zs .ws-rail .on::before{background:var(--z-side-on)}
html.zs .ws-rail .sep{background:color-mix(in srgb,var(--z-side-mute) 35%,transparent)}
/* ⚠️ A FIXED PLATE: var(--ink) turns near-white in dark, under white words */
html.zs .ws-rail .tip{background:#21263C;color:#fff}
/* the boxes: OrderTech's flat panel with a 1px lift */
html.zs .dbox{border-color:var(--z-line);border-radius:var(--z-radius);box-shadow:var(--z-shadow);background:var(--z-bg)}
html.zs .dbox > h3{font-size:var(--t-xs);font-weight:700;letter-spacing:.03em;color:var(--z-th-ink)}
html.zs .dskel{border-radius:var(--z-radius);background:var(--z-hover);border-color:var(--z-line)}
html.zs body .myhr-form :is(select,input){background:var(--z-bg);color:var(--z-ink);border-color:var(--z-field-line)}
html.zs[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#221F1B 25%,#2B2723 50%,#221F1B 75%);background-size:200% 100%}
html.zs .greeting-title .accent{color:var(--tc-ink)}
html.zs .trial-strip{border-color:var(--z-line);background:var(--z-bg);border-radius:var(--z-radius)}
html.zs .trial-strip .ts-t{color:var(--z-sub)} html.zs .trial-strip .ts-t b{color:var(--z-ink)}
html.zs .drawer{background:var(--z-bg);border-radius:10px}
html.zs .app-tile:hover, html.zs .day-slot.today{background:var(--tc-strong);border-color:var(--tc-strong)}
/* ⚠️ TODAY'S DATE WAS --cyan ON A NAVY PLATE, and --cyan is --accent, which is
   the company's colour here — the plate's own colour. The number vanished. */
html.zs .day-slot.today :is(.day-num,.day-hours){color:#fff}

/* ══ 10 · ONE MARK, IN THE BAR, AND IT GOES HOME (#200, 4 Oct 2026) ══════════
   Hussain: the logo always goes to the Tartib home screen in every service,
   and the 'tartib' wordmark is the same size and in the same place as on the
   Workspace's top bar — in every service. The Workspace's bar is the
   reference: the mark first, 22px tall, 12px in from the edge, then the
   business and the module. So the bar always carries it (tartib-ui.js wraps
   it in a link to `/`), and nothing else does: HR's rail and the account
   pages' side menu start UNDER the bar and lose their own marks. One mark per
   screen, in one place, that is always the way home.
   ⚠️ Assets keeps its own side layout (it does not load tartib-ui.css, and its
   menu already sits under the bar); it gets the size and the link, nothing else. */
html.zs body .top .top-home{order:-2;display:inline-flex;align-items:center;flex:none;height:32px;padding:0 3px;
  margin-inline-start:-3px;border-radius:6px;text-decoration:none;transition:background-color .2s}
html.zs body .top .top-home:hover{background:var(--z-bar-hover)}
html.zs body .top .top-home:focus-visible{outline:2px solid color-mix(in srgb,var(--tc) 70%,#fff);outline-offset:1px}
html.zs body .top .top-mark{display:block!important;height:22px;width:auto;flex:none;margin:0}
@media(min-width:761px){
  html.zs:not([data-app="assets"]) body .wrap > nav.side{top:var(--top);height:calc(100vh - var(--top))}
  html.zs:not([data-app="assets"]) body:has(.wrap > nav.side) .top{margin-inline-start:0}
  html.zs:not([data-app="assets"]) body .wrap > nav.side .side-brand{display:none}
  /* the fold button lived in the side menu's header; it is the bar's now, beside the mark */
  html.zs:not([data-app="assets"]) body:has(.wrap > nav.side):not(:has(.zrail)) .top .rail-btn{display:inline-flex}
  html.zs body .top .rail-btn{order:-1;color:var(--z-bar-mute)}
  html.zs body .top .rail-btn:hover{background:var(--z-bar-hover);color:var(--z-bar-ink)}
}

/* ══ 11 · ONE SETTINGS PAGE, WITH A MENU (#200, 4 Oct 2026) ═════════════════
   Hussain: "One Settings page: unify the workspace's /auth#settings and HR's
   All Settings, better designed, with a left menu". TartibUI.settings draws it
   (tartib-ui.js), the Workspace and HR both: the menu of groups on the left
   (a search on top, sections in 11px capitals, each group with how many
   settings it holds), and the open group on the right as one list of rows —
   what the setting is, one line of what is set there, and where it opens.
   ⚠️ ONE SIZE FOR EVERY ROW AND EVERY MENU BUTTON (his rule: "buttons properly
   organized on the page, same size, professional look"): 36px menu buttons,
   rows at least 60px, the same on every group and in both apps.
   ⚠️ [hidden] IS RESTATED. The rows and groups are display:flex/block by
   class, which beats the browser's own [hidden]; the search hides by
   attribute, so without these lines it would hide nothing. */
/* the menu stays in view as the page scrolls: under the top bar and the page's
   own sticky bar (HR's .zpbar); a page that scrolls inside itself (the
   Workspace's .wrap) says where its own top is */
html.zs .tset{--tset-top:calc(var(--top) + var(--z-pbar-h) + 12px);
  display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start;margin:4px 0 40px}
html.zs .tset > .tset-menu{position:sticky;top:var(--tset-top);display:flex;flex-direction:column;min-width:0;
  max-height:calc(100vh - var(--tset-top) - 16px);padding:10px 8px;box-sizing:border-box;
  border:1px solid var(--z-line);border-radius:10px;background:var(--z-bg);box-shadow:var(--z-shadow)}
html.zs .tset-find{display:flex;align-items:center;gap:8px;flex:none;height:34px;margin:0 2px 4px;padding:0 10px;box-sizing:border-box;
  border:1px solid var(--z-field-line);border-radius:7px;background:var(--z-bg);cursor:text}
html.zs .tset-find .ic{display:inline-flex;flex:none;color:var(--z-sub)}
html.zs .tset-find .ic svg{width:14px;height:14px}
html.zs .tset-find:focus-within{border-color:var(--tc-strong);box-shadow:0 0 0 2px var(--z-sel)}
/* ⚠️ BY ID: the shell's field rule is (0,5,3) — a class here loses, and draws a box inside the box */
html.zs body .tset-find input#tset-q{flex:1;min-width:0;width:auto;min-height:0;height:100%;margin:0;padding:0;border:0;border-radius:0;
  outline:0;box-shadow:none;background:transparent;font:inherit;font-size:var(--t-md);color:var(--z-ink)}
html.zs body .tset-find input#tset-q::-webkit-search-cancel-button{cursor:pointer}
html.zs .tset-nav{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;padding:0 2px}
html.zs .tset-sec{margin:14px 8px 6px;font-size:var(--t-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--z-sub)}
html.zs .tset-nav .tset-sec:first-child{margin-top:8px}
html.zs .tset-nav .tset-g{position:relative;display:flex;align-items:center;gap:10px;width:100%;height:36px;margin:1px 0;padding:0 10px;
  box-sizing:border-box;border:0;border-radius:7px;background:transparent;font:inherit;font-size:var(--t-md);font-weight:400;
  color:var(--z-ink);text-align:start;cursor:pointer;transition:background-color .15s,opacity .15s}
html.zs .tset-nav .tset-g:hover{background:var(--z-hover)}
html.zs .tset-nav .tset-g:focus-visible{outline:2px solid color-mix(in srgb,var(--tc) 55%,transparent);outline-offset:-2px}
html.zs .tset-nav .tset-g .ic{display:inline-flex;flex:none;color:var(--z-sub)}
html.zs .tset-nav .tset-g .ic svg{width:16px;height:16px}
html.zs .tset-gt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.zs .tset-n{display:inline-grid;place-items:center;flex:none;min-width:22px;height:20px;padding:0 6px;box-sizing:border-box;
  border-radius:10px;background:var(--z-hover);color:var(--z-sub);font-size:var(--t-xs);font-weight:700;font-variant-numeric:tabular-nums}
html.zs .tset-nav .tset-g.on{background:var(--z-sel);color:var(--z-ink);font-weight:700}
html.zs .tset-nav .tset-g.on::before{content:"";position:absolute;inset-inline-start:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--tc-strong)}
html.zs .tset-nav .tset-g.on .ic{color:var(--tc-strong)}
html.zs .tset-nav .tset-g.on .tset-n{background:var(--tc-strong);color:#fff}
html.zs .tset-nav .tset-g.dim{opacity:.4}
/* the open group */
html.zs .tset-pane{min-width:0}
html.zs .tset-gh{display:flex;align-items:center;gap:14px;margin:2px 0 14px}
html.zs .tset-gi{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:10px;background:var(--tc-wash);color:var(--tc-strong)}
html.zs .tset-gi .ic{display:inline-flex}
html.zs .tset-gi .ic svg{width:22px;height:22px}
html.zs body .tset-gh h2{margin:0 0 2px;font-size:var(--t-xl);font-weight:700;line-height:1.35;color:var(--z-ink)}
html.zs body .tset-gh p{margin:0;font-size:var(--t-md);line-height:1.5;color:var(--z-sub)}
html.zs .tset-list{border:1px solid var(--z-line);border-radius:10px;background:var(--z-bg);box-shadow:var(--z-shadow);overflow:hidden}
html.zs body .tset-row{display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 16px;box-sizing:border-box;
  border-bottom:1px solid var(--z-line-2);color:var(--z-ink);text-decoration:none;transition:background-color .15s}
html.zs body .tset-row:last-child{border-bottom:0}
html.zs body .tset-row:hover{background:var(--z-hover);text-decoration:none}
html.zs body .tset-row:focus-visible{outline:2px solid color-mix(in srgb,var(--tc) 55%,transparent);outline-offset:-2px}
html.zs .tset-rt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
html.zs .tset-rn{font-size:var(--t-md);font-weight:700;line-height:1.4;color:var(--z-ink)}
html.zs .tset-rd{font-size:var(--t-sm);line-height:1.45;color:var(--z-sub)}
html.zs .tset-go{display:inline-flex;flex:none;color:var(--z-sub);transition:color .15s,transform .15s}
html.zs .tset-go .ic{display:inline-flex}
html.zs .tset-go .ic svg{width:16px;height:16px}
html.zs body .tset-row:hover .tset-go{color:var(--tc-strong);transform:translateX(2px)}
html.zs .tset-out{display:inline-flex;align-items:center;gap:4px;flex:none;height:24px;padding:0 10px;box-sizing:border-box;border-radius:12px;
  background:var(--z-hover);color:var(--z-sub);font-size:var(--t-xs);font-weight:700;white-space:nowrap}
html.zs .tset-out i{font-style:normal}
html.zs body .tset-row:hover .tset-out{color:var(--tc-ink)}
html.zs[dir="rtl"] :is(.tset-go .ic,.tset-out i,.tset-o){transform:scaleX(-1)}
html.zs[dir="rtl"] body .tset-row:hover .tset-go{transform:translateX(-2px)}
/* searching: every group with a hit, one under another */
html.zs .tset.finding .tset-grp + .tset-grp{margin-top:22px}
html.zs .tset.finding .tset-gi{width:32px;height:32px;border-radius:8px}
html.zs .tset.finding .tset-gi .ic svg{width:18px;height:18px}
html.zs .tset.finding .tset-gh{margin-bottom:10px}
html.zs .tset.finding .tset-gh p{display:none}
html.zs .tset-none{padding:48px 16px;border:1px dashed var(--z-line);border-radius:10px;text-align:center;color:var(--z-sub)}
html.zs :is(.tset-row,.tset-grp,.tset-none,.tset-g)[hidden]{display:none}

/* the menu beside a settings page (HR's): All settings, then every group, the
   one holding this page unfolded with the page marked */
html.zs .tset-side{display:block}
html.zs .tset-back{display:flex;align-items:center;gap:6px;width:100%;height:32px;margin:0 0 4px;padding:0 8px;box-sizing:border-box;
  border:0;border-radius:6px;background:transparent;font:inherit;font-size:var(--t-md);color:var(--z-ink);text-align:start;cursor:pointer}
html.zs .tset-back:hover{background:var(--z-hover)}
html.zs .tset-back .ic{display:inline-flex}
html.zs .tset-back .ic svg{width:14px;height:14px}
html.zs[dir="rtl"] .tset-back .ic{transform:scaleX(-1)}
html.zs .tset-side .tset-g{display:flex;align-items:center;gap:8px;width:100%;height:34px;padding:0 8px;box-sizing:border-box;border:0;border-radius:6px;
  background:transparent;font:inherit;font-size:var(--t-md);font-weight:400;color:var(--z-ink);text-align:start;cursor:pointer}
html.zs .tset-side .tset-g:hover{background:var(--z-hover)}
html.zs .tset-side .tset-g .ic{display:inline-flex;flex:none}
html.zs .tset-side .tset-g .ic:first-child{color:var(--tc-strong)}
html.zs .tset-side .tset-g .ic svg{width:16px;height:16px}
html.zs .tset-side .tset-g .ic:last-child{color:var(--z-sub);transition:transform .15s}
html.zs .tset-side .tset-g .ic:last-child svg{width:14px;height:14px}
html.zs .tset-fold.open > .tset-g .ic:last-child{transform:rotate(90deg)}
html.zs[dir="rtl"] .tset-fold:not(.open) > .tset-g .ic:last-child{transform:scaleX(-1)}
html.zs .tset-fold.has-on > .tset-g{font-weight:700}
html.zs .tset-lks{display:none;padding:2px 0 6px}
html.zs .tset-fold.open > .tset-lks{display:block}
html.zs body .tset-lk{display:flex;align-items:center;gap:6px;height:32px;margin:1px 0;padding:0 8px;padding-inline-start:32px;box-sizing:border-box;
  border-radius:6px;font-size:var(--t-md);color:var(--z-ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.zs body .tset-lk:hover{background:var(--z-hover);text-decoration:none}
html.zs body .tset-lk.on{background:var(--tc-strong);color:#fff;font-weight:700}
html.zs .tset-o{flex:none;font-size:.9em;opacity:.55}

@media(max-width:1100px){ html.zs .tset{grid-template-columns:220px minmax(0,1fr);gap:18px} }
@media(max-width:760px){
  /* the phone: the menu becomes two even columns of buttons over the open group */
  html.zs .tset{display:block;margin-top:0}
  html.zs .tset > .tset-menu{position:static;max-height:none;margin:0 0 16px;padding:0;border:0;background:transparent;box-shadow:none}
  html.zs .tset-find{height:38px;margin:0 0 6px}
  html.zs .tset-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;padding:0}
  html.zs .tset-nav .tset-sec{grid-column:1 / -1;margin:8px 2px 0}
  html.zs .tset-nav .tset-g{height:40px;margin:0;border:1px solid var(--z-line);border-radius:8px;background:var(--z-bg)}
  html.zs .tset-nav .tset-g.on{border-color:var(--tc-strong);background:var(--tc-strong);color:#fff}
  html.zs .tset-nav .tset-g.on::before{display:none}
  html.zs .tset-nav .tset-g.on .ic{color:#fff}
  html.zs .tset-nav .tset-g.on .tset-n{background:rgba(255,255,255,.25)}
  html.zs .tset-grp{scroll-margin-top:calc(var(--top) + 8px)}
  html.zs body .tset-row{min-height:56px;padding:10px 14px}
  html.zs .tset-gi{width:38px;height:38px}
}

/* ═══ RULE 15 — COMPACT AND CLEAN, ON EVERY PAGE (13 Oct 2026) ═══════════════
   Hussain, with Settings → Tartib App → Rota open: "as always on the pages is too bulky and stretches vertically in a bad
   way … have a proper general rule for this when we design any page is that make it compact and clean, don't stretch
   buttons and fields horizontally or rows vertically" (docs/PRINCIPLES.md, rule 15). What the design system does by itself,
   for every page that loads it:
   · rows at working density (--z-rowpad above: 7px 12px, every style);
   · a button or a segmented control is as wide as what it says — never the width of the flex column or grid cell it sits
     in (the Rota planners' "Where they are based | Every location | Chosen locations" ran 860px wide). max-content only caps:
     a control never grows past its room, so nothing can overflow a phone because of it;
   · a field is as wide as the value it holds — a number, a time or a date short, a name, an email or a choice at most 28rem;
   · a button, a select or a field in a table row is a little lower than a form's (26–28px), so the row stays one line of
     text tall.
   A page's own CSS must not undo these.
   ⚠️ THE WIDTH CAPS ARE FOR A DESK, NOT A PHONE. Below 761px a page lays its own actions out for a thumb — Sign-in problems'
   Save and Undo, Remove sign-in, the Access check's buttons fill their row on purpose (`flex:1 1 100%`, measured by
   tools/access-end-check.js). The first cut capped them everywhere and a phone drew each one 170px wide on a line of its own:
   neither its width nor full. So the caps start where the phone layouts end. */
@media (min-width:761px){
  html.zs body .seg{max-width:max-content}
  html.zs body .main .btn{max-width:max-content}
  html.zs body .main :is(input[type="number"],input[type="time"],input[type="date"],input[type="month"],input[type="week"]){max-width:12rem}
  html.zs body .main :is(select,input[type="text"],input[type="email"],input[type="tel"],input[type="search"],input[type="url"],input[type="password"],input:not([type])){max-width:28rem}
}
html.zs body .main td .btn.sm{height:26px}
html.zs body .main td :is(select,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"])){min-height:28px;height:28px;padding-top:0;padding-bottom:0}