/*
 * GoMobile Tires (GoMo) Mini App — sticker design system
 * Gold var(--gold) · Hot red #FF2A2A · Navy #1B2A4A · Dark #0E0E0E / var(--panel)
 * Type:
 *   Brand lockup → official GoMobile_Tires_Logo.png (custom letterforms)
 *   Display titles / van tags → Khand
 *   UI body / labels → Inter
 *   Fees / km / job # → JetBrains Mono (tabular shop numbers)
 * Safe-area vars overridden at runtime from Telegram WebApp insets (Bot API 8.0+).
 */
:root {
  --gold: #ffcc00;
  --gold-hi: #ffe066;
  --gold-ghost: #ffdf80;
  --gold-dim: #c9a000;
  --gold-soft: rgba(255, 204, 0, 0.14);
  --red: #ff2a2a;
  --red-deep: #cc1a1a;
  --red-soft: rgba(255, 42, 42, 0.14);
  --navy: #1b2a4a;
  --navy-hi: #243656;
  --bg: #0c0c0e;
  --panel: #1c1c1e;
  --panel2: #2c2c2e;
  --ink: #f5f5f7;
  --mute: #a8a8b0;
  --line: #3a3a42;
  --overdue: #ff2a2a;
  --soon: var(--gold);
  --hot: var(--gold);
  --ok: #34c759;
  /* Shared brand gradients ? hand-placed only (never bulk-replace into :root) */
  --grad-gold: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, #e6b800 100%);
  --grad-red: linear-gradient(180deg, #ff4d4d 0%, var(--red) 55%, #d91818 100%);
  --grad-heat: linear-gradient(90deg, var(--gold), var(--red));
  --grad-panel-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 46%);
  /*
   * Selected pills = gold gradient fill (Stock Inbound/Outbound). No outer glow.
   * --pill-glow-* kept for non-pill accents (grab handle, icons) only.
   */
  --pill-glow-gold: none;
  --pill-glow-gold-soft: none;
  --pill-on-bg: var(--grad-gold);
  --pill-on-fg: #0e0e0e;
  --pill-on-border: var(--gold);
  --pill-on-inset: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
  /*
   * Default top inset = 0. env(safe-area-inset-top) inside Telegram Mini App
   * often double-counts the TG header and paints a solid black band under ? Close.
   * JS sets --safe-t only for true fullscreen / notches.
   */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: 0px;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --tg-vh: 100dvh;
  --vv-height: 100dvh;
  /* Soft keyboard inset ? set by installGlobalKeyboardInset() */
  --kb-inset: 0px;
  --stock-kb: var(--kb-inset);
  /* Display = Khand. UI = Inter. Tags = Khand. Numbers = JetBrains Mono. */
  --font-brand: 'Khand', 'Inter', system-ui, -apple-system, sans-serif;
  /* system-ui first so shop wifi / Google Fonts delay never blanks text (fonts use display=swap) */
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Inter', sans-serif;
  --font-ui: var(--font);
  --font-tag: 'Khand', 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
  --r-pill: 999px;
  --r-tag: 6px;
  /* Motion system ? distinct curves (aliases kept for older rules) */
  --ease-ui: cubic-bezier(0.2, 0, 0, 1); /* standard chrome */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* emphasized enter / settle */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* exit / dismiss */
  --ease-spring: cubic-bezier(0.34, 1.06, 0.64, 1); /* tighter sheet open */
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-press: cubic-bezier(0.3, 0, 0.2, 1);
  --ease-linear: linear;
  --ease-bounce: var(--ease-spring);
  --ease-roll: var(--ease-ui);
  --ease-smooth: var(--ease-out);
  --ease-elastic: var(--ease-spring);
  --ease-bay: var(--ease-out);
  --ease-lug: var(--ease-spring);
  --ease-torque: var(--ease-ui);
  --ease-lock: var(--ease-spring);
  --ease-smooth-ui: var(--ease-in);
  --dur-micro: 100ms;
  --dur-fast: 160ms;
  --dur-med: 280ms;
  --dur-sheet: 420ms;
  --dur-exit: 220ms;
  --sheet-close-ms: 260ms;
  --motion-fast: var(--dur-fast);
  --motion-med: var(--dur-med);
  --motion-slow: 0.48s;
  --motion-micro: var(--dur-micro);
  --motion-signature: 0.72s;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  /* Spacing scale ? use on new/edited rules (no global rewrite) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-lift: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  /* 3D depth system (v316) ? top-light bevels + layered elevation */
  --bevel-up: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.22);
  --elev-2: 0 2px 4px rgba(0, 0, 0, 0.42), 0 8px 22px rgba(0, 0, 0, 0.3);
  --elev-3: 0 4px 10px rgba(0, 0, 0, 0.5), 0 18px 48px rgba(0, 0, 0, 0.42);
  --well: inset 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  --pill-on-depth: var(--pill-on-inset), inset 0 -2px 0 rgba(122, 90, 0, 0.5), var(--elev-1);
  --glass: rgba(28, 32, 44, 0.72);
  /* Modern chrome surfaces (v317) ? faux glass, no backdrop-filter */
  --surface-1: linear-gradient(180deg, rgba(34, 40, 56, 0.92), rgba(20, 24, 34, 0.96));
  --surface-2: linear-gradient(180deg, rgba(28, 32, 44, 0.85), rgba(16, 18, 26, 0.92));
  --hairline-gold: linear-gradient(165deg, rgba(255, 204, 0, 0.5), rgba(255, 204, 0, 0.08) 40%, rgba(255, 255, 255, 0.06) 70%, rgba(255, 42, 42, 0.18));
  --hairline-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
  --glow-gold: 0 0 22px rgba(255, 204, 0, 0.18);
  /* Overlay stack */
  --z-van: 210;
  --z-stock: 220;
  --z-help: 225;
  /* FX under sheets/dialogs so sparks never paint over open modals */
  --z-fx: 160;
  /* Scanner above stock/help/compare sheets (field scan with sheet open); below bay/toast.
     Overlay stays closed until after camera Allow so TG permission UI is not covered. */
  --z-scanner: 260;
  --z-bay: 300;
  --z-toast: 320;
  --z-walk: 215;
  --z-compare: 230;
  --z-sweep: 400;
  --z-gate: 500;
  --z-menu: 9000;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* clip (not hidden) avoids sticky/compositor detach bugs in TG WebView */
  overflow-x: clip;
  overscroll-behavior-y: contain;
  scroll-behavior: auto;
}

/* Keyboard / tap focus: gold ring that follows border-radius.
 * CSS outline stays axis-aligned in Telegram WebView ? looks like a rectangle
 * around rounded pills/tabs ? so use box-shadow rings instead. */
:focus:not(:focus-visible) {
  outline: none;
}

button:focus-visible,
a:focus-visible,
summary:focus-visible,
[role='button']:focus-visible,
[role='tab']:focus-visible,
[role='menuitem']:focus-visible,
[role='option']:focus-visible,
.sort-chip:focus-visible,
.tb-chip:focus-visible,
.chip:focus-visible,
.net-chip:focus-visible,
.act:focus-visible,
.bay-tab:focus-visible,
.seg:focus-visible,
.icon-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(14, 14, 18, 0.95),
    0 0 0 4px rgba(255, 204, 0, 0.92);
}

/* Preserve active gold glow when a board tab is also focused */
.bay-tab.active:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22) inset,
    0 0 0 2px rgba(14, 14, 18, 0.95),
    0 0 0 4px rgba(255, 204, 0, 0.95);
  filter: none;
}

.sort-chip.on:focus-visible,
.seg.on:focus-visible,
.chip.on:focus-visible,
.net-chip.on:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.15) inset,
    0 0 0 2px rgba(14, 14, 18, 0.95),
    0 0 0 4px rgba(255, 204, 0, 0.95);
  filter: none;
}

#app {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: var(--tg-vh, 100dvh);
  /*
   * Top safe inset lives on .app-chrome (solid), not here.
   * Padding #app top + sticky/chrome left a black empty band under TG ? Close.
   */
  padding: 0 calc(16px + var(--safe-r))
    calc(22px + var(--safe-b)) calc(16px + var(--safe-l));
  z-index: 1;
}

/* Room to scroll focused inputs above the soft keyboard */
html.kb-open #app {
  padding-bottom: calc(22px + var(--safe-b) + var(--kb-inset, 0px));
}

/* Keep caret / type bar clear of action islands + keyboard */
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='hidden']),
textarea,
select,
[contenteditable='true'] {
  scroll-margin-bottom: calc(90px + var(--safe-b, 0px) + var(--kb-inset, 0px));
  scroll-margin-top: 72px;
}

/* Soft dim when Mini App is backgrounded (activated/deactivated events) */
body.tg-bg #app {
  opacity: 0.92;
  transition: opacity 0.2s ease;
}

.bg-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 42% at 50% -8%, rgba(255, 204, 0, 0.18), transparent 58%),
    radial-gradient(ellipse 55% 34% at 100% 36%, rgba(255, 42, 42, 0.07), transparent 52%),
    radial-gradient(ellipse 40% 28% at 0% 70%, rgba(27, 42, 74, 0.55), transparent 55%),
    linear-gradient(180deg, #12141a 0%, var(--bg) 42%, #070708 100%);
}

.bg-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image:
    linear-gradient(rgba(255, 204, 0, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 204, 0, 0.55) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
}

/*
 * App chrome is NOT sticky and NOT a solid slab.
 * Solid --bg on .app-chrome painted a black rectangle over the gradient
 * (the "black block" under TG header that vanished after scroll).
 */
.app-chrome {
  position: relative;
  z-index: 2;
  margin: 0;
  /* Tiny air only ? never invent a black header band */
  padding: calc(4px + var(--safe-t)) 0 4px;
  background: transparent;
  box-shadow: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Hard lock ? TG WebView has blanked mast/tabs after scroll/anim */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Bay chrome must never blank (menus/headers disappearing bug) */
.app-chrome .mast,
.app-chrome .bay-tabs,
.app-chrome .bay-tab,
.app-chrome .status-strip,
.app-chrome .bay-tools,
.app-chrome .brand-logo,
.app-chrome .logo-stage,
.app-chrome .logo-tire {
  opacity: 1 !important;
  visibility: visible !important;
}
.app-chrome.scrolled {
  box-shadow: none;
  border-bottom: none;
  background: transparent;
}
/* Hide scroll-progress bar ? looked like a black/square strip under TG chrome */
.scroll-progress {
  display: none !important;
}

/* Fullscreen only: clear TG ? Close with real top inset (still transparent) */
body.tg-fullscreen .app-chrome {
  padding-top: calc(10px + var(--safe-t));
}

/* Mast / logo */
.mast {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.mast-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  min-width: 0;
  overflow: visible;
}

/*
 * Official brand lockup ? real logo PNG (custom letterforms).
 * Click target for boot/tap FX; tire spins lived on SVG before ? now the lockup lands.
 */
.logo-stage {
  position: relative;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  flex-shrink: 0;
  overflow: visible;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 6px;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(240px, 72vw);
}

.logo-stage.brand-lockup {
  width: auto;
  height: auto;
}

.logo-stage:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.logo-stage:active .logo-tire:not(.tire-spin) {
  transform: scale(0.97);
}

/* logo-mark + logo-tire ? size to official lockup */
.logo-mark,
.logo-tire {
  position: relative;
  left: auto;
  top: auto;
  flex-shrink: 0;
  width: auto;
  height: auto;
  display: block;
  opacity: 1;
  visibility: visible;
  transform-origin: 85% 50%; /* pivot near tire side of lockup */
  filter: none;
}

/* Official PNG ? exact brand letterforms */
.brand-logo {
  display: block;
  height: 32px;
  width: auto;
  max-width: min(180px, 58vw);
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.gate-brand-logo {
  height: 64px;
  max-width: min(280px, 80vw);
  margin: 0 auto;
}

/* Soft gold edge while boot / tap FX */
body.app-boot .logo-tire,
.logo-tire.tire-spin,
.logo-stage.tire-braking .logo-tire {
  filter: drop-shadow(0 0 14px rgba(255, 204, 0, 0.35));
}
.logo-svg {
  display: block;
  width: 44px;
  height: 44px;
  max-width: 44px;
  max-height: 44px;
}

/* ?? Brake smoke under the lockup tire side (boot + tap) ?? */
.tire-smoke {
  position: absolute;
  left: 82%;
  bottom: 4px;
  width: 0;
  height: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.smoke-puff {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sz, 16px);
  height: var(--sz, 16px);
  margin-left: calc(var(--sz, 16px) / -2);
  margin-top: calc(var(--sz, 16px) / -2);
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 40%,
    rgba(230, 230, 235, 0.72) 0%,
    rgba(140, 140, 150, 0.38) 42%,
    rgba(60, 60, 70, 0.12) 68%,
    transparent 78%
  );
  filter: blur(2.5px);
  opacity: 0;
  animation: smoke-brake 0.82s ease-out forwards;
  animation-delay: var(--d, 0s);
  will-change: transform, opacity;
}

/* Dark rubber skid under the tire end of the lockup */
.tire-skid {
  position: absolute;
  left: 88%;
  bottom: 2px;
  width: 0;
  height: 3px;
  margin-left: 0;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(40, 40, 45, 0.55) 30%,
    rgba(20, 20, 22, 0.75) 55%,
    transparent
  );
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transform-origin: right center;
}

.logo-stage.tire-braking .tire-skid {
  animation: skid-mark 0.7s ease-out both;
}

@keyframes smoke-brake {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.35);
  }
  12% {
    opacity: 0.9;
  }
  55% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx, -18px), var(--dy, -22px)) scale(var(--sc, 2.4));
  }
}

@keyframes skid-mark {
  0% {
    opacity: 0;
    width: 0;
    transform: translateX(0);
  }
  25% {
    opacity: 0.85;
    width: 28px;
    transform: translateX(-14px);
  }
  100% {
    opacity: 0;
    width: 36px;
    transform: translateX(-22px);
  }
}

/* Tap ? lockup revs (pivot on tire side), hard brake + smoke via JS */
.logo-tire.tire-spin {
  animation: tire-tap-spin 1.05s cubic-bezier(0.18, 0.7, 0.2, 1);
}

/* Named spin used by !important tap rules further down ? keep in sync with logo-tap-rev */
@keyframes logo-tap-rev {
  0% {
    transform: translateX(0) rotate(0deg) scale(1);
  }
  28% {
    transform: translateX(6px) rotate(4deg) scale(1.04);
  }
  55% {
    transform: translateX(-8px) rotate(-3deg) scale(1.02, 0.97);
  }
  72% {
    transform: translateX(3px) rotate(1.5deg) scale(1.01);
  }
  100% {
    transform: translateX(0) rotate(0deg) scale(1);
  }
}
@keyframes tire-tap-spin {
  0% {
    transform: translateX(0) rotate(0deg) scale(1);
  }
  28% {
    transform: translateX(6px) rotate(14deg) scale(1.04);
  }
  55% {
    transform: translateX(-8px) rotate(-8deg) scale(1.02, 0.97);
  }
  72% {
    transform: translateX(3px) rotate(4deg) scale(1.01);
  }
  100% {
    transform: translateX(0) rotate(0deg) scale(1);
  }
}

.logo-svg {
  display: block;
}

/* Bay line under official lockup */
.mast-mark {
  min-width: 0;
}

.mast-mark .bay {
  display: block;
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--mute);
  text-transform: uppercase;
  margin-top: 0;
  text-align: center;
}

/* Legacy text brand (if any leftover markup) */
.gomo-name,
.gomo-tires {
  font-family: var(--font-brand);
  font-weight: 700;
  text-transform: uppercase;
}
.gomo-name {
  color: #fff;
}
.gomo-tires {
  color: var(--red);
}
.gomo-mo {
  color: #fff;
}

.bay-sep {
  opacity: 0.45;
  margin: 0 0.15em;
}

.mast-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.icon-btn {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(28, 32, 42, 0.92);
  color: var(--gold);
  border-radius: var(--r-pill);
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.16s var(--ease-smooth), border-color 0.16s ease,
    background 0.16s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.icon-btn svg {
  display: block;
}

.icon-btn:active {
  transform: scale(0.94);
  border-color: var(--gold);
}

.spin-on-tap:active {
  animation: spin 0.5s linear;
}

.shift-line {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  flex: 1;
  min-width: 0;
}

/* Status strip under brand */
.status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  min-height: 1.35rem;
}

/*
 * Board tabs ? vertical van + label cards.
 * Selected = solid gold fill (see pill-on block at file end).
 */
.bay-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Room for edge glow so it doesn?t kiss the screen edge */
  padding: 6px 4px 8px;
}

/* More overflow tab (Report / Bay) ? kept hidden; boards are flat-scroll now */
.bay-tabs-more {
  flex: 0 0 auto;
  min-width: 0;
  overflow: visible;
  position: relative;
}
.bay-tabs-more[hidden] {
  display: none !important;
}
.bay-tab-more {
  width: 100%;
  min-height: 48px;
  padding: 8px 4px;
}
.bay-tab-more .tab-label {
  font-size: 0.72rem;
}
.boards-more-menu {
  left: auto;
  right: 0;
  min-width: 9.5rem;
}

/* Flat board strip: swipe for Chase?Bay instead of More */
.bay-tabs.boards-scroll {
  scrollbar-width: none;
  scroll-padding-inline: 8px;
  overscroll-behavior-x: contain;
}
.bay-tabs.boards-scroll::-webkit-scrollbar {
  display: none;
}
.bay-tabs.boards-scroll > .bay-tab[data-screen] {
  flex: 0 0 auto;
  min-width: 4.35rem;
  width: auto;
  padding-left: 8px;
  padding-right: 8px;
}
.bay-tabs.boards-scroll .boards-arrange-chip {
  flex: 0 0 auto;
  min-width: 3.6rem;
  opacity: 0.72;
  border-style: dashed;
  color: var(--mute);
}
.bay-tabs.boards-scroll .boards-arrange-chip .tab-van {
  display: none;
}
.bay-tabs.boards-scroll .boards-arrange-chip:active,
.bay-tabs.boards-scroll .boards-arrange-chip:focus-visible {
  opacity: 1;
}

/* Jump-to-boards FAB ? sticky chrome avoided (TG WebView blank bug) */
.boards-jump {
  position: fixed;
  right: calc(12px + env(safe-area-inset-right, 0px));
  bottom: calc(14px + var(--safe-b));
  z-index: 50;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 204, 0, 0.45);
  background: rgba(28, 28, 30, 0.92);
  color: var(--gold);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.boards-jump[hidden] {
  display: none !important;
}
body.stock-outbound-only .boards-jump,
body.is-stock-screen .boards-jump {
  display: none !important;
}

.bay-tab {
  flex: 1 1 0;
  /* Phone bay: label-first height; Transit icon stays small */
  min-width: 3.2rem;
  min-height: 48px;
  border: 1px solid var(--line);
  background: var(--grad-panel-soft), var(--panel);
  color: var(--mute);
  /* Same radius on ALL four corners ? no flat top */
  border-radius: var(--r-md);
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box;
  padding: 6px 4px;
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative;
  overflow: visible;
  box-shadow: none;
  filter: none;
  transition: background 0.22s var(--ease-out), border-color 0.22s var(--ease-out),
    color 0.18s ease, box-shadow 0.28s var(--ease-out), transform 0.18s var(--ease-bounce);
}

.bay-tab::before,
.bay-tab::after {
  content: none !important;
  display: none !important;
}

/* Photo-matched Transit high-roof cargo (long solid box, short cab) */
.bay-tab .tab-van {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 28px;
  color: var(--mute);
  transition: color 0.12s ease;
  flex-shrink: 0;
  line-height: 0;
}

.bay-tab .tab-rocker {
  /* lower cladding ? darker band like real Transit */
  pointer-events: none;
}

.bay-tab .tab-rail {
  /* chrome sliding-door rail */
  pointer-events: none;
}

.bay-tab .tab-van-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.bay-tab .tab-body {
  transition: fill 0.12s ease;
}

.bay-tab .tab-glass {
  pointer-events: none;
}

.bay-tab .tab-accent {
  fill: var(--gold);
  color: var(--gold);
  stroke: var(--gold);
  transition: fill 0.12s, stroke 0.12s, color 0.12s;
}

.bay-tab .tab-tools {
  stroke: none !important;
}

.bay-tab .tab-report {
  fill: none;
  stroke: var(--gold);
}

.bay-tab .tab-dollar {
  fill: var(--gold);
  stroke: none;
  font-family: var(--mono), system-ui, sans-serif;
}

/* PM package plate ? gold plate in cargo bay */
.bay-tab .tab-pm rect {
  fill: var(--gold);
  stroke: none;
}
.bay-tab .tab-pm path {
  stroke: #0e0e0e;
  fill: none;
}

.bay-tab .tab-wheel {
  fill: #0e0e0e;
  stroke: var(--gold);
  stroke-width: 1.6;
  transition: stroke 0.12s, fill 0.12s;
}

.bay-tab .tab-wheel-hub {
  fill: var(--gold);
  stroke: none;
  opacity: 0.85;
  transition: fill 0.12s, opacity 0.12s;
}

.bay-tab .tab-label {
  display: block;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.bay-tab:active {
  transform: scale(0.95);
}

/* Gold select fill ? solid gold, inset highlight only (no outer glow) */
.bay-tab.active {
  background: var(--pill-on-bg, var(--gold));
  border-color: var(--pill-on-border, var(--gold));
  color: var(--pill-on-fg, #0e0e0e);
  box-shadow: var(--pill-on-inset);
  filter: none;
  transform: translateY(-1px);
}

/* Active tab: dark body so high-roof shape pops on gold, gold hubs/accents */
.bay-tab.active .tab-van {
  color: #1b2a4a;
}
.bay-tab.active .tab-body {
  fill: #1b2a4a;
}
.bay-tab.active .tab-glass {
  fill: var(--gold);
  opacity: 0.35;
}
.bay-tab.active .tab-seam {
  stroke: rgba(255, 204, 0, 0.35);
}
.bay-tab.active .tab-wheel {
  fill: #0e0e0e;
  stroke: #ff2a2a;
}
.bay-tab.active .tab-wheel-hub {
  fill: var(--gold);
  opacity: 1;
}
.bay-tab.active .tab-accent,
.bay-tab.active .tab-dollar {
  fill: #ff2a2a;
  stroke: #ff2a2a;
  color: #ff2a2a;
}
.bay-tab.active .tab-report {
  stroke: var(--gold);
}
.bay-tab.active .tab-pm rect {
  fill: var(--gold);
}
.bay-tab.active .tab-pm path {
  stroke: #1b2a4a;
}

.bay-tab.tab-just-on .tab-van-svg,
.bay-tab.tab-drive-in .tab-van-svg {
  animation: tab-drive 0.55s var(--ease-out);
}

.bay-tab.tab-just-on .tab-wheel,
.bay-tab.tab-drive-in .tab-wheel {
  animation: wheel-spin 0.55s var(--ease-out);
  transform-box: fill-box;
  transform-origin: center;
}

/* Soft land on the whole tab chip */
.bay-tab.tab-land-pop {
  animation: tab-land 0.34s var(--ease-out);
}

/* PM package stays gold on active gold tab (see block above) */

.screen {
  display: none;
}

.screen.active {
  display: block;
  /* Directional slide/pop only ? permanent screen-in re-fired after JS cleared slide class */
  animation: none;
  /* Promote layer for smoother first paint after tab switch */
  transform: translateZ(0);
}

.sheet {
  background:
    linear-gradient(180deg, rgba(36, 54, 86, 0.98) 0%, rgba(27, 42, 74, 0.96) 38%, #121a2c 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  padding: 15px 14px 16px;
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(255, 42, 42, 0.12);
  border-top: 3px solid var(--red);
  position: relative;
  /* visible ? overflow:hidden + transformed cards = blank rows after scroll in TG */
  overflow: visible;
}

/* Soft gold sweep across sheets on first paint / focus */
.sheet-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  width: 35%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.06),
    transparent
  );
  pointer-events: none;
  opacity: 0; /* hidden until sweep; no fill-mode:both (TG recycle risk) */
  animation: sheet-shine 2.8s var(--ease-ui) 1.1s;
}

.sheet-head h1 {
  margin: 0 0 5px;
  font-family: var(--font-brand);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.05;
}

.sheet-head p {
  margin: 0 0 14px;
  color: var(--mute);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.filter-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  margin-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0 4px;
}
.filter-row::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 0 0 auto;
  min-height: 44px;
  border: 1px solid var(--line);
  background: rgba(28, 28, 30, 0.88);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  opacity: 1;
  transition: transform 0.18s var(--ease-bounce), background 0.18s ease,
    border-color 0.18s ease;
  /* No enter animation ? both+stagger left LLMR at opacity 0 after scroll */
}

.chip:active {
  transform: scale(0.94);
}

.chip.on {
  background: var(--pill-on-bg, var(--gold));
  border-color: var(--pill-on-border, var(--gold));
  color: var(--pill-on-fg, #0e0e0e);
  box-shadow: var(--pill-on-inset);
  filter: none;
}

.action-row {
  display: flex;
  gap: 8px;
  margin: 8px 0 12px;
}

.act {
  flex: 1;
  min-height: 48px;
  border: 1px solid var(--line);
  background: var(--grad-panel-soft), var(--panel);
  color: var(--ink);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-family: var(--font-tag);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.16s var(--ease-bounce);
}

.act:active {
  transform: scale(0.96);
}

.act:disabled {
  opacity: 0.4;
}

.act.primary {
  border-color: transparent;
  color: #fff;
  background: var(--grad-red);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 4px 14px rgba(255, 42, 42, 0.28);
}

.act.gold {
  position: relative;
  z-index: 0;
  background: var(--grad-gold);
  border-color: transparent;
  color: #0e0e0e;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
  filter: none;
}

.act.ghost {
  background: rgba(255, 204, 0, 0.05);
  border-color: rgba(255, 204, 0, 0.26);
  color: #ffdf80;
  box-shadow: none;
}
.act.ghost:active {
  background: rgba(255, 204, 0, 0.12);
}

.meta-line,
.pipe-bar {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--mute);
  margin-bottom: 10px;
  line-height: 1.4;
}

.pipe-bar {
  padding: 10px 12px 10px 16px;
  background: linear-gradient(90deg, rgba(255, 204, 0, 0.12), rgba(28, 28, 30, 0.9));
  border: 1px solid rgba(255, 204, 0, 0.28);
  border-radius: var(--r-md); /* all corners round ? no flat gold slab edge */
  color: var(--ink);
  position: relative;
  overflow: hidden;
  /* Long summaries wrap cleanly under board toolbar */
  word-break: break-word;
}

/* Rounded gold rail (not a square strip) */
.pipe-bar::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 9px;
  bottom: 9px;
  width: 4px;
  border-radius: 99px;
  background: var(--gold);
  box-shadow: 0 0 8px 2px rgba(255, 204, 0, 0.42);
  filter: none;
  pointer-events: none;
  z-index: 1;
}

.report-paper {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f5f5f7;
  color: #0e0e0e;
  border-radius: var(--r-sm);
  padding: 12px;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.45;
  max-height: 45vh;
  overflow: auto;
  min-height: 6rem;
  border: 2px solid var(--gold);
}
.report-hero {
  margin: 4px 0 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 204, 0, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 204, 0, 0.1), rgba(20, 28, 44, 0.55));
}
.report-hero-kicker {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}
.report-hero-total {
  margin-top: 4px;
  font-family: var(--font-tag, Khand, sans-serif);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.15;
}
.report-hero .pipe-bar {
  margin-top: 8px;
}
.report-custom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 204, 0, 0.18);
  background: linear-gradient(
    165deg,
    rgba(255, 204, 0, 0.06),
    rgba(16, 19, 26, 0.92) 42%
  );
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
.report-custom[hidden] {
  display: none !important;
}
.report-custom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.report-custom-title {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.report-custom-dismiss {
  border: 0;
  background: transparent;
  color: var(--mute);
  font-family: var(--font-ui, var(--font));
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.report-custom-dismiss:active {
  color: var(--ink);
}
.report-custom .date-preset-row,
.report-custom-presets,
.money-made-custom .date-preset-row {
  flex: 0 0 auto;
  margin: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 6px;
  padding-bottom: 2px;
}
.report-custom-presets .sort-chip {
  flex: 0 0 auto;
  white-space: nowrap;
}
.report-custom-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.report-date-lab {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute);
}
.report-date-lab .gomo-picker-btn {
  width: 100%;
  min-width: 0;
  font-size: 0.82rem;
  padding: 0 10px;
}
.report-custom-go {
  width: 100%;
  min-height: 46px;
}
.report-custom-go:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.report-date-lab input[type='date'].gomo-field {
  min-width: 0;
}
.report-sent {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--gold);
}
.report-omit {
  margin: 8px 0 10px;
  padding: 8px 2px 4px;
}
.report-omit-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 28vh;
  overflow: auto;
}
.report-omit-row {
  display: grid;
  grid-template-columns: 22px minmax(64px, auto) 1fr;
  gap: 8px;
  align-items: start;
  padding: 6px 4px;
  border-radius: 8px;
  font-size: 0.82rem;
}
.report-omit-row input {
  width: auto;
  margin-top: 3px;
}
.report-omit-lab {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--gold);
}
.report-omit-work {
  color: var(--mute);
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.report-fixable {
  margin: 4px 0 12px;
  padding: 8px 2px 4px;
}
.report-fixable-lead {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: var(--mute);
  line-height: 1.35;
}
.report-fixable-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 32vh;
  overflow: auto;
}
.report-fixable-row {
  display: grid;
  grid-template-columns: minmax(64px, auto) 1fr;
  gap: 4px 8px;
  padding: 8px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel, #1a1a1a) 88%, transparent);
  font-size: 0.82rem;
}
.report-fixable-lab {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--gold);
}
.report-fixable-work {
  grid-column: 1 / -1;
  color: var(--text, inherit);
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.report-fixable-acts {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.report-fixable-acts .act {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 0.78rem;
}
.report-work-input {
  min-height: 4.5rem;
  resize: vertical;
  width: 100%;
}
.report-line.report-dsp-head {
  margin-top: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold);
}
.report-line.report-title {
  font-weight: 700;
  font-size: 0.95rem;
}
.report-preview {
  margin: 0 0 8px;
  padding: 14px 14px 12px;
  border-radius: var(--r-md);
  border: 2px solid rgba(255, 204, 0, 0.45);
  background: #f4f5f7;
  color: #12141a;
  max-height: min(52vh, 520px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.report-line {
  font-size: 0.92rem;
  line-height: 1.4;
  margin: 0 0 2px;
}
.report-line.report-van {
  margin-top: 10px;
  font-family: var(--font-tag, Khand, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0e0e0e;
}
.report-line.report-van:first-child {
  margin-top: 0;
}
.report-gap {
  height: 8px;
}
.report-bullets {
  margin: 2px 0 6px;
  padding: 0 0 0 1.1rem;
}
.report-bullets li {
  margin: 2px 0;
  font-size: 0.88rem;
  line-height: 1.35;
  color: #22262f;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.report-preview strong {
  font-weight: 800;
  color: #0e0e0e;
}
.report-preview em {
  font-style: italic;
  color: #3a4050;
}
#report-empty {
  margin-top: 8px;
}

/* Van list cards */
.van-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* NO content-visibility ? blanks rows/headers after scroll in TG WebView */
}

/* Cap note under long board lists */
.list-cap-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--mute);
  text-align: center;
  padding: 10px 12px 18px;
  opacity: 0.9;
}

/* Van sheet PM segment */
.pm-banner {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(20, 24, 34, 0.9);
}
.pm-banner-title {
  font-weight: 800;
  font-size: 0.88rem;
  margin-bottom: 2px;
}
.pm-banner-sub {
  font-size: 0.72rem;
  color: var(--mute);
  line-height: 1.35;
}
.pm-banner-due {
  border-color: rgba(52, 199, 89, 0.45);
  background: rgba(52, 199, 89, 0.12);
}
.pm-banner-due .pm-banner-title {
  color: #8ef0b0;
}
.pm-banner-fail {
  border-color: rgba(255, 90, 90, 0.5);
  background: rgba(255, 42, 42, 0.12);
}
.pm-banner-fail .pm-banner-title {
  color: #ff9a9a;
}
.pm-banner-ok {
  border-color: rgba(120, 160, 220, 0.35);
  background: rgba(80, 120, 180, 0.1);
}
.pm-banner-wait {
  border-color: rgba(255, 204, 0, 0.35);
  background: rgba(255, 204, 0, 0.08);
}
.pm-banner-wait .pm-banner-title {
  color: var(--gold);
}
.pm-line-foss .svc-status {
  background: rgba(52, 199, 89, 0.18);
  color: #8ef0b0;
}
.pm-line-hermont .svc-status {
  background: rgba(140, 160, 200, 0.2);
  color: #c8d4ee;
}
.pm-stack {
  margin-top: 8px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gold);
}
.pm-meta {
  margin: 6px 2px 12px;
}
.pm-help {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.2);
}
.pm-help-h {
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 6px;
}
.pm-help-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.72rem;
  color: var(--mute);
  line-height: 1.45;
}
.pm-help-list li {
  margin: 3px 0;
}
.seg.seg-alert {
  border-color: rgba(52, 199, 89, 0.55) !important;
  color: #8ef0b0 !important;
  box-shadow: 0 0 0 1px rgba(52, 199, 89, 0.25);
}
.seg.seg-soft {
  border-color: rgba(140, 160, 200, 0.45) !important;
  color: #c8d4ee !important;
}

.van-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(145deg, rgba(40, 58, 92, 0.98) 0%, rgba(20, 30, 50, 0.98) 55%, rgba(16, 22, 36, 0.99) 100%);
  border-radius: var(--r-lg);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  min-height: 76px;
  color: inherit;
  font: inherit;
  box-shadow: var(--shadow-card);
  /* Always fully painted ? never opacity 0 / content-visibility */
  opacity: 1;
  visibility: visible;
  transition:
    transform 0.22s var(--ease-smooth),
    box-shadow 0.22s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

/* Enter: transform only ? opacity:0 + both left blank cards in TG after scroll */
.van-card.van-card-in {
  animation: card-enter 0.35s var(--ease-out);
}

.van-card:active {
  transform: scale(0.978);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.van-card .rail {
  width: 5px;
  flex-shrink: 0;
  background: var(--ok);
  box-shadow: 0 0 12px rgba(52, 199, 89, 0.4);
}

.van-card.hot .rail {
  background: var(--gold);
  border-radius: 99px;
  box-shadow: 0 0 8px 2px rgba(255, 204, 0, 0.42);
  filter: none;
}

.van-card.overdue .rail {
  background: var(--red);
  box-shadow: 0 0 8px rgba(255, 42, 42, 0.4);
}

.van-card .body {
  flex: 1;
  padding: 12px 10px 12px 13px;
  min-width: 0;
}

.van-card .label {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-wrap: wrap;
  max-width: 100%;
}
.van-card .label-name {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.van-card .pin-mark {
  flex: 0 0 auto;
  font-size: 0.72rem;
  line-height: 1;
  opacity: 0.9;
}

.van-card .svc {
  font-size: 0.74rem;
  color: var(--mute);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  max-width: 100%;
}

/* Payable PM board ? package tags, no empty clocks */
.van-card.pm-payable-card {
  min-height: 72px;
}
.van-card.pm-payable-card .body {
  padding: 11px 10px 11px 13px;
}
.pm-amazon-chip {
  flex: 0 0 auto;
  font-family: var(--font-tag);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 204, 0, 0.92);
  background: rgba(255, 204, 0, 0.12);
  border: 1px solid rgba(255, 204, 0, 0.32);
  border-radius: var(--r-tag);
  padding: 2px 6px;
  line-height: 1.2;
}
.van-card.overdue .pm-amazon-chip {
  color: #ff8a8a;
  background: rgba(255, 42, 42, 0.14);
  border-color: rgba(255, 42, 42, 0.4);
}
.pm-pkg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
  max-width: 100%;
}
.pm-pkg-tag {
  font-family: var(--font-tag);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: rgba(235, 235, 245, 0.92);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-tag);
  padding: 3px 8px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-pkg-tag.more {
  color: var(--mute);
  font-weight: 700;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.08);
}
.van-card.pm-payable-card .fee {
  font-size: 0.78rem;
  opacity: 0.9;
}

.van-card .clocks {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--mute);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.van-card .clocks .clk {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 48%;
}
.van-card .clocks .clk-dot {
  flex: 0 0 auto;
  opacity: 0.45;
}
.van-card .clocks .clk.muted {
  opacity: 0.55;
}

.van-card .clocks .late {
  color: var(--red);
  font-weight: 700;
}
.van-card .thin-badge {
  flex: 0 0 auto;
  font-family: var(--font-tag);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: var(--r-tag);
  border: 1px solid rgba(251, 146, 60, 0.35);
  color: #fdba74;
  background: rgba(251, 146, 60, 0.1);
}
.van-card .thin-badge.pat-mark {
  border-color: rgba(255, 204, 0, 0.4);
  color: var(--gold);
  background: rgba(255, 204, 0, 0.1);
}
.van-card .flag-chip {
  flex: 0 0 auto;
  font-family: var(--font-tag);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: var(--r-tag);
  line-height: 1.2;
}
.van-card .flag-chip.odo {
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.12);
}
.van-card .flag-chip.aipm {
  color: #86efac;
  border: 1px solid rgba(52, 211, 153, 0.4);
  background: rgba(16, 185, 129, 0.12);
}

.van-card .right {
  flex: 0 1 auto;
  flex-shrink: 0;
  max-width: 42%;
  min-width: 4.25rem;
  padding: 10px 12px 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}

.van-card .fee {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255, 204, 0, 0.25);
  transition: transform 0.2s var(--ease-bounce), text-shadow 0.2s ease;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.van-card .right-sub {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--mute);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.van-card:active .fee {
  transform: scale(1.06);
  text-shadow: 0 0 16px rgba(255, 204, 0, 0.55);
}

.van-card .pill {
  font-family: var(--font-tag);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: rgba(44, 44, 46, 0.9);
  color: var(--mute);
  border: 1px solid rgba(255, 255, 255, 0.06);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.van-card.overdue .pill {
  background: var(--red-soft);
  color: var(--red);
}

.van-card.hot .pill {
  background: var(--gold-soft);
  color: var(--gold);
}

.empty-row {
  padding: 28px 16px;
  text-align: center;
  color: var(--mute);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  font-size: 0.9rem;
}
.empty-row.list-error {
  border-color: rgba(255, 42, 42, 0.35);
  background: rgba(255, 42, 42, 0.08);
}
.empty-row .empty-title,
.empty-row > div > b {
  font-weight: 700;
  color: var(--ink);
}
.empty-row .empty-sub,
.empty-row .svc-left {
  font-size: 0.78rem;
  color: var(--mute);
  margin-top: 4px;
}

/* Van bottom sheet */
.van-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-van);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.van-sheet[hidden] {
  display: none !important;
}

