/*! Derived from Wharf — stock and orders for product businesses, in one moving dashboard — © 2026 Hasib (OVERSHOOT). All rights reserved. Licensed to mosawi@me.com (order INS-BB1F1B22), not sold: used and changed inside OrderTech under that licence; not to be handed on, sold or published as source. */
/* ══════════════════════════════════════════════════════════════════════════════════════════════════════
   ordertech-wharf.css — OrderTech's back office (console.ordertech.me) in the NEW look (17 Oct 2026)

   Hussain, 00:17: "work now on console.ordertech.me and give it this style, and also keep the old one as
   classic" — "this style" is the Wharf template he licensed (OVERSHOOT 148-wharf, v1.0.1); 00:20: "also keep
   all animations and others" (the motion is brand/ordertech-wharf.js).

   ⚠️ OPT-IN, EVERY RULE. Everything below is under :root[data-look="wharf"] — the console's pre-paint script
   sets it unless localStorage tartib_look is "classic" — so linking this file changes nothing for a Classic
   person: the page is the one it was. tools/console-wharf-check.js parses the file and fails on a rule that is
   not scoped.

   ⚠️ A LOOK IS TOKENS FIRST (the console's own rule, "A THEME IS TOKENS, NOT A SECOND STYLESHEET"): section 1
   says the console's --z-* tokens again in Wharf's paper, ink and accent, so most of the shell follows by
   itself; the sections after it restyle the shapes that tokens cannot (a card's radius, the night pill, the
   segmented control, the page head). It is linked LAST in <head>: its token block and the theme blocks
   (:root[data-style=…]) tie on specificity, and the later one wins.

   What Wharf decided, kept:  warm paper with the accent glowing in two corners, translucent cards on it;
   three colours doing the work — ink, NIGHT (the primary button, the current page, the chosen segment) and
   the accent as a light surface (bars, fills, badges); status as a word on its own wash with a dot.
   What OrderTech decided, kept:  Almarai and only Almarai (PRINCIPLES 12) on the console's one type scale
   (--t-*); the business's own colour (rule 13) — the accent IS the company colour when it set one
   (--tc-brand, written by tenantColour()), and Wharf's honey when it did not; compact (rule 15) — Wharf's
   40px controls are 34px here, rows stay one line, nothing stretches; no popups (rule 14) — Wharf's dialogs
   and side panel are not used, a form stays a page.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ───────────────────────────────────────────────────────────────────────────────────────── */
