/* hub/hub-ui.css: GENERATED copy of docs/shared/hub-core/hub-ui.css (tools/sync-hub-core.mjs, since 2026-11-02).
   Loaded after styles.css, so it beats a hub's older rail rules. Colours come from each hub's own tokens and
   currentColor, so every hub keeps its own look.

   DIRECTION  a trading desk at night (Yassin's reference, 2026-11-02): near-black with a blue cast and one faint glow in the corner, hairlines instead of boxes, large quiet titles
   PALETTE    bg #08090c · surface #0f1014 · hairline #1f2127 · text #f2f3f5 / #8f94a0 · each hub's accent only for state
   TYPE       Instrument Sans (no serif in hubs); titles 500, tight; figures tabular
   SIGNATURE  the open row's pill brightens toward its end, where a short bar marks it
   MOTION     the sidebar's width, and a product image growing out of its thumbnail
   Dark only: a hub's light theme stays what it was. */

/* ---- The whole hub, dark ---- */
html[data-theme="dark"]{ color-scheme:dark;
  --bg:#08090c; --ink:#f2f3f5; --text-1:#f2f3f5; --muted:#8f94a0; --text-2:#a6aab4; --text-3:#696e79;
  --line:#1f2127; --rowline:#16181d; --hairline:#16181d; --hoverbg:#15171c; --hover:#15171c;
  --card:#0f1014; --paper:#0f1014; --surface:#0f1014; --card-line:#1d1f25; --on-ink:#0b0c10;
  --dk-surface:#16181d; --dk-line:#262930; --dk-text2:#c7cad1;
  --sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; --serif:var(--sans);
  --red:#f0564a; --red-hover:#d9483d; --neg:#f0564a; --red-tint:rgba(240,86,74,.12); --red-tint-line:rgba(240,86,74,.28);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-card:0 0 0 1px #1d1f25; --shadow-hero:0 0 0 1px #1d1f25;
  --elev-1:0 0 0 1px #1d1f25; --elev-2:0 0 0 1px #2b2e36, 0 18px 40px -22px rgba(0,0,0,.9); --elev-hi:0 0 0 1px #2b2e36, 0 26px 60px -24px rgba(0,0,0,.95);
  --side-bg:#0b0c10; --side-fg:#f2f3f5; --side-muted:#8f94a0; --side-hover:#15171c; --side-active:#1b1d23; --side-line:#1f2127;
  --at-title-font:var(--sans); --at-title-weight:500; --at-title-track:-.035em; --at-figure-font:var(--sans); --at-lead-color:var(--ink);
  --at-paper:#0f1014; --at-raised:#14161b; --at-hero-bg:#14161b; --at-rule:#1f2127; --at-rule-2:#2b2e36; --at-ink-2:#c7cad1; --at-muted-2:#767b86;
  --at-lift:0 0 0 1px #2b2e36, 0 18px 40px -22px rgba(0,0,0,.9);
  --at-topbar-glass:rgba(8,9,12,.72); --at-topbar-shadow:0 1px 0 #16181d;
  --at-rail-on-bg:#f2f3f5; --at-rail-on-fg:#0b0c10; --at-rail-on-shadow:none; --at-rail-on-label:#f2f3f5;
  --at-track:rgba(255,255,255,.05); --at-track-hover:rgba(255,255,255,.09); --at-chip:rgba(255,255,255,.06);
  --at-chosen:#f2f3f5; --at-chosen-fg:#0b0c10; --at-bar:#c7cad1; --at-img-bg:#16181d; --at-rank-bg:rgba(15,16,20,.92); --at-mono-bg:#16181d; --at-vvip-fg:#0b0c10; }
html[data-theme="dark"] body{ color:var(--ink); font-family:var(--sans);
  background:radial-gradient(1100px 620px at 8% -12%, rgba(122,126,204,.17), transparent 62%), #08090c fixed; }
html[data-theme="dark"] #rail{ background:linear-gradient(180deg, #11121a, #0a0b0f 46%); color:var(--side-muted); box-shadow:inset -1px 0 0 #1a1c22; }
html[data-theme="dark"] #topbar{ border-bottom:0; }
html[data-theme="dark"] .panel, html[data-theme="dark"] .kpi, html[data-theme="dark"] .trend-panel,
html[data-theme="dark"] .rep-action, html[data-theme="dark"] .co-driver{ border:0; border-radius:18px;
  background:linear-gradient(180deg, #121319, #0d0e12); box-shadow:0 0 0 1px #1d1f25, inset 0 1px 0 rgba(255,255,255,.035); }
html[data-theme="dark"] .view-title{ font-size:clamp(32px,3vw,44px); font-weight:500; letter-spacing:-.035em; color:#f7f8f9; text-transform:none; }
html[data-theme="dark"] .lead-title{ color:var(--muted); font-weight:400; font-size:13px; letter-spacing:0; text-transform:none; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea{ background-color:#0c0d11; color:var(--ink); border-color:#262930; }
html[data-theme="dark"] ::placeholder{ color:var(--text-3); }
/* The theme switch: a track with the sun and the moon at its ends, and a knob that slides to the one in use. */
.theme-btn, html[data-theme="dark"] .theme-btn{ position:relative; display:inline-flex; align-items:center; justify-content:space-between; flex:none; width:60px; height:30px; padding:0 8px;
  border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--muted); cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease; }
.theme-btn:hover{ border-color:color-mix(in srgb, var(--ink) 40%, transparent); color:var(--muted); }
.theme-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.theme-btn::before{ content:''; position:absolute; top:3px; left:3px; width:24px; height:22px; border-radius:999px; background:var(--ink);
  box-shadow:0 2px 6px rgba(0,0,0,.28); transition:transform .32s cubic-bezier(.3,1.35,.5,1); }
html[data-theme="dark"] .theme-btn::before{ transform:translateX(30px); }
/* Both icons always show, in both themes, whatever an older hub rule says (#theme-btn beats them): sun left, moon right. */
#theme-btn svg, #theme-btn .ic-sun, #theme-btn .ic-moon{ position:relative; z-index:1; display:block; width:14px; height:14px; flex:none; transition:color .2s ease; }
#theme-btn .ic-sun{ order:1; color:var(--on-ink, #fff); }
#theme-btn .ic-moon{ order:2; color:var(--muted); }
html[data-theme="dark"] #theme-btn .ic-sun{ color:var(--muted); }
html[data-theme="dark"] #theme-btn .ic-moon{ color:var(--on-ink, #0b0c10); }
#theme-btn .theme-lbl{ position:absolute; order:3; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

/* ---- The sidebar ---- */
#rail{ width:248px; align-items:stretch; gap:0; padding:18px 14px; transition:width .24s cubic-bezier(.22,1,.36,1); overflow-x:hidden; }
/* The logo is the sidebar's centrepiece; the collapse button sits out of its way in the corner. */
.rail-brand{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:84px; padding:6px 0 0; text-align:center; }
.rail-logo{ width:150px; max-width:calc(100% - 64px); height:auto; }
.rail-logo-df{ max-height:72px; width:auto; border-radius:10px; }
.rail-mark .mark{ width:54px; height:54px; }
.rail-word{ font-size:16px; }
.rail-collapse{ position:absolute; top:-4px; inset-inline-end:-2px; flex:none; width:30px; height:30px; display:grid; place-items:center; padding:0; border-radius:9px; cursor:pointer;
  background:transparent; color:inherit; border:1px solid color-mix(in srgb, currentColor 22%, transparent);
  transition:background-color .15s ease, transform .24s cubic-bezier(.22,1,.36,1); }
.rail-collapse svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rail-collapse:hover{ background:color-mix(in srgb, currentColor 12%, transparent); }
.rail-collapse:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }

.rail-welcome{ margin:24px 4px 22px; padding-bottom:20px; text-align:center; border-bottom:1px solid color-mix(in srgb, currentColor 16%, transparent); }
.rail-hello{ margin:0; font:500 21px/1.15 var(--sans); letter-spacing:-.02em; color:var(--at-rail-on-label, inherit); }
.rail-who{ margin:6px 0 0; font:400 12px/1.3 var(--sans); opacity:.68; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.rail-groups{ gap:18px; }
.rail-sec{ display:flex; flex-direction:column; gap:3px; }
.rail-sec-label{ margin:0 4px 5px; font:400 12px/1.2 var(--sans); opacity:.62; white-space:nowrap; }
.rail-btn{ flex-direction:row; justify-content:flex-start; gap:11px; min-height:42px; padding:0 12px; border-radius:11px; text-align:start;
  font:500 14px/1.2 var(--sans); letter-spacing:-.005em; white-space:nowrap; transition:background-color .15s ease, color .15s ease; }
.rail-ic, .rail-btn.on .rail-ic{ width:22px; height:22px; flex:none; border-radius:0; background:transparent; box-shadow:none; color:inherit; }
.rail-btn:hover .rail-ic{ background:transparent; }
.rail-btn:active .rail-ic{ transform:none; }
.rail-btn .ni, .rail-btn.on .ni{ width:20px; height:20px; stroke-width:1.8; }
.rail-btn:hover{ background:color-mix(in srgb, currentColor 8%, transparent); }
.rail-btn:active{ background:color-mix(in srgb, currentColor 13%, transparent); }
.rail-btn.on{ font-weight:500; color:var(--at-rail-on-label, inherit);
  background:linear-gradient(95deg, color-mix(in srgb, currentColor 6%, transparent), color-mix(in srgb, currentColor 20%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }
.rail-btn.on::after{ content:''; position:absolute; inset-inline-end:10px; top:50%; width:2px; height:14px; margin-top:-7px; border-radius:2px; background:currentColor; }
.rail-dot{ top:-2px; right:-3px; }
#rail-ind{ display:none; }

/* Switch account at the sidebar's foot. */
.rail-foot{ margin-top:auto; padding-top:18px; }
.rail-foot .switch-acct{ display:flex; align-items:center; justify-content:flex-start; gap:11px; width:100%; min-height:42px; padding:0 12px; border:0; border-top:1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius:0; background:transparent; color:inherit; font:500 14px/1.2 var(--sans); text-decoration:none; white-space:nowrap; transition:color .15s ease, background-color .15s ease; }
.rail-foot .switch-acct:hover{ background:color-mix(in srgb, currentColor 8%, transparent); }
.rail-foot .switch-acct .ni{ width:20px; height:20px; flex:none; }
@media (min-width:761px){ .topbar-me .switch-acct{ display:none; } }
body.rail-min .rail-foot .switch-acct{ justify-content:center; padding:0; }
body.rail-min .rail-foot .switch-acct span{ display:none; }

/* Closed: icons only. Every row still names itself through its title and aria-label. */
body.rail-min #rail{ width:76px; }
body.rail-min .rail-logo, body.rail-min .rail-mark, body.rail-min .rail-word,
body.rail-min .rail-welcome, body.rail-min .rail-lbl, body.rail-min .rail-sec-label{ display:none; }
body.rail-min .rail-brand{ min-height:30px; padding:0; margin-bottom:28px; }
body.rail-min .rail-collapse{ position:static; }
body.rail-min .rail-collapse{ transform:rotate(180deg); }
body.rail-min .rail-btn{ justify-content:center; padding:0; }
body.rail-min .rail-btn.on::after{ inset-inline-end:5px; }
body.rail-min .rail-sec + .rail-sec{ padding-top:14px; border-top:1px solid color-mix(in srgb, currentColor 14%, transparent); }

@media (max-width:1100px){ #rail{ width:208px; } }

/* ---- Switching pages: the page glides in; the lit row and tab change softly. ---- */
#content > section.page-in-up{ animation:pageInUp .42s cubic-bezier(.22,1,.36,1) backwards; }
#content > section.page-in-next{ animation:pageInNext .42s cubic-bezier(.22,1,.36,1) backwards; }
#content > section.page-in-prev{ animation:pageInPrev .42s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes pageInUp{ from{ opacity:0; transform:translateY(22px) scale(.992); } }
@keyframes pageInNext{ from{ opacity:0; transform:translateX(34px); } }
@keyframes pageInPrev{ from{ opacity:0; transform:translateX(-34px); } }
[dir="rtl"] #content > section.page-in-next{ animation-name:pageInPrev; }
[dir="rtl"] #content > section.page-in-prev{ animation-name:pageInNext; }
#subnav .nav-item{ transition:color .2s ease; }

/* ---- The button worth pressing ---- */
.spark-btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; isolation:isolate;
  transition:transform .2s cubic-bezier(.2,1.25,.4,1), box-shadow .2s ease, background-color .2s ease; }
.spark-btn .ni{ width:15px; height:15px; flex:none; transition:transform .45s cubic-bezier(.2,1.25,.4,1); }
.spark-btn::before{ content:''; position:absolute; z-index:-1; top:0; bottom:0; left:-60%; width:50%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent); }
.spark-btn:hover:not(:disabled){ transform:translateY(-2px) scale(1.025); box-shadow:0 14px 28px -12px rgba(0,0,0,.55); }
.spark-btn:hover:not(:disabled) .ni{ transform:rotate(72deg) scale(1.18); }
.spark-btn:hover:not(:disabled)::before{ left:115%; transition:left .65s cubic-bezier(.22,1,.36,1); }
.spark-btn:active:not(:disabled){ transform:translateY(0) scale(.98); }
.spark-btn:disabled::before{ left:-60%; animation:spark-busy 1.5s linear infinite; }
.spark-btn:disabled .ni{ animation:spark-spin 2.4s linear infinite; }
@keyframes spark-busy{ to{ left:115%; } }
@keyframes spark-spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  #rail, .spark-btn, .spark-btn .ni, .rail-collapse, .theme-btn::before{ transition:none; }
  .spark-btn::before, .spark-btn:disabled .ni{ animation:none; display:none; }
  .spark-btn:disabled .ni{ display:inline-block; }
  .spark-btn:hover:not(:disabled){ transform:none; }
}

/* Paper is white: a printed voucher never follows the dark theme. */
@media print{
  html[data-theme="dark"]{ color-scheme:light; --bg:#fff; --card:#fff; --paper:#fff; --surface:#fff; --ink:#141516; --text-1:#141516; --muted:#70726e; --text-2:#44464a;
    --line:#e3e3de; --rowline:#eeeeea; --card-line:#e9e9e4; --on-ink:#fff; --dk-text2:#44464a; --dk-surface:#f4f4f2; --dk-line:#e3e3de; }
  html[data-theme="dark"] body{ background:#fff; color:#141516; }
  #rail{ display:none; }
}


/* =====================================================================================
   THE macOS LAYER (Yassin, 2026-11-04: "any UI update is universal"): the hubs as a native
   Mac app, on every Figi hub at once. Shell: a frosted sidebar with a filled rounded selection,
   a frosted toolbar, the pill rows as segmented controls, 8 px controls with a soft raise and a
   wide soft focus ring, thin scrollbars, the theme wipe (theme.js swap). Pages: the Shopping
   hero TILES and the ruled "Most missed" ledger, and the Messages-style Assistant window.
   Both themes. Every colour is a token: the --mac-* roles below fall back from the Figi Trade
   names (--text-1 ...) to the brand hubs' (--ink, --muted, --red), so one rule fits every hub.
   The only literal colours are the three window lights (system colours, not brand colours).
   Each hub's old rules for the same selectors are reset at the end, so a brand hub's styles.css
   needs no edit when the look changes: change it HERE, run tools/sync-hub-core.mjs.
   ===================================================================================== */
:root{
  --mac-ink:var(--text-1, var(--ink)); --mac-muted:var(--text-2, var(--muted)); --mac-faint:var(--text-3, var(--muted));
  --mac-bad:var(--bad, var(--red)); --mac-warn:var(--warn, var(--at-warn)); --mac-scrim:var(--scrim, rgba(0,0,0,.5));
  --mac-bg:var(--bg); --mac-ease:cubic-bezier(.22,1,.36,1);
  --mac-close:#ff5f57; --mac-min:#febc2e; --mac-zoom:#28c840;
  --mac-r:8px;
  --mac-raise:0 1px 2px color-mix(in oklch, var(--mac-ink) 10%, transparent), inset 0 1px 0 color-mix(in oklch, var(--mac-bg) 60%, transparent);
  --mac-ring:0 0 0 3.5px color-mix(in oklch, var(--mac-ink) 16%, transparent);
  --mac-glass:color-mix(in oklch, var(--at-paper) 72%, transparent);
}
html[data-theme="dark"]{ --mac-raise:0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); }

/* ---- The theme switch: the new theme spreads out of the switch (theme.js swap) ---- */
html.theme-wipe::view-transition-old(root), html.theme-wipe::view-transition-new(root){ animation:none; mix-blend-mode:normal; }
html.theme-wipe::view-transition-old(root){ z-index:1; }
html.theme-wipe::view-transition-new(root){ z-index:2; animation:macThemeWipe .55s cubic-bezier(.22,1,.36,1); }
@keyframes macThemeWipe{ from{ clip-path:circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); } to{ clip-path:circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 0)); } }
/* No view transitions (Firefox): every colour crossfades instead. */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after{
  transition:background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease, fill .4s ease, stroke .4s ease !important; }

/* ---- Thin overlay scrollbars ---- */
html{ scrollbar-width:thin; scrollbar-color:color-mix(in oklch, var(--mac-ink) 22%, transparent) transparent; }
#content *, #as-log, #as-sessions{ scrollbar-width:thin; scrollbar-color:color-mix(in oklch, var(--mac-ink) 22%, transparent) transparent; }

/* ---- Sidebar: the glass pane (Yassin, 2026-11-05, approved on Figi Trade). A frosted pane floating on the page, a misty
   wallpaper tint behind it, a plain collapse button in the top-right corner (2026-11-07: the traffic lights are gone), section
   labels in grey, the open row a pane of glass. Same in every hub and in the client template. ---- */
#rail{ --glass-ink:#1d1f23; --glass-icon:#3f4348; --glass-label:rgba(29,31,35,.55); --glass-rule:rgba(29,31,35,.1);
  --glass-hover:rgba(255,255,255,.28);
  --glass-on:rgba(255,255,255,.52); --glass-on-ring:inset 0 0 0 1px rgba(255,255,255,.8), 0 1px 3px rgba(40,52,64,.1);
  position:sticky; top:10px; height:calc(100vh - 20px); width:256px; margin:10px 0 10px 10px; padding:18px 12px 12px; isolation:isolate; overflow:hidden;
  border-radius:24px; color:var(--glass-ink);
  background:linear-gradient(180deg, rgba(226,235,241,.78), rgba(214,224,228,.72) 42%, rgba(205,211,205,.74) 72%, rgba(217,221,218,.8));
  backdrop-filter:blur(30px) saturate(1.6); -webkit-backdrop-filter:blur(30px) saturate(1.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 0 0 1px rgba(40,52,64,.1), 0 18px 44px -24px rgba(40,52,64,.4); }
/* The slow light behind the glass: two soft layers, larger than the pane, drifting on different clocks. */
#rail::before, #rail::after{ content:''; position:absolute; inset:-30%; z-index:-1; pointer-events:none; will-change:transform; }
#rail::before{ background:radial-gradient(46% 24% at 30% 56%, rgba(88,108,78,.42), transparent 72%), radial-gradient(40% 20% at 72% 22%, rgba(255,255,255,.8), transparent 72%);
  animation:glassDriftA 20s ease-in-out infinite alternate; }
#rail::after{ background:radial-gradient(44% 20% at 68% 76%, rgba(96,128,152,.36), transparent 72%), radial-gradient(34% 16% at 26% 26%, rgba(150,180,200,.3), transparent 72%);
  animation:glassDriftB 27s ease-in-out infinite alternate; }
@keyframes glassDriftA{ from{ transform:translate3d(-11%,-13%,0) scale(1); } to{ transform:translate3d(12%,14%,0) scale(1.14); } }
@keyframes glassDriftB{ from{ transform:translate3d(11%,13%,0) scale(1.1); } to{ transform:translate3d(-12%,-14%,0) scale(.94); } }
html[data-theme="dark"] #rail{ --glass-ink:#ececee; --glass-icon:#c9cace; --glass-label:rgba(236,236,238,.5); --glass-rule:rgba(255,255,255,.09);
  --glass-hover:rgba(255,255,255,.05);
  --glass-on:rgba(255,255,255,.04); --glass-on-ring:inset 0 0 0 1px rgba(255,255,255,.15), inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.4);
  color:var(--glass-ink);
  background:linear-gradient(180deg, rgba(50,51,54,.82), rgba(32,33,35,.84) 42%, rgba(24,25,27,.88));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 0 0 1px rgba(0,0,0,.5), 0 18px 44px -22px rgba(0,0,0,.85); }