.van-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  opacity: 1;
  transition: opacity var(--dur-med) var(--ease-out);
}

.van-sheet.dragging .van-sheet-backdrop,
.van-sheet.closing .van-sheet-backdrop {
  transition: none;
  will-change: opacity;
}

.van-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  /* Prefer TG stable viewport height (--tg-vh); shrink further when keyboard is up */
  max-height: min(
    92%,
    calc(var(--tg-vh, 100dvh) * 0.92 - var(--kb-inset, 0px))
  );
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Solid base + fixed-size cap ? height changes must not re-raster gradient (TG Android flash) */
  background-color: #101828;
  background-image: linear-gradient(
    180deg,
    #2a3d62 0%,
    var(--navy) 40%,
    #101828 100%
  );
  background-size: 100% 240px;
  background-repeat: no-repeat;
  background-position: top left;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 3px solid var(--gold);
  border-bottom: none;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 0 15px calc(14px + var(--safe-b) + var(--kb-inset, 0px));
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 204, 0, 0.06) inset;
  /* Own compositing layer ? child DOM swaps (seed?detail) must not re-raster */
  transform: translateZ(0);
  transition: transform var(--dur-med) var(--ease-sheet, var(--ease-out));
  /* Allow vertical scroll; pull-to-dismiss from handle or scroll-top */
  touch-action: pan-y;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.van-sheet.dragging .van-sheet-panel {
  transition: none;
  will-change: transform;
}

/* Open path: animation owns transform (see sheet-spring); kill transition fight */
.van-sheet.sheet-pop .van-sheet-panel,
.van-sheet.opening .van-sheet-panel {
  transition: none;
}

.van-sheet.closing .van-sheet-panel {
  transition: transform var(--sheet-close-ms) var(--ease-in);
  will-change: transform;
}

.van-sheet-handle {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 0 14px;
  margin: 0 -15px;
  padding-left: 15px;
  padding-right: 15px;
  /* Seamless with panel top — theme-aware (no hardcoded dark bar on light) */
  background: linear-gradient(
    180deg,
    var(--van-handle-top, #2a3d62) 0%,
    var(--van-handle-mid, rgba(42, 61, 98, 0.97)) 42%,
    var(--van-handle-fade, rgba(42, 61, 98, 0.55)) 72%,
    transparent 100%
  );
  border: none;
  box-shadow: none;
  /* No backdrop-filter ? blanks sticky content in TG Android WebView */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.van-sheet-handle:active {
  cursor: grabbing;
}

.van-sheet-grab {
  width: 48px;
  height: 5px;
  background: var(--gold);
  opacity: 0.9;
  border-radius: 99px;
  margin: 0 auto;
  box-shadow: none;
  filter: var(--pill-glow-gold-soft);
}

.van-hero {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  align-items: flex-start;
}

.van-tag {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  line-height: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.van-sub {
  color: var(--mute);
  font-size: 0.8rem;
  margin-top: 3px;
  line-height: 1.35;
}

.van-odo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
  min-width: 0;
  max-width: 100%;
  /* Keep odo + Set km as a tight group ? do not stretch the row full-width
     or the pill floats mid-hero ("middle of nowhere"). */
  width: fit-content;
  row-gap: 6px;
}
/* Text-height gold chip ? matches odo line rhythm; ::after expands hit target */
.btn-set-odo {
  appearance: none;
  position: relative;
  border: 1px solid rgba(255, 204, 0, 0.3);
  background: rgba(255, 204, 0, 0.08);
  color: var(--gold);
  font: inherit;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  min-height: 28px;
  height: auto;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  cursor: pointer;
  flex: 0 0 auto;
  line-height: 1.2;
  white-space: nowrap;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s var(--ease-bounce), background 0.18s ease,
    border-color 0.18s ease, color 0.15s ease, box-shadow 0.2s ease;
}
.btn-set-odo::after {
  content: '';
  position: absolute;
  /* Expand hit target to ≥44px without growing the visual chip further */
  inset: -8px -10px;
  min-height: 44px;
}
.btn-set-odo:active {
  transform: scale(0.94);
}
.btn-set-odo.need-km {
  border-color: rgba(255, 204, 0, 0.55);
  background: rgba(255, 204, 0, 0.16);
  color: var(--gold-hi);
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.22);
}
.btn-set-odo:disabled {
  opacity: 0.55;
  cursor: wait;
  box-shadow: none;
}

/* Bay km dialog (Telegram WebView cannot use window.prompt) */
.bay-odo-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-bay);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  padding-bottom: max(
    12px,
    env(safe-area-inset-bottom, 0px),
    var(--kb-inset, 0px)
  );
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(0, 0, 0, 0.68);
  /* No heavy blur in TG ? can blank sheet behind */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.bay-odo-modal[hidden] {
  display: none !important;
}
.bay-odo-card {
  width: min(400px, 100%);
  max-height: min(85vh, calc(100dvh - 24px - var(--kb-inset, 0px)));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, #1a2030 0%, #121820 100%);
  border: 1px solid rgba(255, 204, 0, 0.28);
  border-radius: var(--r-lg) 18px 14px 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Transform-only ? no fill-mode both / opacity:0 (TG blank risk) */
  animation: bay-odo-up 0.2s var(--ease-out, ease-out);
}
@keyframes bay-odo-up {
  from {
    transform: translateY(14px);
  }
  to {
    transform: none;
  }
}
.bay-odo-card h3 {
  margin: 0;
  font-family: var(--font-brand, var(--font));
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink, #e8eef7);
}
.bay-odo-lead {
  margin: 0 0 2px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--mute, #9aa6b8);
}
.bay-odo-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute, #9aa6b8);
  margin-top: 4px;
}
.bay-odo-input {
  font-family: var(--mono, ui-monospace, monospace) !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  padding: 12px 14px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid rgba(255, 204, 0, 0.28) !important;
  background: rgba(0, 0, 0, 0.35) !important;
  color: var(--gold) !important;
}
.bay-odo-input:focus {
  outline: none;
  border-color: rgba(255, 204, 0, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.14);
}
.bay-odo-hint {
  min-height: 1.1em;
  margin: 0;
  font-size: 0.75rem;
  color: #fca5a5;
}
.bay-odo-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.bay-odo-actions .act {
  flex: 1;
  min-height: 46px;
  margin: 0;
}

.bay-confirm-bullets {
  margin: 4px 0 2px;
  padding: 0 0 0 1.1em;
  list-style: disc;
}
.bay-confirm-bullets[hidden] {
  display: none !important;
}
.bay-confirm-bullets li {
  margin: 0 0 5px;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(235, 235, 245, 0.88);
}
.bay-confirm-bullets li:last-child {
  margin-bottom: 0;
}

.van-odo {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--gold);
  margin-top: 0; /* flex row with Set km ? no extra top push */
  font-weight: 700;
  min-width: 0;
  /* Content-sized so Set km sits beside the reading, not full-row far right */
  flex: 0 1 auto;
  max-width: min(100%, 14rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}
.van-odo .odo-src {
  color: var(--mute);
  font-weight: 600;
  font-size: 0.7rem;
}
.van-hero-left {
  min-width: 0;
  flex: 1 1 auto;
}

.van-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}

.van-hero-top-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.van-side-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.van-fee {
  font-family: var(--mono);
  font-weight: 900;
  font-size: clamp(1rem, 4.5vw, 1.45rem);
  color: var(--gold);
  text-align: right;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Compact hero pills — chat / task / follow-ups match */
.icon-btn.van-chat-btn,
.icon-btn.van-remind-btn,
.icon-btn.van-note-btn,
.van-chat-btn,
.van-remind-btn,
.van-note-btn {
  position: relative;
  align-self: flex-end;
  min-width: 32px;
  min-height: 32px;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--mute, #9aa3b5);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(20, 24, 34, 0.85);
  box-shadow: none;
}

.van-chat-btn {
  color: var(--gold);
}

.van-chat-btn svg,
.van-remind-btn svg,
.van-note-btn svg {
  width: 16px;
  height: 16px;
}

.van-note-btn.has-notes,
.van-remind-btn.has-reminders {
  color: var(--gold);
  border-color: rgba(255, 204, 0, 0.45);
  background: rgba(255, 204, 0, 0.12);
}
.van-note-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: #0e0e0e;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}
.van-note-badge[hidden] {
  display: none !important;
}
.bay-note-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
}
.bay-note-sheet-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bay-note-sheet-open {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 14, 22, 0.45);
  color: var(--ink, #f2f4f8);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.bay-note-sheet-open .t {
  display: block;
  font-family: var(--font-tag, Khand, sans-serif);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bay-note-sheet-open .m {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute, #9aa3b5);
}
.bay-note-sheet-done {
  flex-shrink: 0;
  margin: 0;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(52, 199, 89, 0.35);
  background: rgba(52, 199, 89, 0.12);
  color: #5dde7a;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.brand-chips {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  margin-top: 2px;
  flex-wrap: wrap;
}

.brand-chip {
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--mute);
}

.brand-chip.hermont {
  border-color: #e85d04;
  color: #ffb070;
  background: rgba(232, 93, 4, 0.16);
}

.brand-chip.gomo {
  font-family: var(--font-brand);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-color: var(--gold);
  color: var(--gold);
  background: linear-gradient(135deg, rgba(255, 204, 0, 0.2), rgba(255, 204, 0, 0.06));
}

.van-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
}

.flag {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--panel2);
  color: var(--ink);
  border: 1px solid var(--line);
}

.flag.overdue {
  background: var(--red-soft);
  color: #ff6b6b;
  border-color: rgba(255, 42, 42, 0.4);
}

.flag.soon,
.flag.hot {
  background: var(--gold-soft);
  color: var(--gold);
  border-color: rgba(255, 204, 0, 0.35);
}

/* FOSS Validate yellow ? get correct odo from DSP key / van */
.flag.odo-yellow {
  background: rgba(255, 196, 0, 0.18);
  color: #ffd54a;
  border-color: rgba(255, 196, 0, 0.55);
  font-weight: 800;
}

.dual-clock {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.dual-clock .clk {
  background: rgba(14, 14, 14, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  padding: 10px 11px;
  position: relative;
  overflow: hidden;
}

.dual-clock .clk.shop {
  border-top: 2px solid var(--red);
}

.dual-clock .clk.pat {
  border-top: 2px solid var(--gold);
}

.clk-title {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 4px;
}

.clk-val {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ink);
}

.clk-val.late {
  color: var(--red);
}

.clk-st {
  font-size: 0.72rem;
  color: var(--mute);
  margin-top: 3px;
}

/* Sections inside van sheet */
.van-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vsec {
  background: rgba(14, 14, 14, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-md);
  padding: 10px 11px;
}

/* Pattern OS ? compact + Task next to Next pull / While-it's-here meta */
.visit-plan-next {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  margin: 4px 0 2px;
}
.bundle-list .bundle-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.bundle-list .bundle-line .svc-name {
  flex: 1 1 auto;
  min-width: 0;
}
.bundle-list .bundle-line .svc-meta {
  flex: 0 1 auto;
}
.pattern-task-btn {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 1px 5px;
  min-height: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #ffdf80;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-transform: none;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.9;
}
.pattern-task-btn:active {
  opacity: 1;
  background: rgba(255, 204, 0, 0.1);
}
html[data-theme='light'] .pattern-task-btn {
  color: #9a6b00;
}

/* Cold-open seed: hold near-final height so detail paint does not grow the sheet */
.vsec.seed-loading {
  min-height: calc(var(--tg-vh, 100dvh) * 0.5);
}
.seed-wait {
  min-height: 132px;
  opacity: 0.78;
}
.seed-skel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.seed-skel-row {
  height: 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}
.seed-skel-row.short {
  width: 62%;
}
.seed-skel-row::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  animation: shimmer 1.4s ease-in-out infinite;
}
html[data-theme='light'] .seed-skel-row {
  background: rgba(18, 20, 26, 0.06);
}
html[data-theme='light'] .seed-skel-row::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(18, 20, 26, 0.08) 50%,
    transparent 100%
  );
}
@media (prefers-reduced-motion: reduce) {
  .seed-skel-row::after {
    animation: none !important;
  }
}

.vsec-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.vsec-title {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: transparent;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
}

.vsec-sub {
  font-size: 0.68rem;
  color: var(--mute);
}

.van-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.van-lines li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  background: rgba(28, 28, 30, 0.55);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Plan/Due rows: top row (label+status | fee) then last-service meta */
.van-lines li.svc-line {
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}
.svc-line-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
.svc-last-meta {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--mute);
  line-height: 1.3;
  margin: 0;
}
.svc-positions {
  list-style: none;
  margin: 6px 0 0;
  padding: 0 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 2px solid var(--border, rgba(255, 255, 255, 0.08));
}
.svc-pos {
  display: grid;
  grid-template-columns: minmax(52px, auto) auto 1fr;
  align-items: center;
  gap: 6px 8px;
  font-size: 0.7rem;
  line-height: 1.25;
}
.svc-pos-name {
  font-weight: 700;
  color: var(--text, #e8e8e8);
}
.svc-pos .svc-status {
  font-size: 0.58rem;
}
.svc-pos-meta {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--mute);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.svc-status.st-partial {
  color: var(--gold, #d4a017);
  background: rgba(212, 160, 23, 0.12);
}
.svc-line.svc-partial .svc-last-meta {
  color: var(--gold, #d4a017);
}
.svc-line.svc-ok-compact {
  padding-top: 7px;
  padding-bottom: 7px;
  opacity: 0.88;
}
.svc-line.svc-ok-compact .svc-status {
  font-size: 0.58rem;
}

.van-lines li.svc-line.tappable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.van-lines li.svc-line.tappable:active {
  transform: scale(0.99);
}

.van-lines li.svc-line.on {
  border-color: rgba(255, 204, 0, 0.55);
  background: linear-gradient(
    135deg,
    rgba(255, 204, 0, 0.12),
    rgba(28, 28, 30, 0.75)
  );
  box-shadow:
    0 0 0 1px rgba(255, 204, 0, 0.12) inset,
    0 0 12px rgba(255, 204, 0, 0.12);
}

.van-lines li strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.svc-line-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}

/* Compact status chip ? no interval / ?last ?? noise (rings own that) */
.svc-status {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--mute);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.svc-status.st-overdue {
  color: #ff6b6b;
  background: var(--red-soft);
  border-color: rgba(255, 42, 42, 0.35);
}

.svc-status.st-soon {
  color: var(--gold);
  background: var(--gold-soft);
  border-color: rgba(255, 204, 0, 0.35);
}

.svc-status.st-ok {
  color: var(--ok);
  background: rgba(52, 199, 89, 0.12);
  border-color: rgba(52, 199, 89, 0.3);
}

.svc-left {
  display: block;
  font-size: 0.75rem;
  color: var(--mute);
  margin-top: 2px;
}

.svc-clocks {
  display: block;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--mute);
  margin-top: 3px;
}

.svc-fee {
  font-family: var(--mono);
  font-weight: 800;
  color: var(--gold);
  font-size: 0.95rem;
  white-space: nowrap;
}

.job-row,
.net-row,
.note-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.8rem;
}

.job-row:last-child,
.net-row:last-child,
.note-row:last-child {
  border-bottom: none;
}

/* Hermont brand-ish orange (not blue) for Last in shop / WO cards */
:root {
  --hermont: #e85d04;
  --hermont-soft: rgba(232, 93, 4, 0.16);
  --hermont-line: rgba(232, 93, 4, 0.45);
  --hermont-text: #ffb070;
}

/* Last in shop ? boxed cards; whole row opens Hermont */
.job-cards .job-card {
  align-items: flex-start;
  border-left: 3px solid var(--hermont);
  background: rgba(28, 28, 30, 0.65);
  border-color: rgba(255, 255, 255, 0.05);
  border-left-color: var(--hermont);
}

.job-cards .job-card-open {
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}

.job-cards .job-card-open:active {
  background: var(--hermont-soft);
  border-color: var(--hermont-line);
  transform: scale(0.99);
}

/* Legacy .job-cards layout only ? do not apply to .job-cards-wrap
   or Move/Delete/Copy # buttons stay untappable. */
.job-cards .job-card-main {
  flex: 1;
  min-width: 0;
  pointer-events: none; /* clicks go to the card */
}

.job-cards .job-card-side {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.job-num {
  font-family: var(--mono);
  font-weight: 800;
  color: var(--hermont-text);
  letter-spacing: 0.02em;
}

.job-work {
  display: block;
  font-size: 0.82rem;
  color: var(--ink);
  margin-top: 4px;
  line-height: 1.35;
  word-break: break-word;
}

.job-chev {
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--hermont);
  line-height: 1;
  padding: 4px 2px 0 8px;
}

.job-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--hermont-text);
  text-decoration: underline;
  cursor: pointer;
}

/* Quiet tappable VIN (no coach labels) */
.van-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  line-height: 1.45;
}

.van-meta-bit {
  color: var(--mute);
}

.van-meta-sep {
  color: var(--mute);
  opacity: 0.7;
  margin: 0 2px;
}

.vin-copy {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--gold);
  font-family: var(--mono);
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
}

.vin-copy:active {
  opacity: 0.75;
}

/* Odo: show "km" for reading; tap copies digits only */
.van-odo.odo-copy {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.van-odo.odo-copy:active {
  opacity: 0.8;
}

.van-odo .odo-num {
  color: var(--gold);
  font-weight: 800;
}

.van-odo .odo-unit,
.van-odo .odo-src {
  color: var(--mute);
  font-weight: 600;
}

/* Network history search */
.net-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.net-search {
  margin: 0;
}

/* Icon-only Pull AI history ? sits with Net chips + search */
.filter-search-btn.net-pull-ai {
  flex: 0 0 auto;
  color: var(--gold);
  border-color: rgba(255, 204, 0, 0.35);
  background: rgba(255, 204, 0, 0.1);
}
.filter-search-btn.net-pull-ai:disabled,
.filter-search-btn.net-pull-ai.is-busy {
  opacity: 0.55;
  cursor: wait;
}
.filter-search-btn.net-pull-ai.is-busy svg {
  animation: net-pull-spin 0.9s linear infinite;
}
@keyframes net-pull-spin {
  to {
    transform: rotate(360deg);
  }
}

.net-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}

.net-chip {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 44px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(14, 14, 14, 0.45);
  color: var(--mute);
  font-family: var(--font-tag);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.net-chip.on {
  background: var(--pill-on-bg, var(--gold));
  border-color: var(--pill-on-border, var(--gold));
  color: var(--pill-on-fg, #0e0e0e);
  box-shadow: var(--pill-on-inset);
  filter: none;
}

.net-count {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--mute);
}

.net-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* One scroll owner = van sheet panel ? no nested 48vh fight on phone */
  max-height: none;
  overflow: visible;
}

.net-card {
  padding: 7px 10px;
  background: rgba(28, 28, 30, 0.55);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 3px solid rgba(255, 204, 0, 0.45);
}

.net-card-title {
  display: block;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.net-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

.net-meta-when {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--mute);
}

.net-badge {
  font-family: var(--font-tag);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--mute);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.net-qty {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.net-card-km {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--mute);
  line-height: 1.35;
}

.net-day-head {
  font-family: var(--font-tag);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 10px 2px 4px;
  opacity: 0.95;
  line-height: 1.3;
}

.net-day-head:first-child {
  margin-top: 2px;
}

.note-row.priority {
  border-left: 3px solid var(--red);
  padding-left: 8px;
}

/* Floor shop notes ? single-row strip: text left, Done right */
.floor-note-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.floor-note-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 52px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: rgba(14, 14, 14, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.floor-note-rail {
  width: 4px;
  flex-shrink: 0;
  background: var(--red);
  box-shadow: 0 0 8px rgba(255, 42, 42, 0.35);
}

.floor-note-row.hot .floor-note-rail {
  background: var(--red);
  box-shadow: 0 0 12px rgba(255, 42, 42, 0.55);
}

/* Idle layout: [ body text | ? | ?? ] */
.floor-note-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 10px;
}

.floor-note-main[hidden] {
  display: none !important;
}

.floor-note-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.floor-note-van {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.floor-note-text {
  font-size: 0.8rem;
  color: var(--mute);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.floor-note-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Icon buttons ? tick = done, trash = delete */
.note-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(28, 28, 30, 0.9);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.note-icon svg {
  display: block;
}

.note-icon:active {
  transform: scale(0.94);
}

.note-icon:disabled {
  opacity: 0.4;
  cursor: default;
}

.note-icon.done {
  border-color: rgba(52, 199, 89, 0.45);
  color: var(--ok);
  background: rgba(52, 199, 89, 0.12);
}

.note-icon.delete {
  border-color: rgba(255, 42, 42, 0.4);
  color: #ff6b6b;
  background: rgba(255, 42, 42, 0.1);
}

/* Confirm: prompt label + Yes | Cancel */
.floor-note-confirm {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
}

.floor-note-confirm[hidden] {
  display: none !important;
}

.floor-note-confirm-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mute);
  letter-spacing: 0.02em;
}

.floor-note-confirm .note-btn {
  flex: 0 0 28%;
  min-width: 4.2rem;
  min-height: 100%;
  border-radius: 0;
  border: none;
  font-size: 0.78rem;
}

.floor-note-confirm .note-btn.yes {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.note-btn {
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
}

.note-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.note-btn.yes {
  border-color: transparent;
  background: var(--ok);
  color: #0e0e0e;
}

.floor-note-row.confirm-delete .note-btn.yes {
  background: var(--red);
  color: #fff;
}

.note-btn.cancel {
  border-color: transparent;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
}

.floor-note-row.confirming {
  border-color: rgba(255, 204, 0, 0.35);
}

.floor-note-row.confirm-delete.confirming {
  border-color: rgba(255, 42, 42, 0.4);
}

/* leaving animation defined in motion system (note-leave) */

/* Floor tire stock ? brand + counts */
.floor-tire-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.floor-tire-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: rgba(14, 14, 14, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.floor-tire-row.low {
  border-color: rgba(255, 42, 42, 0.35);
}

.floor-tire-name {
  font-size: 0.82rem;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floor-tire-qty {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 0.75rem;
  color: var(--gold);
  white-space: nowrap;
}

.floor-tire-row.low .floor-tire-qty {
  color: #ff6b6b;
}

.foss-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 4px 0 0;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 204, 0, 0.3);
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.foss-chip:active {
  box-shadow: none;
}

.conflict-banner {
  background: rgba(255, 42, 42, 0.12);
  border: 1px solid rgba(255, 42, 42, 0.35);
  color: #ffb4b4;
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 0.78rem;
  margin-bottom: 10px;
}

.plan-jobs-honesty-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 204, 0, 0.28);
  background: rgba(255, 204, 0, 0.08);
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
}
.plan-jobs-honesty-banner p {
  flex: 1 1 12rem;
  margin: 0;
}
.plan-jobs-log-btn {
  flex: 0 0 auto;
  min-height: 36px !important;
}

.job-draft-block.is-collapsed .job-draft-chips,
.job-draft-block.is-collapsed .job-draft-cats,
.job-draft-block.is-collapsed .job-draft-presets,
.job-draft-block.is-collapsed .job-draft-text,
.job-draft-block.is-collapsed .job-draft-date,
.job-draft-block.is-collapsed .job-draft-actions {
  display: none !important;
}
.job-draft-block.is-collapsed .vsec-sub::after {
  content: ' \2014 tap Log job to expand';
  opacity: 0.65;
  font-weight: 500;
}

.van-meta {
  font-size: 0.78rem;
  color: var(--mute);
  margin: 10px 0;
  line-height: 1.4;
}

.van-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 4px;
  align-items: stretch;
}

/* Action bar fills full width ? no Close; drag handle / backdrop / back still dismiss */
.van-actions .act {
  flex: 1 1 0;
  min-width: 0;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 0.82rem;
}

.van-actions .act[style*='display: none'],
.van-actions .act.is-hidden {
  display: none !important;
}

/* Action island ? in-flow Save/Cancel row (never sticky / never floats over UI) */
.action-island,
.sticky-actions {
  position: static;
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 12px 0 4px;
  padding: 10px 12px;
  border-radius: var(--r-md, 14px);
  border: 1px solid rgba(255, 204, 0, 0.22);
  background: linear-gradient(
    180deg,
    rgba(22, 28, 42, 0.98) 0%,
    rgba(14, 18, 28, 0.98) 100%
  );
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: auto;
}
.action-island .act,
.sticky-actions .act {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
}
.action-island .job-draft-save,
.sticky-actions .job-draft-save {
  flex: 1 1 auto;
  min-height: 44px;
}

/* Job draft lives inside the vsec card ? island stays in flow */
.van-sheet-panel .job-draft-block.vsec {
  overflow: visible;
}

html[data-theme='light'] .action-island,
html[data-theme='light'] .sticky-actions {
  background: linear-gradient(180deg, #f7f8fb 0%, #eef1f7 100%);
  border-color: rgba(18, 20, 26, 0.12);
  box-shadow:
    0 3px 10px rgba(18, 20, 26, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.van-hint {
  margin: 10px 0 4px;
  font-size: 0.68rem;
  color: var(--mute);
  text-align: center;
  opacity: 0.85;
}

/* Toast / gate / loading — role=status lives in HTML; keep toast-in animation intact */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--safe-b) + var(--walk-pad, 0px));
  transform: translateX(-50%) translateY(0);
  /* Above bay-odo (300) and stock sheet ? toasts must stay visible in dialogs */
  z-index: var(--z-toast);
  background: var(--grad-panel-soft), var(--panel2);
  border: 1px solid var(--gold);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  max-width: 90%;
  animation: toast-in 0.28s var(--ease-out);
}

.toast.ok {
  border-color: var(--ok);
  background:
    linear-gradient(180deg, rgba(52, 199, 89, 0.08), transparent 55%),
    var(--panel2);
}

.toast.err {
  border-color: var(--red);
  background:
    linear-gradient(180deg, rgba(255, 42, 42, 0.08), transparent 55%),
    var(--panel2);
}

.toast.out {
  animation: toast-out var(--dur-fast) var(--ease-in) forwards;
}

.toast[hidden] {
  display: none !important;
}

.toast.has-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
}

.toast-msg {
  flex: 1;
  min-width: 0;
}

.toast-action {
  flex-shrink: 0;
  border: 1px solid var(--gold);
  background: rgba(255, 204, 0, 0.12);
  color: #ffe066;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.toast.ok .toast-action {
  border-color: var(--ok);
  color: #b8f0c8;
  background: rgba(80, 200, 120, 0.12);
}

.toast.err .toast-action {
  border-color: var(--red);
}

/*
 * Locked gate (browser / no Telegram initData).
 * Solid + extreme blur so shop UI never peeks through.
 */
.gate {
  position: fixed;
  inset: 0;
  z-index: var(--z-gate);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Opaque wall ? not a light tint */
  background: #050505;
}

.gate-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255, 204, 0, 0.08), transparent 55%),
    #050505;
  /* No backdrop-filter ? 48px blur stutters hard on Android WebView GPUs */
  pointer-events: none;
}

/* Welcome theater — full-bleed gold/dark stage (browser landing) */
.gate.gate-stage .gate-scrim {
  background:
    radial-gradient(ellipse 90% 60% at 50% 18%, rgba(255, 204, 0, 0.14), transparent 58%),
    radial-gradient(ellipse 55% 40% at 80% 85%, rgba(255, 42, 42, 0.06), transparent 50%),
    #050505;
}

.gate-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.gate-orb {
  position: absolute;
  left: 50%;
  top: 28%;
  width: min(72vw, 420px);
  height: min(72vw, 420px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 224, 102, 0.22) 0%,
    rgba(255, 204, 0, 0.1) 35%,
    transparent 68%
  );
  filter: none;
  opacity: 0.85;
}

.gate-drift {
  position: absolute;
  inset: -20%;
  background:
    repeating-linear-gradient(
      -18deg,
      transparent 0,
      transparent 38px,
      rgba(255, 204, 0, 0.03) 38px,
      rgba(255, 204, 0, 0.03) 39px
    );
  opacity: 0.55;
}

body.app-locked .gate.gate-stage .gate-orb,
body.app-locked .gate.gate-stage.gate-anim .gate-orb {
  animation: gate-orb-breathe 5.5s ease-in-out infinite;
}

body.app-locked .gate.gate-stage .gate-drift,
body.app-locked .gate.gate-stage.gate-anim .gate-drift {
  animation: gate-drift-slide 18s linear infinite;
}

@keyframes gate-orb-breathe {
  0%,
  100% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.92);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@keyframes gate-drift-slide {
  from {
    transform: translate3d(-4%, 2%, 0);
  }
  to {
    transform: translate3d(4%, -2%, 0);
  }
}

.gate[hidden] {
  display: none !important;
}

/* When locked: obliterate board content (even if DOM still has shell UI) */
body.app-locked #app > *:not(#gate):not(#toast) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  /* No filter: blur ? whole-tree blur is a GPU tax on Android */
  user-select: none !important;
}

body.app-locked {
  overflow: hidden;
  background: #050505;
}

body.app-locked .bg-glow,
body.app-locked .bg-grid {
  animation: none !important;
}

.gate-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(165deg, #243656 0%, #152238 100%);
  border: 1px solid rgba(255, 204, 0, 0.28);
  border-top: 3px solid var(--gold);
  border-radius: var(--r-lg);
  padding: 28px 22px;
  text-align: center;
  max-width: 340px;
  width: 100%;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.gate-logo {
  margin: 0 auto 10px;
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
}

.gate-hint {
  margin: 10px 0 14px !important;
  max-width: 18rem;
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--mute) !important;
  text-align: center;
  opacity: 0.95;
}
.live-only-off {
  opacity: 0.55;
}
.live-only-strip {
  margin: 0 12px 8px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 196, 0, 0.32);
  border-radius: var(--r-sm);
  background: rgba(255, 196, 0, 0.1);
  color: #ffd54a;
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
}
.live-only-strip[hidden] {
  display: none !important;
}
.sense-pull-live-hint {
  margin: 0 0 8px;
  font-size: 0.78rem;
}

.gate-legal {
  margin: 2px 0 0 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute) !important;
  opacity: 0.9;
}

.gate-card h2 {
  margin: 8px 0;
  color: var(--ink);
}

.gate-card p {
  margin: 0;
  color: var(--mute);
  font-size: 0.9rem;
  line-height: 1.45;
}

.gate-card p b {
  color: var(--gold);
  font-weight: 800;
}

/* Landing: logo + legal + one big DSP Portal button */
.gate-card-landing {
  max-width: 360px;
  padding: 32px 24px 28px;
}

/* Open glass plate on full-bleed stage (not heavy navy box) */
.gate.gate-stage .gate-card-landing {
  max-width: min(400px, 92vw);
  padding: 40px 28px 32px;
  background: linear-gradient(
    165deg,
    rgba(28, 32, 44, 0.55) 0%,
    rgba(12, 12, 14, 0.72) 100%
  );
  border: 1px solid rgba(255, 204, 0, 0.18);
  border-top: 2px solid rgba(255, 204, 0, 0.72);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 48px rgba(255, 204, 0, 0.06);
  animation: none;
}

.gate.gate-stage .gate-brand-logo {
  height: 76px;
  max-width: min(320px, 84vw);
}

.gate.gate-stage .gate-legal {
  margin-top: 14px !important;
  letter-spacing: 0.14em;
  font-family: var(--font-brand), var(--font), system-ui, sans-serif;
  font-weight: 600;
  color: rgba(255, 224, 102, 0.78) !important;
}

.gate.gate-stage.gate-anim .gate-logo {
  animation: gate-logo-in 0.7s var(--ease-out) both;
}

.gate.gate-stage.gate-anim .gate-legal {
  animation: gate-legal-in 0.5s 0.18s var(--ease-out) both;
}

.gate.gate-stage.gate-anim .gate-dsp-btn {
  animation: gate-cta-in 0.55s 0.32s var(--ease-spring) both;
}

.gate.gate-stage.gate-anim .gate-logo .gate-brand-logo,
.gate.gate-stage.gate-anim .gate-brand-logo {
  animation: gate-logo-glow 3.2s 0.9s ease-in-out infinite;
}

@keyframes gate-logo-in {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes gate-legal-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 0.9;
    transform: translateY(0);
  }
}

@keyframes gate-cta-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    box-shadow: 0 0 0 rgba(255, 204, 0, 0);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow:
      0 8px 24px rgba(255, 204, 0, 0.28),
      0 1px 0 rgba(255, 255, 255, 0.35) inset;
  }
}

@keyframes gate-logo-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(255, 204, 0, 0.18));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(255, 204, 0, 0.45));
  }
}

.gate-dsp-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 22px auto 0;
  width: 100%;
  min-height: 56px;
  padding: 16px 22px;
  border-radius: var(--r-md);
  border: none;
  overflow: hidden;
  background: var(--grad-gold);
  color: #1a1a1c !important;
  font-family: var(--font-brand), var(--font), system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none !important;
  box-shadow:
    0 8px 24px rgba(255, 204, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.35) inset;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
  cursor: pointer;
}

.gate.gate-stage .gate-dsp-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  pointer-events: none;
}

.gate.gate-stage.gate-anim .gate-dsp-btn::after {
  animation: gate-cta-shimmer 3.6s 1.1s ease-in-out infinite;
}

@keyframes gate-cta-shimmer {
  0%,
  55% {
    transform: translateX(-120%);
  }
  85%,
  100% {
    transform: translateX(120%);
  }
}

@media (hover: hover) and (pointer: fine) {
  .gate-dsp-btn:hover {
    filter: brightness(1.05);
    box-shadow:
      0 10px 28px rgba(255, 204, 0, 0.38),
      0 1px 0 rgba(255, 255, 255, 0.4) inset;
    transform: translateY(-1px);
  }
  .gate.gate-stage .gate-dsp-btn:hover {
    filter: brightness(1.08);
    box-shadow:
      0 12px 36px rgba(255, 204, 0, 0.5),
      0 0 40px rgba(255, 204, 0, 0.22),
      0 1px 0 rgba(255, 255, 255, 0.45) inset;
  }
}

.gate-dsp-btn:active {
  transform: translateY(1px);
}

/* Chill / OS reduce-motion: static landing, no ambient loops */
body.motion-chill .gate.gate-stage .gate-orb,
body.motion-chill .gate.gate-stage .gate-drift,
body.motion-chill .gate.gate-stage.gate-anim .gate-orb,
body.motion-chill .gate.gate-stage.gate-anim .gate-drift,
body.motion-chill .gate.gate-stage.gate-anim .gate-logo,
body.motion-chill .gate.gate-stage.gate-anim .gate-legal,
body.motion-chill .gate.gate-stage.gate-anim .gate-dsp-btn,
body.motion-chill .gate.gate-stage.gate-anim .gate-brand-logo,
body.motion-chill .gate.gate-stage.gate-anim .gate-dsp-btn::after {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.motion-max) .gate.gate-stage .gate-orb,
  body:not(.motion-max) .gate.gate-stage .gate-drift,
  body:not(.motion-max) .gate.gate-stage.gate-anim .gate-orb,
  body:not(.motion-max) .gate.gate-stage.gate-anim .gate-drift,
  body:not(.motion-max) .gate.gate-stage.gate-anim .gate-logo,
  body:not(.motion-max) .gate.gate-stage.gate-anim .gate-legal,
  body:not(.motion-max) .gate.gate-stage.gate-anim .gate-dsp-btn,
  body:not(.motion-max) .gate.gate-stage.gate-anim .gate-brand-logo,
  body:not(.motion-max) .gate.gate-stage.gate-anim .gate-dsp-btn::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

.gate-card .err {
  color: var(--red);
  font-size: 0.8rem;
  margin-top: 12px;
  min-height: 0;
}

.gate-card .err:not([hidden]):empty {
  display: none;
}

.visually-hidden,
.stock-kind-select.visually-hidden,
select.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  appearance: none;
  pointer-events: none;
}

/* Loading: centered spinning tire + label (no rings, no progress bar) */
.loading {
  position: fixed;
  inset: 0;
  /* Below scanner/compare (250+) so hard loader never blanks those overlays */
  z-index: 200;
  background: rgba(5, 5, 8, 0.62);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Hard loader above van/stock sheets when a sheet is open (soft preferred in JS) */
body.sheet-open .loading:not([hidden]),
body.help-open .loading:not([hidden]),
body.nested-modal-open .loading:not([hidden]) {
  z-index: calc(var(--z-bay, 300) + 10);
}

.loading[hidden] {
  display: none !important;
}

.load-tire {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 0 14px rgba(255, 204, 0, 0.45));
  transform-origin: 50% 50%;
  animation: load-tire-spin 0.7s linear infinite;
}

.load-tire-svg {
  display: block;
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  margin: 0;
}

.loading-label {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  padding-left: 0.1em; /* optical center with letter-spacing */
  color: var(--gold);
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  line-height: 1.2;
  animation: loading-pulse 1.2s ease-in-out infinite;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--line);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Keyframes */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  60%,
  100% {
    transform: translateX(100%);
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  /* Max (body.motion-max) ignores this blanket ? Android Battery Saver /
     "Remove animations" often trips PRM; Max restores press/settle theater. */
  body:not(.motion-max) *,
  body:not(.motion-max) *::before,
  body:not(.motion-max) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* v13 extras: search, segments, rings, scoreboard, skeletons */
.live-dot {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ok);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: rgba(52, 199, 89, 0.1);
  border: 1px solid rgba(52, 199, 89, 0.28);
}
.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
  /* pulse-live defined in motion system */
  animation: pulse-live 1.6s ease-in-out infinite;
}
.search-wrap { margin-bottom: 10px; }
.search-input {
  width: 100%;
  min-height: 44px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(14, 14, 18, 0.62);
  color: var(--ink);
  padding: 10px 14px;
  font-size: 0.95rem;
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.01em;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.search-input:focus {
  border-color: var(--gold);
  box-shadow:
    0 0 0 3px rgba(255, 204, 0, 0.16),
    0 0 16px rgba(255, 204, 0, 0.08);
  background: rgba(14, 14, 18, 0.78);
}
.search-input::placeholder,
.search-input::-webkit-input-placeholder {
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--mute);
  opacity: 0.9;
}

