/* ════════════════════════════════════════════════════════════════════════════
   desk.css — the desktop layer (2026-10-28, v4.249, the user's "make the
   desktop version look premium", direction A "Graphite").

   SCOPE: a tablet, laptop or desktop (min-width: 768px; the sidebar layout from
   1024px), on pages whose body carries .desk-calm (the rep app first; the other
   screens follow one at a time). A phone never reads a rule here, so its layout,
   colours and background are exactly what they were. (v4.249 started at 1024px;
   v4.250 brought tablets in, the user: "new look".)

   THE SYSTEM
     Surfaces   page #0B0C0E · sidebar #0F1013 · card #141519 · raised #1B1D22
                hover #202228 · line #24262C · strong line #30333A
     Text       ink #EDEEF0 · secondary #B4B8BF · muted #9CA3AF (7:1) · faint #868C96 (4.9:1 on a card)
     Accent     #FF5A00 (brand) for ONE primary button per screen, the key
                bar and the current month. Text on it is #140A03 (6:1): white
                on #FF5A00 is 3.1:1 and fails AA. Orange TEXT is #FF7A33 dark,
                #C2410C light (5.2:1).
     Status     success #22C55E · warning #F59E0B · error #F87171 (dark)
     Type       Inter only (fonts/inter-var.woff2, already in the app).
                12 / 13 / 14 / 16 / 20 / 28 / 40 px; 400 / 500 / 600 / 650.
                ONE small-caps label: 11px, 600, .06em, uppercase.
     Space      4 · 8 · 12 · 16 · 20 · 24 · 32 · 48
     Radius     6 controls · 10 inner boxes · 14 cards
     Motion     150 ms colour / background on hover and focus; nothing moves
                under prefers-reduced-motion (app.css already enforces it).

   Specificity: every rule starts with  :root:not(#z) body.desk-calm  (one id
   in the count), so it beats the component stylesheets and warm-skin.css
   without !important. The light theme redefines the --dk-* tokens only.
   ════════════════════════════════════════════════════════════════════════════ */

#topOrder { display: none; }