html[data-theme="dark"] #rail::before{ background:radial-gradient(44% 22% at 72% 18%, rgba(255,255,255,.24), transparent 72%), radial-gradient(50% 24% at 26% 60%, rgba(190,205,220,.15), transparent 72%); }
html[data-theme="dark"] #rail::after{ background:radial-gradient(46% 22% at 66% 78%, rgba(150,175,200,.22), transparent 72%), radial-gradient(36% 17% at 24% 30%, rgba(255,255,255,.13), transparent 72%); }

/* The collapse button (Yassin, 2026-11-07: "remove the macos three dots from the sidebar and turn into a normal
   collapse icon on the top right"): a sidebar-panel icon in the pane's top-right corner, centred at the top when the
   sidebar is closed. Quiet until hovered, like the rest of the pane's buttons. */
#rail .rail-brand{ position:static; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:0; padding:34px 8px 0; text-align:center; }
#rail .rail-mark .mark{ width:46px; height:46px; }
#rail .rail-word{ font:500 15px/1.1 var(--sans); letter-spacing:-.01em; color:var(--glass-ink); }
#rail .rail-logo, #rail .rail-logo-df{ width:auto; max-width:150px; max-height:60px; height:auto; }
#rail .rail-logo-df{ border-radius:10px; }
#rail .rail-collapse{ position:absolute; top:12px; inset-inline-end:12px; inset-inline-start:auto; width:32px; height:32px; padding:0; border:0; border-radius:9px;
  display:grid; place-items:center; color:var(--glass-icon); background:transparent; box-shadow:none; transform:none; cursor:pointer;
  transition:background-color .15s ease, color .15s ease; }
#rail .rail-collapse svg{ width:18px; height:18px; margin:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transform:none; }
#rail .rail-collapse:hover{ color:var(--glass-ink); background:var(--glass-hover); }
#rail .rail-collapse:focus-visible{ outline:2px solid var(--glass-ink); outline-offset:1px; }

#rail .rail-welcome{ margin:16px 8px 20px; padding:0 0 16px; text-align:center; border-bottom:1px solid var(--glass-rule); }
#rail .rail-hello{ font:500 13px/1.2 var(--sans); letter-spacing:0; color:var(--glass-ink); }
#rail .rail-who{ margin-top:3px; font-size:11.5px; color:var(--glass-label); opacity:1; }

#rail .rail-groups{ gap:20px; }
#rail .rail-sec{ gap:2px; }
#rail .rail-sec-label{ margin:0 12px 5px; font:500 12px/1.2 var(--sans); color:var(--glass-label); opacity:1; }
#rail .rail-btn{ min-height:38px; padding:0 12px; gap:10px; border-radius:12px; font:500 14px/1.2 var(--sans); color:var(--glass-ink); background:transparent; box-shadow:none;
  transition:background-color .16s ease, box-shadow .16s ease; }
#rail .rail-btn .ni, #rail .rail-btn.on .ni{ width:18px; height:18px; color:var(--glass-icon); }
#rail .rail-btn:hover{ background:var(--glass-hover); }
#rail .rail-btn.on, #rail .rail-btn.on:hover{ background:var(--glass-on); color:var(--glass-ink); box-shadow:var(--glass-on-ring); }
#rail .rail-btn.on::after{ display:none; }
#rail .rail-btn:focus-visible{ outline:2px solid var(--glass-ink); outline-offset:1px; }

#rail .rail-foot .switch-acct, html[data-theme="dark"] #rail .rail-foot .switch-acct{ min-height:38px; padding:0 12px; border:0; border-radius:12px; background:transparent; box-shadow:none; font:500 14px/1.2 var(--sans); color:var(--glass-ink); }
#rail .rail-foot{ padding-top:10px; border-top:1px solid var(--glass-rule); }
#rail .rail-foot .switch-acct:hover{ background:var(--glass-hover); }