/* Van card segments ? flat scroll strip (Due?Tools), no More menu */
.seg-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  padding: 2px 0 4px;
  scrollbar-width: none;
  scroll-padding-inline: 8px;
}
.seg-tabs::-webkit-scrollbar {
  display: none;
}
.seg-tabs .van-seg-more-wrap[hidden] {
  display: none !important;
}
.seg-tabs .van-seg-arrange-chip {
  opacity: 0.72;
  border-style: dashed;
  color: var(--mute);
  flex: 0 0 auto;
}
.seg-tabs .van-seg-arrange-chip:active,
.seg-tabs .van-seg-arrange-chip:focus-visible {
  opacity: 1;
}
/* While seed loading, segs show Due only ? no blank panel taps */
.seg-tabs.seed-lock {
  pointer-events: none;
  opacity: 0.55;
}

.seg {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--grad-panel-soft), var(--panel);
  color: var(--mute);
  font-family: var(--font-tag);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: visible;
  box-shadow: none;
  filter: none;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease,
    box-shadow 0.12s ease;
}

.seg::before,
.seg::after {
  content: none !important;
  display: none !important;
}

.seg .seg-label {
  position: relative;
  z-index: 1;
}

.seg.on {
  background: var(--pill-on-bg, var(--gold));
  border-color: var(--pill-on-border, var(--gold));
  color: var(--pill-on-fg, #0e0e0e);
  box-shadow: var(--pill-on-inset);
  filter: none;
  transform: none;
}

.dual-clock.rings {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dual-clock.rings .dual-rings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ring-card {
  position: relative;
  background: rgba(14,14,14,0.45);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  padding: 10px 8px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
/* Shared details control under both rings (not per-ring i) */
.clock-detail-bar {
  margin-top: 8px;
}
.clock-detail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(18, 22, 32, 0.92);
  color: var(--ink, #f2f2f2);
  font-family: var(--font), system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.clock-detail-btn:active {
  transform: scale(0.99);
}
.clock-detail-btn.open,
.clock-detail-btn[aria-expanded='true'] {
  border-color: rgba(255, 204, 0, 0.4);
  background: rgba(255, 204, 0, 0.08);
}
.clock-detail-ico {
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(255, 204, 0, 0.55);
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.clock-detail-txt {
  flex: 0 1 auto;
}
.clock-detail-chev {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(255, 255, 255, 0.45);
  transition: transform 0.15s ease;
}
.clock-detail-chev.up {
  transform: rotate(180deg);
}

/* Expand panel */
.clock-info-panel {
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 14, 20, 0.96);
  /* Transform-only ? no fill-mode both / opacity:0 */
  animation: clock-info-in 0.16s ease-out;
}
.info-open .clock-detail-btn {
  border-color: rgba(255, 204, 0, 0.4);
}
.clock-info-panel[hidden] {
  display: none !important;
}
@keyframes clock-info-in {
  from {
    transform: translateY(-3px);
  }
  to {
    transform: none;
  }
}

/* Bottom line ? first thing techs read */
.ci-verdict {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(28, 34, 48, 0.9);
}
.ci-verdict-kicker {
  font-family: var(--mono), ui-monospace, monospace;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute, #9aa3b5);
  margin-bottom: 4px;
}
.ci-verdict-title {
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink, #f2f2f2);
  margin-bottom: 4px;
}
.ci-verdict-body {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}
.ci-verdict-ok {
  border-color: rgba(61, 204, 122, 0.28);
  background: rgba(40, 180, 100, 0.1);
}
.ci-verdict-ok .ci-verdict-title {
  color: #8ef0b0;
}
.ci-verdict-shop {
  border-color: rgba(255, 90, 90, 0.35);
  background: rgba(200, 50, 50, 0.12);
}
.ci-verdict-shop .ci-verdict-title {
  color: #ffb0b0;
}
.ci-verdict-pat {
  border-color: rgba(255, 204, 0, 0.4);
  background: rgba(255, 204, 0, 0.1);
}
.ci-verdict-pat .ci-verdict-title {
  color: #ffe066;
}
.ci-verdict-both {
  border-color: rgba(255, 90, 90, 0.45);
  background: linear-gradient(
    135deg,
    rgba(200, 50, 50, 0.16) 0%,
    rgba(255, 204, 0, 0.1) 100%
  );
}
.ci-verdict-both .ci-verdict-title {
  color: var(--gold);
}
.ci-verdict-thin {
  border-color: rgba(140, 160, 200, 0.3);
  background: rgba(120, 140, 180, 0.1);
}
.ci-verdict-thin .ci-verdict-title {
  color: #c8d4ee;
}

/* Side-by-side Shop / Pattern meaning cards */
.ci-compare-wrap {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.ci-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ci-card {
  padding: 10px 8px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(18, 22, 32, 0.9);
  min-width: 0;
}
.ci-card-shop {
  border-top: 2px solid var(--red, #ff5a5a);
}
.ci-card-pat {
  border-top: 2px solid var(--gold, #ffcc00);
}
.ci-card.late {
  box-shadow: 0 0 0 1px rgba(255, 120, 80, 0.2) inset;
}
.ci-card-name {
  font-family: var(--mono), ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink, #f2f2f2);
}
.ci-card-shop .ci-card-name {
  color: #ff9a9a;
}
.ci-card-pat .ci-card-name {
  color: #ffe066;
}
.ci-card-role {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  margin: 2px 0 6px;
  line-height: 1.25;
}
.ci-card-rule {
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--mute, #9aa3b5);
  margin-bottom: 8px;
  min-height: 2.4em;
}
.ci-card-stat {
  font-family: var(--mono), ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink, #f2f2f2);
  margin-bottom: 6px;
}
.ci-card-stat.late {
  color: #ffb070;
}
.ci-card-note {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute, #9aa3b5);
  opacity: 0.9;
}
.ci-tip-list {
  margin: 0;
  padding-left: 16px;
  font-size: 0.74rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
}
.ci-tip-list li {
  margin-bottom: 6px;
}
.ci-tip-list li:last-child {
  margin-bottom: 0;
}

.ci-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  background: rgba(255, 204, 0, 0.08);
  border: 1px solid rgba(255, 204, 0, 0.18);
  color: var(--ink, #f2f2f2);
  margin-bottom: 10px;
  margin-top: 10px;
}
.ci-trust.thin {
  background: rgba(120, 140, 180, 0.1);
  border-color: rgba(140, 160, 200, 0.25);
}
.ci-trust.firm {
  background: rgba(40, 180, 100, 0.1);
  border-color: rgba(40, 180, 100, 0.28);
}
.ci-trust-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.ci-trust.thin .ci-trust-dot {
  background: #8aa0c8;
}
.ci-trust.firm .ci-trust-dot {
  background: #3dcc7a;
}
.ci-block {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.ci-block:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.ci-h {
  font-family: var(--font), system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute, #9aa3b5);
  margin: 0 0 8px;
}

/* Pattern timeline on van Due ? family strips as clear section starts */
.pat-tl-van {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pat-tl-row {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pat-tl-row:first-child {
  padding-top: 0;
  border-top: none;
}
.pat-tl-lab {
  font-family: var(--font), system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold);
  margin: 0 0 8px;
  line-height: 1.25;
}
html[data-theme='light'] .pat-tl-row {
  border-top-color: rgba(18, 20, 26, 0.1);
}
html[data-theme='light'] .pat-tl-lab {
  color: #9a6b00;
}
.ci-block .clock-explain {
  display: block !important;
  padding: 0;
  background: transparent;
  border: none;
}
.ci-block .cx-p {
  margin: 0 0 8px;
  font-size: 0.76rem;
  line-height: 1.4;
  font-weight: 500;
}
.ci-block .cx-p:last-child {
  margin-bottom: 0;
}
.ci-block .cx-p b {
  color: var(--gold);
  font-weight: 700;
}
.ci-block .why-hot-head {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
}
.ci-block .why-hot-list {
  margin: 0;
  padding-left: 16px;
  font-size: 0.74rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
}
.ci-coach p {
  margin: 0 0 8px;
  font-size: 0.76rem;
  line-height: 1.4;
}
.ci-coach-btn {
  width: 100%;
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 204, 0, 0.4);
  background: rgba(255, 204, 0, 0.14);
  color: var(--gold);
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
}

/* Closed-gap timeline */
.gap-tl .gap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 10px;
}
.gap-leg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--mute, #9aa3b5);
}
.gap-leg i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.gap-leg.closed i {
  background: var(--grad-gold);
}
.gap-leg.open i {
  background: transparent;
  border: 1.5px dashed #8aa0c8;
  box-sizing: border-box;
}
.gap-cols {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 8px;
  min-height: 88px;
  padding: 4px 2px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gap-cols::-webkit-scrollbar {
  display: none;
}
.gap-col {
  flex: 0 0 auto;
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.gap-bar-track {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: transparent;
  overflow: hidden;
}
.gap-bar {
  width: 22px;
  min-height: 6px;
  border-radius: 4px 4px 2px 2px;
  transition: none;
}
.gap-bar.closed {
  background: var(--grad-gold);
  box-shadow: none;
  filter: var(--pill-glow-gold-soft);
}
.gap-bar.open {
  width: 20px;
  background: rgba(138, 160, 200, 0.12);
  border: 1.5px dashed #8aa0c8;
  box-sizing: border-box;
}
.gap-bar.partial,
.gap-bar.short-excl {
  width: 20px;
  background: rgba(255, 204, 0, 0.12);
  border: 1.5px dashed rgba(255, 204, 0, 0.45);
  box-sizing: border-box;
  filter: none;
  opacity: 0.75;
}
.gap-leg.partial i {
  background: transparent;
  border: 1.5px dashed rgba(255, 204, 0, 0.55);
  box-sizing: border-box;
}
.gap-col.partial .gap-km,
.gap-col.short-excl .gap-km {
  color: rgba(255, 204, 0, 0.7);
}
.gap-col.partial .gap-tag,
.gap-col.short-excl .gap-tag {
  color: rgba(255, 204, 0, 0.75);
}
.gap-km {
  font-family: var(--mono), ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--ink, #f2f2f2);
  letter-spacing: 0.02em;
}
.gap-col.open .gap-km {
  color: #a8b8d8;
}
.gap-tag {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute, #9aa3b5);
}
.gap-col.open .gap-tag {
  color: #8aa0c8;
}
.gap-foot {
  margin-top: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
}
.gap-excl {
  margin-top: 6px;
  font-size: 0.65rem;
  line-height: 1.35;
  color: var(--mute, #9aa3b5);
}
.gap-tl-empty {
  margin: 0;
  font-size: 0.76rem;
  color: var(--mute, #9aa3b5);
  line-height: 1.4;
}

.dual-clock.rings .dual-rings {
  margin-bottom: 0;
}
/* Kill legacy clutter under dual clocks */
.dual-clock.rings .pattern-meta-row,
.dual-clock.rings .clock-explain-toggle,
.dual-clock.rings .why-hot-toggle,
.dual-clock.rings .ring-info-btn,
.dual-clock.rings .ring-head,
.dual-clock.rings > .coach-tips {
  display: none !important;
}
.ring-card.shop { border-top: 2px solid var(--red); }
.ring-card.pat { border-top: 2px solid var(--gold); }
.ring-svg {
  width: 72px;
  height: 72px;
  display: block;
  transform: rotate(-90deg);
}
.ring-svg circle {
  fill: none;
  stroke-width: 7;
}
.ring-svg .track { stroke: rgba(255,255,255,0.08); }
.ring-svg .prog {
  stroke-linecap: round;
  animation: ring-draw 0.9s var(--ease-torque) both;
}
/* Dual-clock phase: shop first, pattern chases */
.ring-card.shop .prog {
  stroke: var(--red);
  animation-delay: 0ms;
}
.ring-card.pat .prog {
  stroke: var(--gold);
  animation-delay: 120ms;
}
/* Pattern hotter ? slight overshoot race win */
.ring-card.pat.race-win .prog {
  animation: ring-draw-race 0.95s 0.12s var(--ease-torque) both;
}
.ring-card.late .prog {
  stroke: var(--red);
}
.ring-card.late.heat-soak {
  animation: heat-soak 0.85s ease-in-out 2;
}
.ring-card.pat.pin-lock {
  animation: pin-lock-tick 0.45s var(--ease-lug);
}
.ring-card.pat.pat-empty .prog {
  stroke: rgba(255, 204, 0, 0.12);
}
.ring-card.pat.pat-empty .ring-text {
  opacity: 0.75;
  font-size: 0.82rem;
}
.ring-iv-empty {
  opacity: 0.7;
  font-style: italic;
  letter-spacing: 0.02em;
}
.ring-iv {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--mute);
  text-align: center;
  margin-top: 1px;
}
/* Dial = SVG arc + hub icon (calendar / km / pattern) in the empty center */
.ring-dial {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 2px auto 0;
  flex: 0 0 auto;
}
.ring-hub {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--ink);
  z-index: 2;
}
.ring-hub.late {
  color: var(--red);
}
.ring-hub.mode-cal {
  color: var(--soon);
}
.ring-hub.mode-cal.late {
  color: var(--red);
}
.ring-hub.mode-pat {
  color: var(--gold);
}
.ring-hub.mode-km {
  color: rgba(245, 245, 247, 0.92);
}
.ring-hub.mode-both {
  color: var(--soon);
}
.ring-icon {
  display: block;
  margin: 0;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
/* KM lettermark ? crisp mono hub for shop/km rings */
.ring-hub-txt {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
/* Glyphs are self-centered in the 24x24 viewBox ? no optical nudge */
.ring-hub-both {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  transform: scale(0.92);
}
.ring-hub-both .ring-icon {
  width: 16px;
  height: 16px;
}
.ring-hub-plus {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 800;
  opacity: 0.75;
  margin: 0 1px;
}
.ring-hub-km-txt {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.ring-mode {
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--mute);
  margin-top: 3px;
  line-height: 1.15;
}
.ring-mode.mode-cal {
  color: var(--soon);
}
.ring-mode.mode-cal.late,
.ring-mode.late {
  color: var(--red);
}
.ring-mode.mode-pat {
  color: var(--gold);
}
.ring-mode.mode-both {
  color: var(--soon);
}
.ring-center {
  /* legacy % text ? hub icons replace this */
  display: none;
}
.ring-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: center;
  max-width: 100%;
  padding: 0 4px;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.ring-text {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 0.78rem;
  text-align: center;
  color: var(--ink);
  margin-top: 4px;
}
.ring-text.late { color: var(--red); }
.ring-card.mode-cal .ring-label {
  color: rgba(255, 204, 0, 0.75);
}
.ring-card.mode-pat .ring-label {
  color: rgba(255, 204, 0, 0.65);
}

.scoreboard-box {
  display: block;
  gap: 8px;
  margin-bottom: 12px;
}
.score-card {
  background: linear-gradient(145deg, rgba(36, 54, 86, 0.96), rgba(18, 24, 38, 0.95));
  border: 1px solid rgba(255, 204, 0, 0.32);
  border-radius: var(--r-md);
  padding: 10px 12px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 4px 14px rgba(0, 0, 0, 0.28);
  opacity: 1;
}
.score-card .dsp {
  font-family: var(--mono);
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255, 204, 0, 0.25);
}
.score-card .pipe {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 1.05rem;
  margin-top: 4px;
  color: var(--ink);
}
.score-card .meta {
  font-size: 0.68rem;
  color: var(--mute);
  margin-top: 4px;
  line-height: 1.35;
}
.score-totals {
  grid-column: 1 / -1;
  background: linear-gradient(90deg, rgba(255, 204, 0, 0.14), rgba(255, 42, 42, 0.08));
  border: 1px solid rgba(255, 204, 0, 0.35);
  border-radius: var(--r-md);
  padding: 12px 12px 12px 18px;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.45;
  position: relative;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
/* Same rounded gold rail language as pipe-bar */
.score-totals::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 99px;
  background: var(--gold);
  box-shadow: none;
  filter: var(--pill-glow-gold-soft);
  pointer-events: none;
}

.floor-extras { margin-bottom: 12px; }
.floor-block {
  background: rgba(18, 22, 32, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.floor-block h3 {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}

.skel {
  height: 72px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(
    100deg,
    #161820 20%,
    #2a3040 40%,
    #161820 60%
  );
  background-size: 200% 100%;
  /* background-position sweep ? never transform slide (that left the row) */
  animation: shimmer-lux 1.4s ease-in-out infinite;
  margin-bottom: 8px;
}
.skel-line {
  height: 14px;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(
    100deg,
    #161820 20%,
    #2a3040 40%,
    #161820 60%
  );
  background-size: 200% 100%;
  animation: shimmer-lux 1.4s ease-in-out infinite;
  margin-bottom: 8px;
}
.skel-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 76px;
  margin-bottom: 8px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(22, 26, 36, 0.72);
  overflow: hidden;
  animation: none;
}
.skel-rail {
  width: 4px;
  flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(255, 204, 0, 0.35), rgba(255, 204, 0, 0.08));
}
.skel-card-body {
  flex: 1;
  min-width: 0;
  padding: 14px 12px 10px;
}
.skel-card-body .skel-line {
  margin-bottom: 8px;
}
.skel-card-body .skel-line:last-child {
  margin-bottom: 0;
}
.skel-fee {
  width: 52px;
  margin: 16px 12px 16px 0;
  border-radius: 8px;
  background: linear-gradient(
    100deg,
    #161820 20%,
    #2a3040 40%,
    #161820 60%
  );
  background-size: 200% 100%;
  animation: shimmer-lux 1.4s ease-in-out infinite;
}

.fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-fx);
  overflow: hidden;
}
.fx-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: spark-fly 0.9s var(--ease-out) forwards;
}
@keyframes spark-fly {
  0% { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

.van-seg-panel { display: none; opacity: 1; }
.van-seg-panel.on {
  display: block;
  opacity: 1;
  /* no fill-mode both ? start opacity 0 stuck blank on TG recycle */
  animation: seg-swap 0.28s var(--ease-out);
}
/* Programmatic seed?detail / cache paints ? no seg-swap flash */
.van-body.swap-quiet .van-seg-panel.on {
  animation: none !important;
}

.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.empty-fancy {
  padding: 36px 18px !important;
  border-style: solid !important;
  border-color: rgba(255,204,0,0.2) !important;
  background: radial-gradient(circle at 50% 0%, rgba(255,204,0,0.08), transparent 60%);
}
.empty-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 12px rgba(255,204,0,0.35));
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding-top: 2px; /* optical for ? */
}
.pipe-bar.stale {
  border-color: rgba(161, 161, 166, 0.35);
  opacity: 0.85;
}
.pipe-bar.stale::before {
  background: var(--mute);
  box-shadow: none;
}

.meter {
  margin-top: 8px;
  height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.meter > span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 99px;
  background: var(--grad-heat);
  box-shadow: 0 0 10px rgba(255,42,42,0.4);
  transform-origin: left center;
  transform: scaleX(var(--meter, 0));
  transition: transform 0.65s var(--ease-torque, var(--ease-roll));
}

/* ============================================================
   Boot motion ? CONTENT FIRST
   Never hide brand / tabs / list during boot (that looked like a
   blank black app with only a floating tire ? see user screenshot).
   Tire polish is additive only.
   ============================================================ */

/* Brand + chrome always readable during boot */
body.app-boot .boot-fade,
body.app-boot .boot-tabs .bay-tab,
body.app-boot .boot-main,
body.app-boot .brand-word,
body.app-boot .bay-sep,
body.app-boot .logo-tire,
body.app-boot .logo-stage {
  opacity: 1;
  visibility: visible;
}

/* Tire rolls in from the right, spins, hard-brakes into the logo bay */
body.app-boot .mast-boot .logo-tire {
  animation: tire-roll-in 1.05s cubic-bezier(0.18, 0.7, 0.2, 1) forwards;
  will-change: transform;
}

body.app-boot.boot-braking .logo-tire,
body.app-boot .logo-stage.tire-braking .logo-tire {
  filter: drop-shadow(0 0 14px rgba(255, 204, 0, 0.55))
    drop-shadow(0 4px 8px rgba(180, 180, 190, 0.35));
}

/* Soft bay-line nudge only (starts visible ? no opacity 0). Brand flash is separate. */
body.app-boot.boot-landed .bay .brand-word {
  animation: brand-nudge 0.35s var(--ease-out);
  display: inline-block;
}
body.app-boot.boot-landed .bay-1 { animation-delay: 0.08s; }
body.app-boot.boot-landed .bay-2 { animation-delay: 0.12s; }
body.app-boot.boot-landed .bay-3 { animation-delay: 0.16s; }

/* Subtle tab settle ? starts at full opacity (no both-fill from 0) */
body.app-boot.boot-ui .boot-tabs .bay-tab {
  animation: tab-settle 0.32s var(--ease-out);
}
body.app-boot.boot-ui .boot-tabs .bay-tab:nth-child(1) { animation-delay: 0.02s; }
body.app-boot.boot-ui .boot-tabs .bay-tab:nth-child(2) { animation-delay: 0.05s; }
body.app-boot.boot-ui .boot-tabs .bay-tab:nth-child(3) { animation-delay: 0.08s; }
body.app-boot.boot-ui .boot-tabs .bay-tab:nth-child(4) { animation-delay: 0.11s; }
body.app-boot.boot-ui .boot-tabs .bay-tab-more {
  animation: tab-settle 0.32s var(--ease-out);
  animation-delay: 0.14s;
}

@keyframes brand-nudge {
  from { transform: translateY(3px); }
  to { transform: none; }
}
@keyframes tab-settle {
  from { transform: translateY(4px); }
  to { transform: none; }
}

/* Resting visibility after boot */
body:not(.app-boot) .boot-fade,
body:not(.app-boot) .boot-tabs .bay-tab,
body:not(.app-boot) .boot-main,
body:not(.app-boot) .brand-word,
body:not(.app-boot) .logo-tire,
body:not(.app-boot) .logo-stage,
body.boot-done .boot-fade,
body.boot-done .boot-tabs .bay-tab,
body.boot-done .boot-main,
body.boot-done .brand-word,
body.boot-done .logo-tire,
body.boot-done .logo-stage {
  opacity: 1 !important;
  visibility: visible !important;
}
body:not(.app-boot) .logo-tire,
body.boot-done .logo-tire {
  transform: none;
}

.bay-sep {
  opacity: 0.45;
}

/* Tap spin ? killed under motion-chill / PRM (no chill exception) */
.logo-tire.tire-spin {
  animation: tire-tap-spin 1.05s var(--ease-spring) !important;
  animation-duration: 1.05s !important;
  animation-iteration-count: 1 !important;
}

/* Bounce flash when tire "hits the wall" / hard stop */
body.app-boot.boot-impact .logo-tire {
  filter: drop-shadow(0 0 18px rgba(255, 204, 0, 0.75))
    drop-shadow(-5px 0 0 rgba(255, 255, 255, 0.18));
}
body.app-boot.boot-impact .logo-stage {
  animation: stage-hit 0.28s var(--ease-lock, cubic-bezier(0.18, 0.7, 0.2, 1));
}
@keyframes stage-hit {
  0% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(-3px);
  }
  100% {
    transform: translateX(0);
  }
}

/**
 * Official lockup slides right ? left into bay, hard brake + micro rebound.
 * No full-circle spin (letterforms must stay readable).
 */
@keyframes tire-roll-in {
  0% {
    opacity: 1;
    transform: translateX(72px) rotate(-6deg) scale(0.92);
  }
  42% {
    opacity: 1;
    transform: translateX(12px) rotate(2deg) scale(1.04, 0.96);
  }
  /* Hard brake / scrub */
  58% {
    opacity: 1;
    transform: translateX(-6px) rotate(-1.5deg) scale(0.97, 1.04);
  }
  /* Hit the wall ? rebound */
  72% {
    opacity: 1;
    transform: translateX(4px) rotate(1deg) scale(1.02, 0.98);
  }
  86% {
    opacity: 1;
    transform: translateX(-1px) rotate(-0.3deg) scale(0.995, 1.005);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg) scale(1);
  }
}

@keyframes wheel-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes sheet-shine {
  from { left: -40%; opacity: 0; }
  20% { opacity: 1; }
  to { left: 120%; opacity: 0; }
}

@keyframes ring-draw {
  from {
    stroke-dashoffset: var(--ring-from, 176);
  }
  to {
    stroke-dashoffset: var(--ring-to, 0);
  }
}

@keyframes seg-swap {
  from {
    opacity: 0.88;
    transform: translateY(3px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Pure axle spin ? no translate / orbit */
@keyframes load-tire-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes loading-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Transform-only ? never starts at opacity 0 (TG recycle) */
@keyframes hero-rise {
  from {
    transform: translateY(8px) translateZ(0);
  }
  to {
    transform: translateY(0);
  }
}

/* Van sheet open cascade ? keys on .sheet-pop only (single open class in JS) */
/* lot-pull-in is dead ? JS never adds it; neutralized below in LOT section */
/* Only hero rises on open ? flags/clocks/body swap seed?detail without re-animating */
.van-sheet.sheet-pop .van-hero {
  animation: hero-rise 0.34s 0.04s var(--ease-ui);
}
.van-sheet.sheet-pop .van-flags .flag,
.van-sheet.sheet-pop .dual-clock,
.van-sheet.sheet-pop .seg-tabs,
.van-sheet.sheet-pop .van-body,
.van-sheet.sheet-pop .action-island,
.van-sheet.sheet-pop .sticky-actions {
  animation: none;
}
.van-hero,
.dual-clock,
.seg-tabs,
.van-body,
.action-island,
.sticky-actions,
.van-flags .flag {
  opacity: 1;
}

/* Ring cards ? no permanent enter anim (left opacity 0 after scroll recycle) */
.ring-card {
  opacity: 1;
}

/* Soft focus glow on search */
.search-input:focus {
  border-color: var(--gold);
  box-shadow:
    0 0 0 3px rgba(255, 204, 0, 0.18),
    0 0 20px rgba(255, 204, 0, 0.12);
  transition: none;
}


/* Pipe bar gentle fill feel */
/* Permanent enter animations removed ? both+opacity0 caused blank UI after scroll */

.floor-note-row.leaving {
  animation: note-leave 0.35s var(--ease-out) forwards;
}

@keyframes note-leave {
  to {
    opacity: 0;
    transform: translateX(24px) scale(0.96);
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* Tire stock rows ? no permanent both (left opacity 0 after TG recycle) */
.floor-tire-list > * {
  animation: none;
  opacity: 1;
}

/* Seg press */
.seg:active {
  transform: scale(0.94);
}
.seg {
  transition: background 0.2s var(--ease-out), border-color 0.2s ease,
    color 0.18s ease, transform 0.14s var(--ease-bounce);
}

/* Icon buttons soft lift */
.icon-btn {
  transition: transform 0.16s var(--ease-bounce), border-color 0.18s ease,
    background 0.18s ease;
}
.icon-btn:active {
  transform: scale(0.9) rotate(-6deg);
}

/* Live pulse green (not gold) */
.pulse-dot {
  animation: pulse-live 1.6s ease-in-out infinite;
}
@keyframes pulse-live {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(52, 199, 89, 0);
    transform: scale(1.08);
  }
}

/* Gate card polish — non-stage only; .gate-stage uses gate-anim stagger */
.gate:not(.gate-stage) .gate-card {
  animation: card-in 0.5s var(--ease-bounce) both;
}
.gate:not(.gate-stage) .gate-logo {
  animation: tire-roll-in 1s var(--ease-roll) both;
  animation-duration: 0.9s;
}

/* Backdrop fade ? both fills pre-anim so opacity:1 base never flashes */
.van-sheet-backdrop {
  transition: opacity 0.28s var(--ease-out);
}
.van-sheet.sheet-pop .van-sheet-backdrop {
  animation: backdrop-in 0.28s var(--ease-out) both;
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* action-island: in-flow Save/Cancel (replaces sticky footer bleed) */

/* Reduced motion: skip theatrical boot, keep instant usable UI.
   body.motion-max restores theater (Android OS PRM override). */
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-max).app-boot .boot-fade,
  body:not(.motion-max).app-boot .boot-tabs .bay-tab,
  body:not(.motion-max).app-boot .boot-main,
  body:not(.motion-max).app-boot .mast-boot .brand-word,
  body:not(.motion-max).app-boot .mast-boot .logo-tire {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
  }
  body:not(.motion-max) .sheet-shine::after,
  body:not(.motion-max) .van-card.van-card-in,
  body:not(.motion-max) .chip,
  body:not(.motion-max) .ring-svg .prog,
  body:not(.motion-max) .van-sheet.sheet-pop .van-hero,
  body:not(.motion-max) .van-sheet.sheet-pop .dual-clock,
  body:not(.motion-max) .van-sheet.sheet-pop .seg-tabs,
  body:not(.motion-max) .van-sheet.sheet-pop .van-body,
  body:not(.motion-max) .van-sheet.sheet-pop .action-island,
  body:not(.motion-max) .van-sheet.sheet-pop .sticky-actions,
  body:not(.motion-max) .van-sheet.sheet-pop .van-flags .flag,
  body:not(.motion-max) .van-sheet.sheet-pop .van-sheet-panel,
  body:not(.motion-max) .load-tire {
    animation: none !important;
  }
  body:not(.motion-max) .gate-logo {
    animation: none !important;
  }
  .ring-svg .prog {
    stroke-dashoffset: var(--ring-to, 0) !important;
  }
}

/* ============================================================
   Motion creativity v56 ? personality, direction, sparks
   ============================================================ */

/* Ambient: grid drift only ? full-viewport filter breathe is expensive */
.bg-glow {
  animation: none;
}
/* Ambient grid drift is cheap-looking but not free ? pause by default, run only full-motion idle */
.bg-grid {
  animation: none;
}
/* Ambient grid: full tier + ambient-on only (chill / ambient-off stay still) */
body.ambient-on:not(.motion-chill):not(.sheet-open):not(.app-locked) .bg-grid {
  animation: grid-drift 90s linear infinite;
}
body.ambient-off .bg-grid,
body.ambient-off .fx-orbs {
  animation: none !important;
}
body.ambient-off .fx-orbs {
  display: none;
}
@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 28px 28px, 28px 28px; }
}
/* Pause ambient chrome while van sheet is open ? less competing motion */
/* Lock background scroll while van sheet is up (TG WebView) */
body.sheet-open {
  overflow: hidden;
  overscroll-behavior: none;
}
body.sheet-open #app {
  overscroll-behavior: none;
}
/* Board under sheet must not steal taps / scrollIntoView */
body.sheet-open #main,
body.sheet-open .app-chrome {
  pointer-events: none;
  user-select: none;
}
body.sheet-open .van-sheet,
body.sheet-open #stock-sheet,
body.sheet-open #toast,
body.sheet-open #help-sheet,
body.sheet-open #gomo-choice,
body.sheet-open #layout-arrange,
body.sheet-open #loading {
  pointer-events: auto;
}
/* Sheet panel scrolls; list under sheet does not */
body.sheet-open .van-sheet-panel {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
}

/* Ref-counted overlay scroll lock (fixed body + restore Y) */
html.scroll-locked,
html.scroll-locked body {
  overflow: hidden !important;
  overscroll-behavior: none;
  scroll-behavior: auto;
}
.van-sheet-backdrop,
.help-sheet-backdrop,
.stock-sheet-backdrop,
.bay-odo-modal {
  touch-action: none;
  overscroll-behavior: none;
}
/* nested: when bay-odo/confirm open over van */
body.nested-modal-open .van-sheet-panel {
  overflow: hidden !important;
  touch-action: none;
}

body.sheet-open .bg-grid,
body.sheet-open .fx-orbs {
  animation-play-state: paused !important;
}
body.sheet-open .fx-orbs {
  opacity: 0.2;
}

/* Directional screen swaps ? soft, no hard opacity 0 (smoother on TG) */
.screen.active.slide-fwd {
  animation: screen-fwd 0.34s var(--ease-out);
}
.screen.active.slide-back {
  animation: screen-back 0.34s var(--ease-out);
}
.screen.active.screen-pop {
  animation: screen-pop 0.3s var(--ease-spring);
}
/* Transform-only screen swaps ? opacity dips blanked boards in TG WebView */
@keyframes screen-fwd {
  from { transform: translateX(14px) translateZ(0); }
  to { transform: none; }
}
@keyframes screen-back {
  from { transform: translateX(-14px) translateZ(0); }
  to { transform: none; }
}
@keyframes screen-pop {
  from { transform: translateY(8px) translateZ(0); }
  to { transform: none; }
}

.shift-line.sub-swap {
  animation: sub-swap 0.24s var(--ease-smooth-ui, var(--ease-out));
}
@keyframes sub-swap {
  from { opacity: 0.65; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

/* Active tab land ? one-shot only (JS can re-add tab-just-on for drive) */
.bay-tab.active {
  /* box-shadow from .bay-tab.active gold styles above; no permanent land anim */
}
@keyframes tab-land {
  0% { transform: translateY(4px) scale(0.96); }
  60% { transform: translateY(-2px) scale(1.02); }
  100% { transform: translateY(-1px) scale(1); }
}
.bay-tab.tab-just-on .tab-van-svg {
  animation: tab-drive 0.55s var(--ease-out);
}
@keyframes tab-drive {
  0% { transform: translateX(0); }
  35% { transform: translateX(5px); }
  70% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

/* Van cards ? soft enter (never full opacity 0) */
@keyframes card-enter {
  from {
    transform: translateY(6px) translateZ(0);
  }
  to {
    transform: none;
  }
}

/* Sheet open ? single spring (no settle bounce after) */
.van-sheet.sheet-pop .van-sheet-panel {
  animation: sheet-spring var(--dur-sheet) var(--ease-spring) both;
}
@keyframes sheet-spring {
  0% { transform: translate3d(0, 110%, 0); }
  72% { transform: translate3d(0, -0.5%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
/* Title pop only while sheet-pop; rest state is already opaque (no both) */
.van-sheet.sheet-pop .van-tag {
  animation: title-pop 0.45s 0.08s var(--ease-bounce);
}
/* Fee pop is JS-only after count-up (.van-fee.fee-pop) ? not during open cascade */
.van-sheet.sheet-pop .van-fee {
  animation: none;
}
@keyframes title-pop {
  from { transform: translateY(4px); }
  to { transform: none; }
}
/* Single soft fee land ? no blur (TG WebView); applied via .fee-pop class */
@keyframes fee-pop {
  from { transform: scale(0.96); }
  to { transform: none; }
}

/* Soft brand lift after lockup lands */
body.app-boot.boot-landed .brand-logo {
  animation: brand-logo-flash 0.85s 0.08s ease-out both;
}
@keyframes brand-logo-flash {
  0% {
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }
  40% {
    filter: brightness(1.12) drop-shadow(0 0 18px rgba(255, 204, 0, 0.45));
  }
  100% {
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }
}

/* Sparks + road dust on tire stage */
.tire-sparks,
.tire-dust {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
}
.tire-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 1px;
  background: hsl(var(--hue, 48), 100%, 60%);
  box-shadow: 0 0 6px hsl(var(--hue, 48), 100%, 55%);
  animation: tire-spark-fly 0.55s var(--ease-out) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes tire-spark-fly {
  0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
  100% {
    opacity: 0;
    transform: translate(var(--sx), var(--sy)) scale(0.2) rotate(120deg);
  }
}
.dust-bit {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2px;
  border-radius: 50%;
  background: rgba(160, 150, 130, 0.45);
  filter: blur(1px);
  animation: dust-trail 0.5s ease-out forwards;
  animation-delay: var(--d, 0s);
}
@keyframes dust-trail {
  0% { opacity: 0.7; transform: translate(0, 0) scale(0.6); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.6); }
}

/* Rolling body cue during boot */
body.app-boot.boot-rolling .logo-tire {
  filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.4))
    drop-shadow(6px 0 4px rgba(180, 170, 150, 0.25));
}

/* Net rows ? rest opaque (no permanent both enter) */
.net-card,
.net-day-head {
  animation: none;
  opacity: 1;
}

/* Seg active spring */
.seg.on {
  animation: none;
}
@keyframes seg-pop {
  0% { transform: scale(0.92); }
  70% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Pipe bar gold sweep on paint */
.pipe-bar {
  position: relative;
  overflow: hidden;
}
.pipe-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  pointer-events: none;
  opacity: 0;
}
/* pipe-shine-run removed ? JS never added the class */

/* Score cards lift */
.score-card {
  opacity: 1;
}

/* ok toast = green border only (see .toast.ok above) */

/* Loading tire: keep axle spin only (do not reintroduce bounce/orbit) */

/* Search focus uses transition on .search-input only ? no keyframe pulse */

/* Ring cards stagger more dramatically */
/* ring-card-in removed ? permanent both fill blanked dual-clock after scroll */

@media (prefers-reduced-motion: reduce) {
  .bg-glow,
  .bg-grid,
  .van-card.overdue .rail,
  .van-card.hot .rail,
  .pipe-bar::after,
  .load-tire {
    animation: none !important;
  }
  .tire-spark,
  .dust-bit,
  .smoke-puff {
    animation: none !important;
    display: none !important;
  }
}

/* ============================================================
   Craft polish v63 ? depth, smoothness, shop-product feel
   ============================================================ */

/* Softer, less-jumpy active tab (no re-land thrash) */
.bay-tab.active {
  animation: none;
  transition: background 0.22s var(--ease-smooth), border-color 0.22s ease,
    box-shadow 0.28s var(--ease-out), transform 0.2s var(--ease-smooth),
    color 0.18s ease;
}

/* No edge-fade masks on chip rows ? they clipped LLMR / last DSP chips on scroll */

/* Empty states more intentional */
.empty-row {
  padding: 32px 18px !important;
  border-radius: var(--r-md);
  border: 1px dashed rgba(255, 204, 0, 0.22) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 204, 0, 0.08), transparent 55%),
    rgba(14, 14, 18, 0.5);
  color: var(--mute);
  font-size: 0.9rem;
  line-height: 1.4;
}

.empty-fancy {
  padding: 40px 20px !important;
}

/* Skeleton feel */
.skel {
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Dual clock ring polish */
.ring-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

.ring-label {
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* Seg tabs feel like iOS segmented */
.seg-tabs {
  gap: 6px;
  padding: 3px 0 6px;
}

.seg {
  border-radius: var(--r-pill);
  min-height: 40px;
  padding: 8px 14px;
}

/* Search input glass */
.search-input {
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 12, 18, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

/* Report paper slightly elevated */
.report-paper {
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Act buttons more tactile */
.act.primary {
  background: var(--grad-red);
  box-shadow: 0 4px 14px rgba(255, 42, 42, 0.25);
}

.act.gold {
  background: var(--grad-gold);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
  filter: none;
}

/* Van fee hero glow */
.van-fee {
  text-shadow: 0 0 24px rgba(255, 204, 0, 0.3);
}

/* Net cards slightly richer ? keep gold left rail (shorthand must restate it) */
.net-card {
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 3px solid rgba(255, 204, 0, 0.45);
  background:
    linear-gradient(90deg, rgba(255, 204, 0, 0.07), transparent 40%),
    rgba(22, 26, 36, 0.72);
}

/* Instant scroll ? smooth fights TG WebView rubber-band */
#main {
  scroll-behavior: auto;
}

/* Loading overlay colors live on .loading block above */

/* Mast breathing room */
.mast {
  margin-bottom: 10px;
}

/* Bay tabs sit cleaner */
.bay-tabs {
  gap: 8px;
  margin-bottom: 14px;
  padding: 4px 2px 10px;
}

/* Tone down ambient motion a notch for battery/feel */
.bg-glow {
  animation-duration: 16s;
}
.bg-grid {
  animation-duration: 55s;
  opacity: 0.028;
}

/* Selected service line feel */
.van-lines li.svc-line.on strong {
  color: var(--gold);
}

/* PM tab packages */
.pm-lines .pm-line {
  border-left: 3px solid rgba(255, 204, 0, 0.55);
}

.pm-stack {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-family: var(--mono);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--gold);
  background: linear-gradient(90deg, rgba(255, 204, 0, 0.12), rgba(28, 28, 30, 0.5));
  border: 1px solid rgba(255, 204, 0, 0.28);
}

/* Toast higher contrast ? solid, no blur */
.toast {
  border-radius: var(--r-md);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--grad-panel-soft), rgba(36, 36, 40, 0.96);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
   Board filters: chips ? search crossfade
   Both tracks always absolute; fixed height; no display:none.
   ============================================================ */
.board-filters {
  --filter-swap: 0.28s;
  --filter-ease: var(--ease-out);
  position: relative;
  margin-bottom: 10px;
  height: auto;
  min-height: 44px;
  isolation: isolate;
}

.filter-track {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  transition:
    opacity var(--filter-swap) var(--filter-ease),
    transform var(--filter-swap) var(--filter-ease);
}

/* Closed: chips visible */
.board-filters > .filter-track.chips-mode {
  z-index: 1;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity var(--filter-swap) var(--filter-ease),
    transform var(--filter-swap) var(--filter-ease),
    visibility 0s linear 0s;
}

/* Closed: search parked off to the icon side */
.board-filters > .filter-track.search-mode {
  z-index: 2;
  gap: 8px;
  opacity: 0;
  transform: translateX(8px) scale(0.985);
  transform-origin: 100% 50%;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--filter-swap) var(--filter-ease),
    transform var(--filter-swap) var(--filter-ease),
    visibility 0s linear var(--filter-swap);
}

/* Open: chips out */
.board-filters.search-open > .filter-track.chips-mode {
  opacity: 0;
  transform: translateX(-8px) scale(0.985);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--filter-swap) var(--filter-ease),
    transform var(--filter-swap) var(--filter-ease),
    visibility 0s linear var(--filter-swap);
}

/* Open: search in */
.board-filters.search-open > .filter-track.search-mode {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity var(--filter-swap) var(--filter-ease),
    transform var(--filter-swap) var(--filter-ease),
    visibility 0s linear 0s;
}

/* Never display:none filter tracks ? morph needs them painted */
.board-filters > .filter-track[hidden] {
  display: flex !important;
}

.filter-track.chips-mode .filter-row {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.filter-track.search-mode .search-field {
  flex: 1;
  min-width: 0;
}
.filter-track.search-mode .search-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  margin: 0;
  transition:
    border-color 0.2s ease,
    box-shadow 0.28s var(--ease-out),
    background 0.2s ease;
}

.filter-search-btn,
.filter-search-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 11px;
  border: 1px solid rgba(255, 204, 0, 0.35);
  background: rgba(255, 204, 0, 0.1);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.18s var(--ease-out),
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.2s ease;
}
.filter-search-btn svg,
.filter-search-close svg {
  display: block;
  width: 16px;
  height: 16px;
}

.filter-search-btn:focus-visible {
  background: rgba(255, 204, 0, 0.16);
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.12);
  outline: none;
}

.filter-search-btn:active,
.filter-search-close:active {
  transform: scale(0.94);
}

.filter-search-close {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}

.filter-search-close:focus-visible {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  .filter-search-btn:hover {
    background: rgba(255, 204, 0, 0.16);
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.12);
    outline: none;
  }
  .filter-search-close:hover {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.1);
    outline: none;
  }
}

