/* IMExDesk App — Premium shell (Invertase-inspired, IMEx branding) */
/* ═══════════════════════════════════════════════════════════════════════
   P-10 FINAL Guided Deck merge (R1 MASTER MODE): token system ported
   verbatim from imexdesk-design-system-FINAL.jsx / tokens.json v1.1.
   Static tokens + all 4 themes live here now (moved out of index.html's
   inline <style>, which previously held the sole :root block and would
   have clobbered these since it loads after this file).
   Legacy variable names (--dim, --muted, --card, --border-hi,
   --accent-glow, --green/--gold/--red/--orange, --font, --mono, --radius)
   are kept as aliases onto the new tokens so the hundreds of existing
   var() call sites throughout this file and index.html's inline <style>
   keep resolving without being touched one-by-one. */
:root{
  /* ── static tokens (tokens.json .static) ── */
  --font-display:'Inter',-apple-system,'SF Pro Display',system-ui,sans-serif;
  --font-body:'Inter',-apple-system,'SF Pro Text',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',monospace;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;
  --space-12:48px;--space-16:64px;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:22px;--radius-full:999px;
  --ease-standard:cubic-bezier(0.22,1,0.36,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --dur-instant:100ms;--dur-fast:180ms;--dur-base:280ms;--dur-slow:420ms;
  --touch-min:44px;

  /* ── Dark theme (tokens.json .themes.dark) — default ── */
  --bg:#0B0D10;--bg-elevated:#111418;--surface:#15181D;--surface-2:#1B1F26;
  --border:rgba(255,255,255,0.08);--border-strong:rgba(255,255,255,0.14);
  --text-primary:#F2F4F6;--text-secondary:#9AA3AE;--text-tertiary:#7C8794;
  --accent:#4A9EFF;--accent-soft:rgba(74,158,255,0.12);--accent-text:#0B0D10;
  --success:#3DD68C;--success-soft:rgba(61,214,140,0.12);
  --warning:#F0B429;--warning-soft:rgba(240,180,41,0.12);
  --danger:#F0605C;--danger-soft:rgba(240,96,92,0.12);
  --shadow-color:rgba(0,0,0,0.5);
  --elevation-1:0 1px 2px var(--shadow-color);
  --elevation-2:0 6px 20px var(--shadow-color);
  --elevation-3:0 12px 40px var(--shadow-color);

  /* ── legacy aliases onto the tokens above — DO NOT remove without
     auditing every var(--dim)/var(--muted)/var(--card)/... call site ── */
  --font:var(--font-body);--mono:var(--font-mono);
  --radius:var(--radius-lg);
  --text:var(--text-primary);--dim:var(--text-secondary);--muted:var(--text-tertiary);
  --card:var(--surface-2);--border-hi:var(--border-strong);--accent-glow:var(--accent-soft);
  --green:var(--success);--gold:var(--warning);--red:var(--danger);--orange:var(--warning);
}
[data-theme="light"]{
  --bg:#F7F8FA;--bg-elevated:#FFFFFF;--surface:#FFFFFF;--surface-2:#F0F2F5;
  --border:rgba(15,20,25,0.08);--border-strong:rgba(15,20,25,0.14);
  --text-primary:#12161B;--text-secondary:#5A6472;--text-tertiary:#6B7280;
  --accent:#1D6FE0;--accent-soft:rgba(29,111,224,0.08);--accent-text:#FFFFFF;
  --success:#1A9D5C;--success-soft:rgba(26,157,92,0.08);
  --warning:#B57A08;--warning-soft:rgba(181,122,8,0.08);
  --danger:#D3413C;--danger-soft:rgba(211,65,60,0.08);
  --shadow-color:rgba(15,20,25,0.08);
}
[data-theme="ocean"]{
  --bg:#02121F;--bg-elevated:#04192B;--surface:#062036;--surface-2:#0A2A44;
  --border:rgba(144,224,239,0.10);--border-strong:rgba(144,224,239,0.18);
  --text-primary:#EAF7FB;--text-secondary:#7FA8BC;--text-tertiary:#6E93A8;
  --accent:#00B4D8;--accent-soft:rgba(0,180,216,0.14);--accent-text:#02121F;
  --success:#3DD68C;--success-soft:rgba(61,214,140,0.12);
  --warning:#F0B429;--warning-soft:rgba(240,180,41,0.12);
  --danger:#F0605C;--danger-soft:rgba(240,96,92,0.12);
  --shadow-color:rgba(0,10,20,0.6);
}
[data-theme="emerald"]{
  --bg:#0A1410;--bg-elevated:#0F1D17;--surface:#12241C;--surface-2:#172E24;
  --border:rgba(93,214,44,0.10);--border-strong:rgba(93,214,44,0.18);
  --text-primary:#EDF5F0;--text-secondary:#8CA89A;--text-tertiary:#7A968A;
  --accent:#34C77E;--accent-soft:rgba(52,199,126,0.14);--accent-text:#0A1410;
  --success:#34C77E;--success-soft:rgba(52,199,126,0.12);
  --warning:#E0AC3C;--warning-soft:rgba(224,172,60,0.12);
  --danger:#E0645F;--danger-soft:rgba(224,100,95,0.12);
  --shadow-color:rgba(0,10,5,0.5);
}
/* ── P-09 global background artwork (decorative only, CSS-only) ──
   Image layer + dark overlay live on body pseudo-elements at negative
   z-index: no layout, ID, or functional impact. If the artwork file is
   absent the layer falls back to var(--bg) — identical to the previous
   solid look. Owner asset: assets/imexdesk-port-bg.jpg */
body::before{
  content:'';position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:url('assets/imexdesk-port-bg.jpg') center/cover no-repeat;
  animation:bg-kenburns 52s ease-in-out infinite alternate;
  will-change:transform;
}
/* Water-shimmer + vignette (Step 2, hero.html reference) — real DOM nodes rather than
   more body pseudo-elements (body already uses both ::before/::after) so stacking order
   is explicit: photo (-3) → shimmer/vignette (-2) → readability overlay (-1) → content. */
.port-fx{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.port-fx-shimmer{
  position:absolute;right:0;bottom:0;width:65%;height:55%;
  background:repeating-linear-gradient(95deg,transparent 0%,rgba(255,255,255,.05) 8%,rgba(120,200,255,.04) 16%,transparent 24%);
  background-size:200% 100%;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.5) 0%,transparent 65%);
  mask-image:linear-gradient(to top,rgba(0,0,0,.5) 0%,transparent 65%);
  animation:imx-shimmer 6s linear infinite;
}
.port-fx-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.4) 100%)}
@media(prefers-reduced-motion:reduce){.port-fx-shimmer{animation:none}}
body::after{ /* readability overlay — retinted to the FINAL Emerald bg tone (was neutral near-black) */
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,20,16,.74),rgba(10,20,16,.62) 42%,rgba(10,20,16,.76));
}
body.port-rsgt::after{background:linear-gradient(180deg,rgba(18,8,8,.74),rgba(18,8,8,.62) 42%,rgba(18,8,8,.76))}
@keyframes bg-kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}
/* R1 MASTER MODE: Guided Deck shell — no sidebar, no bottom tab bar.
   Single-column full-bleed shell; Back button + module cards are the only nav. */