body.rail-min #rail{ width:76px; padding-inline:10px; }
body.rail-min #rail .rail-brand{ padding:0; min-height:30px; margin-bottom:20px; }
body.rail-min #rail .rail-collapse{ top:12px; inset-inline-end:auto; inset-inline-start:calc(50% - 16px); }
body.rail-min #rail .rail-brand{ padding-top:48px; }
/* The pane's width glides open or shut after a click (body.rail-anim, hub-ui.js), so a page that loads closed does not move. */
body.rail-anim #rail{ transition:width .45s cubic-bezier(.22,1,.36,1); }
body.rail-min #rail .rail-btn{ padding:0; }
@media (prefers-reduced-motion: reduce){ #rail .rail-btn, #rail .rail-collapse, body.rail-anim #rail{ transition:none; } #rail::before, #rail::after{ animation:none; } }

/* ---- Toolbar: frosted, flat ---- */
#topbar{ background:color-mix(in oklch, var(--mac-bg) 76%, transparent); backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4); }
/* The band runs the FULL window width (Yassin, 2026-11-07: "the black horizontal header should cover full width from
   the beginning"): #topbar starts where the floating sidebar ends, so this pseudo carries the same background, blur,
   hairline and shadow a whole viewport to the LEFT of it, under the sidebar and the strip beside it. The sidebar
   (z-index 20) sits on top of it (#topbar is 15). Nothing to measure, so it holds while the pane glides open or shut,
   when it is collapsed, while scrolling (inherit follows #topbar.scrolled), and on a phone, where it is simply off screen. */
#topbar::before{ content:''; position:absolute; top:0; bottom:0; right:100%; width:100vw; pointer-events:none;
  background:inherit; border-bottom:inherit; box-shadow:inherit; transition:inherit;
  backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4); }
.switch-acct{ border-radius:7px; padding:5px 11px; box-shadow:var(--mac-raise); }
#subnav .nav-item{ font-size:13px; }

/* ---- Sheets: a hairline and a deep, soft shadow ---- */
.panel, .trend-panel, .ledger, .strip, .square, .brand-card, .co-drv, .drawer{ border-radius:12px; }
html[data-theme="dark"] .panel, html[data-theme="dark"] .trend-panel, html[data-theme="dark"] .co-driver{ border-radius:12px; }
.drawer, #ov-ad-panel:not([hidden]), .adp-pop{ box-shadow:0 0 0 1px var(--line), 0 30px 80px -30px var(--mac-scrim); }

/* ---- Segmented controls: the pill rows (shared ids) and .seg groups ---- */
#tabs, #st-period-tabs, #stats-tabs, #fin-pills, #fb-period-tabs, #filters, #o-filters, #yo-filters, .gf-gran, .fin-gran{ padding:2px; border-radius:9px; background:var(--at-track); }
#tabs .tab, #st-period-tabs .tab, #stats-tabs .tab, #fin-pills .tab, #fb-period-tabs .tab, #filters .chip, #o-filters .chip, #yo-filters .chip, .gf-gran .seg-btn, .fin-gran .seg-btn{
  min-height:28px; padding:0 12px; border-radius:7px; font:500 12.5px/1 var(--sans); letter-spacing:0; text-transform:none; }
#tabs .tab.on, #st-period-tabs .tab.on, #stats-tabs .tab.on, #fin-pills .tab.on, #fb-period-tabs .tab.on, #filters .chip.on, #o-filters .chip.on, #yo-filters .chip.on, .gf-gran .seg-btn.on, .fin-gran .seg-btn.on{
  letter-spacing:0; background:var(--at-paper); color:var(--mac-ink); }
.slide-ind, .seg .slide-ind{ border-radius:7px; background:var(--at-paper); box-shadow:var(--at-ring), var(--mac-raise); }
.slide-on > .on{ color:var(--mac-ink) !important; }
#cu-sort .seg-btn, #co-period .seg-btn{ border-radius:7px; }

/* ---- Controls: 8 px radius, the soft raise, the wide soft focus ring ---- */
.refresh-btn, .export, .exp-cancel, .more-btn, .co-hand-go, .sa-btn, .cu-chip, .view-link, .drawer-close, .drawer-btn, button.need, .brand-card .bc-open{ border-radius:var(--mac-r); }
#cu-search, .cu-form input, .cu-form select, .cu-form textarea, .co-hand-in input, .co-hand-in select{ border-radius:var(--mac-r); }
#cu-search:focus-visible, .cu-form input:focus-visible, .cu-form select:focus-visible, .cu-form textarea:focus-visible, .co-hand-in input:focus-visible, .co-hand-in select:focus-visible{
  outline:0; box-shadow:inset 0 0 0 1px var(--mac-faint), var(--mac-ring); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline:0; box-shadow:var(--mac-ring); }
.rail-btn:focus-visible, .theme-btn:focus-visible, .rail-collapse:focus-visible{ outline:0; box-shadow:var(--mac-ring); }
.status, .brand-chip{ border-radius:999px; }

/* ---- Phone menu as a sheet ---- */
@media (max-width:899px){
  #phone-menu{ color:var(--mac-ink); background:linear-gradient(180deg, rgba(232,239,244,.96), rgba(222,230,233,.96) 45%, rgba(214,220,215,.97)); backdrop-filter:blur(30px) saturate(1.6); -webkit-backdrop-filter:blur(30px) saturate(1.6); }
  html[data-theme="dark"] #phone-menu{ background:linear-gradient(180deg, rgba(50,51,54,.97), rgba(32,33,35,.97) 42%, rgba(24,25,27,.98)); }
  .pm-item{ min-height:44px; border-radius:7px; }
  .pm-item, .pm-head{ color:var(--mac-ink); }
  .pm-head{ color:var(--mac-muted); }
  .pm-item{ border-radius:12px; }
  .pm-item.on::before{ content:none; }
  .pm-item.on{ background:rgba(255,255,255,.55); color:var(--mac-ink); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8), 0 1px 3px rgba(40,52,64,.1); }
  html[data-theme="dark"] .pm-item.on{ background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15), inset 0 1px 0 rgba(255,255,255,.08); }
}

@media (prefers-reduced-motion:reduce){
  html.theme-wipe::view-transition-new(root){ animation:none; }
  html.theme-fade, html.theme-fade *{ transition:none !important; }
}

/* ---- Shopping: hero tiles, the buy-list ledger, the Most missed ledger ---- */
.shop-row .thumb, .sh-panel .thumb, .mp-grid .thumb{ width:44px; height:44px; flex:none; object-fit:cover; border-radius:10px; background:var(--at-img-bg);
  box-shadow:inset 0 0 0 1px color-mix(in oklch, var(--mac-ink) 7%, transparent); }

/* Hero tiles */
.shop-heroes{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.shop-hero{ position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; background:var(--at-paper); border-radius:14px;
  box-shadow:var(--at-ring); color:inherit; text-decoration:none; transition:box-shadow .18s var(--mac-ease), transform .18s var(--mac-ease); }
a.shop-hero:hover{ box-shadow:var(--at-lift); transform:translateY(-1px); }
.shop-hero-img{ display:grid; place-items:center; aspect-ratio:4/3; overflow:hidden; background:var(--at-img-bg); }
#shopping-view .shop-hero-img .thumb, .shop-hero-img .thumb{ width:100%; height:100%; border-radius:0; box-shadow:none; }
#shopping-view .shop-hero-img span.thumb, .shop-hero-img span.thumb{ width:38%; height:38%; border-radius:14px; background:color-mix(in oklch, var(--mac-ink) 5%, transparent); }
.shop-hero-body{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:12px 14px 14px; }
.shop-hero-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; width:100%; }
.shop-share{ flex:none; text-align:end; font:500 20px/1 var(--sans); letter-spacing:-.02em; color:var(--mac-ink); font-variant-numeric:tabular-nums; }
.shop-share small{ display:block; margin-top:3px; font-size:10.5px; font-weight:400; letter-spacing:0; color:var(--mac-faint); }
.shop-hero-stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; width:100%; padding-top:9px; border-top:1px solid var(--at-rule);
  font-size:11px; color:var(--mac-faint); }
.shop-hero-stats span{ min-width:0; }
.shop-hero-stats b{ display:block; margin-bottom:1px; font-weight:500; font-size:13px; color:var(--mac-ink); font-variant-numeric:tabular-nums; }
.shop-stock, .status-chip, .cover-chip{ display:inline-flex; align-items:center; gap:6px; flex:none; min-height:22px; padding:0 9px 0 7px; border-radius:999px;
  background:var(--at-chip); font:500 11.5px/1 var(--sans); color:var(--mac-muted); white-space:nowrap; }
.shop-stock::before, .status-chip::before, .cover-chip::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--mac-faint); }
.shop-stock.low, .cover-chip.low{ color:var(--mac-warn); }
.shop-stock.low::before, .cover-chip.low::before{ background:var(--mac-warn); }
.shop-stock.oos, .status-chip.oos, .cover-chip.urgent{ background:var(--at-bad-tint); color:var(--mac-bad); }
.shop-stock.oos::before, .status-chip.oos::before, .cover-chip.urgent::before{ background:var(--mac-bad); }
.shop-star{ font-size:11px; color:var(--mac-faint); }
.shop-name{ flex:1; min-width:0; font:500 13.5px/1.3 var(--sans); color:var(--mac-ink); overflow-wrap:anywhere; }
.shop-name a{ color:inherit; text-decoration:none; }
.shop-name a:hover{ text-decoration:underline; }
.shop-sub{ display:block; margin-top:2px; font-size:12px; font-weight:400; color:var(--mac-muted); }
.shop-sel{ display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:28px; min-height:28px; cursor:pointer; }
.shop-sel input{ width:17px; height:17px; margin:0; accent-color:var(--mac-ink); cursor:pointer; }
.shop-sel.hero{ position:absolute; top:8px; inset-inline-end:8px; z-index:2; border-radius:8px; background:color-mix(in oklch, var(--at-paper) 82%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:var(--at-ring); }

/* Vendor bar + the buy-list ledger */
.shop-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 10px; }
.shop-bar label{ font:500 12px var(--sans); color:var(--mac-muted); }
.shop-bar select{ min-height:32px; max-width:100%; padding:0 26px 0 10px; border:0; border-radius:var(--mac-r); background:var(--at-raised); box-shadow:var(--at-ring), var(--mac-raise);
  font:500 13px var(--sans); color:var(--mac-ink); appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:right 13px top 13px, right 9px top 13px; background-size:4px 4px, 4px 4px; background-repeat:no-repeat; }
.shop-bar select:focus-visible{ outline:0; box-shadow:var(--at-ring), var(--mac-ring); }
.shop-summary{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-inline-start:auto; font-size:12.5px; color:var(--mac-muted); }
.shop-summary strong{ font-weight:600; color:var(--mac-ink); font-variant-numeric:tabular-nums; }
.shop-group-title{ margin:18px 0 0; padding:0 0 6px; font:500 12px var(--sans); color:var(--mac-muted); }
.shop-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 0; border-top:1px solid var(--at-rule); }
.shop-row .shop-name{ flex:1 1 180px; }
.shop-qty{ margin-left:auto; flex:none; min-width:72px; text-align:end; font:500 17px/1.1 var(--sans); letter-spacing:-.02em; color:var(--mac-ink); font-variant-numeric:tabular-nums; }
.shop-qty small{ display:block; margin-top:2px; font-weight:400; font-size:11px; letter-spacing:0; color:var(--mac-faint); }
.shop-toggle{ min-height:34px; margin-top:12px; padding:0 14px; border:0; border-radius:var(--mac-r); background:var(--at-raised); box-shadow:var(--at-ring), var(--mac-raise);
  font:500 12.5px var(--sans); color:var(--mac-ink); cursor:pointer; }
.shop-toggle:hover{ background:var(--at-track-hover); }
.shop-export-bar{ position:sticky; bottom:12px; z-index:5; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 14px;
  margin:0 0 20px; padding:10px 12px 10px 16px; border-radius:14px; background:color-mix(in oklch, var(--at-paper) 84%, transparent);
  backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4); box-shadow:var(--at-ring), 0 18px 40px -18px var(--mac-scrim); }
.shop-sel-count{ font:600 13px var(--sans); color:var(--mac-ink); }
.shop-export-actions{ display:flex; flex-wrap:wrap; gap:8px; }