/* Input polish when search is open */
.board-filters.search-open .search-input:focus {
  border-color: var(--gold);
  box-shadow:
    0 0 0 3px rgba(255, 204, 0, 0.16),
    0 0 18px rgba(255, 204, 0, 0.08);
  background: rgba(14, 14, 18, 0.72);
}

/* Station PM lives under Sense (#sense-panel-pm) ? keep board filters tight */
#sense-panel-pm .board-filters,
#screen-pm .board-filters {
  margin-bottom: 8px;
}

#sense-panel-pm .pipe-bar,
#screen-pm .pipe-bar {
  margin-bottom: 10px;
}

/* Net: escape fixed 44px absolute morph ? chips + search only in track */
.net-filters {
  height: auto;
  min-height: 44px;
  overflow: visible;
  margin-bottom: 8px;
}
.net-filters > .filter-track.chips-mode {
  position: relative;
  inset: auto;
  width: 100%;
}
.net-filters:not(.search-open) > .filter-track.search-mode {
  position: absolute;
  inset: 0;
}
.net-filters.search-open > .filter-track.search-mode {
  position: relative;
  inset: auto;
  width: 100%;
}
.net-filters.search-open > .filter-track.chips-mode {
  position: absolute;
  inset: 0;
}

.net-filters .net-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 0;
  padding: 0 4px 0 0;
}

.net-filters .net-chips::-webkit-scrollbar {
  display: none;
}

.net-count {
  margin: 4px 0 8px;
}

@media (prefers-reduced-motion: reduce) {
  .board-filters {
    --filter-swap: 0.01ms;
  }
  .filter-track {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   Motion pack v78 ? GoMobile bay theater + ops density
   ============================================================ */

/* Prefs ? chill kills motion; progress bars keep width/scale transitions */
body.motion-chill *,
body.motion-chill *::before,
body.motion-chill *::after {
  animation: none !important;
  transition-duration: 0.01ms !important;
}
body.motion-chill .ai-pulse-bar,
body.motion-chill .meter > span {
  transition-duration: 0.35s !important;
}

body.density-compact .van-card {
  padding: 8px 10px;
  min-height: 0;
}
body.density-compact .van-card .svc {
  font-size: 0.72rem;
}
body.density-compact .van-card .clocks {
  display: none;
}
body.density-compact .van-card .fee {
  font-size: 0.95rem;
}
body.density-compact .van-stack {
  gap: 6px;
}
body.density-compact .bay-tabs {
  gap: 6px;
  padding: 4px 2px 6px;
}
body.density-compact .bay-tab {
  min-height: 42px;
  padding: 4px 3px;
  gap: 3px;
}
body.density-compact .bay-tab .tab-van {
  width: 42px;
  height: 24px;
}
body.density-compact .bay-tab .tab-label {
  font-size: 0.66rem;
}

/* Night shift (Winnipeg evenings) */
body.night-shift {
  --bg: #08090c;
  --navy: #152238;
}
body.night-shift .bg-glow {
  opacity: 0.55;
  filter: saturate(0.9);
}
body.night-shift .sheet {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

/* Money / hot strip ? sticky disabled: .sheet has overflow:hidden so sticky
   never sticks to the viewport and transparent fades ate the gold pipe look. */
.pipe-bar {
  position: relative;
  z-index: 2;
}

/* Sort chips under Tonight filters */
.sort-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  align-items: center;
}
.sort-row .sort-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin-right: 2px;
}
.sort-chip {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-height: 44px;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(20, 24, 34, 0.85);
  color: var(--mute);
  cursor: pointer;
  transition: transform 0.16s var(--ease-bounce), background 0.18s ease,
    border-color 0.18s ease, color 0.15s ease;
}
.sort-chip.on {
  color: var(--pill-on-fg, #0e0e0e);
  background: var(--pill-on-bg, var(--gold));
  border-color: var(--pill-on-border, var(--gold));
  box-shadow: var(--pill-on-inset);
  filter: none;
}
.sort-chip:active {
  transform: scale(0.94);
}

/* Overdue rail ? one-shot settle (infinite loops thrash TG WebView) */
.van-card.overdue .rail,
.van-card.hot .rail {
  animation: overdue-pulse 1.1s ease-out 1 both;
}
@keyframes overdue-pulse {
  0% {
    opacity: 0.55;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.van-card.overdue .pill {
  animation: none;
}

/* Due lines ? short enter only; forwards + opacity 1 rest (no both) */
.svc-line.line-in {
  animation: line-in 0.32s var(--ease-out) forwards;
}
@keyframes line-in {
  from {
    opacity: 0.35;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Seg body crossfade */
.van-seg-panel {
  display: none;
  opacity: 1;
}
.van-seg-panel.on {
  display: block;
  opacity: 1;
  animation: seg-swap 0.28s var(--ease-out);
}
.van-body.swap-quiet .van-seg-panel.on {
  animation: none !important;
}

/* Fee count-up pop */
.van-fee.fee-pop {
  animation: fee-pop 0.32s var(--ease-out);
}

/* Flags only animate while sheet is opening ? never permanent both fill */
.van-flags .flag {
  opacity: 1;
}

/*
 * Net live search ? Google-style indeterminate glow INSIDE the rounded search field.
 * Never put .net-live-shimmer on the whole filter strip / list (overflow + square edges).
 */
.search-field {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: var(--r-md);
  overflow: hidden; /* clip sweep to rounded rect */
}
.search-field .search-input {
  width: 100%;
  display: block;
  margin: 0;
  /* Let the field own the outer radius */
  border-radius: var(--r-md);
}
/* Soft gold sweep while live free-text is in flight */
.search-field.is-live::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 204, 0, 0.14) 50%,
    transparent 65%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: net-search-sweep 1.15s ease-in-out infinite;
}
/* Thin indeterminate bar along the bottom edge (contained + rounded) */
.search-field.is-live::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 204, 0, 0.85),
    transparent
  );
  background-size: 45% 100%;
  background-repeat: no-repeat;
  animation: net-search-bar 1.05s ease-in-out infinite;
}
@keyframes net-search-sweep {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@keyframes net-search-bar {
  0% {
    background-position: -40% 0;
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
  100% {
    background-position: 140% 0;
    opacity: 0.55;
  }
}
/* Legacy class (if any stale DOM) ? do not animate full filter strip */
.net-live-shimmer {
  /* no-op shell; glow lives on .search-field.is-live only */
}
.net-live-shimmer::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* FOSS copy success */
.foss-chip.copied {
  animation: foss-flash 0.55s var(--ease-out) both;
  border-color: var(--ok) !important;
  color: var(--ok) !important;
}
@keyframes foss-flash {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.5);
  }
  40% {
    transform: scale(1.04);
    box-shadow: 0 0 0 6px rgba(52, 199, 89, 0.15);
  }
  100% {
    transform: scale(1);
    box-shadow: none;
  }
}

/* Job press */
.job-card {
  transition: transform 0.14s var(--ease-smooth), border-color 0.14s ease;
}
.job-card:active {
  transform: scale(0.985) translateY(1px);
  border-color: rgba(255, 204, 0, 0.35);
}

/* Sheet drag close ? grab compress + gold?red pulse */
.van-sheet.dragging .van-sheet-grab {
  box-shadow: none;
  filter: var(--pill-glow-gold);
  transform: scaleX(1.12) scaleY(0.92);
  transition: filter 0.12s ease, transform 0.12s ease, background 0.15s ease;
}
.van-sheet.grab-compress .van-sheet-grab {
  transform: scaleX(0.72) scaleY(1.15);
  box-shadow: none;
  filter: var(--pill-glow-gold-soft);
}
.van-sheet.drag-close-ready .van-sheet-panel {
  border-top-color: var(--red);
  box-shadow: 0 -18px 48px rgba(255, 42, 42, 0.25);
}
.van-sheet.drag-close-ready .van-sheet-grab {
  background: var(--red);
  box-shadow: 0 0 16px rgba(255, 42, 42, 0.55);
  transform: scaleX(1.25) scaleY(0.85);
  animation: grab-ready-pulse 0.55s ease-in-out infinite;
}
.van-sheet.grab-pulse .van-sheet-grab {
  animation: grab-ready-pulse 0.35s ease-out 2;
}
@keyframes grab-ready-pulse {
  0%,
  100% {
    box-shadow: 0 0 12px rgba(255, 42, 42, 0.4);
  }
  50% {
    box-shadow: 0 0 22px rgba(255, 42, 42, 0.85);
  }
}

/* Pull-to-refresh tire */
.ptr-host {
  position: relative;
}
.ptr-indicator {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -100%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  transition: opacity 0.15s ease;
}
.ptr-host.ptr-pulling .ptr-indicator,
.ptr-host.ptr-ready .ptr-indicator,
.ptr-host.ptr-refreshing .ptr-indicator {
  opacity: 1;
}
.ptr-tire {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  border-top-color: transparent;
  box-shadow: none;
  filter: var(--pill-glow-gold-soft);
}
.ptr-host.ptr-refreshing .ptr-tire {
  animation: load-tire-spin 0.65s linear infinite;
}
.ptr-host.ptr-ready .ptr-tire {
  border-color: var(--gold);
  border-top-color: var(--red);
}

/* Stack lists ? no vertical mask (it clipped first/last van labels) */
.van-stack {
  position: relative;
}

/* Rings are glance-only (no tap float ? overflow clutter) */
.ring-card {
  cursor: default;
  position: relative;
}

/* Brand letter boot removed ? both+opacity0 blanked "GoMobile Tires" mid-anim */

/* Gold dust once after boot */
.brand-dust {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
  animation: brand-dust-fly 0.7s ease-out forwards;
}
@keyframes brand-dust-fly {
  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.3);
  }
}

/* Offline / stale pulse on pipe-bar */
.pipe-bar.stale-hot {
  animation: stale-glow 2.2s ease-in-out infinite;
}
@keyframes stale-glow {
  0%,
  100% {
    border-color: rgba(255, 204, 0, 0.25);
  }
  50% {
    border-color: rgba(255, 204, 0, 0.55);
  }
}

/* Tab headlight flash */
.bay-tab.tab-just-on .tab-van-svg {
  filter: drop-shadow(0 0 8px rgba(255, 204, 0, 0.55));
}

/* Empty tire rest icon polish ? one-shot bob via .empty-once (JS) */
.empty-fancy .empty-icon {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 8px;
}

body.motion-chill .van-card.overdue .rail,
body.motion-chill .van-card.overdue .pill,
body.motion-chill .van-card.hot .rail,
body.motion-chill .empty-fancy .empty-icon,
body.motion-chill .pipe-bar.stale-hot,
body.motion-chill .search-field.is-live::before,
body.motion-chill .search-field.is-live::after {
  animation: none !important;
}
body.motion-chill .search-field.is-live::before,
body.motion-chill .search-field.is-live::after {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .van-card.overdue .rail,
  .van-card.overdue .pill,
  .svc-line.line-in,
  .van-seg-panel.on,
  .van-fee.fee-pop,
  .empty-fancy .empty-icon,
  .net-live-shimmer::after,
  .search-field.is-live::before,
  .search-field.is-live::after,
  .ptr-tire {
    animation: none !important;
  }
  .search-field.is-live::before,
  .search-field.is-live::after {
    display: none !important;
  }
}

/* ============================================================
   Type pack ? Khand display ? Inter UI ? Mono $
   Brand lockup = official logo PNG
   ============================================================ */

body {
  font-family: var(--font);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.005em;
}

/* Shop numbers ? tabular so $ and km don't jump while counting */
.van-fee,
.van-card .fee,
.van-odo,
.odo-num,
.ring-text,
.ring-center,
.job-num,
.job-km,
.svc-fee,
.score-card .pipe,
.meter,
.pipe-bar {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.van-fee {
  font-family: var(--mono);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Board / sheet titles ? keep base .sheet-head rules; kill leftover anims */
.sheet-head h1,
.sheet-head p {
  animation: none;
  opacity: 1;
  filter: none;
}

/* Active bay tab ? Inter semi-bold */
.bay-tab .tab-label {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: letter-spacing 0.28s var(--ease-out), font-weight 0.2s ease,
    color 0.18s ease;
}
.bay-tab.active .tab-label {
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Seg labels */
.seg .seg-label {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.78rem;
  transition: letter-spacing 0.22s var(--ease-out), font-weight 0.18s ease;
}
.seg.on .seg-label {
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Sort chips */
.sort-chip {
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  transition: transform 0.18s var(--ease-elastic), background 0.18s ease,
    border-color 0.18s ease, color 0.15s ease, letter-spacing 0.2s ease;
}
.sort-chip.on {
  letter-spacing: 0.05em;
  animation: sort-on 0.35s var(--ease-elastic) both;
}
@keyframes sort-on {
  0% {
    transform: scale(0.92);
  }
  55% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

/* Van card service label */
.van-card .label {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.van-card .fee {
  font-family: var(--mono);
  font-weight: 800;
}

/* Gate uses official lockup PNG (see .gate-brand-logo) */
.gate-card .gate-logo {
  display: flex;
  justify-content: center;
  margin: 4px 0 8px;
  width: auto;
  height: auto;
}

.gate-legal {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

.gate-card h2 {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gate-card p {
  font-family: var(--font);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Flags */
.flag {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.72rem;
}

/* FOSS chips */
.foss-chip {
  font-family: var(--font);
  font-weight: 600;
}

/* Status strip */
.shift-line {
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

/* Soft pulse on mono $ when overdue ? once then settle (infinite = battery jank) */
.van-card.overdue .fee {
  animation: fee-glow 1.8s ease-in-out 2;
}
@keyframes fee-glow {
  0%,
  100% {
    text-shadow: 0 0 0 transparent;
  }
  50% {
    text-shadow: 0 0 14px rgba(255, 204, 0, 0.45);
  }
}

/* Chip filter labels */
.chip {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

/* Loading label styles live with .loading bay block */

/* Chill / reduced-motion: kill infinite FX */
body.motion-chill .brand-logo,
body.motion-chill .logo-tire {
  animation: none !important;
  filter: none !important;
}
body.motion-chill .van-card.overdue .fee {
  animation: none !important;
}
body.motion-chill .sheet-head h1,
body.motion-chill .sheet-head p,
body.motion-chill .screen.active .sheet-head h1,
body.motion-chill .screen.active .sheet-head p {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo,
  .logo-tire,
  .van-card.overdue .fee,
  .sort-chip.on,
  .sheet-head h1,
  .sheet-head p {
    animation: none !important;
  }
}

/* ============================================================
   Cinematic motion v83 ? Awwwards-inspired bay feel
   (respects motion-chill + prefers-reduced-motion)
   ============================================================ */

/* Scroll progress gold line under sticky chrome */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
  overflow: hidden;
  pointer-events: none;
}
.scroll-progress > i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--grad-heat);
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.55);
  transition: width 0.08s linear;
}

/* Ambient orbs ? static only (blur + infinite anim = TG scroll jank) */
.fx-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 0.55;
}
.fx-orbs span {
  position: absolute;
  border-radius: 50%;
  /* Pre-softened radial ? no runtime blur (TG Android scroll jank) */
  filter: none;
  opacity: 1;
  animation: none;
}
.fx-orbs span:nth-child(1) {
  width: 160px;
  height: 160px;
  left: 4%;
  top: 18%;
  background: radial-gradient(
    circle,
    rgba(255, 204, 0, 0.22) 0%,
    rgba(255, 204, 0, 0.06) 45%,
    transparent 70%
  );
  animation-duration: 16s;
}
.fx-orbs span:nth-child(2) {
  width: 120px;
  height: 120px;
  right: 4%;
  top: 44%;
  background: radial-gradient(
    circle,
    rgba(255, 42, 42, 0.14) 0%,
    rgba(255, 42, 42, 0.04) 45%,
    transparent 70%
  );
  animation-duration: 12s;
  animation-delay: -3s;
}
.fx-orbs span:nth-child(3) {
  width: 180px;
  height: 180px;
  left: 36%;
  bottom: 4%;
  background: radial-gradient(
    circle,
    rgba(27, 42, 74, 0.35) 0%,
    rgba(27, 42, 74, 0.1) 45%,
    transparent 70%
  );
  animation-duration: 18s;
  animation-delay: -6s;
}

/* Van cards ? press feedback only (no permanent will-change: kills TG scroll layers) */
.van-card:active {
  transform: scale(0.978) translateY(1px) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}
/* van-card-in uses card-enter above ? never blur + both fill-mode */

/* Active tab ? static gold rim (infinite breathe was noisy on every board) */
.bay-tab.active {
  animation: none;
}

/* Chip tap ripple ? match pill radius (bare inset:0 paints a rectangle) */
.chip,
.sort-chip,
.net-chip {
  position: relative;
  overflow: visible;
}
.bay-tab {
  position: relative;
  overflow: visible;
}
.chip::after,
.sort-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--rx, 50%) var(--ry, 50%),
    rgba(255, 255, 255, 0.35),
    transparent 55%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.chip.ripple-on::after,
.sort-chip.ripple-on::after {
  opacity: 1;
  transition: opacity 0.05s ease;
}

/* Opening cascade defined once above ? no second both-fill override */

/* Live dot stronger pulse */
.pulse-dot {
  animation: pulse-live-strong 1.4s ease-in-out infinite;
}
@keyframes pulse-live-strong {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(52, 199, 89, 0);
  }
}

/* scrolled chrome polish disabled with non-sticky chrome */

/* Flag cascade already exists ? amp it */
/* sheet-pop flag cascade is under .van-sheet.sheet-pop above */

/* FOSS chip hover lift */
.foss-chip {
  transition: transform 0.18s var(--ease-elastic), border-color 0.15s ease;
}
.foss-chip:active {
  transform: scale(0.96);
}

/* Skeleton lux keyframes (shared by .skel / chill) */
@keyframes shimmer-lux {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* Seg on spring */
.seg.on {
  transition: transform 0.2s var(--ease-elastic), background 0.18s ease;
}
.seg:active {
  transform: scale(0.94);
}

/* Soft ambient orbs ? chill / reduced-motion hide below */
body.motion-chill .fx-orbs,
body.motion-chill .scroll-progress,
body.motion-chill .bay-tab.active,
body.motion-chill .van-card.van-card-in,
body.motion-chill .pulse-dot {
  animation: none !important;
}
body.motion-chill .fx-orbs {
  display: none;
}
body.motion-chill .van-card.van-card-in {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Ambient / infinite ? stay off under OS PRM even with Max */
  .fx-orbs,
  .scroll-progress > i {
    animation: none !important;
  }
  .fx-orbs {
    display: none !important;
  }
  body:not(.motion-max) .bay-tab.active,
  body:not(.motion-max) .van-card.van-card-in,
  body:not(.motion-max) .van-sheet.sheet-pop .van-hero,
  body:not(.motion-max) .van-sheet.sheet-pop .dual-clock,
  body:not(.motion-max) .van-sheet.sheet-pop .seg-tabs,
  body:not(.motion-max) .van-sheet.sheet-pop .van-body,
  body:not(.motion-max) .van-sheet.sheet-pop .van-sheet-panel {
    animation: none !important;
  }
}

/* ============================================================
   MOTION PACK v93 ? torque ? stamp ? lift ? roll ? brake ? heat
   Award craft for a shop-floor Telegram Mini App.
   Rules: no permanent opacity:0 + both on list/clocks; clip glows;
   strip one-shot classes; one signature at a time.
   ============================================================ */

@keyframes ring-draw-race {
  0% {
    stroke-dashoffset: var(--ring-from, 176);
  }
  78% {
    stroke-dashoffset: calc(var(--ring-to, 0) - 6);
  }
  100% {
    stroke-dashoffset: var(--ring-to, 0);
  }
}

@keyframes heat-soak {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 42, 42, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 42, 42, 0.22);
  }
}

@keyframes pin-lock-tick {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Van cards ? heat bar + rank torque + bay-pull */
.van-card {
  position: relative;
  overflow: hidden;
}
.van-card.heat-ready {
  will-change: transform;
}
.van-card .heat-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--overdue), rgba(255, 42, 42, 0.2));
  transform: scaleY(0);
  transform-origin: top center;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.van-card.heat-on .heat-bar {
  animation: heat-bar-grow 0.42s var(--ease-torque) forwards;
}
@keyframes heat-bar-grow {
  from {
    transform: scaleY(0);
    opacity: 0.4;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}
.van-card .rank-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.van-card.rank-top .rank-bar {
  animation: rank-torque 0.55s 0.06s var(--ease-torque) forwards;
  /* --rank 0?1 set in JS */
  transform: scaleX(0);
}
@keyframes rank-torque {
  to {
    transform: scaleX(var(--rank, 0.5));
    opacity: 0.9;
  }
}
.van-card.bay-pull {
  animation: bay-pull 0.55s var(--ease-bay);
  box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.45), var(--shadow-card);
  z-index: 3;
}
@keyframes bay-pull {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

/* Hot sweep ? one-shot bay light over list */
.list-host {
  position: relative;
}
.hot-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 28px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 42, 42, 0.22),
    rgba(255, 204, 0, 0.08),
    transparent
  );
}
.hot-sweep.run {
  animation: hot-sweep-pass 0.48s var(--ease-bay) forwards;
}
@keyframes hot-sweep-pass {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(min(220px, 55vh));
  }
}

/* Chip / sort lug-nut press */
.sort-chip,
.net-chip,
.dsp-chip,
.filter-chip {
  transition:
    transform 0.16s var(--ease-lug),
    background 0.18s ease,
    border-color 0.18s ease;
}
.sort-chip:active,
.net-chip:active,
.dsp-chip:active {
  transform: scale(0.92);
}
.sort-chip.on,
.net-chip.on {
  transition: transform 0.22s var(--ease-lug), box-shadow 0.22s ease,
    background 0.18s ease, border-color 0.18s ease, color 0.15s ease;
}

/* Seg cam underline removed ? selected pill already glows; no double cue */
.seg-cam {
  display: none !important;
}

/* FOSS rubber stamp */
.foss-chip {
  position: relative;
  overflow: visible;
}
.foss-chip.foss-stamped {
  animation: foss-stamp 0.42s var(--ease-lug);
  border-color: var(--ok) !important;
  color: var(--ok) !important;
  box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.25);
}
@keyframes foss-stamp {
  0% {
    transform: scale(1);
  }
  28% {
    transform: scale(0.92);
  }
  58% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}
.foss-ghost {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, 0);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ok);
  pointer-events: none;
  white-space: nowrap;
  z-index: 4;
  animation: foss-ghost-rise 0.48s var(--ease-out) forwards;
}
@keyframes foss-ghost-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, 4px);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -14px);
  }
}

/* Odo copy flash */
.van-odo.odo-flash {
  animation: odo-flash 0.4s var(--ease-lug);
}
.van-odo.odo-tick {
  animation: odo-tick 0.38s var(--ease-lock, cubic-bezier(0.18, 0.7, 0.2, 1));
}
@keyframes odo-flash {
  0% {
    color: var(--ink);
    text-shadow: none;
  }
  40% {
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 204, 0, 0.55);
  }
  100% {
    color: var(--ink);
    text-shadow: none;
  }
}
@keyframes odo-tick {
  0% {
    transform: translateX(0) scale(1);
  }
  35% {
    transform: translateX(2px) scale(1.03);
  }
  70% {
    transform: translateX(-1px) scale(0.99);
  }
  100% {
    transform: none;
  }
}

/* Net live/search results land */
.net-card.net-land {
  animation: net-land 0.34s var(--ease-bay, var(--ease-out));
}
@keyframes net-land {
  from {
    transform: translateY(8px);
    opacity: 0.55;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* Sort re-rack kinetic cue on list host */
.list-rerack {
  animation: list-rerack-nudge 0.32s var(--ease-out);
}
@keyframes list-rerack-nudge {
  0% {
    transform: none;
  }
  40% {
    transform: translateY(-2px);
  }
  100% {
    transform: none;
  }
}

/* Copy / stamp success on action buttons */
.copy-stamp,
.act.copy-stamp,
button.copy-stamp {
  animation: foss-stamp 0.42s var(--ease-lug, var(--ease-spring));
}

/* Empty bay ? bob once on first paint only (.empty-once from JS) */
.empty-fancy.empty-once .empty-icon {
  animation: empty-bob-once 0.9s var(--ease-bay);
}
@keyframes empty-bob-once {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Load tire: spin while loading, brake when done */
.loading.load-braking .load-tire {
  animation: load-tire-brake 0.55s var(--ease-lock) forwards !important;
}
@keyframes load-tire-brake {
  0% {
    transform: rotate(0deg) scale(1);
  }
  70% {
    transform: rotate(280deg) scale(1.06);
  }
  100% {
    transform: rotate(300deg) scale(1);
  }
}

/* Sheet settle pulse on panel */
.van-sheet.sheet-settled .van-sheet-panel {
  animation: sheet-settle-tick 0.32s var(--ease-lug, var(--ease-spring));
}
@keyframes sheet-settle-tick {
  0% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Seg select pop (one-shot via playOnce) */
.seg.seg-just-on {
  animation: seg-pop 0.28s var(--ease-bounce, var(--ease-spring));
}

/* Bay tab land when switched */
.bay-tab.tab-just-on {
  animation: tab-land 0.34s var(--ease-out);
}

/* Dual clock soft land when service line changes */
.dual-clock.rings.clocks-swap {
  animation: sub-swap 0.24s var(--ease-smooth-ui, var(--ease-out));
}

/* ---- Smoothness pass: buttons, lists, filters ---- */
.bay-tab {
  transition:
    background 0.2s var(--ease-smooth-ui, ease),
    border-color 0.2s ease,
    color 0.16s ease,
    box-shadow 0.22s var(--ease-smooth-ui, ease),
    transform 0.18s var(--ease-smooth-ui, ease);
}
.van-card {
  transition:
    transform 0.18s var(--ease-smooth-ui, ease),
    border-color 0.18s ease,
    box-shadow 0.22s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.board-filters > .filter-track {
  transition:
    opacity 0.24s var(--ease-smooth-ui, ease),
    transform 0.26s var(--ease-smooth-ui, ease),
    visibility 0s linear 0.24s;
}
.board-filters.search-open > .filter-track.search-mode {
  transition:
    opacity 0.24s var(--ease-smooth-ui, ease),
    transform 0.26s var(--ease-smooth-ui, ease),
    visibility 0s linear 0s;
}
.svc-line {
  transition: background 0.15s ease, border-color 0.15s ease;
}
.van-sheet-backdrop {
  transition: opacity var(--dur-med) var(--ease-out);
}
/* Soft list scroll on boards (smooth only when full motion ? see a11y terminal) */
#money-list,
#capture-list,
#status-list,
#pm-list,
#net-list {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
}

/* Foreground wake ? bay light on */
body.tg-fg .app-chrome,
body.tg-fg .mast {
  animation: fg-wake 0.45s var(--ease-bay);
}
@keyframes fg-wake {
  0% {
    box-shadow: inset 0 0 0 0 rgba(255, 204, 0, 0);
  }
  40% {
    box-shadow: inset 0 0 0 1px rgba(255, 204, 0, 0.35);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(255, 204, 0, 0);
  }
}

/* Job cards bay-slot on first paint */
.job-card.bay-slot {
  animation: bay-slot 0.34s var(--ease-bay);
}
@keyframes bay-slot {
  from {
    transform: translateY(8px);
  }
  to {
    transform: none;
  }
}

/* Net match underline */
.net-card .net-match {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.28s var(--ease-bay);
}
.net-card .net-match.on {
  background-size: 100% 1.5px;
}

/* FLIP re-rack uses inline transform transition */
.van-card.flip-moving {
  transition: transform 0.22s var(--ease-bay) !important;
  z-index: 2;
}

/* Stock pull nudge */
.floor-tire-list > *.stock-pull {
  animation: stock-pull 0.35s var(--ease-lug);
}
@keyframes stock-pull {
  0% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(0);
  }
}

body.motion-chill .hot-sweep,
body.motion-chill .van-card.bay-pull,
body.motion-chill .foss-ghost,
body.motion-chill .seg-cam,
body.motion-chill .rank-bar,
body.motion-chill .heat-bar,
body.motion-chill .net-card.net-land,
body.motion-chill .list-rerack,
body.motion-chill .grab-ready-pulse {
  animation: none !important;
}
body.motion-chill .hot-sweep {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.motion-max) .hot-sweep,
  body:not(.motion-max) .van-card.heat-on .heat-bar,
  body:not(.motion-max) .van-card.rank-top .rank-bar,
  body:not(.motion-max) .van-card.bay-pull,
  body:not(.motion-max) .foss-chip.foss-stamped,
  body:not(.motion-max) .foss-ghost,
  body:not(.motion-max) .seg-cam,
  body:not(.motion-max) .ring-card.late.heat-soak,
  body:not(.motion-max) .ring-card.pat.pin-lock,
  body:not(.motion-max) .ring-card.pat.race-win .prog,
  body:not(.motion-max) .empty-fancy.empty-once .empty-icon,
  body:not(.motion-max) .loading.load-braking .load-tire,
  body:not(.motion-max) .job-card.bay-slot,
  body:not(.motion-max) .floor-tire-list > *.stock-pull {
    animation: none !important;
  }
  body:not(.motion-max) .hot-sweep {
    display: none !important;
  }
  body:not(.motion-max) .van-card.heat-on .heat-bar,
  body:not(.motion-max) .van-card.rank-top .rank-bar {
    transform: none;
    opacity: 1;
  }
  body:not(.motion-max) .meter > span {
    transition: none;
  }
}

/* ============================================================
   PACK v103 ? keep useful motion; simple loader; Inter/Khand type
   ============================================================ */

/* Gold shine on enter ? optional, never touches opacity of the card itself */
.van-card.van-card-in {
  position: relative;
}
.van-card.van-card-in::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 204, 0, 0.12) 48%,
    transparent 62%
  );
  transform: translateX(-120%);
  animation: card-shine 0.55s 0.05s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes card-shine {
  to {
    transform: translateX(120%);
    opacity: 0;
  }
}

/* Floor blocks + rows */
.floor-portal-sync {
  border: 1px solid rgba(255, 204, 0, 0.28);
  background: linear-gradient(165deg, rgba(255, 204, 0, 0.08), transparent 70%);
}

.floor-portal-sync .floor-quiet {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--mute);
  line-height: 1.4;
}

.floor-portal-status {
  margin: 0 0 12px !important;
  font-family: var(--mono);
  font-size: 0.72rem !important;
  color: var(--mute);
}

.floor-portal-status.busy {
  color: var(--gold) !important;
}

.floor-portal-status.err {
  color: var(--red) !important;
}

.floor-portal-btn {
  margin: 0 !important;
}

/* Floor enter: transform-only (never opacity 0), no fill both ? rest opacity is 1 */
.floor-block {
  opacity: 1;
  animation: floor-block-in 0.4s var(--ease-out);
}
.floor-block:nth-child(2) { animation-delay: 0.05s; }
.floor-block:nth-child(3) { animation-delay: 0.1s; }
.floor-block h3 {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 10px;
}
.floor-note-row,
.floor-tire-row {
  opacity: 1;
  animation: floor-row-in 0.38s var(--ease-out);
}
.floor-note-row:nth-child(1),
.floor-tire-row:nth-child(1) { animation-delay: 0.04s; }
.floor-note-row:nth-child(2),
.floor-tire-row:nth-child(2) { animation-delay: 0.08s; }
.floor-note-row:nth-child(3),
.floor-tire-row:nth-child(3) { animation-delay: 0.12s; }
.floor-note-row:nth-child(4),
.floor-tire-row:nth-child(4) { animation-delay: 0.16s; }
.floor-note-row:nth-child(5),
.floor-tire-row:nth-child(5) { animation-delay: 0.2s; }
.floor-note-row:nth-child(n + 6),
.floor-tire-row:nth-child(n + 6) { animation-delay: 0.24s; }
@keyframes floor-block-in {
  from {
    transform: translateY(10px);
  }
  to {
    transform: none;
  }
}
@keyframes floor-row-in {
  from {
    transform: translateX(-10px);
  }
  to {
    transform: none;
  }
}