.app-shell{display:flex;flex-direction:column;width:100%;min-height:100dvh;max-width:1440px;margin:0 auto}
.app-content{min-width:0;padding:0 24px calc(var(--space-8) + env(safe-area-inset-bottom));flex:1}
.app-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 0 16px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:20px;
}
.app-topbar-id{display:flex;align-items:center;gap:var(--space-3)}
/* IconButton (Back) — 44x44 circle, matches FINAL's IconButton spec exactly */
.imx-iconbtn{
  width:var(--touch-min);height:var(--touch-min);border-radius:50%;flex-shrink:0;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
}
#moduleTitle{font-size:clamp(1.3rem,2.6vw,1.65rem);font-weight:800;margin:0;letter-spacing:-.02em}
#moduleSubtitle{font-size:13px;color:var(--muted);margin:4px 0 0}
.module-page{animation:pb-fade-up .4s cubic-bezier(.22,1,.36,1) both}
/* Guided Deck module-level transitions — higher specificity than .module-page's
   fixed `animation` shorthand so these win regardless of source order. */
.module-page.imx-anim-forward{animation:imx-slide-right var(--dur-base) var(--ease-standard) both}
.module-page.imx-anim-back{animation:imx-slide-left var(--dur-base) var(--ease-standard) both}
/* P-09 FINAL merge: Surface(level 1) recipe — flat --surface + --elevation-1, no backdrop-blur,
   no decorative glow pseudo-element. FINAL's philosophy is restrained: no ambient decoration
   beyond the one named RouteMotif on Home. Replaces the old glass/gradient/glow material. */