.shop-waiting{ max-width:620px; margin:8px 0 32px; padding:20px; background:var(--at-paper); border-radius:14px; box-shadow:var(--at-ring); }
.shop-wait-title{ margin:0 0 6px; font:500 17px/1.25 var(--sans); letter-spacing:-.01em; color:var(--mac-ink); }
.shop-wait-body{ margin:0 0 12px; font-size:13.5px; line-height:1.5; color:var(--mac-muted); }
.shop-wait-body strong{ font-weight:600; color:var(--mac-ink); }

/* Most missed and Auto-drafted (FigiHome only): the pieces of a product tile (the tile layout itself is
   further down, "Most missed: tiles"). The demand count is the tile's figure; the hairline bar shows it
   against the most-asked product. */
.mp-grid .dead-name{ flex:1; min-width:0; font:500 13.5px/1.3 var(--sans); color:var(--mac-ink); overflow-wrap:anywhere; }
.mp-grid .dead-sub{ display:block; margin-top:2px; font-size:11.5px; font-weight:400; color:var(--mac-muted); }
.mp-count{ flex:none; width:40px; text-align:center; font:500 18px/1 var(--sans); letter-spacing:-.02em; color:var(--mac-ink); font-variant-numeric:tabular-nums; }
.mp-count small{ display:block; margin-top:3px; font-size:10px; font-weight:400; letter-spacing:0; color:var(--mac-faint); }
.mp-link{ color:inherit; text-decoration:none; }
.mp-link:hover{ text-decoration:underline; }
.mp-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:3px; font-size:11.5px; font-weight:400; color:var(--mac-muted); }
.mp-state{ display:inline-flex; align-items:center; min-height:18px; padding:0 7px; border-radius:999px; background:var(--at-chip); font:500 11px/1 var(--sans); color:var(--mac-muted); }
.mp-state-out{ background:var(--at-bad-tint); color:var(--mac-bad); }
.mp-bar{ display:block; width:min(100%, 260px); height:3px; margin-top:7px; border-radius:2px; background:var(--at-rule); overflow:hidden; }
.mp-bar i{ display:block; width:var(--demand, 0%); height:100%; border-radius:2px; background:var(--mac-ink); }
.mp-wait{ display:none; flex:none; text-align:end; font:400 11.5px/1.3 var(--sans); color:var(--mac-muted); white-space:nowrap; }
.mp-wait b{ display:block; font-weight:500; font-size:14px; color:var(--mac-ink); font-variant-numeric:tabular-nums; }
.mp-wait small{ display:block; font-size:11px; color:var(--mac-faint); }
.mp-x{ flex:none; width:30px; height:30px; border:0; border-radius:var(--mac-r); background:none; color:var(--mac-faint); font:500 13px var(--sans); cursor:pointer;
  transition:background-color .15s ease, color .15s ease, opacity .15s ease; }
.mp-x:hover{ background:var(--at-track); color:var(--mac-ink); }
.mp-off{ opacity:.55; }
.mp-off .mp-bar{ display:none; }
.mp-toggle, #shopping-view .view-all{ display:block; min-height:36px; margin-top:8px; padding:0 4px; border:0; background:none;
  font:500 12.5px var(--sans); color:var(--mac-muted); cursor:pointer; }
.mp-grid > .view-all{ margin:0; padding:0 14px; text-align:start; border-top:1px solid var(--at-rule); }
.mp-toggle:hover, #shopping-view .view-all:hover{ color:var(--mac-ink); text-decoration:underline; }
@media (min-width:600px){ .shop-heroes{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:900px){
  .shop-heroes{ grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)); }
  .shop-row{ flex-wrap:nowrap; padding:10px 8px; }
  .shop-row .shop-name{ flex:1 1 auto; }
  .mp-wait{ display:block; min-width:92px; }
}
@media (hover:hover){
  .mp-x{ opacity:0; }
  .dead:hover .mp-x, .mp-x:focus-visible, .mp-off .mp-x{ opacity:1; }
}


/* ---- Assistant: the window (restyled Codex-like below, "THE ANALYST, CODEX STYLE", 2026-11-07) ---- */
.panel.as-panel{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr); grid-template-areas:"bar" "rail" "main";
  height:calc(100dvh - 190px); min-height:460px; padding:0; overflow:hidden; border:0; border-radius:14px; background:var(--at-paper);
  box-shadow:var(--at-ring), 0 30px 80px -34px var(--mac-scrim); }
html[data-theme="dark"] .panel.as-panel{ border-radius:14px; background:var(--at-paper); box-shadow:var(--at-ring), inset 0 1px 0 color-mix(in oklch, var(--mac-ink) 5%, transparent), 0 30px 80px -34px var(--mac-scrim); }

/* Title bar */
.as-bar{ grid-area:bar; display:flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; border-bottom:1px solid var(--at-rule);
  background:color-mix(in oklch, var(--at-paper) 72%, transparent); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4); }
.as-title{ flex:1; min-width:0; text-align:center; font:600 13px/1.2 var(--sans); color:var(--mac-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; unicode-bidi:plaintext; }
.as-bar::after{ content:''; flex:none; width:50px; }

/* Sidebar */
#as-rail{ grid-area:rail; display:flex; flex-direction:row; align-items:center; gap:4px; min-width:0; min-height:0; overflow:hidden;
  border-bottom:1px solid var(--at-rule); background:color-mix(in oklch, var(--mac-bg) 55%, var(--at-paper)); }
.as-new{ flex:none; min-height:30px; margin:8px 6px 8px 10px; padding:0 12px; border:0; border-radius:var(--mac-r); background:var(--at-raised);
  box-shadow:var(--at-ring), var(--mac-raise); color:var(--mac-ink); font:500 12.5px var(--sans); white-space:nowrap; cursor:pointer;
  transition:background-color .15s var(--mac-ease), color .15s var(--mac-ease); }
.as-new:hover{ background:var(--mac-ink); color:var(--mac-bg); }
.as-rail-label{ display:none; padding:6px 18px 4px; font:600 11px/1.2 var(--sans); color:var(--mac-faint); }
#as-sessions{ display:flex; flex-direction:row; flex:1; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
#as-sessions::-webkit-scrollbar{ display:none; }
.as-sess{ position:relative; display:flex; align-items:center; gap:8px; flex:none; max-width:180px; min-height:40px; margin:4px 2px; padding:6px 10px;
  border-radius:7px; font-family:var(--sans); cursor:pointer; transition:background-color .12s ease; }
.as-sess:hover{ background:var(--at-track); }
.as-sess.on{ background:var(--mac-ink); color:var(--mac-bg); }
.as-sess-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:var(--mac-muted); }
.as-sess.on .as-sess-title{ color:inherit; font-weight:500; }
.as-sess-date{ display:none; flex:none; font-size:11px; color:var(--mac-faint); }
.as-sess.on .as-sess-date{ color:inherit; opacity:.7; }
.as-sess-del{ flex:none; min-width:22px; min-height:22px; padding:0 4px; border:0; border-radius:6px; background:none; font:500 11px var(--sans); color:inherit; opacity:.6; cursor:pointer; }
.as-sess-del:hover{ background:color-mix(in oklch, currentColor 14%, transparent); opacity:1; }
.as-sess-del.arm{ background:var(--at-bad-tint); color:var(--mac-bad); font-size:10.5px; font-weight:600; padding:3px 8px; opacity:1; }
.as-rail-empty{ padding:12px 14px; font:400 12px var(--sans); color:var(--mac-faint); white-space:nowrap; }

/* The conversation */
.as-main{ grid-area:main; display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--at-paper); }
#as-log{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:18px 16px; }
.as-msg{ max-width:82%; padding:9px 13px; border:0; border-radius:18px; font:400 13.5px/1.5 var(--sans); color:var(--mac-ink); overflow-wrap:anywhere;
  animation:asPop .28s cubic-bezier(.2,1.2,.4,1) backwards; transform-origin:50% 100%; }
@keyframes asPop{ from{ opacity:0; transform:translateY(8px) scale(.94); } }
.as-msg bdi{ unicode-bidi:plaintext; display:block; }
/* Each line and each cell takes its own direction: an answer mixes Arabic lines with brand names. */
.as-msg bdi > div, .as-table th, .as-table td{ unicode-bidi:plaintext; text-align:start; }
.as-user{ align-self:flex-end; background:var(--mac-ink); color:var(--mac-bg); border-end-end-radius:5px; }
.as-bot{ align-self:flex-start; background:color-mix(in oklch, var(--mac-ink) 8%, var(--at-paper)); border-end-start-radius:5px; }
.as-user + .as-user, .as-bot + .as-bot{ margin-top:-2px; }
/* The bullet is text, not a positioned dot, so it lands on the line's own start in either direction. */
.as-li::before{ content:'•'; margin-inline-end:8px; color:var(--mac-faint); }
.as-gap{ height:6px; }
.as-loading{ padding:20px; font:400 13px var(--sans); color:var(--mac-muted); }
.as-table-wrap{ max-width:100%; margin:6px 0; overflow-x:auto; }
.as-table{ border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums; }
.as-table th, .as-table td{ padding:5px 10px; border-bottom:1px solid color-mix(in oklch, var(--mac-ink) 12%, transparent); text-align:start; white-space:nowrap; }
.as-table th{ font-weight:500; color:var(--mac-muted); }
.as-user .as-table th{ color:inherit; opacity:.7; }
.as-user .as-table th, .as-user .as-table td{ border-bottom-color:color-mix(in oklch, var(--mac-bg) 20%, transparent); }

.as-empty{ margin:auto; max-width:520px; padding:20px 8px; text-align:center; }
.as-empty-title{ font:500 20px/1.3 var(--sans); letter-spacing:-.02em; color:var(--mac-ink); }
.as-empty-sub{ margin:8px 0 18px; font:400 12.5px var(--sans); color:var(--mac-muted); }
.as-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.as-chip{ min-height:38px; padding:8px 14px; border:0; border-radius:999px; background:var(--at-track);
  font:400 13px var(--sans); color:var(--mac-ink); cursor:pointer; transition:background-color .15s var(--mac-ease), color .15s var(--mac-ease); }
.as-chip:hover{ background:var(--mac-ink); color:var(--mac-bg); }

#as-form{ display:flex; align-items:flex-end; gap:8px; padding:10px 12px 12px; border-top:1px solid var(--at-rule);
  background:color-mix(in oklch, var(--at-paper) 80%, transparent); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
#as-input{ flex:1; min-width:0; min-height:38px; max-height:120px; padding:9px 14px; border:0; border-radius:19px; background:var(--mac-bg); color:var(--mac-ink);
  box-shadow:inset 0 0 0 1px var(--at-rule-2); font:400 16px/1.4 var(--sans); resize:none; transition:box-shadow .15s ease; }
#as-input::placeholder{ color:var(--mac-faint); }
#as-input:focus{ outline:0; box-shadow:inset 0 0 0 1px var(--mac-faint), var(--mac-ring); }
#as-send{ flex:none; display:grid; place-items:center; width:38px; height:38px; padding:0; border:0; border-radius:50%; background:var(--mac-ink); color:var(--mac-bg); cursor:pointer;
  transition:transform .15s cubic-bezier(.2,1.25,.4,1), opacity .15s ease; }
#as-send svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
#as-send:hover:not(:disabled){ transform:scale(1.08); }
#as-send:active:not(:disabled){ transform:scale(.95); }
#as-send:disabled{ opacity:.35; cursor:default; }
.as-dots{ display:inline-flex; gap:4px; padding:5px 2px; }
.as-dots i{ width:7px; height:7px; border-radius:50%; background:var(--mac-faint); animation:asDot 1.1s infinite ease-in-out; }
.as-dots i:nth-child(2){ animation-delay:.15s; }
.as-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes asDot{ 0%,100%{ opacity:.3; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }
@media (prefers-reduced-motion:reduce){
  .as-dots i, .as-msg, .as-guide{ animation:none; }
}
@media (min-width:900px){
  .panel.as-panel{ grid-template-columns:240px minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); grid-template-areas:"rail bar" "rail main"; height:calc(100vh - 200px); }
  #as-rail{ flex-direction:column; align-items:stretch; gap:0; border-bottom:0; border-inline-end:1px solid var(--at-rule);
    backdrop-filter:blur(30px) saturate(1.5); -webkit-backdrop-filter:blur(30px) saturate(1.5); }
  .as-new{ margin:12px 12px 8px; }
  .as-rail-label{ display:block; }
  #as-sessions{ flex-direction:column; overflow-x:hidden; overflow-y:auto; padding:0 8px 8px; }
  .as-sess{ max-width:none; margin:1px 0; padding:7px 10px; }
  .as-sess-date{ display:inline; }
  .as-sess-del{ opacity:0; }
  .as-sess:hover .as-sess-del, .as-sess-del:focus-visible, .as-sess-del.arm{ opacity:.8; }
  #as-log{ padding:22px 20px; }
  .as-msg{ max-width:72%; }
  #as-input{ font-size:13.5px; }
}