/* Job / net: no permanent enter anim on every paint (was janky on long lists) */
@keyframes job-rack {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes net-land-soft {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

body.motion-chill .van-card.van-card-in::after,
body.motion-chill .floor-block,
body.motion-chill .floor-note-row,
body.motion-chill .floor-tire-row,
body.motion-chill .job-card,
body.motion-chill .net-card {
  animation: none !important;
}
body.motion-chill .floor-block,
body.motion-chill .floor-note-row,
body.motion-chill .floor-tire-row,
body.motion-chill .job-card,
body.motion-chill .net-card {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.motion-max) .load-tire,
  body:not(.motion-max) .loading-label,
  body:not(.motion-max) .van-card.van-card-in,
  body:not(.motion-max) .van-card.van-card-in::after,
  body:not(.motion-max) .floor-block,
  body:not(.motion-max) .floor-note-row,
  body:not(.motion-max) .floor-tire-row,
  body:not(.motion-max) .job-card,
  body:not(.motion-max) .net-card {
    animation: none !important;
  }
  body:not(.motion-max) .van-card.van-card-in,
  body:not(.motion-max) .floor-block,
  body:not(.motion-max) .floor-note-row,
  body:not(.motion-max) .floor-tire-row,
  body:not(.motion-max) .job-card,
  body:not(.motion-max) .net-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   Bay tools · global search · as-of · clock explain
   ============================================================ */

.status-strip {
  gap: 8px;
}

.board-asof {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
  flex-shrink: 0;
}
.board-asof.stale {
  color: var(--gold);
}

.board-refresh,
.board-help {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(28, 32, 42, 0.9);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s var(--ease-out), border-color 0.15s ease,
    background 0.15s ease;
}
.board-help {
  font-family: var(--font-tag);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  padding-top: 1px; /* optical center for Khand "?" */
}
.board-refresh svg {
  display: block;
}
.board-refresh:active,
.board-help:active {
  transform: scale(0.92);
}
.board-help:active {
  border-color: rgba(255, 204, 0, 0.45);
}
.board-refresh.spinning svg {
  animation: board-refresh-spin 0.7s linear infinite;
}
@keyframes board-refresh-spin {
  to { transform: rotate(360deg); }
}

.bay-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
}

/* ?? AI tab pulse + pull chip ?? */
.ai-pulse {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(28, 34, 48, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ai-pulse.is-paused {
  border-color: rgba(255, 180, 60, 0.45);
  background: rgba(48, 36, 18, 0.9);
}
.ai-pulse.is-open {
  border-color: rgba(255, 204, 0, 0.35);
}
.ai-pulse-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.ai-pulse-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ai-pulse-toggle:active {
  opacity: 0.85;
}
.ai-pulse-chevron {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--mute);
  transition: transform 0.2s var(--ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  width: 1.1em;
  height: 1.1em;
}
.ai-pulse.is-open .ai-pulse-chevron {
  transform: rotate(180deg);
  color: var(--gold);
}
.ai-pulse-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ai-pulse-pct {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--gold);
}
.ai-pulse.is-paused .ai-pulse-pct {
  color: #ffb84a;
}
.ai-pulse-meta {
  font-family: var(--font);
  font-size: 0.72rem;
  color: var(--mute);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-pulse.is-open .ai-pulse-meta {
  white-space: normal;
}
.ai-pulse-actions {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 58%;
}
.ai-pulse-actions .act {
  padding: 6px 10px;
  font-size: 0.72rem;
  font-family: var(--font-tag);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ai-pulse.is-dsp-fetch {
  border-color: rgba(255, 200, 80, 0.35);
}
.ai-pulse.is-dsp-fetch .ai-pulse-pct {
  color: #ffc850;
}
.ai-pulse-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  animation: seg-swap 0.2s var(--ease-out);
}
.ai-pulse-detail[hidden] {
  display: none !important;
}
.ai-pulse-bar-wrap {
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 10px;
}
.ai-pulse-bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c9a000, var(--gold));
  transition: width 0.35s var(--ease-out);
}
.ai-pulse.is-paused .ai-pulse-bar {
  background: linear-gradient(90deg, #c47a12, #ffb84a);
}
.ai-pulse-dl {
  margin: 0;
  display: grid;
  gap: 6px;
}
.ai-pulse-dl > div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  align-items: start;
}
.ai-pulse-dl dt {
  margin: 0;
  font-family: var(--font-tag);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mute);
  padding-top: 1px;
}
.ai-pulse-dl dd {
  margin: 0;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 550;
  line-height: 1.35;
  color: rgba(235, 235, 245, 0.92);
  word-break: break-word;
}
.ai-pulse-dl dd.em {
  color: #ffb84a;
  font-weight: 700;
}
.ai-pulse-hint {
  margin: 8px 0 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--mute);
}
.ai-seg-row,
.ai-svc-row {
  margin-bottom: 6px;
}
.ai-pull-chip {
  border: none;
  background: var(--gold-soft);
  color: var(--gold);
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ai-pull-chip.busy {
  opacity: 0.55;
  pointer-events: none;
}
.van-card.ai-card .fee {
  min-height: 1.4em;
}

.global-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(28, 32, 44, 0.98), rgba(16, 18, 26, 0.96));
  border: 1px solid rgba(255, 204, 0, 0.22);
  border-radius: var(--r-md);
  padding: 5px 5px 5px 12px;
  min-height: 48px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 6px 18px rgba(0, 0, 0, 0.28);
}
.global-search-wrap:focus-within {
  border-color: rgba(255, 204, 0, 0.55);
  box-shadow:
    0 0 0 3px rgba(255, 204, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 8px 22px rgba(0, 0, 0, 0.32);
}
/* Elevate only while suggestions are open ? avoid permanent stacking over tabs */
.global-search-wrap.has-suggest {
  z-index: 40;
}
.global-van-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: rgba(18, 22, 32, 0.98);
  border: 1px solid rgba(255, 204, 0, 0.35);
  border-radius: var(--r-md);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  max-height: min(52vh, 280px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 50;
}
.global-van-suggest[hidden] {
  display: none !important;
}
.global-van-suggest-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.global-van-suggest-item.is-active {
  background: rgba(255, 204, 0, 0.12);
}
@media (hover: hover) and (pointer: fine) {
  .global-van-suggest-item:hover {
    background: rgba(255, 204, 0, 0.12);
  }
}
.global-van-suggest-label {
  font-family: var(--font-tag);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.global-van-suggest-meta {
  font-family: var(--font);
  font-size: 0.72rem;
  color: var(--mute);
  font-weight: 500;
  letter-spacing: 0.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-van-suggest-meta b {
  color: rgba(255, 220, 120, 0.95);
  font-weight: 650;
}
.suggest-recent-tag {
  font-family: var(--font-tag);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 204, 0, 0.85);
}
.global-search-ico {
  flex-shrink: 0;
  display: block;
  color: var(--gold);
  opacity: 0.9;
}
.global-van-search {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font) !important;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  padding: 10px 4px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.global-van-search::-webkit-search-decoration,
.global-van-search::-webkit-search-cancel-button,
.global-van-search::-webkit-search-results-button,
.global-van-search::-webkit-search-results-decoration {
  display: none;
}
.global-van-search::placeholder,
.global-van-search::-webkit-input-placeholder {
  font-family: var(--font) !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(154, 154, 162, 0.95);
  opacity: 1;
}
.global-search-go {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: none;
  border-radius: 11px;
  background: var(--grad-gold);
  color: #0e0e0e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 4px 12px rgba(255, 204, 0, 0.28);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s var(--ease-out);
}
.global-search-go svg {
  display: block;
}
.global-search-go:active {
  transform: scale(0.94);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 2px 8px rgba(255, 204, 0, 0.22);
}

/* Clock explain under dual rings */
.clock-explain-toggle {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: var(--r-sm);
  background: rgba(14, 14, 18, 0.35);
  color: var(--mute);
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.clock-explain-toggle.open,
.clock-explain-toggle[aria-expanded="true"] {
  color: var(--gold);
  border-color: rgba(255, 204, 0, 0.35);
  border-style: solid;
}
.clock-explain {
  background: rgba(14, 14, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin: 0;
}
.clock-explain .cx-p {
  margin: 0 0 8px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 500;
}
.clock-explain .cx-p:last-child {
  margin-bottom: 0;
}
.clock-explain .cx-p b {
  color: var(--gold);
  font-weight: 700;
}
.clock-explain .cx-why b {
  color: var(--mute);
}

body.motion-chill .board-refresh.spinning svg {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .board-refresh.spinning svg {
    animation: none !important;
  }
}

/* ============================================================
   Pack v109 ? jobs groups ? pattern badge ? FOSS ? snapshot ? PM ? conn
   ============================================================ */

.conn-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  border: 1px solid rgba(255, 42, 42, 0.45);
  background: rgba(255, 42, 42, 0.14);
  color: #ffb4b4;
}
.conn-banner.auth {
  border-color: rgba(255, 204, 0, 0.45);
  background: rgba(255, 204, 0, 0.12);
  color: var(--gold);
}
.conn-banner.ok {
  border-color: rgba(52, 199, 89, 0.4);
  background: rgba(52, 199, 89, 0.12);
  color: #8dffb0;
}
.conn-banner[hidden] {
  display: none !important;
}

/* Background Grok assist ? corner pill (never covers the app) */
.grok-nudge {
  position: fixed;
  top: calc(10px + var(--safe-t, 0px));
  right: 10px;
  /* Above boards/banners, still under van/stock/help sheets */
  z-index: 195;
  max-width: min(72vw, 280px);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 204, 0, 0.4);
  background: rgba(16, 22, 34, 0.94);
  color: var(--gold, #ffcc00);
  font-family: var(--font-tag);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: left;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  animation: grok-nudge-in 0.22s var(--ease-out, ease-out) both;
}
.grok-nudge.is-busy {
  border-color: rgba(255, 204, 0, 0.25);
  color: rgba(255, 230, 140, 0.95);
}
.grok-nudge.out {
  animation: grok-nudge-out 0.2s ease-in both;
}
@keyframes grok-nudge-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes grok-nudge-out {
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
}
html[data-theme='light'] .grok-nudge {
  background: rgba(255, 252, 240, 0.96);
  color: #8a6a00;
  border-color: rgba(180, 140, 0, 0.35);
  box-shadow: 0 6px 16px rgba(18, 20, 26, 0.12);
}
@media (prefers-reduced-motion: reduce) {
  .grok-nudge,
  .grok-nudge.out {
    animation: none !important;
  }
}

.home-screen-banner {
  position: sticky;
  top: 0;
  z-index: 39;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  border: 1px solid rgba(255, 204, 0, 0.4);
  background: rgba(255, 204, 0, 0.1);
  color: var(--gold, #ffcc00);
}
.home-screen-banner[hidden] {
  display: none !important;
}
.home-screen-banner-msg {
  flex: 1 1 140px;
  min-width: 0;
}
.home-screen-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.home-screen-banner-add,
.home-screen-banner-dismiss {
  appearance: none;
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.home-screen-banner-add {
  background: var(--gold, #ffcc00);
  color: #1a1400;
}
.home-screen-banner-dismiss {
  background: transparent;
  color: inherit;
  opacity: 0.85;
  border: 1px solid rgba(255, 204, 0, 0.35);
}
html[data-theme='light'] .home-screen-banner {
  border-color: rgba(180, 140, 0, 0.35);
  background: rgba(255, 204, 0, 0.16);
  color: #8a6a00;
}

.pm-tier-row {
  margin-bottom: 10px;
  gap: 8px;
}

/* Pattern-hot list cards */
.van-card.pattern-hot {
  border-color: rgba(255, 204, 0, 0.35);
}
.van-card.pattern-hot .rail {
  background: var(--gold);
  box-shadow: none;
  filter: var(--pill-glow-gold-soft);
}
.pat-badge {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(255, 204, 0, 0.12);
  border: 1px solid rgba(255, 204, 0, 0.3);
  border-radius: 4px;
  padding: 2px 6px;
}
.pat-badge.dual {
  color: #ff8a8a;
  background: rgba(255, 42, 42, 0.12);
  border-color: rgba(255, 42, 42, 0.35);
}
/* FOSS AI PM packages on list cards (Tonight / Money) */
.van-card.has-ai-pm {
  box-shadow:
    var(--shadow-card),
    inset 0 0 0 1px rgba(80, 200, 120, 0.35);
}
.van-card.has-ai-pm .rail {
  background: linear-gradient(180deg, #3dd68c 0%, #1a9a5c 100%);
  box-shadow: 0 0 12px rgba(61, 214, 140, 0.4);
}
.ai-pm-badge {
  display: inline-block;
  margin-top: 4px;
  margin-right: 4px;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #b8f5d0;
  background: rgba(52, 199, 89, 0.16);
  border: 1px solid rgba(52, 199, 89, 0.42);
  border-radius: 4px;
  padding: 2px 7px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pill.pill-aipm {
  background: rgba(52, 199, 89, 0.2);
  color: #8ef0b0;
  border-color: rgba(52, 199, 89, 0.5);
}
/* FOSS Odometer/Validate isValid:false ? need correct km from DSP key / van */
.van-card.has-odo-yellow {
  box-shadow:
    var(--shadow-card),
    inset 0 0 0 1px rgba(255, 196, 0, 0.55);
}
.van-card.has-odo-yellow .rail {
  background: linear-gradient(180deg, #ffd54a 0%, #e6a800 100%);
  box-shadow: 0 0 12px rgba(255, 196, 0, 0.45);
}
.odo-yellow-badge {
  display: inline-block;
  margin-top: 4px;
  margin-right: 4px;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #1a1400;
  background: linear-gradient(180deg, #ffe566 0%, #ffc107 100%);
  border: 1px solid rgba(255, 180, 0, 0.85);
  border-radius: 4px;
  padding: 2px 7px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pill.pill-odo-yellow {
  background: rgba(255, 196, 0, 0.28);
  color: #ffe566;
  border-color: rgba(255, 196, 0, 0.65);
  font-weight: 800;
}
.pill.pill-pat {
  background: rgba(255, 204, 0, 0.18);
  color: var(--gold);
  border-color: rgba(255, 204, 0, 0.4);
}
.pill.pill-dual {
  background: rgba(255, 42, 42, 0.18);
  color: #ff8a8a;
}

/* Due-row FOSS chip */
.svc-line-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.svc-foss-btn {
  border: 1px solid rgba(255, 204, 0, 0.35);
  background: rgba(255, 204, 0, 0.1);
  color: var(--gold);
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.svc-foss-btn:active {
  transform: scale(0.96);
}

/* Jobs tab */
.jobs-last-visit {
  background: rgba(255, 204, 0, 0.06);
  border: 1px solid rgba(255, 204, 0, 0.22);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.jobs-last-kicker {
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.jobs-last-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--mono);
  font-weight: 700;
}
.jobs-last-main span {
  color: var(--mute);
  font-size: 0.75rem;
  font-weight: 600;
}
.jobs-last-work {
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--ink);
  line-height: 1.35;
}
.jobs-grok-row {
  margin: 0 0 10px;
  padding: 0 2px;
}
.act.jobs-grok-act {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border-radius: var(--r-md);
  /* Sentence-case Inter ? not Khand ALL-CAPS from base .act */
  font-family: var(--font-ui, var(--font)) !important;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  text-transform: none !important;
  color: #dce8ff;
  border: 1px solid rgba(142, 182, 255, 0.4);
  background: linear-gradient(
    180deg,
    rgba(90, 130, 210, 0.28) 0%,
    rgba(40, 60, 110, 0.45) 100%
  );
}
.act.jobs-grok-act span {
  font-family: inherit;
  text-transform: none;
  letter-spacing: inherit;
}
.act.jobs-grok-act svg {
  flex: 0 0 auto;
  color: #b8d0ff;
}
.act.jobs-grok-act:active:not(:disabled) {
  transform: scale(0.98);
}
.act.jobs-grok-act:disabled,
.act.jobs-grok-act.is-busy {
  opacity: 0.85;
  cursor: wait;
}
.grok-mark {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}
.act.jobs-grok-act .grok-mark {
  width: 18px;
  height: 18px;
}
.jobs-grok-progress .grok-mark {
  width: 22px;
  height: 22px;
}
@keyframes grok-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(180, 210, 255, 0.35));
    opacity: 0.72;
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(180, 210, 255, 0.95))
      drop-shadow(0 0 4px rgba(255, 255, 255, 0.55));
    opacity: 1;
  }
}
.act.jobs-grok-act.is-busy .grok-mark,
.jobs-grok-summary.is-busy .grok-mark {
  animation: grok-glow 1.35s ease-in-out infinite;
}
.jobs-grok-summary {
  background: rgba(120, 160, 255, 0.07);
  border: 1px solid rgba(120, 160, 255, 0.22);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 12px;
  font-family: var(--font-ui, var(--font));
}
.jobs-grok-summary .jobs-last-kicker {
  font-family: var(--font-ui, var(--font));
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}
.jobs-grok-summary.is-busy {
  border-style: dashed;
  background: rgba(120, 160, 255, 0.1);
}
.jobs-grok-summary.is-error {
  border-color: rgba(255, 120, 100, 0.35);
  background: rgba(255, 80, 60, 0.08);
}
.jobs-grok-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.jobs-grok-summary-head .jobs-last-kicker {
  margin-bottom: 0;
  color: #8eb6ff;
}
.jobs-grok-summary-body {
  font-family: var(--font-ui, var(--font));
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink);
  white-space: normal;
}
.jobs-grok-summary-body .grok-p {
  margin: 0 0 8px;
}
.jobs-grok-summary-body .grok-section {
  margin: 10px 0 4px;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: #b8d0ff;
}
.jobs-grok-summary-body .grok-section:first-child {
  margin-top: 0;
}
.jobs-grok-summary-body .grok-bullets {
  margin: 0 0 8px;
  padding-left: 1.15rem;
  list-style: disc;
}
.jobs-grok-summary-body .grok-bullets li {
  margin: 0 0 4px;
  padding-left: 2px;
}
.jobs-grok-summary-body .grok-gap {
  height: 6px;
}
.jobs-grok-summary-body strong {
  font-weight: 700;
  color: var(--ink);
}
.jobs-grok-progress {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.jobs-grok-progress .grok-mark {
  margin-top: 2px;
  color: #b8d0ff;
}
.jobs-grok-progress-copy {
  min-width: 0;
  flex: 1;
}
.jobs-grok-progress-copy strong {
  display: block;
  font-family: var(--font-ui, var(--font));
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 2px;
  text-transform: none;
  letter-spacing: 0.01em;
}
.jobs-grok-progress-copy p {
  margin: 0;
  font-family: var(--font-ui, var(--font));
  font-size: 0.82rem;
  color: var(--ink);
  line-height: 1.35;
  text-transform: none;
}
.jobs-grok-hint {
  margin-top: 4px !important;
  font-size: 0.72rem !important;
  color: var(--mute) !important;
}
.job-day-head {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 10px 0 6px;
  padding-left: 2px;
}
.job-cards-wrap .job-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  background: rgba(22, 26, 36, 0.72);
  overflow: hidden;
  cursor: default;
}
.job-cards-wrap .job-card.job-card-open {
  cursor: pointer;
}
.job-cards-wrap .job-card.job-card-mismatch {
  border-color: rgba(255, 160, 60, 0.35);
  background: rgba(40, 28, 12, 0.55);
}
.job-report-badge {
  flex: 0 0 auto;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0e1218;
  background: #7dd3fc;
  border-radius: var(--r-pill);
  padding: 2px 7px;
}
.job-fix-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.job-fix-btn {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.job-fix-btn.job-del-btn {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.35);
}
.job-move-picker {
  padding: 4px 2px 8px;
}
.job-move-q {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 1rem;
  margin-bottom: 8px;
}
.job-move-hint {
  margin: 8px 4px;
  color: var(--mute);
  font-size: 0.78rem;
}
.job-move-suggest {
  margin: 6px 2px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 204, 0, 0.22);
  border-radius: 8px;
  background: rgba(255, 204, 0, 0.07);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.35;
}
.job-mismatch-badge {
  flex: 0 0 auto;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0e0e0e;
  background: #ffb020;
  border-radius: var(--r-pill);
  padding: 2px 7px;
}
.job-mismatch-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.62rem;
  color: rgba(255, 176, 32, 0.9);
  line-height: 1.3;
}
.job-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.job-copy-num {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--mute);
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.job-copy-num:active {
  color: var(--gold);
  border-color: rgba(255, 204, 0, 0.4);
}
.job-card-main {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
}
.job-card-side {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: var(--mute);
  font-size: 1.2rem;
}

.snapshot-block {
  margin-bottom: 14px;
}
.snapshot-btn {
  width: 100%;
}

/* Net empty states already solid ? slight polish on day heads */
.net-day-head {
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* -- Bay pack: pattern trust + boards + van tools ------------------- */
.pattern-honesty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 4px 4px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: rgba(255, 204, 0, 0.08);
  border: 1px solid rgba(255, 204, 0, 0.18);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text, #f2f2f2);
}
.pattern-honesty.thin {
  background: rgba(120, 140, 180, 0.12);
  border-color: rgba(140, 160, 200, 0.25);
}
.pattern-honesty.firm {
  background: rgba(40, 180, 100, 0.1);
  border-color: rgba(40, 180, 100, 0.28);
}
.ph-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.pattern-honesty.thin .ph-dot { background: #8aa0c8; }
.pattern-honesty.firm .ph-dot { background: #3dcc7a; }

.spark-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 4px 0 2px;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.spark-row {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 30px;
  min-width: 48px;
}
.spark-bar {
  width: 7px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--gold), #c9a000);
  opacity: 0.9;
}
.spark-bar.open {
  background: linear-gradient(180deg, transparent, #6a7a9a);
  border: 1px dashed #8aa0c8;
  opacity: 0.75;
}
.spark-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}
.spark-detail {
  font-size: 11px;
  line-height: 1.35;
  padding: 0 10px 8px;
  color: rgba(255, 255, 255, 0.65);
}

.why-hot-toggle,
.clock-explain-toggle {
  display: block;
  width: calc(100% - 8px);
  margin: 4px auto;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.why-hot-panel {
  margin: 0 4px 8px;
  padding: 10px;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.28);
  font-size: 12px;
}
.why-hot-head { margin: 0 0 6px; font-weight: 700; }
.why-hot-list { margin: 0; padding-left: 16px; }
.why-hot-list li { margin: 2px 0; }

.coach-tips {
  margin: 8px 4px 12px;
  padding: 10px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(255, 204, 0, 0.12), rgba(20, 24, 36, 0.9));
  border: 1px solid rgba(255, 204, 0, 0.25);
}
.coach-card { margin-bottom: 8px; }
.coach-card p { margin: 0 0 2px; font-size: 13px; }
.coach-p { font-size: 12px !important; color: rgba(255, 255, 255, 0.7) !important; font-weight: 500 !important; }
.coach-dismiss { width: 100%; margin-top: 4px; }

/* thin-badge styling lives on .van-card .thin-badge (tag token pack) */
.pin-mark {
  margin-left: 2px;
  color: var(--gold);
  font-size: 0.75rem;
  flex: 0 0 auto;
}
.pat-boost {
  display: inline-block;
  margin-top: 4px;
  margin-right: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(255, 204, 0, 0.18);
  color: var(--gold);
}
.van-card.thin-hist .label { opacity: 0.95; }
.van-card.pinned { box-shadow: inset 0 0 0 1px rgba(255, 204, 0, 0.35); }

.jobs-filter-row,
.net-sort-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 8px;
  padding: 0 2px;
}

/* ?? Pull-truth toolbar (Tonight / Money) ? one tight strip ? */
.board-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  margin: 0 0 10px;
  position: relative;
  z-index: 8;
  background: rgba(8, 10, 16, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  padding: 5px 5px 5px 7px;
  box-sizing: border-box;
}
.board-toolbar.more-open {
  z-index: 40;
}
.board-toolbar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.board-toolbar-chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  /* Fade hint that chips scroll */
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 18px), transparent 100%);
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 calc(100% - 18px),
    transparent 100%
  );
}
.board-toolbar-chips::-webkit-scrollbar {
  display: none;
}
.tb-chip {
  flex: 0 0 auto;
  font-family: var(--font), system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 7px 10px;
  min-height: 40px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(20, 24, 34, 0.92);
  color: var(--mute, #9aa3b5);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tb-chip.on {
  background: rgba(255, 204, 0, 0.16);
  border-color: rgba(255, 204, 0, 0.55);
  color: var(--gold);
}
.tb-chip[data-heat='shop'].on {
  border-color: rgba(96, 165, 250, 0.65);
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}
.tb-chip[data-heat='pattern'].on {
  border-color: rgba(255, 204, 0, 0.65);
  color: var(--gold);
}
.tb-chip[data-heat='both'].on {
  border-color: rgba(167, 139, 250, 0.65);
  background: rgba(139, 92, 246, 0.18);
  color: #c4b5fd;
}
.tb-chip[data-heat='provisional'].on {
  border-color: rgba(251, 146, 60, 0.65);
  background: rgba(251, 146, 60, 0.14);
  color: #fdba74;
}
.pill-shop {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
}
/* Kill legacy long badges if any still render */
.van-card .pat-badge,
.van-card .pat-boost,
.van-card .ai-pm-badge,
.van-card .odo-yellow-badge,
.van-card .trust-strip {
  display: none !important;
}
.tb-chip:active {
  transform: scale(0.96);
}
.board-toolbar-more-wrap {
  position: relative;
  flex: 0 0 auto;
  z-index: 9;
}
.board-more-btn {
  height: 44px;
  min-height: 44px;
  min-width: 58px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 204, 0, 0.4);
  background: rgba(255, 204, 0, 0.12);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.board-more-btn .more-caret {
  font-size: 0.55rem;
  opacity: 0.75;
  line-height: 1;
}
.board-more-btn:active {
  transform: scale(0.94);
}
.board-toolbar.more-open .board-more-btn {
  background: rgba(255, 204, 0, 0.24);
  border-color: rgba(255, 204, 0, 0.7);
}
.board-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 176px;
  max-width: min(260px, 86vw);
  max-height: min(70vh, calc(var(--tg-vh, 100dvh) - 120px));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 6px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(14, 16, 24, 0.98);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6);
  z-index: 80;
}
/* Portaled to body ? escapes .screen { transform } under .app-chrome */
.board-more-menu.is-portaled {
  position: fixed;
  right: auto;
  z-index: var(--z-menu);
  max-width: none;
}
.board-more-menu.drop-up {
  top: auto;
  bottom: calc(100% + 6px);
}
.board-more-menu.is-portaled.drop-up {
  /* top/bottom set inline from getBoundingClientRect */
  bottom: auto;
}
.board-more-menu[hidden] {
  display: none !important;
}
.board-more-menu.is-portaled:not([hidden]) {
  animation: menu-in var(--dur-fast) var(--ease-out);
  transform-origin: top right;
}
@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.board-more-label {
  font-family: var(--font), system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mute, #9aa3b5);
  padding: 8px 10px 3px;
}
.board-more-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--ink, #f2f2f2);
  font-family: var(--font), system-ui, sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.board-more-item .check {
  width: 14px;
  text-align: center;
  color: var(--gold);
  font-weight: 800;
  opacity: 0;
  flex: 0 0 auto;
}
.board-more-item.on .check {
  opacity: 1;
}
.board-more-item:active,
.board-more-item.on {
  background: rgba(255, 204, 0, 0.12);
  color: var(--gold);
}
.board-more-item.on-walk {
  color: var(--gold);
}
/* Hide any leftover legacy rows */
.sort-row,
.heat-filter-row,
.board-tools-row {
  display: none !important;
}

/* PM tier chips ? same language as pull-truth, horizontal scroll */
.pm-tier-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  margin: 0 0 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 1px 0 2px;
}
.pm-tier-row::-webkit-scrollbar {
  display: none;
}
.pm-tier-row .sort-chip {
  flex: 0 0 auto;
  padding: 6px 11px;
  font-size: 0.68rem;
  min-height: 44px;
}

.bay-pins {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
}
.pins-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pins-empty {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
}
.pin-chip {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 1px solid rgba(255, 204, 0, 0.35);
  background: rgba(255, 204, 0, 0.12);
  color: var(--gold);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 800;
  font-family: inherit;
  line-height: 1.3;
  cursor: pointer;
}
.pin-chip:active {
  background: rgba(255, 204, 0, 0.22);
}
.van-due-actions {
  margin-top: 10px;
}
.van-due-actions-row {
  flex-wrap: wrap;
  gap: 8px;
}
.van-load-fail {
  margin-top: 12px;
}

.attention-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0 0 12px;
}
@media (max-width: 380px) {
  .attention-rail {
    grid-template-columns: 1fr 1fr;
  }
  .attention-rail .att-cell:last-child {
    grid-column: 1 / -1;
  }
}
.att-cell {
  padding: 8px 6px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.att-k {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.att-v {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 800;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--gold);
}

.walk-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Above stock (200); under van sheet until walk+sheet (see below) */
  z-index: var(--z-walk);
  display: none;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 10px 12px calc(10px + var(--safe-b, 0px));
  background: rgba(10, 12, 18, 0.96);
  border-top: 1px solid rgba(255, 204, 0, 0.2);
  /* No backdrop-filter ? blanks sticky content in TG Android */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.walk-mode {
  /* Theater bar (~nav + label + home indicator) */
  --walk-pad: calc(96px + var(--safe-b, 0px));
}
body.walk-mode .walk-bar { display: flex; }
body.walk-mode #app {
  padding-bottom: var(--walk-pad);
}
body.walk-mode.sheet-open .van-sheet-panel {
  /* --walk-pad already includes safe-area */
  padding-bottom: var(--walk-pad);
}
/* Walk Prev/Next must stay tappable over the open van sheet */
body.walk-mode.sheet-open .walk-bar {
  z-index: var(--z-walk);
  pointer-events: auto;
}
body.walk-mode.sheet-open .van-sheet-backdrop {
  bottom: var(--walk-pad);
}
.walk-count {
  min-width: 56px;
  text-align: center;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

.compare-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-compare);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 12px;
  padding-bottom: calc(12px + var(--safe-b, 0px) + var(--kb-inset, 0px));
}
.compare-modal[hidden] { display: none !important; }
.compare-modal.opening .compare-card {
  animation: compare-up var(--dur-med) var(--ease-out);
}
@keyframes compare-up {
  from { transform: translate3d(0, 24px, 0); opacity: 0.85; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}
.compare-card {
  width: min(520px, 100%);
  max-height: min(80vh, calc(var(--tg-vh, 100dvh) * 0.8));
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  border-radius: 16px 16px 12px 12px;
  border: 1px solid rgba(255, 204, 0, 0.2);
  padding: 14px;
  outline: none;
}
.floor-portal-actions,
.floor-sync-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  margin-top: 8px;
}
.floor-portal-actions .floor-portal-btn,
.floor-sync-actions .floor-portal-btn {
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
}
.score-loading {
  min-height: 72px;
  display: flex;
  align-items: center;
}
.compare-card h3 { margin: 0 0 6px; }
.compare-card .search-input { margin: 6px 0; width: 100%; }
.compare-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.compare-pre {
  white-space: pre-wrap;
  font-size: 11px;
  line-height: 1.35;
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.75);
}

.job-draft-block { margin-top: 12px; }
.job-draft-block[data-job-variant='more'] {
  margin-bottom: 14px;
  padding-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.job-draft-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
  /* Keep chips clear of sticky Save/Cancel when focused/scrolled */
  scroll-margin-bottom: calc(110px + var(--safe-b, 0px));
}
.job-draft-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 2px;
}
.job-draft-cat {
  font-size: 0.68rem;
  opacity: 0.85;
}
.job-draft-cat.on {
  opacity: 1;
  border-color: rgba(255, 204, 0, 0.45);
  background: rgba(255, 204, 0, 0.12);
}
.job-draft-chip {
  font-size: 0.72rem;
}
.job-draft-chip.is-pinned {
  border-color: rgba(255, 204, 0, 0.4);
}
.job-draft-chip.is-boosted {
  box-shadow: inset 0 0 0 1px rgba(80, 200, 120, 0.35);
}
.job-draft-chip-manage,
.job-draft-chip-save-line {
  opacity: 0.9;
  border-style: dashed;
}
.job-preset-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 8px;
}
.job-preset-menu-btn.danger {
  color: #f88;
}
.job-presets-manage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(58vh, 420px);
}
.job-presets-add {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  align-items: center;
}
.job-presets-list {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 2px;
}
.job-preset-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.job-preset-row.is-disabled {
  opacity: 0.55;
}
.job-preset-row-main {
  flex: 1;
  min-width: 0;
}
.job-preset-row-text {
  font-size: 0.85rem;
  font-weight: 600;
}
.job-preset-row-meta {
  font-size: 0.68rem;
  opacity: 0.7;
  margin-top: 2px;
}
.job-preset-row-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}
.job-preset-row-acts .tiny {
  padding: 4px 8px;
  font-size: 0.68rem;
  min-height: 0;
}
.job-presets-hint {
  margin: 0;
  font-size: 0.68rem;
  opacity: 0.7;
}
@media (max-width: 420px) {
  .job-presets-add {
    grid-template-columns: 1fr;
  }
}
.job-draft-text {
  width: 100%;
  min-height: 64px;
  margin: 6px 0;
  padding: 10px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  font: inherit;
  resize: vertical;
  /* Keyboard + sticky footer ? leave room when focus-scrolled */
  scroll-margin-bottom: calc(120px + var(--safe-b, 0px));
  scroll-margin-top: 12px;
}
.job-draft-date-btn {
  scroll-margin-bottom: calc(110px + var(--safe-b, 0px));
}

.pattern-digest-card {
  margin-top: 14px;
  margin-bottom: 16px;
  padding: 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 204, 0, 0.15);
}
.pd-title { margin: 0 0 4px; font-size: 15px; }
.pd-list { margin: 8px 0 4px; padding-left: 16px; font-size: 12px; }
.pd-list li { margin: 3px 0; }
.pd-pre { font-size: 11px; white-space: pre-wrap; }

/*
 * Dual clocks must NOT be position:sticky + backdrop-filter.
 * TG Android WebView blanked chrome/cards with sticky + filter (see prior fix).
 * Panel stays a normal scroll box (no flex column ? that broke overflow).
 */
#van-dual-clock.dual-clock.rings {
  position: relative;
  z-index: 1;
  flex: none;
  margin-bottom: 10px;
  padding-bottom: 2px;
}
.dual-clock-inner { padding: 0 2px; }
.dual-clock.seed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pattern-meta-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}
.pattern-honesty {
  margin: 0 !important;
  padding: 6px 8px !important;
  font-size: 11px !important;
  line-height: 1.3;
}
.spark-toggle {
  margin: 0 !important;
  padding: 4px 6px !important;
}
.why-hot-toggle,
.clock-explain-toggle {
  margin: 4px 0 0 !important;
  padding: 6px 8px !important;
  font-size: 11px !important;
}
.coach-tips {
  margin: 6px 0 0 !important;
  padding: 8px !important;
}
.coach-one {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
}
.coach-dismiss {
  width: 100%;
  padding: 8px !important;
  font-size: 12px !important;
}

.board-asof.stale {
  color: #ffb020 !important;
  font-weight: 700;
}
.foss-copy-all { width: 100%; margin-bottom: 8px; }

/* Walk bar above stock overlay (200), below van sheet (210) */
.walk-bar {
  z-index: var(--z-walk);
  pointer-events: auto;
}
body.walk-mode .walk-bar {
  display: flex !important;
}
body.walk-mode.sheet-open .walk-bar {
  /* Stay visible while van card is open */
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.55);
}

/* Chip rows: scroll sideways instead of wrapping into a tall stack */
.chip-scroll {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
  padding-bottom: 2px;
}
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-scroll .sort-chip,
.chip-scroll .heat-chip {
  flex: 0 0 auto;
}

/* Label row: name + gate/wait chips may wrap */
.van-card .label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
}
.van-card .label-name {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Conn banner stale (soft yellow, not error red) */
.conn-banner.warn {
  border-color: rgba(255, 176, 32, 0.5);
  background: rgba(255, 176, 32, 0.14);
  color: #ffcc66;
}

/* Board tool row denser on narrow phones */
.board-tools-row {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 6px;
  margin: 4px 0 8px !important;
}
.board-tools-row .board-tool-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 34px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
}
.board-tools-row .board-tool-btn.on-walk {
  border-color: rgba(255, 204, 0, 0.55);
  color: var(--gold);
}

/* Bay pins overflow */
.bay-pins {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap !important;
}
.bay-pins .pin-chip {
  flex: 0 0 auto;
}

/* Jobs filter / net sort inside van body */
.jobs-filter-row,
.net-sort-row {
  margin: 6px 0 8px !important;
  gap: 6px;
  align-items: center;
}
.net-sort-row .net-pull-ai {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--r-md);
  padding: 0;
  line-height: 0;
}
.net-more {
  margin-top: 8px;
  text-align: center;
  font-family: var(--font);
  font-size: 0.72rem;
  color: var(--mute);
}

/* Floor blocks: never start invisible if animation interrupted */
.floor-block {
  opacity: 1;
  transform: none;
}

/* -- Floor declutter: notes + stock + slim scoreboard --------------- */
.floor-quiet {
  padding: 10px 4px !important;
  opacity: 0.75;
  font-size: 12px !important;
}
.floor-full-sync,
.floor-portal-sync {
  border: 1px solid rgba(255, 204, 0, 0.28) !important;
  background: linear-gradient(
    165deg,
    rgba(255, 204, 0, 0.1),
    rgba(28, 28, 30, 0.4) 70%
  ) !important;
}
.floor-full-sync .floor-quiet,
.floor-portal-sync .floor-quiet {
  margin: 0 0 8px !important;
  padding: 0 !important;
  opacity: 0.9;
  line-height: 1.4;
}
.floor-portal-status {
  margin: 0 0 10px !important;
  font-family: var(--mono);
  font-size: 0.7rem !important;
  color: rgba(255, 255, 255, 0.55);
}
.floor-portal-status.busy {
  color: var(--gold) !important;
}
.floor-portal-status.err {
  color: #ff5c5c !important;
}
.floor-portal-btn {
  margin: 0 !important;
}
.floor-full-sync .floor-portal-btn,
.floor-portal-sync .floor-portal-btn {
  width: auto !important;
}
.floor-sync-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
}
#floor-qb-hint {
  margin-top: 8px !important;
}
.floor-sync-steps {
  margin: 0 0 12px;
  padding: 0 0 0 1.1rem;
  list-style: none;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}
.floor-sync-steps li {
  position: relative;
  margin: 0 0 6px;
  padding-left: 0.2rem;
}
.floor-sync-mark {
  display: inline-block;
  min-width: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
}
.floor-sync-ok .floor-sync-mark {
  color: #5dd39e;
}
.floor-sync-error .floor-sync-mark {
  color: #ff5c5c;
}
.floor-sync-running .floor-sync-mark {
  color: var(--gold);
}
.floor-sync-skip .floor-sync-mark {
  color: rgba(255, 255, 255, 0.35);
}
.floor-sync-detail {
  display: block;
  margin-top: 1px;
  opacity: 0.65;
  font-family: var(--mono);
  font-size: 0.65rem;
}
.floor-notes-block h3,
.floor-stock-block h3,
.floor-score-block h3 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.floor-full-sync h3,
.floor-portal-sync h3 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
}
.floor-inv-btn {
  margin-top: 8px;
  width: 100%;
  font-size: 12px !important;
  padding: 8px 10px !important;
}
.floor-jump-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 10px;
}
.floor-jump {
  flex: 1 1 auto;
  min-width: 28%;
  font-size: 12px !important;
  padding: 8px 6px !important;
}
.score-totals-compact {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 8px;
  line-height: 1.35;
}
.score-dsp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.score-chip {
  display: flex;
  flex-direction: column;
  min-width: 72px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.score-chip-dsp {
  font-size: 0.69rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.score-chip-pipe {
  font-size: 0.81rem;
  font-weight: 800;
  font-family: var(--mono);
  margin-top: 2px;
}
.score-chip-meta {
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
}
#screen-bay .scoreboard-box {
  margin-top: 4px;
}
#screen-bay .floor-extras {
  margin-bottom: 8px;
}
/* Hide legacy big score cards if any CSS still targets them */
#screen-bay .score-card { display: none; }

