/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   HORIZON theme — design tokens + app shell. Single source of truth for colour, type, radius and shadow.
   Served at /hz-theme.css (server.mjs) and linked in the <head> of the app (artifact) and the supplier portal.
   Tokens come from Diviyaj's Claude Design canvas ("Demand Planner Premium Polish"), the design owner.
   Rules below use an #app prefix so they beat the artifact's own single-id rules regardless of load order.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Self-hosted Hanken Grotesk (OFL). Google Fonts is blocked in mainland China (suppliers use the portal there). */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/hanken-grotesk-latin-ext.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/hanken-grotesk-latin.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  /* surfaces */
  --nav:#0d1626; --nav-2:#16213a; --nav-ink:#e7edf7; --nav-dim:#93a1b8;
  --bg:#f4f6f9; --card:#ffffff; --hover:#f7f9fc;
  --line:#e5e9f0; --line2:#eef1f6;
  /* text */
  --ink:#101828; --ink-soft:#344054; --muted:#5b6b83; --faint:#8b98ad;
  /* semantic */
  --blue:#2361d8; --blue-soft:#eaf1fd; --blue-ink:#1a4fb5;
  --pos:#118a4e; --pos-bg:#e8f6ee; --pos-bd:#bfe3cd;
  --neg:#d23227; --neg-bg:#fdeeec; --neg-cell:#fbdcd8; --neg-bd:#f5c6c2;
  --amber:#b45309; --amber-bg:#fdf3d7;
  --prod:#f5b83d; --prod-bg:#fdeec8;
  --violet:#7048c9; --violet-bg:#f1ebfc;
  --l3-bg:#f0f6ff;   /* level-3 tab row tint (Ben: light blue to tell L3 from the white L2 row) */
  /* shape */
  --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:14px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 6px 22px -12px rgba(16,24,40,.10);
  --font:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* row + header tints (also set in dark below) */
  --row-alt:#f6f8fb; --hdr-tint:#f3f4f6; --hdr-cur:#eef2f9;   /* was a circular var(--row-alt) → resolved to transparent, so the sticky SKU column went see-through in light mode (Ben) */
}

/* ── Dark mode (v27.584): Diviyaj's canvas dark palette ("Demand Planner Premium Polish"). The header theme toggle adds
   .om-dark to <html> (no-flash bootstrap in HEAD_NOFLASH, app only — the portal stays light). Every app rule uses var(),
   so redefining the tokens here flips the whole app. Per-page inline-style stragglers are cleaned up in each page's phase. ── */
:root.om-dark{
  color-scheme:dark;
  --nav:#0a101d; --nav-2:#1b2942; --nav-ink:#e7edf7; --nav-dim:#8fa0b8;
  --bg:#0a0f1b; --card:#121b2e; --hover:#1a2539;
  --line:#25334e; --line2:#1d2a41;
  --ink:#e8eef8; --ink-soft:#c4d0e4; --muted:#a3b2c9; --faint:#76889f;
  --blue:#4d8bf5; --blue-soft:#1a2c4f; --blue-ink:#8ab4ff;
  --pos:#3ecb80; --pos-bg:#123322; --pos-bd:#1d4832;
  --neg:#f0645a; --neg-bg:#3a1512; --neg-cell:#4a1a15; --neg-bd:#57231f;
  --amber:#e8a83f; --amber-bg:#332507;
  --prod:#f5b83d; --prod-bg:#33280a;
  --violet:#a78bfa; --violet-bg:#261c40;
  --l3-bg:#14203a;
  --shadow:0 1px 2px rgba(0,0,0,.30), 0 8px 24px -12px rgba(0,0,0,.60);
  --row-alt:#16223c; --hdr-tint:#101a2c; --hdr-cur:#16233c;
  --blue-wash:#0f1b30; --fy27:#13233f; --fy28:#1c1836; --band:#16202f;
}

html body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}   /* v27.652: kill the default 8px body margin — it showed as a white line above the dark HORIZON bar (Diviyaj) */
@keyframes fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}   /* P2 (Diviyaj): card entrance for Demand Actions + DTC mismatch */

