/* Design foundation — THE token source for every Freight/Agent surface (legacy app, rebuild,
   customer, carrier). Extracted verbatim from Freight/index.html; the legacy app links this file,
   the rebuilds alias their semantic tokens to it. Light in :root, dark flipped by html.dark. */
:root{
  --ph-primary: #36255c;
  --ph-violet: #9648ff;
  --ph-turquoise: #07cece;
  --btn-primary: #7036bf;
  --btn-primary-hover: #5e2aa5;

  --white: #ffffff;
  --grey-100: #f6f7f9;
  --grey-200: #e1e6eb;
  --grey-300: #d7d7d7;
  --grey-400: #999999;
  --grey-500: #777777;
  --body: #14141a;

  --tint-lavender: #f5edff;
  --tint-mint: #e9f9f5;
  --tint-amber: #fff4e0;
  --tint-rose: #fde8e8;
  --tint-sky: #e6f3ff;
  --tint-purple-bar: #ece5f7;

  --status-green: #0e8a6c;
  --status-amber: #b76b00;
  --status-red: #c53030;
  --status-blue: #2a5a99;

  --dp-oxford: #34557c;
  --dp-light: #45c1f0;
  --pc-green: #3eb27a;

  --shadow-card: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.08);

  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sidebar-w: 245px;
  --shadow-lg: 0 10px 30px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --radius: 6px;
  --radius-sm: 4px;
  --nav-w: 248px;
  --nav-w-collapsed: 60px;   /* slim icon rail when the sidebar is collapsed */
  --app-gutter: 0px;    /* nav + scenario box sit flush to the left border */
  --content-inset: 58px; /* gap between the nav menu bar and the page content frames (~1.5cm) */
}

/* Backwards compat aliases for existing styles */
:root{
  --bg: var(--grey-100);
  --surface: var(--white);
  --surface-2: var(--grey-100);
  --ctl: var(--white);   /* control background (light mode = white; dark mode overrides to a lighter-than-panel shade) */
  --border: var(--grey-200);
  --border-strong: var(--grey-300);
  --text: var(--body);
  --text-muted: var(--grey-500);
  --text-soft: var(--grey-400);
  --accent: var(--btn-primary);
  --accent-soft: var(--tint-lavender);
  --accent-strong: var(--btn-primary-hover);
  --success: var(--status-green);
  --success-soft: var(--tint-mint);
  --warn: var(--status-amber);
  --warn-soft: var(--tint-amber);
  --danger: var(--status-red);
  --danger-soft: var(--tint-rose);
  --info: var(--status-blue);
  --info-soft: var(--tint-sky);
  --neutral-soft: var(--grey-100);
  --shadow: var(--shadow-card);
}
/* ===== Dark theme — redefine the semantic + base tokens (never shim over literal hexes). Toggled by
   html.dark via the theme control; persisted in localStorage; applied pre-render so there is no flash. ===== */
html.dark{
  /* base palette flipped → every semantic alias AND direct var(--grey-*) use follows */
  --grey-100:#17131f; --grey-200:#2b2739; --grey-300:#3a3550; --grey-400:#8b86a0; --grey-500:#a9a4bd;
  --body:#f1eff7;
  /* semantic tokens tuned for dark contrast */
  --bg:#0f0d17; --surface:#1a1725; --surface-2:#141120;
  --ctl:#2b2542;   /* interactive-control background — deliberately LIGHTER than --surface so dropdowns/date-pickers stand out on same-colour panels (dark mode) */
  --border:#2b2739; --border-strong:#3a3550;
  --text:#f1eff7; --text-muted:#c3bed4; --text-soft:#948fab;
  --accent:#a78bff; --accent-strong:#bda6ff; --accent-soft:rgba(150,72,255,.18);
  --success:#4cc98a; --success-soft:rgba(76,201,138,.16);
  --warn:#e7a33e;   --warn-soft:rgba(231,163,62,.16);
  --danger:#f0736f; --danger-soft:rgba(240,115,111,.16);
  --info:#7ea0ff;   --info-soft:rgba(126,160,255,.16);
  --neutral-soft:#221d31;
  --ph-violet:#b394ff; --ph-primary:#cbb8ff;
  --tint-lavender:rgba(150,72,255,.20); --tint-mint:rgba(76,201,138,.18); --tint-amber:rgba(231,163,62,.20);
  --tint-rose:rgba(240,115,111,.20); --tint-sky:rgba(126,160,255,.20); --tint-purple-bar:#241f33;
  /* Status INK. The :root values (#2a5a99, #b76b00 …) are light-mode text colours — on a dark panel they
     read as near-invisible (Roger: "the Air pill is in blue, you can hardly see it"). Every --status-* pill
     was affected, so redefine them here as the light-on-dark variants. NB the branded shells below re-scope
     these back to the light values, because those surfaces stay white even in dark mode. */
  --status-green:#5fd39b; --status-amber:#e6b45c; --status-blue:#8fb2ff; --status-red:#f0938f;
  --shadow-card:0 1px 3px rgba(0,0,0,.45); --shadow-card-hover:0 6px 18px rgba(0,0,0,.55);
  --shadow-lg:0 10px 30px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4); --shadow:0 1px 3px rgba(0,0,0,.45);
  color-scheme:dark;
}