/* ============================================================
   A11y terminal ? PRM + motion-chill hard stops (must stay last)
   Chill: no tire-spin / skel shimmer exceptions. Progress bars exempt above.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  html, body, #main, #money-list, #capture-list, #status-list, #pm-list, #net-list {
    scroll-behavior: auto !important;
  }
  /* Never allow an infinite loop under raw OS PRM, including Motion Max.
     Max still keeps its one-shot press/settle theater. */
  *, *::before, *::after {
    animation-iteration-count: 1 !important;
  }
  /* Hard-stop the common ambient/loading loops rather than playing one cycle. */
  .bg-grid, .pulse-dot, .van-card.overdue .rail, .van-card.overdue .pill,
  .van-card.hot .rail, .seed-skel-row::after, .skel, .skel-line, .skel-card,
  .load-tire, .loading-label, .spinner, .filter-search-btn.net-pull-ai.is-busy svg,
  .search-field.is-live, .search-field.is-live::before,
  .ptr-host.ptr-refreshing .ptr-tire, .pipe-bar.stale-hot,
  .board-refresh.spinning svg, .act.jobs-grok-act.is-busy .grok-mark,
  .jobs-grok-summary.is-busy .grok-mark {
    animation: none !important;
  }
}

body.motion-chill html, body.motion-chill,
body.motion-chill #main,
body.motion-chill #money-list,
body.motion-chill #capture-list,
body.motion-chill #status-list,
body.motion-chill #pm-list,
body.motion-chill #net-list {
  scroll-behavior: auto !important;
}

body.motion-chill .bg-grid,
body.motion-chill .pulse-dot,
body.motion-chill .van-card.overdue .rail,
body.motion-chill .van-card.overdue .pill,
body.motion-chill .van-card.hot .rail,
body.motion-chill .skel,
body.motion-chill .skel-line,
body.motion-chill .logo-tire.tire-spin {
  animation: none !important;
}

/* ============================================================
   LOT redesign ? ignition ? pull-in ? bay walk ? calm chase ? sense
   ============================================================ */

/* Ignition park-in ? vans settle into the bay after boot (transform only, no both/blur) */
@keyframes van-park-in {
  from {
    transform: translateX(18px) translateY(4px);
  }
  to {
    transform: none;
  }
}
.van-card.van-card-park-in {
  animation: van-park-in 0.55s var(--ease-ui);
}

/* lot-pull-in removed ? JS never adds the class (sheet-pop only). */
.van-sheet.lot-pull-out .van-sheet-panel {
  transition: transform 0.14s var(--ease-ui), opacity 0.14s ease;
  transform: translateX(-10px);
  opacity: 0.82;
}
.van-sheet.walk-swap .van-hero,
.van-sheet.walk-swap .dual-clock {
  /* Transform-only ? no fill-mode both / opacity (TG blank risk) */
  animation: walk-swap-in 0.32s var(--ease-ui);
}
@keyframes walk-swap-in {
  from {
    transform: translateX(14px);
  }
  to {
    transform: none;
  }
}

/* Calm Chase ? quiet pipe + single filter */
.pipe-bar.pipe-quiet {
  padding: 8px 12px 8px 14px;
  background: rgba(28, 28, 30, 0.55);
  border-color: rgba(255, 255, 255, 0.08);
  font-size: 0.68rem;
  color: var(--mute);
}
.pipe-bar.pipe-quiet::before {
  width: 3px;
  left: 6px;
  top: 8px;
  bottom: 8px;
  background: rgba(255, 204, 0, 0.55);
  box-shadow: none;
}
.pipe-bar.pipe-quiet .meter {
  display: none;
}
.board-toolbar.lot-toolbar,
.board-toolbar .lot-toolbar {
  margin: 0 0 8px;
}
.board-toolbar .lot-toolbar {
  justify-content: flex-start;
}
.lot-filter-wrap .board-more-menu {
  left: 0;
  right: auto;
  min-width: 200px;
}
.lot-filter-btn.board-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  min-width: 0;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 204, 0, 0.28);
  background: rgba(18, 20, 28, 0.92);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.lot-filter-btn .lot-filter-label {
  color: var(--mute);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.lot-filter-btn .lot-filter-value,
.lot-filter-btn .more-sort-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--gold);
}
.lot-filter-btn .lot-filter-sep {
  color: rgba(255, 255, 255, 0.25);
}
.board-toolbar.more-open .lot-filter-btn {
  border-color: rgba(255, 204, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.15);
}

/* Thin van rows ? severity rail, less card chrome */
.van-card {
  box-shadow: none;
}
.van-card .pill {
  font-family: var(--font-tag);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  padding: 3px 7px;
  opacity: 1;
}
.pill.pill-stale {
  background: rgba(142, 142, 147, 0.22);
  color: rgba(235, 235, 245, 0.78);
  border-color: rgba(142, 142, 147, 0.4);
}

/* Sense mode switcher */
.sense-mode-row {
  margin-bottom: 10px;
  gap: 6px;
}
.sense-panel[hidden] {
  display: none !important;
}
.sense-panel.on {
  display: block;
  animation: seg-swap 0.22s var(--ease-out);
}

/* Bay walk theater chrome */
.walk-bar.lot-walk-theater {
  gap: 10px;
  padding: 12px 14px calc(12px + var(--safe-b, 0px));
  background: linear-gradient(180deg, rgba(12, 14, 20, 0.4), rgba(8, 10, 14, 0.97));
  border-top: 1px solid rgba(255, 204, 0, 0.22);
}
.walk-bar.lot-walk-theater .walk-nav {
  min-width: 48px;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 0;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.walk-bar.lot-walk-theater .walk-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
  gap: 2px;
}
.walk-bar.lot-walk-theater .walk-bay-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.walk-bar.lot-walk-theater .walk-count {
  font-size: 0.875rem;
  color: var(--gold);
}
.walk-bar.lot-walk-theater .walk-exit {
  min-width: 40px;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding-top: 1px; /* optical */
}

@media (prefers-reduced-motion: reduce) {
  body:not(.motion-max) .van-card.van-card-park-in,
  body:not(.motion-max) .van-sheet.walk-swap .van-hero,
  body:not(.motion-max) .van-sheet.walk-swap .dual-clock {
    animation: none !important;
  }
}
body.motion-chill .van-card.van-card-park-in {
  animation: none !important;
}

/* ?? Money Made (Hermont billed) + Due pipeline ?? */
.money-made {
  padding: 4px 4px 8px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.money-made-kicker,
.money-hero-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 2px;
}
.money-made-total {
  font-family: var(--mono);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #8ef0b0;
  font-variant-numeric: tabular-nums;
}
.money-made-meta,
.money-hero-meta {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mute);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.money-made-range {
  margin-top: 8px;
}
.money-made-range-sum {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0 11px;
  min-height: 32px;
  border-radius: var(--r-pill, 999px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(20, 24, 34, 0.85);
  color: var(--mute);
  width: fit-content;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.15s ease,
    box-shadow 0.2s ease;
}
.money-made-range-sum::-webkit-details-marker {
  display: none;
}
.money-made-range-sum::marker {
  content: '';
}
.money-made-range-sum::after {
  content: '\25BE\FE0E';
  margin-left: 2px;
  font-size: 0.65em;
  opacity: 0.75;
  transition: transform 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.money-made-range[open] > .money-made-range-sum {
  color: #0e0e0e;
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  filter: none;
}
.money-made-range[open] > .money-made-range-sum::after {
  transform: rotate(180deg);
}
.money-made-presets {
  margin-top: 10px;
  margin-bottom: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.money-made-range[open] .money-made-presets {
  margin-top: 8px;
}
.money-made-presets .sort-chip,
.bay-jump-row .sort-chip,
.sense-mode-row .sort-chip {
  flex: 0 0 auto;
  white-space: nowrap;
}
.money-made-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.money-made-custom[hidden] {
  display: none !important;
}
.money-made-date-lab {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.68rem;
  color: var(--mute);
  font-weight: 600;
}
.money-made-date-lab input[type='date'] {
  min-width: 9.5rem;
}
.money-made-date-lab input[type='date']:not(.gomo-field) {
  min-height: 44px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(18, 20, 28, 0.92);
  color: var(--ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1rem;
}
.money-made-go {
  min-height: 44px;
}
.money-hero {
  padding: 4px 4px 6px;
  margin-bottom: 2px;
}
.money-hero-total {
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
body.density-compact .money-made-total {
  font-size: 1.3rem;
}
body.density-compact .money-hero-total {
  font-size: 1.15rem;
}
body.density-compact .money-made-presets {
  margin-top: 6px;
}
.score-made-line {
  color: #8ef0b0;
  font-weight: 800;
}
.score-made-presets {
  margin: 8px 0 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.score-made-presets .sort-chip {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ?? Bay section jumps ?? */
.bay-jump-row {
  position: relative;
  z-index: auto;
  padding: 4px 0 8px;
  margin: 0 0 4px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.bay-jump-row .bay-arrange-chip {
  margin-left: 2px;
  opacity: 0.72;
  border-style: dashed;
  color: var(--mute);
  font-weight: 650;
}
.bay-jump-row .bay-arrange-chip:active,
.bay-jump-row .bay-arrange-chip:focus-visible {
  opacity: 1;
}
.bay-sec {
  scroll-margin-top: 72px;
}

.ask-sheet .sheet-head {
  margin-bottom: 8px;
}
.ask-grok-root {
  padding-bottom: 24px;
}
.bay-ask-grok {
  margin-top: 4px;
  padding-top: 0;
}
.bay-ask-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 8px 0 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.bay-ask-input {
  width: 100%;
  margin-bottom: 8px;
  min-height: 96px;
}
html.kb-open #screen-ask,
html.kb-open #ask-grok-root {
  padding-bottom: calc(12px + var(--kb-inset, 0px));
}
.bay-ask-thread {
  margin: 8px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bay-ask-turn {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.bay-ask-q {
  font-size: 0.78rem;
  color: var(--mute);
  margin-bottom: 4px;
}
.bay-ask-a {
  font-size: 0.86rem;
  line-height: 1.35;
  white-space: pre-wrap;
}
.ask-turn-tools {
  margin-top: 4px;
  margin-bottom: 0;
  opacity: 0.8;
}
/* Ask tab overhaul: offline banner / context chip / stream / actions */
.ask-offline-banner {
  margin: 6px 0 10px;
  padding: 8px 12px;
  border-radius: var(--r-md, 10px);
  font-size: 0.8rem;
  color: #ffd9a0;
  background: rgba(255, 170, 60, 0.12);
  border: 1px solid rgba(255, 170, 60, 0.3);
}
.ask-tools-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 4px 0 10px;
}
.ask-tools-row .sort-chip {
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 600;
}
.ask-tools-row .ask-web-chip.is-on {
  border-color: rgba(255, 204, 0, 0.45);
  color: var(--gold, #ffcc00);
}
.ask-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 5px 12px;
  border-radius: var(--r-pill, 999px);
  font-size: 0.78rem;
  color: var(--mute);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ask-context-chip b {
  color: inherit;
  font-weight: 700;
}
.ask-context-chip button {
  background: none;
  border: 0;
  color: var(--mute);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.ask-send-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 10px;
}
.ask-send-row .jobs-grok-row {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.ask-mic-btn {
  flex: 0 0 52px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border-radius: var(--r-md);
  font-size: 1.15rem;
  line-height: 1;
  font-family: var(--font-ui, var(--font)) !important;
  text-transform: none !important;
  color: #dce8ff;
  border: 1px solid rgba(142, 182, 255, 0.4);
  background: linear-gradient(
    180deg,
    rgba(90, 130, 210, 0.28) 0%,
    rgba(40, 60, 110, 0.45) 100%
  );
  -webkit-tap-highlight-color: transparent;
}
.ask-mic-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.ask-mic-btn.on {
  color: #ffd0d0;
  background: rgba(255, 90, 90, 0.22);
  border-color: rgba(255, 90, 90, 0.55);
}
.ask-stop-btn {
  color: #ff9d9d;
}
.ask-cached-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 4px 10px;
  border-radius: var(--r-pill, 999px);
  font-size: 0.74rem;
  color: var(--mute);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ask-stream-body {
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
}
.ask-van-link,
.ask-job-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--gold, #e8b544);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}
.ask-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.ask-action-row .act {
  padding: 5px 10px;
  font-size: 0.76rem;
}
.ask-action-van {
  font-weight: 700;
  font-size: 0.8rem;
  margin-right: 2px;
}
.ask-history-panel {
  margin: 0 0 10px;
  padding: 8px;
  border-radius: var(--r-md, 12px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ask-history-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.ask-history-head .search-input {
  flex: 1;
  min-width: 0;
}
.ask-history-item {
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 7px 2px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ask-history-item:last-child {
  border-bottom: 0;
}
.ask-history-q {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ask-history-when {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--mute);
}
.ask-sched-label {
  margin-top: 16px;
  margin-bottom: 8px;
}
#ask-schedules-root .empty-row {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--mute);
}
.ask-sched-row .ask-sched-q {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ask-sched-time {
  flex: 0 0 auto;
  font-size: 0.76rem;
  color: var(--mute);
}
.ask-sched-add {
  margin-top: 8px;
  gap: 8px;
}
.ask-sched-time-input,
.ask-sched-add input[type='time'] {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: inherit;
  padding: 6px 10px;
  font-size: 0.82rem;
  font-family: inherit;
  color-scheme: dark;
  min-height: 34px;
}
.ask-sched-add .sort-chip {
  flex: 0 0 auto;
}

html[data-theme='light'] .ask-offline-banner {
  color: #8a5200;
  background: rgba(255, 170, 60, 0.18);
  border-color: rgba(200, 120, 20, 0.35);
}
html[data-theme='light'] .ask-context-chip,
html[data-theme='light'] .ask-cached-badge,
html[data-theme='light'] .ask-history-panel {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}
html[data-theme='light'] .bay-ask-turn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
html[data-theme='light'] .ask-mic-btn {
  color: #1a3a70;
  border-color: rgba(60, 110, 200, 0.45);
  background: linear-gradient(
    180deg,
    rgba(120, 160, 230, 0.35) 0%,
    rgba(90, 130, 200, 0.22) 100%
  );
}
html[data-theme='light'] .ask-mic-btn.on {
  color: #8a2020;
  background: rgba(220, 80, 80, 0.18);
  border-color: rgba(200, 60, 60, 0.45);
}
html[data-theme='light'] .ask-sched-time-input,
html[data-theme='light'] .ask-sched-add input[type='time'] {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color-scheme: light;
}
html[data-theme='light'] .ask-van-link,
html[data-theme='light'] .ask-job-link {
  color: #9a6b10;
}

#screen-bay .scoreboard-box {
  margin-top: 10px;
  margin-bottom: 4px;
}

/* ?? Needs you feed ?? */
.needs-card .pill {
  text-transform: none;
}
#sense-panel-needs .pipe-bar {
  margin-bottom: 8px;
}
.sense-mode-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 10px;
  overscroll-behavior-x: contain;
}
.sense-mode-row .sense-arrange-chip {
  margin-left: 2px;
  opacity: 0.72;
  border-style: dashed;
  color: var(--mute);
  font-weight: 650;
}
.sense-mode-row .sense-arrange-chip:active,
.sense-mode-row .sense-arrange-chip:focus-visible {
  opacity: 1;
}
.layout-arrange-row.is-flat {
  grid-template-columns: 1fr auto;
}

/* ?? Sense Pull (on-demand AI) ?? */
.sense-pull-card {
  padding: 4px 2px 12px;
}
.sense-pull-title {
  margin: 0 0 4px;
  font-family: 'Khand', var(--font), system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.sense-pull-sub {
  margin: 0 0 14px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--mute);
}
.sense-pull-search-wrap {
  position: relative;
  margin-bottom: 10px;
  z-index: 6;
}
.sense-pull-input {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 204, 0, 0.28);
  background: rgba(14, 16, 22, 0.95);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  -webkit-appearance: none;
  appearance: none;
}
.sense-pull-input::placeholder,
.sense-pull-input::-webkit-input-placeholder {
  font-family: var(--font);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--mute);
  opacity: 0.9;
}
.sense-pull-input:focus {
  outline: none;
  border-color: rgba(255, 204, 0, 0.65);
  box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.12);
}
.sense-pull-suggest {
  list-style: none;
  margin: 6px 0 0;
  padding: 6px;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 220px;
  overflow: auto;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 14, 20, 0.98);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  z-index: 8;
}
.sense-pull-suggest[hidden] {
  display: none !important;
}
.sense-pull-suggest-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.sense-pull-suggest-item .spl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: var(--ink);
}
.sense-pull-suggest-item .sps {
  font-size: 0.72rem;
  color: var(--mute);
}
.sense-pull-suggest-item.is-active,
.sense-pull-suggest-item:active {
  background: rgba(255, 204, 0, 0.12);
}
.sense-pull-odo-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.sense-pull-odo-lab {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}
.sense-pull-odo-lab .mute {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.sense-pull-odo {
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(18, 20, 28, 0.9);
  color: var(--ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.9rem;
}
.sense-pull-go {
  width: 100%;
  margin-bottom: 14px;
}
.sense-pull-go:disabled {
  opacity: 0.55;
}
.sense-pull-progress {
  margin-bottom: 12px;
}
.sense-pull-bar-track {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 8px;
}
.sense-pull-bar {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #c9a000, var(--gold));
  transition: width 0.45s var(--ease-out, ease);
}
.sense-pull-bar.is-err {
  background: var(--red, #ff2a2a);
}
.sense-pull-stage {
  margin: 0;
  font-size: 0.78rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--mute);
}
.sense-pull-result {
  padding: 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 204, 0, 0.22);
  background: rgba(255, 204, 0, 0.06);
}
.sense-pull-ok {
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.4;
}
.sense-pull-err {
  margin: 0;
  font-size: 0.86rem;
  color: #ff8a8a;
  line-height: 1.4;
}
.sense-pull-result .act {
  width: 100%;
}

/* Lot help sheet ? above stock sheet */
.help-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-help);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.help-sheet[hidden] {
  display: none !important;
}
.help-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 1;
}
.help-sheet.opening .help-sheet-backdrop {
  animation: backdrop-in 0.28s var(--ease-out) both;
}
.help-sheet-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: min(calc(var(--tg-vh, 100dvh) * 0.88), 720px);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--panel);
  border: 1px solid rgba(255, 204, 0, 0.2);
  border-bottom: none;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
  transform: translateY(0);
  transition: transform var(--sheet-close-ms)
    var(--ease-sheet, cubic-bezier(0.22, 1, 0.36, 1));
  padding-bottom: var(--safe-b, 0px);
}
.help-sheet.opening .help-sheet-panel {
  animation: help-rise 0.36s var(--ease-out) both;
  transition: none; /* don't fight keyframe transform */
}
@keyframes help-rise {
  from { transform: translateY(110%); }
  to { transform: none; }
}
.help-sheet.closing .help-sheet-panel {
  transform: translateY(105%);
  transition: transform var(--sheet-close-ms) var(--ease-in);
}
.help-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
  cursor: pointer;
}
.handle-pill {
  display: block;
  width: 42px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--gold);
  opacity: 0.9;
  flex-shrink: 0;
  transition: background 0.18s ease, opacity 0.18s ease, filter 0.18s ease;
}
.help-sheet-handle:active .handle-pill {
  opacity: 1;
  filter: brightness(1.12);
}
@media (hover: hover) and (pointer: fine) {
  .help-sheet-handle:hover .handle-pill {
    opacity: 1;
    filter: brightness(1.12);
  }
}
.help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.help-head-titles {
  min-width: 0;
  flex: 1 1 auto;
}
.help-head h2 {
  margin: 0;
  font-family: var(--font-brand);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold);
}
.help-head .help-build {
  margin: 2px 0 0;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.4);
}
html[data-theme='light'] .help-head .help-build {
  color: rgba(20, 24, 34, 0.45);
}
.help-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(28, 32, 42, 0.9);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  padding-top: 1px;
}
.help-body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 28px;
  overscroll-behavior: contain;
}
.help-sec {
  margin: 0 0 18px;
}
.help-sec h3 {
  margin: 0 0 8px;
  font-family: var(--font-brand);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.help-sec p {
  margin: 0 0 8px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--help-body, rgba(242, 242, 242, 0.82));
}
.help-sec p b {
  color: var(--gold);
  font-weight: 700;
}
.help-font-packs {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  padding-bottom: 2px;
}
.help-dl {
  margin: 0;
}
.help-dl > div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.help-dl dt {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.help-dl dd {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--help-body, rgba(242, 242, 242, 0.8));
}
html[data-theme='light'] {
  --help-body: rgba(18, 20, 26, 0.82);
  --van-handle-top: #e8ecf4;
  --van-handle-mid: rgba(232, 236, 244, 0.97);
  --van-handle-fade: rgba(232, 236, 244, 0.55);
}
.help-sec-foot p {
  font-size: 0.72rem;
  color: var(--mute);
  text-align: center;
  margin: 8px 0 0;
}
body.help-open {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-max) .help-sheet.opening .help-sheet-panel,
  body:not(.motion-max) .help-sheet.closing .help-sheet-panel {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   UI polish pack ? type + alignment (v178)
   Display/titles = Khand ? Body/search = Inter ? Tags = Khand ? $ = Mono
   ============================================================ */

/* Pills / chips: Inter 600, no forced ALL-CAPS at tiny sizes */
.chip,
.net-chip,
.sort-chip,
.tb-chip,
.heat-chip,
.stock-mode,
.dsp-chip,
.filter-chip,
.fu-filter-btn,
.pin-chip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
  font-family: var(--font-ui, var(--font)) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: var(--r-pill);
}
.seg {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
  font-family: var(--font-tag) !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
}
.chip,
.sort-chip,
.net-chip,
.tb-chip,
.heat-chip,
.stock-mode,
.dsp-chip,
.filter-chip,
.fu-filter-btn {
  font-size: 0.72rem;
  padding: 0 12px;
  min-height: 44px;
}
/* Bay pins: compact name pills (not 44px filter chips) */
.bay-pins .pin-chip {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  min-height: 0;
  line-height: 1.3;
}
.seg .seg-label {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1;
  text-transform: uppercase;
}

/* ?? Icon circles: kill SVG baseline droop ?? */
.filter-search-btn,
.filter-search-close,
.board-refresh,
.global-search-go,
.net-sort-row .net-pull-ai {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.filter-search-btn svg,
.filter-search-close svg,
.board-refresh svg,
.net-pull-ai svg,
.global-search-ico,
.ai-pulse-actions .act svg {
  display: block;
  flex: 0 0 auto;
}
/* Pull AI matches other filter icon buttons (was 36 vs 44) */
.net-sort-row .net-pull-ai {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--r-md);
  padding: 0;
}

/* ?? Shared tag box (one language) ?? */
.pm-pkg-tag,
.needs-why-tag,
.van-card .thin-badge,
.van-card .flag-chip,
.pm-amazon-chip,
.net-badge,
.flag,
.brand-chip,
.svc-status,
.ai-pull-chip,
.van-card .pill,
.foss-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1.15;
  font-family: var(--font-tag);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.pm-pkg-tag {
  font-size: 0.72rem;
  padding: 4px 8px;
  border-radius: var(--r-tag);
  letter-spacing: 0.02em;
  text-transform: none; /* package names stay readable */
  font-weight: 600;
}
.needs-why-tag,
.van-card .thin-badge,
.van-card .flag-chip,
.pm-amazon-chip,
.net-badge,
.brand-chip {
  font-size: 0.62rem;
  padding: 3px 7px;
  border-radius: var(--r-tag);
}
.flag,
.svc-status,
.van-card .pill {
  font-size: 0.62rem;
  padding: 4px 8px;
  border-radius: var(--r-pill);
}
.foss-chip,
.ai-pull-chip {
  font-size: 0.72rem;
  padding: 6px 12px;
  border-radius: var(--r-pill);
}
.needs-why-tags,
.pm-pkg-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  max-width: 100%;
}
.needs-why-tag {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(235, 235, 245, 0.88);
}
.van-card .label {
  align-items: center;
}
.van-card .label > * {
  flex-shrink: 0;
}
.van-card .label .label-name {
  flex-shrink: 1;
}
.van-card .right {
  align-items: flex-end;
  justify-content: center;
}
.van-card .pill {
  margin-top: 0;
}

/* ?? Search / copy type ?? */
.search-input,
.search-input.net-search,
.global-van-search,
.sense-pull-input {
  font-family: var(--font) !important;
}
.search-input::placeholder,
.global-van-search::placeholder,
.sense-pull-input::placeholder {
  font-family: var(--font) !important;
  font-weight: 500;
}
.gap-tag,
.lot-filter-label {
  font-family: var(--font-tag);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.needs-card .pill {
  font-family: var(--font-tag);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.van-card .svc {
  font-family: var(--font);
  font-weight: 500;
}
.sense-pull-title,
.help-sec h3,
.sheet-head h1 {
  font-family: var(--font-brand);
}
/* Money $ + date/meta stay shop mono (not Khand brand display) */
.money-made-total,
.money-hero-total,
.money-made-meta,
.money-hero-meta {
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums;
}
.help-dl dt,
.att-v,
.score-chip-pipe,
.lot-filter-btn .lot-filter-value,
.lot-filter-btn .more-sort-label,
.bay-odo-input {
  font-family: var(--mono);
}
/* Bay odo stays mono numbers ? override search Inter */
.bay-odo-input.search-input {
  font-family: var(--mono) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
}
.bay-tab .tab-label {
  font-family: var(--font-tag);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}
.bay-tab .tab-van {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.bay-tab .tab-van-svg {
  display: block;
}
body.density-compact .van-card .body {
  padding: 8px 8px 8px 11px;
}
body.density-compact .van-card .right {
  padding: 8px 10px 8px 2px;
}
body.density-compact .van-card {
  min-height: 0;
  padding: 0;
}
@media (prefers-reduced-motion: reduce) {
  .sense-panel.on,
  .van-card.overdue .rail,
  .van-card.hot .rail {
    animation: none !important;
  }
}

/* ============================================================
   Recording polish pack (v180) ? align nets / CTAs / chips / draft
   ============================================================ */
.pins-label {
  flex: 0 0 auto;
  font-family: var(--font-tag);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1;
  padding-top: 1px;
}
.net-sort-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}
.net-sort-row .net-pull-ai,
.net-sort-row .sort-chip {
  flex: 0 0 auto;
}
.net-sort-row .sort-chip {
  min-height: 44px;
}
.seg-tabs {
  align-items: center;
  gap: 6px;
}
.seg {
  min-height: 40px;
  align-self: center;
}
.vsec-title,
.sheet-head h1 {
  font-family: var(--font-tag);
}
.sheet-head p,
.vsec-sub,
.pipe-bar,
.meta-line {
  font-family: var(--font);
  letter-spacing: 0.01em;
}
.job-draft-text,
.job-draft-date,
textarea.job-draft-text {
  font-family: var(--font) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  -webkit-appearance: none;
  appearance: none;
}
.job-draft-text::placeholder {
  font-family: var(--font);
  font-weight: 500;
}
.van-actions .act,
.sense-pull-go {
  border-radius: var(--r-md);
}
.report-actions .act:disabled {
  opacity: 0.45;
}
.van-card.pm-payable-card .right {
  gap: 5px;
  min-width: 4.75rem;
}
.van-card.pm-payable-card .right-sub {
  text-align: right;
}
.ai-pulse-actions .act {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 11px;
  font-size: 0.72rem;
}
.floor-note-actions {
  gap: 8px;
}
.clock-explain-toggle {
  font-family: var(--font-tag);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.filter-row {
  align-items: center;
}
.board-filters.search-open {
  height: 44px;
}
.board-filters.search-open .filter-track {
  min-height: 44px;
}

/* ---- Stock tab (barcode inventory) ---- */
.stock-sheet { padding-bottom: 12px; }
.stock-seg { margin-bottom: 12px; }
.stock-view { display: block; }
.stock-view[hidden] { display: none !important; }
.stock-count-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 204, 0, 0.42);
  border-radius: var(--r-md);
  background: rgba(255, 204, 0, 0.12);
  color: #ffe28a;
  font-weight: 750;
}
.stock-count-banner[hidden] { display: none !important; }
.stock-count-banner .sort-chip { flex: 0 0 auto; }
.stock-dir-pick {
  display: flex;
  gap: 10px;
  margin: 0 0 14px;
}
.stock-dir-btn {
  flex: 1 1 0;
  min-height: 48px;
  border: 1px solid rgba(255, 204, 0, 0.24);
  border-radius: var(--r-md);
  background: rgba(19, 23, 33, 0.92);
  color: var(--mute);
  font: 800 0.9rem/1 var(--font-ui, Inter, sans-serif);
}
.stock-dir-btn.on {
  border-color: var(--pill-on-border);
  background: var(--pill-on-bg, var(--grad-gold));
  color: var(--pill-on-fg);
  box-shadow: 0 8px 24px rgba(255, 190, 0, 0.18);
}
.stock-tools-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stock-tools-list[hidden],
.stock-tools-panel[hidden] { display: none !important; }
.stock-tool-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid rgba(255, 204, 0, 0.28);
  border-radius: var(--r-md);
  background: rgba(12, 14, 20, 0.72);
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 90ms var(--ease-press, ease), background 120ms ease;
}
.stock-tool-row:active {
  transform: scale(0.98);
  background: rgba(255, 204, 0, 0.1);
}
.stock-tool-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.stock-tool-title { font-weight: 800; color: var(--ink); font-size: 0.92rem; }
.stock-tool-hint { color: var(--mute); font-size: 0.76rem; line-height: 1.35; }
.stock-tool-chevron {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.85;
}
.stock-tools-panel { padding-top: 2px; }
.stock-tools-back { margin-bottom: 12px; }
.stock-scan-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
}
.stock-scan-row .act {
  min-height: 44px;
}
.stock-scan-btn { flex: 1 1 auto; min-height: 44px; }
.stock-prefer-type-chip { flex: 0 0 auto; min-height: 44px; }
.stock-code-form {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
}
.stock-code-input,
.stock-search-input {
  flex: 1 1 auto;
  min-height: 44px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 204, 0, 0.28);
  background: rgba(12, 14, 20, 0.72);
  color: #f2f4f8;
  padding: 0 12px;
  font-size: max(16px, 0.95rem);
  font-family: var(--mono, 'JetBrains Mono', monospace);
}
.stock-search-row { margin: 8px 0 10px; }
.stock-search-input { width: 100%; font-family: var(--font-ui, Inter, sans-serif); }
.stock-go-btn { min-width: 64px; min-height: 44px; }
.stock-list { display: flex; flex-direction: column; gap: 8px; }
.stock-list[hidden] { display: none !important; }
.stock-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  padding: 12px 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 204, 0, 0.18);
  background: linear-gradient(165deg, rgba(28, 34, 48, 0.9), rgba(12, 14, 20, 0.95));
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  max-width: 100%;
}
.stock-row.is-low { border-color: rgba(255, 90, 70, 0.55); }
.stock-row.is-neg .stock-row-qty { color: #ff6b5a; }

/* Group members: outbound Stock shell ? other boards not visible */
body.stock-outbound-only #bay-tabs,
body.stock-outbound-only #bay-tools,
body.stock-outbound-only #btn-board-help,
body.stock-outbound-only #screen-tonight,
body.stock-outbound-only #screen-money,
body.stock-outbound-only #screen-report,
body.stock-outbound-only #screen-sense,
body.stock-outbound-only #screen-bay {
  display: none !important;
}
body.stock-outbound-only #screen-stock {
  display: block !important;
}
body.stock-outbound-only #stock-access-panel {
  display: none !important;
}
body.stock-outbound-only .stock-dir-btn[data-stock-dir='in'] {
  display: none !important;
}
/* TG QR is QR-only ? demote vs bag barcode Scan for outbound techs */
body.stock-outbound-only #stock-btn-tg-qr {
  opacity: 0.5;
}
.stock-filter-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-padding-inline: 8px;
  overscroll-behavior-x: contain;
  padding-bottom: 2px;
}
.stock-filter-row::-webkit-scrollbar {
  display: none;
}
.stock-filter-row > .sort-chip,
.stock-filter-row > .stock-kind-btn,
.stock-filter-row > #stock-kind-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.stock-kind-btn,
#stock-kind-btn,
.fu-filter-btn {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Follow-ups / Tasks filter pill: hug the text ("All" was a 44px circle) */
.fu-filter-btn {
  border-radius: var(--r-pill);
  align-self: flex-start;
  margin-bottom: 8px;
}
.stock-filter-row .stock-more-wrap[hidden] {
  display: none !important;
}
.stock-filter-row .stock-arrange-chip {
  margin-left: 2px;
  opacity: 0.72;
  border-style: dashed;
  color: var(--mute);
  font-weight: 650;
}
.stock-filter-row .stock-arrange-chip:active,
.stock-filter-row .stock-arrange-chip:focus-visible {
  opacity: 1;
}
.stock-filter-row .stock-kind-select-wrap {
  flex: 0 0 auto;
  margin-left: 4px;
}
.list-sort-row {
  margin-top: -2px;
  margin-bottom: 10px;
}
#stock-sort-row.chip-scroll {
  padding-inline: 2px;
  scroll-padding-inline: 8px;
  gap: 6px;
}
#stock-sort-row .sort-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.stock-kind-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.stock-kind-select-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
}
.stock-kind-select {
  max-width: 9.5rem;
  padding: 6px 8px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 204, 0, 0.3);
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
}
.stock-more-wrap {
  position: relative;
}
.stock-more-badge {
  display: inline-block;
  margin-left: 4px;
  min-width: 1.1rem;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: rgba(90, 170, 255, 0.9);
  color: #061018;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.3;
  vertical-align: middle;
}
.stock-more-badge[hidden] {
  display: none !important;
}
.stock-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 11.5rem;
  padding: 6px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 204, 0, 0.35);
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Portaled to body ? escapes .bay-tabs overflow + .screen transform */
.stock-more-menu.is-portaled {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  z-index: var(--z-menu) !important;
  max-width: none;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.stock-more-menu.is-portaled:not([hidden]) {
  display: flex !important;
  animation: menu-in var(--dur-fast, 0.16s) var(--ease-out, ease-out);
  transform-origin: top right;
}
.stock-more-menu[hidden] {
  display: none !important;
}
.stock-more-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}
.stock-more-menu button.on {
  background: rgba(255, 204, 0, 0.12);
}
@media (hover: hover) and (pointer: fine) {
  .stock-more-menu button:hover {
    background: rgba(255, 204, 0, 0.12);
  }
}
.stock-more-menu button[hidden] {
  display: none !important;
}
.report-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.report-toolbar > #dsp-chips {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.report-toolbar > #dsp-chips::-webkit-scrollbar {
  display: none;
}
.report-toolbar .stock-more-wrap {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
#report-btn-more {
  max-width: min(11.5rem, 42vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-color: rgba(255, 204, 0, 0.42);
  color: var(--gold);
  background: rgba(255, 204, 0, 0.08);
  font-weight: 700;
}
#report-btn-more[aria-expanded='true'],
.report-more-wrap.is-open #report-btn-more {
  background: var(--pill-on-bg, var(--gold));
  color: var(--pill-on-fg, #0e0e0e);
  border-color: var(--pill-on-border, var(--gold));
  box-shadow: var(--pill-on-inset);
}
.report-more-menu {
  right: 0;
  left: auto;
  min-width: 15.5rem;
  max-width: min(18rem, calc(100vw - 20px));
  padding: 10px 8px 10px;
  gap: 4px;
  border: 1px solid rgba(255, 204, 0, 0.42);
  background:
    linear-gradient(165deg, rgba(255, 204, 0, 0.1), rgba(14, 16, 22, 0.98) 38%),
    #12151c;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 204, 0, 0.08) inset;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.report-more-menu.is-portaled {
  transform-origin: top right;
}
.report-more-menu .board-more-label {
  color: var(--gold);
  letter-spacing: 0.1em;
  padding: 8px 8px 4px;
}
.report-more-menu .board-more-label:first-child {
  padding-top: 2px;
}
.report-more-menu .filter-row,
.report-more-menu .report-more-chips {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  overflow: visible;
  gap: 4px;
  margin: 0 0 8px;
  padding: 0 2px;
}
.report-more-menu .filter-row:last-child,
.report-more-menu .report-more-chips:last-child {
  margin-bottom: 0;
}
.report-more-menu .sort-chip,
.report-more-menu .chip {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  min-height: 42px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 204, 0, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-weight: 700;
  box-shadow: none;
}
.report-more-menu .sort-chip:active,
.report-more-menu .chip:active {
  transform: scale(0.985);
}
.report-more-menu .sort-chip.on,
.report-more-menu .chip.on,
.report-more-menu button.sort-chip.on,
.report-more-menu button.chip.on {
  background: var(--gold) !important;
  color: #0e0e0e !important;
  border-color: var(--gold) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
  filter: none !important;
  text-shadow: none !important;
}
.seg-tabs .van-seg-more-wrap {
  flex: 0 0 auto;
}
.stock-more-menu button.seg-alert {
  color: #8ef0b0 !important;
}
.stock-more-menu button.seg-soft {
  color: #c8d4ee !important;
}
.stock-more-menu button.layout-arrange-item {
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 8px 8px;
  color: var(--gold, #ffcc00);
  font-weight: 700;
}

/* Arrange Front / More sheet */
.layout-arrange {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-help, 225) + 8);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.layout-arrange[hidden] {
  display: none !important;
}
.layout-arrange-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.layout-arrange-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: min(calc(var(--tg-vh, 100dvh) * 0.88), 720px);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--panel);
  border: 1px solid rgba(255, 204, 0, 0.22);
  border-bottom: none;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
  padding-bottom: var(--safe-b, 0px);
}
.layout-arrange-hint {
  margin: 0 16px 10px;
  font-size: 0.78rem;
  color: var(--mute, #9aa3b5);
  line-height: 1.35;
}
.layout-arrange-list {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.layout-arrange-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
.layout-arrange-row.is-more {
  opacity: 0.88;
}
.layout-arrange-label {
  font-size: 0.9rem;
  font-weight: 700;
  min-width: 0;
}
.layout-arrange-zone {
  display: flex;
  gap: 4px;
}
.layout-arrange-zone button {
  min-width: 3.4rem;
  padding: 6px 8px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: var(--mute, #9aa3b5);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}
.layout-arrange-zone button.on {
  border-color: rgba(255, 204, 0, 0.55);
  background: rgba(255, 204, 0, 0.14);
  color: var(--gold, #ffcc00);
}
.layout-arrange-move {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.layout-arrange-move button {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--r-tag);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
}
.layout-arrange-move button:disabled {
  opacity: 0.35;
  cursor: default;
}
.layout-arrange-actions {
  padding: 8px 16px 14px;
  display: flex;
  justify-content: flex-start;
}
.layout-arrange-done {
  flex: 0 0 auto;
  min-height: 40px;
  min-width: 5.5rem;
  padding: 8px 16px;
  font-size: 0.78rem;
}
.layout-arrange-reset {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.72rem;
}
.layout-arrange-section {
  margin: 8px 4px 2px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute, #9aa3b5);
}

/* Modern choice bottom sheet (stock kind, follow-up/task filters) */
.gomo-choice {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-help, 225) + 6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.gomo-choice[hidden] {
  display: none !important;
}
.gomo-choice-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  touch-action: none;
}
.gomo-choice-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: min(calc(var(--tg-vh, 100dvh) * 0.72), 560px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--panel);
  border: 1px solid rgba(255, 204, 0, 0.22);
  border-bottom: none;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
  /* Safe inset lives on the scroll list only — avoid double padding */
  padding-bottom: 0;
  transform: translateY(0);
}
.gomo-choice.opening .gomo-choice-backdrop {
  animation: backdrop-in 0.28s var(--ease-out) both;
}
.gomo-choice.opening .gomo-choice-panel {
  animation: help-rise 0.36s var(--ease-out) both;
}
.gomo-choice.closing .gomo-choice-panel {
  transform: translateY(105%);
  transition: transform var(--sheet-close-ms)
    var(--ease-in, cubic-bezier(0.4, 0, 1, 1));
}
.gomo-choice-panel > .help-head {
  flex: 0 0 auto;
}
.gomo-choice-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 4px 12px calc(16px + var(--safe-b, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gomo-choice-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font-family: var(--font-ui, var(--font));
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.14s ease,
    transform 0.14s var(--ease-press);
}
.gomo-choice-item:active {
  transform: scale(0.985);
}
.gomo-choice-item.on {
  background: var(--pill-on-bg, var(--gold));
  border-color: var(--pill-on-border, var(--gold));
  color: var(--pill-on-fg, #0e0e0e);
  box-shadow: var(--pill-on-inset);
  filter: none;
}
.gomo-choice-item.on::after {
  content: '\2713\FE0E';
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 800;
  opacity: 0.85;
}
body.gomo-choice-open {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-max) .gomo-choice.opening .gomo-choice-panel,
  body:not(.motion-max) .gomo-choice.closing .gomo-choice-panel,
  body:not(.motion-max) .gomo-choice.opening .gomo-choice-backdrop {
    animation: none !important;
    transition: none !important;
  }
}

/* Stock edit barcodes ? scan or type, many codes */
.stock-barcode-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}
.stock-barcode-row label {
  margin-top: 8px;
}
.stock-barcode-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stock-barcode-input-row .stock-barcode-input {
  flex: 1 1 auto;
  min-width: 0;
}
.stock-barcode-input-row .act.stock-barcode-scan {
  flex: 0 0 auto;
  min-height: 40px;
  min-width: 4.2rem;
  padding: 8px 12px;
  font-size: 0.72rem;
}
.stock-barcode-remove {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.3);
  color: var(--mute, #9aa3b5);
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
  padding-top: 1px;
}
.stock-barcode-remove:active {
  color: #ff6b4a;
  border-color: rgba(255, 107, 74, 0.45);
}
#stock-add-barcode {
  margin-top: 10px;
}
.fu-filter-select-wrap {
  display: inline-flex;
  margin: 0 0 8px;
}
.fu-filter-select-wrap .stock-kind-select {
  max-width: 12rem;
}
.stock-pick-existing-btn {
  width: 100%;
  margin: 0 0 12px;
}
.stock-pick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(50vh, 360px);
  overflow: auto;
  margin: 8px 0 4px;
}
.stock-pick-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.stock-pick-row .stock-row-name {
  grid-column: 1;
  font-weight: 700;
}
.stock-pick-row .stock-row-qty {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.stock-pick-row .stock-row-meta {
  grid-column: 1;
  font-size: 0.75rem;
  opacity: 0.75;
}
.stock-pick-row:active {
  border-color: rgba(255, 204, 0, 0.45);
  background: rgba(255, 204, 0, 0.08);
}
.stock-group-h {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
  margin: 10px 0 4px;
  padding: 0 2px;
}
.stock-undo-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 204, 0, 0.35);
  border-radius: var(--r-sm);
  background: rgba(255, 204, 0, 0.08);
  font-size: 0.8rem;
  font-weight: 600;
}
.stock-undo-bar[hidden] {
  display: none !important;
}
.stock-undo-bar .act {
  margin-left: auto;
}
.outbox-bar,
.stock-outbox-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(90, 170, 255, 0.4);
  border-radius: var(--r-sm);
  background: rgba(90, 170, 255, 0.1);
  color: #b8d9ff;
  font-size: 0.8rem;
  font-weight: 600;
}
#outbox-bar {
  position: sticky;
  top: 0;
  z-index: 41;
}
.outbox-bar[hidden],
.stock-outbox-bar[hidden] {
  display: none !important;
}
.outbox-bar .act,
.stock-outbox-bar .act {
  margin-left: auto;
}
.stock-pack-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
}
.stock-pack-chips button {
  border: 1px solid rgba(255, 204, 0, 0.35);
  background: rgba(255, 204, 0, 0.08);
  color: var(--gold-hi);
  border-radius: var(--r-pill);
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}
.stock-moves-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}
.stock-requests,
.stock-apply,
.stock-recon {
  margin-top: 10px;
  padding: 8px 0;
}
.stock-requests-title {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.stock-request-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.82rem;
}
.stock-apply-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.stock-apply-head .stock-requests-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.stock-apply-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.stock-apply-search-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 204, 0, 0.28);
  background: rgba(12, 14, 20, 0.72);
  color: #f2f4f8;
  padding: 0 12px;
  font-size: 0.9rem;
  font-family: var(--font-ui, Inter, sans-serif);
}
.stock-apply-search-input:focus {
  outline: none;
  border-color: rgba(255, 204, 0, 0.55);
}
.stock-apply-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.stock-apply-main {
  flex: 1;
  min-width: 0;
}
.stock-apply-title {
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.25;
}
.stock-apply-meta,
.stock-apply-match {
  font-size: 0.72rem;
  opacity: 0.7;
  margin-top: 2px;
}
.stock-apply-match {
  color: var(--gold-hi);
  opacity: 0.9;
}
.stock-apply-btn {
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 36px;
  padding: 6px 10px;
  font-size: 0.78rem;
}
.stock-apply-actions,
.stock-recon-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.stock-apply-actions .act,
.stock-recon-actions .act {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 0.75rem;
  white-space: nowrap;
}
.stock-recon-col {
  margin: 8px 0 12px;
}
.tire-source-badge {
  margin: 0 0 8px !important;
  font-size: 0.78rem !important;
  opacity: 0.8;
}
.stock-van-field {
  position: relative;
  margin: 0 0 8px;
}
.stock-van-suggest {
  list-style: none;
  margin: 6px 0 0;
  padding: 6px;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 220px;
  overflow: auto;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 14, 20, 0.98);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  z-index: 12;
}
.stock-van-suggest[hidden] {
  display: none !important;
}
.stock-van-suggest-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.stock-van-suggest-item .spl {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: var(--ink);
}
.stock-van-suggest-item .sps {
  font-size: 0.72rem;
  color: var(--mute);
}
.stock-van-suggest-item.is-active,
.stock-van-suggest-item:active {
  background: rgba(255, 204, 0, 0.12);
}
.stock-van-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 6px;
}
.stock-van-chip {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  border-radius: var(--r-pill);
  padding: 7px 11px;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}