.glass-card{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);
  box-shadow:var(--elevation-1);
  padding:var(--space-5) var(--space-6);margin-bottom:var(--space-4);
}
.glass-card h3{font-size:15px;font-weight:700;color:var(--accent);margin:0 0 var(--space-4);letter-spacing:-.01em}
.dash-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}
.dash-stat{
  padding:var(--space-4) var(--space-5);border-radius:var(--radius);border:1px solid var(--border);
  background:var(--surface);box-shadow:var(--elevation-1);
  transition:border-color var(--dur-fast),transform var(--dur-fast) var(--ease-spring);
}
.dash-stat:hover{border-color:var(--border-hi);transform:translateY(-1px)}
.dash-stat b{display:block;font:800 24px var(--mono);color:var(--accent);margin-top:4px}
.dash-stat span{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
/* ── P-09 Wave 3B: home launchpad ──
   One question, three large workflow actions (one-handed mobile targets), plan usage
   demoted to a quiet strip, secondary modules as small ghost links. */
/* Home is flat (Guided Deck, no outer card chrome) — greeting text sits bare above
   the 3 Surface cards, matching FINAL's HomeScreen layout exactly. */
.home-hero{padding:22px 2px 4px}
.home-q{font-size:clamp(1.4rem,3.4vw,1.8rem);font-weight:800;letter-spacing:-.02em;margin:0 0 6px;color:var(--text-primary);line-height:1.2}
.home-q-en{display:block;font-size:12px;font-weight:600;letter-spacing:0;color:var(--text-tertiary);margin-top:4px}
.home-sub{font-size:13.5px;color:var(--text-secondary);margin:0 0 18px;line-height:1.6}
.home-actions{display:flex;flex-direction:column;gap:var(--space-3)}
/* Surface(interactive) recipe, per spec Step 2: --surface bg + --border, radius-lg,
   space-5 padding, 44x44 accent-soft icon, chevron-right, translateY(-2px)+border-strong
   on hover, scale(.985) on active. Staggered fade-up entry: 150/220/290ms. */
.home-action{
  display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  min-height:76px;padding:var(--space-5);cursor:pointer;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface);
  color:var(--text-primary);font-family:var(--font-body);
  transition:border-color var(--dur-fast),transform var(--dur-fast) var(--ease-spring);
  animation:imx-fade-up var(--dur-base) var(--ease-standard) both;
}
.home-actions .home-action:nth-child(1){animation-delay:150ms}
.home-actions .home-action:nth-child(2){animation-delay:220ms}
.home-actions .home-action:nth-child(3){animation-delay:290ms}
.home-action:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.home-action:active{transform:scale(.985)}
.home-action:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.home-action-icon{
  width:44px;height:44px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  font-size:20px;border-radius:var(--radius-md);
  background:var(--accent-soft);
}
.home-action-text{flex:1;min-width:0}
.home-action-text b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;margin-bottom:3px}
.home-action-text span{display:block;font-size:12.5px;color:var(--text-secondary);line-height:1.5}
.home-action-go{flex-shrink:0;color:var(--text-tertiary);display:flex}
.home-plan-strip{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  padding:12px 18px;margin-bottom:var(--space-4);border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface);
  font-size:12px;color:var(--muted);
}
.home-plan-strip b{font:700 12.5px var(--mono);color:var(--dim);margin-left:4px}
/* FINAL renders Reports/Profile/Settings as quiet flat Surface(level 0) labels, not pill
   buttons — real destinations stay clickable, but read calm rather than chrome-y. */
.home-secondary-row{display:flex;flex-wrap:wrap;gap:8px}
.home-secondary-row .btn{
  flex:1;justify-content:center;font-size:12px;font-weight:600;padding:14px 10px;
  background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:var(--radius-sm);
}
.home-secondary-row .btn:hover{color:var(--dim);border-color:var(--border-hi)}
@media(max-width:600px){
  .home-hero{padding:20px 16px}
  .home-action{padding:14px 14px;gap:12px}
  .home-action-text b{font-size:15.5px}
}
.dash-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.icon-chip{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:8px;background:color-mix(in srgb,var(--accent) 14%,transparent);
  font-size:12px;margin-right:2px;vertical-align:-4px;
}
.page-hero{margin-bottom:var(--space-6);padding:var(--space-6);border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface);box-shadow:var(--elevation-1)}
.page-hero h2{font-size:clamp(1.35rem,3.2vw,1.85rem);font-weight:800;margin:0 0 10px;letter-spacing:-.02em}
.page-hero p{font-size:14px;color:var(--dim);margin:0;line-height:1.65;max-width:720px}
/* P-09 Wave 3B: secondary surfaces (Reports/Profile/Settings) get a compact plain header —
   no hero card, no gradient panel — so they read as settings, not a fourth primary workflow. */