:root[data-look="wharf"]{
  color-scheme:light;
  /* Wharf's paper */
  --w-backdrop:#e9e6dd; --w-app-1:#f7f5ef; --w-app-2:#f3f1ea;
  --w-card:rgba(255,254,250,.72); --w-card-2:#efede6; --w-solid:#fbfaf6; --w-well:#efede6;
  --w-edge:rgba(255,255,255,.9); --w-hair:rgba(31,31,36,.09); --w-hair-2:rgba(31,31,36,.16);
  --w-ink:#1f1f24; --w-muted:#5d5b5a;
  --w-night:#1f1f24; --w-night-2:#34343c; --w-night-ink:#f4f3ee; --w-grey:#c9c6bd;
  /* the accent: the business's colour if it set one, Wharf's honey if not */
  --w-acc:var(--tc-brand,#f4c24a);
  --w-acc-soft:color-mix(in srgb,var(--w-acc) 34%,#fffdf6);
  --w-acc-wash:color-mix(in srgb,var(--w-acc) 16%,#fffdf6);
  --w-acc-text:color-mix(in srgb,var(--w-acc) 42%,#2a2410);   /* the accent as words on cream: ≥4.5:1 for any hue */
  --w-acc-ink:#1f1f24;
  --w-glow:color-mix(in srgb,var(--w-acc) 40%,transparent);
  --w-side:rgba(255,254,250,.55); --w-side-hover:rgba(31,31,36,.05); --w-field:rgba(255,255,255,.6);
  --w-good:#25693e; --w-good-bg:#e1f1e4;
  --w-warn:#a4500f; --w-warn-bg:#fce3d0;
  --w-bad:#b9392f;  --w-bad-bg:#fbe3df;
  --w-info:var(--w-acc-text); --w-info-bg:var(--w-acc-wash);
  --w-neutral:#5d5b5a; --w-neutral-bg:#efede6;
  --w-head:#f8f6f0;                         /* a sticky column head: solid, so rows never show through */
  --w-r-card:20px; --w-r-md:12px; --w-r-sm:9px;
  --w-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 18px 40px -26px rgba(40,36,70,.35);
  --w-pop:0 20px 50px -20px rgba(31,31,36,.35);
  --w-focus:0 0 0 2px var(--w-solid),0 0 0 4px var(--w-ink);
  --w-ctl:34px;                             /* rule 15: Wharf's 40px controls at working height */
  --w-gut:28px;                             /* the work area's side margin: Wharf's at a desk, Classic's 20px below 1440 */

  /* the console's own vocabulary, spoken in Wharf */
  --ink:var(--w-ink); --sub:var(--w-muted); --dim:var(--w-muted); --line:var(--w-hair-2); --line2:var(--w-hair);
  --bg:var(--w-app-1); --pan:var(--w-solid); --br:var(--w-night); --brt:var(--w-acc-wash);
  --top:56px; --z-side-w:220px; --z-side-row:34px;
  --z-bar:transparent; --z-bar-line:transparent; --z-bar-rule:transparent; --z-bar-2:var(--w-field);
  --z-bar-ink:var(--w-ink); --z-bar-mute:var(--w-muted); --z-bar-ph:var(--w-muted); --z-bar-hover:var(--w-side-hover);
  --z-qc:var(--w-night); --z-qc-ink:var(--w-night-ink); --z-avatar:var(--w-acc); --z-av-ring:var(--w-solid);
  --z-side:var(--w-side); --z-side-line:var(--w-hair); --z-side-ink:var(--w-ink); --z-side-sub:var(--w-ink);
  --z-side-mute:var(--w-muted); --z-side-hover:var(--w-side-hover); --z-side-open:transparent;
  --z-side-on:var(--w-night); --z-side-on-ink:var(--w-night-ink); --z-side-on-w:700; --z-side-here:var(--w-ink);
  --z-side-pat:none;
  --z-canvas:transparent; --z-pbar:transparent; --z-pbar-line:transparent; --z-pbar-h:66px; --z-pbar-rule:0px;
  --z-pill:var(--w-night); --z-link:var(--w-ink);
  --z-line:var(--w-hair-2); --z-line-2:var(--w-hair); --z-head:var(--w-head); --z-th-ink:var(--w-muted);
  --z-cell:var(--w-ink); --z-ink:var(--w-ink); --z-sub:var(--w-muted);
  --z-bg:var(--w-card); --z-hover:color-mix(in srgb,var(--w-well) 70%,transparent); --z-sel:var(--w-acc-wash);
  --z-field-line:var(--w-hair-2);
  --z-btn:var(--w-solid); --z-btn-line:var(--w-hair-2); --z-btn-hover:var(--w-well);
  --z-green:var(--w-good); --z-blue:var(--w-acc-text); --z-amber:var(--w-warn); --z-red:var(--w-bad);
  --z-radius:var(--w-r-card); --z-btn-radius:var(--w-r-md);
  --z-shadow:var(--w-shadow);
  --z-rowpad:11px 10px; --z-rowpad2:7px; --z-thpad:10px 10px;
  --z-rail-bg:var(--w-card); --z-rail-ink:var(--w-ink); --z-rail-sub:var(--w-muted); --z-rail-line:var(--w-hair);
  --tc-tint:var(--w-acc-wash); --tc-wash:var(--w-acc-wash);
  /* ui.css's names */
  --surface:var(--w-solid); --surface-2:var(--w-app-1); --line-soft:var(--w-hair); --body:var(--w-ink); --mute:var(--w-muted);
  --accent:var(--w-night); --accent-deep:var(--w-night); --accent-ink:var(--w-ink); --accent-wash:var(--w-acc-wash);
  --ok:var(--w-good); --ok-bg:var(--w-good-bg); --ok-line:transparent;
  --warn:var(--w-warn); --warn-bg:var(--w-warn-bg); --warn-line:transparent;
  --bad:var(--w-bad); --bad-bg:var(--w-bad-bg); --bad-line:color-mix(in srgb,var(--w-bad) 35%,transparent);
  --info:var(--w-ink); --info-bg:var(--w-acc-wash); --info-line:transparent;
  --red:var(--w-bad); --red-bg:var(--w-bad-bg); --amber:var(--w-warn); --amber-bg:var(--w-warn-bg); --green:var(--w-good); --green-bg:var(--w-good-bg);
  --act:var(--w-warn); --act-bg:var(--w-warn-bg); --act-line:transparent; --act-ink:var(--w-warn);
}
/* Dark: Wharf's selected steps, not a flip. Night becomes cream, so the primary button and the current page
   stay the loudest things on the screen. Declared after the console's own dark blocks (same specificity). */
:root[data-look="wharf"][data-theme="dark"]{
  color-scheme:dark;
  --w-backdrop:#121215; --w-app-1:#1a1a1f; --w-app-2:#17171b;
  --w-card:rgba(255,255,255,.05); --w-card-2:rgba(255,255,255,.07); --w-solid:#202026; --w-well:rgba(255,255,255,.07);
  --w-edge:rgba(255,255,255,.08); --w-hair:rgba(255,255,255,.1); --w-hair-2:rgba(255,255,255,.18);
  --w-ink:#f1f0ea; --w-muted:#b0aea7;
  --w-night:#f1f0ea; --w-night-2:#cfcdc5; --w-night-ink:#1f1f24; --w-grey:#4a4a52;
  --w-acc-soft:color-mix(in srgb,var(--w-acc) 22%,transparent); --w-acc-wash:color-mix(in srgb,var(--w-acc) 14%,transparent);
  --w-acc-text:color-mix(in srgb,var(--w-acc) 55%,#fff); --w-glow:color-mix(in srgb,var(--w-acc) 16%,transparent);
  --w-side:rgba(255,255,255,.03); --w-side-hover:rgba(255,255,255,.06); --w-field:rgba(255,255,255,.06);
  --w-good:#7fd49c; --w-good-bg:rgba(127,212,156,.14);
  --w-warn:#f28c4a; --w-warn-bg:rgba(242,140,74,.16);
  --w-bad:#f29b92;  --w-bad-bg:rgba(242,155,146,.14);
  --w-neutral:#b0aea7; --w-neutral-bg:rgba(255,255,255,.08);
  --w-head:#1e1e23;
  --w-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 40px -26px rgba(0,0,0,.7);
  --w-pop:0 20px 50px -20px rgba(0,0,0,.7);
  /* the console's dark block names these again; say them in Wharf once more */
  --ink:var(--w-ink); --sub:var(--w-muted); --line:var(--w-hair-2); --line2:var(--w-hair); --bg:var(--w-app-1); --pan:var(--w-solid);
  --z-bar:transparent; --z-bar-line:transparent; --z-bar-2:var(--w-field); --z-bar-ink:var(--w-ink); --z-bar-mute:var(--w-muted);
  --z-bar-ph:var(--w-muted); --z-bar-hover:var(--w-side-hover); --z-av-ring:var(--w-solid); --z-qc:var(--w-night); --z-qc-ink:var(--w-night-ink);
  --z-bg:var(--w-card); --z-canvas:transparent; --z-hover:rgba(255,255,255,.045); --z-field-line:var(--w-hair-2); --z-sel:var(--w-acc-wash);
  --z-side:var(--w-side); --z-side-line:var(--w-hair); --z-side-ink:var(--w-ink); --z-side-sub:var(--w-ink); --z-side-mute:var(--w-muted);
  --z-side-hover:var(--w-side-hover); --z-side-open:transparent; --z-side-on:var(--w-night); --z-side-on-ink:var(--w-night-ink); --z-side-on-w:700;
  --z-side-here:var(--w-ink); --z-pbar:transparent; --z-pbar-line:transparent;
  --z-line:var(--w-hair-2); --z-line-2:var(--w-hair); --z-head:var(--w-head); --z-th-ink:var(--w-muted);
  --z-cell:var(--w-ink); --z-ink:var(--w-ink); --z-sub:var(--w-muted); --z-link:var(--w-ink);
  --z-btn:var(--w-solid); --z-btn-line:var(--w-hair-2); --z-btn-hover:rgba(255,255,255,.07);
  --z-shadow:var(--w-shadow); --z-pill:var(--w-night);
  --z-green:var(--w-good); --z-blue:var(--w-acc-text); --z-amber:var(--w-warn); --z-red:var(--w-bad);
  --tc-tint:var(--w-acc-wash); --tc-wash:var(--w-acc-wash); --z-side-pat:none;
}

/* ── 2 · THE FRAME: paper, the bar, the side menu ─────────────────────────────────────────────────────── */
:root[data-look="wharf"]{background:var(--w-backdrop)}
:root[data-look="wharf"] body{min-height:100vh;color:var(--w-ink);
  background:
    radial-gradient(70% 55% at 100% 0%,var(--w-glow),transparent 70%) fixed,
    radial-gradient(45% 40% at 0% 100%,var(--w-glow),transparent 70%) fixed,
    linear-gradient(160deg,var(--w-app-1),var(--w-app-2) 55%,color-mix(in srgb,var(--w-acc) 14%,var(--w-app-2))) fixed}
:root[data-look="wharf"][data-theme="dark"] body, :root[data-look="wharf"][data-theme="dark"] body #page{background-color:transparent}
:root[data-look="wharf"][data-theme="dark"] body{background:
    radial-gradient(70% 55% at 100% 0%,var(--w-glow),transparent 70%) fixed,
    radial-gradient(45% 40% at 0% 100%,var(--w-glow),transparent 70%) fixed,
    linear-gradient(160deg,var(--w-app-1),var(--w-app-2) 55%,#1d1d24) fixed}
:root[data-look="wharf"] body #page, :root[data-look="wharf"] body #ovl{background:transparent}
:root[data-look="wharf"] ::selection{background:var(--w-acc-soft);color:var(--w-ink)}
:root[data-look="wharf"] body :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:none;box-shadow:var(--w-focus)}

/* The bar: frosted paper. The mark sits over the side menu's column (the same paper and its hairline), so the
   column reads from the top of the window to the bottom, as Wharf's sidebar does. */
:root[data-look="wharf"] body .top{height:var(--top);padding:0 16px 0 0;gap:10px;border:0;box-shadow:none;color:var(--w-ink);
  background:color-mix(in srgb,var(--w-app-1) 78%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--w-hair)}
:root[data-look="wharf"] body .top .lg{width:var(--z-side-w);padding-inline-start:20px;align-self:stretch;
  background:var(--w-side);border-inline-end:1px solid var(--w-hair)}
:root[data-look="wharf"] body .top .lg img{height:28px}
:root[data-look="wharf"] body .top .lg .lk-lt{display:none}
:root[data-look="wharf"] body .top .lg .lk-dk{display:block}
:root[data-look="wharf"][data-theme="dark"] body .top .lg .lk-lt{display:block}
:root[data-look="wharf"][data-theme="dark"] body .top .lg .lk-dk{display:none}
/* the search: Wharf's field — a hairline, the glass, the magnifier inside */
:root[data-look="wharf"] body .top .sr{flex:0 1 340px}
:root[data-look="wharf"] body .top .sr input{height:var(--w-ctl);border-radius:var(--w-r-md);background:var(--w-field);
  border:1px solid var(--w-hair);color:var(--w-ink);padding-inline:38px 12px}
:root[data-look="wharf"] body .top .sr input::placeholder{color:var(--w-muted)}
:root[data-look="wharf"] body .top .sr input:hover{box-shadow:none;border-color:var(--w-hair-2)}
:root[data-look="wharf"] body .top .sr input:focus{background:var(--w-solid);color:var(--w-ink);border-color:var(--w-hair-2);box-shadow:var(--w-focus)}
:root[data-look="wharf"] body .top .sr .sri{color:var(--w-muted)}
:root[data-look="wharf"] body .top .tn{color:var(--w-ink);font-weight:700;border-radius:var(--w-r-md)}
:root[data-look="wharf"] body .top .tn::after{border-top-color:var(--w-muted)}
/* POS | Warehouse: Wharf's segmented control, the night pill on the one you are in */
:root[data-look="wharf"] body .top .dsw{position:relative;padding:3px;gap:0;border-radius:var(--w-r-md);background:var(--w-well);
  border:1px solid var(--w-hair);margin-inline-start:16px}
:root[data-look="wharf"] body .top .dsw button{height:28px;padding:0 13px;border:0;border-radius:var(--w-r-sm);color:var(--w-muted);
  font-size:var(--t-md);font-weight:400;background:transparent}
:root[data-look="wharf"] body .top .dsw button + button{border:0}
:root[data-look="wharf"] body .top .dsw button:hover{color:var(--w-ink);background:transparent}
:root[data-look="wharf"] body .top .dsw button.on{background:var(--w-night);color:var(--w-night-ink);font-weight:700}
/* Auto | Light | Dark — the same segmented control, small */
:root[data-look="wharf"] body .top .thm{position:relative;display:inline-flex;padding:3px;gap:0;border:1px solid var(--w-hair);
  border-radius:var(--w-r-md);background:var(--w-well)}
:root[data-look="wharf"] body .top .thm button{height:24px;padding:0 9px;border:0;border-radius:7px;background:transparent;color:var(--w-muted);font-weight:400}
:root[data-look="wharf"] body .top .thm button:hover{background:transparent;color:var(--w-ink)}
:root[data-look="wharf"] body .top .thm button.on{background:var(--w-night);color:var(--w-night-ink);font-weight:700}
/* round icon buttons, as Wharf's bell */
:root[data-look="wharf"] body .top .ib{width:var(--w-ctl);height:var(--w-ctl);border-radius:50%;color:var(--w-ink);background:var(--w-solid);
  border:1px solid var(--w-hair-2)}
:root[data-look="wharf"] body .top .ib:hover, :root[data-look="wharf"] body .top .ib[aria-expanded="true"]{background:var(--w-well);color:var(--w-ink)}
:root[data-look="wharf"] body .top .ib.qc{width:var(--w-ctl);height:var(--w-ctl);border-radius:50%;border:0;background:var(--w-night);color:var(--w-night-ink)}
:root[data-look="wharf"] body .top .ib.qc:hover, :root[data-look="wharf"] body .top .ib.qc[aria-expanded="true"]{background:var(--w-night-2);color:var(--w-night-ink);filter:none}
:root[data-look="wharf"] body .top .ib.qc:active{transform:none}
:root[data-look="wharf"] body .top .av{width:var(--w-ctl);height:var(--w-ctl);background:var(--w-acc-soft);color:var(--w-ink);
  box-shadow:0 0 0 1px var(--w-hair-2);font-weight:700}

/* The side menu: Wharf's translucent paper column. A group is a quiet row; its pages are 34px links; the page
   you are on rides the night pill (the motion flies it from the last page to this one). */
:root[data-look="wharf"] body .sh aside.ui-nav{background:var(--w-side);background-image:none;border-inline-end:1px solid var(--w-hair);
  padding:14px 12px 16px;scrollbar-width:thin;scrollbar-color:var(--w-hair-2) transparent}
:root[data-look="wharf"] body .sh aside.ui-nav .navsection.has-on > .navgrp:not([aria-expanded="true"]):not(:hover){background-color:transparent}
:root[data-look="wharf"] body .sh aside.ui-nav .row, :root[data-look="wharf"] body .sh aside.ui-nav .navgrp{height:var(--z-side-row);
  border-radius:var(--w-r-md);padding:0 10px 0 30px;gap:11px;color:var(--w-ink);font-size:var(--t-md)}
:root[data-look="wharf"] body .sh aside.ui-nav :is(.navhome, .navbody) .row{margin:0}
:root[data-look="wharf"] body .sh aside.ui-nav .navhome{margin:0 0 10px}
:root[data-look="wharf"] body .sh aside.ui-nav .navhome .row{padding-inline-start:12px}
:root[data-look="wharf"] body .sh aside.ui-nav .navgrp .car{inset-inline-start:11px;color:var(--w-muted)}
:root[data-look="wharf"] body .sh aside.ui-nav .ico{color:var(--w-muted)}
:root[data-look="wharf"] body .sh aside.ui-nav .navgrp[aria-expanded="true"]{background:transparent;font-weight:700}
:root[data-look="wharf"] body .sh aside.ui-nav .navsection.has-on > .navgrp,
:root[data-look="wharf"] body .sh aside.ui-nav .navsection.has-on > .navgrp .car{color:var(--w-ink)}
:root[data-look="wharf"] body .sh aside.ui-nav .navsection.has-on > .navgrp .ico{color:var(--w-acc-text)}
:root[data-look="wharf"] body .sh aside.ui-nav .navsection{margin:0 0 4px}
:root[data-look="wharf"] body .sh aside.ui-nav .navbody > div{gap:2px}
:root[data-look="wharf"] body .sh aside.ui-nav .navsection .navbody > div{padding:2px 0 6px}
:root[data-look="wharf"] body .sh aside.ui-nav .navbody .row{padding:0 10px 0 41px;color:var(--w-ink)}
:root[data-look="wharf"] body .sh aside.ui-nav .subkids .row{padding-inline-start:53px}
:root[data-look="wharf"] body .sh aside.ui-nav .row:hover, :root[data-look="wharf"] body .sh aside.ui-nav .navgrp:hover{background:var(--w-side-hover)}
:root[data-look="wharf"] body .sh aside.ui-nav .row.on, :root[data-look="wharf"] body .sh aside.ui-nav .row[aria-current="page"],
:root[data-look="wharf"] body .sh aside.ui-nav .navbody .row.on{background:var(--w-night);color:var(--w-night-ink);font-weight:700}
:root[data-look="wharf"] body .sh aside.ui-nav .row.on:hover{background:var(--w-night);color:var(--w-night-ink);filter:none}
:root[data-look="wharf"] body .sh aside.ui-nav .row.on .ico{color:var(--w-acc)}
/* when the motion is on, the night is ONE pill that travels (ordertech-wharf.js, in the menu's shadow root, under the
   rows) and the row itself is clear; without the script, or with reduced motion, the row wears it as above */
:root[data-look="wharf"] body .sh aside.ui-nav[data-w-rail] :is(.row.on,.row[aria-current="page"],.navbody .row.on,.row.on:hover){background:transparent}
/* counts: Wharf's badges — the accent block, the warning one for what blocks */
:root[data-look="wharf"] body .sh aside.ui-nav .n, :root[data-look="wharf"] body .sh aside.ui-nav .row b,
:root[data-look="wharf"] body .sh aside.ui-nav .row em{min-width:22px;height:20px;padding:0 7px;display:inline-grid;place-items:center;
  border-radius:999px;background:var(--w-acc-soft);color:var(--w-ink);font-size:var(--t-xs);font-weight:700;opacity:1}
:root[data-look="wharf"] body .sh aside.ui-nav .n.bad{background:var(--w-warn-bg);color:var(--w-warn)}
:root[data-look="wharf"] body .sh aside.ui-nav .row.on .n, :root[data-look="wharf"] body .sh aside.ui-nav .row.on b,
:root[data-look="wharf"] body .sh aside.ui-nav .row.on em{background:var(--w-acc);color:var(--w-acc-ink);opacity:1}
:root[data-look="wharf"] body .sh aside.ui-nav .nq .qa{border-radius:7px}
:root[data-look="wharf"] body .sh aside.ui-nav .nq:has(.row.on) .qa{color:var(--w-night-ink)}
:root[data-look="wharf"] body .sh aside.ui-nav .set-back{border-radius:var(--w-r-md)}
:root[data-look="wharf"] body .sh aside.ui-nav .set-navsec{font-size:var(--t-sm);font-weight:400;text-transform:none;letter-spacing:0;color:var(--w-muted);margin:14px 6px 6px 12px}

/* ── 3 · THE PAGE HEAD ─────────────────────────────────────────────────────────────────────────────────
   Wharf's head: a large title in the display weight, the line under it, the page's buttons on the right.
   Still the console's page bar — it stays under the top bar while the list scrolls — but frosted paper
   instead of a white band, and the title as large as Wharf's. The lede (hidden in Classic, kept for readers)
   is Wharf's sub-line here: one line, small, cut with an ellipsis (rule 15). */
:root[data-look="wharf"] body .ui .page{padding:18px var(--w-gut) 48px}
:root[data-look="wharf"] body .split .spmain .page{padding:18px 28px 48px}
@media(min-width:761px){
  /* full width of the work area by its own box (not the console's border-image band), so the frost covers all of it */
  :root[data-look="wharf"] body #page .ui .page > .pbar{margin:-18px calc(-1 * var(--w-gut)) 14px;padding:0 var(--w-gut);border-image:none;
    background:color-mix(in srgb,var(--w-app-1) 72%,transparent);
    -webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px)}
  :root[data-look="wharf"] body #page .ui .page > .pbar > div:first-child:not(.act){flex:0 1 auto}
  /* a centred page (an item, a purchase order): its column is narrower than the window, so the band is the
     console's border image again, in paper nearly solid — one colour inside the box and out */
  :root[data-look="wharf"] body #page .ui .page.fx-wrap:not(.wide) > .pbar{margin-inline:0;padding-inline:2px;
    --pbg:linear-gradient(color-mix(in srgb,var(--w-app-1) 94%,transparent),color-mix(in srgb,var(--w-app-1) 94%,transparent));
    background:var(--pbg);border-image-source:var(--pbg);border-image-slice:0 fill;border-image-width:0;border-image-outset:0 100vmax;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  :root[data-look="wharf"] body #page .ui .page > .pbar h1{font-size:var(--t-3xl);font-weight:800;letter-spacing:-.01em;line-height:1.15;
    color:var(--w-ink)}
  :root[data-look="wharf"] body #page .ui .page > .pbar .sub.lede{position:static;width:auto;height:auto;clip:auto;overflow:hidden;
    white-space:nowrap;text-overflow:ellipsis;max-width:56ch;margin-top:3px;font-size:var(--t-md);line-height:1.35;color:var(--w-muted)}
  :root[data-look="wharf"] body #page .ui .page > .pbar .crumb{font-size:var(--t-sm);color:var(--w-muted)}
  :root[data-look="wharf"] body #page .ui .page > .pbar .fx-back{height:var(--w-ctl);border-radius:50%;width:var(--w-ctl);padding:0;
    justify-content:center;overflow:hidden;position:relative;white-space:nowrap;text-indent:120px;   /* the words stay, for readers, out of sight */
    background:var(--w-solid);border-color:var(--w-hair-2);color:var(--w-ink);margin-inline-end:4px}
  :root[data-look="wharf"] body #page .ui .page > .pbar .fx-back::before{content:"";width:16px;height:16px;flex:none;position:absolute;inset:0;margin:auto;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/16px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/16px no-repeat}
  :root[dir="rtl"][data-look="wharf"] body #page .ui .page > .pbar .fx-back::before{transform:scaleX(-1)}
  :root[data-look="wharf"] body #page .ui .page > .pbar .fx-back:hover{background:var(--w-well)}
}
:root[data-look="wharf"] body .ui .ph:has(h1){border-bottom:0}
:root[data-look="wharf"] body .ui .ph:has(h1) h1{font-weight:800;color:var(--w-ink)}
@media(min-width:761px){:root[data-look="wharf"] body .ui .ph:has(h1) h1{font-size:var(--t-3xl);line-height:1.2;letter-spacing:-.01em}}
:root[data-look="wharf"] body .ui h1{font-weight:800}
/* the older pages' head (Data quality, Orders, Recipes): .hdr with an eyebrow and a lede */
:root[data-look="wharf"] body .ui .hdr h1{font-size:var(--t-3xl);font-weight:800;letter-spacing:-.01em}
:root[data-look="wharf"] body .ui .hdr .eb{color:var(--w-acc-text);font-weight:700}
:root[data-look="wharf"] body .ui .hdr .ld{color:var(--w-muted)}

/* ── 4 · CARDS, FIGURES, TABLES ────────────────────────────────────────────────────────────────────────── */
:root[data-look="wharf"] body .ui :is(.card,.fx-card,.pan){background:var(--w-card);border:1px solid var(--w-edge);
  border-radius:var(--w-r-card);box-shadow:var(--w-shadow)}
:root[data-look="wharf"] body .ui .card > .h{min-height:46px;padding:12px 18px 8px;border-bottom:1px solid var(--w-hair)}
:root[data-look="wharf"] body .ui .card h2, :root[data-look="wharf"] body .ui .pan h2{font-size:var(--t-lg);font-weight:700;color:var(--w-ink)}
:root[data-look="wharf"] body .ui .card > .h .r, :root[data-look="wharf"] body .ui .card > .h .r a{font-size:var(--t-sm)}
:root[data-look="wharf"] body .ui .card > .h .r a, :root[data-look="wharf"] body .ui .fx-link, :root[data-look="wharf"] body .ui .hm-sum .hint a,
:root[data-look="wharf"] body .ui .hks a{color:var(--w-acc-text);font-weight:700}
:root[data-look="wharf"] body .ui .pan .pt{padding:12px 18px 10px;border-bottom:1px solid var(--w-hair);background:transparent}
:root[data-look="wharf"] body .ui .fx-sec h2{font-size:var(--t-lg);font-weight:700}
:root[data-look="wharf"] body .ui .card .hint{color:var(--w-muted)}
/* A list keeps its card: Wharf's table sits inside a rounded card, never edge to edge (the console flushes it) */
:root[data-look="wharf"] body #page .ui .page:is(:not(.fx-wrap),.fx-wrap.wide):has(> .pbar) > :is(.card,.fx-card):has(table){margin-inline:0;
  border-radius:var(--w-r-card);border:1px solid var(--w-edge);box-shadow:var(--w-shadow)}