/* ── Shell chrome — the app frame shared by the legacy app and the rebuild: shell grid, nav
   (brand wordmark, groups, items, foot), edge toggle, topbar (crumb, data/version switches,
   theme), main/page containers. Moved verbatim from Freight/index.html. ── */


/* ============================================================
   App shell — agent chrome
   ============================================================ */
.shell{position:relative;display:grid;grid-template-columns:var(--nav-w) 1fr;min-height:100vh;transition:grid-template-columns .18s ease}
/* embed mode (?embed=1) — the page is hosted inside another surface (e.g. the workflow editor's
   side drawer): no app chrome at all — nav, topbar and the nav-edge toggle all hide, and the
   single-column layout holds even with a saved collapsed-nav preference (PR #85 Codex P2) */
html.embed .shell, html.embed .shell.nav-collapsed{grid-template-columns:1fr}
html.embed .nav{display:none!important}
html.embed .topbar{display:none!important}
html.embed .nav-edge-toggle{display:none!important}
.shell.customer-chrome,.shell.carrier-chrome{grid-template-columns:1fr}
/* Collapsed sidebar — slim icon rail; the content area reflows to the freed width. */
.shell.nav-collapsed{grid-template-columns:var(--nav-w-collapsed) 1fr}
/* Edge handle straddling the nav/main boundary — a small triangle tab, subtle until hover, always visible when collapsed. */
.nav-edge-toggle{position:absolute;top:78px;left:calc(var(--nav-w) - 11px);z-index:60;width:22px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text-soft);cursor:pointer;opacity:.4;transition:opacity .15s,left .18s ease,border-color .15s,color .15s,box-shadow .15s}
.nav:hover ~ .nav-edge-toggle,.nav-edge-toggle:hover{opacity:1;box-shadow:0 2px 10px rgba(0,0,0,.14)}
.nav-edge-toggle:hover{border-color:var(--accent);color:var(--accent)}
.nav-edge-toggle .tri{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:7px solid currentColor}   /* points LEFT = collapse */
.shell.nav-collapsed .nav-edge-toggle{left:calc(var(--nav-w-collapsed) - 11px);opacity:1}
.shell.nav-collapsed .nav-edge-toggle .tri{border-right:0;border-left:7px solid currentColor}   /* points RIGHT = expand */
.shell.customer-chrome .nav-edge-toggle,.shell.carrier-chrome .nav-edge-toggle{display:none}
.shell.nav-collapsed .nav-brand-logo,.shell.nav-collapsed .fh-wm,.shell.nav-collapsed .brand-dots,.shell.nav-collapsed .brand-list{display:none}
.shell.nav-collapsed .brand-picker{padding:14px 0 12px;align-items:center}
.shell.nav-collapsed .nav-section{padding:10px 6px 0}
.shell.nav-collapsed .nav-grp-head{justify-content:center;padding:11px 0;gap:0}
.shell.nav-collapsed .nav-grp-head span,.shell.nav-collapsed .nav-grp-head .nav-chev{display:none}
.shell.nav-collapsed .nav-grp-body,.shell.nav-collapsed .nav-subgrp{display:none!important}
.shell.nav-collapsed .nav-foot{justify-content:center;padding:8px 0;margin:10px 8px 12px;gap:0}
.shell.nav-collapsed .nav-foot > div:not(.avatar){display:none}