.page-hero-quiet{margin-bottom:18px;padding:0}
.page-hero-quiet h2{font-size:1.15rem;font-weight:700;margin:0 0 4px;letter-spacing:-.01em;color:var(--dim)}
.page-hero-quiet p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.55;max-width:640px}
/* Logistics tracking */
.logistics-panel{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
.trk-card{
  border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;background:var(--surface);margin-bottom:12px;
}
.trk-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.trk-ref{font:800 17px var(--mono);color:var(--accent)}
.trk-meta{font-size:12.5px;color:var(--dim);margin-top:4px}
/* P-09 Wave 4: tracking notify UI — presentational only, reflects existing always-on 6h monitoring */
.trk-notify-badge{
  font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--green) 30%,transparent);color:var(--green);background:color-mix(in srgb,var(--green) 8%,transparent);
}
/* P-09 Wave 4: notify-channel chips — presentation only; SMS/WhatsApp are honest "coming soon", no backend wiring */
.notify-channels{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.notify-chip{
  font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--border);background:var(--surface);color:var(--dim);
}
.notify-chip-active{border-color:color-mix(in srgb,var(--green) 30%,transparent);color:var(--green);background:color-mix(in srgb,var(--green) 8%,transparent)}
button.notify-chip-soon{cursor:pointer;transition:border-color .2s,color .2s}
button.notify-chip-soon:hover{border-color:var(--accent);color:var(--text)}
.timeline{position:relative;padding-left:22px;margin:12px 0}
.timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 15%,transparent))}
.tl-item{position:relative;padding:0 0 16px 12px}
.tl-item::before{
  content:'';position:absolute;left:-19px;top:5px;width:10px;height:10px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);
}
.tl-item.past::before{background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 20%,transparent)}
.tl-item.future::before{background:var(--muted);box-shadow:none}
.tl-date{font:600 11px var(--mono);color:var(--muted)}
.tl-title{font-size:13px;font-weight:700;margin:2px 0}
.tl-loc{font-size:12px;color:var(--dim)}
.milestone-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.milestone{
  font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;
  border:1px solid var(--border);color:var(--dim);background:var(--surface);
}
.milestone.done{border-color:color-mix(in srgb,var(--green) 35%,transparent);color:var(--green)}
.milestone.active{border-color:var(--accent);color:var(--accent)}
.vessel-card{padding:14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface)}
.vessel-card b{display:block;font-size:13px;margin-bottom:6px}
.data-table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid rgba(255,255,255,.06)}
/* P-09 Wave 3: per-module glass-card tint override removed — .glass-card now uses one
   consistent material everywhere (was a source of the "inconsistent" look module to module). */
#authGate .card{max-width:420px;margin:60px auto;box-shadow:var(--elevation-3)}
/* CPA date picker UX (P-09 Wave 2) */
.date-field{display:flex;gap:6px;align-items:stretch}
.date-field input[type="date"]{flex:1 1 auto;min-width:0}
.date-today-btn{
  flex:0 0 auto;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--surface);color:var(--dim);font:600 11px var(--font);cursor:pointer;white-space:nowrap;
  transition:border-color .2s,color .2s,background .2s;
}
.date-today-btn:hover{border-color:var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 8%,transparent)}
/* No sidebar to collapse anymore (Guided Deck) — mobile tweaks are just spacing/wrap now */
@media(max-width:960px){
  .app-content{padding:0 14px calc(var(--space-8) + env(safe-area-inset-bottom))}
  .dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logistics-panel{grid-template-columns:1fr}
  .app-topbar{flex-wrap:wrap;row-gap:10px}
  .userbox{flex-wrap:wrap;gap:8px 10px}
}
@media(max-width:520px){
  .dash-grid{grid-template-columns:1fr}
}
@media(min-width:961px){
  .data-table-wrap table{min-width:640px}
}
/* Tracking workspace */
.trk-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.trk-tabs button{
  padding:8px 14px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--dim);font:600 12px var(--font);cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.trk-tabs button.on{border-color:var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 10%,transparent)}
/* P-09 Wave 3B: Reference is the primary tracking action; vessel/voyage are quiet text-link
   alternatives, not equal-weight tabs — the user shouldn't face a 3-way choice before typing. */