:root[data-look="wharf"] body #page .ui .page:is(:not(.fx-wrap),.fx-wrap.wide) > .pbar + :is(.card,.fx-card):has(table){margin-top:0;border-top:1px solid var(--w-edge)}
:root[data-look="wharf"] body #page .ui .fx-card > .fx-bar{padding:12px 18px;border-bottom:1px solid var(--w-hair)}

/* summary figures: the slim strip becomes Wharf's row of small cards. A figure that filters (a button) lifts
   on hover and wears the night ring when it is the filter in force. */
:root[data-look="wharf"] body .ui .figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;background:transparent;
  border:0;border-radius:0;box-shadow:none;overflow:visible;margin-bottom:14px}
:root[data-look="wharf"] body .ui .figs > *{min-width:0;padding:12px 16px;border:1px solid var(--w-edge);border-radius:18px;background:var(--w-card);
  box-shadow:var(--w-shadow);text-align:start;font:inherit;color:inherit}
:root[data-look="wharf"] body .ui .figs > *:last-child{border-inline-end:1px solid var(--w-edge)}
:root[data-look="wharf"] body .ui .figs .k{font-size:var(--t-md);color:var(--w-muted)}
:root[data-look="wharf"] body .ui .figs .v{font-size:var(--t-2xl);font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--w-ink)}
:root[data-look="wharf"] body .ui .figs .v.bad, :root[data-look="wharf"] body .ui .v.bad{color:var(--w-bad)}
:root[data-look="wharf"] body .ui .figs button:hover{background:var(--w-solid)}
:root[data-look="wharf"] body .ui .figs button.on{background:var(--w-solid);box-shadow:0 0 0 2px var(--w-night),var(--w-shadow)}
/* the Home figures (POS home), Data quality's kpis, the Sales dashboard's */
:root[data-look="wharf"] body .ui .card.hk{padding:14px 18px 0;min-height:110px}
:root[data-look="wharf"] body .ui .hkl{font-size:var(--t-md);color:var(--w-muted)}
:root[data-look="wharf"] body .ui .hkv{font-size:var(--t-3xl);font-weight:700;letter-spacing:-.02em;line-height:1.2}
:root[data-look="wharf"] body .ui .hsp{height:40px;opacity:1}
:root[data-look="wharf"] body .ui .hsp polyline{stroke:var(--w-ink)}
:root[data-look="wharf"] body .ui .hsp polygon{fill:var(--w-acc);opacity:.38}
:root[data-look="wharf"] body .ui .dlt.up{color:var(--w-good);background:transparent}
:root[data-look="wharf"] body .ui .dlt.down{color:var(--w-bad);background:transparent}
:root[data-look="wharf"] body .ui .hm-tile{border-color:var(--w-hair)}
:root[data-look="wharf"] body .ui .hm-n{font-weight:700}
:root[data-look="wharf"] body .ui .hm-l{text-transform:none;letter-spacing:0;font-size:var(--t-sm);color:var(--w-muted)}
:root[data-look="wharf"] body .ui .hm-row{border-color:var(--w-hair)}
:root[data-look="wharf"] body .ui .hbr .b{height:10px;border-radius:5px;background:var(--w-well)}
:root[data-look="wharf"] body .ui .hbr .b i{border-radius:inherit}
/* the charts in Wharf's three colours: a single series is the accent (bars) and ink (the line over them), as Wharf's
   revenue chart; a chart of several series keeps its own palette, which its legend repeats */