.stock-van-chip.on {
  border-color: rgba(255, 204, 0, 0.45);
  background: rgba(255, 204, 0, 0.14);
  color: var(--gold-hi);
}
.stock-van-custom {
  margin: 0 0 4px;
}
.stock-neg-warn {
  margin-top: 8px;
  font-size: 0.78rem;
  color: #ff8a7a;
}
.stock-dup-warn {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 196, 0, 0.45);
  background: rgba(255, 196, 0, 0.12);
  color: var(--gold-hi);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.35;
}
.stock-dup-warn[hidden] {
  display: none !important;
}
.stock-edit-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 204, 0, 0.35);
  border-radius: var(--r-sm);
  background: rgba(255, 204, 0, 0.08);
  color: var(--gold-hi);
  font-weight: 650;
  font-size: 0.9rem;
  cursor: pointer;
}
.stock-delete-link {
  border-color: rgba(255, 90, 90, 0.45);
  background: rgba(255, 60, 60, 0.1);
  color: #ff9a9a;
}
.stock-delete-warn {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 60, 60, 0.08);
  border: 1px solid rgba(255, 90, 90, 0.28);
  color: rgba(255, 220, 220, 0.92);
  font-size: 0.9rem;
  line-height: 1.35;
}
.stock-row-name {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-ui, Inter, sans-serif);
}
.stock-row-meta {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  opacity: 0.72;
  font-family: var(--font-ui, Inter, sans-serif);
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  word-break: break-word;
}
.stock-row-qty {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--gold);
  align-self: start;
  flex-shrink: 0;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  line-height: 1.1;
}
.stock-row-onhand {
  display: block;
}
.stock-row-open {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  background: rgba(90, 170, 255, 0.18);
  color: #b8d9ff;
  border: 1px solid rgba(90, 170, 255, 0.35);
}
.stock-row.is-open-pack {
  border-color: rgba(90, 170, 255, 0.35);
}
.stock-row-pack {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-size: 0.65rem;
  background: rgba(255, 204, 0, 0.14);
  color: var(--gold-hi);
  vertical-align: middle;
  white-space: nowrap;
}
.stock-request-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  margin: 0 0 6px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
}
.stock-request-main {
  flex: 1 1 10rem;
  min-width: 0;
}
.stock-request-note {
  margin-top: 4px;
  font-size: 0.78rem;
  opacity: 0.8;
}
.stock-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.stock-moves {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stock-move-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 8px;
  font-size: 0.78rem;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.28);
  font-family: var(--font-ui, Inter, sans-serif);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.stock-move-main { flex: 1 1 12rem; min-width: 0; }
.stock-move-title {
  font-weight: 600;
  line-height: 1.3;
}
.stock-move-row .dir-in { color: var(--ok); }
.stock-move-row .dir-out { color: #ff6b4a; }
.stock-move-when {
  opacity: 0.55;
  white-space: nowrap;
}
.stock-move-meta {
  margin-top: 3px;
  font-size: 0.7rem;
  line-height: 1.35;
  opacity: 0.72;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.stock-move-meta-sep {
  opacity: 0.55;
}
.stock-move-who {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--gold-hi);
  font: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255, 224, 102, 0.35);
  text-underline-offset: 2px;
}
.stock-move-who.is-static {
  color: inherit;
  text-decoration: none;
  cursor: default;
}
.stock-move-who:focus-visible {
  color: #fff3a8;
  text-decoration-color: rgba(255, 243, 168, 0.7);
  outline: none;
}
@media (hover: hover) and (pointer: fine) {
  .stock-move-who:hover {
    color: #fff3a8;
    text-decoration-color: rgba(255, 243, 168, 0.7);
    outline: none;
  }
}
.stock-move-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.stock-move-muted {
  opacity: 0.55;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.stock-move-row.is-reversed {
  opacity: 0.62;
}
.stock-sheet-overlay {
  position: fixed;
  inset: 0;
  /* Above van sheet so Follow-up / Stock confirm opens in front */
  z-index: var(--z-stock);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.stock-sheet-overlay[hidden] { display: none !important; }
.stock-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 1;
}
.stock-sheet-overlay.opening .stock-sheet-backdrop {
  animation: backdrop-in 0.28s var(--ease-out) both;
}
.stock-sheet-overlay.closing .stock-sheet-backdrop {
  opacity: 0;
  transition: opacity var(--sheet-close-ms) var(--ease-in);
}
.stock-sheet-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  max-height: calc(
    min(calc(var(--tg-vh, 100dvh) * 0.88), 640px) - var(--kb-inset, var(--stock-kb, 0px))
  );
  overflow: hidden;
  overscroll-behavior: contain;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 14px 16px 0;
  background: linear-gradient(180deg, var(--navy-hi) 0%, var(--panel) 42%, var(--bg) 100%);
  border: 1px solid rgba(255, 204, 0, 0.28);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  transform: translate3d(0, 0, 0);
  transition: transform var(--sheet-close-ms) var(--ease-in);
}
.stock-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 8px;
}
.stock-sheet-overlay.opening .stock-sheet-panel {
  animation: stock-sheet-up var(--dur-med) var(--ease-out) both;
  transition: none;
}
.stock-sheet-overlay.closing .stock-sheet-panel {
  transform: translate3d(0, 105%, 0);
  transition: transform var(--sheet-close-ms) var(--ease-in);
  will-change: transform;
}
@keyframes stock-sheet-up {
  from { transform: translate3d(0, 100%, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-max) .stock-sheet-overlay.opening .stock-sheet-panel,
  body:not(.motion-max) .stock-sheet-overlay.closing .stock-sheet-panel,
  body:not(.motion-max) .compare-modal.opening .compare-card {
    animation: none !important;
    transition: none !important;
  }
}
/* Real close affordance ? full-width hit zone, pill is the ::before */
.stock-sheet-grab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 26px;
  margin: -8px 0 4px;
  cursor: grab;
  touch-action: none;
}
.stock-sheet-grab::before {
  content: '';
  width: 42px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--gold);
  opacity: 0.9;
  transition: background 0.18s ease, opacity 0.18s ease, filter 0.18s ease;
}
.stock-sheet-grab:active::before,
.stock-sheet-overlay.dragging .stock-sheet-grab::before {
  opacity: 1;
  filter: brightness(1.12);
}
@media (hover: hover) and (pointer: fine) {
  .stock-sheet-grab:hover::before {
    opacity: 1;
    filter: brightness(1.12);
  }
}
.stock-sheet-overlay.dragging .stock-sheet-panel {
  transition: none;
}
.stock-sheet-overlay.dragging .stock-sheet-backdrop {
  transition: none;
}
.stock-sheet-grab:active {
  cursor: grabbing;
}
.stock-sheet-title {
  font-family: var(--font-tag, Khand, sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.stock-sheet-sub {
  font-size: 0.78rem;
  opacity: 0.7;
  margin-bottom: 12px;
  font-family: var(--font-ui, Inter, sans-serif);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.stock-sheet-body label {
  display: block;
  font-size: 0.72rem;
  opacity: 0.7;
  margin: 10px 0 4px;
}
.stock-sheet-body input,
.stock-sheet-body select {
  width: 100%;
  min-height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 204, 0, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: #f2f4f8;
  padding: 0 10px;
  font-size: max(16px, 0.95rem);
}
.stock-qty-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.stock-pack-loose {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.stock-pack-loose > label {
  margin-top: 10px;
}
.stock-pack-loose > label:first-child {
  margin-top: 0;
}
.stock-qty-total {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 204, 0, 0.12);
  border: 1px solid rgba(255, 204, 0, 0.28);
  color: var(--gold-hi);
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--mono, 'JetBrains Mono', monospace);
}
.stock-qty-total.is-zero {
  background: rgba(255, 80, 80, 0.12);
  border-color: rgba(255, 100, 100, 0.35);
  color: #ff9a9a;
}
.stock-qty-row button {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 204, 0, 0.35);
  background: rgba(255, 204, 0, 0.1);
  color: var(--gold);
  font-size: 1.3rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
  padding-top: 1px; /* optical for ?/+ */
}
.stock-qty-row input {
  text-align: center;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-weight: 800;
  font-size: 1.2rem;
}
.stock-sheet-actions {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  margin: 0 -16px;
  padding: 12px 16px calc(14px + var(--safe-b, 0px) + var(--stock-kb, 0px));
  background: linear-gradient(180deg, var(--navy-hi) 0%, var(--panel) 50%, var(--bg) 100%);
  border-top: 1px solid rgba(255, 204, 0, 0.2);
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.65);
}
.stock-sheet-actions .act { flex: 1; min-height: 44px; }
.stock-open-chip {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 160, 60, 0.18);
  color: #ffc070;
  font-size: 0.72rem;
}
/* Fullscreen scanner — is-open wins over [hidden]; above stock sheet (field alias scan) */
.stock-scanner {
  position: fixed;
  inset: 0;
  z-index: var(--z-scanner);
  background: #000;
  display: none;
}
.stock-scanner.is-open {
  display: block !important;
}
.stock-scanner[hidden]:not(.is-open) {
  display: none !important;
}
.stock-scanner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
/* Horizontal laser guide — align thin 1D barcode with this mid strip (~18% of frame) */
.stock-scanner-aim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stock-scanner-aim-line {
  width: min(96%, 520px);
  height: 2px;
  background: rgba(255, 220, 80, 0.9);
  /* ~9% of viewport each side ≈ thin ROI h:0.18 */
  box-shadow: 0 0 0 min(9vh, 72px) rgba(0, 0, 0, 0.42);
  border-radius: 1px;
}
.stock-scanner-chrome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 16px calc(16px + var(--safe-b));
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.stock-scanner-hint {
  color: #fff;
  font-weight: 600;
  text-align: center;
}
.stock-scanner-batch {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(12, 14, 18, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.stock-scanner-batch[hidden] {
  display: none !important;
}
.stock-scanner-batch-summary {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  text-align: left;
}
.stock-scanner-done {
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 72px;
  font-weight: 700;
}
.stock-scanner-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.stock-scanner-tool.is-on {
  border-color: rgba(255, 204, 0, 0.65);
  color: var(--gold);
  background: rgba(255, 204, 0, 0.14);
}
.stock-batch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.stock-batch-row:last-child {
  border-bottom: none;
}
.stock-batch-row-main {
  flex: 1;
  min-width: 0;
}
.stock-batch-row-name {
  font-weight: 650;
  font-size: 0.95rem;
}
.stock-batch-row-meta {
  font-size: 0.78rem;
  color: var(--mute, #9aa3b2);
  margin-top: 2px;
}
.stock-batch-row.unknown .stock-batch-row-name {
  color: #ffb020;
}
.stock-batch-qty {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.stock-batch-qty button {
  min-width: 36px;
  min-height: 36px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
  padding-top: 1px;
}
.stock-batch-qty input {
  width: 48px;
  text-align: center;
  min-height: 36px;
}

.empty-row.compact,
.empty-hint {
  padding: 14px 4px !important;
  opacity: 0.65;
  font-size: 0.85rem;
}


.stock-scan-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -2px 0 12px;
}
.stock-scan-tip {
  font-size: 0.7rem;
  opacity: 0.6;
  flex: 1 1 140px;
}
.stock-access-panel {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* TG WebView: author display:flex beats [hidden] ? force hide */
.stock-access-panel[hidden],
body.stock-outbound-only #stock-access-panel {
  display: none !important;
}
.stock-access-title {
  font-weight: 700;
  font-size: 0.9rem;
}
.stock-access-hint {
  margin: 0;
  font-size: 0.75rem;
  opacity: 0.7;
  line-height: 1.35;
}
.stock-access-toggle,
.stock-access-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
}
.stock-access-toggle {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.stock-access-field input {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
}
.stock-access-meta {
  font-size: 0.72rem;
  opacity: 0.65;
}
.stock-access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ?? Bay lineup: parts gate / wait / kit hints ?? */
.van-card .lineup-chip,
.lineup-chip {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
  border: 1px solid transparent;
  cursor: pointer;
}
.lineup-chip.gate-ready {
  color: #9fefb0;
  background: rgba(60, 180, 90, 0.18);
  border-color: rgba(80, 200, 110, 0.35);
}
.lineup-chip.gate-need {
  color: #ffc978;
  background: rgba(220, 140, 40, 0.18);
  border-color: rgba(230, 160, 50, 0.35);
}
.lineup-chip.gate-wait {
  color: #9ec5ff;
  background: rgba(70, 130, 220, 0.16);
  border-color: rgba(90, 150, 230, 0.35);
}
.lineup-chip.wait-parts {
  color: #ffc978;
  background: rgba(220, 140, 40, 0.12);
  border-color: rgba(230, 160, 50, 0.28);
}
.lineup-chip.wait-foss {
  color: #c9b6ff;
  background: rgba(140, 100, 220, 0.14);
  border-color: rgba(160, 120, 240, 0.3);
}
.lineup-chip.wait-dsp {
  color: #9ed7ff;
  background: rgba(60, 150, 210, 0.14);
  border-color: rgba(80, 170, 230, 0.3);
}
.lineup-more-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.lineup-more-row .act {
  flex: 1 1 140px;
}
.due-kit-hints {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.due-kit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.kit-chip {
  display: inline-block;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}
.kit-chip.kit-ok {
  color: #9fefb0;
  border-color: rgba(80, 200, 110, 0.35);
  background: rgba(60, 180, 90, 0.12);
}
.kit-chip.kit-short {
  color: #ffb4a8;
  border-color: rgba(230, 90, 70, 0.35);
  background: rgba(200, 60, 50, 0.14);
}
.kit-chip.kit-unk {
  color: rgba(255, 255, 255, 0.7);
}
.svc-stock-slot {
  margin: 8px 0 2px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.svc-stock-slot.is-short {
  border-color: rgba(230, 90, 70, 0.4);
  background: rgba(200, 60, 50, 0.1);
}
.svc-stock-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 6px;
}
.svc-stock-slot.is-short .svc-stock-kicker {
  color: #ffb4a8;
}
.board-more-item.on-walk {
  color: var(--gold);
}

/* Parts gate / Waiting on dropdowns */
.lineup-more-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.lineup-select-field {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.lineup-select-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.lineup-select,
.board-more-select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  appearance: auto;
}
.lineup-select-btn,
.board-more-filter-btn {
  width: 100%;
  max-width: none;
  justify-content: center;
  min-height: 40px;
  font-size: 0.84rem;
  font-weight: 650;
}
.board-more-select-wrap {
  display: block;
  padding: 4px 10px 10px;
}
.board-more-menu .lineup-select-btn,
.board-more-menu .board-more-filter-btn {
  width: calc(100% - 8px);
  margin: 0 4px;
}
.stock-sheet-body .gomo-choice-chip {
  width: 100%;
  max-width: none;
  justify-content: flex-start;
  min-height: 44px;
  margin-bottom: 8px;
}
.board-more-item.board-more-done {
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 8px 8px;
  color: var(--gold);
  font-weight: 700;
  justify-content: center;
}
.board-more-item.board-more-done .check {
  display: none;
}

/* Empty-state recovery CTAs */
.empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.empty-act {
  flex: 0 1 auto;
  min-height: 36px !important;
  padding: 8px 14px !important;
  font-family: var(--font-ui, var(--font)) !important;
  font-size: 0.78rem !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

/* One-shot pull-to-close coach on van handle */
.van-pull-hint {
  text-align: center;
  font-family: var(--font-ui, var(--font));
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 204, 0, 0.75);
  margin-top: 6px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
  pointer-events: none;
}
.van-pull-hint.on {
  opacity: 1;
  transform: translateY(0);
}
.van-pull-hint[hidden] {
  display: none !important;
}

/* Filter button: active Parts gate / Waiting badge */
.lot-filter-btn .lot-filter-extra {
  font-family: var(--font-ui, var(--font));
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
  white-space: nowrap;
}
.lot-filter-btn.has-extra-filter {
  border-color: rgba(255, 204, 0, 0.45);
}

/* Due tab lineup controls (Parts gate / Waiting) */
.lineup-due-row {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
}
.lineup-due-row .board-more-label {
  margin: 0 0 6px;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.lineup-due-row .lineup-more-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Bay Follow-ups */
.fu-hub-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.fu-hub-head .pipe-bar {
  flex: 1;
  margin: 0;
  min-width: 0;
}
.fu-hub-add {
  flex-shrink: 0;
  white-space: nowrap;
}
.fu-hub-card .svc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fu-van-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
}
.fu-van-group-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 2px 0;
}
.fu-van-group-label {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--gold-hi);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0;
  cursor: pointer;
}
.fu-van-group-count {
  font-size: 0.72rem;
  opacity: 0.62;
}
.fu-hub-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.fu-hub-row .rail {
  flex-shrink: 0;
}
.fu-hub-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 12px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.fu-hub-main .body {
  flex: 1;
  min-width: 0;
}
.fu-hub-main .label-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fu-hub-closed {
  opacity: 0.72;
}
.fu-done-btn {
  flex-shrink: 0;
  align-self: center;
  margin: 0 10px 0 0;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(109, 222, 139, 0.4);
  background: rgba(109, 222, 139, 0.12);
  color: #8aef9f;
  font-weight: 750;
  font-size: 0.78rem;
  cursor: pointer;
}
.fu-done-btn:active {
  transform: scale(0.97);
}
.fu-row-wrap {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.fu-row-wrap .fu-row {
  flex: 1;
  min-width: 0;
}
.fu-row-wrap .fu-done-btn {
  margin: 0;
  align-self: center;
}
.fu-van-head {
  margin: 0 0 10px;
}
.fu-van-list,
.fu-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fu-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 204, 0, 0.18);
  background: linear-gradient(165deg, rgba(28, 34, 48, 0.9), rgba(12, 14, 20, 0.95));
  color: inherit;
  cursor: pointer;
}
.fu-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.fu-title {
  font-weight: 700;
  font-size: 0.95rem;
}
.fu-meta,
.fu-age {
  font-size: 0.72rem;
  opacity: 0.7;
}
.fu-age {
  margin-left: auto;
}
.fu-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.08);
}
.fu-st-open { color: #c8d0dc; }
.fu-st-wait { color: #ffc857; background: rgba(255, 200, 87, 0.12); }
.fu-st-ready { color: #6dde8b; background: rgba(109, 222, 139, 0.12); }
.fu-st-closed { color: rgba(255, 255, 255, 0.45); }
.fu-st-hold { color: #ff6b5a; background: rgba(255, 107, 90, 0.14); }
.fu-st-note { color: rgba(200, 210, 230, 0.85); background: rgba(160, 170, 190, 0.12); }

/* Van title pin pill */
.van-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.van-title-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.van-title-pin {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 204, 0, 0.35);
  background: rgba(255, 204, 0, 0.08);
  color: rgba(255, 220, 120, 0.75);
  border-radius: var(--r-pill);
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}
.van-title-pin.is-pinned {
  background: rgba(255, 204, 0, 0.22);
  color: var(--gold);
  border-color: rgba(255, 204, 0, 0.65);
}

.bay-note-type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}
.bay-note-type.grok-suggest {
  outline: 1px solid rgba(255, 204, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 204, 0, 0.2);
}
.bay-note-grok-hint {
  display: block;
  font-size: 0.68rem;
  color: var(--gold);
  margin-top: 2px;
  font-weight: 600;
}
.deduct-via-grok {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1a1a1a;
  background: var(--gold);
}
.job-draft-preview {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.35;
  margin: 0;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  max-height: 40vh;
  overflow: auto;
}
.foss-polish-block {
  margin-top: 12px;
}
.foss-polish-block .job-draft-text {
  margin-bottom: 8px;
}

.deduct-row {
  margin: 10px 0;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.deduct-row-head {
  margin-bottom: 6px;
}
.deduct-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}
.deduct-controls .stock-qty-row {
  margin-top: 0;
  flex: 0 0 auto;
}
.deduct-skip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  min-height: 44px;
  padding: 0 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--mute);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex: 0 0 auto;
  white-space: nowrap;
}
.deduct-skip input[type='checkbox'],
.deduct-skip-cb {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--gold);
  flex-shrink: 0;
}

.snapshot-block-slim .action-row {
  margin-top: 4px;
}

.stock-order {
  margin-top: 8px;
}
.stock-order-sec {
  margin-bottom: 14px;
}
.stock-order-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 6px 0;
}
.stock-order-main {
  flex: 1 1 auto;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stock-order-mark {
  flex: 0 0 auto;
  min-width: 72px;
  align-self: center;
}
.fu-st-part { color: var(--gold-hi); background: rgba(255, 204, 0, 0.12); }
.fu-detail-badges,
.fu-status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.fu-note {
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.85rem;
}
.fu-note.is-system {
  opacity: 0.75;
  font-size: 0.78rem;
}
.fu-note-meta {
  font-size: 0.68rem;
  opacity: 0.55;
  margin-bottom: 2px;
}
.fu-thread {
  max-height: 42vh;
  overflow: auto;
  margin-bottom: 8px;
}

/* Tasks (Google Tasks?style) ? Sense hub */
.tasks-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
}
.tasks-section-h {
  margin: 14px 0 6px;
  padding: 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute);
}
.tasks-section-h:first-child {
  margin-top: 4px;
}
.task-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 4px 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.task-row.is-overdue .task-due {
  color: #ff6b5a;
}
.task-row.is-done .task-title {
  text-decoration: line-through;
  opacity: 0.55;
}
.task-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: var(--gold);
  font-size: 0.72rem;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.task-row.is-done .task-check {
  border-color: var(--gold);
  background: rgba(255, 204, 0, 0.18);
}
.task-main {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
.task-title {
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink);
}
.task-notes {
  margin-top: 2px;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin-top: 4px;
  font-size: 0.68rem;
  color: var(--mute);
}
.rem-due-hint {
  margin: 4px 0 8px;
  font-size: 0.68rem;
}
.task-due {
  color: #7eb6ff;
  font-weight: 600;
}
.task-due.overdue {
  color: #ff6b5a;
}
.task-van {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--gold);
}
.task-who {
  opacity: 0.85;
}
.task-star {
  color: var(--gold);
}
.task-star-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-top: -2px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.22);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.task-star-btn.on {
  color: var(--gold);
}
.task-del-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-top: -2px;
  border: 0;
  background: transparent;
  color: rgba(255, 138, 138, 0.55);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.task-del-btn:active {
  color: #ff6b5a;
}
.rem-delete-act {
  color: #ff8a8a !important;
  border-color: rgba(255, 106, 90, 0.35) !important;
}
.rem-van-del {
  color: #ff8a8a !important;
  border-color: rgba(255, 106, 90, 0.35) !important;
}
.rem-due-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
  gap: 8px;
  margin: 8px 0;
  align-items: end;
}
.rem-due-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rem-due-cell label {
  margin: 0 0 4px;
}
.stock-sheet-body .rem-due-input,
.rem-due-input,
.gomo-field,
.gomo-picker-btn {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  height: 48px;
  padding: 0 14px;
  font-size: 0.95rem;
  line-height: 1.2;
  box-sizing: border-box;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 14, 20, 0.72);
  color: var(--ink);
  font-family: var(--font-ui, var(--font));
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.18s ease;
}
.gomo-picker-btn.on {
  border-color: rgba(255, 204, 0, 0.72);
  color: var(--gold);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.rem-due-lab {
  display: block;
  margin: 0 0 4px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}
.gomo-choice-list--picker {
  padding: 4px 8px 12px;
  /* Time lists are long ? force scroll region in TG WebView */
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  min-height: 0;
}
/* Date: pin month/dow/foot; only the day grid scrolls */
.gomo-choice-list--date {
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(8px + var(--safe-b, 0px));
}
.gomo-cal {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.gomo-cal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.gomo-cal-label {
  flex: 1;
  text-align: center;
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
}
.gomo-cal-nav {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--gold);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.gomo-cal-dow {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.gomo-cal-dow span {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--mute);
  padding: 4px 0;
}
.gomo-cal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-bottom: 4px;
}
.gomo-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.gomo-cal-pad {
  min-height: 40px;
}
.gomo-cal-day {
  min-height: 40px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.gomo-cal-day.today {
  border-color: rgba(255, 204, 0, 0.45);
}
.gomo-cal-day.on {
  background: var(--pill-on-bg, var(--gold));
  color: var(--pill-on-fg, #0e0e0e);
  border-color: var(--pill-on-border, var(--gold));
  box-shadow: var(--pill-on-inset);
}
.gomo-cal-day:active {
  transform: scale(0.96);
}
.gomo-cal-foot {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}
.stock-sheet-body .gomo-field:focus,
.stock-sheet-body .rem-due-input:focus,
.rem-due-input:focus,
.gomo-field:focus,
.gomo-field:focus-visible,
.rem-due-input:focus-visible {
  outline: none;
  border-color: rgba(255, 204, 0, 0.72);
  box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.18);
  background: rgba(14, 16, 24, 0.92);
}
/* WebKit date/time pickers ignore width unless clipped */
.stock-sheet-body input.rem-due-input[type='date'],
.stock-sheet-body input.rem-due-input[type='time'],
input.rem-due-input[type='date'],
input.rem-due-input[type='time'] {
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
}
.rem-due-quick {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 6px;
  margin: 2px 0 8px;
  padding: 2px 0 4px;
  scroll-padding-inline: 8px;
  overscroll-behavior-x: contain;
}
.rem-due-quick::-webkit-scrollbar {
  display: none;
}
.rem-due-quick .sort-chip {
  flex: 0 0 auto;
  white-space: nowrap;
}
.rem-notify-lab {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  font-size: 0.85rem;
  color: var(--mute);
}
.rem-notify-lab input {
  width: auto;
  margin: 0;
  min-height: 0;
  flex-shrink: 0;
}

/* Shop reminders ? Sense hub + van card */
.rem-help {
  margin: 6px 0 8px;
  font-size: 0.78rem;
  opacity: 0.62;
}
.rem-row-wrap {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 6px;
}
.rem-row-wrap .rem-row {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.22);
  color: inherit;
}
.rem-row-wrap .fu-done-btn {
  flex-shrink: 0;
  align-self: center;
}
.rem-row-top {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
  font-size: 0.68rem;
  opacity: 0.75;
}
.rem-van {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--gold);
}
.rem-van.rem-shop {
  color: var(--mute, #9aa3b5);
}
.rem-text {
  font-size: 0.88rem;
  line-height: 1.35;
}
.rem-meta,
.rem-due-tag {
  font-size: 0.68rem;
  opacity: 0.7;
}
.rem-overdue {
  border-color: rgba(255, 107, 90, 0.35);
}
/* Admin ? feature access */
.admin-gear:not([hidden]) {
  color: var(--gold, #ffcc00);
}
.admin-panel-body {
  padding: 0 2px 24px;
}
.admin-group {
  margin: 14px 0 18px;
}
.admin-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.88rem;
}
.admin-toggle-lab {
  flex: 1;
  line-height: 1.3;
}
.admin-toggle-row input[type='checkbox'] {
  width: 22px;
  height: 22px;
  accent-color: #e6b800;
}
.admin-cycle-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 8px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.admin-cycle-row.on .admin-cycle-val {
  color: #34c759;
}
.admin-cycle-row.off .admin-cycle-val {
  color: #ff6b4a;
}
.admin-cycle-val {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.85;
  text-transform: uppercase;
}
.admin-person-meta {
  margin: 10px 2px 4px;
  font-size: 0.85rem;
}
.admin-select-lab {
  display: block;
  margin: 12px 2px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute);
}
.admin-person-select {
  width: 100%;
  margin: 0 0 8px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font-size: 0.95rem;
  font-family: inherit;
}
.admin-person-select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.admin-add-manual {
  margin: 10px 2px 4px;
  font-size: 0.82rem;
  color: var(--mute);
}
.admin-add-manual summary {
  cursor: pointer;
  user-select: none;
}
.admin-roster-chips {
  flex-wrap: wrap;
  margin-top: 8px;
}
.admin-meta {
  margin-top: 16px;
}


/* FOSS lifecycle badges */
.foss-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}
.foss-chip .foss-life-badge,
.foss-life-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.foss-life-copied {
  background: rgba(255, 204, 0, 0.18);
  color: var(--gold);
}
.foss-life-submitted {
  background: rgba(52, 199, 89, 0.18);
  color: #34c759;
}
.foss-submit-btn {
  font-size: 0.72rem !important;
  padding: 4px 10px !important;
  min-height: 28px;
}
.foss-submit-btn.on {
  opacity: 0.75;
  border-color: rgba(52, 199, 89, 0.45);
  color: #34c759;
}