.trk-tabs .trk-tab-primary{padding:10px 18px;font-size:13px;font-weight:700}
.trk-tabs .trk-tab-secondary{
  border:0;background:transparent;padding:8px 4px;color:var(--muted);
  font-size:11.5px;text-decoration:underline;text-underline-offset:3px;
}
.trk-tabs .trk-tab-secondary.on{color:var(--accent);background:transparent}
.trk-tabs .trk-tab-secondary:hover{color:var(--dim)}
.trk-panel{display:none}.trk-panel.on{display:block}
.trk-demo-banner{
  font-size:11px;padding:10px 12px;border-radius:var(--radius-sm);margin-bottom:12px;
  border:1px dashed color-mix(in srgb,var(--gold) 35%,transparent);background:color-mix(in srgb,var(--gold) 8%,transparent);color:var(--gold);line-height:1.5;
}
.badge.demo{border-color:var(--gold);color:var(--gold)}
.trk-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.trk-kv div{font-size:12.5px;color:var(--dim);line-height:1.5}
.trk-kv span{display:block;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.trk-kv b{font:700 13px var(--mono);color:var(--text)}
.hs-stats-bar{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.hs-stat-pill{font-size:11px;padding:5px 10px;border-radius:999px;border:1px solid var(--border);color:var(--dim)}
/* HS status only (A): short message stays in a small box; long text gets a side scrollbar
   instead of stretching the page. Empty = no box chrome. */
#hsStatus.status:not(:empty){
  max-width:100%;
  max-height:4.75em; /* ~3 lines */
  overflow-x:auto;
  overflow-y:auto;
  box-sizing:border-box;
  margin-top:8px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
  scrollbar-gutter:stable;
}
/* HS Guided Deck — matches + 6+Related feature modules (Home card pattern) */
.hs-feature-deck-label{
  margin:4px 0 10px;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-tertiary);
}
.hs-match-deck,.hs-feature-deck{
  display:flex;flex-direction:column;gap:var(--space-3);
}
.hs-match-card,.hs-feature-card{min-height:64px;padding:14px 16px}
.hs-feature-card.on{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));
}
.hs-feature-body{
  margin-top:var(--space-4);
  max-height:min(42vh,420px);
  overflow:auto;
  padding:var(--space-4);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  scrollbar-gutter:stable;
}
#hsOut.hs-matches-compact{
  max-height:148px;
  overflow:auto;
  margin-bottom:var(--space-3);
  padding-right:4px;
  scrollbar-gutter:stable;
}
#hsOut.hs-matches-compact .hs-feature-deck-label{margin-top:0}
#hsOut.hs-matches-compact .hs-match-card{min-height:52px;padding:10px 12px}
#hsOut.hs-matches-compact .home-action-text span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.hs-history{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hs-history button{font-size:11px;padding:5px 10px}
.hs-loadmore-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06)}
.hs-loadmore-row .hs-muted{margin:0}
.hs-loadmore-row .btn{font-size:11px;padding:6px 14px}
.hs-loadmore-row .btn:disabled{opacity:.55;cursor:default}
.hs-detail{margin-top:6px;font-size:11px;color:var(--dim);line-height:1.5}
.hs-row-expand{cursor:pointer}
.hs-row-expand:hover td{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.module-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.module-tile{
  text-align:left;padding:18px;border-radius:var(--radius);border:1px solid var(--border);
  background:linear-gradient(160deg,rgba(32,32,32,.85),rgba(19,19,19,.7));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  cursor:pointer;transition:border-color .2s,transform .15s,box-shadow .2s;
}
.module-tile:hover{
  border-color:color-mix(in srgb,var(--accent) 35%,transparent);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.28),0 0 20px var(--accent-glow);
}
.module-tile b{display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:6px}
.module-tile span{font-size:11px;color:var(--muted);line-height:1.5}
@media(max-width:720px){.module-tiles{grid-template-columns:1fr}}
/* HS Code Intelligence workspace */
/* P-09 input-light: one dominant input + collapsed advanced tools + sectioned results */
.hs-hero{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;margin-bottom:6px}
.hs-hero-row{display:flex;gap:8px}
.hs-hero-input{font-size:15px;padding:13px 14px}
.hs-hero-btn{white-space:nowrap;padding:12px 22px}
.hs-cam-btn{white-space:nowrap;padding:12px 14px;font-size:16px;line-height:1}
.hs-cam-btn[hidden]{display:none!important}
.hs-cam-panel{
  margin:10px 0 4px;padding:12px 14px;border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18);
}
.hs-cam-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.hs-cam-head b{font-size:13px;color:var(--text)}
.hs-cam-preview{
  display:block;max-width:100%;max-height:220px;width:auto;height:auto;
  margin:0 0 10px;border-radius:8px;border:1px solid rgba(255,255,255,.08);
  object-fit:contain;background:#000;
}
.hs-hero-fy select{min-width:120px}
.hs-advanced{
  margin-top:14px;border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-sm);
  background:rgba(0,0,0,.14);
}
.hs-advanced>summary{
  cursor:pointer;padding:11px 14px;font:700 12px var(--font);color:var(--dim);
  list-style:none;user-select:none;border-radius:var(--radius-sm);
  transition:color .2s,background .2s;
}
.hs-advanced>summary::-webkit-details-marker{display:none}
.hs-advanced>summary::before{content:'▸ ';color:var(--accent)}
.hs-advanced[open]>summary::before{content:'▾ '}
.hs-advanced>summary:hover{background:rgba(255,255,255,.04);color:var(--text)}
.hs-advanced>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hs-advanced>.hs-tabs,.hs-advanced>.hs-panel,.hs-advanced>p{padding-left:14px;padding-right:14px}
.hs-advanced>.hs-panel{padding-bottom:12px}
.hs-sec{border:1px solid rgba(255,255,255,.07);border-radius:var(--radius-sm);background:rgba(0,0,0,.14);margin:0 0 10px}
.hs-sec>summary{
  cursor:pointer;padding:10px 14px;font:700 12px var(--font);color:var(--text);
  list-style:none;user-select:none;display:flex;align-items:center;gap:8px;
  border-radius:var(--radius-sm);transition:background .2s;
}
.hs-sec>summary::-webkit-details-marker{display:none}
.hs-sec>summary::before{content:'+';font:700 13px var(--mono);color:var(--accent)}
.hs-sec[open]>summary::before{content:'−'}
.hs-sec>summary:hover{background:rgba(255,255,255,.04)}
.hs-sec>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hs-sec-body{padding:2px 14px 14px}
.hs-unavail{color:var(--muted);font-style:italic;font-weight:500}
.hs-unavail-block{font-size:12px;color:var(--muted);font-style:italic;margin:4px 0;line-height:1.5}
.hs-mayapply{color:var(--gold);font-weight:700}
.hs-plain{font-size:12.5px;color:var(--dim);line-height:1.6;margin:10px 0;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12)}
.hs-doc-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hs-opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
@media(max-width:720px){.hs-hero{grid-template-columns:1fr}.hs-hero-row{flex-wrap:wrap}}
.hs-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:14px;align-items:start}
.hs-main-col{display:flex;flex-direction:column;gap:14px}
.hs-side-col{position:sticky;top:12px}
.hs-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.hs-tabs button{
  padding:8px 14px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--dim);font:600 12px var(--font);cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.hs-tabs button.on{border-color:var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.hs-panel{display:none}.hs-panel.on{display:block}
.hs-suggest-drop{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;
  max-height:280px;overflow:auto;border-radius:var(--radius-sm);
  border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);background:var(--card);
  box-shadow:var(--elevation-3);
}
.hs-suggest-drop.open{display:block}
.hs-suggest-item{
  display:grid;grid-template-columns:auto 1fr auto;gap:8px;width:100%;text-align:left;
  padding:10px 12px;border:0;border-bottom:1px solid rgba(255,255,255,.05);
  background:transparent;color:var(--text);cursor:pointer;font-size:12px;
}
.hs-suggest-item:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.hs-suggest-code{font:700 12px var(--mono);color:var(--accent)}
.hs-suggest-desc{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-suggest-tti{font:600 11px var(--mono);color:var(--gold)}
.hs-link-code{
  border:0;background:none;padding:0;font:700 13px var(--mono);color:var(--accent);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.hs-chip{font-size:11px;padding:5px 10px}
.hs-muted{font-size:11px;color:var(--muted);line-height:1.5;margin:6px 0 0}
.hs-side-label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:8px}
.hs-side-section{margin-bottom:12px}
.hs-detail-panel.hs-detail-open{animation:hsSlideIn .35s ease}
@keyframes hsSlideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hs-detail-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.hs-detail-code{font:800 22px var(--mono);color:var(--accent)}
.hs-detail-title{font-size:14px;color:var(--dim);margin-top:4px;line-height:1.4}
.hs-detail-actions{display:flex;flex-wrap:wrap;gap:6px}
.hs-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.hs-detail-block{padding:10px 12px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.15)}
.hs-detail-block.full{grid-column:1/-1}
.hs-detail-block span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:4px}
.hs-detail-block b{font-size:12px;line-height:1.45;color:var(--text);font-weight:600}
.hs-duty-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.hs-duty-cell{padding:8px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.hs-duty-cell span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase}
.hs-duty-cell b{font:700 14px var(--mono);color:var(--gold)}
.hs-permit-list{margin:6px 0 0;padding-left:18px;font-size:12px;color:var(--dim);line-height:1.5}
/* Duty-basis table: which base each tax is charged on (HS detail §5) */
.hs-basis-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:12px;min-width:520px}
.hs-basis-table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.1)}
.hs-basis-table td{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--dim);vertical-align:top}
.hs-basis-table td b{color:var(--text)}
.hs-basis-table tbody tr:last-child td{border-bottom:none;background:rgba(255,255,255,.04)}
.hs-basis-table tbody tr:last-child td b{color:var(--gold)}
.hs-related{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hs-detail-foot{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06)}
.hs-classify-primary{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin-top:12px;padding:14px;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.hs-classify-score{
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:800 14px var(--mono);color:var(--score-color,var(--accent));
  border:2px solid var(--score-color,var(--accent));background:rgba(0,0,0,.2);
}
.hs-reason{font-size:12px;color:var(--dim);margin-top:6px;line-height:1.5}
.hs-alt-title{font-size:12px;font-weight:700;color:var(--accent);margin:16px 0 8px}
.hs-alt-list{display:flex;flex-direction:column;gap:10px}
.hs-alt-item{padding:10px 12px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.12)}
.hs-assist-answer{font-size:13px;line-height:1.6;color:var(--text);padding:12px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.2)}
@media(max-width:960px){.hs-layout{grid-template-columns:minmax(0,1fr)}.hs-side-col{position:static}}
@media(max-width:720px){.hs-detail-grid,.hs-duty-grid{grid-template-columns:1fr}}
/* P-09 Wave 4: dashboard entrance — cheap, single stagger, no layout properties animated */
@keyframes dash-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#dashboardModule .dash-stat,#dashboardModule .glass-card{
  animation:dash-enter .4s cubic-bezier(.22,1,.36,1) both;
}
#dashboardModule .dash-stat:nth-child(1){animation-delay:0ms}
#dashboardModule .dash-stat:nth-child(2){animation-delay:60ms}
#dashboardModule .dash-stat:nth-child(3){animation-delay:120ms}
#dashboardModule .glass-card:nth-of-type(1){animation-delay:160ms}
#dashboardModule .glass-card:nth-of-type(2){animation-delay:220ms}
/* ═══════════════════════════════════════════════════════════════════════
   R1 MASTER MODE — Step 8: motion keyframes (verbatim from spec) +
   universal reduced-motion override. This supersedes the old selector-
   scoped @media block above (sidebar/mobile-nav selectors no longer exist
   post Guided-Deck removal) with the spec's blanket rule, which covers
   every current and future animated element in one place.
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes imx-fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes imx-slide-right{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}
@keyframes imx-slide-left{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
@keyframes imx-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.001ms!important;
    transition-duration:0.001ms!important;
  }
}
.imx-btn:hover{transform:translateY(-1px)}
.imx-btn:active{transform:scale(.97)}
.imx-card-interactive{transition:transform var(--dur-fast) var(--ease-spring),border-color var(--dur-fast)}
.imx-card-interactive:hover{transform:translateY(-2px);border-color:var(--border-strong)}
.imx-card-interactive:active{transform:scale(.985)}
.imx-focusable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.imx-iconbtn:hover{transform:translateY(-1px)}
.imx-iconbtn:active{transform:scale(.97)}

/* ── Stepper (Step 4): 28px circles, accent fill, check on completed,
   connecting line fills as steps complete. Purely presentational progress
   indicator over the existing single-scroll CPA/RSGT workspace — driven by
   renderStepper() in index.html, not a paginated rebuild of the form. ── */