@media (min-width: 768px) {

/* ── Tokens ────────────────────────────────────────────────────────────────── */
:root:not(#z) body.desk-calm {
  --dk-bg: #0B0C0E; --dk-side: #0F1013; --dk-card: #141519; --dk-raised: #1B1D22; --dk-hover: #202228;
  --dk-line: #24262C; --dk-line-2: #30333A;
  --dk-ink: #EDEEF0; --dk-ink-2: #B4B8BF; --dk-muted: #9CA3AF; --dk-faint: #868C96;
  --dk-accent: #FF5A00; --dk-on-accent: #140A03; --dk-accent-ink: #FF7A33; --dk-accent-wash: rgba(255, 90, 0, .12);
  --dk-ok: #22C55E; --dk-ok-ink: #4ADE80; --dk-warn: #F59E0B; --dk-warn-ink: #FBBF24; --dk-err: #F87171;
  --dk-err-wash: rgba(248, 113, 113, .10);
  --dk-shadow-pop: 0 12px 32px rgba(0, 0, 0, .45);
  --dk-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dk-ease: cubic-bezier(.2, .7, .2, 1);
}
:root[data-scheme="light"]:not(#z) body.desk-calm {
  --dk-bg: #F7F7F8; --dk-side: #FFFFFF; --dk-card: #FFFFFF; --dk-raised: #F4F4F5; --dk-hover: #F0F0F2;
  --dk-line: #E4E4E7; --dk-line-2: #D4D4D8;
  --dk-ink: #18181B; --dk-ink-2: #3F3F46; --dk-muted: #5F6470; --dk-faint: #6B7280;
  --dk-accent: #FF5A00; --dk-on-accent: #140A03; --dk-accent-ink: #C2410C; --dk-accent-wash: rgba(255, 90, 0, .10);
  --dk-ok: #16A34A; --dk-ok-ink: #15803D; --dk-warn: #D97706; --dk-warn-ink: #B45309; --dk-err: #DC2626;
  --dk-err-wash: rgba(220, 38, 38, .06);
  --dk-shadow-pop: 0 12px 32px rgba(24, 24, 27, .12);
}

/* v4.278: the old warm skin's tokens (warm-skin.css) and the theme surfaces it re-points, on Graphite: every
   component still drawn from them (the quotation builder, the price calculator, My team, order cards, Home's fold,
   Recent activity ...) follows without a rule of its own. The theme's own tokens only in dark mode: light mode's are
   already the white cards of v4.237. */
:root:not(#z) body.desk-calm {
  --w-bg: var(--dk-bg); --w-glow: var(--dk-raised); --w-side: var(--dk-side);
  --w-card: var(--dk-card); --w-card-top: var(--dk-card); --w-raised: var(--dk-raised); --w-sel: var(--dk-raised); --w-row: var(--dk-raised);
  --w-track: var(--dk-line); --w-line: var(--dk-line); --w-line-2: var(--dk-line-2);
  --w-orange: var(--dk-accent); --w-orange-2: var(--dk-accent); --w-brown: var(--dk-line-2);
  --w-text: var(--dk-ink); --w-muted: var(--dk-muted); --w-faint: var(--dk-faint); --w-soft: var(--dk-accent-ink);
  --w-chart-top: var(--dk-accent); --w-chart-low: var(--dk-card);
  --w-hero: var(--dk-card); --w-stack: var(--dk-card); --w-lit: linear-gradient(transparent, transparent);
  /* the theme's amber accent becomes Graphite's orange (dark text on it); app.css's aliases are resolved on :root,
     so they are set here again */
  --accent: var(--dk-accent); --accent-hover: #FF7A33; --accent-focus: rgba(255, 90, 0, .45); --accent-wash: var(--dk-accent-wash);
  --on-accent: var(--dk-on-accent); --accent-ink: var(--dk-accent-ink); --amber: var(--dk-accent); --vivid: #FF7A33;
}
:root:not([data-scheme="light"]):not(#z) body.desk-calm {
  --canvas: var(--dk-bg);
  --e1-bg: var(--dk-card); --e1-border: var(--dk-line); --e1-shadow: none;
  --e2-bg: var(--dk-raised); --e2-border: var(--dk-line); --e2-shadow: none;
  --e3-bg: var(--dk-card); --e3-border: var(--dk-line-2);
  --hairline: var(--dk-line); --hairline-strong: var(--dk-line-2);
  --wash: rgba(255, 255, 255, .04); --wash-strong: rgba(255, 255, 255, .07);
  --glass: rgba(11, 12, 14, .85);
}

/* ── The page: plain, calm, one font ───────────────────────────────────────── */
:root:not(#z) body.desk-calm { background: var(--dk-bg); font-family: var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm .bgfx { display: none; }

@media (min-width: 1024px) {
/* ── Sidebar ───────────────────────────────────────────────────────────────── */
:root:not(#z) body.desk-calm .rail {
  background: var(--dk-side); border-inline-end: 1px solid var(--dk-line);
  padding: 20px 12px 14px; gap: 16px; backdrop-filter: none; -webkit-backdrop-filter: none;
  margin: 0; border-radius: 0; border-top: 0; border-bottom: 0; border-inline-start: 0; box-shadow: none;
}
:root:not(#z) body.desk-calm .rail__brand { padding: 2px 10px 0; }
:root:not(#z) body.desk-calm .rail__brand .pmx-logo { width: min(168px, 100%); }
:root:not(#z) body.desk-calm .rail__brand span { font: 600 11px/1 var(--dk-font); letter-spacing: .06em; color: var(--dk-muted); margin-top: 8px; }
:root:not(#z) body.desk-calm .rail__tag { display: none; }
:root:not(#z) body.desk-calm .rail__foot { font: 500 12px/1.4 var(--dk-font); color: var(--dk-faint); padding: 10px 10px 0; border-top: 1px solid var(--dk-line); }

/* a thin scrollbar that shows only what it must */
:root:not(#z) body.desk-calm .rail__nav { gap: 2px; scrollbar-width: thin; scrollbar-color: var(--dk-line-2) transparent; padding-inline-end: 2px; }
:root:not(#z) body.desk-calm .rail__nav::-webkit-scrollbar { width: 6px; }
:root:not(#z) body.desk-calm .rail__nav::-webkit-scrollbar-track { background: transparent; }
:root:not(#z) body.desk-calm .rail__nav::-webkit-scrollbar-thumb { background: var(--dk-line-2); border-radius: 3px; }
:root:not(#z) body.desk-calm .rail__nav::-webkit-scrollbar-button { display: none; height: 0; }

/* the four sections: one line each, the description is the tooltip (title) */
:root:not(#z) body.desk-calm #nav > .navitem:not(.navitem--more) {
  grid-template-areas: "ic t b"; min-height: 36px; padding: 0 10px; column-gap: 10px;
  border-radius: 6px; font: 500 14px/1.2 var(--dk-font); color: var(--dk-ink-2);
  transition: background-color .15s var(--dk-ease), color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm #nav > .navitem > .navitem__s { display: none; }
:root:not(#z) body.desk-calm .navitem > svg:not(.navitem__chev),
:root:not(#z) body.desk-calm .navsub__i svg:not(.navsub__chev svg) {
  background: none; padding: 0; width: 18px; height: 18px; border-radius: 0;
  color: var(--dk-muted); stroke: var(--dk-muted); stroke-width: 1.8;
}
:root:not(#z) body.desk-calm .navitem:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm .navitem.is-active {
  background: var(--dk-raised); color: var(--dk-ink); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--dk-accent);
}
:root[dir="rtl"]:not(#z) body.desk-calm .navitem.is-active { box-shadow: inset -2px 0 0 var(--dk-accent); }
:root:not(#z) body.desk-calm .navitem.is-active > svg:not(.navitem__chev) { color: var(--dk-accent); stroke: var(--dk-accent); }
:root:not(#z) body.desk-calm .navitem:focus-visible,
:root:not(#z) body.desk-calm .navsub__i:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: -2px; }

:root:not(#z) body.desk-calm .navsub__i {
  min-height: 34px; padding: 0 10px; gap: 10px; border-radius: 6px;
  font: 500 14px/1.25 var(--dk-font); color: var(--dk-ink-2);
  transition: background-color .15s var(--dk-ease), color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm #prodSub .navsub__i { font-size: 13px; min-height: 30px; }
:root:not(#z) body.desk-calm #prodSub .navsub__i svg:not(.navsub__chev svg) { width: 16px; height: 16px; }
:root:not(#z) body.desk-calm .navsub__i:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm .navsub__i.is-on { background: var(--dk-raised); color: var(--dk-ink); font-weight: 600; }
:root:not(#z) body.desk-calm .navsub__i.is-on svg:not(.navsub__chev svg) { color: var(--dk-accent); stroke: var(--dk-accent); }
:root:not(#z) body.desk-calm .navsub__chev { opacity: .5; }
:root:not(#z) body.desk-calm .navsub__grp { border-color: var(--dk-line); }
:root:not(#z) body.desk-calm .rail__sec,
:root:not(#z) body.desk-calm .navsub__h { margin: 18px 10px 6px; font: 600 11px/1.2 var(--dk-font); letter-spacing: .06em; color: var(--dk-faint); }
:root:not(#z) body.desk-calm .navitem__badge,
:root:not(#z) body.desk-calm .navsub__i em {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center;
  background: var(--dk-raised); border: 1px solid var(--dk-line-2); color: var(--dk-ink);
  font: 600 11px/1 var(--dk-font); font-variant-numeric: tabular-nums;
}
:root:not(#z) body.desk-calm .navitem__badge[hidden] { display: none; }
:root:not(#z) body.desk-calm .navsub__i em:empty { display: none; }

}   /* end of the sidebar (1024px and up) */

/* ── A tablet (768-1023px): the bottom bar and its More list in the same quiet system ── */
@media (max-width: 1023px) {
:root:not(#z) body.desk-calm .rail { background: var(--dk-side); border-top: 1px solid var(--dk-line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
:root:not(#z) body.desk-calm .rail__nav > .navitem { color: var(--dk-ink-2); font-family: var(--dk-font); font-weight: 500; }
:root:not(#z) body.desk-calm .rail__nav > .navitem > svg:not(.navitem__chev) { background: none; padding: 0; width: 20px; height: 20px; border-radius: 0; color: var(--dk-muted); stroke: var(--dk-muted); }
:root:not(#z) body.desk-calm .rail__nav > .navitem.is-active { background: var(--dk-raised); color: var(--dk-ink); box-shadow: none; }
:root:not(#z) body.desk-calm .rail__nav > .navitem.is-active > svg:not(.navitem__chev) { color: var(--dk-accent); stroke: var(--dk-accent); }
:root:not(#z) body.desk-calm .navsub--pop.is-open { background: var(--dk-card); border: 1px solid var(--dk-line-2); box-shadow: var(--dk-shadow-pop); }
:root:not(#z) body.desk-calm #loPop .navsub__i { color: var(--dk-ink); font-family: var(--dk-font); font-weight: 500; }
:root:not(#z) body.desk-calm #loPop .navsub__i svg:not(.navsub__chev svg) { background: none; padding: 0; width: 18px; height: 18px; color: var(--dk-muted); stroke: var(--dk-muted); }
}

/* ── Top bar ───────────────────────────────────────────────────────────────── */
:root:not(#z) body.desk-calm .topbar {
  min-height: 60px; padding: 0 32px; gap: 10px;
  background: color-mix(in srgb, var(--dk-bg) 92%, transparent); border-bottom: 1px solid var(--dk-line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
:root:not(#z) body.desk-calm .topbar .avatar { width: 32px; height: 32px; font-size: 12px; box-shadow: none; }
:root:not(#z) body.desk-calm .topbar__name { font: 600 14px/1.3 var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm .topbar__mgr { font: 400 12px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm .sync {
  height: 26px; padding: 0 10px; border-radius: 99px; gap: 6px;
  background: transparent; border: 1px solid var(--dk-line-2); color: var(--dk-ink-2);
  font: 500 12px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm .sync__dot { width: 6px; height: 6px; background: var(--dk-ok); box-shadow: none; animation: none; }
:root:not(#z) body.desk-calm .sync.is-off .sync__dot { background: var(--dk-faint); }
:root:not(#z) body.desk-calm .sync.is-wait .sync__dot { background: var(--dk-warn); }
:root:not(#z) body.desk-calm .sync.is-fail { color: var(--dk-err); border-color: color-mix(in srgb, var(--dk-err) 40%, transparent); }
:root:not(#z) body.desk-calm .sync.is-fail .sync__dot { background: var(--dk-err); }
:root:not(#z) body.desk-calm .topbar .iconbtn {
  width: 34px; height: 34px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--dk-ink-2); box-shadow: none;
  transition: background-color .15s var(--dk-ease), color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm .topbar .iconbtn:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm .topbar .iconbtn svg { width: 18px; height: 18px; }
:root:not(#z) body.desk-calm .bell__count { background: var(--dk-accent); color: var(--dk-on-accent); box-shadow: 0 0 0 2px var(--dk-bg); font: 700 10px/1 var(--dk-font); }

/* New order: the screen's one primary action, in the bar on a laptop. */
:root:not(#z) body.desk-calm #topOrder:not([hidden]) {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 12px; margin-inline: 4px;
  border: 0; border-radius: 6px; background: var(--dk-accent); color: var(--dk-on-accent);
  font: 600 13px/1 var(--dk-font); cursor: pointer; transition: filter .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm #topOrder:hover { filter: brightness(1.08); }
:root:not(#z) body.desk-calm #topOrder:focus-visible { outline: 2px solid var(--dk-ink); outline-offset: 2px; }
:root:not(#z) body.desk-calm #topOrder svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* … so the floating one is a phone's only */
:root:not(#z) body.desk-calm .fab { display: none; }
:root:not(#z) body.desk-calm #main:has(.fab) { padding-bottom: 48px; }
@media (min-width: 1024px) { :root:not(#z) body.desk-calm:has(.fab) .toast { bottom: calc(var(--safe-b) + 28px); } }

/* ══ SHARED PARTS, rep app (v4.276) ══════════════════════════════════════════
   What every screen borrows: the bottom sheets (New order, New request, a
   product, an order), their fields and buttons, the kg / L switch, the bell's
   panel, the round refresh. Before this they kept the warm brown of the old
   skin wherever a screen's own section had not restyled them. Placed before the
   screens so a screen's own rule (more specific) still wins. Carried to a
   phone by desk-phone.css. */
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet__body { background: var(--dk-card); border-color: var(--dk-line-2); box-shadow: var(--dk-shadow-pop); color: var(--dk-ink); font-family: var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet__grip { background: var(--dk-line-2); opacity: 1; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet__title { font-family: var(--dk-font); font-weight: 650; letter-spacing: -.01em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet__body .iconbtn { background: transparent; border-color: transparent; color: var(--dk-ink-2); box-shadow: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .label { font-family: var(--dk-font); font-weight: 500; color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) .input { background-color: var(--dk-bg); border: 1px solid var(--dk-line-2); color: var(--dk-ink); font-family: var(--dk-font); font-weight: 400; box-shadow: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .input::placeholder { color: var(--dk-faint); }
:root:not(#z) body.desk-calm:not(.is-mgr) .input:focus { outline: 0; border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); }
:root:not(#z) body.desk-calm:not(.is-mgr) .input.is-bad { border-color: var(--dk-err); }
:root:not(#z) body.desk-calm:not(.is-mgr) .input--select option { background: var(--dk-card); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.input-unit, .chev, .conv, .muted) { color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .conv { font-family: var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .err { color: var(--dk-err); }
/* kg / L: a quiet track, the chosen side raised with the orange underline (SHARED STATES) */
:root:not(#z) body.desk-calm:not(.is-mgr) .useg { background: var(--dk-bg); border: 1px solid var(--dk-line-2); box-shadow: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .useg__glider { background: var(--dk-raised); box-shadow: inset 0 -2px 0 var(--dk-accent); }
:root:not(#z) body.desk-calm:not(.is-mgr) .useg__btn { color: var(--dk-muted); font-family: var(--dk-font); font-weight: 500; }
:root:not(#z) body.desk-calm:not(.is-mgr) .useg__btn.is-on { color: var(--dk-ink); font-weight: 600; }
/* the estimate under the form */
:root:not(#z) body.desk-calm:not(.is-mgr) .calc { background: transparent; border: 1px solid var(--dk-line); box-shadow: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .calc__row { border-color: var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) .calc__k { color: var(--dk-muted); font-family: var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.calc__v, .calc__total) { color: var(--dk-ink); font-family: var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) .calc__note { color: var(--dk-muted); }
/* buttons: one orange primary, the rest quiet */
:root:not(#z) body.desk-calm:not(.is-mgr) .btn { font-family: var(--dk-font); font-weight: 600; box-shadow: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .btn--primary { background: var(--dk-accent); background-image: none; color: var(--dk-on-accent); border: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .btn--outline { background: transparent; border: 1px solid var(--dk-line-2); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .btn--outline:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) .btn--ghost { background: transparent; border: 1px solid var(--dk-line-2); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) .btn--danger { background: transparent; border: 1px solid color-mix(in srgb, var(--dk-err) 55%, transparent); color: var(--dk-err); }
/* the bell's panel (the manager's has the same, below) */
:root:not(#z) body.desk-calm:not(.is-mgr) .bell__panel { background: var(--dk-card); border: 1px solid var(--dk-line-2); box-shadow: var(--dk-shadow-pop); color: var(--dk-ink); font-family: var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .bell__h { color: var(--dk-muted); font-family: var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .bell__i:hover { background: var(--dk-hover); }
/* a screen's round refresh (shown on a phone; a laptop keeps only the top bar's) */
:root:not(#z) body.desk-calm:not(.is-mgr) .lo-round { background: transparent; border: 1px solid var(--dk-line-2); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo-round:hover { background: var(--dk-hover); color: var(--dk-ink); }

/* ══ HOME ════════════════════════════════════════════════════════════════════
   One grid: the greeting and its actions across the top; the sales card and
   Today side by side (Today under it below 1280px); then the rest. The header
   component (#dhHost > .dh) is display:contents so its two parts are grid
   items of the page; the page is the size container its rules ask about. */
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #dhHost) {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start;
  padding: 28px max(32px, calc((100% - 1480px) / 2)) 48px;
  container-type: inline-size;
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #dhHost) > * { grid-column: 1 / -1; max-width: none; margin-inline: 0; width: auto; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main > #dhHost,
:root:not(#z) body.desk-calm:not(.is-mgr) #dhHost > .dh { display: contents; }
:root:not(#z) body.desk-calm:not(.is-mgr) #dhHost .dh-top,
:root:not(#z) body.desk-calm:not(.is-mgr) #dhHost .dh-kpis { grid-column: 1 / -1; }
@media (min-width: 1280px) {
  :root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #homeToday):has(> #dhHost .dh-kpis) { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); }
  :root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #homeToday) #dhHost .dh-top { grid-row: 1; }
  :root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #homeToday) #dhHost .dh-kpis { grid-column: 1; grid-row: 2; }
  :root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #dhHost .dh-kpis) > #homeToday { grid-column: 2; grid-row: 2; }
}

/* the header component's own tokens: Inter, graphite, no amber */
:root:not(#z) body.desk-calm:not(.is-mgr) #dhHost {
  --dh-font: var(--dk-font); --dh-cond: var(--dk-font); --dh-mono: var(--dk-font);
  --dh-text: var(--dk-ink); --dh-text-2: var(--dk-ink-2); --dh-muted: var(--dk-muted);
  --dh-card: var(--dk-card); --dh-tile: var(--dk-raised); --dh-track: var(--dk-raised);
  --dh-line: var(--dk-line); --dh-line-2: var(--dk-line-2);
  --dh-acc: var(--dk-accent); --dh-ink: var(--dk-on-accent);
  --dh-green: var(--dk-ok); --dh-red: var(--dk-err); --dh-amber: var(--dk-warn);
  font-family: var(--dk-font);
}

/* greeting row */
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-top { padding: 0; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-eyebrow { font: 500 13px/1.4 var(--dk-font); letter-spacing: 0; text-transform: none; color: var(--dk-muted); gap: 10px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-sync { display: none; }               /* "Online" is the top bar's pill */
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-hello { margin-top: 4px; font: 650 28px/1.15 var(--dk-font); letter-spacing: -.022em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-hello .dh-who { display: none; }      /* the name is in the top bar */
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-lead { margin-top: 4px; font: 400 14px/1.5 var(--dk-font); color: var(--dk-muted); }

/* the actions: one quiet, joined group (New order is the primary, in the bar) */
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-actions { gap: 0; flex-wrap: nowrap; border: 1px solid var(--dk-line-2); border-radius: 6px; overflow: hidden; background: var(--dk-card); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-btn {
  height: 34px; padding: 0 12px; gap: 7px; border: 0; border-radius: 0; background: transparent; box-shadow: none; filter: none;
  color: var(--dk-ink); font: 500 13px/1 var(--dk-font); letter-spacing: 0;
  transition: background-color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-btn + .dh-btn { border-inline-start: 1px solid var(--dk-line-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-btn:hover { background: var(--dk-hover); border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-btn:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: -2px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-btn:active { transform: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh .dh-btn[data-action] > svg { width: 15px; height: 15px; color: var(--dk-muted); stroke: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh .dh-ci { padding: 0 12px; position: relative; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh .dh-ci.is-due { color: var(--dk-ink); background: transparent; border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh .dh-ci.is-done > svg { color: var(--dk-ok); stroke: var(--dk-ok); }
/* the state is the point of this button: red icon until checked in today, green after (the border stays the group's) */
:root:not(#z) body.desk-calm:not(.is-mgr) .dh .dh-ci.is-due > svg { color: var(--dk-err); stroke: var(--dk-err); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-ci-dot { top: 6px; inset-inline-end: 5px; width: 6px; height: 6px; background: var(--dk-err); box-shadow: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-btn--acc { background: transparent; color: var(--dk-ink); font-weight: 500; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh .dh-btn--acc[data-action] > svg { color: var(--dk-muted); stroke: var(--dk-muted); }

/* the sales card: one plain surface, no glow */
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-kpis { padding: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-card {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-card .dh-tile--volume { padding: 20px 22px 18px; gap: 12px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-card .dh-tile--volume:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-card .dh-tile--volume:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: -2px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-tile-head { gap: 10px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--dk-raised); border: 1px solid var(--dk-line); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-ico svg { width: 16px; height: 16px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-heads { gap: 2px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-heads .dh-k { font: 600 11px/1.2 var(--dk-font); letter-spacing: .06em; text-transform: uppercase; color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-title { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-valrow { gap: 12px; margin-top: 6px; align-items: baseline; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-val { font: 650 40px/1 var(--dk-font); letter-spacing: -.03em; color: var(--dk-ink); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-val small { font: 500 16px/1 var(--dk-font); letter-spacing: 0; color: var(--dk-muted); margin-inline-start: 4px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pct { height: 26px; padding: 0 10px; gap: 6px; border-radius: 99px; background: transparent; border: 1px solid var(--dk-line-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pct svg { width: 14px; height: 14px; color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pct b { font: 600 13px/1 var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pct span { font: 400 13px/1 var(--dk-font); color: var(--dk-muted); }

:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pw { padding-top: 40px; margin-top: 4px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pw.is-early { margin-top: 4px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pmark.dh-d { padding-inline-start: 8px; gap: 1px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pmark b { font: 600 13px/1.3 var(--dk-font); color: var(--dk-ink); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pmark b small { font: 500 12px/1 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pmark span { font: 400 12px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-card .dh-progress { height: 8px; border-radius: 99px; background: var(--dk-raised); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-card .dh-progress i { border-radius: 99px; background: var(--dk-accent); box-shadow: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-card .dh-progress b { top: -6px; bottom: -6px; width: 2px; background: var(--dk-ink-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-progress-legend { margin-top: 2px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-l0 { font: 500 12px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-l1 { gap: 1px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-l1 b { font: 600 13px/1.3 var(--dk-font); color: var(--dk-ink); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-l1 b small { font: 500 12px/1 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-l1 span { font: 400 12px/1.3 var(--dk-font); color: var(--dk-muted); }

:root:not(#z) body.desk-calm:not(.is-mgr) .dh-side { padding: 18px 20px 16px; gap: 10px; border-inline-start: 1px solid var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-side::before { display: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pacecard,
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pacecard.is-behind {
  padding: 10px 12px; gap: 10px; border-radius: 10px; background: var(--dk-raised); border: 1px solid var(--dk-line); box-shadow: none;
  transition: background-color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pacecard:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pacecard__ic,
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pacecard.is-behind .dh-pacecard__ic { width: 28px; height: 28px; border: 0; box-shadow: none; background: transparent; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pacecard__ic { color: var(--dk-ok); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pacecard.is-behind .dh-pacecard__ic { color: var(--dk-err); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pacecard__ic svg { width: 18px; height: 18px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pacecard__t b { font: 600 14px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pacecard__t span { font: 400 12px/1.4 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pace.is-ahead { color: var(--dk-ok-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-pace.is-behind { color: var(--dk-err); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-two { gap: 10px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-mini { padding: 10px 12px; gap: 10px; border-radius: 10px; background: transparent; border: 1px solid var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-mini__ic { width: 28px; height: 28px; border-radius: 6px; background: var(--dk-raised); border: 0; color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-mini__ic svg { width: 15px; height: 15px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-mini__t small { font: 600 11px/1.2 var(--dk-font); letter-spacing: .06em; text-transform: uppercase; color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-mini__t b { font: 600 18px/1.25 var(--dk-font); letter-spacing: -.015em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-mini__t i { font: 500 12px/1 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-months { height: 96px; gap: 6px; margin: auto 0 22px; padding-top: 8px; border-bottom: 1px solid var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-mo i { max-width: 18px; border-radius: 3px 3px 1px 1px; background: var(--dk-line-2); box-shadow: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-mo.is-now i { background: var(--dk-accent); box-shadow: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-mo em { bottom: -20px; font: 500 11px/1 var(--dk-font); color: var(--dk-faint); }
:root:not(#z) body.desk-calm:not(.is-mgr) .dh-mo.is-now em { color: var(--dk-ink); font-weight: 600; }

/* Today: a card beside the sales card, three figures, then what needs doing */
:root:not(#z) body.desk-calm:not(.is-mgr) .home-today {
  display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; margin: 0;
  background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .today__ph { display: block; order: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .today__ph-h { display: flex; align-items: center; justify-content: space-between; min-height: 28px; font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .today__more {
  width: 28px; height: 28px; margin-inline-end: -6px; display: inline-grid; place-items: center; border: 0; border-radius: 6px;
  background: transparent; color: var(--dk-muted); cursor: pointer;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .today__more:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .today__more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) .today__more svg { transform: scaleX(-1); }
:root:not(#z) body.desk-calm:not(.is-mgr) .today__ms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .today__m {
  display: flex; flex-direction: column-reverse; align-items: flex-start; justify-content: flex-end; gap: 4px;
  min-height: 0; padding: 10px 12px; border: 1px solid var(--dk-line); border-radius: 10px; background: transparent;
  color: var(--dk-ink); font: inherit; text-align: start; cursor: pointer;
  transition: background-color .15s var(--dk-ease), border-color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .today__m:hover { background: var(--dk-hover); border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) .today__m b { font: 650 24px/1.1 var(--dk-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) .today__m span { font: 500 12px/1.3 var(--dk-font); letter-spacing: 0; color: var(--dk-muted); white-space: nowrap; }
:root:not(#z) body.desk-calm:not(.is-mgr) .today__m.is-late b { color: var(--dk-err); }
:root:not(#z) body.desk-calm:not(.is-mgr) .today__m.is-news b { color: var(--dk-accent-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .today__lap { display: block; order: 1; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) .today__k { display: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .today__none { font: 400 13px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .today__row { gap: 6px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .today__c,
:root:not(#z) body.desk-calm:not(.is-mgr) .today__c.is-late,
:root:not(#z) body.desk-calm:not(.is-mgr) .today__c.is-news {
  align-items: center; height: auto; min-height: 28px; padding: 4px 10px; border-radius: 99px; background: transparent; border: 1px solid var(--dk-line-2);
  color: var(--dk-ink-2); font: 500 12px/1.3 var(--dk-font); white-space: nowrap;   /* v4.259: a fixed 28px under the base 40px minimum cut the pill's border off */
}
:root:not(#z) body.desk-calm:not(.is-mgr) .today__c b { font: 600 12px/1 var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .today__c.is-late b { color: var(--dk-err); }
:root:not(#z) body.desk-calm:not(.is-mgr) .today__c:hover { background: var(--dk-hover); }

/* Orders by status + Follow-ups: the same surface, Inter, neutral selection */
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #dhHost) .dash { gap: 20px; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #dhHost) .dash--fu { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #dhHost) .dash--fu.dash--one { grid-template-columns: minmax(0, 1fr); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #dhHost) .dcard { background: transparent; border: 0; box-shadow: none; padding: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) #psHost .ps,
:root:not(#z) body.desk-calm:not(.is-mgr) #fuHost .fu { background-image: none; box-shadow: none; border: 1px solid var(--dk-line); border-radius: 14px; }
:root:not(#z) body.desk-calm:not(.is-mgr) #psHost .ps {
  --ps-font: var(--dk-font); --ps-cond: var(--dk-font); --ps-mono: var(--dk-font);
  --ps-card: var(--dk-card); --ps-raised: var(--dk-raised); --ps-track: var(--dk-raised); --ps-line: var(--dk-line);
  --ps-text: var(--dk-ink); --ps-text-2: var(--dk-ink-2); --ps-muted: var(--dk-muted);
  --ps-acc: var(--dk-ink); --ps-ink: var(--dk-bg); --ps-acc-ink: var(--dk-ink);
  --ps-approved: var(--dk-ok); --ps-awaiting: var(--dk-warn); --ps-rejected: var(--dk-err);
  --ps-approved-ink: var(--dk-ok-ink); --ps-awaiting-ink: var(--dk-warn-ink); --ps-rejected-ink: var(--dk-err);
  font-family: var(--dk-font); background: var(--dk-card);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-head { padding: 18px 20px 14px; border-color: var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) #psHost .ps-title { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-sub { font: 400 13px/1.4 var(--dk-font); letter-spacing: 0; text-transform: none; color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-periods { padding: 2px; gap: 2px; background: var(--dk-raised); border: 0; border-radius: 6px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-period { height: 28px; padding: 0 10px; border-radius: 4px; font: 500 12px/1 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-period:hover { color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-period[aria-pressed="true"] { background: var(--dk-card); color: var(--dk-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-body { padding: 20px; gap: 24px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-center-k,
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-center-cur,
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-k { font: 600 11px/1.2 var(--dk-font); letter-spacing: .06em; }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-center-v { font: 650 40px/1 var(--dk-font); letter-spacing: -.03em; }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-center-sub { font: 500 12px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-scale { font: 500 11px/1 var(--dk-font); color: var(--dk-faint); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-row { padding: 10px 12px; border-radius: 10px; border-color: var(--dk-line); background: transparent; }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-row:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-dot { width: 8px; height: 8px; box-shadow: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-row-label strong { font: 600 14px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-row-label small { font: 400 12px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-row-val strong { font: 600 18px/1.1 var(--dk-font); letter-spacing: -.015em; }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-row-val small { font: 400 12px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-earn { margin: 0 20px 18px; border-radius: 10px; background: transparent; border-color: var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-earn > div + div { border-color: var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-earn-v { font: 650 24px/1.1 var(--dk-font); letter-spacing: -.02em; }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-earn-v small { font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-rate b { font: 650 20px/1.1 var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-rate span { font: 600 11px/1.2 var(--dk-font); letter-spacing: .06em; }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-foot { padding: 0 20px; border-color: var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps-link { height: 44px; font: 500 13px/1 var(--dk-font); color: var(--dk-accent-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ps :focus-visible { outline: 2px solid var(--dk-accent-ink); }

:root:not(#z) body.desk-calm:not(.is-mgr) #fuHost .fu {
  --fu-font: var(--dk-font); --fu-cond: var(--dk-font); --fu-mono: var(--dk-font);
  --fu-card: var(--dk-card); --fu-raised: var(--dk-raised); --fu-sunk: var(--dk-raised);
  --fu-line: var(--dk-line); --fu-line-2: var(--dk-line-2);
  --fu-text: var(--dk-ink); --fu-text-2: var(--dk-ink-2); --fu-muted: var(--dk-muted); --fu-faint: var(--dk-faint);
  --fu-acc: var(--dk-ink); --fu-ink: var(--dk-bg); --fu-red: var(--dk-err); --fu-green: var(--dk-ok);
  font-family: var(--dk-font); background: var(--dk-card);
}
:root:not(#z) body.desk-calm:not(.is-mgr) #fuHost .fu-title { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fuHost .fu-btn { height: 30px; padding: 0 10px; border-radius: 6px; font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fuHost .fu-btn--acc { background: transparent; color: var(--dk-ink); border: 1px solid var(--dk-line-2); filter: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) #fuHost .fu-btn--acc:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fuHost .fu-day { border-radius: 8px; }
:root:not(#z) body.desk-calm:not(.is-mgr) #fuHost .fu-day.is-today { border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fuHost .fu-view[aria-pressed="true"] { background: var(--dk-card); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fuHost .fu-type.t-quote,
:root:not(#z) body.desk-calm:not(.is-mgr) #fuHost .fu-pill.is-due-soon { background: var(--dk-accent-wash); color: var(--dk-accent-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fuHost .fu :focus-visible { outline: 2px solid var(--dk-accent-ink); }

/* the fold (map cards, recent activity) and the getting-started guide */
:root:not(#z) body.desk-calm:not(.is-mgr) .home-more { border-color: var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) .home-more__h { font: 600 14px/1.3 var(--dk-font); color: var(--dk-ink-2); }
}

/* Arabic month names are three to five times longer than "Jan": twelve of them do not fit under the bars.
   A laptop in Arabic labels every third month and the current one; each bar keeps its full name in its tooltip. */
@media (min-width: 768px) {
  :root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) .dh-mo:not(:nth-child(3n+1)):not(.is-now) em { visibility: hidden; }
  :root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) .dh-mo em { white-space: nowrap; }
}

/* ══ ACCOUNTS (v4.250) ════════════════════════════════════════════════════════
   The client list as one card of rows with column headings: company, where and
   who, stage. A page title with the count; Add is the screen's one primary
   button, Select / Import are quiet; delete is a grey bin that turns red only
   under the pointer or focus. The title and headings exist on a phone too
   (app.js), hidden there. */
.acct-head, .rows__head { display: none; }

@media (min-width: 768px) {
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) {
  gap: 16px; padding: 28px max(24px, calc((100% - 1480px) / 2)) 48px;
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) > * { max-width: none; margin-inline: 0; width: auto; }

:root:not(#z) body.desk-calm:not(.is-mgr) .acct-head { display: flex; align-items: baseline; gap: 10px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .acct-head h1 { font: 650 28px/1.15 var(--dk-font); letter-spacing: -.022em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .acct-head__n {
  min-width: 24px; height: 22px; padding: 0 8px; border-radius: 99px; display: inline-grid; place-items: center;
  background: var(--dk-raised); border: 1px solid var(--dk-line); color: var(--dk-ink-2);
  font: 600 12px/1 var(--dk-font); font-variant-numeric: tabular-nums;
}

/* the bar: a slim search with its icon, quiet buttons, one primary */
:root:not(#z) body.desk-calm:not(.is-mgr) .acct-bar { gap: 8px; align-items: center; }
:root:not(#z) body.desk-calm:not(.is-mgr) .acct-bar .search {
  height: 36px; min-height: 36px; border-radius: 6px; padding-block: 0; padding-inline: 34px 12px;
  background: var(--dk-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat left 11px center / 16px 16px;
  border: 1px solid var(--dk-line-2); color: var(--dk-ink); font: 400 14px/1 var(--dk-font);
  transition: border-color .15s var(--dk-ease), box-shadow .15s var(--dk-ease);
}
:root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) .acct-bar .search { background-position: right 11px center; }
:root:not(#z) body.desk-calm:not(.is-mgr) .acct-bar .search::placeholder { color: var(--dk-faint); }
:root:not(#z) body.desk-calm:not(.is-mgr) .acct-bar .search:focus { outline: 0; border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); }
:root:not(#z) body.desk-calm:not(.is-mgr) .acct-add {
  height: 36px; min-height: 36px; padding: 0 14px; border-radius: 6px; box-shadow: none;
  font: 500 13px/1 var(--dk-font); letter-spacing: 0; transition: background-color .15s var(--dk-ease), filter .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .acct-add.btn--outline { background: var(--dk-card); border: 1px solid var(--dk-line-2); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .acct-add.btn--outline:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) .acct-add.btn--outline[aria-pressed="true"] { background: var(--dk-raised); border-color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) .acct-add.btn--primary { background: var(--dk-accent); color: var(--dk-on-accent); border: 0; font-weight: 600; }
:root:not(#z) body.desk-calm:not(.is-mgr) .acct-add.btn--primary:hover { filter: brightness(1.08); }
:root:not(#z) body.desk-calm:not(.is-mgr) .acct-add:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }

/* the list: one card, hairline rows, aligned columns */
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .rows {
  --acc-cols: 32px minmax(0, 1.25fr) minmax(0, 1fr) 132px;
  display: flex; flex-direction: column; gap: 0;
  background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 14px; overflow: hidden;
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .rows__head {
  display: grid; grid-template-columns: var(--acc-cols); column-gap: 14px; align-items: center;
  min-height: 38px; padding-block: 0; padding-inline: 16px 60px; border-bottom: 1px solid var(--dk-line);
  font: 600 11px/1.2 var(--dk-font); letter-spacing: .06em; text-transform: uppercase; color: var(--dk-faint);
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .rows.is-selecting .rows__head { padding-inline-start: 52px; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row-w { border-bottom: 1px solid var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row-w:last-child { border-bottom: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row {
  grid-template-columns: var(--acc-cols); column-gap: 14px; min-height: 56px;
  padding-block: 10px; padding-inline: 16px 60px;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none;
  transition: background-color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .rows.is-selecting .row-w > .row { padding-inline-start: 52px; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: -2px; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row > span:not(.row__ini):not(.tag) { display: contents; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row__ini {
  width: 32px; height: 32px; border-radius: 50%; background: var(--dk-raised); border: 1px solid var(--dk-line);
  color: var(--dk-ink-2); font: 600 11px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row__t { font: 500 14px/1.35 var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row__s { margin: 0; font: 400 13px/1.4 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row__pin { color: var(--dk-ok); }

/* stage: a quiet pill, its colour only in the dot */
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row .tag {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
  border-radius: 99px; background: transparent; border: 1px solid var(--dk-line-2); color: var(--dk-ink-2);
  font: 600 11px/1 var(--dk-font); letter-spacing: .04em;
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dk-muted); flex: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row .tag--won::before,
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row .tag--approved::before { background: var(--dk-ok); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row .tag--lost::before { background: var(--dk-faint); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row .tag--awaiting::before { background: var(--dk-warn); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row .tag--rejected::before { background: var(--dk-err); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row .tag--lost { color: var(--dk-muted); }

/* delete: grey, red only when pointed at or focused */
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row-del {
  inset-inline-end: 12px; width: 32px; height: 32px; border-radius: 6px; background: transparent; border: 0; color: var(--dk-faint);
  transition: background-color .15s var(--dk-ease), color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row-del svg { width: 16px; height: 16px; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row-del:hover,
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row-del:focus-visible { background: var(--dk-err-wash); color: var(--dk-err); border: 0; outline: 0; }

/* selecting several */
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row-chk { inset-inline-start: 16px; width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--dk-line-2); background: transparent; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row-w.is-picked .row-chk { background: var(--dk-ink); border-color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row-w.is-picked .row-chk::after { width: 4px; height: 8px; border-color: var(--dk-card); border-width: 0 2px 2px 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .row-w.is-picked > .row { background: var(--dk-raised); border: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .acsel {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 12px;
  background: var(--dk-raised); border: 1px solid var(--dk-line); border-radius: 10px; box-shadow: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .acsel__n { margin-inline-end: auto; font: 600 13px/1 var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .acsel__b { width: auto; min-height: 32px; height: 32px; padding: 0 12px; border-radius: 6px; font: 500 13px/1 var(--dk-font); box-shadow: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .acsel__b.btn--ghost { background: transparent; border: 1px solid var(--dk-line-2); color: var(--dk-ink); }
/* white on #DC2626 is 4.8:1 */
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .acsel__b.btn--danger { background: #DC2626; border: 0; color: #FFFFFF; }

:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .empty {
  padding: 48px 24px; background: var(--dk-card); border: 1px dashed var(--dk-line-2); border-radius: 14px;
  font: 400 14px/1.6 var(--dk-font); color: var(--dk-muted);
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .empty b { color: var(--dk-ink); font-weight: 600; }
}
@media (min-width: 1024px) {
  :root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) { padding-inline: max(32px, calc((100% - 1480px) / 2)); }
}
/* a narrow tablet: narrower columns */
@media (min-width: 768px) and (max-width: 900px) {
  :root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) .rows { --acc-cols: 32px minmax(0, 1fr) minmax(0, .9fr) 108px; }
}

/* Each name and place reads in its own direction, so "Delta Steel Rolling Co." keeps its full stop at the end in an Arabic list. */
@media (min-width: 768px) {
  :root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) :is(.row__t, .row__s) { unicode-bidi: plaintext; text-align: left; }
  :root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .acct-bar) :is(.row__t, .row__s) { text-align: right; }   /* the column's side, whatever the name's script */
}

/* ══ ORDERS (v4.251) ══════════════════════════════════════════════════════════
   The Orders view of Live Orders (the one with the Awaiting / Decided switch,
   [data-loorders]); since v4.261 the same rules dress Pricing, Top Products and the Smart Advisor's header ([data-lov]); the rest keep their look until their
   turn. No orange here: no primary action on this screen (New order lives on
   Home). The header's buttons are quiet, the switch is a neutral segmented
   control, the three figures are plain cards, the table is Inter with tabular
   figures. Waiting keeps its meaning in colour: 30+ days amber text, 60+ days
   a red tinted pill with its dot and a thin red edge on the row (v4.152's rules,
   orders-tab.html). Rows keep their 7px padding (the user's v4.152 brief). */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) {
  --ord-ok: var(--dk-ok-ink);
  font-family: var(--dk-font); gap: 20px; padding: 28px 24px 48px;
}
@media (min-width: 1024px) { :root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) { padding: 28px max(32px, calc((100% - 1480px) / 2)) 48px; } }

/* header */
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-head h1 { font: 650 28px/1.15 var(--dk-font); letter-spacing: -.022em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-head p { font: 400 14px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-back {
  height: 28px; padding: 0 8px 0 4px; gap: 4px; border: 0; border-radius: 6px; background: transparent; box-shadow: none;
  color: var(--dk-muted); font: 500 13px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-back:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-back svg { width: 16px; height: 16px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-head__acts { gap: 8px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-pill {
  height: 34px; padding: 0 12px; gap: 7px; border-radius: 6px; background: var(--dk-card); border: 1px solid var(--dk-line-2); box-shadow: none;
  color: var(--dk-ink); font: 500 13px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-pill svg { width: 15px; height: 15px; color: var(--dk-muted); stroke: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-pill--btn:hover { background: var(--dk-hover); border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-round {
  width: 34px; height: 34px; border-radius: 6px; background: var(--dk-card); border: 1px solid var(--dk-line-2); box-shadow: none; color: var(--dk-ink-2);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-round svg { width: 16px; height: 16px; stroke: currentColor; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-round:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) :is(.lo-pill--btn, .lo-round, .lo-back):focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }

/* Awaiting / Decided: a segmented control the width of its words */
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-seg {
  align-self: flex-start; width: auto; display: inline-flex; gap: 2px; padding: 3px;
  background: var(--dk-raised); border: 0; border-radius: 8px; box-shadow: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-seg__b {
  flex: none; height: 30px; padding: 0 12px; gap: 8px; border-radius: 6px; background: transparent; box-shadow: none;
  color: var(--dk-muted); font: 500 13px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-seg__b:hover { color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-seg__b.is-on { background: var(--dk-card); color: var(--dk-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-seg__b em {
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center;
  background: var(--dk-line); color: var(--dk-ink-2); font: 600 11px/1 var(--dk-font); font-style: normal; font-variant-numeric: tabular-nums;
}

/* the three figures */
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo__kpis { gap: 16px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-kpi,
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-kpi--hero {
  padding: 18px 20px; gap: 10px; min-height: 0; background: var(--dk-card); background-image: none;
  border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none; transform: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-kpi::before { display: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-kpi__ico,
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-kpi--hero .lo-kpi__ico {
  width: 28px; height: 28px; border-radius: 6px; background: var(--dk-raised); color: var(--dk-muted);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-kpi__ico svg { width: 15px; height: 15px; stroke: currentColor; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-kpi h2 { font: 500 13px/1.3 var(--dk-font); letter-spacing: 0; color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-kpi__v { font: 650 32px/1.05 var(--dk-font); letter-spacing: -.025em; color: var(--dk-ink); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-kpi__v small,
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-kpi--hero .lo-kpi__v small { font: 500 14px/1 var(--dk-font); letter-spacing: 0; color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-kpi__foot { display: none; }

/* the list panel */
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-card {
  padding: 18px 20px; background: var(--dk-card); background-image: none; border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-card::before { display: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-card__h h2 { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-sel { padding: 0; border: 0; background: transparent; color: var(--dk-faint); font: 400 12px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-bar { gap: 8px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-search {
  min-height: 36px; height: 36px; padding: 0 10px; gap: 8px; border-radius: 6px; background: var(--dk-bg); border: 1px solid var(--dk-line-2);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-search:focus-within { border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-search svg { width: 16px; height: 16px; stroke: var(--dk-faint); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-search input { color: var(--dk-ink); font: 400 14px/1 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-search input::placeholder { color: var(--dk-faint); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-sort select {
  height: 36px; min-height: 36px; padding-block: 0; padding-inline: 12px 30px; border-radius: 6px;
  background-color: var(--dk-bg); border: 1px solid var(--dk-line-2); color: var(--dk-ink); font: 500 13px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-chips { gap: 6px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-chip {
  min-height: 28px; height: 28px; padding: 0 11px; border-radius: 99px; background: transparent; border: 1px solid var(--dk-line-2);
  color: var(--dk-muted); font: 500 12px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-chip:hover { color: var(--dk-ink); background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-chip.is-on { background: var(--dk-raised); border-color: var(--dk-ink-2); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-count { font: 400 12px/1.4 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-clear { color: var(--dk-accent-ink); font: 500 12px/1 var(--dk-font); }

/* the table */
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-tblwrap { margin: 0 -20px -18px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-tbl { font: 400 13.5px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-tbl thead th {
  padding-block: 9px; border-bottom: 1px solid var(--dk-line); border-top: 1px solid var(--dk-line); background: transparent;
  font: 600 11px/1.2 var(--dk-font); letter-spacing: .06em; text-transform: uppercase; color: var(--dk-faint);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-tbl :is(th, td):first-child { padding-inline-start: 20px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-tbl :is(th, td):last-child { padding-inline-end: 16px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-tbl tbody tr,
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-tbl tbody tr:nth-child(even) { background: transparent; cursor: pointer; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-tbl tbody td {
  border-bottom: 1px solid var(--dk-line); border-radius: 0; color: var(--dk-ink-2); background: transparent;
  transition: background-color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-tbl tbody tr:last-child td { border-bottom: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-tbl tbody tr:hover td { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-tbl tbody tr:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: -2px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-tbl tbody td:first-child { color: var(--dk-ink); font-weight: 500; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-tbl .is-num { font-family: var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-row--2 td:first-child { box-shadow: inset 2px 0 0 var(--dk-warn); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-row--3 td:first-child { box-shadow: inset 2px 0 0 var(--dk-err); }
:root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-row--2 td:first-child { box-shadow: inset -2px 0 0 var(--dk-warn); }
:root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-row--3 td:first-child { box-shadow: inset -2px 0 0 var(--dk-err); }

/* waiting: plain under 30 days, amber from 30, a red pill with its dot from 60 */
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-age {
  padding: 2px 8px; border: 1px solid transparent; border-radius: 99px; background: transparent;
  color: var(--dk-ink-2); font: 500 13px/1.3 var(--dk-font); font-variant-numeric: tabular-nums;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-age small { font-size: 11px; color: inherit; opacity: .8; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-age--2 { color: var(--dk-warn-ink); font-weight: 600; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-age--3 {
  color: var(--dk-err); background: var(--dk-err-wash); border-color: color-mix(in srgb, var(--dk-err) 40%, transparent); font-weight: 600; font-size: 13px;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-age__dot { background: var(--dk-err); box-shadow: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-next { font: 500 13px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-next--calm { color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-next--warm { color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-next--hot { color: var(--dk-err); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-next--good { color: var(--dk-ok-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .ord-chev { color: var(--dk-faint); }

/* decided: the status as a quiet pill with a coloured dot */
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 99px;
  background: transparent; border: 1px solid var(--dk-line-2); color: var(--dk-ink-2); font: 500 12px/1 var(--dk-font); letter-spacing: 0; text-transform: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-chip--approved::before { background: var(--dk-ok); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-chip--awaiting::before { background: var(--dk-warn); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-chip--rejected::before { background: var(--dk-err); }

/* Need help, and the price-approval panel under the orders */
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-addoffer {
  width: auto; min-height: 28px; height: 28px; padding: 0 10px; border-radius: 6px; box-shadow: none;
  background: transparent; border: 1px solid var(--dk-line-2); color: var(--dk-ink); font: 500 12px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-addoffer:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-used { color: var(--dk-muted); font: 400 12px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-empty { color: var(--dk-muted); font: 400 14px/1.6 var(--dk-font); }
}

/* A client name reads in its own direction (a Latin name keeps its full stop at the end in Arabic) and sits on its column's side. */
@media (min-width: 768px) {
  :root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-tbl tbody td:is(:first-child, .ord-prod) { unicode-bidi: plaintext; text-align: left; }
  :root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is(:has([data-loorders]), [data-lov="offers"], [data-lov="products"], [data-lov="advisor"], [data-lov="stock"]) .lo-tbl tbody td:is(:first-child, .ord-prod) { text-align: right; }
}

/* ══ THE CLIENT PANEL (v4.252) ════════════════════════════════════════════════
   What opens when a client is clicked (#sheet holding #acDetails). From 768px
   it is a drawer from the inline end, full height, with a close button: the
   list stays in view beside it. Order again is its one primary; Call, Edit,
   Need help, Log fluid sample and Done are quiet; Delete is red text. Sections
   are separated by hairlines instead of boxes; the details are a two-column
   list of label over value. Other sheets (products, orders...) are untouched
   until their turn. A phone keeps the bottom sheet as it was. */
.sheet__x { display: none; }

@media (min-width: 768px) {
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .sheet__scrim { background: rgba(0, 0, 0, .45); backdrop-filter: none; -webkit-backdrop-filter: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .sheet__body {
  inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; left: auto; right: 0; transform: none;
  width: min(560px, 100%); max-width: none; height: 100%; max-height: none;
  padding: 24px 28px 32px; border: 0; border-inline-start: 1px solid var(--dk-line); border-radius: 0;
  background: var(--dk-card); box-shadow: var(--dk-shadow-pop); color: var(--dk-ink); font-family: var(--dk-font);
  scrollbar-width: thin; scrollbar-color: var(--dk-line-2) transparent;
  animation: dk-drawer .2s var(--dk-ease) both;
}
:root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .sheet__body { left: 0; right: auto; animation-name: dk-drawer-rtl; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .sheet__grip { display: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .sheet__x {
  display: grid; place-items: center; position: absolute; top: 18px; inset-inline-end: 18px; width: 32px; height: 32px;
  border: 0; border-radius: 6px; background: transparent; color: var(--dk-muted); cursor: pointer;
  transition: background-color .15s var(--dk-ease), color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .sheet__x:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .sheet__x:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .sheet__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* the head: place, name, tags, actions */
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .kicker { margin: 0 44px 6px 0; font: 600 11px/1.3 var(--dk-font); letter-spacing: .06em; text-transform: uppercase; color: var(--dk-muted); }
:root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .kicker { margin: 0 0 6px 44px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-title { margin: 0 0 10px; font: 650 22px/1.25 var(--dk-font); letter-spacing: -.02em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-tags { gap: 6px; margin: 0 0 18px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-tags .tag {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 99px;
  background: transparent; border: 1px solid var(--dk-line-2); color: var(--dk-ink-2); font: 600 11px/1 var(--dk-font); letter-spacing: .04em;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-tags .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-tags :is(.tag--won, .tag--approved)::before { background: var(--dk-ok); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-tags .tag--awaiting::before { background: var(--dk-warn); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-tags .tag--rejected::before { background: var(--dk-err); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-tags .tag--vip::before { background: var(--dk-accent); }

/* buttons inside the panel: quiet by default, one primary */
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .btn {
  width: auto; min-height: 36px; height: auto; padding: 8px 14px; gap: 8px; border-radius: 6px; box-shadow: none; filter: none;
  background: var(--dk-card); border: 1px solid var(--dk-line-2); color: var(--dk-ink);
  font: 500 13px/1.2 var(--dk-font); letter-spacing: 0; transition: background-color .15s var(--dk-ease), filter .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .btn:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .btn:active { transform: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .btn:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) :is([data-reorder], [data-acc-save], [data-ac-saveedit]).btn--primary {
  background: var(--dk-accent); border-color: transparent; color: var(--dk-on-accent); font-weight: 600;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) :is([data-reorder], [data-acc-save], [data-ac-saveedit]).btn--primary:hover { filter: brightness(1.08); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-acts { gap: 8px; margin: 0 0 4px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-acts .btn { flex: 0 0 auto; min-height: 36px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-acts .btn--primary { flex: 0 0 auto; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .loc__main { justify-content: flex-start; width: 100%; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .loc__main .loc__ico { color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .loc__ico svg { width: 16px; height: 16px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .btn--danger {
  width: 100%; background: transparent; border-color: transparent; color: var(--dk-err); margin-top: 6px !important;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .btn--danger:hover { background: var(--dk-err-wash); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) #accBar { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) #accBar .btn { width: 100%; margin: 0 !important; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .acc-dirty { margin: 0; font: 500 13px/1.4 var(--dk-font); color: var(--dk-warn-ink); }

/* sections: a hairline between, a plain heading */
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .pset {
  gap: 12px; margin: 0; padding: 20px 0; background: transparent; border: 0; border-top: 1px solid var(--dk-line); border-radius: 0; box-shadow: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .pset__h { font: 600 14px/1.3 var(--dk-font); letter-spacing: -.005em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .pset__hint,
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .loc__hint { font: 400 12px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .pset__link { color: var(--dk-accent-ink); font-weight: 500; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-mini { min-height: 30px; padding: 0 10px; }

/* details: label over value, two columns, hairlines, no boxes */
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-grid { gap: 0 24px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-f { padding: 10px 0; background: transparent; border-radius: 0; border-bottom: 1px solid var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-f dt { margin: 0 0 2px; font: 500 12px/1.3 var(--dk-font); letter-spacing: 0; color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-f dd { font: 400 14px/1.45 var(--dk-font); color: var(--dk-ink); unicode-bidi: plaintext; text-align: start; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-f dd .muted { color: var(--dk-faint); font-size: 13px; }

/* order history: hairline rows; each row's own Order again is quiet */
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ach-list { gap: 0; border: 1px solid var(--dk-line); border-radius: 10px; overflow: hidden; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ach { gap: 0; border-bottom: 1px solid var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ach:last-child { border-bottom: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ach__main { padding: 10px 12px; background: transparent; border: 0; border-radius: 0; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ach__main:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ach__k { font: 600 11px/1.3 var(--dk-font); letter-spacing: .04em; text-transform: uppercase; color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ach__d,
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ach__s { font: 400 12px/1.4 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ach__t { font: 400 13.5px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ach__v { font: 600 13.5px/1.4 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ach__re {
  width: 84px; border: 0; border-inline-start: 1px solid var(--dk-line); border-radius: 0; background: transparent;
  color: var(--dk-ink-2); font: 500 12px/1.2 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ach__re:hover { background: var(--dk-hover); color: var(--dk-ink); }

/* the current order: a neutral segmented control and slim fields */
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .pset__seg { gap: 2px; padding: 3px; background: var(--dk-raised); border-radius: 8px; align-self: flex-start; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .pset__opt {
  min-height: 30px; height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; box-shadow: none;
  color: var(--dk-muted); font: 500 13px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .pset__opt:hover { color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .pset__opt.is-on { background: var(--dk-card); color: var(--dk-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .label { margin-top: 2px; font: 500 13px/1.3 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .label .muted { color: var(--dk-faint); font-weight: 400; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .input {
  min-height: 36px; height: 36px; padding: 0 12px; border-radius: 6px; background: var(--dk-bg); border: 1px solid var(--dk-line-2);
  color: var(--dk-ink); font: 400 14px/1 var(--dk-font); box-shadow: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .input--area { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.5; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .input:focus { border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); outline: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .input-unit { color: var(--dk-muted); font: 500 12px/1 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .mnote { background: var(--dk-raised); border-inline-start-color: var(--dk-line-2); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .loc__ok,
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .loc__warn { background: var(--dk-raised); border: 1px solid var(--dk-line); border-radius: 10px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .loc__ok small { font-family: var(--dk-font); font-variant-numeric: tabular-nums; }
}
@keyframes dk-drawer { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dk-drawer-rtl { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* the panel, continued: the light theme's inset hairlines (light-surfaces.css) are boxes this design does not have; in Arabic the name and the values sit on their column's side whatever their script */
@media (min-width: 768px) {
  :root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) :is(.ac-f, .pset, .ach__main, .ach__re, .ac-tags .tag) { box-shadow: none; }
  :root:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-title { unicode-bidi: plaintext; text-align: left; margin-inline-end: 44px; }
  :root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-title,
  :root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) .sheet:has(#acDetails) .ac-f dd { text-align: right; }
}

/* ══ SHARED STATES (v4.253, the user's review of Home, Accounts and Orders) ════
   One place for what every redesigned screen shares, so the next screens get it
   by adding their selectors here, not by restyling:
     SELECTED   a segment or tab: the card surface, ink text and a 2px brand
                orange UNDERLINE; a chip, toggle or picked day: the raised
                surface, ink text and a brand orange BORDER. The one small brand
                touch every screen keeps.
     FIGURES    tabular-nums wherever digits sit in a column or a stat, so they
                line up (set after the component rules: their font shorthand
                resets it).
     REFRESH    one, the top bar's: a screen's own refresh (Live Orders) is
                hidden from 768px.
   Three ids in the prefix so these win over the per-screen rules above. */
@media (min-width: 768px) {
:root:not(#z):not(#y):not(#x) body.desk-calm {
  --dk-sel-line: var(--dk-accent);
}

/* selected: segments and tabs */
:root:not(#z):not(#y):not(#x) body.desk-calm :is(
  .ps-period[aria-pressed="true"], .fu-view[aria-pressed="true"], .fu-tab[aria-selected="true"],
  .lo-seg__b.is-on, .pset__opt.is-on, .seg__b.is-on,
  .md-tab.is-on, :is(.mc-seg, .dv-seg, .al-seg, .cf-seg, .tm-seg, .cal-seg) button[aria-pressed="true"], .mh-tabbtn.is-on, :is(.sf-seg, .tr-seg) button[aria-pressed="true"]
) {
  background: var(--dk-card); color: var(--dk-ink);
  box-shadow: inset 0 -2px 0 var(--dk-sel-line), 0 1px 2px rgba(0, 0, 0, .25);
}

/* selected: chips, toggles, a picked day, a picked status row */
:root:not(#z):not(#y):not(#x) body.desk-calm :is(
  .ord-chip.is-on, .acct-add.btn--outline[aria-pressed="true"], .fu-chip[aria-pressed="true"],
  .fu-day[aria-pressed="true"], .ps-row[aria-pressed="true"], .chip.is-on, .qt-chip.is-on, .rx-chip.is-on,
  .tm-toggle[aria-pressed="true"], .cal-rep[aria-pressed="true"], .mh-tile.is-on
) {
  background: var(--dk-raised); color: var(--dk-ink); border: 1px solid var(--dk-sel-line); box-shadow: none;
}
/* the picked day keeps its dots' meaning (they turned to the pressed ink before) */
:root:not(#z):not(#y):not(#x) body.desk-calm .fu-day[aria-pressed="true"] .fu-dots i { background: var(--dk-accent-ink); }
:root:not(#z):not(#y):not(#x) body.desk-calm .fu-day[aria-pressed="true"] .fu-dots i.is-done { background: var(--dk-ok); }
:root:not(#z):not(#y):not(#x) body.desk-calm .fu-day[aria-pressed="true"] .fu-dots i.is-late { background: var(--dk-err); }

/* figures line up */
:root:not(#z):not(#y):not(#x) body.desk-calm :is(
  td, th, .is-num, input,
  .dh-val, .dh-pct b, .dh-pmark b, .dh-l0, .dh-l1 b, .dh-mini__t b, .dh-mo em,
  .today__m b, .today__c b,
  .ps-center-v, .ps-row-val strong, .ps-row-val small, .ps-earn-v, .ps-rate b, .ps-scale, .ps-sub,
  .fu-day, .fu-tab, .fu-time,
  .lo-kpi__v, .lo-seg__b em, .ord-age, .ord-count,
  .acct-head__n, .row__s, .ac-f dd, .ach__v, .ach__d,
  .navitem__badge, .bell__count, .chip em, .tag
) { font-variant-numeric: tabular-nums; }

/* one refresh: the top bar's */
:root:not(#z):not(#y):not(#x) body.desk-calm #loRefresh { display: none; }

/* contrast (WCAG AA, measured): the "d" after a waiting time was drawn at 80% and fell to 4.2:1 (3.5:1 light) */
:root:not(#z):not(#y):not(#x) body.desk-calm .ord-age small { opacity: 1; }
}
/* contrast, light theme: error text #DC2626 on its own tint was 4.4:1, now #B91C1C (6.5:1 on white, 5.9:1 on the tint);
   the faint grey #6B7280 was 4.4:1 on the raised #F4F4F5, now #646A76 (4.9:1 there, 5.4:1 on white) */
@media (min-width: 768px) {
  :root[data-scheme="light"]:not(#z) body.desk-calm { --dk-err: #B91C1C; --dk-faint: #646A76; }
}

/* A decision (Approved / Awaiting / Rejected) reads in its status colour as well as its dot, so the two outcomes differ at a glance (proposal-status.html); a stage (OFFER, TRIAL...) stays neutral. All measured AA in both themes. */
@media (min-width: 768px) {
  :root:not(#z):not(#y):not(#x) body.desk-calm :is(.lo-chip--approved, .tag.tag--approved) { color: var(--dk-ok-ink); }
  :root:not(#z):not(#y):not(#x) body.desk-calm :is(.lo-chip--awaiting, .tag.tag--awaiting) { color: var(--dk-warn-ink); }
  :root:not(#z):not(#y):not(#x) body.desk-calm :is(.lo-chip--rejected, .tag.tag--rejected) { color: var(--dk-err); }
}

/* ══ PRODUCTS (v4.254) ════════════════════════════════════════════════════════
   The catalogue (#main holding #catChips): a title with the count, a slim
   search, By type / By industry as a segment, the documents toggle and the
   family chips as quiet chips that WRAP (they scrolled sideways and were cut at
   the edge), and the products as a grid of plain cards (two columns, three from
   1280px) with the pack picture, the name, the family and every grade (v4.240:
   never cut), the document badges and the grade count neutral. Selected
   segment and chip come from SHARED STATES. No primary action on this screen,
   so no orange. */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) {
  gap: 16px; padding: 28px max(24px, calc((100% - 1480px) / 2)) 48px;
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) > * { max-width: none; margin-inline: 0; width: auto; }

:root:not(#z) body.desk-calm:not(.is-mgr) #catQ {
  height: 36px; min-height: 36px; border-radius: 6px; padding-block: 0; padding-inline: 34px 12px;
  background: var(--dk-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat left 11px center / 16px 16px;
  border: 1px solid var(--dk-line-2); color: var(--dk-ink); font: 400 14px/1 var(--dk-font);
  transition: border-color .15s var(--dk-ease), box-shadow .15s var(--dk-ease);
}
:root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) #catQ { background-position: right 11px center; }
:root:not(#z) body.desk-calm:not(.is-mgr) #catQ::placeholder { color: var(--dk-faint); }
:root:not(#z) body.desk-calm:not(.is-mgr) #catQ:focus { outline: 0; border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); }

/* By type / By industry, and the documents toggle */
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .catbar { margin: 0; gap: 8px; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .seg {
  display: inline-flex; gap: 2px; padding: 3px; background: var(--dk-raised); border: 0; border-radius: 8px; box-shadow: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .seg__b {
  height: 30px; min-height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; box-shadow: none;
  color: var(--dk-muted); font: 500 13px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .seg__b:hover { color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) :is(.seg__b, .chip):focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }

/* the chips: quiet, and they wrap */
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .chips {
  flex-wrap: wrap; overflow: visible; gap: 6px; padding: 0; margin: 0; -webkit-mask-image: none; mask-image: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .chip {
  height: 30px; min-height: 30px; padding: 0 12px; gap: 6px; border-radius: 99px; background: transparent;
  border: 1px solid var(--dk-line-2); color: var(--dk-ink-2); box-shadow: none; font: 500 13px/1 var(--dk-font);
  transition: background-color .15s var(--dk-ease), color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .chip:hover:not(:disabled) { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .chip em,
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .chip.is-on em {
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center;
  background: var(--dk-line); color: var(--dk-ink-2); font: 600 11px/1 var(--dk-font); font-style: normal;
}

/* the products: a grid of plain cards */
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .row--pack {
  grid-template-columns: 48px minmax(0, 1fr) auto; align-items: start; column-gap: 14px; min-height: 0;
  padding: 14px 16px; background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 12px;
  box-shadow: none; transform: none; transition: background-color .15s var(--dk-ease), border-color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .row--pack:hover { background: var(--dk-hover); border-color: var(--dk-line-2); box-shadow: none; transform: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .row--pack:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .row__pack { width: 48px; height: 52px; border-radius: 8px; background: var(--dk-raised); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .row__pack img { height: 40px; max-width: 36px; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .row__t { font: 600 14px/1.35 var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .row__s { margin-top: 3px; font: 400 13px/1.45 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .row__docs { margin-top: 8px; gap: 4px; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .row__doc {
  height: 20px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 4px;
  background: transparent; border: 1px solid var(--dk-line-2); color: var(--dk-ink-2); font: 600 10.5px/1 var(--dk-font); letter-spacing: .04em;
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .row--pack .tag {
  align-self: start; height: 22px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 99px;
  background: transparent; border: 1px solid var(--dk-line-2); color: var(--dk-ink-2); font: 500 12px/1 var(--dk-font); letter-spacing: 0; white-space: nowrap;
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .empty {
  grid-column: 1 / -1; padding: 48px 24px; background: var(--dk-card); border: 1px dashed var(--dk-line-2); border-radius: 14px;
  font: 400 14px/1.6 var(--dk-font); color: var(--dk-muted);
}
}
@media (min-width: 1024px) {
  :root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) { padding-inline: max(32px, calc((100% - 1480px) / 2)); }
}
@media (min-width: 1280px) {
  :root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* a name and its grades read in their own direction and sit on the card's side */
@media (min-width: 768px) {
  :root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .row__t { unicode-bidi: plaintext; text-align: left; }   /* the name only: a family + grades line keeps the default (plaintext jumbled its ISO VG list in Arabic) */
  :root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) #main:has(> #catChips) .row__t { text-align: right; }
}

/* ══ QUOTATIONS (v4.255) ══════════════════════════════════════════════════════
   The Quotations view (.qt): the full width instead of a 760px column; the
   title on the left, Price calculator (quiet) and Create Quotation (the one
   primary, compact, its "Continue your draft" line kept when there is a draft)
   on the right; the history as a heading, the search and the period chips on
   one row; every quotation one row of a single card (number, customer, date and
   total, status, PDF, actions) under column headings. The title's own search
   button and the search box's "tune" icon are gone from 768px: the box is the
   search. Selected chip from SHARED STATES. */
.qt-thead { display: none; }

@media (min-width: 768px) {
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.qt) {
  font-family: var(--dk-font); gap: 12px; padding: 28px 24px 48px;
}
@media (min-width: 1024px) { :root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.qt) { padding: 28px max(32px, calc((100% - 1480px) / 2)) 48px; } }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.qt) .lo-back {
  height: 28px; padding: 0 8px 0 4px; gap: 4px; border: 0; border-radius: 6px; background: transparent; box-shadow: none;
  color: var(--dk-muted); font: 500 13px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.qt) .lo-back:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.qt) .lo-back svg { width: 16px; height: 16px; }

:root:not(#z) body.desk-calm:not(.is-mgr) .qt {
  max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; row-gap: 16px; align-items: center;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .qt > * { grid-column: 1 / -1; min-width: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-head { grid-column: 1; grid-row: 1; gap: 4px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-calc { grid-column: 2; grid-row: 1; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-create { grid-column: 3; grid-row: 1; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-eyebrow { font: 600 11px/1.3 var(--dk-font); letter-spacing: .06em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-titlerow h1 { font: 650 28px/1.15 var(--dk-font); letter-spacing: -.022em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-iconbtn { display: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-sub { font: 400 14px/1.5 var(--dk-font); color: var(--dk-muted); }

/* Price calculator: a quiet button; Create Quotation: the one primary */
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-calc {
  height: 36px; padding: 0 14px; border-radius: 6px; background: var(--dk-card); border: 1px solid var(--dk-line-2);
  color: var(--dk-ink); font: 500 13px/1 var(--dk-font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-calc:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-create {
  width: auto; min-height: 36px; padding: 0 14px 0 10px; gap: 8px; border: 0; border-radius: 6px; box-shadow: none;
  background: var(--dk-accent); color: var(--dk-on-accent); transition: filter .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-create:hover { filter: brightness(1.08); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-create:active { transform: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-create__ic { width: 20px; height: 20px; border: 0; border-radius: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-create__ic svg { width: 18px; height: 18px; stroke-width: 2.4; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-create__t { gap: 1px; padding-block: 6px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-create__t b { font: 600 13px/1.2 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-create__t small { display: none; font: 500 11px/1.2 var(--dk-font); opacity: .8; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-create.is-draft .qt-create__t small { display: block; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-create > svg:last-child { display: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.qt-calc, .qt-create, .qt-chip, .qt-act):focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }

/* the history: a heading, then search and periods on one row */
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-hist { margin-top: 8px; padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-kick { margin: 0 0 4px; font: 600 11px/1.3 var(--dk-font); letter-spacing: .06em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-hist h2 { margin: 0 0 2px; font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-hist p:last-child { font: 400 13px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-search {
  grid-column: 1 / 3; min-height: 36px; height: 36px; padding: 0 10px; gap: 8px; border-radius: 6px;
  background: var(--dk-card); border: 1px solid var(--dk-line-2); box-shadow: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-search:focus-within { border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-search svg { width: 16px; height: 16px; color: var(--dk-faint); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-search input { color: var(--dk-ink); font: 400 14px/1 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-search input::placeholder { color: var(--dk-faint); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-tune { display: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-chips { grid-column: 3; gap: 6px; flex-wrap: nowrap; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-chip {
  min-height: 30px; height: 30px; padding: 0 12px; border-radius: 99px; background: transparent; border: 1px solid var(--dk-line-2);
  color: var(--dk-ink-2); font: 500 13px/1 var(--dk-font); box-shadow: none; white-space: nowrap;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-chip:hover { background: var(--dk-hover); color: var(--dk-ink); }

/* the list: one card, one row per quotation */
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-list {
  --qt-cols: 32px minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.1fr) 104px 112px 36px 36px;
  gap: 0; background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 14px; overflow: hidden;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-list:has(> .qt-empty) { background: transparent; border: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-thead {
  display: grid; grid-template-columns: var(--qt-cols); column-gap: 14px; align-items: center; min-height: 38px; padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--dk-line); font: 600 11px/1.2 var(--dk-font); letter-spacing: .06em; text-transform: uppercase; color: var(--dk-faint);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-card {
  display: grid; grid-template-columns: var(--qt-cols); column-gap: 14px; align-items: center; min-height: 56px; padding: 8px 12px 8px 16px;
  background: transparent; border: 0; border-bottom: 1px solid var(--dk-line); border-radius: 0; box-shadow: none;
  transition: background-color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-card:last-child { border-bottom: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-card:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.qt-card__top, .qt-card__main, .qt-card__foot) { display: contents; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--dk-raised); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-ic svg { width: 16px; height: 16px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-no { font: 600 13.5px/1.3 var(--dk-font); letter-spacing: 0; color: var(--dk-ink); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-cust { font: 400 14px/1.35 var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-date { font: 400 13px/1.35 var(--dk-font); color: var(--dk-muted); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-amt { color: var(--dk-ink); font-weight: 500; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-badge {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 99px;
  background: transparent; border: 1px solid var(--dk-line-2); color: var(--dk-ink-2); font: 500 12px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dk-ok); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-pdf { gap: 6px; font: 500 13px/1.3 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-pdf svg { width: 16px; height: 16px; color: var(--dk-ok); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-act { width: 32px; height: 32px; border-radius: 6px; background: transparent; color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-act:hover { background: var(--dk-raised); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-act svg { width: 16px; height: 16px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-act .qt-chev { color: inherit; }
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-empty {
  padding: 48px 24px; text-align: center; background: var(--dk-card); border: 1px dashed var(--dk-line-2); border-radius: 14px;
  font: 400 14px/1.6 var(--dk-font); color: var(--dk-muted);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-empty b { color: var(--dk-ink); font-weight: 600; }
/* a name keeps its own direction and the column's side */
:root:not(#z) body.desk-calm:not(.is-mgr) .qt-cust { unicode-bidi: plaintext; text-align: left; }
:root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) .qt-cust { text-align: right; }
}
/* a narrow tablet: the PDF state column goes (its download button stays) */
@media (min-width: 768px) and (max-width: 1023px) {
  :root:not(#z) body.desk-calm:not(.is-mgr) .qt-list { --qt-cols: 32px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) 96px 0 36px 36px; }
  :root:not(#z) body.desk-calm:not(.is-mgr) .qt-pdf { display: none; }
  :root:not(#z) body.desk-calm:not(.is-mgr) .qt { grid-template-columns: minmax(0, 1fr) auto; }
  :root:not(#z) body.desk-calm:not(.is-mgr) .qt-calc { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  :root:not(#z) body.desk-calm:not(.is-mgr) .qt-create { grid-column: 2; }
  :root:not(#z) body.desk-calm:not(.is-mgr) .qt-search { grid-column: 1; }
  :root:not(#z) body.desk-calm:not(.is-mgr) .qt-chips { grid-column: 2; }
}

/* ══ SALES REPORT (v4.256) ════════════════════════════════════════════════════
   The Sales Report view (.lo__main holding .rp-stats). Its cards take their
   colours from the tone tokens (tones.css / rep-tones.css / warm-skin.css):
   here those tokens are the Graphite surfaces, so every card is one plain
   surface; the icon tiles are neutral (they were orange squares); the first
   figure is no longer highlighted; a month-on-month change reads green up, red
   down, grey when there is no prior month; "Breakdown" is a quiet link; the
   approved series in Customer Habits is the brand orange (the key figure),
   requested stays grey. No primary action here, so no orange button. The ring
   and region charts keep their own colours (data). */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) {
  font-family: var(--dk-font); gap: 16px; padding: 28px 24px 48px;
}
@media (min-width: 1024px) { :root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) { padding: 28px max(32px, calc((100% - 1480px) / 2)) 48px; } }

/* the header, as Orders' */
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .lo-head h1 { font: 650 28px/1.15 var(--dk-font); letter-spacing: -.022em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .lo-head p { font: 400 14px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .rp-date { margin: -8px 0 0; font: 400 13px/1.4 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .lo-back {
  height: 28px; padding: 0 8px 0 4px; gap: 4px; border: 0; border-radius: 6px; background: transparent; box-shadow: none;
  color: var(--dk-muted); font: 500 13px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .lo-back:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .lo-back svg { width: 16px; height: 16px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .lo-head__acts { gap: 8px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .lo-pill {
  height: 34px; padding: 0 12px; gap: 7px; border-radius: 6px; background: var(--dk-card); border: 1px solid var(--dk-line-2); box-shadow: none;
  color: var(--dk-ink); font: 500 13px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .lo-pill svg { width: 15px; height: 15px; color: var(--dk-muted); stroke: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .lo-pill--btn:hover { background: var(--dk-hover); border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) :is(.lo-pill--btn, .lo-back, .rp-stat--act):focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }

/* every card: the Graphite surface through its tone tokens */
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .tone {
  --t-card: var(--dk-card); --t-raised: var(--dk-raised); --t-track: var(--dk-raised);
  --t-line: var(--dk-line); --t-line-2: var(--dk-line-2); --t-ink: var(--dk-ink);
  --t-icon: var(--dk-raised); --t-muted: var(--dk-muted); --t-faint: var(--dk-faint);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) :is(.rp-stat, .rp-stat--hero, .lo-card) {
  background: var(--dk-card); background-image: none; border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none; transform: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) :is(.rp-stat, .lo-card)::before { display: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .rp-stat--act { cursor: pointer; transition: background-color .15s var(--dk-ease), border-color .15s var(--dk-ease); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .rp-stat--act:hover { background: var(--dk-hover); border-color: var(--dk-line-2); box-shadow: none; transform: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .rp-stats,
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .rp-grid { gap: 16px; }

/* the figure cards */
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .rp-stat { padding: 18px 20px; gap: 6px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) :is(.rp-stat__ico, .rp-stat--hero .rp-stat__ico, .lo-card__ico, .tone .rp-stat__ico, .tone .lo-card__ico) {
  width: 28px; height: 28px; border-radius: 6px; background: var(--dk-raised); color: var(--dk-muted); box-shadow: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) :is(.rp-stat__ico, .lo-card__ico) svg { width: 15px; height: 15px; stroke: currentColor; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) :is(.rp-stat__k, .rp-stat--hero .rp-stat__k, .tone .rp-stat__k) { margin-top: 6px; font: 500 13px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .rp-stat__v { font: 650 30px/1.1 var(--dk-font); letter-spacing: -.025em; color: var(--dk-ink); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) :is(.rp-stat__v small, .rp-stat--hero .rp-stat__v small) { font: 500 14px/1 var(--dk-font); letter-spacing: 0; color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) :is(.rp-stat__c, .rp-stat--hero .rp-stat__c) { font: 400 12px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .rp-stat__more { display: block; margin-top: 4px; font: 500 12px/1.4 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) :is(.rp-pill, .rp-stat--hero .rp-pill) {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 99px; background: transparent; border: 1px solid var(--dk-line-2);
  color: var(--dk-muted); font: 600 11px/1 var(--dk-font); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: visible;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .rp-stat .rp-pill.rp-pill--up { color: var(--dk-ok-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .rp-stat .rp-pill.rp-pill--down { color: var(--dk-err); }

/* the panels: plain headings, quiet "Breakdown" and period buttons */
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .lo-card { padding: 18px 20px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) :is(.lo-card__h h2, .rp-h h2, .tone .lo-card__h h2) { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .rp-h p { font: 400 13px/1.4 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) :is(.lo-sel, .rp-more, [data-rp]:not(.rp-stat)) {
  height: 28px; padding: 0 10px; border-radius: 6px; background: transparent; border: 1px solid var(--dk-line-2); box-shadow: none;
  color: var(--dk-ink-2); font: 500 12px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) :is(.lo-sel, .rp-more, [data-rp]:not(.rp-stat)):hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .rp-key li { font: 400 12px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) :is(.rp-plot__y, .rp-col__m) { font: 400 11px/1 var(--dk-font); color: var(--dk-faint); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .rp-plot__grid i { border-top: 1px solid var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) :is(.rp-bar--won, .rp-key__d--won) { background: var(--dk-accent); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) :is(.rp-bar--all, .rp-key__d--all) { background: var(--dk-line-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .rp-bar { border-radius: 3px 3px 1px 1px; }

/* Activity this month: four quiet tiles */
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .rp-acts__i {
  background: transparent; border: 1px solid var(--dk-line); border-radius: 10px; box-shadow: none; transition: background-color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .rp-acts__i:hover { background: var(--dk-hover); }
}
/* a signed change ("−100%") reads left to right in Arabic too, or its minus lands after the number */
@media (min-width: 768px) { :root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:has(.rp-stats) .rp-pill { direction: ltr; unicode-bidi: isolate; } }

/* ══ FOLLOW-UPS (v4.257) ══════════════════════════════════════════════════════
   The Follow-ups page (#fupHost, the same planner as Home's card): the full
   width; the planner's tokens are Graphite, as on Home; New is this screen's
   one primary (on Home it stays quiet: New order is Home's); the reminders
   banner and its button are quiet; a follow-up is a quiet row with a thin red
   edge when it is overdue; its type and pills are neutral with the status in
   the text colour; Inter for the time. Selected day, view and tab come from
   SHARED STATES. */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .fu-page) { padding: 28px 24px 48px; }
@media (min-width: 1024px) { :root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .fu-page) { padding: 28px max(32px, calc((100% - 1480px) / 2)) 48px; } }
:root:not(#z) body.desk-calm:not(.is-mgr) .fu-page { padding: 0; max-width: none; width: auto; margin-inline: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .fu-page > #fupHost { max-width: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu {
  --fu-font: var(--dk-font); --fu-cond: var(--dk-font); --fu-mono: var(--dk-font);
  --fu-card: var(--dk-card); --fu-raised: var(--dk-raised); --fu-sunk: var(--dk-raised);
  --fu-line: var(--dk-line); --fu-line-2: var(--dk-line-2);
  --fu-text: var(--dk-ink); --fu-text-2: var(--dk-ink-2); --fu-muted: var(--dk-muted); --fu-faint: var(--dk-faint);
  --fu-acc: var(--dk-ink); --fu-ink: var(--dk-bg); --fu-red: var(--dk-err); --fu-green: var(--dk-ok);
  max-width: none; font-family: var(--dk-font); background: var(--dk-card); background-image: none;
  border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-title { font: 650 22px/1.2 var(--dk-font); letter-spacing: -.02em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-btn { height: 34px; padding: 0 12px; border-radius: 6px; font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-head-actions .fu-btn--acc { background: var(--dk-accent); color: var(--dk-on-accent); border: 0; font-weight: 600; filter: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-head-actions .fu-btn--acc:hover { filter: brightness(1.08); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost :is(.fu-btn, .fu-day, .fu-view, .fu-tab, .fu-item):focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }

/* the reminders banner: quiet */
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-banner { background: var(--dk-raised); border: 1px solid var(--dk-line); border-radius: 10px; }
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-banner-ic { background: var(--dk-card); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-banner strong { font: 600 14px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-banner p { font: 400 13px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-banner .fu-btn--acc { background: var(--dk-card); color: var(--dk-ink); border: 1px solid var(--dk-line-2); font-weight: 500; filter: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-banner .fu-btn--acc:hover { background: var(--dk-hover); }

/* a follow-up: a quiet row, a thin red edge when overdue */
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-item {
  padding: 14px 16px; border-radius: 10px; background: transparent; border: 1px solid var(--dk-line); box-shadow: none;
  transition: background-color .15s var(--dk-ease), border-color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-item:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-item.is-late { border-color: var(--dk-line); box-shadow: inset 2px 0 0 var(--dk-err); }
:root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-item.is-late { box-shadow: inset -2px 0 0 var(--dk-err); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-time { font: 600 18px/1.1 var(--dk-font); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-cust { font: 600 15px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost :is(.fu-note, .fu-contact) { font: 400 13px/1.45 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-rem { font: 400 12px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-type,
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-type:is(.t-visit, .t-quote, .t-sample, .t-task) {
  height: 22px; padding: 0 7px; border-radius: 4px; background: transparent; border: 1px solid var(--dk-line-2); color: var(--dk-ink-2);
  font: 600 10.5px/1 var(--dk-font); letter-spacing: .04em;
}
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-pill {
  height: 22px; padding: 0 8px; border-radius: 99px; background: transparent; border: 1px solid var(--dk-line-2);
  color: var(--dk-ink-2); font: 600 11px/1 var(--dk-font); letter-spacing: 0; text-transform: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-pill:is(.is-overdue, .is-pri-urgent) { color: var(--dk-err); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-pill:is(.is-due-soon, .is-pri-high) { color: var(--dk-warn-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) #fupHost .fu-pill.is-completed { color: var(--dk-ok-ink); }
}
/* the light theme draws status boxes with a coloured inset line (light-surfaces.css): this page's banner and rows are not status boxes */
@media (min-width: 768px) { :root:not(#z) body.desk-calm:not(.is-mgr) #fupHost :is(.fu-banner, .fu-item:not(.is-late)) { box-shadow: none; } }

/* ══ REQUESTS (v4.258) ════════════════════════════════════════════════════════
   The rep's Requests (.rx): the full width; the title with its search toggle on
   the left and New request as a compact primary on the right (it was a 72px
   glowing banner); the category chips quiet (selected from SHARED STATES); the
   requests as one card of hairline rows: a neutral icon, the title, a neutral
   category tag, one line of the message, when and for whom, the status in its
   colour and the message count. An unread request keeps a thin orange edge.
   The conversation (.rx-panel, .rx-btn) takes the same surfaces. */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .rx) { padding: 28px 24px 48px; }
@media (min-width: 1024px) { :root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .rx) { padding: 28px max(32px, calc((100% - 1480px) / 2)) 48px; } }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(> .rx) > * { max-width: none; margin-inline: 0; width: auto; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx { max-width: none; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 8px; font-family: var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx > * { grid-column: 1 / -1; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx > .rx-head { grid-column: 1; grid-row: 1; align-items: center; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx > .rx-new { grid-column: 2; grid-row: 1; align-self: center; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-head h1 { font: 650 28px/1.15 var(--dk-font); letter-spacing: -.022em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-head p { margin-top: 4px; font: 400 14px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-round {
  width: 34px; height: 34px; border-radius: 6px; background: var(--dk-card); border: 1px solid var(--dk-line-2); box-shadow: none; color: var(--dk-ink-2);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-round:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-round.is-on { border-color: var(--dk-accent); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-round svg { width: 16px; height: 16px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-new {
  width: auto; min-height: 36px; height: 36px; padding: 0 14px 0 10px; gap: 8px; border: 0; border-radius: 6px; box-shadow: none; filter: none;
  background: var(--dk-accent); color: var(--dk-on-accent); font: 600 13px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-new:hover { filter: brightness(1.08); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-new:active { transform: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-new__ic { width: 18px; height: 18px; background: none; border: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-new__ic svg { width: 18px; height: 18px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-new__go { display: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-search {
  min-height: 36px; height: 36px; padding: 0 10px; gap: 8px; border-radius: 6px; background: var(--dk-card); border: 1px solid var(--dk-line-2); box-shadow: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-search:focus-within { border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-search svg { width: 16px; height: 16px; color: var(--dk-faint); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-search input { color: var(--dk-ink); font: 400 14px/1 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-note {
  min-height: 36px; padding: 0 12px; gap: 8px; border-radius: 6px; background: var(--dk-raised); border: 1px solid var(--dk-line); box-shadow: none;
  color: var(--dk-ink); font: 500 13px/1.3 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.rx-round, .rx-new, .rx-chip, .rx-card, .rx-sort, .rx-note, .rx-btn):focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }

/* category chips: quiet */
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-chips { gap: 6px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-chip {
  min-height: 30px; height: 30px; padding: 0 6px 0 10px; gap: 6px; border-radius: 99px; background: transparent; border: 1px solid var(--dk-line-2); box-shadow: none;
  color: var(--dk-ink-2); font: 500 13px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-chip:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-chip svg { width: 14px; height: 14px; color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-chip b,
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-chip.is-on b {
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px; background: var(--dk-line); color: var(--dk-ink-2); font: 600 11px/1 var(--dk-font); font-variant-numeric: tabular-nums;
}

/* the list head and sort */
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-listhead { margin-top: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-listhead h2 { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-sort { font: 400 13px/1 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-sort b { color: var(--dk-ink); font-weight: 500; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-menu { background: var(--dk-card); border: 1px solid var(--dk-line-2); border-radius: 10px; box-shadow: var(--dk-shadow-pop); }

/* the requests: one card of hairline rows */
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-list { gap: 0; background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 14px; overflow: hidden; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-list > li { border-bottom: 1px solid var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-list > li:last-child { border-bottom: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-card {
  grid-template-columns: 32px minmax(0, 1fr) auto 16px; gap: 14px; align-items: center; padding: 12px 16px;
  background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; transition: background-color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-card:hover { background: var(--dk-hover); border: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-card:active { transform: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-card.is-unread { border: 0; box-shadow: inset 2px 0 0 var(--dk-accent); }
:root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) .rx-card.is-unread { box-shadow: inset -2px 0 0 var(--dk-accent); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--dk-raised); color: var(--dk-muted); box-shadow: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-ic svg { width: 16px; height: 16px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-body { gap: 3px; grid-template-columns: auto 1fr; justify-items: start; align-items: center; column-gap: 8px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-body > * { grid-column: 1 / -1; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-title { grid-column: 1; font: 600 14px/1.35 var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-body > .rx-pill { grid-column: 2; grid-row: 1; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-pill {
  padding: 0 7px; height: 20px; display: inline-flex; align-items: center; border-radius: 4px; background: transparent; border: 1px solid var(--dk-line-2);
  color: var(--dk-ink-2); font: 600 10.5px/1 var(--dk-font); letter-spacing: .04em;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-msg { font: 400 13px/1.45 var(--dk-font); color: var(--dk-muted); -webkit-line-clamp: 1; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-when { gap: 6px; font: 400 12px/1.3 var(--dk-font); color: var(--dk-faint); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-when svg { width: 13px; height: 13px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-side { display: flex; align-items: center; gap: 14px; align-self: center; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-count { gap: 5px; font: 500 12px/1 var(--dk-font); color: var(--dk-muted); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-count svg { width: 15px; height: 15px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-go { width: 16px; height: 16px; margin: 0; color: var(--dk-faint); }

/* status: a quiet pill, the status in its colour */
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-st {
  height: 24px; padding: 0 9px; gap: 6px; border-radius: 99px; background: transparent; border: 1px solid var(--dk-line-2);
  color: var(--dk-warn-ink); font: 500 12px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.rx-st--answered, .rx-st--completed, .rx-st--approved) { color: var(--dk-ok-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-st--in_progress { color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-st--closed { color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-st--rejected { color: var(--dk-err); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-dot { background: currentColor; }

:root:not(#z) body.desk-calm:not(.is-mgr) .rx-empty {
  padding: 48px 24px; background: var(--dk-card); border: 1px dashed var(--dk-line-2); border-radius: 14px; font: 400 14px/1.6 var(--dk-font); color: var(--dk-muted);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-empty b { color: var(--dk-ink); font: 600 15px/1.4 var(--dk-font); }

/* the conversation: the same surfaces */
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-panel { background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-dtitle h1 { font: 650 24px/1.2 var(--dk-font); letter-spacing: -.02em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-facts dt { font: 600 11px/1.3 var(--dk-font); letter-spacing: .06em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-facts dd { font: 400 14px/1.45 var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-msgb { background: var(--dk-raised); border: 1px solid var(--dk-line); border-radius: 10px; box-shadow: none; color: var(--dk-ink); font-family: var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-btn {
  min-height: 36px; padding: 0 14px; border-radius: 6px; background: var(--dk-card); border: 1px solid var(--dk-line-2); box-shadow: none;
  color: var(--dk-ink); font: 500 13px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-btn:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-btn--danger { color: var(--dk-err); }
:root:not(#z) body.desk-calm:not(.is-mgr) .rx-send { background: var(--dk-accent); color: var(--dk-on-accent); border: 0; border-radius: 6px; box-shadow: none; }
}
/* the reply box under a conversation */
@media (min-width: 768px) {
  :root:not(#z) body.desk-calm:not(.is-mgr) .rx-compose { background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none; }
  :root:not(#z) body.desk-calm:not(.is-mgr) .rx-compose textarea { background: var(--dk-bg); border: 1px solid var(--dk-line-2); border-radius: 8px; color: var(--dk-ink); font: 400 14px/1.5 var(--dk-font); box-shadow: none; }
  :root:not(#z) body.desk-calm:not(.is-mgr) .rx-compose textarea::placeholder { color: var(--dk-faint); }
  :root:not(#z) body.desk-calm:not(.is-mgr) .rx-compose textarea:focus { outline: 0; border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); }
}

/* ══ LOG FLUID SAMPLE (v4.259) ════════════════════════════════════════════════
   The rep's sample form (.fs-sheet > .fs, sample-log.js): from 768px a drawer
   from the inline end, full height, like the client panel, the page visible
   beside it. Its own tokens (--fs-*) are the Graphite ones: Inter, plain
   surfaces; Save sample is the one primary (orange); Scan asset tag is a quiet
   button (it was a yellow banner); a selected client, fluid or priority keeps
   the shared orange border (--fs-brand is the accent). The phone keeps the
   full-screen sheet as it was. The camera scanner (.fs-scanner) is untouched. */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm:not(.is-mgr) .fs-sheet { background: rgba(0, 0, 0, .45); }
:root:not(#z) body.desk-calm:not(.is-mgr) .fs-sheet > .fs {
  max-width: 560px; margin-inline: auto 0; min-height: 100%;
  border-inline-start: 1px solid var(--dk-line); box-shadow: var(--dk-shadow-pop);
  animation: dk-drawer .2s var(--dk-ease) both;
}
:root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) .fs-sheet > .fs { animation-name: dk-drawer-rtl; }
:root:not(#z) body.desk-calm:not(.is-mgr) .fs {
  --fs-bg: var(--dk-card); --fs-surface: var(--dk-card); --fs-raised: var(--dk-raised); --fs-sunk: var(--dk-bg);
  --fs-line: var(--dk-line); --fs-line-2: var(--dk-line-2); --fs-glass: var(--dk-card); --fs-glass-2: var(--dk-card); --fs-ic-bg: var(--dk-raised);
  --fs-text: var(--dk-ink); --fs-text-2: var(--dk-ink-2); --fs-muted: var(--dk-muted); --fs-placeholder: var(--dk-faint);
  --fs-brand: var(--dk-accent); --fs-brand-ink: var(--dk-on-accent); --fs-brand-text: var(--dk-accent-ink);
  --fs-ok: var(--dk-ok); --fs-ok-text: var(--dk-ok-ink); --fs-amber: var(--dk-warn); --fs-amber-text: var(--dk-warn-ink);
  --fs-crit: var(--dk-err); --fs-crit-text: var(--dk-err); --fs-err: var(--dk-err);
  --fs-font: var(--dk-font); --fs-cond: var(--dk-font); --fs-mono: var(--dk-font);
  --fs-r: 10px;
  font-family: var(--dk-font);
}
/* Scan asset tag: a quiet button, not a banner */
:root:not(#z) body.desk-calm:not(.is-mgr) .fs .fs-btn--scan {
  background: var(--dk-raised); color: var(--dk-ink); border: 1px solid var(--dk-line-2); box-shadow: none; filter: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) .fs .fs-btn--scan:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) .fs .fs-btn--scan :is(svg, .fs-row-ic) { color: var(--dk-muted); background: var(--dk-card); }
:root:not(#z) body.desk-calm:not(.is-mgr) .fs :is(.fs-btn--sec, .fs-btn--ghost) { box-shadow: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .fs :is(.fs-btn, .fs-row, .fs-choice, .fs-fluid, .fs-opt, .fs-iconbtn):focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }
}
/* the sample form, continued: Scan asset tag is .fs-scan-hero; Inter at 800 reads too heavy, so headings and row names are 600 */
@media (min-width: 768px) {
  :root:not(#z) body.desk-calm:not(.is-mgr) .fs .fs-scan-hero { min-height: 56px; padding: 10px 14px; border-radius: 10px; background: var(--dk-raised); color: var(--dk-ink); border: 1px solid var(--dk-line-2); box-shadow: none; filter: none; }
  :root:not(#z) body.desk-calm:not(.is-mgr) .fs .fs-scan-hero:hover { background: var(--dk-hover); }
  :root:not(#z) body.desk-calm:not(.is-mgr) .fs .fs-scan-hero b { font: 600 15px/1.3 var(--dk-font); }
  :root:not(#z) body.desk-calm:not(.is-mgr) .fs .fs-scan-hero small { font: 400 13px/1.4 var(--dk-font); color: var(--dk-muted); opacity: 1; }
  :root:not(#z) body.desk-calm:not(.is-mgr) .fs .fs-scan-hero :is(span, i):first-child { background: var(--dk-card); color: var(--dk-muted); }
  :root:not(#z) body.desk-calm:not(.is-mgr) .fs :is(.fs-top-t h1, .fs-sh h2) { font-weight: 650; letter-spacing: -.01em; }
  :root:not(#z) body.desk-calm:not(.is-mgr) .fs :is(.fs-row-t b, .fs-sum-t b, .fs-lab-open b, .fs-lab-sum b, .fs-crit b, .fs-net b) { font-weight: 600; }
  :root:not(#z) body.desk-calm:not(.is-mgr) .fs .fs-btn { font-weight: 600; font-size: 15px; border-radius: 8px; }
  :root:not(#z) body.desk-calm:not(.is-mgr) .fs .fs-input--big { font-weight: 600; letter-spacing: 0; }
}

/* ══ SETTINGS (v4.260) ════════════════════════════════════════════════════════
   The rep's Settings (.st, settings.js): a reading width of 760px from the
   page's start edge (a settings list is read, not scanned), the title like
   every other screen and no back arrow (the sidebar and the tablet's bar are
   the way out; a sub-page keeps its own back); every row's icon neutral (they
   were a colour per row); Inter; one card per group with hairlines; Sign out a
   quiet row in red text (it was a pink card). Its tokens (--st-*) are the
   Graphite ones, so every sub-page follows. The phone is unchanged. */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(.st) { padding: 28px 24px 48px; }
@media (min-width: 1024px) { :root:not(#z) body.desk-calm:not(.is-mgr) #main:has(.st) { padding: 28px max(32px, calc((100% - 1480px) / 2)) 48px; } }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(.st) > * { margin-inline: 0; }
:root:not(#z) body.desk-calm .st {
  --st-acc: var(--dk-accent); --st-ink: var(--dk-on-accent); --st-acc-ink: var(--dk-accent-ink);
  --st-row: var(--dk-card); --st-row-hover: var(--dk-hover); --st-sunk: var(--dk-raised);
  --st-line: var(--dk-line); --st-line-2: var(--dk-line-2);
  --st-text: var(--dk-ink); --st-text-2: var(--dk-ink-2); --st-muted: var(--dk-muted); --st-foot: var(--dk-faint);
  --st-green: var(--dk-ok); --st-ok-ink: var(--dk-ok-ink); --st-amber: var(--dk-warn); --st-warn-ink: var(--dk-warn-ink);
  --st-red: var(--dk-err); --st-red-ink: var(--dk-err);
  --st-font: var(--dk-font); --st-cond: var(--dk-font); --st-mono: var(--dk-font);
  --st-ic-bg: var(--dk-raised); --st-hover: var(--dk-hover); --st-switch-off: var(--dk-line-2);
  --st-av-bg: var(--dk-raised); --st-ring: var(--dk-card); --st-focus: var(--dk-accent-ink);
  max-width: 760px; margin-inline: 0; font-family: var(--dk-font); background: transparent;
}
/* the title, as every screen's; the main list needs no back arrow here */
:root:not(#z) body.desk-calm .st-bar { justify-content: flex-start; margin-bottom: 4px; }
:root:not(#z) body.desk-calm .st-bar h1 { font: 650 28px/1.15 var(--dk-font); letter-spacing: -.022em; color: var(--dk-ink); text-align: start; }
:root:not(#z) body.desk-calm .st > .st-bar .st-back { display: none; }
/* the profile card */
:root:not(#z) body.desk-calm .st-profile { background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none; }
:root:not(#z) body.desk-calm .st-profile:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm .st-avatar { border-color: var(--dk-line-2); box-shadow: none; }
:root:not(#z) body.desk-calm .st-name { font: 600 17px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm .st-email { font: 400 13px/1.4 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm .st-role { font: 500 13px/1.4 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm .st-deputy { font: 400 13px/1.4 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm .st-deputy b { color: var(--dk-ink-2); font-weight: 500; }
/* groups and rows */
:root:not(#z) body.desk-calm .st-group-label { font: 600 11px/1.3 var(--dk-font); letter-spacing: .06em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm .st-group { gap: 8px; margin-bottom: 20px; }
:root:not(#z) body.desk-calm .st-group-label { padding: 0 2px; }
:root:not(#z) body.desk-calm .st-card { background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none; }
:root:not(#z) body.desk-calm .st-card > .st-row { min-height: 56px; padding: 4px 16px; }
:root:not(#z) body.desk-calm .st-row { background: transparent; border-radius: 0; transition: background-color .15s var(--dk-ease); }
:root:not(#z) body.desk-calm .st-row:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm .st-row:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: -2px; }
:root:not(#z) body.desk-calm .st-row-ic,
:root:not(#z) body.desk-calm .st-row-ic[data-ic] { width: 30px; height: 30px; border-radius: 8px; background: var(--dk-raised); color: var(--dk-muted); }
:root:not(#z) body.desk-calm .st-row-ic svg { width: 16px; height: 16px; }
:root:not(#z) body.desk-calm .st-row-label { font: 500 14px/1.35 var(--dk-font); color: var(--dk-ink); padding: 8px 0; }
:root:not(#z) body.desk-calm .st-row-label > small { font: 400 12.5px/1.4 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm .st-row-val { font: 400 13px/1.3 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm .st-chev { color: var(--dk-faint); }
/* sign out: a quiet row in red text */
:root:not(#z) body.desk-calm .st-row--danger { background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none; }
:root:not(#z) body.desk-calm .st-row--danger:hover { background: var(--dk-err-wash); }
:root:not(#z) body.desk-calm .st-row--danger .st-row-ic { background: var(--dk-err-wash); color: var(--dk-err); }
:root:not(#z) body.desk-calm .st-foot { font: 400 12px/1.4 var(--dk-font); color: var(--dk-faint); text-align: start; }
/* sub-pages, buttons, switches */
:root:not(#z) body.desk-calm :is(.st-panel, .st-card) { box-shadow: none; }
:root:not(#z) body.desk-calm .st-btn { min-height: 36px; border-radius: 6px; font: 500 13px/1 var(--dk-font); box-shadow: none; }
:root:not(#z) body.desk-calm .st-switch { box-shadow: none; }
/* the amber pill ("Not connected") in light: #B45309 on its wash read 4.4:1 */
:root[data-scheme="light"]:not(#z) body.desk-calm .st-pill--warn { color: #92400E; }
}

/* Pricing and Top Products: their rows open nothing */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main:is([data-lov="offers"], [data-lov="products"]) .lo-tbl tbody tr { cursor: default; }
}

/* ══ SALES TOOLS: SMART ADVISOR (v4.261) ══════════════════════════════════════
   Pricing and Top Products take the Orders rules above (their scope names
   them: .lo__main[data-lov]). The Smart Advisor (.la, advisor.css, the
   supplied design) keeps its layout and its scanning instrument; from 768px its
   own tokens (--la-*) are the Graphite ones, so its white panels become plain
   cards on the page: no frame around it (the screen is the frame), Inter for
   every face (it had Barlow, Barlow Condensed and IBM Plex Mono), the title in
   normal case like every screen, neutral icons. Analyze is the one orange
   button while describing; Open in Price Calculator the one on a result.
   Confidence and match states keep green / amber / red as tinted panels. The
   two tabs (Find an equivalent / Analyze a customer) are the shared segmented
   control. The phone keeps the design as it was. */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm:not(.is-mgr) .la {
  --la-acc: var(--dk-accent);
  --la-shell: var(--dk-raised); --la-shell-raised: var(--dk-raised);
  --la-card: var(--dk-card); --la-card-sub: var(--dk-bg);
  --la-line: var(--dk-line); --la-line-soft: var(--dk-line);
  --la-text: var(--dk-ink); --la-text-2: var(--dk-ink-2); --la-muted: var(--dk-muted); --la-on-dark-muted: var(--dk-muted);
  --la-green: var(--dk-ok); --la-green-text: var(--dk-ok-ink);
  --la-green-bg: color-mix(in srgb, var(--dk-ok) 9%, var(--dk-card)); --la-green-line: color-mix(in srgb, var(--dk-ok) 35%, var(--dk-line));
  --la-amber: var(--dk-warn); --la-amber-text: var(--dk-warn-ink);
  --la-amber-bg: color-mix(in srgb, var(--dk-warn) 9%, var(--dk-card)); --la-amber-line: color-mix(in srgb, var(--dk-warn) 35%, var(--dk-line));
  --la-red: var(--dk-err); --la-red-text: var(--dk-err);
  --la-red-bg: color-mix(in srgb, var(--dk-err) 9%, var(--dk-card)); --la-red-line: color-mix(in srgb, var(--dk-err) 35%, var(--dk-line));
  --la-font: var(--dk-font); --la-cond: var(--dk-font); --la-mono: var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) .adv-host .la { background: transparent !important; padding: 0;   /* light-surfaces.css paints .la white with !important */
   border-radius: 0; overflow: visible; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-container { max-width: none; gap: 20px; }

/* header: the screen's title */
:root:not(#z) body.desk-calm:not(.is-mgr) .la-header { padding-bottom: 0; border-bottom: 0; align-items: center; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-eyebrow { font: 500 13px/1.4 var(--dk-font); letter-spacing: 0; text-transform: none; color: var(--dk-muted); margin: 0 0 4px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-eyebrow::before { display: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-title { font: 650 28px/1.15 var(--dk-font); letter-spacing: -.022em; text-transform: none; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-status { height: 34px; border-color: var(--dk-line-2); border-radius: 6px; font: 500 12px/1 var(--dk-font); letter-spacing: 0; color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-reset { height: 34px; padding: 0 12px; border: 1px solid var(--dk-line-2); border-radius: 6px; background: var(--dk-card); color: var(--dk-ink) !important; font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-reset:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-reset:focus-visible { outline: 2px solid var(--dk-accent-ink); }

/* panels */
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.la-input, .la-card) { border-radius: 14px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-h { font: 600 14px/1.3 var(--dk-font); letter-spacing: 0; text-transform: none; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-step-no { font: 500 13px/1.3 var(--dk-font); color: var(--dk-faint); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-label { font: 600 11px/1.3 var(--dk-font); letter-spacing: .06em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-console { border-color: var(--dk-line-2); border-radius: 10px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-console:focus-within { border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-console textarea { font: 400 15px/1.55 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-console textarea::placeholder { color: var(--dk-faint); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-toolbar { border-top-color: var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-mic { width: 40px; height: 40px; background: var(--dk-raised); border: 1px solid var(--dk-line-2); color: var(--dk-ink-2) !important; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-mic:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-mic[aria-pressed="true"] { background: var(--dk-accent); color: var(--dk-on-accent) !important; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-mic-hint { font: 500 13px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-eq span { background: var(--dk-ink-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-analyze { height: 40px; padding: 0 16px; border-radius: 8px; background: var(--dk-accent); color: var(--dk-on-accent) !important; font: 600 14px/1 var(--dk-font); letter-spacing: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-analyze:hover { filter: brightness(1.06); transform: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.la-mic, .la-analyze, .la-chip, .la-step, .la-cta, .la-review, .la-opt, .la-ans, .la-sec, .adv-mode):focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-chip { height: 32px; padding: 0 12px; border-color: var(--dk-line-2); background: transparent; color: var(--dk-ink-2); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-chip:hover { border-color: var(--dk-line-2); background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-check { border-color: var(--dk-line); background: var(--dk-card); font: 500 13.5px/1.35 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-check i { background: var(--dk-line-2); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-check small { font: 400 12px/1.35 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-check.is-hit { background: var(--la-green-bg); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-check.is-hit i { color: var(--dk-on-accent); }

/* the empty state */
:root:not(#z) body.desk-calm:not(.is-mgr) .la-idle { min-height: 440px; border: 1px dashed var(--dk-line-2); border-radius: 14px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-idle h2 { font: 600 18px/1.3 var(--dk-font); text-transform: none; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-idle p { font: 400 14px/1.6 var(--dk-font); color: var(--dk-muted); }

/* the result */
:root:not(#z) body.desk-calm:not(.is-mgr) .la-rec-head { padding: 12px 24px; background: transparent; border-bottom: 1px solid var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-rec-head .la-h { color: var(--dk-muted); font: 600 11px/1.3 var(--dk-font); letter-spacing: .06em; text-transform: uppercase; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-rec-head .la-mono { font: 500 12px/1.3 var(--dk-font); letter-spacing: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-rec-name { font: 650 30px/1.15 var(--dk-font); letter-spacing: -.02em; text-transform: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-rec-sub { font: 500 15px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-spec { height: 24px; padding: 0 8px; border-radius: 6px; border-color: var(--dk-line-2); background: transparent; color: var(--dk-ink-2); font: 500 12px/1 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-conf { border-radius: 12px; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-ring-val b { font: 650 26px/1 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-ring-val small { font: 600 10px/1.2 var(--dk-font); letter-spacing: .06em; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-ring circle:not(.arc) { stroke: var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-conf-label { font: 600 16px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-conf-note { font: 400 13px/1.45 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.la-why, .la-openlist) li { font: 400 14px/1.5 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.la-why, .la-openlist) i { background: var(--dk-raised); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.la-why, .la-openlist) li.is-warn i { color: var(--dk-warn-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-pair b { font: 600 15px/1.3 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-step { width: 40px; height: 40px; background: var(--dk-raised); border-color: var(--dk-line-2); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-step:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-qty-val { height: 40px; border-color: var(--dk-line-2); font: 600 18px/1 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-vol { border-top: 1px solid var(--dk-line); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-vol b { font: 650 26px/1 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-cta { height: 44px; border-radius: 8px; background: var(--dk-accent); color: var(--dk-on-accent) !important; box-shadow: none; font: 600 14px/1 var(--dk-font); letter-spacing: 0; text-transform: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-cta:hover { filter: brightness(1.06); transform: none; box-shadow: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-cta--soft { background: transparent; border: 1px solid var(--la-amber-line); color: var(--dk-warn-ink) !important; }
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.la-review, .la-sec) { height: 44px; border: 1px solid var(--dk-line-2); border-radius: 8px; background: var(--dk-card); color: var(--dk-ink) !important; font: 500 14px/1 var(--dk-font); letter-spacing: 0; text-transform: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.la-review, .la-sec):hover { background: var(--dk-hover); }

/* the questions and the conversation */
:root:not(#z) body.desk-calm:not(.is-mgr) .la-understood { font: 400 14px/1.5 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-delta { font: 500 12px/1.3 var(--dk-font); letter-spacing: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-q-text { font: 600 15px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.la-q-text small, .la-ask-sub, .la-more, .la-unknown, .la-fresh, .la-muted) { font-weight: 400; }
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.la-q-no, .ca .ca-rank) { background: var(--dk-raised); color: var(--dk-accent-ink); font: 600 12px/1 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-opt { min-height: 36px; border-color: var(--dk-line-2); background: transparent; font: 500 13.5px/1.2 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-opt:hover { border-color: var(--dk-line-2); background: var(--dk-hover); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-opt--go { background: var(--dk-ink); border-color: var(--dk-ink); color: var(--dk-bg) !important; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-opt--go:hover { background: var(--dk-ink-2); border-color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.la-q-input, .ca .ca-draft) { border-color: var(--dk-line-2); background: var(--dk-bg); color: var(--dk-ink); font-weight: 400; }
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.la-q-input, .ca .ca-draft):focus { border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-ans { min-height: 32px; font: 500 13px/1.2 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-ans b { font-weight: 600; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-state b { font: 600 14px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-state span { font: 400 13px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-fact { font: 400 13px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-fact b { font-weight: 600; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-ev { font: 400 14px/1.5 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.la-ev a, .ca .ca-link) { font-weight: 600; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-cmp thead th { font-weight: 600; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-cmp tbody th { font-weight: 500; }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-tag { color: var(--dk-on-accent); font: 600 11px/1.5 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .la-error { font: 500 14px/1.45 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ca .ca-sub { font: 600 11px/1.3 var(--dk-font); letter-spacing: .06em; }
:root:not(#z) body.desk-calm:not(.is-mgr) .ca .ca-opp-h b { font: 600 15px/1.35 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) :is(.ca .ca-profile, .ca .ca-line, .ca .ca-list, .ca .ca-obj p) { font-weight: 400; }
:root:not(#z) body.desk-calm:not(.is-mgr) .ca-dlg { background: var(--dk-card); border: 1px solid var(--dk-line); color: var(--dk-ink); font-family: var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ca-dlg h2 { font: 600 17px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .ca-dlg p { font-weight: 400; }

/* the two tabs: the shared segmented control */
:root:not(#z) body.desk-calm:not(.is-mgr) .adv-modes { gap: 2px; margin: 0 0 20px; padding: 3px; border: 0; border-radius: 8px; background: var(--dk-raised); }
:root:not(#z) body.desk-calm:not(.is-mgr) .adv-mode { min-height: 30px; padding: 0 14px; border-radius: 6px; color: var(--dk-muted); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) .adv-mode:hover { color: var(--dk-ink); }
:root:not(#z):not(#y):not(#x) body.desk-calm:not(.is-mgr) .adv-mode.is-on { background: var(--dk-card); color: var(--dk-ink); box-shadow: inset 0 -2px 0 var(--dk-sel-line); }
}

/* Top Products: the best seller is a name, not a figure */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__main[data-lov="products"] .lo-kpi:nth-child(2) .lo-kpi__v { font-size: 22px; line-height: 1.25; letter-spacing: -.015em; }
}

/* the result header's "02" carries an inline grey for the design's dark bar; on a plain card it is the faint ink */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm:not(.is-mgr) .la-rec-head .la-step-no { color: var(--dk-faint) !important; }
}

/* ══ EQUIVALENTS (v4.262) ═════════════════════════════════════════════════════
   Products › Equivalents (#main holding #equivQ, app.js screenEquiv): a
   reading column of 960px from the page's start edge; the first panel is the
   screen's title and search (no card around them); the "Try" panel and every
   result a plain card; the four match levels quiet pills with their colour in
   the dot and the text (Exact green, Functional and Partial amber, None red),
   as the decision chips; the competitor's grade rows and Petromix matches
   hairline rows on the card. The phone is unchanged. Stock (Products › Stock)
   takes the Orders rules (its scope names it). */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) { padding: 28px 24px 48px; font-family: var(--dk-font); }
@media (min-width: 1024px) { :root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) { padding: 28px max(32px, calc((100% - 1480px) / 2)) 48px; } }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) > :is(.panel, #results) { max-width: 960px; margin-inline: 0; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) > .panel:first-of-type { padding: 0; margin-bottom: 20px; background: transparent; background-image: none; border: 0; box-shadow: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) > .panel:first-of-type::before { display: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) > .panel:first-of-type .h2 { margin: 0 0 6px; font: 650 28px/1.15 var(--dk-font); letter-spacing: -.022em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) > .panel:first-of-type .muted { font: 400 14px/1.55 var(--dk-font); color: var(--dk-muted); max-width: 72ch; }
:root:not(#z) body.desk-calm:not(.is-mgr) #equivQ {
  height: 42px; min-height: 42px; padding: 0 14px; border-radius: 8px; background: var(--dk-card); border: 1px solid var(--dk-line-2); box-shadow: none;
  color: var(--dk-ink); font: 400 15px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) #equivQ::placeholder { color: var(--dk-faint); }
:root:not(#z) body.desk-calm:not(.is-mgr) #equivQ:focus { border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); outline: 0; }

/* the "Try" panel and the results */
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) #results > .panel,
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-card {
  padding: 18px 20px; background: var(--dk-card); background-image: none; border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none;
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) #results > .panel::before { display: none; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .kicker { font: 600 11px/1.3 var(--dk-font); letter-spacing: .06em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .chips { gap: 6px; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .chip {
  min-height: 30px; height: 30px; padding: 0 12px; border-radius: 99px; background: transparent; border: 1px solid var(--dk-line-2); box-shadow: none;
  color: var(--dk-ink-2); font: 500 13px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .chip:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-legend { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--dk-line); gap: 10px; font: 400 13.5px/1.45 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .empty { font: 400 14px/1.6 var(--dk-font); color: var(--dk-muted); text-align: start; padding: 24px 0; }

/* the match levels: a quiet pill, the colour in the dot and the text */
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-lv {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 99px;
  background: transparent; border: 1px solid var(--dk-line-2); color: var(--dk-ink-2); font: 500 12px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-lv::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-lv--exact { color: var(--dk-ok-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-lv--exact::before { background: var(--dk-ok); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) :is(.eq-lv--func, .eq-lv--partial) { color: var(--dk-warn-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) :is(.eq-lv--func, .eq-lv--partial)::before { background: var(--dk-warn); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-lv--partial::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--dk-warn); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-lv--none { color: var(--dk-err); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-lv--none::before { background: var(--dk-err); }

/* a result card */
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-list { gap: 14px; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-card { gap: 12px; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-card--none { box-shadow: inset 3px 0 0 var(--dk-err); }
:root[dir="rtl"]:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-card--none { box-shadow: inset -3px 0 0 var(--dk-err); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-card__t { font: 600 17px/1.3 var(--dk-font); letter-spacing: -.01em; color: var(--dk-ink); unicode-bidi: plaintext; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-card__s { font: 400 13px/1.45 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-card__s b { font-weight: 600; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-card__c { font: 400 12.5px/1.4 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) :is(.eq-why, .eq-m__note, .eq-src, .eq-rep) { font-family: var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-why { font: 400 14px/1.55 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-warn {
  padding: 8px 12px; border-radius: 8px; background: transparent; border: 1px solid color-mix(in srgb, var(--dk-warn) 40%, var(--dk-line));
  color: var(--dk-ink-2); font: 400 13px/1.45 var(--dk-font);
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-pick { font: 600 11px/1.3 var(--dk-font); letter-spacing: .06em; text-transform: uppercase; color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) :is(.eq-m, .eq-g) {
  border-radius: 8px; background: transparent; border: 1px solid var(--dk-line); color: var(--dk-ink); box-shadow: none;
  transition: background-color .15s var(--dk-ease), border-color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) :is(.eq-m, .eq-g):hover { background: var(--dk-hover); border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) :is(.eq-m, .eq-g):focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-m__n { font: 500 14px/1.35 var(--dk-font); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-m__n b { font-weight: 600; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-m__note { font: 400 12.5px/1.45 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-g__n { font: 600 13.5px/1.3 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-g__n small { font: 400 12px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-src { font: 400 12px/1.4 var(--dk-font); color: var(--dk-faint); }
}
@media (min-width: 768px) { :root:not(#z) body.desk-calm:not(.is-mgr) #main:has(#equivQ) .eq-pick { unicode-bidi: plaintext; } }

/* ══ THE MANAGER APP: SHELL AND MAIN DASHBOARD (v4.264) ══════════════════════════
   manager.html carries body.desk-calm.is-mgr. Its shell (the sidebar, the page
   bar) takes the rep app's sidebar language: one neutral icon colour, the
   active item a raised row with a 2px orange edge, quiet badges, no coloured
   icon tiles, no amber workspace chip. Its Main Dashboard keeps every card,
   figure and link it had; the components draw from their own tokens
   (--md-* / --kpi-* team-dashboard, --mc-* manager-cards, --dv-* daily-volume,
   --cf-* check-ins, --tp-* top performer, --al-* activity log, and the --t-*
   tones dash-tones.css maps onto them), so this section sets those tokens to
   Graphite and restyles only what tokens cannot reach: the type (Inter, no
   condensed or mono faces), the icon squares, the tabs and segments (SHARED
   STATES: card surface + orange underline), the gradients (one flat orange,
   and only where a figure is the month's own: the current month's bars, the
   quota, the daily volume, the leading measure in Rep comparison). Status
   keeps its colour: Approved green, Awaiting grey, Rejected red, an alert red.
   The other manager screens keep their look until their own step. A phone
   (≤ 767px) reads none of it. */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm.is-mgr {
  --dk-chart-prev: #474B54;
}
:root[data-scheme="light"]:not(#z) body.desk-calm.is-mgr {
  --dk-chart-prev: #C9CBD1;
}

/* ── The sidebar ───────────────────────────────────────────────────────────── */
:root:not(#z) body.desk-calm.is-mgr .side {
  background: var(--dk-side); border-inline-end: 1px solid var(--dk-line); gap: 16px;
  padding-inline: 12px; font-family: var(--dk-font);
  scrollbar-width: thin; scrollbar-color: var(--dk-line-2) transparent;
}
:root:not(#z) body.desk-calm.is-mgr .side__home { margin: 2px 10px 0; }
:root:not(#z) body.desk-calm.is-mgr .side__logo { width: min(160px, 100%); }
:root:not(#z) body.desk-calm.is-mgr .side__who { padding: 4px 10px; gap: 10px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr .side__avatar {
  width: 32px; height: 32px; border-radius: 8px; background: var(--dk-raised); color: var(--dk-ink);
  box-shadow: inset 0 0 0 1px var(--dk-line-2); font: 600 12px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm.is-mgr .side__avatar:has(img) { background: none; box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr .side__hi { display: none; }
:root:not(#z) body.desk-calm.is-mgr .side__name { margin: 0; font: 600 14px/1.3 var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .side__role { margin: 1px 0 0; font: 400 12px/1.3 var(--dk-font); letter-spacing: 0; text-transform: none; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .side__ws { box-shadow: none; outline: 0;
  margin: 0 10px; padding: 0; gap: 8px; background: transparent; border: 0; border-radius: 0;
  font: 500 12px/1.4 var(--dk-font); color: var(--dk-muted);
}
:root:not(#z) body.desk-calm.is-mgr .side__ws-dot { width: 6px; height: 6px; background: var(--dk-ok); box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr .side__dep { margin: -8px 10px 0; padding: 0; background: transparent; border: 0; font: 400 12px/1.4 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .side__dep b { color: var(--dk-ink-2); font-weight: 600; }
:root:not(#z) body.desk-calm.is-mgr .side__team { margin: 0 4px; }
:root:not(#z) body.desk-calm.is-mgr .side__team span { font: 600 12px/1.2 var(--dk-font); letter-spacing: .06em; color: var(--dk-faint); }
:root:not(#z) body.desk-calm.is-mgr .side__team select {
  height: 34px; border-radius: 6px; background-color: var(--dk-card); border: 1px solid var(--dk-line-2); color: var(--dk-ink); font: 500 13px/1 var(--dk-font); box-shadow: none;
}
:root:not(#z) body.desk-calm.is-mgr .side__nav { gap: 2px; }
:root:not(#z) body.desk-calm.is-mgr .side__nav > .nav {
  min-height: 36px; padding: 0 10px; gap: 10px; border-radius: 6px;
  font: 500 14px/1.2 var(--dk-font); color: var(--dk-ink-2); background: transparent; box-shadow: none;
  transition: background-color .15s var(--dk-ease), color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm.is-mgr .side__nav > .nav > svg {
  box-sizing: border-box; width: 18px; height: 18px; padding: 0; border-radius: 0; background: none;
  color: var(--dk-muted); stroke: var(--dk-muted); stroke-width: 1.8;
}
:root:not(#z) body.desk-calm.is-mgr .side__nav > .nav:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .side__nav > .nav.is-active {
  background: var(--dk-raised); color: var(--dk-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--dk-accent);
}
:root[dir="rtl"]:not(#z) body.desk-calm.is-mgr .side__nav > .nav.is-active { box-shadow: inset -2px 0 0 var(--dk-accent); }
@media (max-width: 1023px) { :root:not(#z) body.desk-calm.is-mgr .side__nav > .nav.is-active { box-shadow: inset 0 -2px 0 var(--dk-accent); } }
:root:not(#z) body.desk-calm.is-mgr .side__nav > .nav.is-active > svg { color: var(--dk-accent); stroke: var(--dk-accent); }
:root:not(#z) body.desk-calm.is-mgr .side__nav > .nav:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: -2px; }
:root:not(#z) body.desk-calm.is-mgr .nav__badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--dk-raised); border: 1px solid var(--dk-line-2);
  color: var(--dk-ink); font: 600 12px/1 var(--dk-font); font-variant-numeric: tabular-nums; animation: none;
}
:root:not(#z) body.desk-calm.is-mgr .nav__badge[hidden] { display: none; }
:root:not(#z) body.desk-calm.is-mgr .side__unit {
  margin: 0 10px; padding: 10px 0 0; border: 0; border-top: 1px solid var(--dk-line); border-radius: 0; background: transparent;
  font: 500 12px/1.4 var(--dk-font); color: var(--dk-faint);
}
:root:not(#z) body.desk-calm.is-mgr .side__unit b { font-family: var(--dk-font); font-weight: 600; color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .side__out { min-height: 36px; padding: 0 10px; border-radius: 6px; font: 500 14px/1 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .side__out svg { width: 18px; height: 18px; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .side__out:hover { background: var(--dk-hover); color: var(--dk-ink); }

/* ── The page bar (every manager view; the Dashboard draws its own header) ── */
:root:not(#z) body.desk-calm.is-mgr .main { background: transparent; }
:root:not(#z) body.desk-calm.is-mgr .bar { background: transparent; border-bottom: 0; align-items: center; }
:root:not(#z) body.desk-calm.is-mgr .bar__title { font: 650 28px/1.15 var(--dk-font); letter-spacing: -.022em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .bar__sub { font: 400 14px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .bar .pill {
  height: 26px; padding: 0 10px; border-radius: 99px; background: transparent; border: 1px solid var(--dk-line-2);
  color: var(--dk-ink-2); font: 500 12px/24px var(--dk-font); box-shadow: none;
}
:root:not(#z) body.desk-calm.is-mgr .bar__rf {
  width: 34px; height: 34px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--dk-ink-2); box-shadow: none;
  transition: background-color .15s var(--dk-ease), color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm.is-mgr .bar__rf:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .bar__rf svg { width: 18px; height: 18px; }
:root:not(#z) body.desk-calm.is-mgr .bar__rf:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }
:root:not(#z) body.desk-calm.is-mgr .bell__panel { background: var(--dk-card); border: 1px solid var(--dk-line-2); box-shadow: var(--dk-shadow-pop); font-family: var(--dk-font); }

/* the toast: a raised card, its action an orange text link (both apps since v4.276) */
:root:not(#z) body.desk-calm .toast {
  padding: 10px 14px; gap: 12px; border-radius: 10px; background: var(--dk-raised); border: 1px solid var(--dk-line-2);
  color: var(--dk-ink); font: 500 13.5px/1.4 var(--dk-font); box-shadow: var(--dk-shadow-pop);
}
:root:not(#z) body.desk-calm .toast__go { background: transparent; border: 0; padding: 0 2px; color: var(--dk-accent-ink); font: 600 13.5px/1.4 var(--dk-font); text-decoration: none; }
:root:not(#z) body.desk-calm .toast__go:hover { text-decoration: underline; }

/* ── Main Dashboard: every component's tokens on Graphite ──────────────────── */
:root:not(#z) body.desk-calm.is-mgr :is(.md, .mc, .dv, .cf, .tp, .al) {
  --md-font: var(--dk-font); --md-cond: var(--dk-font); --md-mono: var(--dk-font);
  --mc-font: var(--dk-font); --mc-cond: var(--dk-font); --mc-mono: var(--dk-font);
  --dv-font: var(--dk-font); --dv-cond: var(--dk-font); --dv-mono: var(--dk-font);
  --cf-font: var(--dk-font); --cf-cond: var(--dk-font);
  --tp-font: var(--dk-font); --tp-cond: var(--dk-font); --tp-mono: var(--dk-font);
  --al-font: var(--dk-font); --al-cond: var(--dk-font); --al-mono: var(--dk-font);
}
:root:not(#z) body.desk-calm.is-mgr .md {
  --md-acc: var(--dk-accent); --md-ink: var(--dk-on-accent); --md-card: var(--dk-card); --md-tile: var(--dk-card); --md-track: var(--dk-line);
  --md-line: var(--dk-line); --md-line-2: var(--dk-line-2); --md-text: var(--dk-ink); --md-text-2: var(--dk-ink-2);
  --md-muted: var(--dk-muted); --md-faint: var(--dk-faint); --md-up: var(--dk-ok-ink); --md-dn: var(--dk-err); --md-amber: var(--dk-warn-ink);
  --kpi-card: var(--dk-card); --kpi-hover: var(--dk-card); --kpi-line: var(--dk-line); --kpi-line-2: var(--dk-line-2);
  --kpi-ink: var(--dk-ink); --kpi-ink-2: var(--dk-muted); --kpi-track: var(--dk-line); --kpi-grid: var(--dk-line);
  --kpi-cur: var(--dk-accent); --kpi-prev: var(--dk-chart-prev); --kpi-soft: var(--dk-chart-prev);
  --kpi-icon: var(--dk-raised); --kpi-icon-ink: var(--dk-muted); --kpi-shadow: none;
  font-family: var(--dk-font);
}
:root:not(#z) body.desk-calm.is-mgr .tone {
  --t-card: var(--dk-card); --t-raised: var(--dk-raised); --t-track: var(--dk-line); --t-line: var(--dk-line); --t-line-2: var(--dk-line-2);
  --t-ink: var(--dk-ink); --t-icon: var(--dk-muted); --t-muted: var(--dk-muted); --t-faint: var(--dk-faint);
}
:root:not(#z) body.desk-calm.is-mgr .mc {
  --mc-acc: var(--dk-accent); --mc-acc-2: var(--dk-accent); --mc-acc-text: var(--dk-accent-ink); --mc-ink: var(--dk-on-accent);
  --mc-grey: var(--dk-chart-prev); --mc-red: var(--dk-err); --mc-seg: var(--dk-raised);
  --mc-text: var(--dk-ink); --mc-text-2: var(--dk-ink-2); --mc-up: var(--dk-ok-ink); --mc-dn: var(--dk-err); --mc-green: var(--dk-ok);
}
:root:not(#z) body.desk-calm.is-mgr .dv {
  --dv-acc: var(--dk-accent); --dv-acc-2: var(--dk-accent); --dv-acc-text: var(--dk-accent-ink); --dv-ink: var(--dk-on-accent);
  --dv-grid: var(--dk-line); --dv-text: var(--dk-ink); --dv-text-2: var(--dk-ink-2); --dv-red: var(--dk-err); --dv-amber: var(--dk-warn-ink);
  --dv-seg: var(--dk-raised); --dv-avg: var(--dk-faint); --dv-wk: color-mix(in srgb, var(--dk-ink) 2.5%, transparent);
  --dv-hover: var(--dk-hover); --dv-tip-bg: var(--dk-card); --dv-gap-bg: var(--dk-card);
}
:root:not(#z) body.desk-calm.is-mgr :is(.cf, .tp, .al) {
  --cf-acc: var(--dk-accent); --cf-text: var(--dk-ink); --cf-text-2: var(--dk-ink-2);
  --tp-acc: var(--dk-accent); --tp-acc-deep: var(--dk-accent); --tp-acc-text: var(--dk-accent-ink); --tp-text: var(--dk-ink); --tp-text-2: var(--dk-ink-2);
  --al-acc: var(--dk-accent); --al-acc-text: var(--dk-accent-ink); --al-text: var(--dk-ink); --al-text-2: var(--dk-ink-2);
}
/* every card: one surface, one hairline, one radius, no shadow */
:root:not(#z) body.desk-calm.is-mgr :is(.md .md-tile, .mc, .dv, .cf, .tp, .al) {
  background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none;
}
:root:not(#z) body.desk-calm.is-mgr .md button.md-tile:hover { background: var(--dk-card); border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm.is-mgr .md button.md-tile:active { transform: none; }
:root:not(#z) body.desk-calm.is-mgr :is(.md, .mc, .dv, .cf, .tp, .al) :focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }

/* the page: a calm column like the rep screens */
:root:not(#z) body.desk-calm.is-mgr .main.is-dash .body { padding: 28px 24px 48px; gap: 16px; }
@media (min-width: 1024px) { :root:not(#z) body.desk-calm.is-mgr .main.is-dash .body { padding: 28px max(32px, calc((100% - 1480px) / 2)) 48px; } }
:root:not(#z) body.desk-calm.is-mgr .main.is-dash .body > * { max-width: none; }

/* header: the title, a quiet status, three quiet icon buttons */
:root:not(#z) body.desk-calm.is-mgr .md-head { padding: 0 0 20px; gap: 12px; }
:root:not(#z) body.desk-calm.is-mgr .md-head h1 { font: 650 28px/1.15 var(--dk-font); letter-spacing: -.022em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .md-head p { margin-top: 4px; font: 400 14px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .md-head-right { gap: 4px; }
:root:not(#z) body.desk-calm.is-mgr .md-status {
  height: 26px; padding: 0 10px; margin-inline-end: 6px; gap: 6px; border-radius: 99px; background: transparent; border: 1px solid var(--dk-line-2);
  color: var(--dk-ink-2); font: 500 12px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm.is-mgr .md-status i { width: 6px; height: 6px; background: var(--dk-faint); }
:root:not(#z) body.desk-calm.is-mgr .md-status--live i { background: var(--dk-ok); }
:root:not(#z) body.desk-calm.is-mgr .md-status--demo i { background: var(--dk-warn); }
:root:not(#z) body.desk-calm.is-mgr .md-icon-btn {
  width: 34px; height: 34px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--dk-ink-2);
  transition: background-color .15s var(--dk-ease), color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm.is-mgr .md-icon-btn:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .md-icon-btn svg { width: 18px; height: 18px; }
:root:not(#z) body.desk-calm.is-mgr .md-icon-btn .md-dot { top: 6px; inset-inline-end: 6px; width: 7px; height: 7px; background: var(--dk-accent); border: 0; box-shadow: 0 0 0 2px var(--dk-bg); }

/* the three tabs: a quiet segmented control (SHARED STATES draws the selected one) */
:root:not(#z) body.desk-calm.is-mgr .md-tabs {
  display: inline-flex; align-self: flex-start; gap: 2px; margin: 0; padding: 3px; border-radius: 8px; background: var(--dk-raised); border: 0;
}
:root:not(#z) body.desk-calm.is-mgr .md-tab {
  flex: none; min-height: 30px; height: 30px; padding: 0 14px; border-radius: 6px; background: transparent;
  color: var(--dk-muted); font: 500 13px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm.is-mgr .md-tab:hover { background: transparent; color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .md-grid.md-grid--row { margin-top: 16px; gap: 16px; }

/* tile heads: a small neutral icon, the label in the one small-caps style */
:root:not(#z) body.desk-calm.is-mgr .md-tile { padding: 18px 20px; gap: 12px; }
:root:not(#z) body.desk-calm.is-mgr .md-tile .md-ic { width: 28px; height: 28px; border-radius: 6px; background: var(--dk-raised); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .md-tile .md-ic svg { width: 15px; height: 15px; }
:root:not(#z) body.desk-calm.is-mgr .md-grid--row > .md-tile .md-k { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .md-go { color: var(--dk-faint); }

/* figures: Inter, tabular, the hero 48px, the rest 32px */
:root:not(#z) body.desk-calm.is-mgr .md-val { font: 650 32px/1.05 var(--dk-font); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .md-hero .md-val { font-size: 48px; letter-spacing: -.03em; }
:root:not(#z) body.desk-calm.is-mgr .md-val small,
:root:not(#z) body.desk-calm.is-mgr .md-hero .md-val small { font: 500 14px/1 var(--dk-font); letter-spacing: 0; color: var(--dk-muted); margin-inline-start: 4px; }
:root:not(#z) body.desk-calm.is-mgr .md-val.md-val--sm { font-size: 28px; }
:root:not(#z) body.desk-calm.is-mgr .md-sub { font: 400 13px/1.45 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .md-sub b { font-weight: 600; color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .md-sub b.md-pace.is-ahead { color: var(--dk-ok-ink); }
:root:not(#z) body.desk-calm.is-mgr .md-sub b.md-pace.is-behind { color: var(--dk-err); }
:root:not(#z) body.desk-calm.is-mgr :is(.mc-v--acc, .dv-v.is-acc) { color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .md-delta { height: 22px; padding: 0 8px; border-radius: 99px; font: 600 12px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .md-delta.up { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-ok) 45%, transparent); color: var(--dk-ok-ink); }
:root:not(#z) body.desk-calm.is-mgr .md-delta.down { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-err) 45%, transparent); color: var(--dk-err); }
:root:not(#z) body.desk-calm.is-mgr .md-delta.flat { background: transparent; box-shadow: inset 0 0 0 1px var(--dk-line-2); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .md-pair-k { font: 500 13px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .md-pair-i b { font: 650 22px/1 var(--dk-font); letter-spacing: -.02em; }
:root:not(#z) body.desk-calm.is-mgr .md-pair-i b small { font: 500 12px/1 var(--dk-font); letter-spacing: 0; }
:root:not(#z) body.desk-calm.is-mgr .md-quota-row { font: 500 13px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .md-quota-row b { font: 650 18px/1 var(--dk-font); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .md-bar { height: 8px; border-radius: 4px; }
:root:not(#z) body.desk-calm.is-mgr .md-bar i { border-radius: 4px; }
:root:not(#z) body.desk-calm.is-mgr .md-bar b { background: var(--dk-ink); opacity: .8; }
:root:not(#z) body.desk-calm.is-mgr :is(.md-bars-y, .md-bcol em, .md-legend) { font: 500 12px/1.2 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .md-bpair i { border-radius: 3px 3px 0 0; }
:root:not(#z) body.desk-calm.is-mgr .md-chart-empty { border-color: var(--dk-line-2); font: 400 13px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .md-smp-k { font: 500 13px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .md-smp-empty { font: 400 13px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .md-smp-all { height: 30px; border-radius: 6px; font: 500 13px/1 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .md-smp-all:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .md-smp-row:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .md-smp-pri { height: 22px; background: transparent; box-shadow: inset 0 0 0 1px var(--dk-line-2); font: 600 12px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .md-smp-pri.is-critical { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-err) 45%, transparent); color: var(--dk-err); }
:root:not(#z) body.desk-calm.is-mgr .md-smp-pri.is-urgent { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-warn) 45%, transparent); color: var(--dk-warn-ink); }
:root:not(#z) body.desk-calm.is-mgr .md-spark { gap: 3px; }
:root:not(#z) body.desk-calm.is-mgr .md-spark i { border-radius: 2px 2px 0 0; }

/* Getting started: one plain card */
:root:not(#z) body.desk-calm.is-mgr .guide { background: var(--dk-card); background-image: none; border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none; font-family: var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .guide::before { display: none; }
:root:not(#z) body.desk-calm.is-mgr .guide__k { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .guide__t { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .guide__n { font: 500 12px/1 var(--dk-font); color: var(--dk-muted); }

/* ── Pipeline, Rep comparison, Daily sales volume, check-ins, top performer, the log ── */
:root:not(#z) body.desk-calm.is-mgr :is(.mc-head, .dv-head) { padding: 18px 20px 14px; }
:root:not(#z) body.desk-calm.is-mgr :is(.mc-title, .dv-title, .cf-title, .tp-title, .al-title) { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr :is(.mc-sub, .dv-range, .cf-sub, .tp-sub, .al-sub) { margin-top: 2px; font: 400 13px/1.45 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr :is(.mc-seg, .dv-seg, .al-seg, .cf-seg) { gap: 2px; padding: 3px; border: 0; border-radius: 8px; background: var(--dk-raised); }
:root:not(#z) body.desk-calm.is-mgr :is(.mc-seg, .dv-seg, .al-seg, .cf-seg) button {
  height: 28px; padding: 0 10px; border-radius: 6px; background: transparent; color: var(--dk-muted); font: 500 13px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm.is-mgr :is(.mc-seg, .dv-seg, .al-seg, .cf-seg) button:hover { color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .al-seg button span { background: transparent; color: inherit; font: 500 12px/1 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .mc-icon-btn { width: 34px; height: 34px; border-radius: 6px; border-color: transparent; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .mc-icon-btn:hover, :root:not(#z) body.desk-calm.is-mgr .mc-icon-btn[aria-expanded="true"] { background: var(--dk-hover); color: var(--dk-ink); }

/* the small-caps labels and the figures */
:root:not(#z) body.desk-calm.is-mgr :is(.mc-k, .mc-cols, .dv-k) { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr :is(.mc-v, .dv-v) { font: 650 22px/1.1 var(--dk-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr :is(.mc-v small, .dv-v small) { font: 500 12px/1 var(--dk-font); letter-spacing: 0; }
:root:not(#z) body.desk-calm.is-mgr .dv-s { font: 400 12.5px/1.4 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr :is(.mc-summary, .dv-kpis) { border-radius: 10px; background: transparent; border: 1px solid var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .mc-summary > div.is-on { box-shadow: inset 0 -2px 0 var(--dk-accent); }
:root:not(#z) body.desk-calm.is-mgr .mc-summary > div.is-on .mc-k { color: var(--dk-ink); }

/* Pipeline: needs attention an outlined alert, the funnel and the outcomes on the card */
:root:not(#z) body.desk-calm.is-mgr .mc-attn { border-radius: 10px; background: transparent; border-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .mc-attn.is-on { background: var(--dk-err-wash); border-color: color-mix(in srgb, var(--dk-err) 40%, var(--dk-line)); }
:root:not(#z) body.desk-calm.is-mgr .mc-attn-ic { width: 30px; height: 30px; border-radius: 6px; background: transparent; color: var(--dk-ok-ink); box-shadow: inset 0 0 0 1px var(--dk-line-2); }
:root:not(#z) body.desk-calm.is-mgr .mc-attn.is-on .mc-attn-ic { background: transparent; color: var(--dk-err); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-err) 40%, transparent); }
:root:not(#z) body.desk-calm.is-mgr .mc-attn-t b { font: 600 14px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mc-attn-t small { font: 400 12.5px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mc-fun { border-radius: 8px; border-color: var(--dk-line); background: transparent; }
:root:not(#z) body.desk-calm.is-mgr .mc-fun:hover { background: var(--dk-hover); border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm.is-mgr .mc-fun-k { font: 500 12.5px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mc-fun-v { font: 650 20px/1 var(--dk-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .mc-fun-s { font: 500 12.5px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mc-fun-s.is-on { color: var(--dk-err); }
:root:not(#z) body.desk-calm.is-mgr .mc-split { height: 8px; border-radius: 4px; gap: 2px; }
:root:not(#z) body.desk-calm.is-mgr .mc-split i.approved,
:root:not(#z) body.desk-calm.is-mgr .mc-dot.approved,
:root:not(#z) body.desk-calm.is-mgr .mc-lg.approved::before { background: var(--dk-ok); }
:root:not(#z) body.desk-calm.is-mgr .mc-split-legend { font: 500 12px/1.3 var(--dk-font); text-transform: none; }
:root:not(#z) body.desk-calm.is-mgr .mc-stages { padding: 14px 20px 18px; gap: 0; }
:root:not(#z) body.desk-calm.is-mgr .mc-stage { padding: 12px 2px; border: 0; border-top: 1px solid var(--dk-line); border-radius: 0; background: transparent; }
:root:not(#z) body.desk-calm.is-mgr .mc-stage:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .mc-dot { width: 8px; height: 8px; align-self: center; }
:root:not(#z) body.desk-calm.is-mgr .mc-stage-name { font: 600 14px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mc-stage-name small { font: 400 12.5px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mc-stage-val { font: 650 20px/1 var(--dk-font); letter-spacing: -.02em; }
:root:not(#z) body.desk-calm.is-mgr .mc-stage-val small { font: 500 12px/1 var(--dk-font); letter-spacing: 0; }
:root:not(#z) body.desk-calm.is-mgr .mc-stage-meta { font: 400 12.5px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mc .mc-note { background: var(--dk-raised); font: 400 13px/1.5 var(--dk-font); color: var(--dk-ink-2); }

/* Rep comparison: hairline rows, a neutral avatar, one flat bar */
:root:not(#z) body.desk-calm.is-mgr .mc-list { padding: 0 10px 12px; }
:root:not(#z) body.desk-calm.is-mgr .mc-rep { min-height: 56px; border-radius: 8px; }
:root:not(#z) body.desk-calm.is-mgr .mc-rep:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .mc-rank { font: 600 14px/1 var(--dk-font); color: var(--dk-faint); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .mc-rep:first-child .mc-rank { color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .mc-av { width: 32px; height: 32px; border-radius: 8px; background: var(--dk-raised); color: var(--dk-ink-2); box-shadow: inset 0 0 0 1px var(--dk-line-2); font: 600 12px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mc-name { font: 600 14px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mc-name small { font: 400 12.5px/1.35 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mc-track { height: 8px; border-radius: 4px; }
:root:not(#z) body.desk-calm.is-mgr .mc-track i { border-radius: 4px; }
:root:not(#z) body.desk-calm.is-mgr .mc-list--visits .mc-track i,
:root:not(#z) body.desk-calm.is-mgr .mc-list--per .mc-track i { background: var(--dk-accent); }
:root:not(#z) body.desk-calm.is-mgr :is(.mc-track b, .mc-legend b) { background: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr :is(.mc-volval, .mc-cell) { font: 600 15px/1 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr :is(.mc-volval small, .mc-cell small) { font: 500 12px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mc-eff { border-radius: 99px; }
:root:not(#z) body.desk-calm.is-mgr .mc-eff.is-high { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-ok) 45%, transparent); }
:root:not(#z) body.desk-calm.is-mgr .mc-eff.is-low { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-err) 45%, transparent); }
:root:not(#z) body.desk-calm.is-mgr :is(.mc-legend, .dv-foot) { padding: 12px 20px 14px; font: 400 12.5px/1.4 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr :is(.mc-empty) { font: 400 14px/1.5 var(--dk-font); }

/* Daily sales volume: flat bars, Inter axis */
:root:not(#z) body.desk-calm.is-mgr .dv-kpis { margin: 0 20px; }
:root:not(#z) body.desk-calm.is-mgr .dv-chart { margin: 18px 20px 0; }
:root:not(#z) body.desk-calm.is-mgr .dv-bar { border-radius: 3px 3px 0 0; }
:root:not(#z) body.desk-calm.is-mgr .dv-col.is-peak .dv-bar { box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr :is(.dv-gridline span, .dv-xaxis span) { font: 500 12px/1 var(--dk-font); color: var(--dk-faint); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .dv-avg span { font: 500 12px/1.2 var(--dk-font); letter-spacing: 0; color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .dv-tip { border-color: var(--dk-line-2); box-shadow: var(--dk-shadow-pop); }
:root:not(#z) body.desk-calm.is-mgr .dv-tip b { font: 650 18px/1.1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .dv-cum-dot { box-shadow: none; }
/* Team operations: check-ins and the top performer */
:root:not(#z) body.desk-calm.is-mgr :is(.cf-head, .tp-head) { padding: 18px 20px 14px; }
:root:not(#z) body.desk-calm.is-mgr .cf-live { height: 26px; padding: 0 10px; border-radius: 99px; background: transparent; border: 1px solid var(--dk-line-2); color: var(--dk-ink-2); font: 500 12px/1 var(--dk-font); box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr .cf-live i { background: var(--dk-ok); box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr .cf-stats { border-radius: 10px; background: transparent; border: 1px solid var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr :is(.cf-k, .tp-k) { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr :is(.cf-v, .tp-v) { font: 650 22px/1.1 var(--dk-font); letter-spacing: -.02em; color: var(--dk-ink); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr :is(.cf-v small, .tp-v small) { font: 500 12px/1 var(--dk-font); letter-spacing: 0; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .cf-v.is-ok { color: var(--dk-ok-ink); }
:root:not(#z) body.desk-calm.is-mgr :is(.cf-search, .cf-search input) { border-radius: 8px; background: var(--dk-card); border-color: var(--dk-line-2); color: var(--dk-ink); font: 400 14px/1 var(--dk-font); box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr .cf-search input { border: 0; background: transparent; }
:root:not(#z) body.desk-calm.is-mgr .cf-empty { font: 400 14px/1.55 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .tp-avatar { background: var(--dk-raised); border: 1px solid var(--dk-line-2); box-shadow: none; color: var(--dk-ink); font-family: var(--dk-font); font-weight: 650; }
:root:not(#z) body.desk-calm.is-mgr .tp-trophy { background: var(--dk-card); color: var(--dk-accent-ink); border: 1px solid var(--dk-line-2); box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr .tp-name { font: 650 20px/1.2 var(--dk-font); letter-spacing: -.015em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .tp-role { font: 400 13px/1.3 var(--dk-font); letter-spacing: 0; text-transform: none; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .tp-ring-c b { font: 650 34px/1 var(--dk-font); letter-spacing: -.03em; }
:root:not(#z) body.desk-calm.is-mgr .tp-ring-c span { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .tp-ring-c small { font: 500 12.5px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .tp-stats { border-radius: 10px; background: transparent; border-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .tp-link { font: 500 13px/1 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .tp-link:hover { color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .tp-empty { font: 400 14px/1.55 var(--dk-font); color: var(--dk-muted); }

/* Activity history: the log's rows on the card, the status in its colour (Approved green, Awaiting amber, Rejected red) */
:root:not(#z) body.desk-calm.is-mgr .al-head { padding: 18px 20px 14px; }
:root:not(#z) body.desk-calm.is-mgr .al-day-head { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); background: var(--dk-card); }
:root:not(#z) body.desk-calm.is-mgr .al-day-sum { font: 400 12.5px/1.3 var(--dk-font); letter-spacing: 0; text-transform: none; color: var(--dk-muted); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .al-row { min-height: 56px; border-radius: 8px; }
:root:not(#z) body.desk-calm.is-mgr .al-row:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .al-row .al-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--dk-raised); color: var(--dk-muted); box-shadow: inset 0 0 0 1px var(--dk-line-2); }
:root:not(#z) body.desk-calm.is-mgr .al-row .al-ic svg { width: 16px; height: 16px; }
:root:not(#z) body.desk-calm.is-mgr .al-row.is-approved .al-ic { color: var(--dk-ok-ink); }
:root:not(#z) body.desk-calm.is-mgr .al-row.is-awaiting .al-ic { color: var(--dk-warn-ink); }
:root:not(#z) body.desk-calm.is-mgr .al-row.is-rejected .al-ic { color: var(--dk-err); }
:root:not(#z) body.desk-calm.is-mgr .al-cust { font: 600 14px/1.3 var(--dk-font); color: var(--dk-ink); unicode-bidi: plaintext; }
:root:not(#z) body.desk-calm.is-mgr .al-what { font: 400 13px/1.4 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .al-what b { font-weight: 600; color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .al-val { font: 650 16px/1 var(--dk-font); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .al-val small { font: 500 12px/1 var(--dk-font); letter-spacing: 0; }
:root:not(#z) body.desk-calm.is-mgr .al-pill {
  height: 20px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 99px; background: transparent; box-shadow: inset 0 0 0 1px var(--dk-line-2);
  color: var(--dk-ink-2); font: 500 12px/1 var(--dk-font); letter-spacing: 0;
}
:root:not(#z) body.desk-calm.is-mgr .al-row.is-approved .al-pill { background: transparent; color: var(--dk-ok-ink); }
:root:not(#z) body.desk-calm.is-mgr .al-row.is-awaiting .al-pill { color: var(--dk-warn-ink); }
:root:not(#z) body.desk-calm.is-mgr .al-row.is-rejected .al-pill { background: transparent; color: var(--dk-err); }
:root:not(#z) body.desk-calm.is-mgr .al-more { border-radius: 8px; border-color: var(--dk-line-2); background: transparent; color: var(--dk-ink-2); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .al-more:hover { background: var(--dk-hover); color: var(--dk-ink); }
}

/* ══ THE MANAGER APP: TEAM (v4.265) ══════════════════════════════════════════
   Team, a rep's page and one deal (team-view.js, .tm): the page bar and the
   content on the dashboard's column; the card on Graphite tokens (--tm-*);
   Inter throughout; "need attention" an outlined red alert as in Pipeline; the
   table with small-caps headings and hairline rows; a deal row on the card
   with a thin red edge when it is stuck; status chips as outlined pills in
   their colour; the rep's figures a hairline strip; filters in the shared
   selected state; Add note / Mark resolved the one primary on a deal. The
   phone (under 768px) is unchanged. */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm.is-mgr .main:has(.body > .tm) :is(.bar, .body) { padding-inline: 24px; }
@media (min-width: 1024px) {
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > .tm) .bar { padding: 28px max(32px, calc((100% - 1480px) / 2)) 16px; max-width: none; }
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > .tm) .body { padding: 8px max(32px, calc((100% - 1480px) / 2)) 48px; max-width: none; }
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > .tm) .body > * { max-width: none; }
}
:root:not(#z) body.desk-calm.is-mgr .tm {
  --tm-acc: var(--dk-accent); --tm-ink: var(--dk-on-accent); --tm-card: var(--dk-card); --tm-raised: var(--dk-raised);
  --tm-line: var(--dk-line); --tm-line-2: var(--dk-line-2); --tm-text: var(--dk-ink); --tm-text-2: var(--dk-ink-2); --tm-muted: var(--dk-muted);
  --tm-ok: var(--dk-ok-ink); --tm-ok-bg: transparent; --tm-warn: var(--dk-warn-ink); --tm-warn-bg: transparent;
  --tm-bad: var(--dk-err); --tm-bad-bg: var(--dk-err-wash); --tm-seg: var(--dk-raised);
  --tm-font: var(--dk-font); --tm-cond: var(--dk-font);
  background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none; font-family: var(--dk-font);
}
:root:not(#z) body.desk-calm.is-mgr .tm :focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }
:root:not(#z) body.desk-calm.is-mgr .tm-head { padding: 18px 20px 14px; }
:root:not(#z) body.desk-calm.is-mgr .tm-title { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .tm-sub { margin-top: 2px; font: 400 13px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .tm-av { width: 30px; height: 30px; border-radius: 8px; background: var(--dk-raised); color: var(--dk-ink-2); box-shadow: inset 0 0 0 1px var(--dk-line-2); font: 600 12px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .tm-av--lg { width: 44px; height: 44px; border-radius: 10px; font-size: 15px; }
:root:not(#z) body.desk-calm.is-mgr .tm-back { height: 32px; border-radius: 6px; border-color: var(--dk-line-2); color: var(--dk-ink-2); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .tm-back:hover { background: var(--dk-hover); color: var(--dk-ink); }

/* needs attention: an outlined alert */
:root:not(#z) body.desk-calm.is-mgr .tm-attn { margin: 0 20px 16px; border-radius: 10px; background: transparent; border-color: var(--dk-line); color: var(--dk-ok-ink); }
:root:not(#z) body.desk-calm.is-mgr .tm-attn.is-on { background: var(--dk-err-wash); border-color: color-mix(in srgb, var(--dk-err) 40%, var(--dk-line)); color: var(--dk-err); }
:root:not(#z) body.desk-calm.is-mgr .tm-attn b { font: 600 14px/1.3 var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .tm-attn span { font: 400 13px/1.4 var(--dk-font); color: var(--dk-ink-2); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .tm-attn em { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-warn) 45%, transparent); color: var(--dk-warn-ink); font: 600 12px/1 var(--dk-font); }

/* the team table */
:root:not(#z) body.desk-calm.is-mgr .tm-table-wrap { margin: 0 10px; }
:root:not(#z) body.desk-calm.is-mgr .tm-table { font: 400 14px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .tm-table :is(th, td) { border-bottom-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .tm-table thead th { border-bottom-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .tm-sort { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr :is(.tm-sort.is-on, .tm-sort:hover) { color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr :is(.tm-row:hover, .tm-row:focus-visible) { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .tm-row th { font-weight: 600; }
:root:not(#z) body.desk-calm.is-mgr :is(.tm-row th, .tm-dep__t b, .tm-item-top b) { unicode-bidi: plaintext; }
:root:not(#z) body.desk-calm.is-mgr .tm-stuck { font: 600 13px/1.5 var(--dk-font); color: var(--dk-faint); }
:root:not(#z) body.desk-calm.is-mgr .tm-stuck.is-on { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-err) 45%, transparent); color: var(--dk-err); }

/* sections and deal rows */
:root:not(#z) body.desk-calm.is-mgr .tm-sec { padding: 18px 20px 10px; }
:root:not(#z) body.desk-calm.is-mgr .tm-sec-head h3 { font: 600 14px/1.3 var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .tm-sec-head span { font: 400 13px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .tm-list { gap: 0; }
:root:not(#z) body.desk-calm.is-mgr .tm-item { padding: 12px; border: 0; border-top: 1px solid var(--dk-line); border-radius: 0; background: transparent; }
:root:not(#z) body.desk-calm.is-mgr .tm-item:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .tm-item.is-stuck { border-inline-start: 0; box-shadow: inset 2px 0 0 var(--dk-err); }
:root[dir="rtl"]:not(#z) body.desk-calm.is-mgr .tm-item.is-stuck { box-shadow: inset -2px 0 0 var(--dk-err); }
:root:not(#z) body.desk-calm.is-mgr .tm-item-top b { font: 600 14px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .tm-item small { font: 400 13px/1.4 var(--dk-font); color: var(--dk-muted); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .tm-kind { font: 400 12.5px/1 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .tm-go { color: var(--dk-faint); }
:root:not(#z) body.desk-calm.is-mgr .tm-chip { height: 20px; padding: 0 8px; background: transparent; box-shadow: inset 0 0 0 1px var(--dk-line-2); color: var(--dk-ink-2); font: 500 12px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .tm-chip.is-approved { background: transparent; color: var(--dk-ok-ink); }
:root:not(#z) body.desk-calm.is-mgr .tm-chip.is-awaiting { background: transparent; color: var(--dk-warn-ink); }
:root:not(#z) body.desk-calm.is-mgr .tm-chip.is-rejected { background: transparent; color: var(--dk-err); }
:root:not(#z) body.desk-calm.is-mgr .tm-reasons li { font: 500 13px/1.4 var(--dk-font); color: var(--dk-err); }
:root:not(#z) body.desk-calm.is-mgr .tm-reasons li.is-help { color: var(--dk-warn-ink); }
:root:not(#z) body.desk-calm.is-mgr .tm-reasons li.is-more { color: var(--dk-muted); font-weight: 400; }
:root:not(#z) body.desk-calm.is-mgr .tm-empty { font: 400 14px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .tm-link { color: var(--dk-accent-ink); font: 500 13px/1.4 var(--dk-font); }

/* a rep's page: the figures a hairline strip, the filters quiet */
:root:not(#z) body.desk-calm.is-mgr .tm-kpis { margin: 0 20px 16px; border-radius: 10px; background: transparent; border-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .tm-kpis > div { padding: 12px 14px; }
:root:not(#z) body.desk-calm.is-mgr .tm-k { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .tm-v { font: 650 22px/1.1 var(--dk-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .tm-v { white-space: normal; }
:root:not(#z) body.desk-calm.is-mgr .tm-v small { font: 500 12px/1.3 var(--dk-font); letter-spacing: 0; white-space: nowrap; display: inline-block; }
:root:not(#z) body.desk-calm.is-mgr .tm-v--sm { font: 600 15px/1.3 var(--dk-font); letter-spacing: 0; }
:root:not(#z) body.desk-calm.is-mgr .tm-v.is-zero { color: var(--dk-faint); }
:root:not(#z) body.desk-calm.is-mgr .tm-tools { margin: 0 20px 12px; gap: 8px; }
:root:not(#z) body.desk-calm.is-mgr .tm-seg { gap: 2px; padding: 3px; border: 0; border-radius: 8px; background: var(--dk-raised); }
:root:not(#z) body.desk-calm.is-mgr .tm-seg button { height: 28px; padding: 0 10px; border-radius: 6px; background: transparent; color: var(--dk-muted); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .tm-seg button:hover { color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .tm-toggle { height: 34px; border-radius: 6px; border-color: var(--dk-line-2); background: transparent; color: var(--dk-ink-2); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .tm-toggle:hover { background: var(--dk-hover); color: var(--dk-ink); }

/* one deal */
:root:not(#z) body.desk-calm.is-mgr .tm-detail { margin: 0 20px; padding: 6px 18px 12px; border-radius: 10px; background: transparent; border-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .tm-detail-head h3 { font: 650 20px/1.25 var(--dk-font); letter-spacing: -.015em; unicode-bidi: plaintext; }
:root:not(#z) body.desk-calm.is-mgr .tm-facts dt { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .tm-facts dd { font: 500 14px/1.4 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .tm-help { border-radius: 10px; background: transparent; border-color: color-mix(in srgb, var(--dk-warn) 45%, var(--dk-line)); color: var(--dk-warn-ink); }
:root:not(#z) body.desk-calm.is-mgr .tm-help b { font: 600 14px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr :is(.tm-help p, .tm-hint) { font: 400 13.5px/1.5 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .tm-note label { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .tm-note label small { font: 400 13px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .tm-note textarea { border-radius: 8px; border-color: var(--dk-line-2); background: var(--dk-card); color: var(--dk-ink); font: 400 14px/1.5 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .tm-note textarea::placeholder { color: var(--dk-faint); }
:root:not(#z) body.desk-calm.is-mgr .tm-note textarea:focus { outline: 0; border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); }
:root:not(#z) body.desk-calm.is-mgr .tm-btn { height: 34px; border-radius: 6px; border-color: var(--dk-line-2); color: var(--dk-ink); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .tm-btn:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .tm-btn--acc { border: 0; background: var(--dk-accent); color: var(--dk-on-accent); font-weight: 600; }
:root:not(#z) body.desk-calm.is-mgr .tm-btn--acc:hover { background: var(--dk-accent); filter: brightness(1.08); }
:root:not(#z) body.desk-calm.is-mgr :is(.tm-timeline, .tm-orders) { border-inline-start-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm.is-mgr :is(.tm-timeline, .tm-orders) li::before { border-color: var(--dk-card); }
:root:not(#z) body.desk-calm.is-mgr :is(.tm-timeline, .tm-orders) p { font: 400 14px/1.5 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr :is(.tm-timeline, .tm-orders) time { font: 400 12.5px/1.4 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr :is(.tm-tracking, .tm-none) { font: 400 13px/1.5 var(--dk-font); font-style: normal; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .tm-forbidden { border-radius: 10px; background: var(--dk-err-wash); border-color: color-mix(in srgb, var(--dk-err) 40%, var(--dk-line)); }
:root:not(#z) body.desk-calm.is-mgr .tm-forbidden b { font: 600 15px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .tm-forbidden p { font: 400 14px/1.5 var(--dk-font); }

/* the team's deputies */
:root:not(#z) body.desk-calm.is-mgr .tm-dep { margin: 0 20px 16px; border-radius: 10px; background: transparent; border-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .tm-dep__t b { font: 600 14px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr :is(.tm-dep__t small, .tm-dep__n) { font: 400 13px/1.45 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .tm-dep__t small em { color: var(--dk-ink-2); font-weight: 500; }
:root:not(#z) body.desk-calm.is-mgr .tm-av.tm-av--dep { width: 40px; height: 40px; border-radius: 10px; font-size: 14px; }
}

/* ══ THE MANAGER APP: CALENDAR (v4.266) ══════════════════════════════════════
   The Calendar tab (calendar-tab.js, .cal): on the dashboard's column, its
   tokens (--cal-*) on Graphite, Inter with tabular figures (no condensed or
   mono faces). KEPT because they carry meaning: the P marks (orange = share of
   the day's target, green = met), the orange ring on today, the hatched
   Fri / Sat. Gone: the green tint on a met day (the green P says it), orange on
   the Approved figure and the percentage (ink; green when on target). Tiles,
   the calendar and the register plain cards; the week column a hairline box;
   the month's arrows and buttons quiet; segments and the picked rep in the
   shared selected state; status pills outlined in their colour. The phone
   (under 768px) is unchanged. */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm.is-mgr .main:has(.body > #calHost) :is(.bar, .body) { padding-inline: 24px; }
@media (min-width: 1024px) {
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #calHost) .bar { padding: 28px max(32px, calc((100% - 1480px) / 2)) 16px; max-width: none; }
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #calHost) .body { padding: 8px max(32px, calc((100% - 1480px) / 2)) 48px; max-width: none; }
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #calHost) .body > * { max-width: none; }
}
:root:not(#z) body.desk-calm.is-mgr .cal {
  --cal-acc: var(--dk-accent); --cal-acc-2: var(--dk-accent); --cal-acc-text: var(--dk-accent-ink); --cal-ink: var(--dk-on-accent);
  --cal-bg: var(--dk-raised); --cal-card: var(--dk-card); --cal-raised: var(--dk-raised); --cal-cell: var(--dk-raised); --cal-sel: var(--dk-raised);
  --cal-track: var(--dk-line); --cal-line: var(--dk-line); --cal-line-2: var(--dk-line-2);
  --cal-text: var(--dk-ink); --cal-text-2: var(--dk-ink-2); --cal-muted: var(--dk-muted); --cal-faint: var(--dk-faint);
  --cal-green: var(--dk-ok); --cal-green-2: var(--dk-ok-ink); --cal-red: var(--dk-err); --cal-amber: var(--dk-warn-ink);
  --cal-p-part: var(--dk-accent); --cal-p-met: var(--dk-ok); --cal-p-base: var(--dk-line-2); --cal-p-base-future: var(--dk-line);
  --cal-hatch-1: var(--dk-card); --cal-hatch-2: var(--dk-raised); --cal-hatch-lg: var(--dk-line-2);
  --cal-hover: var(--dk-hover); --cal-chip: transparent;
  --cal-font: var(--dk-font); --cal-cond: var(--dk-font); --cal-mono: var(--dk-font);
  font-family: var(--dk-font);
}
:root:not(#z) body.desk-calm.is-mgr .cal :focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }
:root:not(#z) body.desk-calm.is-mgr :is(.cal-card, .cal-tile) { background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr .cal-k { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .cal-s { font: 400 13px/1.45 var(--dk-font); color: var(--dk-muted); }

/* the month and its controls */
:root:not(#z) body.desk-calm.is-mgr .cal-month { font: 650 24px/1.1 var(--dk-font); letter-spacing: -.02em; }
:root:not(#z) body.desk-calm.is-mgr .cal-month span { font-weight: 500; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .cal-icon { width: 34px; height: 34px; border-radius: 6px; border-color: var(--dk-line-2); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .cal-btn { height: 34px; padding: 0 12px; border-radius: 6px; border-color: var(--dk-line-2); color: var(--dk-ink); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .cal-reg-tools .cal-btn { height: 34px; }
:root:not(#z) body.desk-calm.is-mgr .cal-btn:disabled { opacity: 1; color: var(--dk-faint); border-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr :is(.cal-icon:hover, .cal-btn:hover:not(:disabled)) { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .cal-measure { font: 500 13px/1 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .cal-select select { height: 34px; border-radius: 6px; border-color: var(--dk-line-2); background-color: var(--dk-card); color: var(--dk-ink); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .cal-select select:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }

/* the target strip */
:root:not(#z) body.desk-calm.is-mgr .cal-tile { padding: 16px 18px; gap: 6px; }
:root:not(#z) body.desk-calm.is-mgr .cal-big { font: 650 28px/1.05 var(--dk-font); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .cal-big small { font: 500 13px/1 var(--dk-font); letter-spacing: 0; }
:root:not(#z) body.desk-calm.is-mgr .cal-big.is-acc { color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .cal-pct { font: 650 32px/1 var(--dk-font); letter-spacing: -.025em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .cal-pct.ok { color: var(--dk-ok-ink); }
:root:not(#z) body.desk-calm.is-mgr .cal-bar { height: 8px; border-radius: 4px; }
:root:not(#z) body.desk-calm.is-mgr .cal-bar i { border-radius: 4px; }
:root:not(#z) body.desk-calm.is-mgr .cal-bar b { width: 2px; margin-left: -1px; background: var(--dk-ink); opacity: .8; }
:root:not(#z) body.desk-calm.is-mgr .cal-line { font: 400 13px/1.45 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .cal-line b { font-weight: 600; }

/* the calendar */
:root:not(#z) body.desk-calm.is-mgr .cal-cal { padding: 16px 16px 12px; }
:root:not(#z) body.desk-calm.is-mgr .cal-dow { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .cal-dow.is-off, :root:not(#z) body.desk-calm.is-mgr .cal-dow-wk { color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .cal-day { border-radius: 10px; }
:root:not(#z) body.desk-calm.is-mgr .cal-day.is-met { background: var(--dk-raised); }
:root:not(#z) body.desk-calm.is-mgr .cal-day.is-sel { border-color: var(--dk-accent); background-color: var(--dk-raised); box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr .cal-dn { font: 600 14px/1 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .cal-day.is-today .cal-dn { box-shadow: 0 0 0 1.5px var(--dk-accent); }
:root:not(#z) body.desk-calm.is-mgr .cal-q { font: 650 20px/1 var(--dk-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .cal-q small { font: 500 12px/1 var(--dk-font); letter-spacing: 0; }
:root:not(#z) body.desk-calm.is-mgr .cal-q em { font: 500 12px/1 var(--dk-font); letter-spacing: 0; color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .cal-q em.ok { color: var(--dk-ok-ink); }
:root:not(#z) body.desk-calm.is-mgr .cal-meta { font: 400 12.5px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .cal-hol { font: 500 12.5px/1.2 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .cal-wk { border: 1px solid var(--dk-line); border-radius: 10px; }
:root:not(#z) body.desk-calm.is-mgr .cal-wk-q { font: 650 16px/1 var(--dk-font); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .cal-wk-q small { font: 500 12px/1 var(--dk-font); letter-spacing: 0; }
:root:not(#z) body.desk-calm.is-mgr .cal-wk-bar { height: 4px; }
:root:not(#z) body.desk-calm.is-mgr .cal-wk-t { font: 400 12px/1.2 var(--dk-font); color: var(--dk-muted); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .cal-legend { font: 400 13px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .cal-legend-tip { color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .cal-lg-today { box-shadow: inset 0 0 0 1.5px var(--dk-accent); }

/* the side panel */
:root:not(#z) body.desk-calm.is-mgr .cal-panel { padding: 18px; }
:root:not(#z) body.desk-calm.is-mgr .cal-ph h3 { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; }
:root:not(#z) body.desk-calm.is-mgr .cal-ph-note { font: 400 13px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr :is(.cal-dsum > div, .cal-note) { border-radius: 10px; background: transparent; border: 1px solid var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .cal-note:hover { background: var(--dk-hover); border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm.is-mgr :is(.cal-mid, .cal-note b) { font: 650 20px/1.1 var(--dk-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .cal-mid small { font: 500 12px/1 var(--dk-font); letter-spacing: 0; }
:root:not(#z) body.desk-calm.is-mgr .cal-note > span:last-child { font: 400 13px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .cal-note.is-warn b { color: var(--dk-warn-ink); }
:root:not(#z) body.desk-calm.is-mgr :is(.cal-item, .cal-rep) { border-radius: 8px; }
:root:not(#z) body.desk-calm.is-mgr .cal-item-t { font: 400 13px/1.3 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .cal-item-b { font: 600 14px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .cal-item-b small { font: 400 13px/1.35 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .cal-item-v { font: 600 15px/1 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .cal-av { width: 32px; height: 32px; border-radius: 8px; background: var(--dk-raised); color: var(--dk-ink-2); box-shadow: inset 0 0 0 1px var(--dk-line-2); font: 600 12px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .cal-rep-top b { font: 600 14px/1.3 var(--dk-font); unicode-bidi: plaintext; }
:root:not(#z) body.desk-calm.is-mgr .cal-rep-top > span { font: 600 15px/1 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .cal-rep-top small { font: 400 12px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .cal-rep-s { font: 400 13px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr :is(.cal-hint, .cal-none) { font: 400 13px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .cal-link { color: var(--dk-accent-ink); font-weight: 500; }

/* status pills: outlined, in their colour */
:root:not(#z) body.desk-calm.is-mgr .cal-pill { padding: 0 8px; height: 20px; line-height: 18px; background: transparent; border: 1px solid var(--dk-line-2); font: 500 12px/18px var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .cal-pill.is-approved { background: transparent; color: var(--dk-ok-ink); }
:root:not(#z) body.desk-calm.is-mgr .cal-pill.is-awaiting { background: transparent; color: var(--dk-warn-ink); border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm.is-mgr .cal-pill.is-rejected { background: transparent; color: var(--dk-err); }

/* the register */
:root:not(#z) body.desk-calm.is-mgr .cal-reg { padding: 18px 0 8px; }
:root:not(#z) body.desk-calm.is-mgr .cal-reg-head { padding: 0 20px 14px; }
:root:not(#z) body.desk-calm.is-mgr .cal-reg-head h3 { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; }
:root:not(#z) body.desk-calm.is-mgr .cal-seg { gap: 2px; padding: 3px; border: 0; border-radius: 8px; background: var(--dk-raised); }
:root:not(#z) body.desk-calm.is-mgr .cal-seg button { height: 28px; padding: 0 10px; border-radius: 6px; color: var(--dk-muted); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .cal-seg button:hover { color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .cal-seg button span { background: transparent; color: inherit; font: 500 12px/1 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .cal-table { font: 400 14px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .cal-table th { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .cal-table :is(th:first-child, td:first-child) { padding-inline-start: 20px; }
:root:not(#z) body.desk-calm.is-mgr .cal-table :is(th:last-child, td:last-child) { padding-inline-end: 20px; }
:root:not(#z) body.desk-calm.is-mgr .cal-table td { font-weight: 500; }
:root:not(#z) body.desk-calm.is-mgr .cal-table tbody tr:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .cal-table tbody tr.is-sel { background: var(--dk-raised); box-shadow: inset 2px 0 0 var(--dk-accent); }
:root[dir="rtl"]:not(#z) body.desk-calm.is-mgr .cal-table tbody tr.is-sel { box-shadow: inset -2px 0 0 var(--dk-accent); }
:root:not(#z) body.desk-calm.is-mgr .cal-when { font: 400 13px/1.3 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .cal-client { unicode-bidi: plaintext; }
:root:not(#z) body.desk-calm.is-mgr .cal-prod small { font: 400 12.5px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .cal-val { font: 600 15px/1 var(--dk-font); font-variant-numeric: tabular-nums; }
}

/* ══ THE MANAGER APP: REQUESTS (v4.267) ══════════════════════════════════════
   The manager's Requests (requests-hub.js, .mh), the rep's v4.258 decisions
   carried over: on the dashboard's column (a request's own page a 980px
   reading column); All / Orders / Questions / Access a segmented control; the
   three tiles plain cards with a neutral icon (a picked tile the shared
   selected border); pending requests and recent activity each one card of
   hairline rows with a neutral avatar and tag (the colour per kind is gone);
   a waiting time past its limit amber; status dots keep their colour. On a
   request: plain cards, the tabs underlined in orange, Approve (or Send) the
   one orange button, Reject a quiet button in red text. The phone (under
   768px) is unchanged. */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm.is-mgr .main:has(.body > #rq-requests) :is(.bar, .body) { padding-inline: 24px; }
@media (min-width: 1024px) {
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #rq-requests) .bar { padding: 28px max(32px, calc((100% - 1480px) / 2)) 16px; max-width: none; }
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #rq-requests) .body { padding: 8px max(32px, calc((100% - 1480px) / 2)) 48px; max-width: none; }
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #rq-requests) .body > * { max-width: none; }
}
:root:not(#z) body.desk-calm.is-mgr .mh { --rx-c: var(--dk-muted); --mh-r: 14px; font-family: var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .mh :is(button, textarea):focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }
:root:not(#z) body.desk-calm.is-mgr .mh-page { max-width: none; gap: 16px; }
:root:not(#z) body.desk-calm.is-mgr .mh-page:has(.mh-dhead) { max-width: 980px; }

/* the tabs: a segmented control */
:root:not(#z) body.desk-calm.is-mgr .mh-tabs { display: inline-flex; justify-self: start; gap: 2px; padding: 3px; border-radius: 8px; background: var(--dk-raised); border: 0; }
:root:not(#z) body.desk-calm.is-mgr .mh-tabbtn {
  flex: none; min-height: 30px; height: 30px; padding: 0 12px; gap: 8px; border-radius: 6px; background: transparent; border: 0; box-shadow: none;
  color: var(--dk-muted); font: 500 13px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm.is-mgr .mh-tabbtn:hover { background: transparent; color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .mh-tabbtn b,
:root:not(#z) body.desk-calm.is-mgr .mh-tabbtn.is-on b { min-width: 0; height: auto; padding: 0; background: transparent; color: inherit; font: 500 12px/1 var(--dk-font); font-variant-numeric: tabular-nums; }

/* the three tiles */
:root:not(#z) body.desk-calm.is-mgr .mh-tiles { gap: 16px; }
:root:not(#z) body.desk-calm.is-mgr .mh-tile {
  padding: 16px 18px; gap: 8px; border-radius: 14px; background: var(--dk-card); border: 1px solid var(--dk-line); box-shadow: none; color: var(--dk-ink);
  transition: border-color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm.is-mgr .mh-tile:hover { border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm.is-mgr .mh-tile__ic { width: 28px; height: 28px; place-items: center; border-radius: 6px; background: var(--dk-raised); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .mh-tile__ic svg { width: 15px; height: 15px; }
:root:not(#z) body.desk-calm.is-mgr .mh-tile b { font: 650 28px/1.05 var(--dk-font); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .mh-tile > span:last-child { font: 400 13px/1.4 var(--dk-font); color: var(--dk-muted); }

/* the section heads, sort and links */
:root:not(#z) body.desk-calm.is-mgr .mh-sec { margin-top: 8px; }
:root:not(#z) body.desk-calm.is-mgr .mh-sec h2 { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; }
:root:not(#z) body.desk-calm.is-mgr .mh-pillbtn { min-height: 34px; height: 34px; padding: 0 12px; border-radius: 6px; border-color: var(--dk-line-2); background: transparent; box-shadow: none; color: var(--dk-ink-2); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mh-pillbtn:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .mh-menu { border-radius: 10px; background: var(--dk-card); border: 1px solid var(--dk-line-2); box-shadow: var(--dk-shadow-pop); }
:root:not(#z) body.desk-calm.is-mgr .mh-menu button { padding: 8px 10px; border-radius: 6px; color: var(--dk-ink); font: 400 14px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mh-menu button:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .mh-menu button[aria-checked="true"] { color: var(--dk-ink); font-weight: 600; }
:root:not(#z) body.desk-calm.is-mgr .mh-link { color: var(--dk-accent-ink); font: 500 13px/1.3 var(--dk-font); }

/* pending requests and recent activity: one card of hairline rows each */
:root:not(#z) body.desk-calm.is-mgr :is(.mh-list, .mh-acts) { gap: 0; background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 14px; overflow: hidden; }
:root:not(#z) body.desk-calm.is-mgr :is(.mh-list, .mh-acts) > li { border-bottom: 1px solid var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr :is(.mh-list, .mh-acts) > li:last-child { border-bottom: 0; }
:root:not(#z) body.desk-calm.is-mgr .mh-item {
  grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 14px; padding: 12px 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none;
  transition: background-color .15s var(--dk-ease);
}
:root:not(#z) body.desk-calm.is-mgr .mh-item:hover { background: var(--dk-hover); border: 0; }
:root:not(#z) body.desk-calm.is-mgr .mh-item:active { transform: none; }
:root:not(#z) body.desk-calm.is-mgr .mh-av {
  width: 36px; height: 36px; border-radius: 8px; background: var(--dk-raised); color: var(--dk-ink-2); box-shadow: inset 0 0 0 1px var(--dk-line-2);
  font: 600 13px/1 var(--dk-font); letter-spacing: 0;
}
:root:not(#z) body.desk-calm.is-mgr .mh-av--big { width: 52px; height: 52px; border-radius: 12px; font-size: 17px; }
:root:not(#z) body.desk-calm.is-mgr .mh-item__b { gap: 3px; }
:root:not(#z) body.desk-calm.is-mgr .mh-item__t b { font: 600 14px/1.3 var(--dk-font); unicode-bidi: plaintext; }
:root:not(#z) body.desk-calm.is-mgr .mh-tag { padding: 0 8px; height: 20px; display: inline-flex; align-items: center; border-radius: 99px; background: transparent; box-shadow: inset 0 0 0 1px var(--dk-line-2); color: var(--dk-ink-2); font: 500 12px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mh-item__s { font: 400 13px/1.45 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .mh-item__w { font: 400 12.5px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .mh-item__w.is-stale { color: var(--dk-warn-ink); font-weight: 500; }
:root:not(#z) body.desk-calm.is-mgr .mh-go { color: var(--dk-faint); }
:root:not(#z) body.desk-calm.is-mgr .mh-act { grid-template-columns: 36px minmax(0, 1fr) 10px; gap: 14px; padding: 12px 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr .mh-act .mh-av { width: 36px; height: 36px; border-radius: 8px; }
:root:not(#z) body.desk-calm.is-mgr .mh-act__b b { font: 600 14px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mh-act__b span { font: 400 13px/1.45 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .mh-act__b small { font: 400 12.5px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .mh-dot { width: 8px; height: 8px; background: var(--dk-warn); }
:root:not(#z) body.desk-calm.is-mgr .mh-dot--ok { background: var(--dk-ok); }
:root:not(#z) body.desk-calm.is-mgr .mh-dot--bad { background: var(--dk-err); }
:root:not(#z) body.desk-calm.is-mgr .mh-empty { padding: 24px; border-radius: 14px; border: 1px solid var(--dk-line); background: var(--dk-card); color: var(--dk-muted); font: 400 14px/1.5 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mh-empty b { color: var(--dk-ink); font: 600 15px/1.4 var(--dk-font); }

/* a request's own page */
:root:not(#z) body.desk-calm.is-mgr .mh-dhead h2 { font: 650 24px/1.2 var(--dk-font); letter-spacing: -.02em; unicode-bidi: plaintext; }
:root:not(#z) body.desk-calm.is-mgr .mh-dhead p { font: 400 14px/1.45 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .mh-round { width: 34px; height: 34px; border-radius: 6px; border-color: var(--dk-line-2); background: transparent; box-shadow: none; color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .mh-round:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .mh-hero { border-radius: 14px; border: 1px solid var(--dk-line); background: var(--dk-card); background-image: none; box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr .mh-hero__top { padding: 18px 20px; gap: 16px; }
:root:not(#z) body.desk-calm.is-mgr .mh-hero__t b { font: 650 20px/1.25 var(--dk-font); letter-spacing: -.015em; unicode-bidi: plaintext; }
:root:not(#z) body.desk-calm.is-mgr .mh-hero__s { font: 400 14px/1.45 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .mh-hero__w { font: 400 13px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .mh-dtabs { border-top-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .mh-dtabs button { min-height: 44px; color: var(--dk-muted); font: 500 14px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mh-dtabs button:hover { color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .mh-dtabs button.is-on { color: var(--dk-ink); border-bottom-color: var(--dk-accent); }
:root:not(#z) body.desk-calm.is-mgr .mh-box { padding: 18px 20px; gap: 12px; border-radius: 14px; border: 1px solid var(--dk-line); background: var(--dk-card); box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr .mh-box h3 { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; }
:root:not(#z) body.desk-calm.is-mgr .mh-box h3 svg { color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .mh-dl { padding: 0; border-radius: 0; background: transparent; }
:root:not(#z) body.desk-calm.is-mgr .mh-row { padding: 10px 0; border-bottom-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .mh-row dt { font: 400 13.5px/1.4 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .mh-row dd { font: 500 14px/1.45 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr :is(.mh-quote, .mh-grant) { border-radius: 10px; background: transparent; border: 1px solid var(--dk-line); font: 400 14px/1.55 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .mh-grant__ic { width: 40px; height: 40px; border-radius: 8px; border-color: var(--dk-line-2); color: var(--dk-muted); background: transparent; }
:root:not(#z) body.desk-calm.is-mgr .mh-grant b { font: 600 14px/1.3 var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .mh-grant p { font: 400 13.5px/1.5 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .mh-time { border-inline-start-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm.is-mgr .mh-time li::before { background: var(--dk-raised); border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm.is-mgr .mh-time li.is-now::before { background: var(--dk-accent); border-color: var(--dk-accent); }
:root:not(#z) body.desk-calm.is-mgr .mh-time b { font: 500 14px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mh-time span { font: 400 12.5px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .mh-perm li { font: 400 14px/1.45 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mh-perm .is-yes svg { color: var(--dk-ok); }
:root:not(#z) body.desk-calm.is-mgr .mh-perm .is-no svg { color: var(--dk-err); }
:root:not(#z) body.desk-calm.is-mgr .mh-fine { font: 400 12.5px/1.45 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .mh-msg { border-radius: 10px; background: var(--dk-raised); border-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .mh-msg.is-me { background: var(--dk-card); border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm.is-mgr .mh-msg span { font: 500 12px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .mh-msg p { font: 400 14px/1.55 var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr :is(.mh-quick, .mh-reasons) button {
  min-height: 30px; padding: 0 12px; border-radius: 99px; border-color: var(--dk-line-2); background: transparent; color: var(--dk-ink-2); font: 500 13px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm.is-mgr :is(.mh-quick, .mh-reasons) button:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .mh-reasons button[aria-checked="true"] { background: var(--dk-err-wash); border-color: var(--dk-err); color: var(--dk-ink); font-weight: 600; }
:root:not(#z) body.desk-calm.is-mgr .mh-lbl { font: 600 13px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mh-lbl span { font-weight: 400; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .mh textarea { border-radius: 8px; border-color: var(--dk-line-2); background: var(--dk-card); color: var(--dk-ink); font: 400 14px/1.5 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mh textarea:focus { outline: 0; border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); }

/* the decision bar: Approve / Send the one orange button, Reject quiet in red */
:root:not(#z) body.desk-calm.is-mgr .mh-bar { background: linear-gradient(transparent, var(--dk-bg) 30%); gap: 10px; }
:root:not(#z) body.desk-calm.is-mgr .mh-btn {
  min-height: 40px; padding: 0 14px; gap: 8px; border-radius: 6px; border-color: var(--dk-line-2); background: var(--dk-card); box-shadow: none;
  color: var(--dk-ink); font: 500 14px/1 var(--dk-font);
}
:root:not(#z) body.desk-calm.is-mgr .mh-btn:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .mh-btn--go { background: var(--dk-accent); background-image: none; border-color: var(--dk-accent); color: var(--dk-on-accent); font-weight: 600; box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr .mh-btn--go:hover { background: var(--dk-accent); filter: brightness(1.08); }
:root:not(#z) body.desk-calm.is-mgr .mh-btn--bad { background: var(--dk-card); border-color: color-mix(in srgb, var(--dk-err) 45%, var(--dk-line-2)); color: var(--dk-err); }
:root:not(#z) body.desk-calm.is-mgr .mh-btn--bad:hover { background: var(--dk-err-wash); }
:root:not(#z) body.desk-calm.is-mgr .mh-ro { border-radius: 10px; background: transparent; border: 1px solid var(--dk-line-2); color: var(--dk-ink-2); font: 400 14px/1.45 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mh-toast { border-radius: 10px; background: var(--dk-raised); border: 1px solid var(--dk-line-2); color: var(--dk-ink); box-shadow: var(--dk-shadow-pop); font: 500 14px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .mh-toast button { color: var(--dk-accent-ink); font-weight: 600; }
:root:not(#z) body.desk-calm.is-mgr .mh-toast.is-error { border-color: color-mix(in srgb, var(--dk-err) 45%, var(--dk-line-2)); }
}

/* ══ THE MANAGER APP: FLUID SAMPLES (v4.268) ═════════════════════════════════
   The manager's Fluid Samples (samples-feed.js, .sf), built like Team: the
   column; tokens (--sf-*) on Graphite; Inter; the stats a hairline strip;
   filters in the shared selected state; a sample a row on the card, open on
   the raised surface; priority badges, verdicts and tags outlined in their
   colour (critical red, urgent amber, reviewed green); the asset icon
   neutral; Mark reviewed the one orange button. The phone is unchanged. */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm.is-mgr .main:has(.body > #sfHost) :is(.bar, .body) { padding-inline: 24px; }
@media (min-width: 1024px) {
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #sfHost) .bar { padding: 28px max(32px, calc((100% - 1480px) / 2)) 16px; max-width: none; }
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #sfHost) .body { padding: 8px max(32px, calc((100% - 1480px) / 2)) 48px; max-width: none; }
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #sfHost) .body > * { max-width: none; }
}
:root:not(#z) body.desk-calm.is-mgr .sf {
  --sf-acc: var(--dk-accent); --sf-ink: var(--dk-on-accent); --sf-card: var(--dk-card); --sf-raised: var(--dk-raised);
  --sf-line: var(--dk-line); --sf-line-2: var(--dk-line-2); --sf-text: var(--dk-ink); --sf-text-2: var(--dk-ink-2); --sf-muted: var(--dk-muted);
  --sf-ok: var(--dk-ok-ink); --sf-ok-bg: transparent; --sf-warn: var(--dk-warn-ink); --sf-warn-bg: transparent;
  --sf-bad: var(--dk-err); --sf-bad-bg: transparent; --sf-seg: var(--dk-raised);
  --sf-font: var(--dk-font); --sf-cond: var(--dk-font); --sf-mono: var(--dk-font);
  margin-top: 0; background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none; font-family: var(--dk-font);
}
:root:not(#z) body.desk-calm.is-mgr .sf :focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }
:root:not(#z) body.desk-calm.is-mgr .sf-head { padding: 18px 20px 14px; }
:root:not(#z) body.desk-calm.is-mgr .sf-title { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; }
:root:not(#z) body.desk-calm.is-mgr .sf-sub { margin-top: 2px; font: 400 13px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .sf-stats { margin: 0 20px 16px; border-radius: 10px; background: transparent; border-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .sf-stats > div { padding: 12px 14px; }
:root:not(#z) body.desk-calm.is-mgr :is(.sf-k, .sf-facts dt, .sf-lab th, .sf-h) { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .sf-h small { font: 400 13px/1.3 var(--dk-font); letter-spacing: 0; text-transform: none; }
:root:not(#z) body.desk-calm.is-mgr .sf-v { font: 650 22px/1.1 var(--dk-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .sf-tools { margin: 0 20px 12px; gap: 8px; }
:root:not(#z) body.desk-calm.is-mgr .sf-seg { gap: 2px; padding: 3px; border: 0; border-radius: 8px; background: var(--dk-raised); }
:root:not(#z) body.desk-calm.is-mgr .sf-seg button { height: 28px; padding: 0 10px; border-radius: 6px; color: var(--dk-muted); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .sf-seg button:hover { color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .sf-search { height: 34px; border-radius: 6px; border-color: var(--dk-line-2); background: var(--dk-card); color: var(--dk-faint); }
:root:not(#z) body.desk-calm.is-mgr .sf-search:focus-within { border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); }
:root:not(#z) body.desk-calm.is-mgr .sf-search input { color: var(--dk-ink); font: 400 14px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .sf-search input::placeholder { color: var(--dk-faint); }
:root:not(#z) body.desk-calm.is-mgr .sf-day { padding: 14px 20px 6px; font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .sf-list { padding: 0 10px 10px; gap: 0; }
:root:not(#z) body.desk-calm.is-mgr .sf-item { border-radius: 8px; }
:root:not(#z) body.desk-calm.is-mgr .sf-row { min-height: 56px; border-radius: 8px; }
:root:not(#z) body.desk-calm.is-mgr .sf-row:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .sf-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--dk-raised); color: var(--dk-muted); box-shadow: inset 0 0 0 1px var(--dk-line-2); }
:root:not(#z) body.desk-calm.is-mgr .sf-ic.is-bad { background: var(--dk-raised); color: var(--dk-err); }
:root:not(#z) body.desk-calm.is-mgr .sf-ic.is-warn { background: var(--dk-raised); color: var(--dk-warn-ink); }
:root:not(#z) body.desk-calm.is-mgr .sf-what b { font: 600 14px/1.3 var(--dk-font); unicode-bidi: plaintext; }
:root:not(#z) body.desk-calm.is-mgr :is(.sf-what small, .sf-asset small, .sf-when small) { font: 400 13px/1.35 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .sf-id { font-family: var(--dk-font); font-weight: 500; font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr :is(.sf-asset, .sf-rep) { font: 500 13.5px/1.35 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .sf-asset svg { color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .sf-when b { font: 600 15px/1.1 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .sf-badge { height: 22px; padding: 0 8px; background: transparent; box-shadow: inset 0 0 0 1px var(--dk-line-2); color: var(--dk-ink-2); font: 500 12px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .sf-badge.is-bad { background: transparent; color: var(--dk-err); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-err) 45%, transparent); }
:root:not(#z) body.desk-calm.is-mgr .sf-badge.is-warn { background: transparent; color: var(--dk-warn-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-warn) 45%, transparent); }
:root:not(#z) body.desk-calm.is-mgr .sf-badge.is-muted { background: transparent; }
:root:not(#z) body.desk-calm.is-mgr .sf-badge.is-ok { border: 0; color: var(--dk-ok-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-ok) 45%, transparent); }
:root:not(#z) body.desk-calm.is-mgr .sf-chev { color: var(--dk-faint); }
:root:not(#z) body.desk-calm.is-mgr .sf-facts dd { font: 500 14px/1.4 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .sf-tag { height: 24px; border-color: var(--dk-line-2); font: 500 12.5px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .sf-tag.is-bad { background: transparent; border-color: color-mix(in srgb, var(--dk-err) 45%, transparent); color: var(--dk-err); }
:root:not(#z) body.desk-calm.is-mgr .sf-verdict { height: 20px; border-radius: 99px; background: transparent; box-shadow: inset 0 0 0 1px var(--dk-line-2); font: 500 12px/1 var(--dk-font); letter-spacing: 0; }
:root:not(#z) body.desk-calm.is-mgr :is(.sf-verdict.is-ok, .sf-verdict.is-warn, .sf-verdict.is-bad) { background: transparent; }
:root:not(#z) body.desk-calm.is-mgr .sf-lab { font: 400 13.5px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .sf-lab td { font-weight: 500; }
:root:not(#z) body.desk-calm.is-mgr .sf-lab tr.is-crit td:first-child { box-shadow: inset 2px 0 0 var(--dk-err); }
:root:not(#z) body.desk-calm.is-mgr .sf-ph { border-radius: 8px; border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm.is-mgr :is(.sf-notes, .sf-none, .sf-empty) { font: 400 14px/1.55 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr :is(.sf-none, .sf-empty) { color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .sf-note { border-radius: 8px; border-color: var(--dk-line-2); background: var(--dk-card); color: var(--dk-ink); font: 400 14px/1.5 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .sf-note:focus { outline: 0; border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); }
:root:not(#z) body.desk-calm.is-mgr .sf-btn { height: 34px; border-radius: 6px; border-color: var(--dk-line-2); color: var(--dk-ink); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .sf-btn:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .sf-btn--acc { border: 0; background: var(--dk-accent); color: var(--dk-on-accent); font-weight: 600; }
:root:not(#z) body.desk-calm.is-mgr .sf-btn--acc:hover { background: var(--dk-accent); filter: brightness(1.08); }
:root:not(#z) body.desk-calm.is-mgr .sf-done { font: 500 13.5px/1.4 var(--dk-font); color: var(--dk-ok-ink); }
}

/* ══ THE MANAGER APP: ANALYTICS & REPORTS (v4.269) ═══════════════════════════
   Trends (trends.js, .tr) on Graphite tokens with Inter (it was already a
   formal, mostly neutral report; the six product colours are kept, they stay
   with their product); and the manager's general panel and table (.panel,
   .table: Team sales here, the Team settings later) on the same surfaces:
   plain cards, small-caps headings, hairline rows, a neutral avatar, the
   Active badge outlined green, the volume bar flat orange. The phone is
   unchanged. */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm.is-mgr .main:has(.body > #an-trends) :is(.bar, .body) { padding-inline: 24px; }
@media (min-width: 1024px) {
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #an-trends) .bar { padding: 28px max(32px, calc((100% - 1480px) / 2)) 16px; max-width: none; }
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #an-trends) .body { padding: 8px max(32px, calc((100% - 1480px) / 2)) 48px; max-width: none; gap: 16px; }
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #an-trends) .body > * { max-width: none; }
}
/* Trends */
:root:not(#z) body.desk-calm.is-mgr .tr {
  --tr-acc: var(--dk-accent-ink); --tr-link: var(--dk-accent-ink); --tr-bg: var(--dk-raised); --tr-card: var(--dk-card); --tr-raised: var(--dk-raised);
  --tr-track: var(--dk-line); --tr-grid: var(--dk-line); --tr-axis: var(--dk-line-2); --tr-line: var(--dk-line); --tr-line-2: var(--dk-line-2);
  --tr-text: var(--dk-ink); --tr-strong: var(--dk-ink); --tr-text-2: var(--dk-ink-2); --tr-muted: var(--dk-muted); --tr-faint: var(--dk-faint);
  --tr-up: var(--dk-ok-ink); --tr-down: var(--dk-err); --tr-bar: var(--dk-chart-prev); --tr-sel: var(--dk-card); --tr-hover: var(--dk-hover); --tr-tip: var(--dk-card);
  --tr-font: var(--dk-font); --tr-mono: var(--dk-font);
  font-family: var(--dk-font);
}
:root:not(#z) body.desk-calm.is-mgr .tr-head { border-bottom: 0; padding-bottom: 0; }
:root:not(#z) body.desk-calm.is-mgr .tr-title { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; }
:root:not(#z) body.desk-calm.is-mgr .tr-sub { margin-top: 2px; font: 400 13px/1.5 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .tr-card { border-radius: 14px; border-color: var(--dk-line); box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr .tr-card-head h3 { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; }
:root:not(#z) body.desk-calm.is-mgr .tr-k { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .tr-big { font: 650 28px/1.05 var(--dk-font); letter-spacing: -.025em; }
:root:not(#z) body.desk-calm.is-mgr .tr-big small { font: 500 13px/1 var(--dk-font); letter-spacing: 0; }
:root:not(#z) body.desk-calm.is-mgr .tr-big--text { font: 650 20px/1.25 var(--dk-font); letter-spacing: -.015em; }
:root:not(#z) body.desk-calm.is-mgr .tr-seg { gap: 2px; padding: 3px; border: 0; border-radius: 8px; background: var(--dk-raised); }
:root:not(#z) body.desk-calm.is-mgr .tr-seg button { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; color: var(--dk-muted); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .tr-seg button:hover { color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr :is(.tr-grid span, .tr-cap, .tr-vpct, .tr-vtotal span:last-child, .tr-tip-h span, .tr-tip-r b, .tr-tip-r em) { font-family: var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .tr-vhead { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; }
:root:not(#z) body.desk-calm.is-mgr .tr-tip { border-color: var(--dk-line-2); box-shadow: var(--dk-shadow-pop); }
:root:not(#z) body.desk-calm.is-mgr .tr-legend button[aria-pressed="true"] { border-color: var(--dk-accent); background: var(--dk-raised); }

/* the manager's general panel and table */
:root:not(#z) body.desk-calm.is-mgr .panel { padding: 18px 20px; background: var(--dk-card); background-image: none; border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none; font-family: var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .panel::before { display: none; }
:root:not(#z) body.desk-calm.is-mgr .panel__head { margin-bottom: 12px; }
:root:not(#z) body.desk-calm.is-mgr .panel__head h2 { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .muted { font: 400 13px/1.45 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .table { font: 400 14px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .table :is(th, td) { border-bottom-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .table th { background: var(--dk-card); color: var(--dk-muted); font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; }
:root:not(#z) body.desk-calm.is-mgr .table tbody tr:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .table .num { font-family: var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .table .who b { font-weight: 600; unicode-bidi: plaintext; }
:root:not(#z) body.desk-calm.is-mgr .ini { width: 32px; height: 32px; border-radius: 8px; background: var(--dk-raised); color: var(--dk-ink-2); box-shadow: inset 0 0 0 1px var(--dk-line-2); font: 600 12px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .sub { font: 400 12.5px/1.4 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .cellbar { height: 4px; background: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .cellbar > i { background: var(--dk-accent); }
:root:not(#z) body.desk-calm.is-mgr .badge { height: 22px; padding: 0 8px; border-radius: 99px; background: transparent; box-shadow: inset 0 0 0 1px var(--dk-line-2); color: var(--dk-ink-2); font: 500 12px/22px var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .badge--ok { background: transparent; color: var(--dk-ok-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-ok) 45%, transparent); }
:root:not(#z) body.desk-calm.is-mgr .badge--pend { background: transparent; color: var(--dk-warn-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-warn) 45%, transparent); }
:root:not(#z) body.desk-calm.is-mgr .empty { font: 400 14px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .empty b { color: var(--dk-ink); font: 600 15px/1.4 var(--dk-font); }
}

/* ══ THE MANAGER APP: PRODUCTS (v4.270) ══════════════════════════════════════
   The manager's Products list (.pd) and a product's sales page that opens over
   it (.pp, product-page.js; the manager page only: the rep app's copy keeps
   its look until the rep's product page has its own step): tokens (--pp-*)
   on Graphite, Inter, plain cards, small-caps headings at 12px, hairline
   rows, a quiet search and sort, Show more a quiet button, the period
   control in the selected state, the chart and rank bars flat orange,
   status chips outlined in their colour. The phone is unchanged. */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm.is-mgr .main:has(.body > #pdHost) :is(.bar, .body) { padding-inline: 24px; }
@media (min-width: 1024px) {
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #pdHost) .bar { padding: 28px max(32px, calc((100% - 1480px) / 2)) 16px; max-width: none; }
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #pdHost) .body { padding: 8px max(32px, calc((100% - 1480px) / 2)) 48px; max-width: none; }
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #pdHost) .body > * { max-width: none; }
}
:root:not(#z) body.desk-calm.is-mgr :is(.pp, .pd) {
  --pp-bg: var(--dk-bg); --pp-card: var(--dk-card); --pp-raised: var(--dk-raised); --pp-line: var(--dk-line); --pp-text: var(--dk-ink); --pp-muted: var(--dk-muted);
  --pp-acc: var(--dk-accent); --pp-acc-ink: var(--dk-on-accent); --pp-ok: var(--dk-ok-ink); --pp-bad: var(--dk-err); --pp-wait: var(--dk-warn-ink);
  font-family: var(--dk-font);
}
:root:not(#z) body.desk-calm.is-mgr .pp :focus-visible, :root:not(#z) body.desk-calm.is-mgr .pd :focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }
:root:not(#z) body.desk-calm.is-mgr :is(.pp-card, .pp-tile) { border-color: var(--dk-line); border-radius: 14px; box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr .pp-card { padding: 18px 20px; }
:root:not(#z) body.desk-calm.is-mgr .pp-tile { padding: 14px 16px; border-radius: 12px; }
:root:not(#z) body.desk-calm.is-mgr .pp-cardh h3 { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; unicode-bidi: plaintext; }
:root:not(#z) body.desk-calm.is-mgr :is(.pp-note, .pp-scope, .pp-empty, .pp-s, .pp-rs, .pp-d) { font-family: var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .pp-k { font: 500 12.5px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .pp-v { font: 650 22px/1.1 var(--dk-font); letter-spacing: -.02em; }
:root:not(#z) body.desk-calm.is-mgr .pp-v small { font: 500 12px/1 var(--dk-font); letter-spacing: 0; }
:root:not(#z) body.desk-calm.is-mgr .pp-cmp > div { background: transparent; border: 1px solid var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .pp-in { min-height: 34px; border-radius: 6px; border-color: var(--dk-line-2); background: var(--dk-card); color: var(--dk-ink); font: 400 14px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .pp-in:focus { outline: 0; border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); }
:root:not(#z) body.desk-calm.is-mgr .pp-lab { font: 500 12.5px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .pp-btn { min-height: 34px; padding: 0 14px; border-radius: 6px; border-color: var(--dk-line-2); color: var(--dk-ink); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .pp-btn:hover { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .pp-back { min-height: 34px; border-radius: 6px; border-color: var(--dk-line-2); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .pp-back:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .pp-ttl h2 { font: 650 20px/1.25 var(--dk-font); letter-spacing: -.015em; }
:root:not(#z) body.desk-calm.is-mgr .pp-kicker { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; }
:root:not(#z) body.desk-calm.is-mgr .pp-seg { gap: 2px; padding: 3px; border: 0; border-radius: 8px; background: var(--dk-raised); }
:root:not(#z) body.desk-calm.is-mgr .pp-seg button { min-height: 28px; padding: 0 10px; border-radius: 6px; color: var(--dk-muted); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .pp-seg button:hover { color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .pp-seg button[aria-pressed="true"] { background: var(--dk-card); color: var(--dk-ink); box-shadow: inset 0 -2px 0 var(--dk-accent), 0 1px 2px rgba(0, 0, 0, .25); }
:root:not(#z) body.desk-calm.is-mgr .pp-bar__fill { border-radius: 3px 3px 0 0; }
:root:not(#z) body.desk-calm.is-mgr .pp-bar__l { font: 500 12px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .pp-rowbtn { border-radius: 8px; border-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .pp-rowbtn:hover, :root:not(#z) body.desk-calm.is-mgr .pp-rowbtn:focus-visible { border-color: var(--dk-line-2); background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .pp-rn { font-weight: 600; unicode-bidi: plaintext; }
:root:not(#z) body.desk-calm.is-mgr .pp-wrap { border-color: var(--dk-line); border-radius: 10px; }
:root:not(#z) body.desk-calm.is-mgr .pp-tbl { font: 400 13.5px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .pp-tbl th { background: var(--dk-card); font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .pp-tbl tbody tr:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .pp-chip { font: 500 12px/1.3 var(--dk-font); border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm.is-mgr .pp-bar-top { background: var(--dk-card); border-bottom-color: var(--dk-line); }
}

/* ══ THE MANAGER APP: PRICING CONTROL (v4.271) ═══════════════════════════════
   Pricing control (pricing-control.js, .px): on the column; each section a
   plain card; Inter; quiet search, selects and price boxes (the price box
   takes the shared focus ring); the sync state a quiet pill with its colour
   in the text; badges outlined in their colour (Pinned keeps the brand
   colour, in the text); a changed pack's box and a pending row a thin orange
   edge; category groups hairline rows; Publish the one orange button. The
   view-only note a quiet bordered line. The phone is unchanged. */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm.is-mgr .main:has(.body > #pxHost) :is(.bar, .body) { padding-inline: 24px; }
@media (min-width: 1024px) {
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #pxHost) .bar { padding: 28px max(32px, calc((100% - 1480px) / 2)) 16px; max-width: none; }
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #pxHost) .body { padding: 8px max(32px, calc((100% - 1480px) / 2)) 48px; max-width: none; }
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #pxHost) .body > * { max-width: none; }
}
:root:not(#z) body.desk-calm.is-mgr .px { margin-top: 0; color: var(--dk-ink); font: 400 14px/1.45 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .px :focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }
:root:not(#z) body.desk-calm.is-mgr :is(.px-ro, .px-note) { padding: 10px 14px; border-radius: 10px; background: transparent; border: 1px solid var(--dk-line-2); color: var(--dk-ink-2); font: 400 13.5px/1.5 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .px-note { border: 0; padding: 0; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .px-head { gap: 8px; margin-bottom: 16px; }
:root:not(#z) body.desk-calm.is-mgr :is(.px-head input, .px-head select, .px-gq, .px-in) {
  height: 34px; border-radius: 6px; border: 1px solid var(--dk-line-2); background-color: var(--dk-card); color: var(--dk-ink); font: 400 14px/1 var(--dk-font); box-shadow: none;
}
:root:not(#z) body.desk-calm.is-mgr .px-in { font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr :is(.px-head input, .px-gq, .px-in):focus { outline: 0; border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); }
:root:not(#z) body.desk-calm.is-mgr .px-sync { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 99px; border-color: var(--dk-line-2); color: var(--dk-ink-2); font: 500 12px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .px-sync--live { color: var(--dk-ok-ink); border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm.is-mgr .px-sync--pending { color: var(--dk-warn-ink); border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm.is-mgr :is(.px-sync--offline, .px-sync--bad) { color: var(--dk-err); border-color: var(--dk-line-2); }
:root:not(#z) body.desk-calm.is-mgr .px-sec { padding: 18px 20px; margin-bottom: 16px; background: var(--dk-card); border: 1px solid var(--dk-line); border-radius: 14px; box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr .px-sec > h2 { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; margin-bottom: 12px; }
:root:not(#z) body.desk-calm.is-mgr .px-count { background: transparent; box-shadow: inset 0 0 0 1px var(--dk-line-2); color: var(--dk-ink-2); font: 500 12px/1.6 var(--dk-font); font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr :is(.px-empty, .px-mute, .px-hint) { color: var(--dk-muted); font-family: var(--dk-font); font-weight: 400; }
:root:not(#z) body.desk-calm.is-mgr .px-row { border-top-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .px-row.is-pending { background: transparent; border-radius: 0; box-shadow: inset 2px 0 0 var(--dk-accent); }
:root[dir="rtl"]:not(#z) body.desk-calm.is-mgr .px-row.is-pending { box-shadow: inset -2px 0 0 var(--dk-accent); }
:root:not(#z) body.desk-calm.is-mgr .px-star { width: 32px; height: 32px; border-radius: 6px; color: var(--dk-faint); }
:root:not(#z) body.desk-calm.is-mgr .px-star:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .px-star.is-on { color: var(--dk-accent-ink); }
:root:not(#z) body.desk-calm.is-mgr .px-name b { font-weight: 600; unicode-bidi: plaintext; }
:root:not(#z) body.desk-calm.is-mgr :is(.px-name small, .px-table small) { color: var(--dk-muted); font: 400 12.5px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .px-mv button { width: 30px; height: 30px; border-radius: 6px; border-color: var(--dk-line-2); background: transparent; color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .px-mv button:hover:not(:disabled) { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .px-pack { border-radius: 8px; border-color: var(--dk-line); background: transparent; }
:root:not(#z) body.desk-calm.is-mgr .px-pack.is-pending { border-color: var(--dk-accent); }
:root:not(#z) body.desk-calm.is-mgr .px-pl { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .px-pv { font: 650 18px/1.15 var(--dk-font); letter-spacing: -.015em; }
:root:not(#z) body.desk-calm.is-mgr :is(.px-pack small, .px-pack .px-mute) { font: 400 12px/1.35 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .px-pub { height: 34px; padding: 0 14px; border-radius: 6px; background: var(--dk-accent); color: var(--dk-on-accent); font: 600 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .px-pub:hover { filter: brightness(1.08); }
:root:not(#z) body.desk-calm.is-mgr .px-err { color: var(--dk-err); font: 500 12.5px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .px-b { padding: 0 8px; height: 20px; line-height: 20px; border-radius: 99px; background: transparent; box-shadow: inset 0 0 0 1px var(--dk-line-2); color: var(--dk-ink-2); font: 500 12px/20px var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr :is(.px-b--new, .px-b--up) { background: transparent; color: var(--dk-ok-ink); }
:root:not(#z) body.desk-calm.is-mgr .px-b--down { background: transparent; color: var(--dk-err); }
:root:not(#z) body.desk-calm.is-mgr :is(.px-b--pend, .px-b--freq) { background: transparent; color: var(--dk-warn-ink); }
:root:not(#z) body.desk-calm.is-mgr .px-b--pin { background: transparent; color: var(--dk-accent-ink); }
:root:not(#z) body.desk-calm.is-mgr .px-b--def { background: transparent; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .px-table th { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .px-table td { border-top-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .px-up { color: var(--dk-ok-ink); font-weight: 600; }
:root:not(#z) body.desk-calm.is-mgr .px-down { color: var(--dk-err); font-weight: 600; }
:root:not(#z) body.desk-calm.is-mgr .px-group { border-color: var(--dk-line); border-radius: 10px; }
:root:not(#z) body.desk-calm.is-mgr .px-gh { background: transparent; color: var(--dk-ink); font-family: var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .px-gh:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .px-gh b { font: 600 14px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .px-gc { font: 400 12.5px/1.3 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .px-gc--new { color: var(--dk-ok-ink); }
:root:not(#z) body.desk-calm.is-mgr .px-gc--pin { color: var(--dk-accent-ink); }
:root:not(#z) body.desk-calm.is-mgr .px-chev { color: var(--dk-faint); }
:root:not(#z) body.desk-calm.is-mgr .px-gb { border-top: 1px solid var(--dk-line); }
}

/* ══ THE MANAGER APP: SETTINGS (v4.272) ══════════════════════════════════════
   The manager's Settings: the shared settings list (.st, settings.js) takes the
   rep's v4.260 desktop rules (opened to this page; only the rep's page padding
   stays the rep's), its own heading a section title here (the page bar already
   says Settings) and its group labels at 12px; the Team settings panels
   (.panel, done in v4.269) with Inter rows and labels, the unit control a
   segmented control (the picked unit the card surface with the orange
   underline, the moving glider gone), number boxes and switches on Graphite
   with the shared focus ring, target rows hairlines. The phone is unchanged. */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm.is-mgr .main:has(.body > .set) :is(.bar, .body) { padding-inline: 24px; }
@media (min-width: 1024px) {
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > .set) .bar { padding: 28px max(32px, calc((100% - 1480px) / 2)) 16px; max-width: none; }
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > .set) .body { padding: 8px max(32px, calc((100% - 1480px) / 2)) 48px; max-width: none; }
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > .set) .body > * { max-width: none; }
}
:root:not(#z) body.desk-calm.is-mgr .set .st { max-width: none; }
:root:not(#z) body.desk-calm.is-mgr .set .st-bar { height: auto; min-height: 0; margin: 0 0 10px; }
:root:not(#z) body.desk-calm.is-mgr .set .st-bar h1 { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; }
:root:not(#z) body.desk-calm.is-mgr .st-group-label,
:root:not(#z) body.desk-calm.is-mgr .st-group-label--in { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .set__team { margin: 10px 2px 0; font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }

/* the Team settings panels */
:root:not(#z) body.desk-calm.is-mgr .set__row { padding: 14px 0; gap: 16px; border-bottom-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .set__lbl b { font: 500 14px/1.35 var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .set__lbl span { font: 400 12.5px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .hint { font: 400 13px/1.5 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .hint b { color: var(--dk-ink); font-family: var(--dk-font); font-weight: 600; font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .seg { min-width: 220px; padding: 3px; gap: 2px; border: 0; border-radius: 8px; background: var(--dk-raised); }
:root:not(#z) body.desk-calm.is-mgr .seg__glider { display: none; }
:root:not(#z) body.desk-calm.is-mgr .seg__btn { min-height: 28px; padding: 0 12px; border-radius: 6px; color: var(--dk-muted); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .seg__btn:hover { color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .seg__btn.is-on { background: var(--dk-card); color: var(--dk-ink); box-shadow: inset 0 -2px 0 var(--dk-accent), 0 1px 2px rgba(0, 0, 0, .25); }
:root:not(#z) body.desk-calm.is-mgr .fieldset > label { font: 500 13px/1.3 var(--dk-font); color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr .inp {
  min-height: 36px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--dk-line-2); background: var(--dk-card); color: var(--dk-ink);
  font: 400 14px/1 var(--dk-font); font-variant-numeric: tabular-nums;
}
:root:not(#z) body.desk-calm.is-mgr .inp::placeholder { color: var(--dk-faint); }
:root:not(#z) body.desk-calm.is-mgr .inp:hover:not(:focus) { border-color: var(--dk-faint); }
:root:not(#z) body.desk-calm.is-mgr .inp:focus { border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); }
:root:not(#z) body.desk-calm.is-mgr .inp-suffix { color: var(--dk-muted); font: 500 12.5px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .tgt__i .inp { min-height: 36px; }
:root:not(#z) body.desk-calm.is-mgr .tgt__row { border-top-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .tgt__n { font: 500 14px/1.35 var(--dk-font); unicode-bidi: plaintext; }
:root:not(#z) body.desk-calm.is-mgr .tgt__s { font: 400 12.5px/1.4 var(--dk-font); color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .sw { width: 40px; height: 24px; border: 1px solid var(--dk-line-2); background: var(--dk-line-2); }
:root:not(#z) body.desk-calm.is-mgr .sw::after { top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; background: var(--dk-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
:root:not(#z) body.desk-calm.is-mgr .sw[aria-pressed="true"] { background: var(--dk-accent); border-color: var(--dk-accent); }
:root:not(#z) body.desk-calm.is-mgr .sw[aria-pressed="true"]::after { background: #FFFFFF; transform: translateX(16px); }
:root[dir="rtl"]:not(#z) body.desk-calm.is-mgr .sw[aria-pressed="true"]::after { transform: translateX(-16px); }
:root:not(#z) body.desk-calm.is-mgr .sw:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }
:root:not(#z) body.desk-calm.is-mgr .set .btn { min-height: 34px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--dk-line-2); background: var(--dk-card); background-image: none; box-shadow: none; transform: none; color: var(--dk-ink); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .set .btn:hover { background: var(--dk-hover); transform: none; box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr .set :is(.btn--approve, .btn--grad) { border-color: var(--dk-accent); background: var(--dk-accent); color: var(--dk-on-accent); font-weight: 600; }
:root:not(#z) body.desk-calm.is-mgr .set :is(.btn--approve, .btn--grad):hover { background: var(--dk-accent); filter: brightness(1.08); }
:root:not(#z) body.desk-calm.is-mgr .set .btn--danger { color: var(--dk-err); border-color: color-mix(in srgb, var(--dk-err) 45%, var(--dk-line-2)); }
}

/* ══ THE MANAGER APP: A CALLS TEAM'S SCREENS (v4.273) ════════════════════════
   Only a calls team (Abdelrahman's) sees these: Sales breakdown (.sb) and the
   Team calls card on the dashboard (.cc, which wears the check-ins card .cf
   already on Graphite): tokens on Graphite, Inter, plain card, small-caps
   column headings at 12px, quiet filters and Download, the totals and the
   call stats hairline boxes, a call's outcome outlined in green. The phone
   is unchanged. */
@media (min-width: 768px) {
:root:not(#z) body.desk-calm.is-mgr .main:has(.body > #sbHost, .body > .sb) :is(.bar, .body) { padding-inline: 24px; }
@media (min-width: 1024px) {
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #sbHost, .body > .sb) .bar { padding: 28px max(32px, calc((100% - 1480px) / 2)) 16px; max-width: none; }
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #sbHost, .body > .sb) .body { padding: 8px max(32px, calc((100% - 1480px) / 2)) 48px; max-width: none; }
  :root:not(#z) body.desk-calm.is-mgr .main:has(.body > #sbHost, .body > .sb) .body > * { max-width: none; }
}
:root:not(#z) body.desk-calm.is-mgr .sb {
  --sb-card: var(--dk-card); --sb-raised: var(--dk-raised); --sb-line: var(--dk-line); --sb-text: var(--dk-ink); --sb-muted: var(--dk-muted);
  --sb-acc: var(--dk-accent); --sb-ink: var(--dk-on-accent);
  border-radius: 14px; box-shadow: none; font-family: var(--dk-font);
}
:root:not(#z) body.desk-calm.is-mgr .sb :focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }
:root:not(#z) body.desk-calm.is-mgr .sb-head { padding: 18px 20px 8px; }
:root:not(#z) body.desk-calm.is-mgr .sb-title { font: 600 16px/1.3 var(--dk-font); letter-spacing: -.01em; }
:root:not(#z) body.desk-calm.is-mgr .sb-sub { margin-top: 2px; font: 400 13px/1.5 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .sb-btn { min-height: 34px; padding: 0 14px; border-radius: 6px; border-color: var(--dk-line-2); background: var(--dk-card); color: var(--dk-ink); font: 500 13px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .sb-btn:hover:not([disabled]) { background: var(--dk-hover); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .sb-btn[disabled] { opacity: 1; color: var(--dk-faint); border-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .sb-filters { padding: 8px 20px 6px; }
:root:not(#z) body.desk-calm.is-mgr .sb-f > span { font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr :is(.sb-f select, .sb-f input) { min-height: 34px; border-radius: 6px; border-color: var(--dk-line-2); background-color: var(--dk-card); color: var(--dk-ink); font: 400 14px/1 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr :is(.sb-f select, .sb-f input):focus { outline: 0; border-color: var(--dk-accent-ink); box-shadow: 0 0 0 3px var(--dk-accent-wash); }
:root:not(#z) body.desk-calm.is-mgr .sb-sum { padding: 8px 20px 14px; }
:root:not(#z) body.desk-calm.is-mgr .sb-sum > div { border-radius: 10px; background: transparent; border-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .sb-sum b { font: 650 20px/1.15 var(--dk-font); letter-spacing: -.02em; }
:root:not(#z) body.desk-calm.is-mgr .sb-sum span { font: 400 12.5px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .sb-table { font: 400 13.5px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .sb-table th { background: var(--dk-card); font: 600 12px/1.3 var(--dk-font); letter-spacing: .05em; }
:root:not(#z) body.desk-calm.is-mgr .sb-table tfoot td { background: var(--dk-raised); font-weight: 600; }
:root:not(#z) body.desk-calm.is-mgr .sb-table tbody tr:hover { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .sb-empty { font: 400 14px/1.5 var(--dk-font); }

/* the Team calls card */
:root:not(#z) body.desk-calm.is-mgr .cc-stats { padding: 0 20px 12px; }
:root:not(#z) body.desk-calm.is-mgr .cc-stats > div { border-radius: 10px; background: transparent; border-color: var(--dk-line); }
:root:not(#z) body.desk-calm.is-mgr .cc-stats b { font: 650 20px/1.15 var(--dk-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm.is-mgr .cc-stats span { font: 400 12.5px/1.3 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .cc-idle { padding: 0 20px 12px; font: 400 13px/1.5 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .cc-list { padding: 0 10px 12px; }
:root:not(#z) body.desk-calm.is-mgr .cc-w b { font: 600 14px/1.3 var(--dk-font); unicode-bidi: plaintext; }
:root:not(#z) body.desk-calm.is-mgr .cc-w small { font: 400 12.5px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .cc-o { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dk-ok) 45%, transparent); color: var(--dk-ok-ink); font: 500 12px/1.4 var(--dk-font); }
:root:not(#z) body.desk-calm.is-mgr .cc-list time { font: 400 12.5px/1.3 var(--dk-font); font-variant-numeric: tabular-nums; }
}

/* ══ PHONE (below 768px, v4.276, the user: "now lets do the phones") ═════════════
   desk-phone.css (generated from the rules above, loaded before this file) gives a phone
   the same tokens and look; what follows is only what a phone has and a laptop does not:
   its bottom bar, its header, the phone Home, its cards. Same prefix, so these win. */
@media (max-width: 767px) {
:root:not(#z) body.desk-calm .bgfx { display: none; }
/* the top bar solid: nothing moves behind it on a phone, and a see-through colour-mix is a colour some readers cannot measure */
:root:not(#z) body.desk-calm .topbar { background: var(--dk-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* the bottom bar: its counts quiet, like the sidebar's */
:root:not(#z) body.desk-calm .rail__nav .navitem__badge {
  background: var(--dk-raised); border: 1px solid var(--dk-line-2); color: var(--dk-ink); box-shadow: none;
  font-family: var(--dk-font); font-weight: 600; font-variant-numeric: tabular-nums;
}
/* New order: the phone's one primary action, flat orange, dark text */
:root:not(#z) body.desk-calm .fab {
  background: var(--dk-accent); color: var(--dk-on-accent); border: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35); font-family: var(--dk-font); font-weight: 600;
}
:root[data-scheme="light"]:not(#z) body.desk-calm .fab { box-shadow: 0 8px 20px rgba(24, 24, 27, .18); }

/* ── Home (the phone's own: v4.231-v4.234) ── */
:root:not(#z) body.desk-calm.has-hsc:not(.is-mgr) #dh .dh-hello span { color: var(--dk-ink); }
:root:not(#z) body.desk-calm.has-hsc:not(.is-mgr) #dh :is(.dh-eyebrow, .dh-lead) { color: var(--dk-muted); }
/* Today (the manager: Team overview): three numbers in a row, no boxes (v4.232); the same parts serve both apps' phone Home */
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .home-today { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .today__ph-h { font-family: var(--dk-font); font-weight: 600; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .today__m { background: transparent; border: 0; box-shadow: none; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .today__m b { font-weight: 650; letter-spacing: -.02em; }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .today__m span { color: var(--dk-muted); font-weight: 500; }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .today__m.is-late b { color: var(--dk-err); }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .today__m.is-news b { color: var(--dk-accent-ink); }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) :is(.today__m, .today__more):active { background: var(--dk-hover); }
/* Quick actions and All tools: one neutral icon colour, as in the sidebar */
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) :is(.hsc-h h2, .hw-h, .hw-ttl) { font-family: var(--dk-font); font-weight: 600; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .hsc-edit { color: var(--dk-accent-ink); font-family: var(--dk-font); font-weight: 600; }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .hsc-t { color: var(--dk-ink); font-family: var(--dk-font); font-weight: 500; background: transparent; border: 0; box-shadow: none; }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) :is(.hsc-t svg, .hsc-all svg.hsc-all__i, .hw-i, .atl button svg, .scp-ic, .scp-pv svg) { stroke: var(--dk-ink-2); }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) :is(.hsc-t, .hsc-all, .hw-row, .hw-link):active { background: var(--dk-hover); }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .hsc-all { border-top-color: var(--dk-line); color: var(--dk-ink); font-family: var(--dk-font); }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) :is(.hsc-all small, .hsc-note, .hsc-empty, .hw-t small, .atl h3, .scp-sub, .scp-h, .scp-note, .scp-empty) { color: var(--dk-muted); }
/* Your dashboard: one hairline row per widget */
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .hw-list li + li .hw-row { border-top-color: var(--dk-line); }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .hw-row { color: var(--dk-ink); font-family: var(--dk-font); }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .hw-t b, :root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .hw-v { font-weight: 600; }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .hw-v { font-variant-numeric: tabular-nums; }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .hw-v.is-late { color: var(--dk-err); }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .hw-c { stroke: var(--dk-faint); }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .hw-link { color: var(--dk-accent-ink); font-family: var(--dk-font); font-weight: 600; border-color: var(--dk-line); }
/* All tools and Edit shortcuts (sheets) */
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .atl button { background: var(--dk-card); border: 1px solid var(--dk-line); color: var(--dk-ink); font-family: var(--dk-font); font-weight: 500; }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .scp-box-in { background: var(--dk-card); border: 1px solid var(--dk-line-2); color: var(--dk-ink); font-family: var(--dk-font); }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .scp-foot { border-top-color: var(--dk-line); }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) :is(.scp-mv, .scp-btn, .scp-pv, .scp-count) { border-color: var(--dk-line-2); background: transparent; color: var(--dk-ink); }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .scp-btn--pri { background: var(--dk-accent); border-color: var(--dk-accent); color: var(--dk-on-accent); }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .scp-row.is-on .scp-check { border-color: var(--dk-accent); background: var(--dk-raised); }
:root:not(#z) body.desk-calm:is(.is-rep, .is-mgr) .scp-count.is-full { border-color: var(--dk-accent); }
/* the manager's phone header (v4.235) */
:root:not(#z) body.desk-calm.is-mgr .mph { font-family: var(--dk-font); color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr .mph-hello span { color: var(--dk-ink); }
:root:not(#z) body.desk-calm.is-mgr :is(.mph-date, .mph-lead) { color: var(--dk-muted); }
:root:not(#z) body.desk-calm.is-mgr .mph-pill { border-color: var(--dk-line-2); color: var(--dk-ink-2); font-family: var(--dk-font); font-weight: 500; }
:root:not(#z) body.desk-calm.is-mgr .mph-pill i { background: var(--dk-warn); }
:root:not(#z) body.desk-calm.is-mgr .mph-pill.is-live i { background: var(--dk-ok); box-shadow: none; }
:root:not(#z) body.desk-calm.is-mgr .mph-ib { color: var(--dk-ink-2); }
:root:not(#z) body.desk-calm.is-mgr :is(.mph-ib, .mph-pill):active { background: var(--dk-hover); }
:root:not(#z) body.desk-calm.is-mgr .mph-dot { background: var(--dk-accent); box-shadow: 0 0 0 2px var(--dk-bg); }
:root:not(#z) body.desk-calm.is-mgr .atl .atl-pin { color: var(--dk-faint); font-style: normal; }
/* a rep's page on a narrow phone: "45% of 13 decided" in Inter is wider than the face it was sized for; it wraps */
:root:not(#z) body.desk-calm.is-mgr :is(.tm-v, .tm-v small) { white-space: normal; }
/* Analytics' industry names on a narrow phone: one size down so "Metalworking" fits its column, and never cut */
:root:not(#z) body.desk-calm.is-mgr .tr-vname { font-size: 13px; overflow: visible; }
/* three figures across: Inter is wider than the condensed face they were sized for, so a product name as a
   figure ("Petromix Compressor Oil") was split inside a word */
:root:not(#z) body.desk-calm:not(.is-mgr) .lo__kpis--3 .lo-kpi__v { font-size: 16px; letter-spacing: -.01em; }
}