/* ── App shell: 52px navy header (was a grey rounded bar) ─────────────────────────────────────────────── */
#app #view-tabs-row{display:flex;align-items:center;gap:2px;height:52px;padding:0 20px;background:var(--nav);border-radius:0;margin:0 -10px 6px}   /* v27.659: top -8px removed — it was neutralised by the flex wrapper; the wrapper is pulled up instead (below) */
/* v27.659: pull the header wrapper up over #app's 8px padding-top so the dark bar sits flush to the top (no white line above it). Desktop only — on phone the bar is a fixed #hz-topbar and .wrap has padding-top:52px. */
@media (min-width:641px){ #app .hz-topwrap{margin-top:-8px} }
/* v28.162 (Ben): the black top bar stays put while the page scrolls (desktop only; phone keeps its own fixed #hz-topbar).
   position:sticky can't work here: the bar sits inside .hz-topwrap (with the country tabs + DEMAND filters), and a sticky box
   can't outlive its parent. So it is FIXED, aligned to #app's left edge (0 / 240px full rail / 76px collapsed rail, mirroring the
   .wrap#app margin rules in inject.html), and .hz-topwrap gets an equal spacer (52px bar + its old 6px margin + 4px flex gap =
   62px) so nothing below moves. z-index 950: under the rail (1000), popovers (100000+) and the Ask drawer (100051). */
@media (min-width:641px){
  #app #view-tabs-row{position:fixed;top:0;left:0;right:0;z-index:950;margin:0;box-shadow:0 1px 4px rgba(13,22,38,.25)}
  #app .hz-topwrap{padding-top:62px}
  :root{--hz-sticky-top:70px}   /* page-level sticky offsets (e.g. Performance scorecard) clear the bar */
  html{scroll-padding-top:62px}   /* anchors / scrollIntoView land below the bar, not under it */
  #app #product-root .smp-rail{top:62px}   /* page-level sticky that used top:8px would now slide under the bar */
}
@media (min-width:900px){
  body.hz-rail #app #view-tabs-row{left:240px}
  body.hz-rail.hz-rail-min #app #view-tabs-row,body.hz-rail-min #app #view-tabs-row{left:76px}
}
#app #view-tabs-row .hz-brand{display:flex;align-items:center;gap:9px;margin-right:14px;color:#fff;font-weight:700;font-size:17px;letter-spacing:.03em;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;user-select:none}
#app #view-tabs-row .hz-brand svg{display:block}
#app #view-tabs-row .view-toggle{display:inline-flex;align-items:center;height:36px;padding:0 13px;font-size:12px;font-weight:700;letter-spacing:.09em;color:var(--nav-dim);background:transparent;border:0;border-radius:var(--r-sm);transition:color .15s,background .15s}
#app #view-tabs-row .view-toggle:hover{color:#fff}
#app #view-tabs-row .view-toggle.active{color:#fff;background:rgba(255,255,255,.09);border-bottom-color:transparent}
/* right-hand utilities */
#app #view-tabs-row .tl-bell{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 8px;margin:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--nav-dim);font-size:12.5px;font-weight:600;cursor:pointer;transition:color .15s}
#app #view-tabs-row .tl-bell:hover{color:#fff}
#app #view-tabs-row .tl-bell svg{width:15px;height:15px;flex:none}
#app #view-tabs-row #tl-count{margin-left:0;background:#e5484d;color:#fff;font-size:10px;font-weight:800;line-height:1.4;height:auto;min-width:0;padding:1px 6px;border-radius:999px}
#app #view-tabs-row .hz-ico{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:99px;background:transparent;color:var(--nav-dim);font-weight:600;font-size:13px;line-height:1;cursor:pointer;flex:0 0 auto;overflow:hidden;transition:color .15s,background .15s}   /* P1b (Diviyaj): clean 32px icon buttons — no resting pill, subtle hover only */
#app #view-tabs-row .hz-ico:hover{color:#fff;background:rgba(255,255,255,.09)}
#app #view-tabs-row .hz-ico svg{width:15px;height:15px}
/* P1b account avatar: gradient badge + initials, replaces the standalone Sign-out icon (chevron gone) */
#app #view-tabs-row .hz-divider{width:1px;height:20px;background:rgba(255,255,255,.12);margin:0 6px;flex:0 0 auto}
#app #view-tabs-row .hz-avatar{display:inline-flex;align-items:center;gap:8px;padding:4px 6px 4px 4px;border-radius:99px;cursor:pointer;transition:background .15s;flex:0 0 auto;border:0;background:transparent}
#app #view-tabs-row .hz-avatar:hover{background:rgba(255,255,255,.07)}
#app #view-tabs-row .hz-avatar .hz-av-badge{width:29px;height:29px;border-radius:99px;background:linear-gradient(135deg,#2361d8,#5aa6ea);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:11px;letter-spacing:.02em;flex:0 0 auto}
#hz-account-menu{position:fixed;z-index:100080;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:180px;padding:5px;font-size:13px}
#hz-account-menu .hz-am-hd{padding:7px 10px 6px;color:var(--muted);font-size:11px;border-bottom:1px solid var(--line2);margin-bottom:4px;word-break:break-all}
#hz-account-menu button{display:flex;width:100%;align-items:center;gap:8px;padding:7px 10px;border:0;background:transparent;color:var(--ink);border-radius:6px;cursor:pointer;font:inherit;text-align:left}
#hz-account-menu button:hover{background:var(--hover)}
#app #view-tabs-row #config-btn{font-size:17px}
#app #view-tabs-row #sa-drawer-btn{height:28px;padding:0 11px;margin:0 4px 0 6px;border:0;border-radius:var(--r-sm);background:var(--blue);color:#fff;font-weight:800;font-size:11px;letter-spacing:.06em;cursor:pointer;flex:0 0 auto;line-height:1}
#app #view-tabs-row #sa-drawer-btn:hover{background:var(--blue-ink)}
#app #view-tabs-row #hz-fav-chips{display:flex;flex-wrap:wrap;align-content:center;gap:1px 3px;margin-right:6px;max-width:320px;max-height:40px;overflow:hidden}   /* v27.635: smaller chips, wrap onto 2 rows to save top-bar space */
#app #view-tabs-row .hz-fav-chip{cursor:pointer;font-size:10px;font-weight:600;color:var(--nav-dim);white-space:nowrap;padding:2px 6px;border-radius:var(--r-sm);letter-spacing:.01em;line-height:1.3;transition:color .15s,background .15s}
#app #view-tabs-row .hz-fav-chip:hover{color:#fff;background:rgba(255,255,255,.09)}

/* ── Level-2 sub-tabs: white row, underline in navy, count pills ──────────────────────────────────────── */
#app .hz-l2,
#app #supply-root #supply-subnav,
#app #scenario-root #scenario-subnav,
#app #product-root #product-subnav{display:flex;gap:2px;align-items:center;flex-wrap:wrap;background:var(--card);border-bottom:1px solid var(--line);margin:0 -10px 10px;padding:0 20px;position:relative}
#app .hz-l2 .dnav,
#app #supply-root #supply-subnav .stab,
#app #scenario-root #scenario-subnav .stab,
#app #product-root #product-subnav .stab{background:transparent;border:0;border-bottom:0;padding:13px 13px 11px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);cursor:pointer;font-family:inherit;text-decoration:none;transition:color .15s;box-shadow:none}
#app .hz-l2 .dnav:hover,
#app #supply-root #supply-subnav .stab:hover,
#app #scenario-root #scenario-subnav .stab:hover,
#app #product-root #product-subnav .stab:hover{color:var(--ink)}
#app .hz-l2 .dnav.active,
#app #supply-root #supply-subnav .stab.active,
#app #scenario-root #scenario-subnav .stab.active,
#app #product-root #product-subnav .stab.active{color:var(--ink);box-shadow:inset 0 -2.5px 0 var(--nav);font-weight:700}
:is(#app,#pv-wrap) #supply-root .ex-badge,:is(#app,#pv-wrap) #supply-root .rtab-count{background:var(--neg);color:#fff;font-size:10px;font-weight:800;line-height:1.4;height:auto;min-width:0;padding:1px 7px;border-radius:999px;vertical-align:baseline;margin-left:6px}
/* version badge (amber pill, right of the L2 row) */
:is(#app,#pv-wrap) #supply-root .ver,#app #scenario-root .ver,#app #product-root .ver{margin-left:auto;background:var(--prod);color:var(--nav);border-radius:6px;padding:2px 8px;font-size:10px;font-weight:800;letter-spacing:.02em;line-height:1.2;position:relative;flex:0 0 auto}   /* v27.641: unified HORIZON version badge = golden --prod (matches DEMAND #ver + mobile #hz-ver + inject.html); was --amber-bg which caused the dark→light flash on load */
/* Level-3 tabs (PO sub-sections etc.): blue underline, bolder */
:is(#app,#pv-wrap) #supply-root .rtab,#app #product-root .rtab,#app .d3tab{font-weight:700;font-size:10px;letter-spacing:.05em;color:var(--faint);border-bottom-color:transparent;box-shadow:none}
:is(#app,#pv-wrap) #supply-root .rtab:hover,#app #product-root .rtab:hover,#app .d3tab:hover{color:var(--blue)}
:is(#app,#pv-wrap) #supply-root .rtab.active,#app #product-root .rtab.active,#app .d3tab.active{color:var(--blue);box-shadow:inset 0 -2.5px 0 var(--blue);border-bottom-color:transparent}

/* ── Cards: main data tables sit on white cards over the off-white page ──────────────────────────────── */
#app .tw,:is(#app,#pv-wrap) #supply-root .tw,#app #product-root .tw{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}

/* ── Supplier portal shell (portal.html) ───────────────────────────────────────────────────────────────── */
body header.pv-top{background:var(--nav)}

/* ── Flush navigation stack (Ben, v27.468): L1 header, L2 row and L3 row touch; no page-bg gaps or stray rules ── */
#app #dab-navwrap{gap:0!important}                                   /* wrapper carries inline gap:4px */
#app #dab-navwrap > *{margin-top:4px}                               /* keep the old rhythm between filter rows */
#app #view-tabs-row{margin-bottom:0}
#app #dab-navwrap > #view-tabs-row,#app #dab-navwrap > .hz-l2,#app #dab-navwrap > .d3nav{margin-top:0!important}   /* .d3nav also carries an inline marginTop */
#app .hz-l2 + :not(.d3nav),#app .d3nav + *{margin-top:10px!important}   /* first filter row breathes below the nav stack */
/* SUPPLY / PRODUCT / SCENARIO / CONFIG: the header wrapper's padding, rule and margin only make sense under the DEMAND filters */
#app.supply-active #dab-navwrap,#app.product-active #dab-navwrap,#app.scenario-active #dab-navwrap,#app.config-mode #dab-navwrap{padding-bottom:0!important;border-bottom:0!important;margin-bottom:0!important}
#app #supply-root,#app #product-root,#app #scenario-root{padding-top:0}
#app .hz-l2,#app #supply-root #supply-subnav,#app #scenario-root #scenario-subnav,#app #product-root #product-subnav{margin-bottom:0}
#app #supply-root #supply-content,#app #product-root #product-content,#app #scenario-root #scenario-content{padding-top:10px}
/* L3 rows: second white row, blue underline, flush under L2 (was a light-blue rounded pill box with a 12px gap) */
#app .d3nav,#app #perf-subnav,
#app #supply-root #act-subnav,:is(#app,#pv-wrap) #supply-root #rep-subnav,:is(#app,#pv-wrap) #supply-root #prod-subtabs,:is(#app,#pv-wrap) #supply-root #config-subs-l3,:is(#app,#pv-wrap) #supply-root #config-subs.cfg-flat,
#app #product-root #pcfg-subs-l3{background:var(--l3-bg);border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0 20px;margin:0 -10px 10px}
#app #report-body > .d3nav:first-child{margin-top:-10px}   /* REPORTS L3 (Performance, 3PL & Invoicing) flush under the L2 row */
/* .dnav3 (REPORTS level-3 buttons) = same look as .d3tab */
#app .d3nav .dnav3{background:transparent;border:0;border-radius:0;padding:11px 13px 9px;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--faint);cursor:pointer;font-family:inherit;box-shadow:none;transition:color .15s}
#app .d3nav .dnav3:hover{color:var(--blue)}
#app .d3nav .dnav3.active{color:var(--blue);box-shadow:inset 0 -2.5px 0 var(--blue)}
/* views with no DEMAND filter rows (REPORTS, BUY & MOVE…): the header wrapper keeps no padding / rule / margin */
#app.filters-hidden #dab-navwrap{padding-bottom:0!important;border-bottom:0!important;margin-bottom:0!important}
#app #supply-root #supply-content > #act-subnav:first-child,#app #supply-root #supply-content > #rep-subnav:first-child,#app #supply-root #supply-content > #prod-subtabs:first-child,#app #supply-root #supply-content > #config-subs:first-child{margin-top:-10px}
#app .d3nav .d3tab,#app #supply-root #act-subnav .rtab,:is(#app,#pv-wrap) #supply-root #rep-subnav .rtab,:is(#app,#pv-wrap) #supply-root #prod-subtabs .rtab,:is(#app,#pv-wrap) #supply-root #config-subs-l3 .rtab,:is(#app,#pv-wrap) #supply-root #config-subs.cfg-flat .rtab,#app #product-root #pcfg-subs-l3 .rtab{padding:11px 13px 9px;font-size:10px;letter-spacing:.05em}   /* L3 text two points smaller (Ben, v27.480) */
/* CONFIG level-2 (#config-subs, cog context) = same treatment as the other L2 rows */
:is(#app,#pv-wrap) #supply-root #config-subs{background:var(--card);border-bottom:1px solid var(--line);margin:0 -10px 0;padding:0 20px;position:relative}
:is(#app,#pv-wrap) #supply-root #config-subs .rtab{padding:13px 13px 11px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);border-bottom-color:transparent;box-shadow:none}
:is(#app,#pv-wrap) #supply-root #config-subs .rtab:hover{color:var(--ink)}
:is(#app,#pv-wrap) #supply-root #config-subs .rtab.active{color:var(--ink);box-shadow:inset 0 -2.5px 0 var(--nav);border-bottom-color:transparent}
:is(#app,#pv-wrap) #supply-root #config-subs .ver{margin-left:auto;background:var(--prod);color:var(--nav);border-radius:6px;padding:2px 8px;font-size:10px;font-weight:800;letter-spacing:.02em;line-height:1.2;position:relative;flex:0 0 auto}   /* v27.641: unified golden --prod badge (see above) */

/* ═══ U2 primitives, slice 1 (v27.475): pills, buttons, inputs, badges to the design ═══════════════════════════ */
/* Pills / segmented filters: 8px radius, navy when active (design). Density kept one step below the design (11px) so the
   DEMAND filter rows still fit on one line; .catpill stays a size smaller. */
#app .pill,:is(#app,#pv-wrap) #supply-root .pill{padding:4px 10px;font-size:11px;font-weight:600;line-height:1.35;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font-family:inherit;transition:background .12s,border-color .12s,color .12s}
#app .pill:hover,:is(#app,#pv-wrap) #supply-root .pill:hover{background:var(--hover);border-color:var(--faint);color:var(--ink)}
#app .pill.active,:is(#app,#pv-wrap) #supply-root .pill.active{background:var(--nav);border-color:var(--nav);color:#fff}
#app .pill.catpill{font-size:10px!important;padding:3px 8px!important}
#app .fpill{border-radius:999px;font-size:11.5px;font-weight:700;padding:5px 13px}
/* Buttons */
#app .save-btn,:is(#app,#pv-wrap) #supply-root .save-btn,#app #product-root .save-btn{height:auto;min-height:28px;padding:5px 12px;font-size:12px;font-weight:700;line-height:1.2;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);color:var(--ink);font-family:inherit;cursor:pointer;transition:background .12s,border-color .12s}
#app .save-btn:hover,:is(#app,#pv-wrap) #supply-root .save-btn:hover,#app #product-root .save-btn:hover{background:var(--hover);border-color:var(--faint)}
:is(#app,#pv-wrap) #supply-root .save-btn.dark{background:var(--nav);border-color:var(--nav);color:#fff}
:is(#app,#pv-wrap) #supply-root .save-btn.dark:hover{background:var(--nav-2);border-color:var(--nav-2)}
#app #product-root .save-btn.light{background:var(--card)}
#app .save-btn:disabled{opacity:.5;cursor:not-allowed}
/* Toolbar (AI / download) */
#app .tool-bar{height:28px;border-radius:var(--r-md);border-color:var(--line);box-shadow:var(--shadow)}
#app .tool-btn{border-radius:7px;font-size:11px;font-weight:600;height:24px}
#app .dl-menu-top{border-radius:var(--r-md);box-shadow:var(--shadow),0 10px 30px -12px rgba(16,24,40,.25);padding:4px}
#app .dl-menu-top .dl-item{border-radius:7px}
/* Inputs and selects in filter bars (grid cells keep their compact inline styling) */
#app #dab-navwrap select,#app #dab-navwrap input[type="date"],#app #dab-navwrap input[type="text"],#app #dab-navwrap input[type="number"],
:is(#app,#pv-wrap) #supply-root .bar select,:is(#app,#pv-wrap) #supply-root .bar input[type="date"],:is(#app,#pv-wrap) #supply-root .bar input[type="text"],:is(#app,#pv-wrap) #supply-root .bar input[type="search"],:is(#app,#pv-wrap) #supply-root .bar input[type="number"]{font-family:inherit;font-size:12px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 9px;outline:none;transition:border-color .12s,box-shadow .12s}
#app #dab-navwrap select:focus,#app #dab-navwrap input:focus,:is(#app,#pv-wrap) #supply-root .bar select:focus,:is(#app,#pv-wrap) #supply-root .bar input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
/* Editable cells (SUPPLY grids): keep the blue "editable" tint, soften the corners, design focus ring */
:is(#app,#pv-wrap) #supply-root .fci{border-radius:6px;border-color:#b9d3f7;font-family:inherit}
:is(#app,#pv-wrap) #supply-root .fci:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
#app #product-root .fci{border-radius:var(--r-sm);padding:6px 10px;font-size:12px}
#app #product-root .fci:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
/* Badges and tags */
#app .tool-badge{border-radius:999px;font-size:10px;font-weight:800;padding:1px 7px;letter-spacing:.02em}
:is(#app,#pv-wrap) #supply-root .src{border-radius:5px;font-size:9px;font-weight:800;letter-spacing:.05em;padding:2px 6px;text-transform:uppercase}

/* ═══ U2 primitives, slice 2 (v27.476): table headers, popups, drawers, cards ══════════════════════════════════ */
/* Table headers: design = small uppercase grey caps on white (was grey #f3f3f1 fill). Year-tint header classes (!important) still win. */
#app thead th,:is(#app,#pv-wrap) #supply-root thead th{background:var(--card);color:var(--faint);font-weight:800;font-size:10px;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--line)}
#app thead th.stk,#app thead th.stk2{background:var(--card)}
#app #product-root table.pg-tbl th{background:var(--card);color:var(--faint);font-weight:800;letter-spacing:.05em;border-bottom:1px solid var(--line)}
:is(#app,#pv-wrap) #supply-root .act-tbl th{color:var(--faint);font-weight:800;letter-spacing:.05em}
/* Popups / modals: 14px corners, design shadow, navy-tinted scrim */
#app #buy-wrap .ov{background:rgba(16,24,40,.35)}
#app #buy-wrap .pn{border-radius:var(--r-xl);border-color:var(--line);box-shadow:0 1px 2px rgba(16,24,40,.06),0 24px 60px -20px rgba(16,24,40,.45)}
.pomodal-bg{background:rgba(16,24,40,.45)}
.pomodal{border-radius:var(--r-xl);font-family:var(--font);box-shadow:0 24px 60px -20px rgba(16,24,40,.45);padding:18px 20px}
#ms-exp-tip{border-radius:var(--r-md)}
/* Drawers (PO / shipment / sample / product): rounded leading edge, deeper design shadow, white head with a hairline rule */
:is(#app,#pv-wrap) #supply-root #shipdrawer,:is(#app,#pv-wrap) #supply-root #podrawer,:is(#app,#pv-wrap) #supply-root #sampdrawer,#app #product-root #proddrawer{border-radius:var(--r-xl) 0 0 var(--r-xl);box-shadow:-16px 0 48px -16px rgba(16,24,40,.45)}
:is(#app,#pv-wrap) #supply-root .shipdrawer-head{background:var(--card);border-bottom:1px solid var(--line);padding:14px 20px}
:is(#app,#pv-wrap) #supply-root .shipdrawer-title{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:.01em}
:is(#app,#pv-wrap) #supply-root .shipdrawer-x{border-radius:var(--r-sm)}
:is(#app,#pv-wrap) #supply-root .shipdrawer-x:hover{background:var(--hover);color:var(--ink)}
:is(#app,#pv-wrap) #supply-root .shipdrawer-body{padding:16px 20px}
/* Cards */
:is(#app,#pv-wrap) #supply-root .card{border-radius:var(--r-lg);box-shadow:var(--shadow);background:var(--card);padding:10px 14px}
#app #product-root .pg-card{border-radius:var(--r-lg);box-shadow:var(--shadow)}
#app #product-root .pg-card:hover{box-shadow:0 1px 2px rgba(16,24,40,.06),0 12px 30px -12px rgba(16,24,40,.28)}

/* ═══ U3 SUPPLY, slice 1 (v27.477): Actions board to the "Horizon Supply" design ═══════════════════════════════ */
:is(#app,#pv-wrap) #supply-root .act-top{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin:2px 0 14px}
:is(#app,#pv-wrap) #supply-root .act-filters{flex:0 1 auto;display:flex;flex-direction:column;gap:6px}
:is(#app,#pv-wrap) #supply-root .act-filters .bar{margin:0}
:is(#app,#pv-wrap) #supply-root .act-kpis{flex:1 1 360px;display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:12px;min-width:0}
:is(#app,#pv-wrap) #supply-root .act-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:11px 14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:11px;min-width:0}
:is(#app,#pv-wrap) #supply-root .act-kpi-ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:none}
:is(#app,#pv-wrap) #supply-root .act-kpi-ic.neg{background:var(--neg-bg);color:var(--neg)} :is(#app,#pv-wrap) #supply-root .act-kpi-ic.amber{background:var(--amber-bg);color:var(--amber)}
:is(#app,#pv-wrap) #supply-root .act-kpi-ic.blue{background:var(--blue-soft);color:var(--blue)} :is(#app,#pv-wrap) #supply-root .act-kpi-ic.pos{background:var(--pos-bg);color:var(--pos)}
:is(#app,#pv-wrap) #supply-root .act-kpi-v{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--ink)}
:is(#app,#pv-wrap) #supply-root .act-kpi-l{font-size:10.5px;font-weight:600;color:var(--muted);line-height:1.3}
/* boards */
:is(#app,#pv-wrap) #supply-root .act-colwrap{gap:14px}
:is(#app,#pv-wrap) #supply-root .act-board{flex:1 1 460px;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden}
:is(#app,#pv-wrap) #supply-root .act-board-hd{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
:is(#app,#pv-wrap) #supply-root .act-dot{width:9px;height:9px;border-radius:50%;background:var(--line);display:inline-block}
:is(#app,#pv-wrap) #supply-root .act-board-high .act-dot{background:var(--neg)} :is(#app,#pv-wrap) #supply-root .act-board-amber .act-dot{background:#e8a33d}
:is(#app,#pv-wrap) #supply-root .act-board-n{color:var(--faint);font-weight:700;letter-spacing:0}
:is(#app,#pv-wrap) #supply-root .act-board .tw{border:0;box-shadow:none;border-radius:0;margin:0}
:is(#app,#pv-wrap) #supply-root .act-board .count{padding:14px 16px;color:var(--muted)}
/* rows: white with a 3px severity edge (design), no tinted fills */
:is(#app,#pv-wrap) #supply-root .act-tbl th{font-size:10px;font-weight:800;letter-spacing:.07em;color:var(--faint);padding:8px 10px 6px}
:is(#app,#pv-wrap) #supply-root .act-tbl td{padding:12px 10px;border-bottom:1px solid var(--line2);vertical-align:top}
:is(#app,#pv-wrap) #supply-root .act-tbl tr.sev-high td,:is(#app,#pv-wrap) #supply-root .act-tbl tr.sev-amber td{background:transparent}
:is(#app,#pv-wrap) #supply-root .act-tbl tr.actrow:hover td,:is(#app,#pv-wrap) #supply-root .act-tbl tr.sev-high:hover td,:is(#app,#pv-wrap) #supply-root .act-tbl tr.sev-amber:hover td{background:var(--hover)}
:is(#app,#pv-wrap) #supply-root .act-tbl td.sev-cell{border-left:3px solid var(--line);padding-left:8px;font-size:13px;font-weight:800}
:is(#app,#pv-wrap) #supply-root .act-tbl tr.sev-high td.sev-cell{border-left-color:var(--neg);color:var(--neg)} :is(#app,#pv-wrap) #supply-root .act-tbl tr.sev-amber td.sev-cell{border-left-color:#f0a04b;color:#e8940a} :is(#app,#pv-wrap) #supply-root .act-tbl tr.sev-low td.sev-cell{border-left-color:var(--line);color:var(--faint)}
:is(#app,#pv-wrap) #supply-root .act-tbl tr.sev-high .act-type{color:var(--neg)} :is(#app,#pv-wrap) #supply-root .act-tbl tr.sev-amber .act-type{color:#e8940a}
:is(#app,#pv-wrap) #supply-root .act-tbl .act-chip{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--faint);margin-top:2px}
:is(#app,#pv-wrap) #supply-root .act-tbl .act-detail{font-size:12px;color:var(--muted);line-height:1.4}
:is(#app,#pv-wrap) #supply-root .act-tbl td.act-ref .lnk-btn,:is(#app,#pv-wrap) #supply-root .act-tbl td.act-ref a{font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:2px}
:is(#app,#pv-wrap) #supply-root .act-tbl td.act-fixcell .save-btn,:is(#app,#pv-wrap) #supply-root .act-tbl td.act-fixcell .act-apply,:is(#app,#pv-wrap) #supply-root .act-tbl td.act-lifecell .save-btn{font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:var(--r-sm);min-height:0}
@media (max-width:900px){ :is(#app,#pv-wrap) #supply-root .act-kpis{grid-template-columns:repeat(2,minmax(120px,1fr))} }

/* PRODUCT module sits on a white page (Ben, v27.480): its forms and cards read better without the off-white ground */
html body:has(#app.product-active){background:var(--card)}

/* ═══ U3 SUPPLY, slice 2 (v27.481): Purchase Orders grid to the "Horizon Purchase Orders" design ══════════════ */
/* toolbar */
:is(#app,#pv-wrap) #supply-root .bar .flt{font-family:inherit;font-size:12.5px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:6px 12px;outline:none;transition:border-color .12s,box-shadow .12s}
:is(#app,#pv-wrap) #supply-root .bar .flt:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
:is(#app,#pv-wrap) #supply-root .bar select.flt{cursor:pointer;font-weight:700;font-size:12px;padding:6px 10px}
:is(#app,#pv-wrap) #supply-root .save-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:800;box-shadow:0 6px 16px -6px rgba(35,97,216,.6)}
:is(#app,#pv-wrap) #supply-root .save-btn.primary:hover{background:var(--blue-ink);border-color:var(--blue-ink)}
:is(#app,#pv-wrap) #supply-root .save-btn.outline-blue{color:var(--blue);border:1.5px solid var(--blue);background:var(--card)}
:is(#app,#pv-wrap) #supply-root .save-btn.outline-blue:hover{background:var(--blue-soft)}
:is(#app,#pv-wrap) #supply-root .pill.pill-danger{background:var(--neg);border-color:var(--neg);color:#fff;font-weight:800;letter-spacing:.04em;box-shadow:0 4px 12px -4px rgba(210,50,39,.5)}
:is(#app,#pv-wrap) #supply-root .pill.pill-warn{background:#c26a1b;border-color:#c26a1b;color:#fff;font-weight:800;letter-spacing:.04em;box-shadow:0 4px 12px -4px rgba(194,106,27,.5)}
:is(#app,#pv-wrap) #supply-root .pill.pill-danger.active,:is(#app,#pv-wrap) #supply-root .pill.pill-warn.active{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--nav)}
:is(#app,#pv-wrap) #supply-root .pill.po-recent.active{background:var(--nav);border-color:var(--nav)}
:is(#app,#pv-wrap) #supply-root .pill.po-focus{color:var(--amber);border-color:#f0d896}
:is(#app,#pv-wrap) #supply-root .pill.po-focus.active{background:var(--amber-bg);color:var(--amber);border-color:#f0d896}
/* table */
:is(#app,#pv-wrap) #supply-root table.po-tbl{border-collapse:separate;border-spacing:0}
:is(#app,#pv-wrap) #supply-root table.po-tbl thead th{padding:10px 10px;font-size:10.5px}
:is(#app,#pv-wrap) #supply-root table.po-tbl thead th:first-child,:is(#app,#pv-wrap) #supply-root table.po-tbl thead th:nth-child(2),:is(#app,#pv-wrap) #supply-root table.sh-tbl thead th:first-child,:is(#app,#pv-wrap) #supply-root table.sh-tbl thead th:nth-child(2){background:var(--card)}
:is(#app,#pv-wrap) #supply-root table.po-tbl tbody tr:not(.exp-row):not(.grp-row) td{padding:8px 10px;border-top:1px solid var(--line2);font-size:12px;vertical-align:middle;font-variant-numeric:tabular-nums}
:is(#app,#pv-wrap) #supply-root table.po-tbl tbody tr:not(.exp-row):not(.grp-row):hover td{background:var(--hover)}
:is(#app,#pv-wrap) #supply-root table.po-tbl tbody tr:not(.exp-row):not(.grp-row) td:first-child,:is(#app,#pv-wrap) #supply-root table.po-tbl tbody tr:not(.exp-row):not(.grp-row) td:nth-child(2){background:var(--card)}
:is(#app,#pv-wrap) #supply-root table.po-tbl tbody tr:not(.exp-row):not(.grp-row):hover td:first-child,:is(#app,#pv-wrap) #supply-root table.po-tbl tbody tr:not(.exp-row):not(.grp-row):hover td:nth-child(2){background:var(--hover)}
:is(#app,#pv-wrap) #supply-root table.po-tbl td.po-numcell b{font-size:12.5px;font-weight:700;color:var(--blue)}
:is(#app,#pv-wrap) #supply-root .planbtn{background:var(--nav);border-radius:6px;padding:3px 8px;font-size:9.5px;font-weight:800;letter-spacing:.06em}
:is(#app,#pv-wrap) #supply-root .planbtn:hover,:is(#app,#pv-wrap) #supply-root .planbtn.open{background:var(--blue)}
:is(#app,#pv-wrap) #supply-root table.po-tbl .tool-badge{font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:999px;white-space:nowrap}
:is(#app,#pv-wrap) #supply-root table.po-tbl select.fci[data-field="status"]{border-radius:var(--r-sm);font-weight:800;font-size:11px;letter-spacing:.05em;padding:4px 8px;font-family:inherit;text-transform:uppercase}
:is(#app,#pv-wrap) #supply-root table.po-tbl .ship-open{font-size:12px;font-weight:700}
:is(#app,#pv-wrap) #supply-root table.po-tbl .ship-pick{font-size:12px;font-weight:700}
:is(#app,#pv-wrap) #supply-root table.po-tbl .po-set-shipping{font-size:10.5px;font-weight:700;color:var(--blue);border:1px solid var(--blue);border-radius:6px;padding:1px 8px;background:var(--card);cursor:pointer;font-family:inherit}
/* production / status group header rows */
:is(#app,#pv-wrap) #supply-root tr.cat-hdr td{background:var(--hover);border-top:1px solid var(--line);border-bottom:1px solid var(--line2);font-size:11.5px;font-weight:800;letter-spacing:.05em;color:var(--muted);padding:8px 16px;text-transform:none}
:is(#app,#pv-wrap) #supply-root tr.cat-hdr td .po-grp-car{font-size:9px;color:var(--faint);margin-right:4px}
/* load-more footer row */
:is(#app,#pv-wrap) #supply-root tr.po-loadmore-row td{background:var(--card)!important;border-top:1px solid var(--line2)!important;padding:14px 16px!important}

/* ── phone fixes (v27.482) ── the PO grid's PLAN button collapses to a "P" glyph on phones (inject rule) — keep it that way */
@media (max-width:640px){ :is(#app,#pv-wrap) #supply-root .planbtn.po-exp[data-po]{font-size:0;padding:5px 6px} }

/* ═══ U3 SUPPLY, slice 3 (v27.483): date chips + ship-to chips on the PO grid ═════════════════════════════════ */
:is(#app,#pv-wrap) #supply-root .days-chip{display:inline-block;font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px;line-height:1.3;vertical-align:middle;margin-left:3px;font-variant-numeric:tabular-nums}
:is(#app,#pv-wrap) #supply-root .cell-pick[data-kind="country"]{border-radius:7px;padding:3px 9px;font-size:11px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
:is(#app,#pv-wrap) #supply-root table.po-tbl td .fci.dt{border-radius:6px}

/* ═══ U4 PRODUCT, slice 1 (v27.484): module tokens, detail tabs, filters, grid, drawer, forms, mobile cards ═════ */
#app #product-root{--p-ink:var(--ink);--p-mut:var(--muted);--p-line:var(--line);--p-bg:var(--card);--p-acc:var(--blue)}   /* indigo accent → design blue; panels white (Ben) */
/* product detail tabs (Master data · Size & variants · Samples · Timeline · Documents) = design underline tabs */
#app #product-root .pd-tabs{gap:2px;border-bottom:1px solid var(--line);margin:0 0 14px}
#app #product-root .pd-tab{padding:11px 13px 9px;margin-bottom:0;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);border-bottom:0;box-shadow:none;border-radius:0;transition:color .15s}
#app #product-root .pd-tab:hover{color:var(--ink)}
#app #product-root .pd-tab.active{color:var(--blue);box-shadow:inset 0 -2.5px 0 var(--blue);font-weight:800}
/* grid filters + count */
#app #product-root #pg-filters .fci{border:1px solid var(--line);border-radius:var(--r-md);padding:7px 12px;font-size:12.5px;background:var(--card);color:var(--ink)}
#app #product-root #pg-filters .fci:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
#app #product-root #pg-count{font-size:11.5px;color:var(--muted);font-weight:600}
#app #product-root .pg-swsize{padding:5px 10px;font-size:11px;font-weight:700}
#app #product-root .pg-swsize:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)} #app #product-root .pg-swsize:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
/* grid table + cards */
#app #product-root table.pg-tbl td{font-size:12px;padding:8px 12px;border-bottom:1px solid var(--line2)}
#app #product-root table.pg-tbl tbody tr:hover td{background:var(--hover)}
#app #product-root .pg-colour{font-size:12.5px;font-weight:700;color:var(--ink)}
#app #product-root .pg-ref{font-size:10.5px;font-weight:600;color:var(--faint);font-family:ui-monospace,Menlo,monospace}
#app #product-root .pg-stagechip{border-radius:var(--r-sm);padding:3px 8px;margin:-3px -8px;font-weight:700;font-size:11px}
#app #product-root .pg-stagechip:focus{outline:2px solid var(--blue-soft)}
#app #product-root .pgm-card{border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow);background:var(--card)}
/* product drawer: same head as the SUPPLY drawers */
#app #product-root .pd-drawhead{background:var(--card);border-bottom:1px solid var(--line);padding:14px 20px}
#app #product-root .pd-drawtitle{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:.01em}
#app #product-root .pd-drawref{font-size:11px;font-weight:600;color:var(--faint);font-family:ui-monospace,Menlo,monospace}
#app #product-root .pddraw-x{border-radius:var(--r-sm);color:var(--muted)}
#app #product-root .pddraw-x:hover{background:var(--hover);color:var(--ink)}
#app #product-root .pd-drawbody{padding:16px 20px}
/* forms */
#app #product-root .prow{border-bottom:1px solid var(--line2);padding:8px 0}
#app #product-root .prow .pl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);padding-top:8px}
#app #product-root .pd-skel-row{border-radius:var(--r-sm)}
/* samples (live under #supply-root) */
:is(#app,#pv-wrap) #supply-root .samp-panel,:is(#app,#pv-wrap) #supply-root #samp-form{border-radius:var(--r-lg)}
:is(#app,#pv-wrap) #supply-root .samp-fld,:is(#app,#pv-wrap) #supply-root .samp-panel .fci,:is(#app,#pv-wrap) #supply-root #samp-form .fci{border-radius:var(--r-sm);padding:6px 10px;font-size:12px}
:is(#app,#pv-wrap) #supply-root .samp-fld:focus,:is(#app,#pv-wrap) #supply-root .samp-panel .fci:focus,:is(#app,#pv-wrap) #supply-root #samp-form .fci:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}

/* ── v27.485 (Ben): PRODUCT is white throughout (page + panels); sample drawer DETAILS = 2 columns ── */
#app.product-active{background:var(--card)}
#app #product-root .pg-card,#app #product-root .pgm-card{background:var(--card)}
:is(#app,#pv-wrap) #supply-root .samp-details-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){ :is(#app,#pv-wrap) #supply-root .samp-details-grid{grid-template-columns:1fr} }

/* ═══ U4 PRODUCT, slice 2 (v27.486): section headings, samples grid, timeline inbox — the CSS-reachable parts ═══ */
:is(#app,#pv-wrap) #supply-root .sect-h{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:14px 0 6px}
:is(#app,#pv-wrap) #supply-root table.samp-tbl tbody td{padding:8px 10px;border-bottom:1px solid var(--line2);font-size:12px}
:is(#app,#pv-wrap) #supply-root table.samp-tbl tbody tr:hover td{background:var(--hover)}
:is(#app,#pv-wrap) #supply-root .samp-open{font-weight:700;color:var(--blue)}
#tl-drop{border-radius:var(--r-lg);box-shadow:0 1px 2px rgba(16,24,40,.06),0 18px 44px -16px rgba(16,24,40,.35);border:1px solid var(--line)}
#tl-drop .tl-item{padding:10px 14px;border-bottom:1px solid var(--line2)}
#tl-drop .tl-item:hover{background:var(--hover)}

/* ═══ U5 supplier portal, slice 1 (v27.487): same tokens and primitives as the app (via :is(#app,#pv-wrap) above) + portal shell ═══ */
#pv-wrap{padding:0 20px 18px}
body header.pv-top{min-height:52px;padding:0 20px;gap:14px}   /* v27.800 (Ben): was a hard height:52px; on a phone the bar wraps to 3 lines (brand / section pills / lang+Inbox) and the fixed height let lines 2-3 overflow UNDER #pv-wrap (section pills clipped, Inbox line drawn over the search box). min-height keeps desktop pixel-identical and lets the bar grow when it wraps. */
body header.pv-top h1{font-size:12px;letter-spacing:.09em;color:var(--nav-dim)}
body header.pv-top .sup{font-size:15px;font-weight:800;letter-spacing:.01em}
body .pv-btn{border-radius:var(--r-sm);font-weight:700;font-size:12.5px;padding:7px 14px}
body .pv-btn.ghost{color:var(--nav-dim);border-color:rgba(255,255,255,.18)} body .pv-btn.ghost:hover{color:#fff}
/* portal main tabs = design level-2 row */
:is(#pv-wrap,#app) #supply-root #pp-tabs{display:flex;gap:2px;align-items:center;flex-wrap:nowrap;overflow-x:auto;background:var(--card);border-bottom:1px solid var(--line);margin:0 -20px 12px;padding:0 20px;position:relative}
:is(#pv-wrap,#app) #supply-root #pp-tabs .rtab{flex:0 0 auto;padding:13px 13px 11px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);border-bottom:0;box-shadow:none;white-space:nowrap;cursor:pointer;transition:color .15s}
:is(#pv-wrap,#app) #supply-root #pp-tabs .rtab:hover{color:var(--ink)}
:is(#pv-wrap,#app) #supply-root #pp-tabs .rtab.active{color:var(--ink);box-shadow:inset 0 -2.5px 0 var(--nav)}
/* portal PO grid */
#pv-wrap #supply-root table.pp-tbl tbody tr:not([id]):not(.pp-grp) td{padding:8px 10px;border-top:1px solid var(--line2);font-size:12px;vertical-align:middle}
#pv-wrap #supply-root table.pp-tbl tbody tr:not([id]):not(.pp-grp):hover td{background:var(--hover)}
#pv-wrap #supply-root table.pp-tbl thead th:first-child,#pv-wrap #supply-root table.pp-tbl thead th:nth-child(2){background:var(--card)}
#pv-wrap #supply-root table.pp-tbl tr.pp-grp td{background:var(--hover);color:var(--muted);font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:none;padding:8px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line2)}
#pv-wrap #supply-root .pp-exp{background:var(--nav);color:#fff;border:0;border-radius:6px;padding:3px 8px;font-size:9.5px;font-weight:800;letter-spacing:.06em;font-family:inherit}
#pv-wrap #supply-root .pp-exp:hover{background:var(--blue)}
#pv-wrap #supply-root table.pp-tbl tr.pp-row.row-open>td{background:var(--amber-bg)!important;border-top:2px solid var(--nav)!important}
#pv-wrap #supply-root table.pp-tbl tr[id^="pp-"]>td{border-bottom:2px solid var(--nav)}
#pv-wrap #supply-root .count{color:var(--muted)}
#pv-wrap .pv-empty{color:var(--muted);font-size:13px}
@media (max-width:640px){
  #pv-wrap{padding:0 10px 14px}
  :is(#pv-wrap,#app) #supply-root #pp-tabs{margin:0 -10px 10px;padding:0 10px}
  #pv-wrap #supply-root .pp-exp{padding:0 4px;border-radius:5px}   /* phone keeps the compact "M" (portal rule) */
}

/* ═══ PRODUCT grid filters (v27.488, Ben): Stage dropdown; phone = search + "Filters" pop-down ═══════════════════ */
#app #product-root .save-btn.outline-blue{color:var(--blue);border:1.5px solid var(--blue);background:var(--card)}
#app #product-root .save-btn.outline-blue:hover{background:var(--blue-soft)}
#app #product-root .pg-filt-toggle{display:none}
#app #product-root .pg-filt-panel{display:contents}
#app #product-root #pg-stagepills{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:-4px 0 12px}
@media (max-width:640px){
  #app #product-root #pg-filters{gap:8px}
  #app #product-root #pg-filters #pg-q{width:100%!important;flex:1 1 100%;font-size:15px;padding:9px 12px}
  #app #product-root .pg-filt-toggle{display:inline-flex;align-items:center;font-size:12px;font-weight:700}
  #app #product-root .pg-filt-panel{display:none;flex:1 1 100%;flex-direction:column;align-items:stretch;gap:8px;padding:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
  #app #product-root #pg-filters.open .pg-filt-panel{display:flex}
  #app #product-root .pg-filt-panel > span{display:flex!important;justify-content:space-between;width:100%}
  #app #product-root .pg-filt-panel select.fci{flex:1 1 auto;max-width:70%}
  #app #product-root #pg-stagepills{display:none}
  #app #product-root #pg-stagepills.open{display:flex}
}

/* ═══ PRODUCT Dashboard (v27.489): shared KPI tiles + dashboard classes ═══════════════════════════════════════ */
#app .hz-kpis{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:12px;margin:0 0 14px}
#app .hz-kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:11px 14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:11px;min-width:0}
#app .hz-kpi-ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:none}
#app .hz-kpi-ic.neg{background:var(--neg-bg);color:var(--neg)} #app .hz-kpi-ic.amber{background:var(--amber-bg);color:var(--amber)} #app .hz-kpi-ic.blue{background:var(--blue-soft);color:var(--blue)} #app .hz-kpi-ic.pos{background:var(--pos-bg);color:var(--pos)}
#app .hz-kpi-v{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--ink)}
#app .hz-kpi-l{font-size:10.5px;font-weight:600;color:var(--muted);line-height:1.3}
#app #product-root .db-bar{align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
#app #product-root .db-views{display:inline-flex;gap:4px}
#app #product-root .pill-lbl{font-size:11px;color:var(--muted);font-weight:600}
#app #product-root .db-pos{color:var(--pos);font-weight:700} #app #product-root .db-neg{color:var(--neg);font-weight:700}
#app #product-root .db-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:10.5px;color:var(--muted);margin:2px 2px 10px}
#app #product-root .db-tw{overflow-x:auto;margin-bottom:12px}
#app #product-root table.db-matrix{border-collapse:separate;border-spacing:0;font-size:12px;width:100%;min-width:620px}
#app #product-root .db-th{padding:10px 10px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line);background:var(--card);white-space:nowrap}
#app #product-root tr.db-grp td{background:var(--hover);border-top:1px solid var(--line);border-bottom:1px solid var(--line2);font-size:11.5px;font-weight:800;letter-spacing:.05em;color:var(--muted);padding:8px 12px;text-transform:none}
#app #product-root .db-grp-n{font-weight:700;color:var(--faint)}
#app #product-root tr.db-row td{border-top:1px solid var(--line2)}
#app #product-root tr.db-row:hover td{background:var(--hover)}
#app #product-root tr.db-row.db-dim td{opacity:.7}
#app #product-root td.db-prodcell{padding:7px 10px}
#app #product-root td.db-td{padding:7px 10px;vertical-align:top}
#app #product-root .db-name{font-weight:700;font-size:12.5px;color:var(--ink);display:block;line-height:1.15}
#app #product-root .db-sw{width:28px;height:28px;object-fit:cover;border-radius:7px;border:1px solid var(--line);flex:0 0 auto;display:inline-block}
#app #product-root .db-sw.none{border:1px dashed var(--line);background:var(--hover)}
#app #product-root .db-ov{display:inline-block;font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:999px;white-space:nowrap}
#app #product-root td.db-c{text-align:center;padding:7px 6px;font-weight:800;font-size:11px;font-variant-numeric:tabular-nums}
#app #product-root td.db-c.na{background:var(--hover);color:var(--faint);font-weight:400}
#app #product-root td.db-c.ok{background:var(--pos-bg);color:var(--pos)}
#app #product-root td.db-c.pend{background:var(--amber-bg);color:var(--amber)}
#app #product-root td.db-c.exc{background:var(--neg-bg);color:var(--neg);box-shadow:inset 0 0 0 2px var(--neg)}
@media (max-width:900px){ #app .hz-kpis{grid-template-columns:repeat(2,minmax(120px,1fr))} }

/* ═══ U5 portal, slice 2 (v27.493): five-section navigation ═══════════════════════════════════════════════════ */
:is(#pv-wrap,#app) #supply-root #pp-secs{display:flex;gap:2px;align-items:center;flex-wrap:nowrap;overflow-x:auto;background:var(--card);border-bottom:1px solid var(--line);margin:0 -20px 0;padding:0 20px}
:is(#pv-wrap,#app) #supply-root #pp-secs::-webkit-scrollbar{height:0}
:is(#pv-wrap,#app) #supply-root .pp-sec{flex:0 0 auto;padding:13px 13px 11px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);cursor:pointer;white-space:nowrap;transition:color .15s}
:is(#pv-wrap,#app) #supply-root .pp-sec:hover{color:var(--ink)}
:is(#pv-wrap,#app) #supply-root .pp-sec.active{color:var(--ink);box-shadow:inset 0 -2.5px 0 var(--nav)}
/* the original tab row becomes the level-3 row of the active section */
:is(#pv-wrap,#app) #supply-root #pp-tabs{background:var(--l3-bg);border-bottom:1px solid var(--line);margin:0 -20px 12px;padding:0 20px}
:is(#pv-wrap,#app) #supply-root #pp-tabs .rtab{padding:11px 13px 9px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
:is(#pv-wrap,#app) #supply-root #pp-tabs .rtab.active{color:var(--blue);box-shadow:inset 0 -2.5px 0 var(--blue)}
:is(#pv-wrap,#app) #supply-root #pp-tabs[data-sec] .rtab[data-sec]{display:none}
:is(#pv-wrap,#app) #supply-root #pp-tabs[data-sec="orders"] .rtab[data-sec="orders"],:is(#pv-wrap,#app) #supply-root #pp-tabs[data-sec="finance"] .rtab[data-sec="finance"],:is(#pv-wrap,#app) #supply-root #pp-tabs[data-sec="samples"] .rtab[data-sec="samples"],:is(#pv-wrap,#app) #supply-root #pp-tabs[data-sec="product"] .rtab[data-sec="product"],:is(#pv-wrap,#app) #supply-root #pp-tabs[data-sec="messages"] .rtab[data-sec="messages"],:is(#pv-wrap,#app) #supply-root #pp-tabs[data-sec="custom"] .rtab[data-sec="custom"]{display:inline-flex;align-items:center}
/* v28.572 (Ben: CUSTOM level-2 menu): custom joins the list above (Ready to batch | Batches | Sample files) */
@media (max-width:640px){
  :is(#pv-wrap,#app) #supply-root #pp-secs{margin:0 -10px 0;padding:0 10px}
  :is(#pv-wrap,#app) #supply-root #pp-tabs{margin:0 -10px 10px;padding:0 10px}
  :is(#pv-wrap,#app) #supply-root .pp-sec{padding:12px 11px 10px;font-size:11.5px}
}

/* ═══ U3b DEMAND plan (v27.501, Ben-approved mockup): column states, cell scale, tints, bands, names, SKU rows, hover ═══ */
:root{--blue-wash:#f6f9fe;--fy27:#eef3fd;--fy28:#f3effc;--band:#f2f4f8}
/* 1 · columns: actuals white, forecast wash, current dashed rule; header tags */
#app td.fctd{background:var(--card);border-left:1px solid var(--line2);padding:3px 3px 1px}
#app td.fctd.actual{background:var(--card);border-left-color:var(--line2)}
#app td.fctd.actual.fs26,#app td.fctd.fs26,#app td.fctd.fs27{border-left:2px solid var(--line)}
#app td.fctd.hz-fc:not(.anomaly-hi):not(.anomaly-lo):not(.plansel){background:var(--blue-wash)}
#app td.fctd.hz-fc.y27:not(.anomaly-hi):not(.anomaly-lo):not(.plansel){background:var(--fy27)}
#app td.fctd.hz-fc.y28:not(.anomaly-hi):not(.anomaly-lo):not(.plansel){background:var(--fy28)}
#app td.fctd.hz-cur{background:var(--card)!important;border-left:2px dashed var(--blue)!important}
#app tr.sub th{background:var(--card)!important;color:var(--faint);font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:8px 6px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
#app tr.sub th.actual-hdr{background:var(--card)!important;color:var(--ink)}
#app tr.sub th .hz-htag{display:block;font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--faint);margin-top:2px}
#app tr.sub th.hz-fc-hdr .hz-htag{color:var(--blue)}
#app tr.sub th.hz-cur-hdr{border-left:2px dashed var(--blue)}
#app tr.sub th.hz-cur-hdr .hz-htag{color:var(--blue)}
#app tr.sub th.hz-cur-hdr .hz-htag::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-right:4px;vertical-align:middle}
#app tr.sub th.stk,#app tr.sub th.stk2{text-align:left}
/* 2 · one type scale inside the cell */
#app .fcly{font-size:10px;color:var(--faint)}
#app .fci{font-size:11px;font-weight:700;border-radius:5px;padding:0 4px;color:var(--muted)}
#app .fci.pct{color:var(--pos)} #app .fci.pct.neg{color:var(--neg)}
#app .fci.actual-pct{color:var(--pos);font-weight:700} #app .fci.actual-pct.neg{color:var(--neg)}
#app .fci.ovr{background:var(--violet-bg);color:var(--violet);border-color:transparent}
#app .fcr{font-size:12.5px;font-weight:700;color:var(--ink)}
#app .fcr.actual{color:var(--ink)} #app .fcr.actual.neg{color:var(--neg)}
#app .fcrev{font-size:10px;text-align:right;padding-right:3px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.3}
#app .gp{color:var(--pos)} #app .rp{color:var(--neg)} #app .fp{color:var(--faint)}
/* 3 · editing looks editable */
#app .fci::placeholder{color:var(--faint);opacity:.55;font-weight:500}
#app tr.sub-row:hover .fcin>.fci:not(.actual-pct){border-color:var(--line);background:var(--card)}
#app .fci:focus{border-color:var(--blue)!important;box-shadow:0 0 0 3px var(--blue-soft);background:var(--card)!important;outline:none}
/* 4 · totals as bands, years as tints */
#app td.totu,#app th.bgt26u,#app th.bgt27u,#app th.bgt28u,#app th.bgtH1u,#app th.bgtH2u{background:var(--band)!important;color:var(--ink);border-left:1px solid var(--line)!important}
#app td.totu.y27,#app th.bgt27u{background:var(--fy27)!important} #app td.totu.y28,#app th.bgt28u{background:var(--fy28)!important}
#app td.totu.yH1,#app td.totu.yH2{background:var(--band)!important;color:var(--muted)}
#app td.ptot,#app td.ptot-q,#app td.ptot-h,#app th.ptot-q,#app th.ptot-h{background:var(--band)!important;border-left:1px solid var(--line)}
#app td.totr,#app td.totr.y26,#app td.totr.y27,#app .totr.y28{background:var(--band)!important;color:var(--muted)}
/* 5 · quieter chrome: category header + roll-up bands, hairline sub-rows, navy grand total unchanged */
#app tr.cat-hdr td{background:var(--band)!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line2)!important;font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--muted);padding:8px 10px}
#app tr.cat-tot td{background:var(--band)!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;font-weight:700}
#app tr.cat-tot td.fctd,#app tr.cat-tot td.totu,#app tr.cat-tot td.totr{background:var(--band)!important}
#app tr.sub-row td{border-top:1px solid var(--line2)!important;border-bottom:1px solid var(--line2)!important}
#app tr.sub-row.cat-start td{border-top:1px solid var(--line)!important}
#app tr.grand-tot td.fctd.hz-fc,#app tr.grand-tot td.fctd.hz-cur,#app tr.grand-tot td.totu,#app tr.grand-tot td.ptot-h,#app tr.grand-tot td.ptot-q{background:#16213a!important;border-left-color:#2a3550!important}
#app tr.grand-tot .fcrev,#app tr.grand-tot .fcly{color:var(--nav-dim)}
/* 6 · sub-category name cell */
#app td.stk{box-shadow:1px 0 0 var(--line)} #app td.stk2{border-right:1px solid var(--line)}
#app td.stk .hz-subname{font-size:12.5px;font-weight:700;color:var(--ink)}
#app .sku-toggle{font-size:10px;padding:0 5px;border:1px solid var(--line);border-radius:5px;background:var(--card);color:var(--muted);cursor:pointer;line-height:1.6;font-family:inherit}
#app .sku-toggle:hover{border-color:var(--faint);color:var(--ink)}
#app .sku-tier{border-radius:4px;padding:0 4px;font-size:8.5px}
/* 7 · SKU rows read as children */
#app tr.sku-inline:not(.subtot-row) td:not(.anom-hi-cell):not(.anom-lo-cell):not(.plansel){background:var(--row-alt)!important;border-bottom-color:var(--line2)!important}
#app tr.sku-inline:not(.subtot-row) td.stk,#app tr.sku-inline:not(.subtot-row) td.stk2,#app tr.sku-inline:not(.subtot-row) td:first-child{background:var(--row-alt)!important}
#app tr.sku-inline.hz-lyo td{opacity:.72}
/* 8 · whole-row hover (overlay works over any tint; inline heat / disc paints stay visible underneath) */
#app tr.sub-row:hover td:not(.stk):not(.stk2){box-shadow:inset 0 0 0 999px rgba(16,24,40,.035)}
#app tr.sub-row:hover td.stk,#app tr.sub-row:hover td.stk2,#app tr.sku-inline:hover td.stk,#app tr.sku-inline:hover td:first-child{background:var(--hover)!important}
#app tr.sku-inline:hover td:not(:first-child):not(.stk){box-shadow:inset 0 0 0 999px rgba(16,24,40,.035)}
/* dark: row-hover overlays must LIGHTEN, not darken (the rgba above was tuned for the light theme) */
:root.om-dark #app tr.sub-row:hover td:not(.stk):not(.stk2),
:root.om-dark #app tr.sku-inline:hover td:not(:first-child):not(.stk){box-shadow:inset 0 0 0 999px rgba(255,255,255,.055)}

/* v27.667 (Ben): dark-mode SELECTED pills. The light-theme active style (background var(--nav)) is DARKER than the
   card in dark mode, so a selected filter pill reads as a near-invisible hole. Give active pills a lighter dark fill
   plus a highlighted blue outline so the selection is obvious ("dark buttons with a highlighted outline"). Higher
   specificity than the artifact's .pill.active / #buy-wrap .pill.active rules; #buy-wrap sits under #app so both the
   top-level filter pills and the Buy/FBA/Transfer pills are covered. */
:root.om-dark #app .pill.active{ background:var(--nav-2); color:var(--nav-ink); border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue) }

/* v27.502: the old top bar is empty once the nav rows moved out of it */
#pv-wrap #supply-root .bar:empty{display:none;margin:0}

/* v27.505 (Ben): supplier price list — every column left-aligned */
#pv-wrap #pl-body table th,#pv-wrap #pl-body table td{text-align:left}
#pv-wrap #pl-body .pv-empty{text-align:left;padding:14px 0}

/* ═══ Portal review items 5-7 (v27.506): skeletons, phone hit-targets, section counts ══════════════════════════ */
#pv-wrap .pp-skel{display:flex;flex-direction:column;gap:8px;padding:12px 0;max-width:820px}
#pv-wrap .pp-skel i{display:block;height:34px;border-radius:8px;background:linear-gradient(90deg,var(--hover) 25%,var(--line) 37%,var(--hover) 63%);background-size:400% 100%;animation:ppShimmer 1.2s ease-in-out infinite}
#pv-wrap .pp-skel i:first-child{height:22px;width:38%}
@keyframes ppShimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){ #pv-wrap .pp-skel i{animation:none} }
:is(#pv-wrap,#app) #supply-root .pp-sec-n{display:inline-block;margin-left:6px;background:var(--neg);color:#fff;font-size:10px;font-weight:800;line-height:1.4;padding:1px 7px;border-radius:999px;vertical-align:middle;letter-spacing:0}
@media (max-width:640px){
  :is(#pv-wrap,#app) #supply-root .pp-sec{font-size:11.5px;min-height:40px;display:inline-flex;align-items:center}
  :is(#pv-wrap,#app) #supply-root #pp-tabs .rtab{font-size:11px;min-height:38px;display:inline-flex;align-items:center}
  #pv-wrap #supply-root .pp-exp{min-height:34px;min-width:34px;display:inline-flex;align-items:center;justify-content:center}
  #pv-wrap #supply-root .pill,#pv-wrap #supply-root .save-btn,#pv-wrap #supply-root select.fci{min-height:36px}
  #pv-wrap #supply-root .po-subnav .rtab{padding:11px 12px;min-height:38px;display:inline-flex;align-items:center}
}

/* ═══ Portal toasts (v27.507): non-blocking notices instead of browser alerts ═════════════════════════════════════ */
#pv-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);z-index:100060;max-width:min(560px,92vw);background:var(--nav);color:#fff;padding:11px 18px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.35;box-shadow:0 12px 34px -8px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1);text-align:left}
#pv-toast.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
#pv-toast.err{background:var(--neg)}
#pv-toast.ok{background:var(--pos)}   /* v27.843 (Ben): success toast is green (was falling back to the dark navy base) */
#pv-toast.err::before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.22);font-weight:800;font-size:12px;margin-right:9px;vertical-align:-3px}
#pv-toast.ok::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.18);font-weight:800;font-size:12px;margin-right:9px;vertical-align:-3px}
@media (prefers-reduced-motion:reduce){ #pv-toast{transition:none} }

/* ═══ Portal EN / 中文 toggle (v27.508) ═══════════════════════════════════════════════════════════════════════════ */
body header.pv-top .pv-lang{display:inline-flex;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:2px;gap:2px;margin-right:8px}
body header.pv-top .pv-lang button{border:0;background:transparent;color:var(--nav-dim);font:inherit;font-size:12px;font-weight:700;padding:4px 10px;border-radius:6px;cursor:pointer;line-height:1.2}
body header.pv-top .pv-lang button.on{background:rgba(255,255,255,.14);color:#fff}
body header.pv-top .pv-lang button:hover{color:#fff}

/* ═══ Bilingual top menus (v27.509) ══════════════════════════════════════════════════════════════════════════════ */
#pv-wrap #supply-root .pp-bi{display:inline-flex;flex-direction:row;align-items:baseline;gap:5px;line-height:1.15}   /* v27.639: 中文 inline after English, not stacked */
#pv-wrap #supply-root .pp-bi .pp-zh{font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--faint)}
:is(#pv-wrap,#app) #supply-root .pp-sec.active .pp-zh,:is(#pv-wrap,#app) #supply-root #pp-tabs .rtab.active .pp-zh{color:inherit;opacity:.75}
:is(#pv-wrap,#app) #supply-root #pp-secs .pp-sec{padding:10px 13px 8px}
:is(#pv-wrap,#app) #supply-root #pp-tabs .rtab{padding:9px 13px 7px}
:is(#pv-wrap,#app) #supply-root #pp-tabs .rtab .pp-bi .pp-zh{font-size:9.5px}

/* ═══ Mobile M1 (v27.510): phone input cap, tap targets ═══════════════════════════════════════════════════════════ */
@media (max-width:640px){
  #app input,#app select,#app textarea,#pv-wrap input,#pv-wrap select,#pv-wrap textarea{max-width:100%!important;box-sizing:border-box}
  #app .bar .save-btn,#app .bar .pill,#app #dab-navwrap .pill,#app .mob-filt-toggle,#app .act-filt-toggle,#app .po-filt-toggle,#app #buy-wrap #bp-filt-toggle,#app #product-root #pg-filters .save-btn,#app #product-root #pg-filters .fci{min-height:36px}
  #app .bar .pill,#app #dab-navwrap .pill{display:inline-flex;align-items:center}
  #app .mob-filt-panel.open{display:flex;flex-direction:column;gap:8px}
  #app .mob-filt-panel:not(.open){display:none!important}   /* v27.573 FIX: this block used to force display:flex on the panel regardless of .open, so the Filters button did nothing */
  /* v27.573: DEMAND plan on a phone — narrower, wrapping sticky name column (was 320px of a 390px screen), taller scroll area */
  #app #tw thead th.stk,#app #tw td.stk{width:150px!important;min-width:150px!important;max-width:150px!important;white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}
  #app #tw td.stk .hz-subname{font-size:12px}
  #app #tw{max-height:calc(100dvh - 128px)!important;-webkit-overflow-scrolling:touch}
  #app #dab-navwrap .mob-filt-toggle{margin:8px 0 0}
}

/* ═══ Mobile M3 (v27.512): SUPPLY tables tagged .hz-stack stack into labelled cards on phones (hzStackTables) ═══════ */
@media (max-width:640px){
  #app :is(#supply-root,#product-root) .tw:has(> table.hz-stack[data-stack]){overflow:visible;max-width:none!important;max-height:none!important;border:0;background:transparent}
  #app :is(#supply-root,#product-root) table.hz-stack[data-stack]{display:block;width:100%!important;min-width:0!important;max-width:none!important;table-layout:auto;border-collapse:separate}
  #app :is(#supply-root,#product-root) table.hz-stack[data-stack] thead,#app :is(#supply-root,#product-root) table.hz-stack[data-stack] colgroup{display:none}
  #app :is(#supply-root,#product-root) table.hz-stack[data-stack] tbody,#app :is(#supply-root,#product-root) table.hz-stack[data-stack] tfoot{display:block}
  #app :is(#supply-root,#product-root) table.hz-stack[data-stack] tr{display:block;border:1px solid var(--line);border-radius:10px;padding:6px 10px;margin:0 0 8px;background:var(--card);box-shadow:0 1px 2px rgba(15,23,42,.04)}
  #app :is(#supply-root,#product-root) table.hz-stack[data-stack] td{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:4px 0!important;border:0!important;text-align:left!important;width:auto!important;min-width:0!important;max-width:none!important;white-space:normal!important;position:static!important;background:transparent!important;overflow-wrap:anywhere}
  #app :is(#supply-root,#product-root) table.hz-stack[data-stack] td[data-l]::before{content:attr(data-l);flex:0 0 40%;color:var(--faint);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.5}
  #app :is(#supply-root,#product-root) table.hz-stack[data-stack] td[data-l=""]::before{display:none}
  #app :is(#supply-root,#product-root) table.hz-stack[data-stack] td[data-l]:empty{display:none}
  #app :is(#supply-root,#product-root) table.hz-stack[data-stack] tr[data-full] td{display:block}
  #app :is(#supply-root,#product-root) table.hz-stack[data-stack] tr[data-full]:not(.batchrow){padding:0;border:0;background:transparent;box-shadow:none}
  #app :is(#supply-root,#product-root) table.hz-stack[data-stack] tr.batchrow{background:var(--hover)}
  #app :is(#supply-root,#product-root) table.hz-stack[data-stack] td .fci,#app :is(#supply-root,#product-root) table.hz-stack[data-stack] td input,#app :is(#supply-root,#product-root) table.hz-stack[data-stack] td select{max-width:60%}
}

/* ═══ v27.517/518: main PO grid as PO cards on phones (Ben: PO title, unlabelled chips, labelled dates only) ═══════ */
@media (max-width:640px){
  /* card = flex row that wraps; every cell is a full-width line unless told otherwise */
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]){display:flex;flex-wrap:wrap;align-items:center;gap:6px 6px;position:static;padding:10px 12px 10px}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td{flex:1 1 100%;display:block;padding:0!important;margin:0;min-width:0!important;line-height:1.35}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td::before{content:none;display:none}
  /* line 1: PO ref (grows) + PLAN button (auto, pushed right). The grow forces everything after onto line 2. */
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="PO"]{order:0;flex:1 1 0;min-width:0!important;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="PO"] .ind{display:none}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-ci="0"]{order:0;flex:0 0 auto;width:auto!important;margin-left:auto;text-align:right}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-ci="0"] .planbtn{min-height:34px;padding:6px 12px;font-size:11px!important;white-space:nowrap}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-ci="0"] .planbtn.po-exp::before{content:none!important}   /* v27.519: the phone "P" collapse showed PPLAN inside the card */
  /* a full-width hairline after the title line */
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full])::after{content:"";order:0;flex:1 1 100%;height:1px;background:var(--line);margin:0 0 2px}
  /* line 2+: unlabelled chips, wrap freely, no separators */
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Status"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Ship to"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Branch"]{flex:0 0 auto;max-width:100%!important;display:inline-flex;align-items:center;background:var(--hover);border:1px solid var(--line);border-radius:999px;padding:3px 9px!important;font-size:12px;font-weight:600}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Status"]{order:1;background:transparent;border:0;padding:0!important}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Ship to"]{order:2}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Branch"]{order:3}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Shipment"]{order:5;display:flex;align-items:baseline;gap:10px;font-size:12px;margin-top:4px;padding-top:6px!important;border-top:1px dashed var(--line)!important}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Shipment"]::before{content:attr(data-l);display:block;flex:0 0 38%;color:var(--faint);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.5}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Status"] .fci,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Ship to"] .fci,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Branch"] .fci,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Shipment"] .fci{max-width:none;width:auto}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Ship to"][data-empty],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Branch"][data-empty]{display:none}
  /* direct to client: own line, only when set */
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Direct"]{order:6;font-size:12px!important;line-height:1.35!important;max-width:none!important;white-space:normal!important}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Direct"][data-empty]{display:none}
  /* labelled dates: label column 38%, value column the rest */
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Start"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="End"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Arrival/Delivery"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Completion"]{display:flex;align-items:baseline;gap:10px;font-size:12px}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Start"]{order:7}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="End"]{order:8}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Arrival/Delivery"]{order:9}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Completion"]{order:10}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Start"]::before,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="End"]::before,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Arrival/Delivery"]::before,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Completion"]::before{content:attr(data-l);display:block;flex:0 0 38%;color:var(--faint);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.5}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Start"] .fci,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="End"] .fci,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Arrival/Delivery"] .fci,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Completion"] .fci{max-width:100%}
  /* hidden on the phone (all in the PLAN drawer) */
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="ERP"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Supplier"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Deposit ref"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Ship"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Value est"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Pallets"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="PROD#"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Batch"]{display:none}
  /* group captions + expanded PLAN row */
  #app #supply-root table.po-cards[data-stack] tbody tr.grp-row[data-full]{background:transparent;border:0;box-shadow:none;padding:10px 0 4px;margin:0}
  #app #supply-root table.po-cards[data-stack] tbody tr.grp-row[data-full] td{display:block;background:transparent!important;padding:0 2px 4px!important;border:0!important;border-bottom:1px solid var(--line)!important}
  #app #supply-root table.po-cards[data-stack] tbody tr.exp-row[data-full]{border:1px solid var(--faint);border-top:0;border-radius:0 0 10px 10px;margin:-9px 0 10px;padding:10px 8px 8px;background:#fff}
}

/* ═══ v27.528: PRODUCT plan grid — header row sticks while scrolling DOWN (Ben: only Ref looked sticky). The .tw is the
   scroll container (it already scrolls sideways), so it needs a height for top:0 to bite; every th already has sticky top. */
#app #product-root .pg-desktop .tw{max-height:calc(100vh - 210px);overflow:auto}
#app #product-root table.pg-tbl thead th{position:sticky;top:0;z-index:4;background:var(--card)}
#app #product-root table.pg-tbl thead th:nth-child(1),#app #product-root table.pg-tbl thead th:nth-child(2){z-index:5}
#app #product-root table.pg-tbl tbody td:nth-child(1),#app #product-root table.pg-tbl tbody td:nth-child(2){z-index:2}

/* ═══ v27.535: slimmer phone PO card (Ben) — tighter padding, country+branch on one row, dates as a 2-row mini table ═══ */
@media (max-width:640px){
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]){padding:7px 10px 7px;gap:3px 6px;align-items:center}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td{line-height:1.3}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="PO"]{font-size:13px}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full])::after{margin:0}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-ci="0"] .planbtn{min-height:28px;padding:4px 9px;font-size:10px!important}
  /* chips: Status · Ship to · Branch on ONE row; compact pickers; no "(branch)" hint after the country */
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Status"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Ship to"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Branch"]{padding:0!important;border:0;background:transparent;font-size:11px;white-space:nowrap!important}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Ship to"] .mut.tiny{display:none}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Ship to"] .cell-pick,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Branch"] .cell-pick{padding:2px 7px;font-size:11px;line-height:1.3}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Status"] select.fci[data-field="status"]{padding:2px 18px 2px 6px!important;font-size:10px!important;letter-spacing:0!important;width:auto!important;min-width:0!important;line-height:1.3}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Shipment"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Direct"]{padding:2px 0!important;margin-top:2px;border-top:0!important;font-size:11px}
  /* dates: a 2-row mini table (labels row + values row) — Start · End · Arrive · Complete */
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Start"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="End"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Arrival/Delivery"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Completion"]{flex:1 1 0;min-width:0!important;display:flex;flex-direction:column;align-items:flex-start;gap:1px;margin-top:5px;padding:5px 4px 0 0!important;border-top:1px solid var(--line)!important;font-size:11px;white-space:nowrap!important;overflow:hidden}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Start"]::before,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="End"]::before,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Arrival/Delivery"]::before,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Completion"]::before{flex:none;font-size:9px;line-height:1.3;letter-spacing:.04em}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Arrival/Delivery"]::before{content:"Arrive"}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Completion"]::before{content:"Complete"}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Start"] .fci,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="End"] .fci,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Arrival/Delivery"] .fci,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Completion"] .fci{width:100%!important;max-width:100%!important;min-width:0!important;padding:2px 3px;font-size:10.5px;box-sizing:border-box}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Start"] .tool-badge,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="End"] .tool-badge{font-size:9px;padding:1px 5px}
}

/* ═══ v27.537: phone PO card layout (Ben) — row 1: PLAN · PO ref … Country · Branch (right); row 2: Status · Ship ═══ */
@media (max-width:640px){
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]){gap:3px 5px}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-ci="0"]{order:0;margin-left:0;flex:0 0 auto}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="PO"]{order:0;flex:1 1 0;min-width:0!important;font-size:12.5px;padding-right:2px!important}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Ship to"]{order:0;flex:0 0 auto;margin-left:auto}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Branch"]{order:0;flex:0 0 auto}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Ship to"] .cell-pick,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Branch"] .cell-pick{padding:2px 5px;font-size:10.5px;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* row 2: Status chip + "SHIP — assign ▾" side by side */
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Status"]{order:1;flex:0 0 auto}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Shipment"]{order:2;flex:1 1 auto;display:inline-flex;align-items:center;gap:6px;margin:0;padding:0 0 0 4px!important;border:0!important;font-size:11px;min-width:0!important;white-space:nowrap!important;overflow:hidden}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Shipment"]::before{content:"Ship";display:inline;flex:0 0 auto;color:var(--faint);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.3}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Direct"]{order:3}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Start"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="End"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Arrival/Delivery"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Completion"]{margin-top:4px}
}

/* ═══ v27.538: phone PO toolbar — Focus · SKU filter · Filters on ONE row; PO / supplier search full width beneath (Ben) ═══ */
@media (max-width:640px){
  #app #supply-root #po-prog{display:flex;flex-wrap:wrap;align-items:center}
  #app #supply-root #po-prog .po-focus{order:1;flex:0 0 auto}
  #app #supply-root #po-prog #po-sku-wrap{order:1;flex:1 1 110px;min-width:0;margin-left:0!important}
  #app #supply-root #po-prog #po-sku-wrap #po-sku-search{width:100%!important;min-width:0;flex:1 1 auto}
  #app #supply-root #po-prog .po-filt-toggle{order:1;flex:0 0 auto}
  #app #supply-root #po-prog #sup-search{order:2;flex:1 1 100%;width:100%!important}
}

/* ═══ v27.539: phone PO card — hard line break before the dates (cards WITHOUT a Direct line let the four dates squeeze onto the Status row) ═══ */
@media (max-width:640px){
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full])::before{content:"";display:block;order:3;flex:1 1 100%;height:0;margin:0;padding:0}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Direct"]{order:4}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Start"]{order:5}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="End"]{order:6}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Arrival/Delivery"]{order:7}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Completion"]{order:8}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Start"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="End"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Arrival/Delivery"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Completion"]{flex:1 1 20%;min-width:20%!important;max-width:25%}
}

/* ═══ v27.540: phone PO card — Direct to client on ONE line: client · order ref ═══ */
@media (max-width:640px){
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Direct"]{display:block;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;font-size:11px!important;line-height:1.35!important;padding:1px 0!important}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Direct"] br{display:none}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Direct"] span.mut{margin-left:6px}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Direct"] span.mut::before{content:"· ";color:var(--faint)}
}

/* ═══ v27.541: phone PO card dates — top-aligned columns: label row, then the date, then badges / "set to" / CALC tags underneath ═══ */
@media (max-width:640px){
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Start"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="End"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Arrival/Delivery"],
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Completion"]{align-self:flex-start;align-items:stretch;white-space:normal!important;overflow:visible}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Start"]::before,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="End"]::before,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Arrival/Delivery"]::before,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Completion"]::before{margin-bottom:1px;height:12px}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Start"] > .datewrap,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="End"] > .datewrap,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Arrival/Delivery"] > .datewrap,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Completion"] > .datewrap{display:block;width:100%}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Start"] .datewrap .fci,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="End"] .datewrap .fci,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Arrival/Delivery"] .datewrap .fci,
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Completion"] .datewrap .fci{display:block;width:100%!important;min-height:22px}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Start"] > :not(.datewrap),
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="End"] > :not(.datewrap),
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Arrival/Delivery"] > :not(.datewrap),
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-l="Completion"] > :not(.datewrap){display:block;width:max-content;max-width:100%;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9.5px}
}

/* ═══ v27.542: phone PO card — smaller PLAN button + text ═══ */
@media (max-width:640px){
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-ci="0"] .planbtn{min-height:22px;padding:2px 7px;font-size:9px!important;letter-spacing:.04em;border-radius:4px;line-height:1.2}
  #app #supply-root table.po-cards[data-stack] tbody tr:not([data-full]) td[data-ci="0"] .fav-star{font-size:12px;margin-left:2px}
}

/* ═══ v27.543: PO PLAN panel loading indicators — shimmer line under the sub-nav + skeleton placeholder (no "Loading" text) ═══ */
@keyframes hzShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
#app #supply-root .po-fastbar{height:2px;margin:-6px 0 8px;border-radius:2px;background:linear-gradient(90deg,var(--blue-soft) 0%,var(--blue) 50%,var(--blue-soft) 100%);background-size:200% 100%;animation:hzShimmer 1.1s linear infinite}
#app :is(#supply-root,#product-root) .hz-skel{display:flex;flex-direction:column;gap:8px;padding:10px 4px}
#app :is(#supply-root,#product-root) .hz-skel i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--hover) 0%,var(--line) 50%,var(--hover) 100%);background-size:200% 100%;animation:hzShimmer 1.2s linear infinite}
#app :is(#supply-root,#product-root) .hz-skel i:nth-child(1){width:38%}#app :is(#supply-root,#product-root) .hz-skel i:nth-child(2){width:72%}#app :is(#supply-root,#product-root) .hz-skel i:nth-child(3){width:55%}

/* ═══ v27.567: DEMAND plan — both header rows (column titles + period/month row) on a very light grey instead of white (Ben) ═══ */
#app #main-hdr th,#app #main-hdr tr.sub th,#app #main-hdr th.stk,#app #main-hdr th.stk2,#app #main-hdr tr.sub th.stk,#app #main-hdr tr.sub th.stk2{background:var(--hdr-tint)!important}
#app #main-hdr th.hz-cur-hdr{background:var(--hdr-cur)!important}
/* v27.589 (Ben): demand-plan sticky COLUMN edges (SKU=.stk, Stock=.stk2) + sticky HEADER rows (FY grouping + month/year) = standard grey, 1pt */
#app #main-hdr th.stk,#app #tw thead th.stk{box-shadow:1px 0 0 var(--line)}
#app #main-hdr th.stk2,#app #tw thead th.stk2{border-right:1px solid var(--line)}
#app #main-hdr th{border-bottom:1px solid var(--line)!important}

/* ── PRODUCT ▸ SAMPLING (v27.755 design slice 1) — moved here from inject.html and put on the tokens so it follows dark
   mode and matches the rest of Horizon. 2-id selectors (#app #product-root) per the theme's specificity convention.
   The MANAGE panel tab strip now uses the system L3 tab language (10px uppercase, letter-spaced; hover/active inset
   underline come from the shared .rtab rules above). Retired inline-expander rules (.smp-exp/.smp-tabs/.smp-tab) are gone. */
#app #product-root .smp-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;table-layout:auto}   /* v27.776 (Ben): auto layout so columns size to content (swatch cell tracks the swatch; ref fits on one row) — the app base sets fixed */
#app #product-root .smp-tbl th{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--card);position:sticky;top:0;z-index:2}
#app #product-root .smp-tbl td{padding:7px 8px;border-bottom:1px solid var(--line2);vertical-align:middle}
#app #product-root .smp-row:hover td{background:var(--hover)}
/* v27.815 (Ben): S1..Sn columns share one fixed width + centred so they line up regardless of per-sample content */
#app #product-root .smp-scell{text-align:center;width:96px;min-width:96px;max-width:96px;padding-left:3px !important;padding-right:3px !important;vertical-align:top}
#app #product-root .smp-tbl th.smp-scell{padding-left:3px;padding-right:3px}
#app #product-root .smp-scell .smp-cellship{max-width:90px;margin-left:auto;margin-right:auto}
/* v27.815 (Ben): STAGE column trimmed to the width of its longest option ("Rejected — new sample") — was 220px */
#app #product-root .smp-stage{width:176px;min-width:176px;max-width:176px}
#app #product-root .smp-stage .smp-stage-sel{width:100%;min-width:0;max-width:100%}
#app #product-root .smp-manage{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--nav);background:var(--nav);color:var(--nav-ink);border-radius:var(--r-sm);padding:3px 10px;cursor:pointer;white-space:nowrap}
#app #product-root .smp-manage:hover{background:var(--nav-2);border-color:var(--nav-2)}
#app #product-root .smp-tbl td:first-child,#app #product-root .smp-tbl th:first-child{padding-right:0}
/* v27.776 (Ben): swatch cell tracks the swatch size (shrink-to-fit, no wasted width); ref on one row */
#app #product-root .smp-tbl td.smp-swcell{width:1%;white-space:nowrap;padding-left:6px !important;padding-right:6px !important;text-align:center}
#app #product-root .smp-tbl td.smp-refcell{min-width:150px}
#app #product-root .smp-refcell .smp-ref{font-weight:700;font-family:ui-monospace,Menlo,monospace;font-size:12px;white-space:nowrap}
#app #product-root .smp-tbl td:nth-child(2),#app #product-root .smp-tbl th:nth-child(2){padding-left:4px}
#app #product-root .po-subnav{display:flex;gap:2px;align-items:center;flex-wrap:wrap;background:var(--l3-bg);border:1px solid var(--blue-soft);border-radius:var(--r-sm);padding:2px 5px;margin:0 0 10px}
#app #product-root .po-subnav .rtab{background:transparent;border:none;padding:11px 13px 9px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;color:var(--faint);font-family:inherit;white-space:nowrap;flex:0 0 auto}
#app #product-root #smp-grid .pg-swatch2{width:40px;height:40px;border-radius:var(--r-sm)}
#app #product-root #smp-grid.smp-sw-sm .pg-swatch2{width:26px;height:26px;border-radius:6px}
#app #product-root #smp-grid.smp-sw-lg .pg-swatch2{width:76px;height:76px;border-radius:var(--r-md)}
#app #product-root #smp-grid img.pg-swatch2{cursor:zoom-in}
#app #product-root .smp-type{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:1px 7px;border-radius:999px;background:var(--line2);color:var(--muted);white-space:nowrap}
/* v27.762 (Ben): SAMPLING grid grouping — season → type, no colour, larger text, clear collapsible carets (mirrors the PRODUCT grid) */
#app #product-root .smp-seasonhdr>td{cursor:pointer;background:var(--line);border-top:2px solid var(--faint);font-weight:800;font-size:13.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);padding:8px 12px;position:sticky;left:0}
#app #product-root .smp-cathdr>td{cursor:pointer;background:var(--line2);font-weight:700;font-size:12.5px;color:var(--muted);padding:6px 12px 6px 28px;position:sticky;left:0}
#app #product-root .smp-seasonhdr:hover>td{background:var(--line2)}
#app #product-root .smp-cathdr:hover>td{background:var(--hover)}
#app #product-root .smp-gcaret{display:inline-block;width:18px;text-align:center;font-size:12px;color:var(--muted);margin-right:6px}
#app #product-root .smp-gcount{font-weight:500;color:var(--faint)}
@media(max-width:640px){
  #app #product-root table.smp-tbl[data-stack] tr.smp-seasonhdr,#app #product-root table.smp-tbl[data-stack] tr.smp-cathdr{display:block;margin:8px 0 4px;border:0;box-shadow:none;padding:0}
  #app #product-root table.smp-tbl[data-stack] tr.smp-seasonhdr>td,#app #product-root table.smp-tbl[data-stack] tr.smp-cathdr>td{display:block;border-radius:6px;position:static}
}
/* v27.763 (Ben): alternative SAMPLING grouping layouts — season tabs + type pills, and the season/type tree rail */
#app #product-root #smp-grid.smp-nogscroll{overflow:visible;max-height:none}
#app #product-root .smp-tblscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0}
#app #product-root .smp-modebar{margin:0 0 10px}
#app #product-root .smp-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:8px}
#app #product-root .smp-stab{font-size:12.5px;font-weight:700;padding:7px 14px;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;background:transparent;color:var(--muted);cursor:pointer;font-family:inherit;margin-bottom:-1px}
#app #product-root .smp-stab.on{color:var(--ink);background:var(--card);border-color:var(--line)}
#app #product-root .smp-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
#app #product-root .smp-pill{font-size:11px;font-weight:700;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;font-family:inherit}
#app #product-root .smp-pill.on{background:var(--blue);border-color:var(--blue);color:#fff}
#app #product-root .smp-tabn{font-weight:500;opacity:.75;margin-left:4px}
#app #product-root .smp-stab.on .smp-tabn{color:var(--blue-ink);opacity:1}
#app #product-root .smp-pill.on .smp-tabn{color:#fff}
#app #product-root .smp-treewrap{display:flex;gap:14px;align-items:flex-start}
#app #product-root .smp-rail{flex:0 0 200px;max-width:200px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:6px;font-size:12px;position:sticky;top:8px}
#app #product-root .smp-treewrap .smp-tblscroll{flex:1 1 auto}
#app #product-root .smp-rs{font-weight:800;text-transform:uppercase;font-size:10.5px;letter-spacing:.05em;color:var(--ink-soft);padding:8px 8px 4px}
#app #product-root .smp-rt{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:7px;cursor:pointer;color:var(--muted)}
#app #product-root .smp-rt:hover{background:var(--hover)}
#app #product-root .smp-rt.on{background:var(--blue-soft);color:var(--blue-ink);font-weight:700}
@media(max-width:640px){ #app #product-root .smp-treewrap{flex-direction:column} #app #product-root .smp-rail{flex-basis:auto;max-width:none;width:100%;position:static} }
/* v27.761 (Ben): supplier acceptance chip on the SAMPLING grid row */
#app #product-root .smp-acc{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.02em;padding:1px 7px;border-radius:999px;white-space:nowrap}
#app #product-root .smp-acc.ok{background:var(--pos-bg);color:var(--pos)}
#app #product-root .smp-acc.pend{background:var(--amber-bg);color:var(--amber)}
#app #product-root .smp-type.custom{background:var(--amber-bg);color:var(--amber)}
#app .hz-hoverzoom{position:fixed;z-index:200070;pointer-events:none;width:240px;height:240px;object-fit:cover;border-radius:var(--r-lg);border:3px solid var(--card);box-shadow:var(--shadow),0 14px 44px rgba(0,0,0,.38);background:var(--card)}
#app #product-root .smp-viewpill{background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:700;padding:4px 12px;cursor:pointer;line-height:1}
#app #product-root .smp-viewpill:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
#app #product-root .smp-viewpill:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0;border-left:none}
#app #product-root .smp-viewpill.active{background:var(--nav);color:var(--nav-ink);border-color:var(--nav)}
#app #product-root .smp-tick{width:22px;height:22px;border:2px solid var(--line);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;line-height:1;cursor:pointer;background:var(--card);color:transparent;transition:background .15s,border-color .15s;user-select:none}
/* v27.769 (Ben) — sample lifecycle colours. Hollow (open circle, coloured border) = not yet received: Development(blue),
   Shipped(orange). Filled = received/decided: Package received(light purple), In review(dark purple), Approved(green),
   Rejected(dark red), Stop development(bright red). Colour tokens: --smp-blue/orange/lpurple/dpurple/green/dred/bred. */
#app #product-root{--smp-dev:#2361d8;--smp-shp:#e8892b;--smp-pkg:#b79ce8;--smp-rv:#6b3fbf;--smp-ok:#118a4e;--smp-rj:#c0271d;--smp-stop:#ff2020}
#app #product-root .smp-tick.k-dev{background:transparent;border-color:var(--smp-dev);color:var(--smp-dev)}
#app #product-root .smp-tick.k-shp{background:transparent;border-color:var(--smp-shp);color:var(--smp-shp)}
#app #product-root .smp-tick.k-pkg{background:var(--smp-pkg);border-color:var(--smp-pkg);color:#fff}
#app #product-root .smp-tick.k-rv{background:var(--smp-rv);border-color:var(--smp-rv);color:#fff}
#app #product-root .smp-tick.k-ok{background:var(--smp-ok);border-color:var(--smp-ok);color:#fff}
#app #product-root .smp-tick.k-rj{background:var(--smp-rj);border-color:var(--smp-rj);color:#fff}
#app #product-root .smp-tick.k-stop{background:var(--smp-stop);border-color:var(--smp-stop);color:#fff}
#app #product-root .smp-tick.none{background:transparent;border-color:var(--line2);border-style:dashed;border-radius:999px;cursor:default;opacity:.6;color:transparent}   /* empty slot = open uncoloured circle */
/* v27.774 (Ben): sample tick colour legend (the key) */
#app #product-root .smp-legend{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 12px;padding:7px 12px;background:var(--hover);border:1px solid var(--line2);border-radius:var(--r-sm);font-size:11px;color:var(--muted)}
#app #product-root .smp-legend-lbl{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:10px;color:var(--faint)}
#app #product-root .smp-leg-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
/* v27.818 (Ben): the SAMPLE STATUS legend is desktop-only chrome — hide it on mobile to reclaim space */
@media (max-width:640px){ #app #product-root .smp-legend{display:none} }
/* v27.819 (Ben): bigger, easier-to-tap phrase/Pantone picker rows on mobile (the picker is a bottom sheet there) */
@media (max-width:640px){ .pt-pi{padding:12px 13px!important;font-size:13.5px!important} }

/* v27.820 (Ben): mobile SAMPLING — one card per request. JS renders table.smpc-tbl only at <=640px; the table/rows go
   display:block so cards stack, and the shared MANAGE / timeline expansion rows (.smp-mexp/.smp-tlexp) drop below each card. */
#app #product-root .smpc-tbl,#app #product-root .smpc-tbl tbody{display:block;width:100%}
#app #product-root .smpc-tbl tr{display:block}
#app #product-root .smpc-tbl td{display:block;padding:0;border:0}
#app #product-root .smpc-tbl tr.smp-seasonhdr td{padding:15px 2px 6px;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--ink);background:transparent}
#app #product-root .smpc-tbl tr.smp-cathdr td{padding:2px 2px 8px;font-size:12px;font-weight:700;color:var(--muted)}
#app #product-root .smpc-tbl tr.smp-seasonhdr,#app #product-root .smpc-tbl tr.smp-cathdr{cursor:pointer}
#app #product-root .smpc-tbl tr.smp-row{margin:0 0 11px}
#app #product-root .smpc-tbl tr.smp-mexp td,#app #product-root .smpc-tbl tr.smp-tlexp td{padding:0 0 11px}
#app #product-root .smpc{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(15,23,42,.05),0 6px 16px rgba(15,23,42,.06);overflow:hidden}
#app #product-root .smpc-top{display:flex;gap:11px;padding:12px 13px 10px}
#app #product-root .smpc-sw{width:52px;height:52px;border-radius:11px;flex:0 0 auto;border:1px solid var(--line);background:var(--hover);object-fit:cover;cursor:pointer}
#app #product-root .smpc-sw.none{display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:14px}
#app #product-root .smpc-id{flex:1;min-width:0}
#app #product-root .smpc-name{font-size:15px;font-weight:800;line-height:1.2;word-break:break-word}
#app #product-root .smpc-ref{font-size:11px;color:var(--faint);font-family:ui-monospace,Menlo,monospace;margin-top:2px}
#app #product-root .smpc-meta{font-size:12px;color:var(--muted);margin-top:5px;word-break:break-word}
#app #product-root .smpc-meta .smpc-sep{color:var(--faint)}
#app #product-root .smpc-right{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
#app #product-root .smpc-stage{font-size:11px;font-weight:800;padding:4px 9px;border-radius:8px;white-space:normal;max-width:118px;text-align:center;line-height:1.25}
#app #product-root .smpc-open{border:1px solid var(--line);background:var(--card);color:var(--blue);font-size:11px;font-weight:800;padding:5px 12px;border-radius:8px;cursor:pointer;white-space:nowrap}
#app #product-root .smpc-samps{display:flex;gap:8px;overflow-x:auto;padding:2px 13px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#app #product-root .smpc-samps::-webkit-scrollbar{display:none}
#app #product-root .smpc-samp{flex:0 0 auto;min-width:86px;border:1px solid var(--line);border-radius:11px;padding:8px 10px;background:var(--card);cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
#app #product-root .smpc-samp.latest{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-soft)}
#app #product-root .smpc-sv{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800}
#app #product-root .smpc-sdot.smp-tick{width:12px;height:12px;flex:0 0 auto;margin:0;font-size:9px;line-height:12px;min-width:0}
#app #product-root .smpc-sst{display:block;font-size:10.5px;font-weight:700;margin-top:3px}
#app #product-root .smpc-sdt{display:block;font-size:10.5px;color:var(--faint);margin-top:1px;font-variant-numeric:tabular-nums}
#app #product-root .smpc-nosamp{font-size:12px;color:var(--muted);padding:0 2px 4px}
#app #product-root .smpc-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 13px;border-top:1px solid var(--line2);background:var(--hover)}
#app #product-root .smpc-acc{font-size:11.5px;font-weight:700}
#app #product-root .smpc-acc.ok{color:var(--pos)} #app #product-root .smpc-acc.wait{color:var(--amber)}
#app #product-root .smpc-tl{margin-left:auto;border:0;background:none;font:inherit;font-size:12px;color:var(--muted);font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
#app #product-root .smpc-unread{background:var(--neg);color:#fff;border-radius:999px;font-size:10px;font-weight:800;padding:0 6px;line-height:16px;min-width:16px;text-align:center;display:inline-block}
#app #product-root .smpc-manage{border:1px solid var(--nav);background:var(--nav);color:#fff;border-radius:8px;font-size:11px;font-weight:800;letter-spacing:.03em;padding:6px 12px;cursor:pointer}

/* v27.822 (Ben): SAMPLING filters behind a "⚙ Filters" button on mobile (matches the SUPPLY grids). Desktop shows them
   inline (the wrapper is display:contents so its children flow in the toolbar flex); the toggle button is phone-only. */
/* v27.837 (Ben): small "i" info icon — section description moves into its tooltip */
.hz-i{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--faint);color:var(--faint);font-size:10px;font-weight:700;font-style:normal;line-height:1;cursor:help;flex:0 0 auto}
.hz-i:hover{border-color:var(--blue);color:var(--blue)}
/* v27.823 (Ben): the search-box scan icon picks up the accent on hover/focus */
#app #product-root .smp-qscan:hover,#app #product-root .smp-qscan:focus{color:var(--blue)}
/* v27.825 (Ben): desktop keeps the long label + no line-break; both flip on mobile below */
#app #product-root .smp-new-short{display:none}
#app #product-root .smp-tbreak{display:none}
@media (max-width:640px){
  #app #product-root #smp-filters #smp-count{display:none}                                              /* v27.826 (Ben): drop the count on mobile */
  #app #product-root #smp-filters #smp-new{order:1;margin-left:auto}                                    /* v27.826: New up to row 1, right, in line with the view pills */
  #app #product-root #smp-filters .smp-tbreak{display:block;flex:1 0 100%;height:0;margin:0;order:2}    /* force wrap to row 2 (invisible) */
  #app #product-root #smp-filters .smp-qwrap{order:3;flex:1 1 auto;min-width:0;display:block}            /* v27.826: search fills row 2 */
  #app #product-root #smp-filters .smp-qwrap input{width:100%!important;max-width:none!important}          /* v27.830 (Ben): beat the inline width:220px so the box actually fills (scan icon stays pinned inside on the right) */
  #app #product-root #smp-filters .smp-filt-toggle{order:4;flex:0 0 auto}
  #app #product-root #smp-filters .smp-filtgrp{order:99}
  #app #product-root .smp-new-long{display:none}
  #app #product-root .smp-new-short{display:inline}
}
#app #product-root .smp-filt-toggle{display:none}
#app #product-root .smp-filtgrp{display:contents}
@media (max-width:640px){
  #app #product-root .smp-filt-toggle{display:inline-flex;align-items:center;background:var(--hover);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:7px 13px;font-size:12px;font-weight:700;cursor:pointer}
  #app #product-root .smp-filt-toggle.active{background:var(--blue-soft);border-color:var(--blue);color:var(--blue-ink)}
  #app #product-root #smp-filters .smp-filtgrp{display:none}
  #app #product-root #smp-filters.filters-open .smp-filtgrp{display:flex;flex-wrap:wrap;gap:9px 12px;width:100%;order:99;margin-top:2px;padding:12px;background:var(--hover);border:1px solid var(--line);border-radius:10px}
  #app #product-root #smp-filters.filters-open .smp-filtgrp .fci{min-height:34px}
  #app #product-root #smp-filters.filters-open .smp-actfilt{width:100%;flex-wrap:wrap}
  #app #product-root .smp-swsize-wrap{display:none!important}   /* swatch size is irrelevant with the card layout (beats the inline display) */
}
#app #product-root .smp-tick.smp-leg{width:15px;height:15px;font-size:9px;border-width:2px;cursor:default}
#app #product-root .smp-tick.smp-leg:hover{box-shadow:none}
#app #product-root .smp-tick:hover:not(.none){box-shadow:0 0 0 3px var(--blue-soft)}
#app #product-root .smp-scell{position:relative}
#app #product-root .smp-tickwrap{position:relative;display:inline-block;line-height:0}
#app #product-root .smp-n{position:absolute;top:-6px;right:-8px;min-width:14px;height:14px;padding:0 3px;border-radius:999px;background:var(--blue);color:#fff;font-size:9px;line-height:14px;font-weight:700;text-align:center;cursor:pointer;box-shadow:0 0 0 1.5px var(--card)}
#app #product-root .smp-sdate{display:block;font-size:9px;color:var(--faint);margin-top:3px;white-space:nowrap;cursor:pointer;line-height:1.1}
/* v27.773 (Ben): SAMPLING ▸ Reports — big metric tiles, section headers, KPI/pivot tables */
#app #product-root .pr-kpis{display:flex;gap:14px;flex-wrap:wrap;margin:2px 0 6px}
#app #product-root .pr-kpi{flex:1 1 220px;min-width:200px;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:var(--r-md);background:var(--card);box-shadow:var(--shadow);padding:14px 18px}
#app #product-root .pr-kpi-v{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink)}
#app #product-root .pr-kpi-l{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:6px}
#app #product-root .pr-kpi-s{font-size:11px;color:var(--faint);margin-top:2px}
#app #product-root .pr-sec-h{font-weight:800;font-size:13px;margin:22px 0 8px;color:var(--ink)}
#app #product-root .pr-tbl{border-collapse:separate;border-spacing:0;font-size:12px;width:max-content;min-width:100%;font-variant-numeric:tabular-nums}
#app #product-root .pr-tbl th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);text-align:center;padding:6px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--card)}
#app #product-root .pr-tbl th.l{text-align:left}
#app #product-root .pr-tbl td{padding:6px 12px;border-bottom:1px solid var(--line2);text-align:center;white-space:nowrap}
#app #product-root .pr-tbl td.l{text-align:left}
#app #product-root .pr-tbl tbody tr:hover td{background:var(--hover)}
/* v27.770 (Ben): per-sample shipment ref + tracking under the tick (replaces the old Shipment column) */
#app #product-root .smp-cellship{font-size:9px;line-height:1.35;margin-top:3px;white-space:nowrap}
#app #product-root .smp-cellship a{color:var(--blue);font-weight:700;text-decoration:none;cursor:pointer}
#app #product-root .smp-cellship a:hover{text-decoration:underline}
#app #product-root .smp-cellship-top{white-space:nowrap}
#app #product-root .smp-celltrk{display:block;margin-top:1px}
#app #product-root .smp-celldel{color:var(--smp-ok);font-weight:600;margin-left:5px;cursor:default}   /* v27.775: inline with SR, no date (date on hover) */
#app #product-root .smp-sdate.sub{color:var(--amber);font-weight:600}
/* MANAGE panel as a board card (3px --blue rail, L3-tinted header carrying ref · meta · tabs) */
#app #product-root .smp-mcard{border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:var(--r-md);background:var(--card);overflow:hidden;box-shadow:var(--shadow)}
#app #product-root .smp-mhd{display:flex;align-items:center;gap:12px;padding:6px 12px;background:var(--l3-bg);border-bottom:1px solid var(--line);flex-wrap:wrap}
#app #product-root .smp-mhd .po-subnav{margin:0;background:transparent;border:none;padding:0}   /* v27.762 (Ben): tabs left */
#app #product-root .smp-mhd .po-subnav .rtab{padding:9px 10px 8px}
#app #product-root .smp-mbody{padding:10px 12px}
#app #product-root .smp-dot{display:inline-block;width:7px;height:7px;border-radius:999px;margin-right:5px;vertical-align:1px;background:var(--faint)}
#app #product-root .smp-dot.k-dev{background:var(--smp-dev)}
#app #product-root .smp-dot.k-shp{background:var(--smp-shp)}
#app #product-root .smp-dot.k-pkg{background:var(--smp-pkg)}
#app #product-root .smp-dot.k-rv{background:var(--smp-rv)}
#app #product-root .smp-dot.k-ok{background:var(--smp-ok)}
#app #product-root .smp-dot.k-rj{background:var(--smp-rj)}
#app #product-root .smp-dot.k-stop{background:var(--smp-stop)}
#app #product-root .smp-dot.k-wt{background:transparent;border:1.5px dashed var(--faint);width:6px;height:6px}
#app #product-root .smp-mexp>td{padding:6px 8px 12px !important;background:var(--hover)}
/* v27.759 design slice 3 — MANAGE ▸ Timeline: thread on the left, compact facts card on the right (stacks on phones) */
#app #product-root .smp-tlgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:16px;align-items:start}
#app #product-root .smp-facts{display:grid;grid-template-columns:78px minmax(0,1fr);gap:6px 10px;font-size:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
#app #product-root .smp-facts b{font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);line-height:1.7}
#app #product-root .smp-facts span{min-width:0;overflow-wrap:anywhere}
@media (max-width:640px){ #app #product-root .smp-tlgrid{grid-template-columns:1fr} #app #product-root .smp-scell{min-width:0}
  /* v27.769 (Ben): timeline compose full screen width; tag rows on ONE line, horizontally scrollable */
  #app #product-root .pt-compose{max-width:none !important}
  #app #product-root .pt-tagsrow{flex-wrap:nowrap !important;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;padding-bottom:2px}
  #app #product-root .pt-tagsrow>*{flex:0 0 auto}
  /* SAMPLING card on phones (hz-stack) — v27.768 (Ben): label ON TOP (small, subtle), data FULL WIDTH beneath it, not a
     40% left gutter that ate half the screen. Each field reads as a tiny caption + full-width value. */
  #app #product-root table.smp-tbl[data-stack] td.l{display:block !important;position:static !important;padding-left:0 !important;padding-right:0 !important;min-height:0}
  #app #product-root table.smp-tbl[data-stack] td.l::before{position:static;display:block;flex:none;width:auto;content:attr(data-l);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);margin:0 0 1px;line-height:1.3}
  #app #product-root table.smp-tbl[data-stack] td.l[data-l=""]::before{display:none}
  #app #product-root table.smp-tbl[data-stack] td.l>*{display:block;min-width:0;margin-top:0}
  #app #product-root table.smp-tbl[data-stack] td.l>*+*{margin-top:2px}
  #app #product-root table.smp-tbl[data-stack] td.smp-stage .smp-stage-sel{min-width:0;max-width:100%}
  /* Ben (18-Sep): sample slots S1..S4 sit in ONE row on phones (label above each tick, date under), not four stacked label rows */
  #app #product-root table.smp-tbl[data-stack] td.smp-scell{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;width:auto !important;min-width:56px;margin:2px 10px 4px 0;padding:4px 0 !important;vertical-align:top}
  #app #product-root table.smp-tbl[data-stack] td.smp-scell::before{flex:none;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--faint)}
  #app #product-root table.smp-tbl[data-stack] td.smp-scell .smp-sdate{margin-top:0} }
#app #product-root .smp-comp{display:grid;grid-template-columns:150px 200px 1fr;gap:8px 12px;align-items:start;padding:8px 0;border-top:1px solid var(--line2)}