.imx-stepper{display:flex;align-items:center;margin-bottom:var(--space-4);min-width:0}
.imx-stepper-item{display:flex;align-items:center;flex:1 1 auto;min-width:0}
.imx-stepper-item:last-child{flex:0 0 auto}
.imx-stepper-node{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:var(--surface-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font:700 12px var(--font-mono);color:var(--text-tertiary);
  transition:all var(--dur-base) var(--ease-spring);
}
.imx-stepper-item.done .imx-stepper-node,.imx-stepper-item.current .imx-stepper-node{
  background:var(--accent);border-color:var(--accent);color:var(--accent-text);
}
.imx-stepper-label{margin-left:8px;font-size:11.5px;font-weight:600;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media(max-width:400px){.imx-stepper-label{display:none}}
.imx-stepper-item.done .imx-stepper-label,.imx-stepper-item.current .imx-stepper-label{color:var(--text-secondary)}
.imx-stepper-line{flex:1;height:2px;margin:0 var(--space-2);background:var(--border);border-radius:1px;overflow:hidden}
.imx-stepper-line-fill{height:100%;background:var(--accent);width:0%;transition:width var(--dur-slow) var(--ease-standard)}
.imx-stepper-line.filled .imx-stepper-line-fill{width:100%}

/* ── Toast (Step 4): PDF-downloaded confirmation ── */
.imx-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9999;
  display:flex;align-items:center;gap:8px;padding:12px 20px;
  background:var(--bg-elevated);border:1px solid var(--border-strong);
  border-radius:var(--radius-full);box-shadow:var(--elevation-3);
  color:var(--text-primary);font:600 13px var(--font);white-space:nowrap;
  animation:imx-fade-up var(--dur-base) var(--ease-spring) both;
}

/* ── Advanced-options toggle (Step 4): max-height/opacity reveal instead of
   display:none, rotating chevron instead of +/− swap. Author rules below
   have higher specificity than the UA `details:not([open]) > *{display:none}`
   stylesheet rule, so they win without touching the native <details>/[open]
   semantics that syncRsgtUi()/calcRsgt() read via .open — zero JS risk. ── */
.pb-details summary{min-height:var(--touch-min)}
.pb-details summary::before{
  content:'';width:18px;height:18px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;border:1px solid var(--border);
  background:color-mix(in srgb,var(--pb-accent) 8%,transparent);
  /* neutral stroke (not var(--pb-accent)) — this same chevron is reused on both the
     CPA (green) and RSGT (red) workspaces, and data-URI SVGs can't reliably resolve
     currentColor from a background-image host in all browsers */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8794' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px;
  transition:transform var(--dur-fast) var(--ease-standard);
}
.pb-details[open] summary::before{transform:rotate(180deg)}
/* grid-template-rows 0fr/1fr, not max-height: current Chrome gives <details> its own
   native open/close size-transition machinery on non-summary content, which fights
   (and wins over) an authored max-height override — verified via computed-style
   inspection, even inline !important couldn't beat it. The 0fr/1fr row-track trick
   sidesteps that machinery entirely while still overriding the UA `display:none`
   rule (both branches below carry enough specificity: 2 classes + 1 attribute vs
   the UA rule's 1 type + 1 attribute + 1 type). */
.pb-details-body{overflow:hidden;transition:grid-template-rows var(--dur-slow) var(--ease-standard),opacity var(--dur-fast)}
.pb-details-body>*{overflow:hidden;min-height:0}
/* grid-auto-rows alongside grid-template-rows: .pb-details-body has several direct
   children (multiple form rows), not one wrapper div — without grid-auto-rows only
   the first (explicit) row would collapse, leaving the rest visible. */
.pb-details:not([open])>.pb-details-body{display:grid;grid-template-rows:0fr;grid-auto-rows:0fr;opacity:0;pointer-events:none}
.pb-details[open]>.pb-details-body{display:grid;grid-template-rows:1fr;grid-auto-rows:1fr;opacity:1}

/* ── Select chevron-down (Step 7d): appearance:none + CSS bg-image chevron.
   No markup changes needed (pseudo-elements can't target <select> reliably
   across browsers) — this is the safe equivalent of an absolutely
   positioned pointer-events:none chevron sibling. ── */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  /* !important on the background-* longhands only (not the shorthand): index.html's
     inline <style> declares `background:var(--card)` on `input,select,textarea` at
     equal specificity but later source order, which resets background-image via the
     shorthand — these targeted overrides survive that without touching that rule. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8794' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:14px!important;
  padding-right:34px;
}

/* ── HS popular-search chips (Step 5) ── */
.hs-popular-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.hs-popular-chip{
  min-height:var(--touch-min);padding:10px 16px;border-radius:var(--radius-full);
  border:1px solid var(--border);background:var(--surface);color:var(--text-primary);
  font:600 13px var(--font);cursor:pointer;transition:all var(--dur-fast) var(--ease-spring);
}
.hs-popular-chip:hover{transform:scale(1.04)}
.hs-popular-chip:active{transform:scale(.96)}

/* ── Pill search inputs w/ leading icon (Step 5/6) — CSS bg-image, no markup change ── */
.hs-hero-input,.trk-search-input{
  border-radius:var(--radius-xl)!important;
  padding-left:42px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8794' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:14px center;background-size:18px;
}

/* ── Tracking: origin → progress → destination (Step 6). Fill reflects a
   real signal (live carrier data available), never a fabricated %
   complete — this product's tracking copy explicitly promises no invented
   milestones, so the bar never claims a journey position we don't have. ── */
.trk-progress-row{display:flex;align-items:center;gap:var(--space-3);margin:12px 0}
.trk-progress-end{font-size:11px;color:var(--text-tertiary);flex-shrink:0;max-width:110px}
.trk-progress-end.dest{text-align:right}
.trk-progress-track{flex:1;height:4px;border-radius:2px;background:var(--border);position:relative;overflow:hidden}
.trk-progress-fill{position:absolute;inset:0 auto 0 0;width:0%;background:var(--accent);border-radius:2px;transition:width var(--dur-slow) var(--ease-standard)}
.trk-progress-track.live .trk-progress-fill{width:100%}
/* Timeline "current" marker (Step 6) — last known real event, not an invented position */
.tl-item.current::before{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}