/* ---- The brief sits bare on the page; what needs you (newly out of stock, cancelled, stuck orders)
   is a row of BLOCKS next to each other (Yassin, 2026-11-04), each a small sheet, never inside a box ---- */
.brief, html[data-theme="dark"] .brief{ padding:0; background:transparent; box-shadow:none; border:0; border-radius:0; }
.needs{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:20px; max-width:none; }
.need, .need:hover{ position:relative; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:4px; min-height:0; padding:14px 40px 14px 16px;
  border:0; border-radius:14px; background:var(--at-paper); box-shadow:var(--at-ring); text-align:start; }
.need:hover{ box-shadow:var(--at-lift); }
.need-n{ font-size:30px; line-height:1; }
.need-t{ width:100%; }
.need-t b{ font-size:13.5px; }
.need-go{ position:absolute; top:12px; inset-inline-end:14px; margin:0; }
.need:focus-visible{ box-shadow:var(--mac-ring); }
@media (min-width:600px){ .needs{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:900px){ .needs{ grid-template-columns:repeat(auto-fit, minmax(200px, 250px)); } }

/* ---- Courier cards: the same card on every hub, FigiHome's shape (Yassin, 2026-11-04): a sheet, the avatar and
   an outlined "out now" chip in the head, the outcomes donut beside a dense stat list, the money as ruled
   key/value rows, the legend under. Figi Trade's .co-drv-* and FigiHome's .drv-* are styled as one ---- */
.drv-card, .co-drv, html[data-theme="dark"] .co-driver{ padding:14px 16px; border:0; border-radius:14px; background:var(--at-paper); box-shadow:var(--at-ring); }
.drv-card.drv-total, .co-drv.co-drv-total{ box-shadow:0 0 0 2px var(--mac-ink); }
.drv-head, .co-drv-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.drv-avatar, .co-drv-avatar{ width:34px; height:34px; border-radius:50%; background:var(--mac-ink); color:var(--mac-bg); font:600 14px var(--sans); display:inline-flex; align-items:center; justify-content:center; flex:none; box-shadow:none; }
.drv-total .drv-avatar, .co-drv-total .co-drv-avatar{ background:var(--at-paper); color:var(--mac-ink); box-shadow:inset 0 0 0 2px var(--mac-ink); }
.drv-name, .co-drv-head .co-name{ flex:1; min-width:0; margin:0; font:600 15px/1.2 var(--sans); letter-spacing:-.01em; color:var(--mac-ink); }
.drv-outnow, .co-drv-out, .co-drv-hint, .drv-flip-hint{ flex:none; display:inline-flex; align-items:center; gap:6px; min-height:24px; padding:2px 9px; border-radius:7px;
  background:transparent; box-shadow:inset 0 0 0 1px var(--mac-ink); font:600 10.5px/1 var(--sans); color:var(--mac-ink); white-space:nowrap; }
.co-drv-hint, .drv-flip-hint{ box-shadow:inset 0 0 0 1px var(--line); color:var(--mac-muted); font-weight:500; }
.drv-live, .co-drv-live{ font-size:8.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mac-bad); }
.co-drv-dot{ width:6px; height:6px; border-radius:50%; background:var(--mac-bad); }
.drv-body, .co-drv-body{ display:flex; align-items:center; gap:14px; }
.drv-donut, .co-drv-donut{ flex:none; width:112px; height:112px; }
.drv-donut-num, .co-drv-donut-num{ font:600 22px var(--sans); fill:var(--mac-ink); }
.drv-donut-lbl, .co-drv-donut-lbl{ font:500 8.5px var(--sans); letter-spacing:.08em; text-transform:uppercase; fill:var(--mac-muted); }
.drv-stats, .co-drv-stats{ display:grid; flex:1; gap:6px; min-width:0; }
.drv-stat, .co-drv-stat{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:0 10px; font:400 12.5px/1.35 var(--sans); color:var(--mac-ink); }
.co-drv-stat .k{ color:var(--mac-muted); }
.co-drv-stat .v, .drv-stat b{ font-weight:600; font-variant-numeric:tabular-nums; color:var(--mac-ink); }
.co-drv-stat .v small, .drv-mut{ font-weight:400; font-size:11px; color:var(--mac-muted); }
.drv-money, .co-drv-money{ display:flex; flex-direction:column; gap:5px; padding:8px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.drv-mrow, .co-drv-mrow{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font:400 12.5px/1.3 var(--sans); }
.drv-mrow .k, .co-drv-mrow .k{ color:var(--mac-muted); font-size:11.5px; }
.drv-mrow .v, .co-drv-mrow .v{ font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--mac-ink); }
.drv-mrow .v small, .co-drv-mrow .v small{ font-weight:400; font-size:10px; color:var(--mac-muted); }
.drv-msub, .co-drv-msub{ margin-top:-3px; text-align:end; font:400 10.5px var(--sans); color:var(--mac-muted); font-variant-numeric:tabular-nums; }
.drv-mnet, .co-drv-mnet{ padding-top:5px; border-top:1px dashed var(--line); }
.drv-mnet .k, .co-drv-mnet .k{ color:var(--mac-ink); font-weight:600; }
.co-drv-mrow .v[data-tone="unknown"]{ color:var(--mac-muted); font-weight:400; }
.drv-legend, .co-drv-legend{ display:flex; flex-wrap:wrap; gap:4px 10px; margin:10px 0 0; }
.drv-leg, .co-drv-leg{ display:inline-flex; align-items:center; gap:4px; font:400 10.5px var(--sans); color:var(--mac-muted); white-space:nowrap; }
.drv-leg i, .co-drv-leg i{ width:8px; height:8px; flex:none; border-radius:2px; }
.co-drv-note{ margin:10px 0 0; font:400 12px var(--sans); color:var(--mac-warn); }
.co-drv .co-hand{ margin-top:12px; }

/* ---- The Meta panel's metric cards (Yassin, 2026-11-04: "the Meta sub cards need padding"): the four
   KPI cards and the detail stats get room to breathe, sentence-case labels, the same radius as every sheet ---- */
#ad-kpis .cm-card, .cust-metrics .cm-card{ padding:20px 22px 18px; }
#ad-kpis .cm-value{ margin-top:12px; }
#ad-kpis .cm-sub{ margin-top:8px; }
.ad-details{ gap:12px; margin-top:16px; }
.ad-stat{ display:flex; flex-direction:column; justify-content:flex-start; min-height:96px; padding:16px 18px 14px; border:0; border-radius:12px; background:var(--at-paper); box-shadow:var(--at-ring); }
.ad-stat-v{ font:500 20px/1.1 var(--sans); letter-spacing:-.02em; color:var(--mac-ink); }
.ad-stat-l{ margin-top:6px; font:500 12px/1.3 var(--sans); letter-spacing:0; text-transform:none; color:var(--mac-muted); }
.ad-stat-h{ margin-top:3px; font:400 11.5px/1.35 var(--sans); color:var(--mac-faint); }

/* ---- The date range picker (range-format.js + hub-ui.js startRangePickers), beside a period row on the
   Figi Trade Overview, the brand hubs' Stats and Couriers: one button, a calendar popover in the hub's own tokens (both
   themes), the picked span as a soft band with its two ends in ink, today ringed, future days faint ---- */
.ov-period-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:0 0 18px; }
.ov-period-row > #st-period-tabs, .ov-period-row > #tabs, .ov-period-row > #stats-tabs, .ov-period-row > #cr-period-tabs{ margin-bottom:0; }
.ov-range, .cr-range{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0; }
.rp{ position:relative; display:inline-block; }
.rp-btn{ display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:0 12px 0 10px; border:0; border-radius:var(--mac-r);
  background:var(--at-raised); color:var(--mac-ink); box-shadow:var(--at-ring), var(--mac-raise); font:500 12.5px var(--sans); cursor:pointer;
  transition:background-color .15s ease, color .15s ease; }