/* Needs-you kind rails */
.needs-card.needs-followup .rail { background: #5ac8fa; }
.needs-card.needs-task .rail { background: var(--gold); }
.needs-card.needs-stock_req .rail { background: #ff9f0a; }

.rem-assign-people {
  margin-top: 8px;
}
.rem-people-lab {
  display: block;
  margin-bottom: 4px;
  font-size: 0.78rem;
  color: var(--mute);
}
.rem-people-chips {
  flex-wrap: wrap;
  gap: 6px;
}

/* ============================================================
   Selected pill look = Stock Inbound/Outbound (gold fill only).
   No ::before rings / outer box-shadow bloom ? TG WebView paints
   those as rectangles; Stock's plain gold fill is the target look.
   ============================================================ */

/* Primary selected pills ? solid gold, dark text, subtle inset only */
.bay-tab.active,
.sort-chip.on,
.seg.on,
.chip.on,
.stock-mode.on,
.stock-kind-btn.on,
.fu-filter-btn.on,
.gomo-choice-item.on,
.dsp-chip.on,
.filter-chip.on,
.heat-chip.on,
.tb-chip.on:not([data-heat='shop']):not([data-heat='both']):not([data-heat='provisional']) {
  background: var(--pill-on-bg, var(--gold));
  color: var(--pill-on-fg, #0e0e0e);
  border-color: var(--pill-on-border, var(--gold));
  box-shadow: var(--pill-on-inset);
  filter: none !important;
  text-shadow: none;
}

.bay-tab.active,
.sort-chip.on,
.seg.on,
.chip.on,
.net-chip.on,
.act.gold,
.money-made-range[open] > .money-made-range-sum,
.tb-chip.on:not([data-heat='shop']):not([data-heat='both']):not([data-heat='provisional']),
.dsp-chip.on,
.filter-chip.on,
.heat-chip.on,
.stock-van-chip.on,
.board-more-item.on,
.boards-more-item.on,
.stock-more-menu button.on,
.layout-arrange-zone button.on,
.gomo-choice-item.on {
  position: relative;
  z-index: 0;
}

/* Kill any legacy halo plates and pill decorative layers */
.bay-tab.active::before,
.sort-chip.on::before,
.seg.on::before,
.chip.on::before,
.net-chip.on::before,
.act.gold::before,
.money-made-range[open] > .money-made-range-sum::before,
.tb-chip.on::before,
.dsp-chip.on::before,
.filter-chip.on::before,
.heat-chip.on::before,
.stock-van-chip.on::before,
.board-more-item.on::before,
.boards-more-item.on::before,
.stock-more-menu button.on::before,
.layout-arrange-zone button.on::before,
.gomo-choice-item.on::before,
.stock-kind-btn.on::before,
.fu-filter-btn.on::before,
.stock-mode.on::before {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
  filter: none !important;
  background: none !important;
}

.bay-tab.active::after,
.seg.on::after {
  content: none !important;
  display: none !important;
}

/* Strip outer glow bloom from selected chips (focus ring is separate) */
.sort-chip.on:not(:focus-visible),
.seg.on:not(:focus-visible),
.chip.on:not(:focus-visible),
.bay-tab.active:not(:focus-visible),
.stock-kind-btn.on:not(:focus-visible),
.fu-filter-btn.on:not(:focus-visible) {
  outline: none;
}


/* ============================================================
   UI polish pack v311 ? glyphs, tokens, sheets, motion touches
   ============================================================ */

/* Text-glyph controls: flex + line-height:0 (matches SVG icon recipe) */
.stock-qty-row button,
.stock-batch-qty button,
.stock-barcode-remove,
.layout-arrange-move button,
.help-close,
.walk-bar.lot-walk-theater .walk-nav,
.walk-bar.lot-walk-theater .walk-exit,
.ai-pulse-chevron,
.empty-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0 !important;
  box-sizing: border-box;
}

/* Thin custom scrollbar on sheet bodies (chip strips stay hidden) */
.stock-sheet-body,
.help-body,
.van-sheet-panel,
.gomo-choice-body {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.stock-sheet-body::-webkit-scrollbar,
.help-body::-webkit-scrollbar,
.van-sheet-panel::-webkit-scrollbar,
.gomo-choice-body::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.stock-sheet-body::-webkit-scrollbar-thumb,
.help-body::-webkit-scrollbar-thumb,
.van-sheet-panel::-webkit-scrollbar-thumb,
.gomo-choice-body::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: var(--r-pill);
}
.stock-sheet-body::-webkit-scrollbar-track,
.help-body::-webkit-scrollbar-track,
.van-sheet-panel::-webkit-scrollbar-track,
.gomo-choice-body::-webkit-scrollbar-track {
  background: transparent;
}

/* Soften busy card borders inside sheets */
.van-sheet-panel .van-card,
.stock-sheet-body .stock-batch-row,
.help-body .help-sec {
  border-color: rgba(255, 255, 255, 0.08);
}

/* Exit motion for menus / sense panels (transform + opacity, =160ms) */
.stock-more-menu:not([hidden]),
.report-more-menu:not([hidden]),
.sense-more-menu:not([hidden]) {
  animation: menu-in var(--dur-fast) var(--ease-out) both;
}
.stock-more-menu.is-closing,
.report-more-menu.is-closing,
.sense-more-menu.is-closing {
  animation: menu-out var(--dur-fast) var(--ease-in) both;
  pointer-events: none;
}
@keyframes menu-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(6px) scale(0.98); }
}
.sense-panel.on {
  animation: seg-swap var(--dur-fast) var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  .stock-more-menu:not([hidden]),
  .stock-more-menu.is-closing,
  .report-more-menu:not([hidden]),
  .report-more-menu.is-closing,
  .sense-more-menu:not([hidden]),
  .sense-more-menu.is-closing,
  .sense-panel.on {
    animation: none !important;
  }
}
body.motion-chill .stock-more-menu:not([hidden]),
body.motion-chill .stock-more-menu.is-closing,
body.motion-chill .sense-panel.on {
  animation: none !important;
}

/* Help brake CTA ? was inline style */
.help-brake-cta {
  width: 100%;
  margin-top: var(--sp-2);
}

/* Net-sort icon button radius token */
.net-sort-row .net-pull-ai {
  border-radius: var(--r-md) !important;
}

/* ============================================================
   Depth pack v316 ? tactile 3D (bevels + elevation, no blur)
   Appended last so it overrides flattening / solid-pill strips.
   ============================================================ */

/* --- Keycap buttons --- */
.act {
  box-shadow: var(--bevel-up), var(--elev-1);
}
.act.gold {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(122, 90, 0, 0.55),
    0 3px 8px rgba(0, 0, 0, 0.35);
}
.act.primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(120, 10, 10, 0.55),
    0 3px 10px rgba(255, 42, 42, 0.28);
}
.act.ghost {
  box-shadow: var(--bevel-up), var(--elev-1);
}
.act:active:not(:disabled) {
  transform: scale(0.96) translateY(1px);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(0, 0, 0, 0.2);
}
.act.gold:active:not(:disabled) {
  box-shadow:
    inset 0 2px 6px rgba(80, 60, 0, 0.45),
    inset 0 1px 0 rgba(0, 0, 0, 0.18);
}
.act.primary:active:not(:disabled) {
  box-shadow:
    inset 0 2px 6px rgba(80, 0, 0, 0.45),
    inset 0 1px 0 rgba(0, 0, 0, 0.2);
}
.ai-pulse-actions .act.gold,
.global-search-go,
.stock-qty-row button,
.stock-batch-qty button {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(122, 90, 0, 0.5),
    var(--elev-1);
}
.ai-pulse-actions .act.gold:active,
.global-search-go:active,
.stock-qty-row button:active,
.stock-batch-qty button:active {
  transform: scale(0.94) translateY(1px);
  box-shadow: inset 0 2px 5px rgba(80, 60, 0, 0.4);
}

/* --- Raised cards --- */
.van-card {
  box-shadow: var(--bevel-up), var(--elev-2) !important;
}
.van-card:active {
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.35),
    0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
.score-card,
.net-card,
.floor-portal-sync,
.floor-full-sync,
.pm-stack,
.pipe-bar {
  box-shadow: var(--bevel-up), var(--elev-1);
}

/* --- Convex chips / tabs (off) --- */
.seg:not(.on),
.chip:not(.on),
.net-chip:not(.on),
.sort-chip:not(.on),
.bay-tab:not(.active),
.tb-chip:not(.on),
.dsp-chip:not(.on),
.filter-chip:not(.on),
.heat-chip:not(.on),
.stock-mode:not(.on),
.stock-kind-btn:not(.on),
.fu-filter-btn:not(.on),
.stock-van-chip:not(.on) {
  box-shadow: var(--bevel-up), var(--elev-1);
}

/* --- Selected gold pills = keycap --- */
.bay-tab.active,
.sort-chip.on,
.seg.on,
.chip.on,
.net-chip.on,
.stock-mode.on,
.stock-kind-btn.on,
.fu-filter-btn.on,
.gomo-choice-item.on,
.dsp-chip.on,
.filter-chip.on,
.heat-chip.on,
.stock-van-chip.on,
.board-more-item.on,
.boards-more-item.on,
.stock-more-menu button.on,
.layout-arrange-zone button.on,
.tb-chip.on:not([data-heat='shop']):not([data-heat='both']):not([data-heat='provisional']),
.money-made-range[open] > .money-made-range-sum {
  box-shadow: var(--pill-on-depth) !important;
}
.bay-tab.active:active,
.sort-chip.on:active,
.seg.on:active,
.chip.on:active,
.stock-mode.on:active,
.stock-kind-btn.on:active {
  transform: scale(0.96) translateY(1px);
  box-shadow:
    inset 0 2px 6px rgba(80, 60, 0, 0.4),
    inset 0 1px 0 rgba(0, 0, 0, 0.15) !important;
}

/* --- Recessed wells --- */
.search-input,
.search-input.net-search,
.stock-search-input,
.bay-odo-input,
.stock-sheet-body input,
.stock-sheet-body select,
.stock-sheet-body textarea,
.stock-qty-row input,
.stock-batch-qty input,
.meter {
  box-shadow: var(--well);
}

/* --- Overlay / sheet lift --- */
.van-sheet-panel,
.stock-sheet-panel,
.help-sheet-panel,
.gomo-choice-panel,
.layout-arrange-panel,
.compare-card,
.bay-odo-card,
.bay-confirm-card,
.board-more-menu,
.stock-more-menu,
.report-more-menu,
.toast {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    var(--elev-3) !important;
}

/* ============================================================
   Modern chrome pack v317 ? surfaces, dock, header (no backdrop-filter)
   ============================================================ */

/* --- Gradient hairline borders (double-background) --- */
.van-card {
  border: 1px solid transparent !important;
  background:
    linear-gradient(145deg, rgba(40, 58, 92, 0.98) 0%, rgba(20, 30, 50, 0.98) 55%, rgba(16, 22, 36, 0.99) 100%) padding-box,
    var(--hairline-gold) border-box !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}
.score-card {
  border: 1px solid transparent !important;
  background:
    linear-gradient(145deg, rgba(36, 54, 86, 0.96), rgba(18, 24, 38, 0.95)) padding-box,
    var(--hairline-gold) border-box !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}
.stock-sheet-panel {
  border: 1px solid transparent !important;
  background:
    linear-gradient(180deg, var(--navy-hi) 0%, var(--panel) 42%, var(--bg) 100%) padding-box,
    var(--hairline-gold) border-box !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}
.help-sheet-panel {
  border: 1px solid transparent !important;
  border-bottom: none !important;
  background:
    var(--surface-1) padding-box,
    var(--hairline-gold) border-box !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}
.gomo-choice-panel,
.layout-arrange-panel {
  border: 1px solid transparent !important;
  border-bottom: none !important;
  background:
    var(--surface-1) padding-box,
    var(--hairline-gold) border-box !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}
.compare-card {
  border: 1px solid transparent !important;
  background:
    var(--panel) padding-box,
    var(--hairline-gold) border-box !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}
/* Van sheet keeps gold top lip; soft hairline on sides via inset */
.van-sheet-panel {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 204, 0, 0.12),
    var(--elev-3) !important;
}

/* --- Board tab dock (recessed rail) --- */
.bay-tabs {
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  padding: 6px !important;
  gap: 4px !important;
  margin-bottom: 14px;
  background:
    var(--surface-2) padding-box,
    var(--hairline-soft) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--well);
}
.bay-tabs > .bay-tab:not(.active),
.bay-tabs > .boards-arrange-chip {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.bay-tabs > .bay-tab.active {
  box-shadow: var(--pill-on-depth), var(--glow-gold) !important;
}

/* Sense chip strip = same dock language */
.sense-mode-row {
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  padding: 6px !important;
  gap: 4px !important;
  background:
    var(--surface-2) padding-box,
    var(--hairline-soft) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--well);
}
.sense-mode-row > .sort-chip:not(.on),
.sense-mode-row > .sense-arrange-chip {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.sense-mode-row > .sort-chip.on {
  box-shadow: var(--pill-on-depth), var(--glow-gold) !important;
}

/* --- Mast + status header --- */
.mast {
  margin-bottom: 4px;
}
.status-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0.12) 30%,
      rgba(255, 255, 255, 0.12) 70%,
      rgba(255, 255, 255, 0.02)
    )
    1;
  background: none;
  min-height: 0;
}
.status-strip .shift-line,
.status-strip .board-asof {
  margin: 0;
}
.status-strip .live-dot {
  margin: 0;
  text-shadow: var(--glow-gold);
}
.status-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.status-actions .board-help,
.status-actions .board-refresh {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  box-shadow: var(--bevel-up), var(--elev-1);
  border-color: rgba(255, 204, 0, 0.22);
  background: var(--surface-2);
}

/* --- Ambient glow accents --- */
.van-fee {
  text-shadow: var(--glow-gold);
}
.act.gold {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(122, 90, 0, 0.55),
    0 3px 8px rgba(0, 0, 0, 0.35),
    var(--glow-gold) !important;
}
.global-search-go {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(122, 90, 0, 0.5),
    var(--elev-1),
    var(--glow-gold) !important;
}
.boards-jump {
  border: 1px solid transparent !important;
  background:
    var(--panel) padding-box,
    var(--hairline-gold) border-box !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow: var(--elev-2), var(--glow-gold);
}

/* --- Light theme (Help ? Theme; opt-in via data-theme=light; default is dark) --- */
html[data-theme='light'] {
  --bg: #f2f3f7;
  --panel: #ffffff;
  --panel2: #e8eaef;
  --ink: #12141a;
  --mute: #5c6170;
  --line: #d0d3db;
  --navy: #e4e8f0;
  --navy-hi: #dce1eb;
  --gold-soft: rgba(255, 204, 0, 0.22);
  --red-soft: rgba(255, 42, 42, 0.12);
  --grad-panel-soft: linear-gradient(180deg, rgba(0, 0, 0, 0.03), transparent 46%);
  --shadow-card: 0 4px 14px rgba(18, 20, 26, 0.08), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  --shadow-lift: 0 14px 36px rgba(18, 20, 26, 0.12), 0 0 0 1px rgba(18, 20, 26, 0.04) inset;
  --bevel-up: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(18, 20, 26, 0.08);
  --elev-1: 0 1px 2px rgba(18, 20, 26, 0.08), 0 2px 6px rgba(18, 20, 26, 0.05);
  --elev-2: 0 2px 4px rgba(18, 20, 26, 0.08), 0 8px 20px rgba(18, 20, 26, 0.08);
  --elev-3: 0 4px 12px rgba(18, 20, 26, 0.1), 0 16px 40px rgba(18, 20, 26, 0.1);
  --well: inset 0 2px 5px rgba(18, 20, 26, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.7);
  --pill-on-depth: var(--pill-on-inset), inset 0 -2px 0 rgba(122, 90, 0, 0.35), var(--elev-1);
  --glass: rgba(255, 255, 255, 0.86);
  --surface-1: linear-gradient(180deg, #ffffff 0%, #f4f5f9 100%);
  --surface-2: linear-gradient(180deg, #f7f8fb 0%, #eef0f5 100%);
  --hairline-gold: linear-gradient(
    165deg,
    rgba(200, 150, 0, 0.45),
    rgba(255, 204, 0, 0.12) 40%,
    rgba(18, 20, 26, 0.08) 70%,
    rgba(255, 42, 42, 0.12)
  );
  --hairline-soft: linear-gradient(180deg, rgba(18, 20, 26, 0.1), rgba(18, 20, 26, 0.03));
  --glow-gold: 0 0 18px rgba(255, 204, 0, 0.28);
  color-scheme: light;
}
html[data-theme='light'] .bg-glow {
  background:
    radial-gradient(ellipse 90% 42% at 50% -8%, rgba(255, 204, 0, 0.12), transparent 58%),
    radial-gradient(ellipse 55% 34% at 100% 36%, rgba(255, 42, 42, 0.04), transparent 52%),
    radial-gradient(ellipse 40% 28% at 0% 70%, rgba(120, 140, 180, 0.12), transparent 55%);
  opacity: 0.85;
}
html[data-theme='dark'] {
  color-scheme: dark;
}

/* ============================================================
   Light theme pack v321 ? hardcoded navy fills / white text / hairlines
   Scoped to html[data-theme='light'] so dark stays untouched.
   ============================================================ */

/* --- 1. Panel surfaces --- */
html[data-theme='light'] .sheet {
  background: linear-gradient(180deg, #ffffff 0%, #f2f4f9 40%, #e9ecf3 100%);
  border-color: rgba(18, 20, 26, 0.1);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(255, 42, 42, 0.08);
}
html[data-theme='light'] .van-sheet-panel {
  /* Solid base + fixed-size cap (same height-independent trick as dark) */
  background-color: #e9edf5;
  background-image: linear-gradient(180deg, #ffffff 0%, #f4f6fa 40%, #e9edf5 100%);
  background-size: 100% 240px;
  background-repeat: no-repeat;
  background-position: top left;
  border-color: rgba(18, 20, 26, 0.12);
  box-shadow: 0 -12px 36px rgba(18, 20, 26, 0.12), 0 0 0 1px rgba(255, 204, 0, 0.1) inset !important;
}
html[data-theme='light'] .gate-card {
  background: linear-gradient(165deg, #ffffff 0%, #eef1f7 100%);
  border-color: rgba(200, 150, 0, 0.35);
}

/* --- 2. Board cards --- */
html[data-theme='light'] .van-card {
  border-color: rgba(18, 20, 26, 0.1) !important;
  background:
    linear-gradient(145deg, #ffffff 0%, #f2f4f9 55%, #e9edf5 100%) padding-box,
    var(--hairline-gold) border-box !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  color: var(--ink);
}
html[data-theme='light'] .van-card:active {
  box-shadow:
    inset 0 2px 8px rgba(18, 20, 26, 0.1),
    0 1px 4px rgba(18, 20, 26, 0.08) !important;
}
html[data-theme='light'] .score-card {
  border-color: rgba(200, 150, 0, 0.35) !important;
  background:
    linear-gradient(145deg, #ffffff 0%, #f2f4f9 100%) padding-box,
    var(--hairline-gold) border-box !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  color: var(--ink);
}
html[data-theme='light'] .net-card {
  background:
    linear-gradient(90deg, rgba(255, 204, 0, 0.08), transparent 40%),
    rgba(255, 255, 255, 0.92);
  border-color: rgba(18, 20, 26, 0.1);
  color: var(--ink);
}
html[data-theme='light'] .job-cards .job-card,
html[data-theme='light'] .job-cards-wrap .job-card {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(18, 20, 26, 0.1);
  color: var(--ink);
}
html[data-theme='light'] .floor-block {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(18, 20, 26, 0.1);
  box-shadow: 0 2px 10px rgba(18, 20, 26, 0.06);
  color: var(--ink);
}
html[data-theme='light'] .vsec {
  background: rgba(18, 20, 26, 0.04);
  border-color: rgba(18, 20, 26, 0.08);
}
html[data-theme='light'] .pipe-bar.pipe-quiet {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(18, 20, 26, 0.1);
}
html[data-theme='light'] .stock-count-banner {
  background: rgba(255, 204, 0, 0.16);
  border-color: rgba(180, 125, 0, 0.34);
  color: #6b4a00;
}
html[data-theme='light'] .stock-dir-btn {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(18, 20, 26, 0.14);
  color: var(--mute);
}
html[data-theme='light'] .stock-dir-btn.on {
  background: var(--pill-on-bg, var(--grad-gold));
  border-color: rgba(160, 110, 0, 0.48);
  color: var(--pill-on-fg);
}
html[data-theme='light'] .stock-tool-row {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(18, 20, 26, 0.12);
  box-shadow: 0 1px 3px rgba(18, 20, 26, 0.06);
}
html[data-theme='light'] .stock-tool-row:active {
  background: rgba(255, 204, 0, 0.12);
}
html[data-theme='light'] .stock-tool-chevron {
  color: #b8860b;
}
html[data-theme='light'] .compare-card {
  background:
    #ffffff padding-box,
    var(--hairline-gold) border-box !important;
  color: var(--ink);
}
html[data-theme='light'] .board-more-menu,
html[data-theme='light'] .stock-more-menu {
  background: var(--panel);
  border-color: rgba(200, 150, 0, 0.4);
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(18, 20, 26, 0.14);
}
html[data-theme='light'] .help-sheet-panel,
html[data-theme='light'] .gomo-choice-panel,
html[data-theme='light'] .layout-arrange-panel {
  color: var(--ink);
}
html[data-theme='light'] .layout-arrange-row {
  border-color: rgba(18, 20, 26, 0.1);
  background: rgba(18, 20, 26, 0.03);
}
html[data-theme='light'] .toast {
  background: var(--grad-panel-soft), #ffffff;
  color: var(--ink);
}
html[data-theme='light'] .bay-odo-modal,
html[data-theme='light'] .loading {
  background: rgba(238, 241, 247, 0.82);
}
html[data-theme='light'] .bay-odo-card {
  background: linear-gradient(180deg, #ffffff 0%, #eef1f7 100%);
  border-color: rgba(180, 125, 0, 0.34);
  color: var(--ink);
}
html[data-theme='light'] .stock-access-panel {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(18, 20, 26, 0.12);
  color: var(--ink);
}
html[data-theme='light'] .stock-access-field input {
  background: #ffffff;
  border-color: var(--line);
  color: var(--ink);
}

/* --- 3. Inputs + chips + tags --- */
html[data-theme='light'] .search-input,
html[data-theme='light'] .filter-track.search-mode .search-input {
  background: #ffffff;
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--well);
}
html[data-theme='light'] .chip {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme='light'] .report-more-menu .chip {
  background: rgba(18, 20, 26, 0.04);
  border-color: rgba(200, 150, 0, 0.28);
  color: var(--ink);
}
html[data-theme='light'] .stock-van-chip {
  border-color: rgba(18, 20, 26, 0.16);
  background: rgba(18, 20, 26, 0.04);
  color: rgba(18, 20, 26, 0.88);
}
html[data-theme='light'] .needs-why-tag {
  background: rgba(18, 20, 26, 0.05);
  border-color: rgba(18, 20, 26, 0.1);
  color: rgba(18, 20, 26, 0.88);
}
html[data-theme='light'] .pill.pill-stale {
  background: rgba(142, 142, 147, 0.18);
  color: rgba(18, 20, 26, 0.72);
  border-color: rgba(142, 142, 147, 0.4);
}
html[data-theme='light'] .pm-pkg-tag {
  color: rgba(18, 20, 26, 0.9);
  background: rgba(18, 20, 26, 0.05);
  border-color: rgba(18, 20, 26, 0.1);
}
html[data-theme='light'] .pm-pkg-tag.more {
  border-color: rgba(18, 20, 26, 0.08);
}

/* --- 4. Text: white to ink (keep white on red/gold CTAs + scanner) --- */
html[data-theme='light'] .gomo-name,
html[data-theme='light'] .gomo-mo {
  color: var(--ink);
}
html[data-theme='light'] .bay-confirm-bullets li,
html[data-theme='light'] .ai-pulse-dl dd {
  color: rgba(18, 20, 26, 0.88);
}
html[data-theme='light'] .plan-jobs-honesty-banner {
  color: rgba(18, 20, 26, 0.88);
}
html[data-theme='light'] .ci-verdict-body,
html[data-theme='light'] .ci-card-role,
html[data-theme='light'] .ci-tip-list,
html[data-theme='light'] .ci-block .why-hot-list,
html[data-theme='light'] .gap-foot {
  color: rgba(18, 20, 26, 0.75);
}
html[data-theme='light'] .spark-label {
  color: rgba(18, 20, 26, 0.55);
}
html[data-theme='light'] .spark-detail,
html[data-theme='light'] .coach-p {
  color: rgba(18, 20, 26, 0.65) !important;
}
html[data-theme='light'] .pins-label {
  color: rgba(18, 20, 26, 0.45);
}
html[data-theme='light'] .pins-empty {
  color: rgba(18, 20, 26, 0.4);
}
html[data-theme='light'] .att-k {
  color: rgba(18, 20, 26, 0.45);
}
html[data-theme='light'] .att-cell {
  background: rgba(18, 20, 26, 0.04);
  border-color: rgba(18, 20, 26, 0.1);
}
html[data-theme='light'] .walk-bar.lot-walk-theater .walk-bay-label,
html[data-theme='light'] .compare-pre {
  color: rgba(18, 20, 26, 0.72);
}
html[data-theme='light'] .floor-portal-status {
  color: rgba(18, 20, 26, 0.55) !important;
}
html[data-theme='light'] .floor-sync-steps {
  color: rgba(18, 20, 26, 0.72);
}
html[data-theme='light'] .floor-sync-mark {
  color: rgba(18, 20, 26, 0.45);
}
html[data-theme='light'] .floor-sync-skip .floor-sync-mark {
  color: rgba(18, 20, 26, 0.35);
}
html[data-theme='light'] .floor-block h3,
html[data-theme='light'] .score-totals,
html[data-theme='light'] .score-totals-compact {
  color: rgba(18, 20, 26, 0.7);
}
html[data-theme='light'] .score-chip-meta {
  color: rgba(18, 20, 26, 0.45);
}
html[data-theme='light'] .lot-filter-btn .lot-filter-sep {
  color: rgba(18, 20, 26, 0.25);
}
html[data-theme='light'] .kit-chip.kit-unk {
  color: rgba(18, 20, 26, 0.7);
}
html[data-theme='light'] .svc-stock-kicker,
html[data-theme='light'] .lineup-select-label,
html[data-theme='light'] .lineup-due-row .board-more-label {
  color: rgba(18, 20, 26, 0.45);
}
html[data-theme='light'] .lineup-due-row {
  border-color: rgba(18, 20, 26, 0.1);
  background: rgba(18, 20, 26, 0.03);
}
html[data-theme='light'] .svc-stock-slot {
  background: rgba(18, 20, 26, 0.03);
  border-color: rgba(18, 20, 26, 0.1);
}
html[data-theme='light'] .fu-st-open {
  color: #4a5568;
}
html[data-theme='light'] .fu-st-closed {
  color: rgba(18, 20, 26, 0.45);
}
html[data-theme='light'] .task-star-btn {
  color: rgba(18, 20, 26, 0.28);
}

/* --- 5. Borders / dividers --- */
html[data-theme='light'] .money-made {
  border-bottom-color: rgba(18, 20, 26, 0.08);
}
html[data-theme='light'] .filter-search-close {
  border-color: rgba(18, 20, 26, 0.14);
}
html[data-theme='light'] .filter-search-close:focus-visible {
  border-color: rgba(18, 20, 26, 0.28);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme='light'] .filter-search-close:hover {
    border-color: rgba(18, 20, 26, 0.28);
  }
}

/* visualViewport already excludes the Android keyboard; do not subtract it twice. */
html.kb-open .van-sheet-panel {
  max-height: min(92%, calc(var(--vv-height, 100dvh) * 0.92));
}
html.kb-open .bay-odo-card {
  max-height: min(85vh, calc(var(--vv-height, 100dvh) - 24px));
}
html.kb-open .stock-sheet-panel {
  max-height: min(calc(var(--vv-height, 100dvh) * 0.88), 640px);
}
html.kb-open .help-sheet-panel,
html.kb-open .gomo-choice-panel {
  max-height: min(calc(var(--vv-height, 100dvh) * 0.88), 720px);
}
html.kb-open .layout-arrange-panel {
  max-height: min(calc(var(--vv-height, 100dvh) * 0.72), 560px);
}

/* Android WebView: 16px prevents focus zoom on every typing surface. */
.search-input,
.gomo-field,
.global-van-search,
.stock-code-input,
.stock-search-input,
.stock-apply-search-input,
#stock-pick-search,
.job-move-q,
.sense-pull-input,
textarea {
  font-size: max(16px, 0.95rem);
}
html[data-theme='light'] .van-sheet-panel .van-card,
html[data-theme='light'] .stock-sheet-body .stock-batch-row,
html[data-theme='light'] .help-body .help-sec {
  border-color: rgba(18, 20, 26, 0.1);
}
html[data-theme='light'] .status-strip {
  border-image: linear-gradient(
      90deg,
      rgba(18, 20, 26, 0.02),
      rgba(18, 20, 26, 0.12) 30%,
      rgba(18, 20, 26, 0.12) 70%,
      rgba(18, 20, 26, 0.02)
    )
    1;
}

/* Bay tab SVG body fills for light */
html[data-theme='light'] .bay-tab .tab-body {
  fill: #dce1eb;
}
html[data-theme='light'] .bay-tab.active .tab-body {
  fill: #1b2a4a;
}


/* ============================================================
   Modern feel pack v322 ? docks, header, press, ripple, ambience
   Gated: body.motion-chill / prefers-reduced-motion strip motion
   ============================================================ */

/* --- A1 Dock sliding indicator --- */
.bay-tabs,
.sense-mode-row {
  position: relative;
}
.dock-indicator {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 0;
  pointer-events: none;
  /* border-radius set per-move from active tab/chip (JS) */
  background: var(--pill-on-bg);
  box-shadow: var(--pill-on-depth), var(--glow-gold);
  transition: transform 0.28s var(--ease-out), width 0.28s var(--ease-out), height 0.28s var(--ease-out), border-radius 0.28s var(--ease-out), opacity 0.18s ease;
  opacity: 0;
}
.dock-indicator.is-on {
  opacity: 1;
}
.bay-tabs > .bay-tab,
.bay-tabs > .boards-arrange-chip,
.sense-mode-row > .sort-chip,
.sense-mode-row > .sense-arrange-chip {
  position: relative;
  z-index: 1;
}
/* Active chrome lives on the indicator when present — keep fill as fallback */
.bay-tabs:has(.dock-indicator.is-on) > .bay-tab.active {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  transform: none !important;
  color: var(--pill-on-fg) !important;
}
.sense-mode-row:has(.dock-indicator.is-on) > .sort-chip.on {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  color: var(--pill-on-fg) !important;
}
body.motion-chill .dock-indicator {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .dock-indicator {
    transition: none !important;
  }
}

/* --- A2 Condensing header --- */
.mast {
  transition: transform 0.22s var(--ease-out), margin 0.22s var(--ease-out);
}
body.mast-tight .mast {
  transform: scale(0.86);
  transform-origin: left center;
  margin-bottom: 0;
}
.status-strip {
  max-height: 4rem;
  transition: max-height 0.24s var(--ease-out), opacity 0.2s ease, margin 0.22s ease, padding 0.22s ease;
}
/* Shrink chrome on scroll — keep Help / Refresh / Admin tappable */
body.mast-tight .status-strip {
  max-height: 3rem;
  opacity: 1;
  margin: 0;
  padding: 2px 0;
  overflow: visible;
  border-bottom-width: 0;
  pointer-events: auto;
}
body.mast-tight .status-strip .board-asof,
body.mast-tight .status-strip .live-dot {
  display: none;
}
body.mast-tight .status-actions .board-help,
body.mast-tight .status-actions .board-refresh {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}
body.motion-chill .mast,
body.motion-chill .status-strip {
  transition: none !important;
}

/* --- A3 Screen-switch parallax on #main --- */
#main.screen-parallax-fwd {
  animation: main-parallax-fwd 0.24s var(--ease-out);
}
#main.screen-parallax-back {
  animation: main-parallax-back 0.24s var(--ease-out);
}
@keyframes main-parallax-fwd {
  from { transform: translateX(-10px); }
  to { transform: none; }
}
@keyframes main-parallax-back {
  from { transform: translateX(10px); }
  to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #main.screen-parallax-fwd,
  #main.screen-parallax-back {
    animation: none !important;
  }
}
body.motion-chill #main.screen-parallax-fwd,
body.motion-chill #main.screen-parallax-back {
  animation: none !important;
}

/* --- B2 Card cascade (transform only ? no opacity:0 base) --- */
.van-card.card-cascade {
  animation: card-cascade 0.34s var(--ease-out);
}
@keyframes card-cascade {
  from { transform: translateY(10px); }
  to { transform: none; }
}
body.motion-chill .van-card.card-cascade {
  animation: none !important;
}
/* Freeze under-sheet cascade ? board morph at ~580ms shows through 68% backdrop */
body.sheet-open .van-card.card-cascade,
body.sheet-open .van-card.van-card-park-in {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .van-card.card-cascade {
    animation: none !important;
  }
}

/* --- C1 Unified press --- */
.van-card:active,
.act:active,
.chip:active,
.seg:active,
.bay-tab:active,
.sort-chip:active,
.job-card:active,
.board-more-item:active,
.net-chip:active {
  transform: scale(0.97);
  transition: transform 90ms var(--ease-press), box-shadow 90ms var(--ease-press);
}
body.motion-chill .van-card:active,
body.motion-chill .act:active,
body.motion-chill .chip:active,
body.motion-chill .seg:active,
body.motion-chill .bay-tab:active,
body.motion-chill .sort-chip:active {
  transform: none;
}

/* --- C2 Gold ripple on primary CTAs --- */
.act.gold,
.act.primary,
.global-search-go {
  position: relative;
  overflow: hidden;
}
.act.gold::after,
.act.primary::after,
.global-search-go::after {
  content: '';
  position: absolute;
  left: var(--rx, 50%);
  top: var(--ry, 50%);
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 204, 0, 0.35) 40%, transparent 70%);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}
.act.gold.ripple-on::after,
.act.primary.ripple-on::after,
.global-search-go.ripple-on::after {
  animation: gold-ripple 0.28s var(--ease-out) forwards;
}
@keyframes gold-ripple {
  0% { transform: scale(0); opacity: 0.85; }
  100% { transform: scale(28); opacity: 0; }
}
body.motion-chill .act.gold.ripple-on::after,
body.motion-chill .act.primary.ripple-on::after,
body.motion-chill .global-search-go.ripple-on::after {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .act.gold.ripple-on::after,
  .act.primary.ripple-on::after,
  .global-search-go.ripple-on::after {
    animation: none !important;
  }
}

/* --- C3 Sheet grab anticipation --- */
.van-sheet.grab-anticipate .van-sheet-panel,
.stock-sheet-overlay.grab-anticipate .stock-sheet-panel {
  transform: translate3d(0, -4px, 0);
  transition: transform 0.12s var(--ease-out);
}

/* --- D1 Scroll parallax glow --- */
.bg-glow {
  will-change: transform;
}

/* --- D2 Live-dot breath --- */
.pulse-dot {
  animation: pulse-live 2.4s ease-in-out infinite;
  position: relative;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(255, 204, 0, 0.35);
  opacity: 0;
  animation: live-ring 9.6s ease-out infinite;
}
@keyframes pulse-live {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(52, 199, 89, 0);
    transform: scale(1.1);
  }
}
@keyframes live-ring {
  0%, 70% { transform: scale(0.6); opacity: 0; }
  75% { transform: scale(0.8); opacity: 0.55; }
  100% { transform: scale(2.2); opacity: 0; }
}
body.motion-chill .pulse-dot,
body.motion-chill .pulse-dot::after {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .pulse-dot,
  .pulse-dot::after {
    animation: none !important;
  }
}

/* --- D3 Save sweep --- */
.save-sweep {
  position: fixed;
  top: calc(var(--safe-t, 0px) + 2px);
  left: 0;
  right: 0;
  height: 2px;
  z-index: var(--z-sweep);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold), var(--red), var(--gold), transparent);
  transform: translateX(-100%);
  opacity: 0;
}
.save-sweep.run {
  animation: save-sweep-pass 0.6s var(--ease-out) forwards;
}
@keyframes save-sweep-pass {
  0% { transform: translateX(-100%); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* --- More filter pill: dock beside board title (v326) --- */
.has-lot-filter .board-toolbar {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
.sheet-head.has-lot-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
}
.sheet-head.has-lot-filter h1 {
  grid-column: 1;
  margin-bottom: 4px;
}
.sheet-head.has-lot-filter p {
  grid-column: 1;
  margin-bottom: 0;
}
.sheet-head.has-lot-filter .board-toolbar {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
/* Report: Slack ? window pill beside title (v332) ? frees DSP chip row */
.sheet-head.has-head-tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
}
.sheet-head.has-head-tool h1 {
  grid-column: 1;
  margin-bottom: 4px;
}
.sheet-head.has-head-tool p {
  grid-column: 1;
  margin-bottom: 0;
}
.sheet-head.has-head-tool .stock-more-wrap {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
.money-made.has-lot-filter {
  position: relative;
  padding-right: 7.5rem;
}
.money-made.has-lot-filter .board-toolbar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}
.board-toolbar .lot-toolbar {
  justify-content: flex-end;
}
/* Compact pill in header so it doesn't crowd the title */
.has-lot-filter .lot-filter-btn.board-more-btn {
  height: 32px;
  padding: 0 10px;
  gap: 4px;
  font-size: 11px;
}
.has-lot-filter .lot-filter-btn .lot-filter-label {
  font-size: 9px;
}

/* Board filter icon buttons — ≥44px touch targets */
.board-filters .filter-search-btn,
.board-filters .filter-search-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 11px;
}

/* ============================================================
   Motion Max + star glyph parity (Android)
   ============================================================ */

/* Monochrome text stars ? avoid Android emoji fallback for ?/? */
.pin-mark,
.task-star,
.task-star-btn,
.van-title-pin {
  font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Noto Sans Symbols',
    'Apple Symbols', sans-serif;
  font-style: normal;
  font-variant-emoji: text;
  -webkit-font-smoothing: antialiased;
}

/* Battery courtesy: ambient infinite loops stay off under OS PRM even in Max */
@media (prefers-reduced-motion: reduce) {
  body.motion-max .fx-orbs,
  body.motion-max .bg-grid,
  body.motion-max .bg-glow,
  body.motion-max .pulse-dot,
  body.motion-max .van-card.overdue .rail,
  body.motion-max .van-card.hot .rail,
  body.motion-max .van-card.overdue .pill,
  body.motion-max .scroll-progress > i {
    animation: none !important;
  }
  body.motion-max .fx-orbs {
    display: none !important;
  }
}

/* ============================================================
   Android feel round 2 ? tap latency + press class + symbol fonts
   ============================================================ */

button,
.act,
.chip,
.bay-tab,
.seg,
.van-card,
.icon-btn,
.sort-chip,
.net-chip,
.tb-chip,
.job-card,
.svc-line.tappable,
.dsp-chip,
.filter-chip,
.heat-chip,
.stock-mode,
.stock-kind-btn,
.fu-filter-btn,
.pin-chip,
.gomo-choice-item,
.board-more-item,
.filter-search-btn,
.filter-search-close,
.global-search-go,
.help-close,
.boards-jump,
.stock-barcode-remove,
.task-star-btn,
.van-title-pin {
  touch-action: manipulation;
}

/* Mirror :active for Android WebView (often skips :active on touch) */
.van-card.is-pressed {
  transform: scale(0.978) translateY(1px) !important;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.35),
    0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
.act.is-pressed:not(:disabled) {
  transform: scale(0.96) translateY(1px);
}
.chip.is-pressed,
.sort-chip.is-pressed,
.net-chip.is-pressed,
.tb-chip.is-pressed,
.seg.is-pressed,
.bay-tab.is-pressed,
.icon-btn.is-pressed,
.filter-search-btn.is-pressed,
.filter-search-close.is-pressed {
  transform: scale(0.94);
}
.job-card.is-pressed {
  transform: scale(0.985) translateY(1px);
}
.svc-line.tappable.is-pressed {
  transform: scale(0.99);
}

/* Symbol / empty-state glyph fonts (extend star stack) */
.pin-mark,
.task-star,
.task-star-btn,
.van-title-pin,
.check,
.empty-icon,
.more-caret,
.ai-pulse-chevron,
.job-chev,
.walk-nav,
.walk-exit,
.help-close,
.boards-jump,
.stock-barcode-remove {
  font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Noto Sans Symbols',
    'Apple Symbols', sans-serif;
  font-style: normal;
  font-variant-emoji: text;
  -webkit-font-smoothing: antialiased;
}
.empty-icon.empty-icon-svg {
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold, #ffcc00);
}
.empty-icon.empty-icon-svg svg {
  display: block;
}