:root[data-look="wharf"] body .ui .hbr .b i[style*="#1a73e8"]{background:var(--w-acc)!important}
:root[data-look="wharf"] body .ui .htr rect[fill="#8ab4f8"], :root[data-look="wharf"] body .ui .htr rect[fill="#1a73e8"]{fill:var(--w-acc)}
:root[data-look="wharf"] body .ui .htr polyline[stroke="#1a73e8"]{stroke:var(--w-ink)}
:root[data-look="wharf"] body .ui .htr circle[fill="#1a73e8"]{fill:var(--w-ink)}
/* a ring of parts (Sales by branch) in Wharf's pipeline stages — the accent, a deeper accent, two nights, then lighter
   steps — and its legend in the same order (hDonut draws both from one index) */
:root[data-look="wharf"]{--w-st1:var(--w-acc);--w-st2:color-mix(in srgb,var(--w-acc) 62%,#3a2a00);--w-st3:var(--w-night-2);--w-st4:var(--w-night);
  --w-st5:color-mix(in srgb,var(--w-acc) 45%,#fff);--w-st6:var(--w-grey)}
:root[data-look="wharf"][data-theme="dark"]{--w-st2:color-mix(in srgb,var(--w-acc) 60%,#fff);--w-st3:#8e8c86;--w-st4:var(--w-night)}
/* THE CHART PALETTE (22 Oct 2026, Tartib Finance in Wharf — Hussain: "make sure it uses all Wharf Tools and charts with
   proper colors"). Wharf ships one series colour (the accent) and the six ring steps above; a chart of the ways people
   pay needs nine that stay apart and mean the same thing on every tab and every page, so they are tokens here, beside
   the steps, for any page in this look to read. Earthy, on Wharf's paper: each sits at least 3:1 against --w-app-1 in
   light and against --w-app-1 in dark, and no two neighbours share a hue family. A way of paying always takes its own
   colour (cash is green on every chart, Talabat terracotta…); a way with no name of its own takes x1–x3, and the summed
   rest is --w-pay-other. --w-ch-1…8 are the same eight in order, for a chart whose series are not ways of paying.
     cash   green        card   night-blue   upayments  blue        keeta  honey
     talabat terracotta  staff  violet       wallet     teal        gift   rose      other  grey
   ⚠️ NOT THE ACCENT: the accent is the business's own colour (--tc-brand) and could be any hue — a series pinned to it
   would collide with whichever of these it happened to match. Read by the page as var(--w-pay-cash, <Classic colour>),
   so the same markup draws in Classic, where these are not set. */
:root[data-look="wharf"]{
  --w-pay-cash:#2e7d5b; --w-pay-card:#2f3a56; --w-pay-upayments:#3d6fb6; --w-pay-keeta:#a87a0c; --w-pay-talabat:#c4572e;
  --w-pay-staff:#7d5fb0; --w-pay-wallet:#23838f; --w-pay-gift:#b4497a; --w-pay-other:#85827a;
  --w-pay-x1:#7a8a2c; --w-pay-x2:#9a6436; --w-pay-x3:#56609c;
  --w-ch-1:var(--w-pay-cash); --w-ch-2:var(--w-pay-card); --w-ch-3:var(--w-pay-upayments); --w-ch-4:var(--w-pay-keeta);
  --w-ch-5:var(--w-pay-talabat); --w-ch-6:var(--w-pay-staff); --w-ch-7:var(--w-pay-wallet); --w-ch-8:var(--w-pay-gift)}
:root[data-look="wharf"][data-theme="dark"]{
  --w-pay-cash:#6fcf9c; --w-pay-card:#a9b8dc; --w-pay-upayments:#86b0ec; --w-pay-keeta:#f1c75a; --w-pay-talabat:#f09a72;
  --w-pay-staff:#bba3e6; --w-pay-wallet:#73cdd8; --w-pay-gift:#ec9cc0; --w-pay-other:#77746d;
  --w-pay-x1:#bfd06a; --w-pay-x2:#d9a476; --w-pay-x3:#a4acdf}
:root[data-look="wharf"] body .ui .hdn svg path:nth-of-type(1){fill:var(--w-st1)} :root[data-look="wharf"] body .ui .hdl > div:nth-child(1) > i{background:var(--w-st1)!important}
:root[data-look="wharf"] body .ui .hdn svg path:nth-of-type(2){fill:var(--w-st2)} :root[data-look="wharf"] body .ui .hdl > div:nth-child(2) > i{background:var(--w-st2)!important}
:root[data-look="wharf"] body .ui .hdn svg path:nth-of-type(3){fill:var(--w-st3)} :root[data-look="wharf"] body .ui .hdl > div:nth-child(3) > i{background:var(--w-st3)!important}
:root[data-look="wharf"] body .ui .hdn svg path:nth-of-type(4){fill:var(--w-st4)} :root[data-look="wharf"] body .ui .hdl > div:nth-child(4) > i{background:var(--w-st4)!important}
:root[data-look="wharf"] body .ui .hdn svg path:nth-of-type(5){fill:var(--w-st5)} :root[data-look="wharf"] body .ui .hdl > div:nth-child(5) > i{background:var(--w-st5)!important}
:root[data-look="wharf"] body .ui .hdn svg path:nth-of-type(6){fill:var(--w-st6)} :root[data-look="wharf"] body .ui .hdl > div:nth-child(6) > i{background:var(--w-st6)!important}
:root[data-look="wharf"] body .ui .hlg span:first-child i:is([style*="#8ab4f8"],[style*="#1a73e8"]){background:var(--w-acc)!important}
:root[data-look="wharf"] body .ui .hlg span:nth-child(2) i[style*="#1a73e8"]{background:var(--w-ink)!important}
:root[data-look="wharf"] body .ui .kpis{gap:10px}
:root[data-look="wharf"] body .ui .kpis .kpi{padding:10px 16px;border-radius:16px;background:var(--w-card);border:1px solid var(--w-edge);box-shadow:var(--w-shadow);min-width:96px}
:root[data-look="wharf"] body .ui .kpis .kpi .v{font-weight:700}
:root[data-look="wharf"] body .ui .kpis .kpi .k{letter-spacing:0;text-transform:none;font-size:var(--t-sm);color:var(--w-muted)}
/* the older pages (Data quality, Orders, Recipes) draw straight into the work area: Wharf's margins for them too */
:root[data-look="wharf"] body #page:not(:has(> .ui > .page)){padding:18px 28px 48px}
:root[data-look="wharf"] body .ui .dcard{border-radius:18px}
:root[data-look="wharf"] body .ui .item-health .big{font-weight:700}
:root[data-look="wharf"] body .ui .hasof{border-radius:999px;background:var(--w-solid);border-color:var(--w-hair-2)}

/* registers: Wharf's table — a quiet head in sentence case, a hairline between rows, the name in ink and
   bold, the row washed on hover. One line a row, as before (rule 15). */
:root[data-look="wharf"] body #page .ui th, :root[data-look="wharf"] body #page .ui .fx-t th, :root[data-look="wharf"] body .ui th{
  background:var(--w-head);color:var(--w-muted);font-size:var(--t-sm);font-weight:400;text-transform:none;letter-spacing:0;
  border-bottom:1px solid var(--w-hair)}
:root[data-look="wharf"] body #page .ui td, :root[data-look="wharf"] body #page .ui .fx-t td{border-bottom-color:var(--w-hair);color:var(--w-ink)}
:root[data-look="wharf"] body #page .ui tbody tr:last-child > td{border-bottom:0}
:root[data-look="wharf"] body #page .ui :is(.card,.fx-card,.pan) table thead tr:first-child > th:first-child{border-start-start-radius:calc(var(--w-r-card) - 1px)}
:root[data-look="wharf"] body #page .ui :is(.card,.fx-card,.pan) table thead tr:first-child > th:last-child{border-start-end-radius:calc(var(--w-r-card) - 1px)}
:root[data-look="wharf"] body #page .ui :is(.card,.fx-card,.pan) > :is(table,.scroll) tbody tr:last-child > td:first-child,
:root[data-look="wharf"] body #page .ui :is(.card,.fx-card,.pan) > :is(table,.scroll) tbody tr:last-child > td:last-child{transition:none}
:root[data-look="wharf"] body .ui tbody tr:hover > td, :root[data-look="wharf"] body #page .ui .fx-t tr.fx-click:hover > td,
:root[data-look="wharf"] body #page .ui tbody tr.rowgo:hover > td{background:var(--z-hover)}
:root[data-look="wharf"] body .ui td a.nm, :root[data-look="wharf"] body .ui td > a:not(.btn), :root[data-look="wharf"] body .ui td .tx a,
:root[data-look="wharf"] body .ui .fx-t td .fx-link{color:var(--w-ink)}
:root[data-look="wharf"] body .ui td .fx-ref, :root[data-look="wharf"] body .ui td .s, :root[data-look="wharf"] body .ui .dim{color:var(--w-muted)}
:root[data-look="wharf"] body .ui tbody tr.sel > td, :root[data-look="wharf"] body .ui tbody tr:has(> td input[type="checkbox"]:checked) > td{background:var(--w-acc-wash)}
:root[data-look="wharf"] body .ui td input[type="checkbox"], :root[data-look="wharf"] body .ui th input[type="checkbox"],
:root[data-look="wharf"] body .ui input[type="checkbox"]{accent-color:var(--w-night)}
/* a letter in place of a picture: Wharf's avatar, initials on a tint of the accent */
:root[data-look="wharf"] body #page .ui :is(.fx-t .fx-thumb,.fx-t .fx-pn .th,.fx-logo){border-radius:50%}
:root[data-look="wharf"] body #page .ui :is(.fx-thumb,.fx-logo).none{border:0;background:var(--w-acc-soft);color:var(--w-ink);font-weight:700}
:root[data-look="wharf"] body .ui .fx-pager{border-top:1px solid var(--w-hair);color:var(--w-muted)}

/* status: Wharf's pill — the word on its own wash, a dot before it */
:root[data-look="wharf"] body .ui td .tag, :root[data-look="wharf"] body .ui .splist .tag, :root[data-look="wharf"] body .ui .tag{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 7px!important;border-radius:999px!important;
  font-size:var(--t-sm);font-weight:400;letter-spacing:0;text-transform:none;white-space:nowrap;line-height:1;
  color:var(--w-neutral);background:var(--w-neutral-bg)!important;border:0!important}
:root[data-look="wharf"] body .ui .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
:root[data-look="wharf"] body .ui :is(td,.splist) .tag.g, :root[data-look="wharf"] body .ui .tag.g{color:var(--w-good);background:var(--w-good-bg)!important}
:root[data-look="wharf"] body .ui :is(td,.splist) .tag:is(.b,.i), :root[data-look="wharf"] body .ui .tag:is(.b,.i){color:var(--w-info);background:var(--w-info-bg)!important}
:root[data-look="wharf"] body .ui :is(td,.splist) .tag.a, :root[data-look="wharf"] body .ui .tag.a{color:var(--w-warn);background:var(--w-warn-bg)!important}
:root[data-look="wharf"] body .ui :is(td,.splist) .tag.r, :root[data-look="wharf"] body .ui .tag.r{color:var(--w-bad);background:var(--w-bad-bg)!important}
:root[data-look="wharf"] body .ui :is(td,.splist) .tag.bad, :root[data-look="wharf"] body .ui .tag.bad{color:var(--w-bad);background:var(--w-bad-bg)!important}
:root[data-look="wharf"] body .tg{border-radius:999px;padding:2px 9px}
:root[data-look="wharf"] body .ui .fx-chip{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;border:0;
  background:var(--w-neutral-bg);color:var(--w-neutral);font-size:var(--t-sm);font-weight:700;white-space:nowrap}
:root[data-look="wharf"] body .ui .fx-chip.on{background:var(--w-acc-soft);color:var(--w-ink)}
/* the Foodics-style pages' state badges: the same pills */
:root[data-look="wharf"] body .ui .fx-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 7px;border-radius:999px;border:0;
  font-size:var(--t-sm);font-weight:400;white-space:nowrap;line-height:1;background:var(--w-good-bg);color:var(--w-good)}
:root[data-look="wharf"] body .ui .fx-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
:root[data-look="wharf"] body .ui .fx-badge.off{background:var(--w-neutral-bg);color:var(--w-neutral);border:0}
:root[data-look="wharf"] body .ui .fx-badge.ok{background:var(--w-good-bg);color:var(--w-good)}
:root[data-look="wharf"] body .ui .fx-badge.amb{background:var(--w-warn-bg);color:var(--w-warn);border:0}
:root[data-look="wharf"] body .ui .fx-badge.bad{background:var(--w-bad-bg);color:var(--w-bad)}

/* ── 5 · CONTROLS ──────────────────────────────────────────────────────────────────────────────────────── */
/* buttons: Wharf's ghost (paper, a hairline) and primary (night). 34px, as wide as their words. */
:root[data-look="wharf"] body .ui .btn, :root[data-look="wharf"] body .ot-ask .btn{height:var(--w-ctl);padding:0 14px;border-radius:var(--w-r-md);
  border:1px solid var(--w-hair-2);background:var(--w-solid);color:var(--w-ink);font-size:var(--t-md);font-weight:700;box-shadow:none}
:root[data-look="wharf"] body .ui .btn:hover{background:var(--w-well);border-color:var(--w-hair-2)}
:root[data-look="wharf"] body .ui :is(.btn.pri,button.pri,.btn.primary,.btn.go){
  background:var(--w-night);border-color:var(--w-night);color:var(--w-night-ink);font-weight:700;filter:none}
:root[data-look="wharf"] body .ui :is(.btn.pri,button.pri,.btn.primary,.btn.go):hover{
  background:var(--w-night-2);border-color:var(--w-night-2);box-shadow:none;filter:none}
:root[data-look="wharf"][data-theme="dark"] body .ui :is(.btn.pri,.btn.primary,.btn.go){color:var(--w-night-ink)}
:root[data-look="wharf"] body .ui .btn[disabled], :root[data-look="wharf"] body .ui .btn:disabled{opacity:.5}
:root[data-look="wharf"] body .ui :is(.btn.danger,.btn.bad,.btn.red,.btn.fx-danger){color:var(--w-bad);border-color:color-mix(in srgb,var(--w-bad) 35%,transparent)}
:root[data-look="wharf"] body .ui .btn.sm{height:28px;padding:0 10px;font-size:var(--t-sm)}
/* a pair the page draws the same width (Devices: Cancel | Add device) stays one width at this look's weight */
:root[data-look="wharf"] body .ui .dv-btn{min-width:156px}
/* a field and the button beside it (Till settings: Refund requests go to · Add) stand one height */
:root[data-look="wharf"] body .ui .tl-add-row :is(input,.btn,button){height:var(--w-ctl);min-height:0;box-sizing:border-box}
:root[data-look="wharf"] body .ui .hint{border-radius:var(--w-r-md)}
:root[data-look="wharf"] body .ot-ask .btn.ot-ask-yes{background:var(--w-bad);border-color:var(--w-bad);color:#fff}
:root[data-look="wharf"][data-theme="dark"] body .ot-ask .btn.ot-ask-yes{color:#1f1f24}
/* the soft one: a light wash of the accent (Wharf's Receive) */
:root[data-look="wharf"] body .ui .btn.soft{background:var(--w-acc-soft);border-color:transparent;color:var(--w-ink)}

/* segmented filters (.seg): Wharf's control — a well, the chosen one on the night pill */
:root[data-look="wharf"] body .ui .seg, :root[data-look="wharf"] body .ui .stabs, :root[data-look="wharf"] body .ui .ro-tabs{position:relative;
  display:inline-flex;flex-wrap:nowrap;gap:0;padding:3px;border:1px solid var(--w-hair);border-radius:var(--w-r-md);
  background:var(--w-well);max-width:100%;box-sizing:border-box;overflow-x:auto;scrollbar-width:none}
:root[data-look="wharf"] body .ui .seg::-webkit-scrollbar{display:none}
:root[data-look="wharf"] body .ui .seg button, :root[data-look="wharf"] body .ui .stabs .st, :root[data-look="wharf"] body .ui .ro-tabs a{
  position:relative;height:28px;padding:0 12px;border:0;border-radius:var(--w-r-sm);background:transparent;color:var(--w-muted);
  font-size:var(--t-md);font-weight:400;box-shadow:none;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
:root[data-look="wharf"] body .ui .seg button:hover, :root[data-look="wharf"] body .ui .stabs .st:hover, :root[data-look="wharf"] body .ui .ro-tabs a:hover{color:var(--w-ink)}
:root[data-look="wharf"] body .ui .seg button.on, :root[data-look="wharf"] body .ui .stabs .st.on, :root[data-look="wharf"] body .ui .ro-tabs a.on{
  background:var(--w-night);color:var(--w-night-ink);font-weight:700;box-shadow:none}
:root[data-look="wharf"] body .ui .seg button b{color:inherit;opacity:.75}
/* the Foodics-style pages' own segmented control (Rows | Cards, the till settings' choices) */
:root[data-look="wharf"] body .ui .fx-seg{position:relative;gap:0;padding:3px;border:1px solid var(--w-hair);border-radius:var(--w-r-md);background:var(--w-well)}
:root[data-look="wharf"] body .ui .fx-seg button{height:28px;padding:0 11px;border:0;border-radius:var(--w-r-sm);background:transparent;color:var(--w-muted);font-weight:400}
:root[data-look="wharf"] body .ui .fx-seg button:hover{color:var(--w-ink)}
:root[data-look="wharf"] body .ui .fx-seg button.on{background:var(--w-night);color:var(--w-night-ink);font-weight:700}
:root[data-look="wharf"] body .ui .set-find input{border:0;box-shadow:none;background:transparent;height:auto;min-height:0}
:root[data-look="wharf"] body .ui .set-find:focus-within{box-shadow:var(--w-focus)}
/* tabs (.fx-tabs, .tabs): Wharf's underline, 2px of ink under the chosen one */
:root[data-look="wharf"] body .ui .fx-tabs{position:relative;gap:2px;border-bottom:1px solid var(--w-hair-2)}
:root[data-look="wharf"] body .ui .fx-bar .fx-tabs{border-bottom:0}
:root[data-look="wharf"] body .ui .fx-tabs a{height:36px;padding:0 12px;border-radius:8px 8px 0 0;color:var(--w-muted);font-weight:400;
  border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:5px}
:root[data-look="wharf"] body .ui .fx-tabs a:hover{color:var(--w-ink);background:var(--w-well)}
:root[data-look="wharf"] body .ui .fx-tabs a.on{color:var(--w-ink);font-weight:700;border-bottom-color:var(--w-ink)}
:root[data-look="wharf"] body .ui .fx-tabs a .fx-ref{color:var(--w-muted);font-weight:400}
:root[data-look="wharf"] body .ui .tabs > span{border-radius:8px 8px 0 0}
:root[data-look="wharf"] body .ui .tabs > span.on{color:var(--w-ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--w-ink)}
/* chips: the badges in the Items head */
:root[data-look="wharf"] body .ui .ibadge{height:28px;padding:0 11px;border-radius:999px;border:1px solid var(--w-hair-2);background:var(--w-solid);color:var(--w-ink)}
:root[data-look="wharf"] body .ui .ibadge:hover{background:var(--w-well);border-color:var(--w-hair-2)}
:root[data-look="wharf"] body .ui .ibadge i{border-radius:999px}
:root[data-look="wharf"] body .ui .ibadge.on{background:var(--w-night);border-color:var(--w-night);color:var(--w-night-ink);box-shadow:none}
:root[data-look="wharf"] body .ui .ibadge.on :is(b,em,i){color:inherit}

/* fields: Wharf's — paper, a hairline, 12px corners, the ink ring on focus */
:root[data-look="wharf"] body .ui :is(input[type="search"],input[type="text"],input[type="number"],input[type="date"],input[type="email"],
  input[type="tel"],input[type="url"],input[type="time"],input[type="password"],input:not([type]),select,textarea){
  border:1px solid var(--w-hair-2);border-radius:10px;background-color:var(--w-solid);color:var(--w-ink);min-height:30px}
:root[data-look="wharf"] body .ui :is(input[type="search"],input[type="text"],input[type="number"],input[type="date"],input[type="email"],input[type="tel"],input[type="url"],input[type="time"],input[type="password"],input:not([type]),select){height:var(--w-ctl)}
:root[data-look="wharf"] body .ui :is(input,select,textarea):focus{border-color:var(--w-hair-2);box-shadow:var(--w-focus);outline:none}
:root[data-look="wharf"] body .ui :is(input,select,textarea)::placeholder{color:var(--w-muted)}
:root[data-look="wharf"] body .ui select:not([multiple]){padding-inline:10px 28px;appearance:none;-webkit-appearance:none;
  background:var(--w-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d5b5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 8px center/14px}
:root[dir="rtl"][data-look="wharf"] body .ui select:not([multiple]){background-position:left 8px center}
:root[data-look="wharf"][data-theme="dark"] body .ui select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0aea7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E")}
/* a button inside a row is a row's button: 28px, so a row stays one line's height (rule 15) */
:root[data-look="wharf"] body .ui td .btn{height:28px;padding:0 10px;font-size:var(--t-sm);border-radius:9px}
/* a field inside a row stays a row's height (rule 15): 30px, as Classic's */
:root[data-look="wharf"] body .ui td :is(input:not([type="checkbox"]):not([type="radio"]),select){height:30px;min-height:30px;border-radius:8px}
:root[data-look="wharf"] body .ui .item-filters .itf.on select{border-color:var(--w-night);box-shadow:0 0 0 1px var(--w-night)}
:root[data-look="wharf"] body .ui .item-filters .itf span{color:var(--w-muted)}
/* a switch the console draws as a checkbox stays a checkbox — only its colour is Wharf's */
:root[data-look="wharf"] body .ui input[type="radio"]{accent-color:var(--w-night)}

/* dropdowns that belong to a control (menus, not dialogs): Wharf's tray — paper, 16px corners, a soft drop */
:root[data-look="wharf"] body :is(.acct,.qcmenu,.ws-menu,.keypad), :root[data-look="wharf"] body .ui .menu .list, :root[data-look="wharf"] body .ui .set-menu{
  background:var(--w-solid);color:var(--w-ink);border:1px solid var(--w-hair);border-radius:16px;box-shadow:var(--w-pop)}
:root[data-look="wharf"] body .acct{overflow:hidden}
:root[data-look="wharf"] body .acct .who{border-bottom-color:var(--w-hair)}
:root[data-look="wharf"] body .acct .who i{background:var(--w-acc-soft);color:var(--w-ink);border-radius:999px}
:root[data-look="wharf"] body .acct a{color:var(--w-ink);border-bottom-color:var(--w-hair)}
:root[data-look="wharf"] body .acct a:hover{background:var(--w-well);color:var(--w-ink)}
:root[data-look="wharf"] body .acct a[aria-checked="true"]{font-weight:700}
:root[data-look="wharf"] body .acct a.out{color:var(--w-bad)}
:root[data-look="wharf"] body .acct .grp{color:var(--w-muted);text-transform:none;letter-spacing:0;font-size:var(--t-sm);font-weight:400}
:root[data-look="wharf"] body .qcmenu button:hover, :root[data-look="wharf"] body .ws-menu .ws-row:hover:not([disabled]){background:var(--w-well)}
:root[data-look="wharf"] body .qcmenu button svg{color:var(--w-acc-text)}
:root[data-look="wharf"] body .qcmenu button{border-radius:10px}
:root[data-look="wharf"] body .qcmenu .qh{text-transform:none;letter-spacing:0;font-size:var(--t-sm);font-weight:400;color:var(--w-muted)}
:root[data-look="wharf"] body .ws-menu .ws-av{background:var(--w-acc-soft);color:var(--w-ink)}
:root[data-look="wharf"] body .ui .menu .list button{border-radius:8px}
:root[data-look="wharf"] body .ui .menu .list button:hover{background:var(--w-well)}

/* messages on the page (otSay / otAsk): Wharf's washes */
:root[data-look="wharf"] body .ot-ask{border-radius:var(--w-r-md);border-color:transparent;background:var(--w-bad-bg);color:var(--w-ink)}
:root[data-look="wharf"] body .ot-say{border-radius:var(--w-r-md)}
:root[data-look="wharf"] body .ot-say.bad{background:var(--w-bad-bg);color:var(--w-bad);border-color:transparent}
:root[data-look="wharf"] body .ot-say.warn{background:var(--w-warn-bg);color:var(--w-warn);border-color:transparent}
:root[data-look="wharf"] body .ot-say.ok{background:var(--w-good-bg);color:var(--w-good);border-color:transparent}
:root[data-look="wharf"] body .ui .card.wl-alarm{background:var(--w-bad-bg);border-color:transparent}
:root[data-look="wharf"] body .ui .warnbar, :root[data-look="wharf"] body .ui .fx-banner{border-radius:var(--w-r-md)}

/* empty states: Wharf's — centred, muted, room around the sentence */
:root[data-look="wharf"] body .ui :is(.empty,.fx-empty,.hempty,.set-none,.sk){color:var(--w-muted);padding:28px 20px;text-align:center}

/* ── 6 · PAGES ─────────────────────────────────────────────────────────────────────────────────────────── */
/* Home (POS) and the Warehouse overview: the bento — figures in cards, the cards in one gap */
:root[data-look="wharf"] body .ui :is(.hkgrid,.hrow,.hm-top,.grid2,.grid3,.item-workgrid){gap:14px}
:root[data-look="wharf"] body .ui .hrow, :root[data-look="wharf"] body .ui .hkgrid, :root[data-look="wharf"] body .ui .hm-top{margin-bottom:14px}
:root[data-look="wharf"] body .ui .hp{border-radius:14px;border-color:var(--w-hair);background:var(--w-solid)}
:root[data-look="wharf"] body .ui .hp .img{border-radius:10px;background:var(--w-well)}
:root[data-look="wharf"] body .ui .htr .hg{stroke:var(--w-hair)}
/* Data quality / the To Fix list: each rule a card, each item a row */
:root[data-look="wharf"] body .ui .rw{border-color:var(--w-hair)}
:root[data-look="wharf"] body .ui .rw.click:hover{background:var(--z-hover)}
:root[data-look="wharf"] body .ui .pan .note, :root[data-look="wharf"] body .ui .note{background:var(--w-acc-wash);border:0;border-radius:var(--w-r-md);color:var(--w-ink)}
/* the Item and the recipe pages (fx-*): the photo in a rounded frame, the facts on a hairline grid */
:root[data-look="wharf"] body .ui .fx-photo, :root[data-look="wharf"] body .ui .iph{border-radius:16px}
:root[data-look="wharf"] body .ui .fx-f{border-bottom-color:var(--w-hair)}
:root[data-look="wharf"] body .ui .fx-f .k{color:var(--w-muted)}
:root[data-look="wharf"] body .ui .fx-pagetabs{margin-bottom:14px}
/* settings: Wharf's cards */
:root[data-look="wharf"] body .ui .set-sec{background:transparent;box-shadow:none}
:root[data-look="wharf"] body .ui .set-sec h3{color:var(--w-ink);font-weight:700}
:root[data-look="wharf"] body .ui .set-card{border:1px solid var(--w-edge);border-radius:18px;background:var(--w-card);box-shadow:var(--w-shadow)}
:root[data-look="wharf"] body .ui .set-card-h{border-radius:12px;color:var(--w-ink)}
:root[data-look="wharf"] body .ui .set-link{color:var(--w-ink);border-radius:9px}
:root[data-look="wharf"] body .ui .set-link:hover{background:var(--w-well);color:var(--w-ink)}
:root[data-look="wharf"] body .ui .set-find{border-radius:var(--w-r-md);border-color:var(--w-hair-2);background:var(--w-solid)}
:root[data-look="wharf"] body .ui :is(.set-split,.set-src,.set-box){border-radius:var(--w-r-card)}

/* Stock against par (Par levels, Stock levels): Wharf's level meter — the on-hand fill against the par mark.
   Drawn only where the row knows a par (wLevel() in the page), and only in this look. */
:root:not([data-look="wharf"]) .w-level{display:none}
:root[data-look="wharf"] .w-level{display:inline-block;vertical-align:middle;position:relative;width:72px;height:8px;margin-inline-start:10px;
  border-radius:4px;background:var(--w-well);border:1px solid var(--w-hair)}
:root[data-look="wharf"] .w-level > i{position:absolute;inset-block:0;inset-inline-start:0;width:100%;border-radius:inherit;background:var(--w-acc);
  transform-origin:0 50%;transform:scaleX(var(--p,0))}
:root[dir="rtl"][data-look="wharf"] .w-level > i{transform-origin:100% 50%}
:root[data-look="wharf"] .w-level.low > i{background:#e8884a}
:root[data-look="wharf"] .w-level.out > i{background:var(--w-bad)}
:root[data-look="wharf"] .w-level::after{content:"";position:absolute;inset-block:-3px;inset-inline-start:calc(var(--par,.5) * 100% - 1px);width:2px;
  border-radius:1px;background:var(--w-hair-2)}

/* Suppliers as cards (the Table | Cards choice, this look only) */
/* (drawn by pageSuppliers only while this look is on: Classic never has these elements) */
:root[data-look="wharf"] body .ui table.fx-t[hidden]{display:none}
:root[data-look="wharf"] body .ui .fx-bar .r{display:flex;align-items:center;gap:8px}
:root[data-look="wharf"] body .ui .w-sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;padding:16px 18px 18px}
:root[data-look="wharf"] body .ui .w-sgrid[hidden]{display:none}
:root[data-look="wharf"] body .ui .w-scard{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:18px;background:var(--w-solid);
  border:1px solid var(--w-hair);color:var(--w-ink);text-decoration:none;min-width:0}
:root[data-look="wharf"] body .ui .w-scard:hover{border-color:var(--w-hair-2)}
:root[data-look="wharf"] body .ui .w-scard-top{display:flex;align-items:center;gap:12px;min-width:0}
:root[data-look="wharf"] body .ui .w-scard-av{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:var(--w-acc-soft);color:var(--w-ink);font-weight:700;font-size:var(--t-lg)}
:root[data-look="wharf"] body .ui .w-scard-av img{width:100%;height:100%;object-fit:cover}
:root[data-look="wharf"] body .ui .w-scard-nm{min-width:0;flex:1}
:root[data-look="wharf"] body .ui .w-scard-nm b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-look="wharf"] body .ui .w-scard-nm small{display:block;font-size:var(--t-sm);color:var(--w-muted)}
:root[data-look="wharf"] body .ui .w-scard-well{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;padding:10px 12px;
  border-radius:12px;background:var(--w-well);font-size:var(--t-sm)}
:root[data-look="wharf"] body .ui .w-scard-well span{color:var(--w-muted);display:block}
:root[data-look="wharf"] body .ui .w-scard-well b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-look="wharf"] body .ui .w-view{flex:none}

/* ── 7 · A FORM IS A PAGE (#ovl, rule 14) ─────────────────────────────────────────────────────────────── */
:root[data-look="wharf"] body #ovl{padding:0 28px 48px}
:root[data-look="wharf"] body #ovl > .dlg.ui > header{
  --pbg:linear-gradient(color-mix(in srgb,var(--w-app-1) 94%,transparent),color-mix(in srgb,var(--w-app-1) 94%,transparent))}
:root[data-look="wharf"] body #ovl > .dlg.ui > header h3{font-size:var(--t-2xl);font-weight:800}
:root[data-look="wharf"] body #ovl > .dlg.ui > .body{background:var(--w-card);border:1px solid var(--w-edge);border-radius:var(--w-r-card);
  box-shadow:var(--w-shadow);padding:20px 22px}
:root[data-look="wharf"] body #ovl > .dlg.ui > footer{border-radius:18px;border:1px solid var(--w-hair);
  background:color-mix(in srgb,var(--w-solid) 86%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--w-pop)}
:root[data-look="wharf"] body .dlg.ui th{background:var(--w-head)}
:root[data-look="wharf"] body #ovl .dlg-back, :root[data-look="wharf"] body #ovl > .dlg.ui > header .btn{border-radius:var(--w-r-md)}

/* ── 8 · MOTION, THE CSS HALF ─────────────────────────────────────────────────────────────────────────────
   The choreography is brand/ordertech-wharf.js (one requestAnimationFrame clock and the Web Animations API —
   no GSAP, no CDN). Only transform, opacity and clip-path move. What lives here: the press that gives under a
   finger, and the states the script hands to CSS. Under prefers-reduced-motion nothing here moves. */
:root[data-look="wharf"] body :is(.ui .btn,.ui .seg button,.ui .fx-tabs a,.ui .ibadge,.top .ib,.top .dsw button,.top .thm button,.ui .figs button){
  transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s,transform .18s cubic-bezier(.22,1,.36,1)}
:root[data-look="wharf"] body :is(.ui .seg button,.ui .ibadge,.top .dsw button,.top .thm button,.ui .figs button,.ui .stabs .st):active{transform:scale(.96)}
/* the travelling pill (brand/tartib-motion.js, shared with Tartib's New look): while it flies, the chosen option lends
   it its fill, its ring or its underline — the same rules as the Rapport look's section 9, for this look */
:root[data-look="wharf"] [data-tm-fly] :is(button,a,[role="button"],[role="tab"],[role="radio"],.st){transition:none!important}
:root[data-look="wharf"] [data-tm-fly] [data-tm-sel="fill"]{background-color:transparent!important;background-image:none!important;box-shadow:none!important}
:root[data-look="wharf"] [data-tm-fly][data-tm-lbl] [data-tm-sel="fill"]{color:var(--tm-ink)!important;background-color:var(--tm-bg)!important;border-color:var(--tm-bd)!important}
:root[data-look="wharf"] [data-tm-fly] [data-tm-sel="ring"]{outline-color:transparent!important;box-shadow:none!important}
:root[data-look="wharf"] [data-tm-fly] [data-tm-sel="line"]{border-bottom-color:transparent!important}
:root[data-look="wharf"] [data-tm-sel="land"]{transition:none!important}
/* a figure that is counting: the real number stays in the page (every reader and check sees it); what the eye sees
   while it counts is drawn over it, from data-w */
:root[data-look="wharf"] .w-cnt{position:relative;-webkit-text-fill-color:transparent}
:root[data-look="wharf"] .w-cnt > *{-webkit-text-fill-color:currentColor}   /* the fraction and KWD after it stay as they are */
:root[data-look="wharf"] .w-cnt::after{content:attr(data-w);position:absolute;inset-block-start:0;inset-inline-start:0;white-space:nowrap;
  -webkit-text-fill-color:currentColor}
/* the title rising out of its own line, one letter at a time */
:root[data-look="wharf"] .w-word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
:root[data-look="wharf"] .w-ch{display:inline-block}
/* a chart's floating figure (ordertech-wharf.js): Wharf's chart tip — night, the value large, what it is under it */
:root[data-look="wharf"] .w-tip{position:fixed;left:0;top:0;z-index:80;display:flex;flex-direction:column;padding:7px 10px;border-radius:9px;
  background:var(--w-night);color:var(--w-night-ink);font-size:var(--t-sm);line-height:1.3;white-space:nowrap;pointer-events:none;opacity:0;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.45)}
:root[data-look="wharf"] .w-tip b{font-size:var(--t-md);font-weight:700}
:root[data-look="wharf"] .w-tip span{color:color-mix(in srgb,var(--w-night-ink) 70%,transparent)}
:root:not([data-look="wharf"]) .w-tip{display:none}
/* the toast: what the console says on the page drops in from below (otSay's own box, moved by the script) */
:root[data-look="wharf"] .w-tray-in{transform-origin:90% 0}
/* cards lift a little under a fine pointer (Wharf's hoverLift) — the individual translate property, so it never fights
   the transform an entrance is playing on the same card */
@media (hover:hover) and (pointer:fine){
  :root[data-look="wharf"] body .ui :is(.figs > button,.w-scard,.set-card,.card.hk,.hp){transition:translate .45s cubic-bezier(.165,.84,.44,1),
    background-color .2s,box-shadow .2s,border-color .2s}
  :root[data-look="wharf"] body .ui :is(.figs > button,.w-scard,.set-card,.card.hk,.hp):hover{translate:0 -3px}
}
@media (prefers-reduced-motion:reduce){
  :root[data-look="wharf"] body *{transition:none!important}
  :root[data-look="wharf"] .w-cnt{-webkit-text-fill-color:currentColor}
  :root[data-look="wharf"] .w-cnt::after{content:none}
}

/* ── 9 · PHONES AND TABLETS ─────────────────────────────────────────────────────────────────────────────── */
@media(max-width:1439px){:root[data-look="wharf"]{--w-gut:20px}}
@media(max-width:1399px){:root[data-look="wharf"]{--w-gut:12px}}   /* a laptop: the margin goes to the columns (till-check: every column of the day at 1360) */
@media(max-width:980px){
  :root[data-look="wharf"] body .top .lg{background:transparent;border:0;width:auto;padding-inline:14px 6px}
}
@media(max-width:760px){
  :root[data-look="wharf"] body .ui .page{padding:12px 14px 32px}
  /* the page head runs to the page's edges at the page's own padding, as Classic's does at its 20px */
  :root[data-look="wharf"] body .ui .ph:has(h1){margin-inline:-14px;padding-inline:14px}
  /* a segmented control slides inside itself rather than pushing the page sideways */
  :root[data-look="wharf"] body .ui :is(.seg,.stabs,.ro-tabs,.fx-seg,.hflt,.hbar,.bar){min-width:0;max-width:100%}
  :root[data-look="wharf"] body .ui .ph:has(h1) h1{font-size:var(--t-2xl)}
  :root[data-look="wharf"] body .ui .figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  :root[data-look="wharf"] body .ui .figs > *{padding:10px 12px}
  :root[data-look="wharf"] body .ui .figs .v{font-size:var(--t-xl)}
  :root[data-look="wharf"] body #ovl{padding:0 12px 24px}
  /* overflow clip: the travelling pill's layer reaches 2px past the strip, which at a phone's edge was a sideways scroll */
  :root[data-look="wharf"] body .dsw-strip:not([hidden]){background:transparent;border:0;padding:8px 12px 0;overflow:clip}
  :root[data-look="wharf"] body .dsw-strip button{border-radius:var(--w-r-md);border-color:var(--w-hair-2);background:var(--w-solid);color:var(--w-ink)}
  :root[data-look="wharf"] body .dsw-strip button.on{background:var(--w-night);border-color:var(--w-night);color:var(--w-night-ink)}
  :root[data-look="wharf"] body .ui .w-sgrid{grid-template-columns:minmax(0,1fr);padding:12px}
}
@media(max-width:700px){
  /* the phone gives the company and the appearance switch up to the avatar, as Classic does */
  :root[data-look="wharf"] body .top :is(.tn,.thm){display:none}
  :root[data-look="wharf"] body .top .sr{flex:1 1 auto;min-width:var(--w-ctl)}
  :root[data-look="wharf"] body .top .sr input{padding-inline:32px 6px}
  :root[data-look="wharf"] body .top .sr .sri{inset-inline-start:10px}
  :root[data-look="wharf"] body .top{padding-inline-end:10px;gap:6px}
  :root[data-look="wharf"] body .top .lg img{height:24px}
}

/* ── 10 · THE POS AREA: its own Wharf (17 Oct 2026) ──────────────────────────────────────────────────────────
   Hussain, 20:07–20:08: POS and Warehouse should be recognisably different in the New look — "opposite, Warehouse
   keep same". So everything above is the Warehouse, untouched, and this section dresses the POS side only:
   html[data-area="pos"] (the pre-paint script and renderNav() set it from the side you are on; Classic has no rule
   that reads it, so Classic is the same on both sides).
     · Its own accent: Wharf's SEAGLASS ramp (the template's own alternative to honey) — the bars, the soft
       washes, the corner glow, the words in the accent's voice. ⚠️ Decided for Hussain: the business's own colour
       (rule 13) stays the Warehouse's accent; the POS side is always seaglass, so the two never look alike.
     · Its own side menu: a NIGHT column (a till, not paper), the mark's cell above it in the same night so it reads
       top to bottom, the page you are on riding a seaglass pill (the travelling pill reads --w-night from the menu,
       so it follows by itself), and under Home the day so far — net sales, orders, open shifts (index.html
       posTodayHtml, from Home's and Shifts' own answers).
     · A sales layout: figures read as one register tape (a band split by hairlines) instead of loose cards, the
       first figure of the sales home is Wharf's one night figure well, and every number is tabular, so a column
       of money lines up as on a receipt.
   ⚠️ Tokens first, as above: the menu says its --w-* again for itself and re-maps the console's and ui.css's names
   onto them (a name mapped at :root is already a colour there, so it must be said again where it is used).
   ⚠️ Compact (rule 15): nothing here changes a height or a padding of a row or a control; the Today rows are
   fixed one-line boxes that cannot wrap (nowrap, a fixed height, the label cut before the figure is). */
:root[data-look="wharf"][data-area="pos"]{
  --w-acc:#8fe0cf;                                   /* seaglass t-400: the block */
  --w-acc-text:#176a5d;                              /* t-800, measured on cream */
  --w-glow:rgba(143,224,207,.5);
  --w-st2:#34ad97; --w-st5:#c3eee4;                  /* the ring's stages in the same ramp */
  --w-pos-side:#1c2422; --w-pos-side-ink:#eef3f1; --w-pos-side-mute:rgba(238,243,241,.66);
  --w-pos-side-hair:rgba(255,255,255,.09); --w-pos-side-hair-2:rgba(255,255,255,.18); --w-pos-side-hover:rgba(255,255,255,.07);
  --w-hero-good:#7fd49c; --w-hero-bad:#f29b92;       /* a delta on the night well */
}
:root[data-look="wharf"][data-area="pos"][data-theme="dark"]{
  --w-acc-text:#a6e7d9;                              /* t-300 on the dark paper */
  --w-glow:color-mix(in srgb,#8fe0cf 16%,transparent);
  --w-st2:#5fcbb6; --w-st5:#176a5d;
  --w-pos-side:#111a19; --w-pos-side-ink:#f1f0ea; --w-pos-side-mute:rgba(241,240,234,.62);
  --w-hero-good:#25693e; --w-hero-bad:#b9392f;       /* the well is cream in the dark */
}
/* the side menu: night, its own words in cream; the pill is the accent with ink on it */
:root[data-look="wharf"][data-area="pos"] body .sh aside.ui-nav{
  --w-ink:var(--w-pos-side-ink); --w-muted:var(--w-pos-side-mute); --w-hair:var(--w-pos-side-hair); --w-hair-2:var(--w-pos-side-hair-2);
  --w-side-hover:var(--w-pos-side-hover); --w-well:var(--w-pos-side-hover);
  --w-night:var(--w-acc); --w-night-2:#a6e7d9; --w-night-ink:#1f1f24;
  --ink:var(--w-ink); --sub:var(--w-muted); --dim:var(--w-muted); --mute:var(--w-muted); --body:var(--w-ink);
  --line:var(--w-hair-2); --line2:var(--w-hair); --line-soft:var(--w-hair); --bg:var(--w-side-hover); --surface:var(--w-pos-side);
  --accent-ink:var(--w-night-ink); --accent-wash:var(--w-acc);
  --z-side:var(--w-pos-side); --z-side-line:var(--w-hair); --z-side-ink:var(--w-ink); --z-side-sub:var(--w-ink); --z-side-mute:var(--w-muted);
  --z-side-hover:var(--w-side-hover); --z-side-on:var(--w-acc); --z-side-on-ink:#1f1f24; --z-side-here:var(--w-ink);
  background:var(--w-pos-side);color:var(--w-ink);border-inline-end-color:var(--w-pos-side)}
:root[data-look="wharf"][data-area="pos"] body .sh aside.ui-nav .row.on .ico{color:#1f1f24}
:root[data-look="wharf"][data-area="pos"] body .sh aside.ui-nav :is(.row.on .n,.row.on b,.row.on em){background:#1f1f24;color:var(--w-acc)}
:root[data-look="wharf"][data-area="pos"] body .sh aside.ui-nav .navsection.has-on > .navgrp .ico{color:var(--w-acc)}
:root[data-look="wharf"][data-area="pos"] body .sh aside.ui-nav .n.bad{background:rgba(242,140,74,.22);color:#f6b07f}
/* the mark's cell over the column: the same night, the light lockup on it (a desk; on a phone the cell is the bar's) */
@media(min-width:981px){
  :root[data-look="wharf"][data-area="pos"] body .top .lg{background:var(--w-pos-side);border-inline-end-color:var(--w-pos-side);
    box-shadow:0 1px 0 var(--w-pos-side)}                            /* over the bar's hairline: one column, top to bottom */
  :root[data-look="wharf"][data-area="pos"] body .top .lg .lk-lt{display:block}
  :root[data-look="wharf"][data-area="pos"] body .top .lg .lk-dk{display:none}
}
/* POS | Warehouse: the side you are in wears its own colour — seaglass here, night on the Warehouse */
:root[data-look="wharf"][data-area="pos"] body .top .dsw button.on, :root[data-look="wharf"][data-area="pos"] body .dsw-strip button.on{
  background:var(--w-acc);border-color:var(--w-acc);color:#1f1f24}

/* Today, under Home (posTodayHtml): Wharf's side panel — an accent wash on the night, three one-line rows */
:root[data-look="wharf"][data-area="pos"] .w-today{display:block;margin:2px 0 10px;padding:6px 6px 4px;border-radius:var(--w-r-md);
  background:color-mix(in srgb,var(--w-acc) 13%,transparent);border:1px solid color-mix(in srgb,var(--w-acc) 26%,transparent);
  font-variant-numeric:tabular-nums}
:root[data-look="wharf"][data-area="pos"] .w-td-h{display:flex;align-items:center;gap:7px;height:22px;padding:0 6px;overflow:hidden;white-space:nowrap;
  font-size:var(--t-xs);font-weight:700;color:var(--w-muted)}
:root[data-look="wharf"][data-area="pos"] .w-td-h i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--w-acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--w-acc) 28%,transparent)}
:root[data-look="wharf"][data-area="pos"] .w-td{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;height:26px;min-height:0;max-height:26px;padding:0 6px;
  border-radius:8px;overflow:hidden;white-space:nowrap;color:var(--w-ink);text-decoration:none;font-size:var(--t-sm);box-sizing:border-box}
:root[data-look="wharf"][data-area="pos"] .w-td:hover{background:var(--w-side-hover)}
:root[data-look="wharf"][data-area="pos"] .w-td-l{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--w-muted)}
:root[data-look="wharf"][data-area="pos"] .w-td-v{flex:none;max-width:62%;overflow:hidden;text-overflow:ellipsis;font-weight:700;color:var(--w-ink)}
:root[data-look="wharf"][data-area="pos"] .w-td-v .mny{white-space:nowrap}
:root[data-look="wharf"][data-area="pos"] .w-td-v :is(.fr,.cur){font-size:.82em;font-weight:400}
:root[data-look="wharf"][data-area="pos"] .w-td-v .cur{margin-inline-start:3px;color:var(--w-muted)}
:root[data-look="wharf"][data-area="pos"] .w-td-none{color:var(--w-muted);font-weight:400}
:root:not([data-look="wharf"]) .w-today{display:none}

/* numbers line up as on a receipt */
:root[data-look="wharf"][data-area="pos"] body .ui :is(td,th,.hkv,.figs .v,.hm-n,.hbr .v,.hdl .v,.hdl .p,.hp .u,.hp .s){font-variant-numeric:tabular-nums}

/* figures: one register tape — a band split by hairlines, not loose cards. The hairlines are each figure's own end
   and bottom edges, pulled 1px out under the band's clip, so a row that wraps (a phone: two a row) still reads as
   one tape with no doubled or dangling line. */
:root[data-look="wharf"][data-area="pos"] body .ui .figs{gap:0;overflow:hidden;background:var(--w-card);border:1px solid var(--w-edge);
  border-radius:18px;box-shadow:var(--w-shadow)}
:root[data-look="wharf"][data-area="pos"] body .ui .figs > *, :root[data-look="wharf"][data-area="pos"] body .ui .figs > *:last-child{
  border:0;border-inline-end:1px solid var(--w-hair);border-bottom:1px solid var(--w-hair);margin:0 -1px -1px 0;border-radius:0;
  background:transparent;box-shadow:none;translate:none}
:root[data-look="wharf"][data-area="pos"] body .ui .figs > *:hover{translate:none}
:root[dir="rtl"][data-look="wharf"][data-area="pos"] body .ui .figs > *{margin:0 0 -1px -1px}
:root[data-look="wharf"][data-area="pos"] body .ui .figs .k{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-look="wharf"][data-area="pos"] body .ui .figs button:hover{background:var(--w-well)}
:root[data-look="wharf"][data-area="pos"] body .ui .figs button.on{background:var(--w-acc-wash);box-shadow:inset 0 -3px 0 var(--w-acc-text)}

/* the sales home: its first figure (Net sales) is Wharf's one night figure well — the loudest thing on the page */
:root[data-look="wharf"][data-area="pos"] body .ui .hkgrid > .card.hk:first-child{background:var(--w-night);border-color:var(--w-night);color:var(--w-night-ink)}
:root[data-look="wharf"][data-area="pos"] body .ui .hkgrid > .card.hk:first-child :is(.hkl,.hks,.hks .dim){color:color-mix(in srgb,var(--w-night-ink) 72%,transparent)}
:root[data-look="wharf"][data-area="pos"] body .ui .hkgrid > .card.hk:first-child .hkv{color:var(--w-night-ink)}
:root[data-look="wharf"][data-area="pos"] body .ui .hkgrid > .card.hk:first-child .hsp polyline{stroke:var(--w-acc)}
:root[data-look="wharf"][data-area="pos"] body .ui .hkgrid > .card.hk:first-child .hsp polygon{fill:var(--w-acc);opacity:.32}
:root[data-look="wharf"][data-area="pos"] body .ui .hkgrid > .card.hk:first-child .dlt.up{color:var(--w-hero-good)}
:root[data-look="wharf"][data-area="pos"] body .ui .hkgrid > .card.hk:first-child .dlt.down{color:var(--w-hero-bad)}
/* a list's row under the pointer carries the accent's mark at its start, as a till's line does */
:root[data-look="wharf"][data-area="pos"] body #page .ui tbody tr:hover > td:first-child{box-shadow:inset 3px 0 0 var(--w-acc)}