.rp-btn:hover{ background:var(--at-track-hover); }
.rp-btn.on{ background:var(--mac-ink); color:var(--mac-bg); }
.rp-btn[aria-expanded="true"]{ box-shadow:var(--at-ring), var(--mac-ring); }
.rp-ic{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
.rp-pop{ position:absolute; top:calc(100% + 8px); left:0; z-index:60; width:304px; padding:12px 12px 10px; border-radius:16px; background:var(--at-paper);
  box-shadow:0 0 0 1px var(--line), 0 30px 70px -24px var(--mac-scrim), 0 10px 24px -12px var(--mac-scrim); transform-origin:top left; animation:rpIn .18s cubic-bezier(.2,1.2,.4,1); }
@keyframes rpIn{ from{ opacity:0; transform:translateY(-4px) scale(.97); } }
.rp-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px; }
.rp-month{ font:600 13.5px var(--sans); letter-spacing:-.01em; color:var(--mac-ink); }
.rp-nav{ width:30px; height:30px; border:0; border-radius:8px; background:transparent; color:var(--mac-muted); font:400 18px/1 var(--sans); cursor:pointer; }
.rp-nav:hover:not(:disabled){ background:var(--at-track); color:var(--mac-ink); }
.rp-nav:disabled{ opacity:.3; cursor:default; }
.rp-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:2px 0; }
.rp-dow{ padding:4px 0 6px; text-align:center; font:600 10.5px var(--sans); color:var(--mac-faint); }
.rp-day{ position:relative; height:36px; border:0; border-radius:9px; background:transparent; color:var(--mac-ink); font:500 13px var(--sans); font-variant-numeric:tabular-nums; cursor:pointer; }
.rp-day:hover:not(:disabled){ background:var(--at-track-hover); }
.rp-day.out{ color:var(--mac-faint); }
.rp-day.future{ color:var(--mac-faint); opacity:.45; cursor:default; }
.rp-day.today::after{ content:''; position:absolute; left:50%; bottom:5px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--mac-ink); }
.rp-day.in{ border-radius:0; background:color-mix(in oklch, var(--mac-ink) 10%, transparent); }
.rp-day.start, .rp-day.end{ background:var(--mac-ink); color:var(--mac-bg); z-index:1; }
.rp-day.start.end{ border-radius:9px; }
.rp-day.start:not(.end){ border-radius:9px 0 0 9px; }
.rp-day.end:not(.start){ border-radius:0 9px 9px 0; }
.rp-day.start.today::after, .rp-day.end.today::after{ background:var(--mac-bg); }
.rp-foot{ display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.rp-sel{ flex:1; min-width:0; font:400 12px var(--sans); color:var(--mac-muted); }
.rp-clear{ border:0; background:transparent; color:var(--mac-muted); font:500 12.5px var(--sans); padding:6px 8px; border-radius:7px; cursor:pointer; }
.rp-clear:hover{ background:var(--at-track); color:var(--mac-ink); }
.rp-apply{ min-height:30px; padding:0 14px; border:0; border-radius:var(--mac-r); background:var(--mac-ink); color:var(--mac-bg); font:600 12.5px var(--sans); cursor:pointer; }
.rp-apply:disabled{ opacity:.35; cursor:default; }
.ov-range-msg{ font:400 12px var(--sans); color:var(--mac-bad); }
.ov-range-msg:empty{ display:none; }
.ov-custom-note{ margin:4px 0 0; font:400 13px/1.5 var(--sans); color:var(--mac-muted); }
@media (max-width:359px){ .rp-pop{ width:calc(100vw - 20px); } }
@media (prefers-reduced-motion:reduce){ .rp-pop{ animation:none; } }

/* ---- Resets of the brand hubs' older rules for the same selectors (hub-ui.css loads last) ---- */
.shop-hero, .shop-hero.urgent-row{ border:0; padding:0; }
.shop-hero-img .thumb, .shop-hero-img .thumb:hover{ transform:none; }
.shop-row{ border-radius:0; }
.shop-row:hover{ background:transparent; transform:none; box-shadow:none; }
.shop-row.urgent-row{ border-left:0; padding-left:0; box-shadow:none; }
.shop-sel.hero{ left:auto; right:8px; padding:0; border:0; }
.shop-bar label, .shop-group-title, .mp-toggle, .mp-state{ text-transform:none; letter-spacing:0; }
.shop-bar select{ border:0; }
.shop-stock, .status-chip, .cover-chip, .mp-state, .shop-toggle, .as-chip, .as-new, .as-msg, #as-input, #as-send{ border:0; }
.mp-count, .mp-off .mp-count{ background:none; padding:0; border-radius:0; }
.mp-off{ border-style:solid; }
.mp-link{ border-bottom:0; }
.mp-link:hover{ color:inherit; }
.as-sess{ border-bottom:0; border-right:0; }
.as-sess.on::before{ display:none; }
.as-li{ padding-inline-start:0; position:static; }
.as-li::before{ position:static; inset-inline-start:auto; top:auto; width:auto; height:auto; border-radius:0; background:none; }
#as-sessions{ border-bottom:0; }
.as-chips{ flex-direction:row; }
.as-rail-label{ text-transform:none; letter-spacing:0; }
.as-sess-del.arm{ border-radius:6px; }
/* Most missed: tiles (Yassin, 2026-11-06: "give each product the block borders"). Each product is its own card,
   boxed like the hero tiles: the hairline ring, not a border, so light and dark follow each hub's tokens. */
.mp-grid{ gap:12px; }
.mp-grid .dead{ border:0; padding:14px; border-radius:14px; background:var(--at-paper); box-shadow:var(--at-ring); }
.mp-grid > .view-all{ border-top:0; }

/* ---- THE FINANCE TEMPLATE (Yassin, 2026-11-05): every hub's Finance reads as Figi Trade's does. A period row,
   the answer as one big sentence, then unboxed sections of ruled rows, each row with its icon. Ids beat the brand
   hubs' older :is(#finance-view,...) rules. Tokens only, so light and dark follow each hub. ---- */
.gf-period{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:0 0 22px; }
.gf-period:empty{ display:none; }
.gf-period #stats-tabs{ margin-bottom:0; }
.gf-gran, .fin-gran{ display:inline-flex; gap:2px; }
.gf-gran .seg-btn, .fin-gran .seg-btn{ border:0; background:transparent; color:var(--mac-muted); cursor:pointer; }
.gf-gran.slide-on > .on, .fin-gran.slide-on > .on{ background:transparent; }
.gf-gran .seg-btn:hover:not(.on), .fin-gran .seg-btn:hover:not(.on){ color:var(--mac-ink); }
.gf-gran .seg-btn:focus-visible, .fin-gran .seg-btn:focus-visible, .gf-period .tab:focus-visible{ outline:2px solid var(--mac-ink); outline-offset:2px; }
.gf-block{ min-width:0; margin:0 0 32px; }
#finance-view .gf-block > .lead-title{ display:flex; align-items:center; gap:8px; margin:0 0 12px; font:600 14px/1.3 var(--sans); letter-spacing:0; text-transform:none; color:var(--mac-ink); }
#finance-view .lead-title .ti{ width:16px; height:16px; margin:0; vertical-align:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; color:var(--mac-muted); }
#finance-view .fic{ flex:none; width:16px; height:16px; color:var(--mac-muted); }

/* Figi Trade's rows: the icon sits in the first cell's start. */
#finance-view .gf-table td.lead{ position:relative; padding-inline-start:26px; }
#finance-view .gf-table td.lead > .fic{ position:absolute; top:50%; inset-inline-start:0; transform:translateY(-50%); }
@media (min-width:900px){
  #finance-view .gf-table td.lead, #finance-view .gf-table tr.gf-own td.lead{ padding-inline-start:44px; }
  #finance-view .gf-table td.lead > .fic{ inset-inline-start:16px; }
  #finance-view .gf-table tr.gf-own td.lead{ padding-inline-start:60px; }
  #finance-view .gf-table tr.gf-own td.lead > .fic{ inset-inline-start:32px; }
}

/* The brand hubs: the header row, the group link, the month pills. */
#finance-view .fin-picker{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-width:0; }
#fin-pills{ position:relative; isolation:isolate; display:inline-flex; flex-wrap:nowrap; gap:2px; max-width:100%; overflow-x:auto; scrollbar-width:none; }
#fin-pills::-webkit-scrollbar{ display:none; }
#fin-pills .tab{ position:relative; z-index:1; flex:none; display:inline-flex; align-items:center; border:0; background:transparent; color:var(--mac-muted); white-space:nowrap; cursor:pointer; }
#fin-pills .tab:hover:not(.on){ color:var(--mac-ink); border:0; }
#finance-view .fin-picker{ flex:0 1 auto; }
#finance-view .brief{ margin:0 0 28px; }
#finance-view .brief:empty{ display:none; }
#finance-view .group-link{ margin-inline-start:auto; }

/* Where the money is now: one ruled sheet of accounts. */
#finance-view .ma-table{ margin:0 0 14px; border:0; border-radius:14px; overflow:hidden; background:var(--at-paper); box-shadow:0 0 0 1px var(--line); }
#finance-view .ma-cols{ display:none; }
#finance-view .ma-row{ border-bottom:1px solid var(--line); }
#finance-view .ma-row:last-of-type{ border-bottom:0; }
#finance-view .ma-row-head{ gap:12px; min-height:56px; padding:10px 16px; }
#finance-view .ma-row-head:hover{ background:color-mix(in srgb, var(--mac-ink) 4%, transparent); }
#finance-view .ma-icon .fic{ width:18px; height:18px; }
#finance-view .ma-name{ font:500 14px/1.3 var(--sans); color:var(--mac-ink); }
#finance-view .ma-meta{ font-size:11.5px; letter-spacing:0; color:var(--mac-muted); }
#finance-view .ma-badge, #finance-view .ma-badge.ok, #finance-view .ma-badge.warn{ padding:0; border:0; border-radius:0; background:none; }
#finance-view .ma-badge{ font:400 12px/1.3 var(--sans); letter-spacing:0; text-transform:none; color:var(--mac-muted); white-space:normal; }
#finance-view .ma-badge.ok{ color:var(--mac-muted); }
#finance-view .ma-badge.warn{ color:var(--red, var(--bad)); }
#finance-view .ma-amt{ font:500 15px/1.2 var(--sans); text-align:end; color:var(--mac-ink); }
#finance-view .ma-amt small{ font-size:11px; color:var(--mac-muted); }
#finance-view .ma-chev{ font-size:14px; }
#finance-view .ma-note{ padding:0 16px 10px 46px; }
#finance-view .fin-info{ top:19px; right:auto; inset-inline-end:40px; }
#finance-view .ma-amt, #finance-view .ma-cols span:last-child{ padding-inline-end:24px; }
#finance-view .fin-hintbox{ margin:0 16px 10px 46px; }
#finance-view .ma-total{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-top:1px solid var(--line); font:600 15px/1.3 var(--sans); color:var(--mac-ink); }
#finance-view .ma-total .fin-net{ font-size:17px; font-weight:600; letter-spacing:-.02em; }
#finance-view .ma-total.warn span:last-child{ font-weight:400; font-size:13px; color:var(--mac-muted); }
#finance-view .ma-total-note{ padding:0 16px 10px; font-size:12px; text-align:start; color:var(--mac-muted); }
@media (min-width:900px){
  #finance-view .ma-cols, #finance-view .ma-row-head{ display:grid; grid-template-columns:22px minmax(0,1.2fr) minmax(0,1fr) minmax(130px,.7fr) 16px; align-items:center; gap:12px; }
  #finance-view .ma-cols{ padding:12px 16px 10px; border-bottom:1px solid var(--line); font:500 12px/1.2 var(--sans); color:var(--mac-muted); }
  #finance-view .ma-cols span:first-child{ grid-column:1 / 3; }
  #finance-view .ma-cols span:last-child{ text-align:end; }
}
@media (max-width:899px){
  #finance-view .ma-row-head{ display:grid; grid-template-columns:22px minmax(0,1fr) auto 14px; }
  #finance-view .ma-badge{ display:block; grid-row:2; grid-column:2 / -1; }
}

/* The by-hand forms and cash accounts under the sheet. */
#finance-view .pos-cols{ margin-top:22px; }
#finance-view .exp-sec-head{ flex-wrap:wrap; gap:2px 12px; justify-content:flex-start; padding-bottom:8px; font:600 14px/1.3 var(--sans); letter-spacing:0; text-transform:none; color:var(--mac-ink); }
#finance-view .exp-sec-sum{ flex:1 1 100%; font-weight:400; font-size:12px; color:var(--mac-muted); }
#finance-view .exp-sec-sum:has(.lnk){ flex:0 1 auto; margin-inline-start:auto; }

/* At a glance: the figures on one sheet, no separate cards. */
#finance-view #fin-summary{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0; margin:0; border-radius:14px; overflow:hidden; background:var(--at-paper); box-shadow:0 0 0 1px var(--line); }
/* !important only to beat the brand hubs' own !important card rules (the filled lead card, its "!" watermark). */
#finance-view #fin-summary .cm-card, #finance-view #fin-summary .cm-card.cm-hero, #finance-view #fin-summary .cm-card.cm-warn{ position:relative; padding:14px 16px; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:0 0 0 .5px var(--line) !important; transform:none; }
#finance-view #fin-summary .cm-card::after{ content:none !important; }
#finance-view #fin-summary .cm-card .cm-label, #finance-view #fin-summary .cm-card .cm-sub, #finance-view #fin-summary .cm-card .fic, #finance-view #fin-summary .cm-card small{ color:var(--mac-muted) !important; opacity:1; }
#finance-view #fin-summary .cm-card .cm-value, #finance-view #fin-summary .cm-card .cm-value span{ color:var(--mac-ink) !important; }
#finance-view #fin-summary .cm-card .fin-net.neg{ color:var(--red, var(--bad)) !important; }
#finance-view #fin-summary .cm-label{ display:flex; align-items:center; gap:7px; font:500 12px/1.3 var(--sans); letter-spacing:0; text-transform:none; color:var(--mac-muted); }
#finance-view #fin-summary .cm-hero .cm-label::before{ content:none; }
#finance-view #fin-summary .cm-value{ margin-top:8px; font:500 20px/1.15 var(--sans); letter-spacing:-.02em; color:var(--mac-ink); }
#finance-view #fin-summary .cm-sub{ margin-top:5px; font-size:11.5px; line-height:1.4; color:var(--mac-muted); }
#finance-view #fin-summary .cm-card.cm-warn .cm-label, #finance-view #fin-summary .cm-card.cm-warn .fic{ color:var(--red, var(--bad)) !important; }
@media (max-width:760px){ #finance-view #fin-summary{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Profit and loss with Net profit by month beside it; stacked when the page is narrow. */
.fin-two{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
@media (min-width:1100px){ .fin-two{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:28px; align-items:start; } #finance-view .fin-two > .gf-block + .gf-block{ position:sticky; top:96px; } }

/* Profit and loss: one ruled sheet, the groups named in its rows. */
#finance-view #fin-pnl{ border-radius:14px; overflow:hidden; background:var(--at-paper); box-shadow:0 0 0 1px var(--line); }
#finance-view .pl-group{ margin:0; }
#finance-view .pl-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 12px; margin:0; padding:12px 16px 10px; border-bottom:1px solid var(--line); font:500 12px/1.3 var(--sans); letter-spacing:0; text-transform:none; color:var(--mac-muted); background:color-mix(in srgb, var(--mac-ink) 2.5%, transparent); }
#finance-view .pl-group + .pl-group .pl-head{ border-top:1px solid var(--line); }
#finance-view .pl-hint{ font-size:12px; }
#finance-view .pl-line{ min-height:52px; margin:0; padding:9px 16px; border-bottom:1px solid var(--line); }
#finance-view .pl-group > .pl-line:last-child{ border-bottom:0; }
#finance-view .pl-label{ position:relative; min-width:0; padding-inline-start:28px; font:500 14px/1.3 var(--sans); color:var(--mac-ink); }
#finance-view .pl-label > .fic{ position:absolute; top:1px; inset-inline-start:0; margin:0; }
#finance-view .pl-check{ gap:10px; min-width:0; }
#finance-view .pl-note{ display:block; margin:2px 0 0; font:400 11.5px/1.35 var(--sans); font-style:normal; color:var(--mac-muted); }
#finance-view .pl-amt{ font:500 14px/1.2 var(--sans); }
#finance-view .pl-line.in .pl-amt, #finance-view .pl-line.out .pl-amt{ color:var(--mac-ink); }
#finance-view .pl-line.manual.unpaid .pl-amt{ color:var(--red, var(--bad)); }
#finance-view .pl-line.muted .pl-amt{ color:var(--mac-muted); opacity:1; }
#finance-view .pl-empty{ padding:10px 16px; font-size:12px; line-height:1.4; color:var(--mac-muted); }
#finance-view .pl-total{ align-items:center; margin:0; padding:16px; border-top:1px solid var(--line); font:600 15px/1.3 var(--sans); color:var(--mac-ink); }
#finance-view .pl-total .fin-net{ font-size:17px; font-weight:600; letter-spacing:-.02em; }
#finance-view .fin-net{ font-family:var(--sans); }
#finance-view .fin-net.pos{ color:var(--mac-ink); }
#finance-view .fin-net.neg{ color:var(--red, var(--bad)); }
#finance-view .pl-topay{ margin:0; padding:10px 16px 14px; font-size:13px; color:var(--mac-muted); }

/* ---- Small product tiles (Yassin, 2026-11-05): Restock soon's tile at a smaller size, for the longer stock lists. ---- */
.shop-heroes-sm{ display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:10px; }
.shop-heroes-sm .shop-hero{ border-radius:12px; }
.shop-heroes-sm .shop-hero-img{ aspect-ratio:1; }
.shop-heroes-sm .shop-hero-body{ gap:7px; padding:9px 10px 11px; }
.shop-heroes-sm .shop-name{ flex:none; width:100%; font-size:12.5px; line-height:1.3; }
.shop-vendor{ display:block; margin-top:2px; font-size:11px; font-weight:400; color:var(--mac-muted); }
.shop-heroes-sm .shop-stock{ font-size:11px; }
.shop-heroes-sm .shop-hero-stats{ grid-template-columns:auto minmax(0,1fr); gap:10px; padding-top:7px; font-size:10.5px; }
.shop-heroes-sm .shop-hero-stats b{ font-size:12px; }

/* ---- The open customer (customers.js detailHTML, 2026-11-06, every brand hub): one ruled strip of figures,
   two labelled lists side by side from 900px (Deliveries, Details), then tags and the note under a rule ---- */
.drow-detail .detail{ display:block; }
.cd{ display:grid; gap:18px; font-family:var(--sans); }
.cd-kpis{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); border-radius:12px; background:var(--at-paper); box-shadow:var(--at-ring); overflow:hidden; }
.cd-k{ display:flex; flex-direction:column; gap:4px; min-width:0; padding:12px 16px; box-shadow:inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
.cd-k:last-child{ grid-column:1 / -1; }
.cd-l{ font:500 11.5px var(--sans); color:var(--mac-muted); }
.cd-v{ font:500 17px/1.2 var(--sans); letter-spacing:-.02em; color:var(--mac-ink); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cd-v small{ font-size:11px; font-weight:500; color:var(--mac-muted); letter-spacing:0; }
.cd-cols{ display:grid; gap:18px; }
.cd-h{ margin:0 0 6px; font:600 12px var(--sans); letter-spacing:0; text-transform:none; color:var(--mac-ink); }
.cd-row{ display:flex; align-items:center; gap:8px; min-height:34px; padding:6px 0; border-bottom:1px solid var(--line); font:400 13px var(--sans); color:var(--mac-muted); }
.cd-row:last-child{ border-bottom:0; }
.cd-row .gi{ width:15px; height:15px; flex:none; color:var(--mac-faint); }
.cd-row.pos .gi{ color:var(--pos, var(--mac-ink)); }
.cd-row.neg .gi{ color:var(--mac-bad); }
.cd-rl{ flex:1; min-width:0; }
.cd-rv{ font-weight:500; color:var(--mac-ink); font-variant-numeric:tabular-nums; text-align:end; }
.cd-orders{ align-items:flex-start; }
.cd-orders .cd-rv{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px 10px; }
.cd-foot{ display:grid; gap:10px; padding-top:14px; border-top:1px solid var(--line); }
.cd-foot .cd-h{ margin:0; }
.cd-foot .notebox{ border-radius:10px; }
@media (min-width:900px){
  .cd-kpis{ grid-template-columns:repeat(5, minmax(0,1fr)); }
  .cd-k, .cd-k:last-child{ grid-column:auto; box-shadow:inset -1px 0 0 var(--line); }
  .cd-k:last-child{ box-shadow:none; }
  .cd-cols{ grid-template-columns:1fr 1fr; gap:32px; }
}

/* ---- THE META ADS LINE (2026-11-06, every hub): the brands' Meta ad spend drawn over a daily bar chart.
   ONE look everywhere (Yassin: "red, a bit transparent and no borders"): a 2px red line at 70%, straight
   segments, no dots, no halo, no fill; its key is a short bar of the same line. Used by the brand hubs'
   Stats trend (stats.js drawTrend: .t-spend, .t-key i, .t-tip-a) and Figi Trade's Revenue per day
   (chart.js: .chart-ads .ads-line, .ads-key). The colour is the hub's red: --red on the brand hubs,
   --bad on Figi Trade. ---- */
:root{ --ads-line:var(--red, var(--bad)); --ads-line-alpha:.7; }
.t-spend{ position:absolute; left:0; top:0; width:100%; height:210px; pointer-events:none; overflow:visible; z-index:1; }
.t-spend path, .ads-line{ fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.t-spend-line, .ads-line{ stroke:var(--ads-line); stroke-opacity:var(--ads-line-alpha); stroke-width:2; }
.t-key{ display:inline-flex; align-items:center; gap:6px; }
.t-key i, .ads-key{ display:inline-block; flex:none; width:16px; height:2px; background:var(--ads-line); opacity:var(--ads-line-alpha); }
.t-tip-a{ font-size:11px; font-variant-numeric:tabular-nums; } .t-tip-a small{ opacity:.6; font-size:10px; }
.t-cap:has(.t-key){ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; }

/* ---- THE PAGE-SHAPED PLACEHOLDER (view-skel.js, 2026-11-07, every hub): while a page loads, the
   placeholder is drawn where that page's own cards, panels and lines of text stood the last time it
   loaded on this device, so the page fades in over its own shape instead of cutting from a generic
   one. vs-b: a card or picture; vs-p: a panel or table (its frame and a line per row); vs-t: a line
   of text. Theme-neutral: every tint is the ink at a few percent. ---- */
:root{ --vs-a:color-mix(in oklch, var(--mac-ink) 6%, transparent); --vs-b:color-mix(in oklch, var(--mac-ink) 11%, transparent); }
.view-skel.vs-shaped{ min-height:0; }
.view-skel.vs-shaped > i, .view-skel.vs-shaped > span{ position:absolute; display:block; }
.view-skel.vs-shaped > span.vs-p{ display:flex; }
.vs-b, .vs-t, .vs-p > i{ background:linear-gradient(100deg, var(--vs-a) 20%, var(--vs-b) 40%, var(--vs-a) 60%); background-size:300% 100%;
  animation:vsSweep 1.5s ease-in-out infinite; animation-delay:var(--d, 0ms); }
.vs-t{ border-radius:6px; transform:scaleY(.62); transform-origin:left center; }
.vs-p{ box-sizing:border-box; overflow:hidden; display:flex; flex-direction:column; gap:30px; padding:22px 20px;
  background:color-mix(in oklch, var(--mac-ink) 2.5%, transparent); box-shadow:0 0 0 1px color-mix(in oklch, var(--mac-ink) 7%, transparent); }
.vs-p > i{ display:block; flex:none; height:14px; border-radius:6px; width:92%; }
.vs-p > i:nth-child(3n+2){ width:78%; } .vs-p > i:nth-child(3n){ width:86%; }
@keyframes vsSweep{ from{ background-position:100% 0; } to{ background-position:-200% 0; } }
/* the page fades in as the placeholder fades out (a crossfade, never a cut) */
#content > section > *:not(.view-head):not(.view-skel){ transition:opacity .32s cubic-bezier(.22,1,.36,1); }
.view-skel.out{ opacity:0; transform:none; transition:opacity .3s ease; }   /* no upward jump: the old exit moved it 4px with no transition left */
@media (prefers-reduced-motion: reduce){
  .vs-b, .vs-t, .vs-p > i{ animation:none; }
  #content > section > *:not(.view-head):not(.view-skel), .view-skel.out{ transition:none; }
}

/* ---- IN-PAGE SUBTABS (.subtabs, 2026-11-07, every hub): a page split into parts gets the SAME tabs as the
   hub's own pages (Money: Finance, Expenses, Invoices…), never a pill row (Yassin: "competitors subtabs
   should look like other subtabs like finance subtabs"). Words only, the chosen one bold, a soft hover,
   and the red underline sliding to the chosen tab (the page script moves .subtabs-ind with slide.js glide,
   as app.js moveSubIndicator does). Markup: .subtabs[role=tablist] > span.subtabs-ind + button.subtab[role=tab]. ---- */
.subtabs{ position:relative; display:flex; gap:4px; margin:6px 0 18px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line, var(--at-rule)); }
.subtabs::-webkit-scrollbar{ display:none; }
.subtab{ flex:none; display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:10px 14px 14px; border:0; background:none;
  border-radius:10px 10px 0 0; font:500 13px var(--sans); color:var(--mac-muted); cursor:pointer; white-space:nowrap;
  transition:color .2s ease, background-color .2s ease; }
.subtab:hover:not(.on){ color:var(--mac-ink); background:var(--hoverbg, color-mix(in oklch, var(--mac-ink) 5%, transparent)); }
.subtab.on{ color:var(--mac-ink); font-weight:700; }
.subtab:focus-visible{ outline:2px solid var(--red, var(--mac-bad)); outline-offset:-4px; border-radius:8px; }
.subtabs-ind{ position:absolute; left:0; bottom:0; width:0; height:3px; pointer-events:none; border-radius:3px 3px 0 0;
  background:var(--red, var(--mac-bad)); box-shadow:0 0 12px color-mix(in srgb, var(--red, var(--mac-bad)) 55%, transparent); }
@media (prefers-reduced-motion: reduce){ .subtab{ transition:none; } }

/* ---- THE META PANEL'S FIVE CARDS (2026-11-07, every hub): ROAS, Breakeven ROAS (breakeven.js), Money spent,
   Revenue from ads, Sales. Five across from 900px; on a phone ROAS takes the first row and the other four sit
   two by two. #content raises the weight over each hub's older .cust-metrics column rules. ---- */
#content #ad-kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
#content #ad-kpis > .cm-hero{ grid-column:1 / -1; }
@media (min-width:900px){
  #content #ad-kpis{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
  #content #ad-kpis > .cm-hero{ grid-column:auto; }
}

/* ---- THE ANALYST, CODEX STYLE (2026-11-07, every hub with the Assistant): Yassin: "remove the three macos dots from
   ai analyst and make this section have a codex like ui". Taken from Codex: a quiet list of chats (a "New chat" row with
   a pen, the open chat a soft grey row, never inverted), a centred icon and one big question when a chat is empty, the
   reader's own messages in a soft grey bubble, the analyst's answers in a framed card (bare text read as broken, fixed
   the same day), all in one centred column, and a large rounded composer with the send button inside it. Left out: projects,
   the model picker, access level, voice. ---- */
/* The chat's title bar keeps its rule and a centred title (2026-11-07 fix: a borderless muted title pushed to one
   corner read as broken, Yassin "the top header looks bad"). Centred, because a chat title can be Arabic or English. */
.as-bar{ min-height:46px; padding:0 20px; }
.as-bar::after{ display:none; }
.as-title{ text-align:center; font:600 13px/1.2 var(--sans); color:var(--mac-ink); }
/* the chats list */
#as-rail{ background:color-mix(in oklch, var(--mac-ink) 3%, var(--at-paper)); }
.as-new{ display:inline-flex; align-items:center; gap:9px; min-height:36px; margin:8px; padding:0 10px; border-radius:9px; background:transparent; box-shadow:none;
  font:500 13.5px var(--sans); color:var(--mac-ink); }
.as-new:hover{ background:var(--at-track); color:var(--mac-ink); }
.as-ic{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.as-rail-label{ font:500 12px/1.2 var(--sans); color:var(--mac-faint); }
.as-sess{ border-radius:9px; }
.as-sess.on, .as-sess.on:hover{ background:var(--at-track-hover, var(--at-track)); color:var(--mac-ink); }
.as-sess.on .as-sess-title{ color:var(--mac-ink); }
.as-sess.on .as-sess-date{ color:var(--mac-faint); opacity:1; }
/* the conversation: one centred column */
#as-log{ gap:18px; padding:20px max(18px, calc((100% - 760px) / 2)) 24px; }
.as-msg{ animation:asRise .3s cubic-bezier(.22,1,.36,1) backwards; transform-origin:50% 100%; }
@keyframes asRise{ from{ opacity:0; transform:translateY(6px); } }
.as-user{ max-width:78%; padding:10px 15px; border-radius:18px; background:color-mix(in oklch, var(--mac-ink) 7%, var(--at-paper)); color:var(--mac-ink); }
.as-user .as-table th, .as-user .as-table td{ border-bottom-color:color-mix(in oklch, var(--mac-ink) 12%, transparent); }
/* The analyst's answer sits in its own framed card on the other side (2026-11-07 fix: as bare text across the whole
   column, an Arabic reply landed right under the reader's own bubble and English lines jumped to the far side, Yassin
   "ai response is broken"). The reader's bubble is filled grey, the answer's is the page with a hairline frame. */
.as-bot{ align-self:flex-start; max-width:82%; padding:12px 16px; border-radius:18px; border-end-start-radius:6px;
  background:color-mix(in oklch, var(--mac-ink) 3%, var(--at-paper)); box-shadow:inset 0 0 0 1px var(--at-rule-2);
  font-size:14px; line-height:1.6; }
.as-user{ border-end-end-radius:6px; }
@media (min-width:900px){ .as-user{ max-width:72%; } .as-bot{ max-width:78%; } }
.as-user + .as-user, .as-bot + .as-bot{ margin-top:0; }
/* the empty chat: an icon and one big question */
.as-empty{ max-width:640px; padding:24px 8px; }
.as-empty-ic{ display:grid; place-items:center; width:52px; height:52px; margin:0 auto 18px; border-radius:16px; color:var(--mac-muted);
  box-shadow:inset 0 0 0 1.5px color-mix(in oklch, var(--mac-ink) 18%, transparent); }
.as-empty-ic svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.as-empty-title{ font:500 clamp(22px, 2.6vw, 30px)/1.25 var(--sans); letter-spacing:-.02em; }
.as-empty-sub{ margin:10px 0 22px; font-size:13px; }
.as-chip{ min-height:36px; padding:7px 14px; border-radius:12px; background:transparent; box-shadow:inset 0 0 0 1px var(--at-rule-2); font-size:13px; }
.as-chip:hover{ background:var(--at-track); color:var(--mac-ink); }
/* the composer: a big rounded box, the send button inside it */
#as-form.as-composer{ display:block; margin:0 max(14px, calc((100% - 760px) / 2)) 16px; padding:12px 12px 10px 16px; border:0; border-radius:22px;
  background:color-mix(in oklch, var(--mac-ink) 4%, var(--at-paper)); box-shadow:inset 0 0 0 1px var(--at-rule-2), 0 10px 30px -18px var(--mac-scrim);
  backdrop-filter:none; -webkit-backdrop-filter:none; transition:box-shadow .15s ease; }
#as-form.as-composer:focus-within{ box-shadow:inset 0 0 0 1px var(--mac-faint), 0 10px 30px -18px var(--mac-scrim); }
#as-form.as-composer #as-input{ display:block; width:100%; min-height:44px; max-height:180px; padding:4px 2px; border-radius:0; background:transparent; box-shadow:none; font-size:15px; }
#as-form.as-composer #as-input:focus{ box-shadow:none; }
.as-tools{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
.as-hint{ font:400 11.5px var(--sans); color:var(--mac-faint); }
#as-form.as-composer #as-send{ width:34px; height:34px; }
#as-form.as-composer #as-send svg{ width:16px; height:16px; }
@media (prefers-reduced-motion:reduce){ .as-msg{ animation:none; } }
@media (max-width:760px){ .as-hint{ display:none; } .as-tools{ justify-content:flex-end; } }

/* ---- The account card (2026-11-07, Yassin: "like Workly's switch account, with no avatar"): the name and role with
   up/down chevrons at the sidebar's foot; a click opens a menu above it with the accounts used before on this
   device and Log out. The tab rows are a little tighter to give it room. ---- */
#rail .rail-btn{ min-height:34px; }
#rail .rail-groups{ gap:14px; }
#rail .rail-welcome{ margin:12px 8px 14px; padding-bottom:12px; }
#rail .rail-foot{ margin-top:auto; padding-top:10px; border-top:0; }
.acct-card{ display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:8px 10px 8px 10px; border:0; border-radius:14px; cursor:pointer; text-align:start;
  font:inherit; color:var(--glass-ink, var(--mac-ink)); background:color-mix(in srgb, currentColor 5%, transparent); box-shadow:inset 0 0 0 1px var(--glass-rule, var(--line));
  transition:background-color .15s ease; }
.acct-card:hover, .acct-card[aria-expanded="true"]{ background:color-mix(in srgb, currentColor 9%, transparent); }
.acct-card:focus-visible{ outline:2px solid currentColor; outline-offset:1px; }
/* The initials avatar (2026-11-08): a flat circle in the sidebar's own glass, like the open tab row (not a sphere,
   Yassin: "a circle that matches the rest of the sidebar"). */
.acct-av{ display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:50%; font:500 12px/1 var(--sans); letter-spacing:.02em;
  color:var(--glass-ink, var(--mac-ink)); background:var(--glass-on, color-mix(in srgb, currentColor 10%, transparent));
  box-shadow:var(--glass-on-ring, inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent)); }
.acct-av-sm{ width:24px; height:24px; font-size:10px; }
.acct-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.acct-name{ font:500 13.5px/1.2 var(--sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-role{ font:400 11.5px/1.2 var(--sans); color:var(--glass-label, var(--mac-muted)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-chev{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.6; }
body.rail-min .acct-card{ justify-content:center; padding:0; min-height:44px; }
body.rail-min .acct-card .acct-txt, body.rail-min .acct-card .acct-chev{ display:none; }

/* The menu: a solid sheet floating over the card (outer radius 14, padding 6, so its rows are 8). */
.acct-menu{ position:fixed; z-index:60; padding:6px; border-radius:14px; background:#fbfbfa; color:#1d1f23;
  box-shadow:0 0 0 1px rgba(20,22,26,.08), 0 18px 40px -12px rgba(20,22,26,.32); }
html[data-theme="dark"] .acct-menu{ background:#1c1d22; color:#ececee; box-shadow:0 0 0 1px rgba(255,255,255,.09), 0 18px 40px -12px rgba(0,0,0,.7); }
.acct-menu[hidden]{ display:none; }
.acct-menu.in{ animation:acctIn .18s cubic-bezier(.22,1,.36,1); transform-origin:bottom center; }
@keyframes acctIn{ from{ opacity:0; transform:translateY(6px) scale(.98); } }
.acct-menu-h{ margin:4px 10px 4px; font:500 11px/1.2 var(--sans); opacity:.55; }
.acct-item{ display:flex; align-items:center; gap:10px; width:100%; min-height:36px; padding:6px 10px; border:0; border-radius:8px; background:transparent;
  color:inherit; font:500 13.5px/1.2 var(--sans); text-align:start; text-decoration:none; cursor:pointer; }
.acct-item:hover, .acct-item:focus-visible{ background:color-mix(in srgb, currentColor 8%, transparent); outline:none; }
.acct-item .acct-role{ margin-inline-start:auto; color:inherit; opacity:.55; }
.acct-ic{ width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }
.acct-rule{ height:1px; margin:6px 4px; border:0; background:currentColor; opacity:.1; }
@media (prefers-reduced-motion: reduce){ .acct-menu.in{ animation:none; } .acct-card{ transition:none; } }

/* ---- A product picture, clicked (2026-11-07): it grows out of its thumbnail beside it and goes back on scroll. ---- */
img.zoomable{ cursor:zoom-in; }
.img-zoom{ position:fixed; z-index:70; display:grid; place-items:center; padding:8px; border-radius:18px; overflow:hidden; pointer-events:auto; cursor:zoom-out;
  background:var(--at-paper, #fff); transform-origin:top left; will-change:transform;
  box-shadow:0 0 0 1px rgba(20,22,26,.08), 0 24px 60px -18px rgba(20,22,26,.45); }
html[data-theme="dark"] .img-zoom{ background:#1c1d22; box-shadow:0 0 0 1px rgba(255,255,255,.09), 0 24px 60px -18px rgba(0,0,0,.75); }
.img-zoom img{ width:100%; height:100%; object-fit:contain; border-radius:10px; display:block; }

/* ==== Phone touch sizes (2026-11-07, Yassin: "make sure hub is optimized for phone view") ====
   Below 761px every Figi hub renders at the phone's real width (FigiHome left width=700 the same
   day), so the controls the shared layer draws small on a desktop get a finger-sized hit area and a
   readable label here. Layout only: nothing below changes what a page shows, and nothing applies
   on a desktop. Floors: 40px for anything pressed, 20px for a checkbox, no label under 11px.
   Inline links grow by padding and take it back with a negative margin, so text does not move.
   Verify: the phone audit (390x844, real-phone emulation) must report no tap target under 36px. */
@media (max-width:760px){
  /* 1. Pressed things: 40px tall, 11.5px labels. */
  #content :is(.seg-btn, .va-pf, .exp-cancel, .lock-btn, .wh-mini, .more-btn, .refresh-btn, .export, .sa-btn, .cu-chip, .as-chip,
    .drawer-btn, .wh-pill-btn, .rc-var, .pm-refund-btn, .status-save, .subtab, .brand-card .bc-open, .co-hand-go){
    min-height:40px; display:inline-flex; align-items:center; justify-content:center; }
  #content :is(.seg-btn, .va-pf, .lock-btn, .wh-mini, .exp-cancel){ padding-inline:12px; }
  #content :is(.seg-btn, .va-pf, .lock-btn, .wh-mini, .va-pf-label, .lnk){ font-size:11.5px; }
  #content .seg{ padding:2px; }
  #content .as-sess-del{ min-width:36px; min-height:36px; font-size:12px; }
  /* 2. Inline text links: the same 40px, without moving the line they sit on. */
  #content :is(.drv-link, .group-link, .view-link, .lnk, .more-link){ display:inline-block; padding-block:12px; margin-block:-12px; }
  /* 3. The (i) beside a finance figure: a 36px square around the same 14px glyph. */
  #content .fin-info{ padding:11px; margin:-9px; display:inline-flex; align-items:center; justify-content:center; }
  /* 4. Form fields: 20px boxes, 40px fields, 16px type so iOS does not zoom in on focus. */
  #content :is(input[type=checkbox], input[type=radio]){ width:20px; height:20px; min-width:20px; min-height:20px; margin:0 4px 0 0; accent-color:var(--red, var(--mac-ink)); }
  #content :is(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=hidden]), select, textarea){ min-height:40px; font-size:16px; }
  #content select{ padding-inline:10px 28px; }
  /* 5. Labels: no text under 11px. */
  #content :is(.cm-label, .exp-sec-head, .exp-sec-sum, .exp-cat, .wst-k, .wh-pill, .wh-ip-tag, .drv-mut, .drv-msub, .badge, .stchip,
    .inv-hint, .cm-sub, .adt-bar-l, .adt-meta, .chart-val, .chart-x, .kpi-delta .g, .wh-live, code, .rc-draft, .as-sess-del.arm,
    .exp-sec-head.sub, .inp-last, .fb-c-ord, .fb-c-head .stchip, .co-drv-msub, .cal-dow, .cal-pasttoggle, .shop-heroes-sm .shop-hero-stats){ font-size:11.5px; }
  #content :is(small, .figure-value small, .cm-value small, .mc-total-num small, .mc-val small, .drv-amt small, .co-amt small){ font-size:11.5px; }
  #content :is(.drv-donut-lbl, .co-drv-donut-lbl){ font-size:11px; letter-spacing:.04em; }
  /* 6. The customers search row: the search box takes the whole first line, the two selects share the next. */
  #content .searchrow{ flex-wrap:wrap; }
  #content .searchrow .search{ flex:1 1 100%; order:-1; }
  #content .searchrow .search-mode{ flex:1 1 0; min-width:0; }
}