/* Sidebar */
.nav{
  background: #17181c;
  color: var(--white);
  height:100vh;
  position:sticky;top:0;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.brand-picker{
  position:relative;
  padding:16px 16px 14px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex;flex-direction:column;gap:10px;
}
/* Parcelvision: the full stacked PV logo (box + wordmark). A brand: its self-contained box logo. */
.nav-brand-logo{height:54px;width:auto;max-width:180px;display:block;object-fit:contain;object-position:left top}
.brand-picker.branded .nav-brand-logo{height:46px}
/* Freight Hero animated wordmark — the default brand logo: "freight" + purple "hero" with a rising pallet. */
/* Source asset's wordmark, sized by font (48px→proportional em) with line-height:normal so 'hero' starts
   LEVEL with 'freight'; the pallet rises from below and pushes 'hero' up. Same keyframe timing as the source. */
.fh-wm{display:inline-flex;align-items:flex-start;font-family:'Poppins',-apple-system,sans-serif;font-weight:600;font-size:24px;line-height:normal;letter-spacing:-.01em;color:#F2F0F7;user-select:none}
.fh-col{margin-left:.1em;display:inline-flex;flex-direction:column;align-items:stretch;gap:.083em}
/* Plays ONCE on load and settles raised (hero up, pallet risen + visible) — not a loop. */
.fh-hero{display:block;color:#A78BFA;line-height:.92;animation:fhHeroRise 1.2s cubic-bezier(.5,0,.2,1) .3s both}
.fh-pallet{display:block;width:86%;margin:0 auto;animation:fhPalletRise 1.2s cubic-bezier(.5,0,.2,1) .3s both}
.fh-pallet-box{position:relative;display:block;height:.31em;border:.125em solid #A78BFA;border-bottom:0;border-radius:.06em .06em 0 0}
.fh-pallet-bar{position:absolute;left:50%;top:0;width:.125em;height:100%;background:#A78BFA;transform:translateX(-50%)}
.brand-dots{
  position:absolute;top:18px;right:16px;
  width:32px;height:32px;border-radius:8px;border:none;background:transparent;
  color:rgba(255,255,255,0.88);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition: background 0.15s, color 0.15s;flex:none;
}
.brand-dots:hover{background:rgba(255,255,255,0.10);color:#fff}
/* Brand dropdown — pops out to the right of the four-dots (fixed, so the nav's overflow doesn't clip it). */
.brand-list{
  position:fixed;z-index:9999;width:max-content;min-width:180px;max-width:272px;
  background:var(--surface);border-radius:14px;
  display:none;
  padding:7px;
  box-shadow: 0 20px 54px rgba(0,0,0,0.32);
}
.brand-list.open{display:block}
.brand-list::before{content:'';position:absolute;top:-6px;left:13px;width:13px;height:13px;background:var(--surface);transform:rotate(45deg);border-radius:3px}

.nav-section{padding:18px 8px 0;flex:1;overflow-y:auto}
.nav-label{
  padding:12px 16px 8px;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,0.65);font-weight:600;
}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 20px;border-radius:6px;cursor:pointer;
  font-size:14px;color:#fff;font-weight:400;
  user-select:none;
  transition: background 0.15s;
}
.nav-item:hover{background:rgba(255,255,255,0.08)}
.nav-item.active{background:rgba(255,255,255,0.10);font-weight:500}
.nav-item .icon{width:16px;height:16px;flex-shrink:0;opacity:0.9}
.nav-item .pill{
  margin-left:auto;background:rgba(255,255,255,0.15);color:#fff;
  font-size:10px;padding:2px 8px;border-radius:4px;font-weight:600;
}
.nav-item.active .pill{background:var(--surface);color:var(--btn-primary)}
.nav-sub{display:none;align-items:center;padding:8px 20px 8px 48px;border-radius:6px;cursor:pointer;font-size:13px;color:rgba(255,255,255,0.78);font-weight:400;user-select:none;transition:background .15s}
.nav-sub:hover{background:rgba(255,255,255,0.08);color:#fff}
/* Collapsible nav groups (Dashboards / Admin / Reports / Configuration / Demo views) */
.nav-grp-head{display:flex;align-items:center;gap:12px;padding:10px 18px;border-radius:6px;cursor:pointer;font-size:14px;color:#fff;font-weight:500;user-select:none;transition:background .15s}
.nav-grp-head:hover{background:rgba(255,255,255,0.08)}
.nav-grp-head .icon{width:16px;height:16px;flex-shrink:0;opacity:.9}
.nav-chev{margin-left:auto;width:13px;height:13px;opacity:.55;transition:transform .15s;flex:none}
.nav-grp.open>.nav-grp-head .nav-chev{transform:rotate(180deg)}
.nav-grp-body,.nav-subgrp-body{display:none}
.nav-grp.open>.nav-grp-body,.nav-subgrp.open>.nav-subgrp-body{display:block}
.nav-grp-body .nav-item{padding-left:46px;font-size:13.5px;color:rgba(255,255,255,0.80);font-weight:400}
.nav-grp-body .nav-item:hover{color:#fff}
.nav-aud{font-size:10px;font-weight:500;color:rgba(255,255,255,0.42);margin-left:5px;letter-spacing:.02em}
.nav-grp-body .nav-item.active{color:#fff;background:rgba(255,255,255,0.10);font-weight:500}
.nav-subgrp-head{display:flex;align-items:center;gap:8px;padding:9px 18px 9px 46px;border-radius:6px;cursor:pointer;font-size:13.5px;color:rgba(255,255,255,0.80);font-weight:400;user-select:none;transition:background .15s}
.nav-subgrp-head:hover{background:rgba(255,255,255,0.08);color:#fff}
.nav-subgrp.open>.nav-subgrp-head .nav-chev{transform:rotate(180deg)}
.nav-subgrp-body .nav-item{padding-left:62px}
.nav-sub.active{background:rgba(255,255,255,0.10);color:#fff;font-weight:500}
.nav-foot{padding:8px 11px;display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ph-primary);background:var(--tint-purple-bar);margin:10px 12px 12px;border-radius:11px}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.topbar{
  background:var(--tint-lavender);border-bottom:1px solid var(--border);
  height:60px;display:flex;align-items:center;
  padding:0 24px 0 var(--content-inset);gap:16px;font-size:12px;
}
.crumb{color:var(--text-soft)}
.crumb b{color:var(--text);font-weight:500}
.crumb .sep{margin:0 8px;color:var(--border-strong)}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:20px}
/* Segmented toggles — the active option fills the frame edge-to-edge (no inset gap + line) */
.ver-switch{display:flex;align-items:center;gap:10px}
.ver-switch .ver-label{display:none}   /* labels removed — the pills speak for themselves */
.ver-seg{display:inline-flex;height:30px;background:var(--grey-100);border:1px solid var(--border);border-radius:16px;padding:0;overflow:hidden}
.ver-seg button{border:none;background:transparent;font-family:inherit;font-size:12px;font-weight:600;color:var(--text-soft);padding:0 14px;display:inline-flex;align-items:center;cursor:pointer;transition:background .12s,color .12s}
.ver-seg button:hover{color:var(--text)}
.ver-seg button.on{background:var(--ph-primary);color:#fff}
/* No background/color on .ver-dd option — native popup renders via color-scheme (light + dark both clean). */
/* Theme toggle sits top-right in the bar, light-purple so it's visible in dark mode (never a black-on-black ghost) */
.topbar-theme{flex:none;width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;padding:0;transition:border-color .12s}
.topbar-theme:hover{border-color:var(--accent)}
.topbar .ver-switch{gap:12px}
.topbar .right{gap:16px}
/* ── Dark mode: NO black controls. One readable, slightly-purple surface + visible border across every
   dropdown / select / filter box / segmented toggle, site-wide (must be a colour you can read in dark). ── */
html.dark select,html.dark .uc-input,html.dark .fcombo-inp,html.dark .jctl,html.dark select.jctl,html.dark select.ph-select,html.dark select.zlf,html.dark .intro-btn,html.dark .ver-seg,html.dark .qt-seg,html.dark .dpr-seg,html.dark .rh-toggle,html.dark .wztabs,html.dark .sm-sel,html.dark .sm-nd,html.dark .sm-tin{background-color:#2b2542;border-color:#4a4270;color:var(--text)}
.nav-item.ver-dim{opacity:.66}
.nav-item.ver-dim:hover{opacity:.88}
.nav-item.ver-dim .ver-tag{opacity:1}
.nav-item .ver-tag{margin-left:auto}
/* Menu bar: let the label flex/truncate so the count + version pill always fit on one line. */
.nav-item{min-width:0}
.nav-item > span:not([class]){flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item .pill,.nav-item .ver-tag{flex:0 0 auto}

.page{padding:24px 28px 24px var(--content-inset);max-width:1500px;width:100%}
.shell.nav-collapsed ~ .demo-fab{width:38px;height:38px;padding:0;border-radius:50%;gap:0}
.shell.nav-collapsed ~ .demo-fab .demo-fab-lbl{display:none}

/* ── Agent shell (Module Identity canvas, turns 15b/16/17 — signed off) ──────────────────────────
   Namespaced ash-* so the legacy chrome above is untouched. Dark = the turn-16 measured surfaces;
   light = 15b (white bar + 2px vivid rule) on paper; the rail themes per the canvas palette
   (railPV: light #FAF9FC / dark #08070C), light-only inset 2px marker on the active nav item. */
:root{
  --ash-acc:#F4794A; --ash-acc-ink:#AE431D;            /* Agent module: vivid / ink */
  --ash-rail:#FAF9FC; --ash-rail-line:#E6E3EF; --ash-rail-dim:#8B8497; --ash-rail-on:#181425; --ash-rail-icon:#8C85A2;
  --ash-rail-hov:rgba(24,20,37,.05); --ash-nav-on:rgba(244,121,74,.16);
  --ash-chipbg:#FFFFFF; --ash-chipline:#DBD7E8;
  --ash-sel:#EFEAFB; --ash-ovl:#FFFFFF; --ash-ovl-line:#DBD7E8; --ash-ovl-text:#3C3550;
  --ash-line2:#DBD7E8; --ash-faint:#8C85A2;
  --ash-paper:#F3F2F7; --ash-card:#FFFFFF; --ash-line:#E3E0EC; --ash-ink:#181425; --ash-muted:#6E6684;
  --ash-font:'Poppins',system-ui,sans-serif; --ash-mono:'IBM Plex Mono',monospace;
}
html.dark{
  --ash-acc:#FF8763; --ash-acc-ink:#FF8763;
  --ash-rail:#08070C; --ash-rail-line:#17131F; --ash-rail-dim:#9C94AE; --ash-rail-on:#F6F4FA; --ash-rail-icon:#7A7290;
  --ash-rail-hov:rgba(255,255,255,.07); --ash-nav-on:rgba(255,135,99,.15);
  --ash-chipbg:#1C1826; --ash-chipline:#2A2436;
  --ash-sel:#2A2140; --ash-ovl:#151220; --ash-ovl-line:#2E2740; --ash-ovl-text:#C9C3D6;
  --ash-line2:#2A2436; --ash-faint:#6E6684;
  --ash-paper:#0C0A11; --ash-card:#17141F; --ash-line:#262032; --ash-ink:#F6F4FA; --ash-muted:#8E86A2;
}
.ash-shell{display:grid;grid-template-columns:252px 1fr;min-height:100vh;font-family:var(--ash-font);background:var(--ash-paper);color:var(--ash-ink)}
.ash-rail{background:var(--ash-rail);border-right:1px solid var(--ash-rail-line);display:flex;flex-direction:column;min-height:100vh}
.ash-logo{height:73px;box-sizing:border-box;flex:none;padding:0 20px;display:flex;align-items:center;border-bottom:1px solid var(--ash-rail-line)}
.ash-logo img{height:56px;width:auto;max-width:212px;display:block}
/* first menu item level with the page title (Commercial canonical, Roger 2026-07-26) */
.ash-nav{flex:1;overflow-y:auto;padding:65px 12px 12px}
.ash-rail{position:relative}
.ash-railtog{position:absolute;right:6px;top:88px;width:26px;height:26px;border-radius:50%;border:1px solid var(--ash-chipline);background:var(--ash-chipbg);color:var(--ash-rail-on);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s,border-color .15s;z-index:60;font-size:13px;line-height:1;padding:0}
.ash-rail:hover .ash-railtog{opacity:1}
.ash-railtog:hover{border-color:var(--ash-acc)}
html.railc .ash-shell{grid-template-columns:64px 1fr}
html.railc .ash-pr>span,html.railc .ash-pr .chev,html.railc .ash-kids,html.railc .ash-foot>div{display:none}
html.railc .ash-logo{padding:0 6px;overflow:hidden;justify-content:flex-start}
html.railc .ash-logo img{width:52px;height:auto;max-width:none;object-fit:cover;object-position:left}
html.railc .ash-pr{justify-content:center;padding:11px 0}
html.railc .ash-foot{justify-content:center;padding:12px 6px}
html.railc .ash-theme{margin-left:0}
.ash-grp+.ash-grp{margin-top:2px}
.ash-pr{display:flex;align-items:center;gap:11px;width:100%;padding:10px;border-radius:9px;color:var(--ash-rail-on);font-size:15px;font-weight:500;cursor:pointer;background:none;border:0;font-family:var(--ash-font);text-align:left;user-select:none}
.ash-pr:hover{background:var(--ash-rail-hov)}
.ash-pr svg{width:17px;height:17px;flex:none;stroke:var(--ash-rail-icon);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ash-pr .chev{margin-left:auto;width:13px;height:13px;opacity:.55;transition:transform .15s;stroke:currentColor}
.ash-grp.open .ash-pr .chev{transform:rotate(180deg)}
.ash-kids{padding:1px 0 5px}
.ash-it{display:flex;align-items:center;padding:8px 10px 8px 38px;border-radius:9px;color:var(--ash-rail-dim);font-size:14px;cursor:pointer;text-decoration:none}
.ash-it:hover{color:var(--ash-rail-on);background:var(--ash-rail-hov)}
.ash-it.on{color:var(--ash-rail-on);font-weight:500;background:var(--ash-nav-on)}
html:not(.dark) .ash-it.on{box-shadow:inset 2px 0 0 var(--ash-acc)}
.ash-foot{flex:none;display:flex;align-items:center;gap:10px;padding:12px;border-top:1px solid var(--ash-rail-line)}
.ash-foot .av{width:32px;height:32px;border-radius:50%;background:var(--ash-acc);color:#08070C;font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.ash-foot .nm{color:var(--ash-rail-on);font-size:13px;font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ash-foot .rl{color:var(--ash-rail-dim);font-size:11px}
.ash-theme{margin-left:auto;width:34px;height:34px;border-radius:9px;border:1px solid var(--ash-chipline);background:var(--ash-chipbg);color:var(--ash-rail-dim);cursor:pointer;font-size:15px}
.ash-theme:hover{color:var(--ash-rail-on);border-color:var(--ash-acc)}
.ash-main{min-width:0;display:flex;flex-direction:column}
.ash-bar{height:72px;display:flex;align-items:center;gap:14px;padding:0 22px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ash-acc) 13%, transparent), color-mix(in srgb, var(--ash-acc) 5%, transparent));
  border-bottom:1px solid color-mix(in srgb, var(--ash-acc) 34%, transparent)}
html:not(.dark) .ash-bar{background:#FFFFFF;border-bottom:2px solid var(--ash-acc)}
/* Module chip — Commercial canonical: 44px 16% tint pill in BOTH themes, 15.5/700, 17px icon */
.ash-chip{display:inline-flex;align-items:center;gap:9px;height:44px;box-sizing:border-box;padding:0 15px;border-radius:10px;font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--ash-acc-ink);background:color-mix(in srgb, var(--ash-acc) 16%, transparent);white-space:nowrap;flex:none}
html.dark .ash-chip{background:color-mix(in srgb, var(--ash-acc) 13%, transparent)}
.ash-chip svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ash-sp{flex:1}
.ash-ctl{position:relative}
.ash-ctlb{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 15px;border-radius:10px;font-size:13px;font-weight:600;color:var(--ash-ink);cursor:pointer;background:#FFFFFF;border:1px solid var(--ash-line);font-family:var(--ash-font);white-space:nowrap;flex:none;transition:border-color .12s}
html.dark .ash-ctlb{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15)}
.ash-ctlb:hover{border-color:var(--ash-acc)}
.ash-ctlb .cdiv{width:1px;height:20px;background:var(--ash-line2)}
html.dark .ash-ctlb .cdiv{background:rgba(255,255,255,.18)}
.ash-ctlb .chev{font-size:10px;color:var(--ash-acc)}
.ash-dot{width:8px;height:8px;border-radius:50%;background:#3DD68C}
.ash-dot.sbx{background:#6C8CFF}
.ash-panel{position:absolute;top:52px;right:0;min-width:230px;background:var(--ash-ovl);border:1px solid var(--ash-ovl-line);border-radius:12px;box-shadow:0 22px 50px rgba(0,0,0,.35);padding:8px;z-index:60}
.ash-po{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:10px 12px;border-radius:8px;font-size:13px;color:var(--ash-ink);background:none;border:0;cursor:pointer;text-decoration:none;font-family:var(--ash-font)}
.ash-po:hover{background:color-mix(in srgb, var(--ash-acc) 10%, transparent)}
.ash-po.dis{opacity:.45;cursor:default}
.ash-po.dis:hover{background:none}
.ash-div{width:1px;height:26px;background:color-mix(in srgb, var(--ash-acc) 30%, transparent)}
html:not(.dark) .ash-div{background:var(--ash-line)}
/* Nine dots — Commercial canonical: 44px transparent button, 19px round-dot glyph, tint on hover */
.ash-dots{width:44px;height:44px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ash-acc-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:background .12s,border-color .12s}
.ash-dots:hover{background:color-mix(in srgb, var(--ash-acc) 14%, transparent);border-color:color-mix(in srgb, var(--ash-acc) 40%, transparent)}
.ash-crumb{height:42px;display:flex;align-items:center;gap:9px;padding:0 26px;font-size:13px;color:var(--ash-muted)}
.ash-crumb .up{text-decoration:underline;cursor:pointer}
.ash-crumb .up:hover{color:var(--ash-ink)}
.ash-crumb .cur{color:var(--ash-ink);font-weight:500}
.ash-page{padding:18px 32px 28px;max-width:1500px;width:100%}

/* Module switcher — turn-16 anchored panel (430px, 2-col module tiles), plus the shared
   overlay bits: mono caps section label, segmented country control, version rows. */
.ash-panel .ash-pcap{font-family:var(--ash-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-faint);padding:6px 11px 5px}
.ash-panel{background:var(--ash-ovl);border-color:var(--ash-ovl-line)}
.ash-po{color:var(--ash-ovl-text)}
.ash-po.sel{background:var(--ash-sel);font-weight:500;color:var(--ash-ink)}
.ash-po .meta{margin-left:auto;font-size:11px;color:var(--ash-faint)}
.ash-po .sw{width:9px;height:9px;border-radius:2px;flex:none}
.ash-po .vdot{width:7px;height:7px;border-radius:99px;flex:none;background:var(--ash-line2)}
.ash-po .vdot.live{background:#3DD68C}
.ash-hr{height:1px;background:var(--ash-line);margin:7px 0}
/* Brand/country list — Commercial's shipped .brand-list/.ctry-seg/.brand-sec/.brand-row, verbatim */
.ash-brandlist{position:absolute;top:54px;right:0;z-index:70;width:max-content;min-width:200px;max-width:288px;background:var(--ash-card);border:1px solid var(--ash-line);border-radius:14px;padding:7px;box-shadow:0 20px 54px rgba(0,0,0,.32)}
.ash-ctryseg{display:flex;gap:4px;background:var(--ash-paper);border:1px solid var(--ash-line);border-radius:9px;padding:3px;margin:2px 4px 4px}
.ash-ctryseg button{flex:1;border:none;background:transparent;border-radius:7px;padding:6px 0;font-size:12px;font-weight:600;color:var(--ash-muted);cursor:pointer;font-family:var(--ash-font);white-space:nowrap;min-width:110px}
.ash-ctryseg button.on{background:var(--ash-card);color:var(--ash-ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.ash-brandsec{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ash-muted);padding:11px 10px 7px;border-radius:8px;cursor:pointer;font-family:var(--ash-font)}
.ash-brandsec:hover{color:var(--ash-ink)}
.ash-brandsec.on{color:var(--ash-acc-ink)}
.ash-brandrow{padding:8px 13px;display:flex;align-items:center;gap:13px;cursor:pointer;border-radius:10px;transition:background .15s}
.ash-brandrow:hover{background:var(--ash-paper)}
.ash-brandrow.on{background:var(--ash-paper);outline:1px solid var(--ash-line)}
.ash-brandrow img{width:auto;max-width:200px;object-fit:contain;object-position:left center;display:block}
.ash-sbx{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:8px;background:var(--ash-card);border:1px solid var(--ash-line2);cursor:pointer;text-decoration:none}
.ash-sbx:hover{background:var(--ash-paper)}
.ash-sbx .t{font-size:13px;font-weight:500;color:var(--ash-ovl-text);display:block}
.ash-sbx .s{font-size:11px;color:var(--ash-faint);display:block}
/* Module switcher — Commercial canonical .mod-list/.pvt: 604px 2-col, 38px tinted icon square,
   17px title, 10px mono status, 13px description; live modules are same-tab links. */
.ash-mods{position:absolute;top:54px;right:0;z-index:70;width:604px;background:var(--ash-card);border:1px solid var(--ash-line);border-radius:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px;box-shadow:0 20px 54px rgba(0,0,0,.32)}
.ash-pvt{padding:16px;border-radius:14px;border:1px solid var(--ash-line);background:var(--ash-paper);display:flex;flex-direction:column;gap:11px;cursor:default;text-decoration:none;color:inherit;font-family:var(--ash-font);text-align:left}
a.ash-pvt{cursor:pointer}
a.ash-pvt:hover{border-color:var(--ash-acc)}
.ash-pvt.dis{opacity:.55}
.ash-pvt .id{display:flex;align-items:center;gap:12px;min-width:0}
.ash-pvt .ico{width:38px;height:38px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center}
.ash-pvt .t{font-size:17px;font-weight:600;line-height:1.1;color:var(--ash-ink);display:block}
.ash-pvt .s{font-family:var(--ash-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-top:4px}
.ash-pvt .d{margin:0;font-size:13px;line-height:1.6;color:var(--ash-muted)}
/* State panel — Version - Roadmap view - Environment behind ONE chip (Commercial canonical) */
.ash-statep{position:absolute;top:54px;right:0;z-index:70;width:max-content;min-width:300px;background:var(--ash-card);border:1px solid var(--ash-line);border-radius:14px;padding:14px 16px 16px;box-shadow:0 20px 54px rgba(0,0,0,.32)}
.ash-sph{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ash-muted);margin:12px 0 7px}
.ash-sph:first-child{margin-top:0}
.ash-vseg{display:inline-flex;align-items:stretch;gap:3px;background:var(--ash-paper);border:1px solid var(--ash-line);border-radius:10px;padding:4px}
.ash-vseg button{border:none;background:transparent;font-family:var(--ash-font);color:var(--ash-muted);border-radius:7px;line-height:16px;cursor:pointer;transition:background .12s,color .12s}
.ash-vseg button:hover{color:var(--ash-ink)}
.ash-vseg.vers button{font-size:13.5px;font-weight:600;padding:6px 14px}
.ash-vseg.vers button.on{background:var(--ash-card);color:var(--ash-acc-ink);box-shadow:0 1px 2px rgba(20,12,40,.14)}
.ash-vseg.vers .vlive{color:#1a7f37}
html.dark .ash-vseg.vers .vlive{color:#3DD68C}
.ash-vseg.mode button{font-size:12.5px;font-weight:500;padding:6px 12px}
.ash-vseg.mode button.on{background:var(--ash-acc-ink);color:#fff}
.ash-vseg .vdiv{width:1px;align-self:stretch;background:var(--ash-line);margin:4px 1px;display:inline-block}
.ash-envseg{display:inline-flex;border:1px solid var(--ash-line);border-radius:9px;overflow:hidden;height:38px;flex-shrink:0}
.ash-envseg button{border:0;background:var(--ash-card);color:var(--ash-muted);font-family:var(--ash-font);font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:0 13px;cursor:pointer;transition:background .12s}
.ash-envseg button.on.prod{background:#26b47a;color:#fff;cursor:default}
.ash-envseg button.on.sand{background:#3b82d9;color:#fff;cursor:default}
.ash-sdot{width:8px;height:8px;border-radius:50%;background:#26b47a;flex:none}
.ash-sdot.sbx{background:#3b82d9}