/* =============================================================================
   ATTACHÉ DESIGN SYSTEM  ·  Springfield Sign "Neon Glow", refined
   Dark only. Built on the existing EPIClock-derived tokens (tokens.css),
   sharpened toward Linear's calm structure + Stripe's record legibility.
   Glow = emphasis (primary action, focus, brand mark). Everything at rest
   is quiet. Floating surfaces use soft real shadows, never red.
   ============================================================================= */

/* Smooth same-origin page navigation (kills the white flash / reflow pop when
   switching workspace tabs or following links). Supported browsers cross-fade
   between documents instead of blanking. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: .12s; }
::view-transition-new(root) { animation-duration: .16s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

:root {
  /* ---- Surfaces (kept, +1 raised tier for floating menus/panels) ---------- */
  --bg-page: #0b0b0f;
  --bg-card: #141417;
  --bg-card-elevated: #1a1a1f;
  --bg-raised: #1f1f25;        /* floating menus, command palette, popovers */
  --bg-input: #1c1c21;
  --bg-row-hover: rgba(255,255,255,.035);

  /* ---- Brand red (LOCKED) ------------------------------------------------- */
  --red-bright: #FF0008;
  --red-deep: #cc0006;
  --red-light: #ff3338;
  --red-glow-50: rgba(255,0,8,.50);
  --red-glow-40: rgba(255,0,8,.40);
  --red-glow-30: rgba(255,0,8,.30);
  --red-glow-20: rgba(255,0,8,.20);
  --red-glow-10: rgba(255,0,8,.10);

  /* ---- Entity / status accents (mapping kept; hues refined for AA) -------- */
  --order:    #3498db;  --order-text:    #7cc1ec;  --order-bg:    rgba(52,152,219,.10);  --order-bd:    rgba(52,152,219,.30);
  --customer: #2ecc71;  --customer-text: #67dd96;  --customer-bg: rgba(46,204,113,.10);  --customer-bd: rgba(46,204,113,.30);
  --quote:    #9b6bd6;  --quote-text:    #c2a0ec;  --quote-bg:    rgba(155,107,214,.12); --quote-bd:    rgba(155,107,214,.32);
  --invoice:  #e8923a;  --invoice-text:  #f3b574;  --invoice-bg:  rgba(232,146,58,.11);  --invoice-bd:  rgba(232,146,58,.30);
  --job:      #46b0c9;  --job-text:      #74cfe4;  --job-bg:      rgba(70,176,201,.11);  --job-bd:      rgba(70,176,201,.30);
  --po:       #c0606a;  --po-text:       #e08a92;  --po-bg:       rgba(192,96,106,.12);  --po-bd:       rgba(192,96,106,.30);
  --supplier: #7b86e8;  --supplier-text: #a6adf2;  --supplier-bg: rgba(123,134,232,.12); --supplier-bd: rgba(123,134,232,.32);
  --shipment: #3fb6a8;  --shipment-text: #74d6c9;  --shipment-bg: rgba(63,182,168,.12);  --shipment-bd: rgba(63,182,168,.30);
  --project:  #cf6fb0;  --project-text:  #e69fcd;  --project-bg:  rgba(207,111,176,.12); --project-bd:  rgba(207,111,176,.32);
  --apinvoice:#caa24a;  --apinvoice-text:#e0c074;  --apinvoice-bg:rgba(202,162,74,.12);  --apinvoice-bd:rgba(202,162,74,.32);

  /* Status / urgency (5-color: calm green, active blue, soft yellow, hard red, released gray) */
  --green-status: #2ecc71;  --green-text: #67dd96;
  --blue-status:  #3498db;  --blue-text:  #7cc1ec;
  --yellow-status:#f0a939;  --yellow-text:#f6c578;
  --gray-status:  #7a7a85;

  /* ---- Text ramp ---------------------------------------------------------- */
  --text-primary:   rgba(255,255,255,.96);
  --text-secondary: rgba(255,255,255,.70);
  --text-tertiary:  rgba(255,255,255,.52);
  --text-dim:       rgba(255,255,255,.40);
  --text-faint:     rgba(255,255,255,.26);
  --text-on-red: #fff;

  /* ---- Hairlines / borders ------------------------------------------------ */
  --hairline:        rgba(255,255,255,.07);
  --hairline-faint:  rgba(255,255,255,.045);
  --border-neutral:  rgba(255,255,255,.10);
  --border-strong:   rgba(255,255,255,.16);
  --border-red-subtle: rgba(255,71,87,.16);
  --border-red-active: rgba(255,71,87,.42);

  /* ---- Type scale --------------------------------------------------------- */
  --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
  --fs-micro: 11px;   /* eyebrows / micro labels (UPPERCASE tracked) */
  --fs-sm:   12.5px;  /* meta, captions */
  --fs-base: 14px;    /* body / UI default */
  --fs-md:   15px;
  --fs-lg:   17px;    /* card titles */
  --fs-xl:   21px;    /* sub-heads */
  --fs-2xl:  26px;    /* page titles */
  --fs-3xl:  34px;    /* hero numbers */
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.55;
  --track-tight: -0.01em;
  --track-wide: 0.04em;
  --track-eyebrow: 0.14em;

  /* ---- Spacing (4pt) ------------------------------------------------------ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ---- Radii -------------------------------------------------------------- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 11px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;

  /* ---- Elevation: floating = soft dark shadow (NOT red) ------------------- */
  --shadow-pop:   0 4px 14px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.35);
  --shadow-float: 0 12px 34px rgba(0,0,0,.46), 0 2px 8px rgba(0,0,0,.34);
  --shadow-panel: -28px 0 80px rgba(0,0,0,.50);
  --shadow-modal: 0 30px 90px rgba(0,0,0,.62), 0 4px 16px rgba(0,0,0,.4);

  /* ---- Glow: brand emphasis only ------------------------------------------ */
  --glow-brand: drop-shadow(0 0 13px var(--red-glow-30));
  --glow-primary: 0 0 0 1px var(--red-bright), 0 0 22px var(--red-glow-30), inset 0 1px 0 rgba(255,255,255,.14);
  --glow-primary-hover: 0 0 0 1px var(--red-bright), 0 0 30px var(--red-glow-40), inset 0 1px 0 rgba(255,255,255,.14);
  --focus-ring: 0 0 0 3px var(--red-glow-20);

  /* ---- Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: 130ms var(--ease);
  --t: 190ms var(--ease);
  --t-slow: 280ms var(--ease);
}

/* =============================================================================
   RESET / BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Neon Glow - left-edge red wash rising off the sidebar. Expressed as a
   vertical-invariant linear-gradient (NOT an inset box-shadow) so the exact
   same glow can be painted on the short sticky tab strips and match the page
   pixel-for-pixel — box-shadows spread by element height and cannot. */
/* Floated just ABOVE the content (not behind it) so the left-edge wash diffuses
   smoothly OVER opaque cards (record file rows, viewer preview) instead of only
   peeking through the gaps between them — matching the transparent-row pages. Stays
   pointer-events:none and below the sticky tabs/search (z 40-150) so chrome wins. */
.neon-breathe { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(90deg, rgba(255,0,8,.13) 0, rgba(255,0,8,.06) 45px, rgba(255,0,8,.02) 120px, rgba(255,0,8,0) 245px); }
@keyframes neonBreathe {
  0%, 100% { box-shadow: inset 90px 0 90px -80px rgba(255,0,8,.105); }
  50%      { box-shadow: inset 120px 0 110px -85px rgba(255,0,8,.174); }
}
@media (prefers-reduced-motion: reduce) { .neon-breathe { animation: none; } }
/* pervasive subtle glow on interactive + accented elements */
.btn-secondary:hover:not(:disabled), .btn-ghost:hover:not(:disabled) { box-shadow: 0 0 18px var(--red-glow-20); }
.btn-success:hover:not(:disabled) { box-shadow: 0 0 18px rgba(46,204,113,.32); }
.lrow:hover, .row:hover, .att:hover, .scard:hover, .fitem:hover { border-color: var(--border-red-active); box-shadow: 0 0 24px -9px var(--red-light); }
.row__icon, .tile-sm { box-shadow: 0 0 11px -3px currentColor; }
.navlink.is-active { box-shadow: none; }
.badge--calm, .badge--soft, .badge--hard, .badge--active, .badge--ver { box-shadow: 0 0 10px -4px currentColor; }
.co-pill, .notif-fab__dot, .topbtn__dot { box-shadow: 0 0 14px -3px currentColor; }
.avatar { box-shadow: 0 0 14px -2px var(--red-glow-30); }
.tab:hover, .cmd__tab:hover, .scopebtn:hover, .saved-chip:hover, .scope-chip:hover, .segbtn:hover, .vrow__restore:hover, .iconbtn:hover, .crumb__item:hover, .lgroup__h-a:hover, .reqchip--miss:hover { box-shadow: 0 0 15px rgba(255,0,8,.11); }
.dash .tabs { background: transparent; margin: 0; }
html { font-size: 16px; -webkit-tap-highlight-color: transparent; color-scheme: dark; background: var(--bg-page); }
body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-stack);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--red-glow-30); color: #fff; }
:focus-visible { outline: none; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* Subtle scrollbars */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; border: 3px solid transparent; background-clip: content-box; transition: background .4s ease; }
.is-scrolling::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); background-clip: content-box; }
.is-scrolling::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); background-clip: content-box; }

/* =============================================================================
   APP SHELL  ·  appbar + persistent rail sidebar + content
   ============================================================================= */
.app {
  display: grid;
  grid-template-columns: 248px 1fr;
  grid-template-rows: 100vh;
  min-height: 100vh;
  transition: grid-template-columns var(--t);
}
.app.rail-collapsed { grid-template-columns: 72px 1fr; }
.app--norail { grid-template-columns: 1fr; }

/* ---- Sidebar (persistent + collapsible on desktop, drawer on mobile) ------ */
.rail {
  grid-row: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent 220px), var(--bg-card);
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column;
  padding: var(--sp-4) 0 var(--sp-3);
  min-height: 0;
}
.rail__brand { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 2px var(--sp-4) var(--sp-4); position: relative; }
.rail__logo { display: inline-flex; line-height: 0; }
.rail__logo img { height: 32px; width: auto; filter: var(--glow-brand); }
.rail__collapse { position: absolute; right: 10px; top: 0; background: none; border: none; color: var(--text-dim); padding: 7px; border-radius: var(--r-sm); display: inline-flex; cursor: pointer; transition: var(--t-fast); }
.rail__collapse:hover { background: var(--bg-row-hover); color: var(--text-primary); }
.rail__collapse svg { width: 17px; height: 17px; }

.rail__nav { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--sp-3); flex: 1; overflow-y: auto; }
.rail__group-label {
  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--text-faint);
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
}
.navlink {
  display: flex; align-items: center; gap: 11px;
  padding: 9px var(--sp-3); border-radius: var(--r-sm);
  color: var(--text-secondary); font-size: var(--fs-base); font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast); position: relative;
}
.navlink__ic { display: inline-flex; flex: none; color: var(--text-tertiary); transition: color var(--t-fast); }
.navlink__ic svg { width: 18px; height: 18px; }
.navlink__txt { flex: 1; white-space: nowrap; }
.navlink__kbd { margin-left: auto; opacity: .55; transition: opacity var(--t-fast); }
.navlink:hover { color: var(--text-primary); }
.navlink:hover .navlink__ic { color: var(--text-secondary); }
.navlink:hover .navlink__kbd { opacity: 1; }
.navlink.is-active { background: none; color: var(--text-primary); }
.navlink.is-active .navlink__ic { color: var(--red-light); }
.navlink.is-active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--red-bright); box-shadow: 0 0 10px 1px var(--red-bright), 0 0 4px 0 var(--red-light);
  box-shadow: 0 0 10px var(--red-glow-40); margin-left: -12px;
}
/* user card */
.rail__user { display: flex; align-items: center; gap: 11px; margin: var(--sp-3) var(--sp-3) 0; padding: 9px 10px; border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--bg-card-elevated); cursor: pointer; text-align: left; width: auto; transition: var(--t-fast); }
.rail__user:hover { border-color: var(--border-strong); }
.avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--red-light), var(--red-deep)); box-shadow: 0 0 12px var(--red-glow-20); letter-spacing: .02em; }
.rail__user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rail__user-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail__user-role { font-size: 11px; color: var(--text-dim); }
.rail__user-badge { flex: none; color: var(--yellow-text); display: inline-flex; }
.rail__user-badge svg { width: 15px; height: 15px; }
.rail__logout { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; border-radius: 7px; color: var(--text-dim); cursor: pointer; transition: var(--t-fast); }
.rail__logout svg { width: 17px; height: 17px; }
.rail__logout:hover { color: var(--red-light); border-color: var(--border-red-active); background: var(--red-glow-10); box-shadow: 0 0 14px -3px var(--red-light); }
.app.rail-collapsed .rail__logout { display: none; }
.rail__div { height: 1px; background: var(--hairline); margin: 8px 12px; }
.rail__admin { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.rail__buildline { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); text-align: center; padding: 9px 12px 0; }
.app.rail-collapsed .rail__buildline { display: none; }
.app.rail-collapsed .rail__div { margin: 8px 16px; }
/* company branding (rail footer, white-label) */
.rail__company { margin: 10px 12px 2px; padding-top: 11px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 8px; overflow: hidden; align-items: center; text-align: center; }
.rail__company-mark { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; }
.rail__company-badge { width: 26px; height: 26px; flex: none; border-radius: 6px; background: linear-gradient(135deg, var(--red-light), var(--red-deep)); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px var(--red-glow-20); }
.rail__company-name { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); line-height: 1.25; }
.rail__company-logo { display: block; max-height: 24px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
.rail__build { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
.rail__tagline { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--text-tertiary); }
.rail__help { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-tertiary); padding: 3px 0 1px; transition: color var(--t-fast); }
.rail__help svg { width: 13px; height: 13px; }
.rail__help:hover { color: var(--red-light); }
.app.rail-collapsed .rail__company-name, .app.rail-collapsed .rail__build, .app.rail-collapsed .rail__tagline, .app.rail-collapsed .rail__help { display: none; }
.app.rail-collapsed .rail__company, .app.rail-collapsed .rail__company-mark { align-items: center; justify-content: center; }
.app.rail-collapsed .rail__company-logo { max-width: 42px; }

/* collapsed rail */
.app.rail-collapsed .rail__nav { padding: 0 12px; }
.app.rail-collapsed .navlink { justify-content: center; padding: 10px 0; gap: 0; }
.app.rail-collapsed .navlink__txt,
.app.rail-collapsed .navlink__kbd,
.app.rail-collapsed .rail__group-label,
.app.rail-collapsed .rail__user-info,
.app.rail-collapsed .rail__user-badge { display: none; }
/* keep the real Attaché logo visible when collapsed, scaled to fit the 72px rail */
.app.rail-collapsed .rail__logo { display: inline-flex; }
.app.rail-collapsed .rail__logo img { height: auto; width: 58px; max-width: 58px; }
.app.rail-collapsed .rail__brand { flex-direction: column; justify-content: center; gap: 10px; padding: 4px 0 var(--sp-4); }
.app.rail-collapsed .rail__collapse { margin: 0; position: static; }
.app.rail-collapsed .rail__user { justify-content: center; padding: 8px; }
.app.rail-collapsed .navlink:hover::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: var(--bg-raised); border: 1px solid var(--border-strong); color: var(--text-primary);
  font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: var(--r-sm); white-space: nowrap;
  box-shadow: var(--shadow-pop); z-index: 60; pointer-events: none;
}

/* ---- Main column ---------------------------------------------------------- */
.main { grid-row: 1; min-width: 0; position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-6); height: 60px; flex: none;
  border-bottom: 1px solid var(--hairline);
  background: rgba(11,11,15,.72); backdrop-filter: blur(8px); position: relative; z-index: 10;
}
.topbar__left { padding-right: var(--sp-2); }
.topbar__hamburger { display: none; background: none; border: none; color: var(--text-secondary); padding: 8px; border-radius: var(--r-sm); }
.topbar__hamburger:hover { background: var(--bg-row-hover); color: var(--text-primary); }
.topbar__hamburger svg { width: 20px; height: 20px; }
.topbar__left { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; }
.topbar__center { flex: 0 1 440px; display: flex; justify-content: center; min-width: 0; }
.topbar__right { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex: 0 1 auto; min-width: 0; }

/* breadcrumb - clearly a breadcrumb: back affordance + hoverable trail */
.crumb-back { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--bg-card); border: 1px solid var(--hairline); color: var(--text-secondary); border-radius: var(--r-sm); transition: var(--t-fast); }
.crumb-back:hover { border-color: var(--border-strong); color: var(--text-primary); }
.crumb-back svg { width: 16px; height: 16px; }
.crumb { display: flex; align-items: center; gap: 1px; min-width: 0; font-size: var(--fs-base); }
.crumb__item { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: var(--r-sm); color: var(--text-tertiary); white-space: nowrap; transition: var(--t-fast); }
a.crumb__item:hover { background: var(--bg-row-hover); color: var(--text-primary); }
.crumb__item--cur { color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.crumb__sep { color: var(--text-faint); display: inline-flex; }
.crumb__sep svg { width: 14px; height: 14px; }

/* Quick-search trigger living dead-center in the topbar - on every screen */
.qsearch {
  display: flex; align-items: center; gap: var(--sp-3);
  height: 38px; padding: 0 10px 0 14px; width: 100%; max-width: 440px; min-width: 160px;
  background: var(--bg-input); border: 1px solid var(--hairline);
  border-radius: var(--r-pill); color: var(--text-tertiary);
  font-size: var(--fs-base); transition: border-color var(--t-fast), background var(--t-fast);
}
.qsearch:hover { border-color: var(--border-strong); background: var(--bg-card-elevated); }
.qsearch svg { width: 16px; height: 16px; flex: none; color: var(--text-dim); }
.qsearch__label { flex: 1; text-align: left; }
.qsearch__kbd { display: flex; gap: 4px; margin-left: auto; flex: none; }

/* Floating search pill - Pixel/Google style, bottom-center of the main view */
.floatsearch {
  z-index: 130;
  display: flex; justify-content: center; padding: 0 80px;
  pointer-events: none;
  transition: opacity var(--t), transform var(--t);
}
.floatsearch--docked { position: sticky; bottom: 26px; margin-top: 12px; }
.floatsearch--float { position: absolute; left: 0; right: 0; bottom: 26px; }
.floatsearch__pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 13px;
  width: clamp(300px, 44vw, 540px); height: 54px;
  padding: 0 12px 0 22px;
  background: rgba(22,22,26,.80); backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  color: var(--text-secondary); cursor: pointer;
  box-shadow: 0 10px 34px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  transition: border-color var(--t-fast), box-shadow var(--t), background var(--t-fast), transform var(--t-fast);
}
.floatsearch__pill:hover {
  border-color: var(--border-red-active);
  background: rgba(28,28,32,.88);
  box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 24px var(--red-glow-30);
  transform: translateY(-1px);
}
.floatsearch__pill:active { transform: translateY(0); }
.floatsearch__pill svg { width: 20px; height: 20px; flex: none; color: var(--red-light); }
.floatsearch__label { flex: 1; text-align: left; font-size: 14.5px; }
.floatsearch__kbd { display: flex; gap: 4px; flex: none; margin-right: 6px; }
body.cmd-open .floatsearch { opacity: 0; transform: translateY(14px); pointer-events: none; }
@media (max-width: 560px) {
  .floatsearch { padding: 0 70px 0 16px; }
  .floatsearch--docked, .floatsearch--float { bottom: 18px; }
  .floatsearch__pill { width: 100%; height: 50px; }
  .notif-fab { bottom: 18px; }
}
.kbd {
  display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; line-height: 1;
  color: var(--text-tertiary); background: rgba(255,255,255,.05);
  border: 1px solid var(--hairline); border-radius: var(--r-xs); padding: 3px 6px;
}

/* Active-checkouts pill (topbar) */
.co-pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: rgba(46,204,113,.12); border: 1px solid rgba(46,204,113,.32); color: var(--green-text); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer; transition: var(--t-fast); }
.co-pill:hover { filter: brightness(1.1); }
.co-pill--nudge { background: rgba(240,169,57,.13); border-color: rgba(240,169,57,.36); color: var(--yellow-text); }
.co-pill__ic { display: inline-flex; flex: none; } .co-pill__ic svg { width: 14px; height: 14px; }

/* topbar icon button (notifications) */
.topbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: none; border: 1px solid transparent; color: var(--text-secondary); cursor: pointer; transition: var(--t-fast); }
.topbtn:hover { background: var(--bg-card-elevated); color: var(--text-primary); border-color: var(--border-strong); }
.topbtn svg { width: 18px; height: 18px; }
.topbtn__dot { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--red-bright); color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg-page); }
.notif-fab { position: fixed; right: 22px; bottom: 28px; z-index: 150; width: 50px; height: 50px; border-radius: 50%; background: var(--bg-raised); border: 1px solid var(--border-strong); box-shadow: var(--shadow-float); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--t-fast); }
.notif-fab:hover { color: var(--text-primary); border-color: var(--border-red-active); transform: translateY(-1px); }
.notif-fab svg { width: 21px; height: 21px; }
.notif-fab__dot { position: absolute; top: 5px; right: 5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red-bright); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg-page); }
.notif-pop { position: fixed; z-index: 201; width: 348px; max-width: calc(100vw - 32px); background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-float); overflow: hidden; }
.notif-pop.hidden, .acct-pop.hidden { display: none; }
.notif-pop__head { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--hairline); font-size: 13.5px; font-weight: 650; }
.notif-pop__n { font-size: 11px; color: var(--red-light); font-weight: 700; }
.notif-pop__clear { margin-left: auto; font-size: 12px; color: var(--text-tertiary); background: none; border: none; cursor: pointer; }
.notif-pop__clear:hover { color: var(--red-light); }
.notif-pop__list { max-height: 380px; overflow-y: auto; }
.notif-pop__empty { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--text-dim); }
.notif { display: flex; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--hairline-faint); }
.notif:last-child { border-bottom: none; }
.notif--unread { background: rgba(255,0,8,.04); }
.notif__ic { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bg-card-elevated); border: 1px solid var(--hairline); color: var(--text-tertiary); }
.notif__ic svg { width: 15px; height: 15px; }
.notif__ic--ping { color: var(--blue-text); border-color: var(--blue-status); }
.notif__ic--checkin { color: var(--green-text); border-color: var(--green-status); }
.notif__ic--release { color: #ff8588; border-color: rgba(255,0,8,.34); }
.notif__body { flex: 1; min-width: 0; }
.notif__text { font-size: 13px; color: var(--text-secondary); line-height: var(--lh-snug); }
.notif__text strong { color: var(--text-primary); font-weight: 600; }
.notif__time { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.acct-pop { position: fixed; z-index: 201; min-width: 214px; background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-float); padding: 6px; }
.acct-pop__head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 11px; }
.acct-pop__nm { font-size: 13.5px; font-weight: 600; }
.acct-pop__rl { font-size: 11.5px; color: var(--text-dim); }

.content { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
.content__inner { max-width: 960px; width: 100%; margin: 0 auto; flex: 1 0 auto; padding: var(--sp-8) var(--sp-8) var(--sp-6); }
.content__inner--wide { max-width: 1180px; }

/* =============================================================================
   PAGE HEADER  ·  polished header band (replaces floating bold titles)
   ============================================================================= */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--hairline); margin-bottom: var(--sp-6); }
.page-head__main { min-width: 0; }
.page-head__eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--text-dim); margin-bottom: 12px; }
.page-head__eyebrow svg { width: 14px; height: 14px; color: var(--red-light); }
.page-head__title { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: var(--track-tight); color: var(--text-primary); }
.page-head__sub { font-size: var(--fs-md); color: var(--text-tertiary); margin-top: 8px; line-height: var(--lh-snug); max-width: 64ch; }
.page-head__actions { display: flex; gap: 8px; flex: none; align-items: center; }

/* =============================================================================
   SECTION HEADER  ·  ruled label
   ============================================================================= */
.section-head { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-8) 0 var(--sp-4); }
.section-head:first-child { margin-top: 0; }
.section-head__label {
  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--text-tertiary); white-space: nowrap;
}
.section-head__label .count { color: var(--text-faint); margin-left: 6px; }
.section-head__rule { flex: 1; height: 1px; background: var(--hairline); }
.section-head__action { font-size: var(--fs-sm); color: var(--text-tertiary); white-space: nowrap; cursor: pointer; }
.section-head__action:hover { color: var(--red-light); }

.page-title { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: var(--track-tight); color: var(--text-primary); }
.page-lede { font-size: var(--fs-md); color: var(--text-tertiary); margin-top: var(--sp-2); line-height: var(--lh-snug); }

/* =============================================================================
   BUTTONS
   ============================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 9px 15px; border-radius: var(--r-sm);
  font-size: var(--fs-base); font-weight: 600; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; transition: var(--t); text-decoration: none;
}
.btn svg { width: 16px; height: 16px; flex: none; stroke-width: 1.8; }
.btn:active:not(:disabled) { transform: translateY(.5px) scale(.99); }
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn-primary {
  background: linear-gradient(180deg, var(--red-light), var(--red-deep));
  color: var(--text-on-red); box-shadow: var(--glow-primary);
}
.btn-primary:hover:not(:disabled) { box-shadow: var(--glow-primary-hover); }
.btn-secondary { background: var(--bg-card-elevated); color: var(--text-secondary); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-red-active); box-shadow: 0 0 14px var(--red-glow-10); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-row-hover); color: var(--text-primary); }
.btn-success { background: var(--green-status); color: #053; border-color: var(--green-status); }
.btn-success:hover:not(:disabled) { filter: brightness(1.06); }
.btn-sm { padding: 6px 11px; font-size: var(--fs-sm); }
.btn-lg { padding: 12px 20px; font-size: var(--fs-md); }
/* split check-in button: a divider line before the dropdown chevron */
.btn__lead { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); flex: 1 1 auto; }
.btn__caret { display: inline-flex; align-items: center; align-self: stretch; padding-left: 9px; border-left: 1px solid color-mix(in srgb, currentColor 32%, transparent); }
.btn__caret svg { width: 14px; height: 14px; display: block; }
.btn:disabled, .btn[disabled] {
  cursor: not-allowed; pointer-events: none; background: transparent; background-image: none;
  color: var(--text-dim); border: 1px solid var(--border-neutral); box-shadow: none; filter: none;
}
.btn-icononly { padding: 8px; }

/* =============================================================================
   INPUTS / SELECTS
   ============================================================================= */
.input, .select, textarea.input {
  width: 100%; background: var(--bg-input); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); color: var(--text-primary); padding: 10px 13px;
  font-size: var(--fs-base); font-family: inherit; transition: var(--t-fast); outline: none;
}
.input::placeholder { color: var(--text-faint); }
.input:hover, .select:hover { border-color: var(--border-strong); }
.input:focus, .select:focus { border-color: var(--red-bright); box-shadow: var(--focus-ring); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 34px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
.field__hint { font-size: var(--fs-sm); color: var(--text-dim); }

/* =============================================================================
   ENTITY PILL  (P5 spec 3.1 - label INSIDE, ALL CAPS 9px/800, accent divider)
   ============================================================================= */
.ep {
  display: inline-flex; align-items: baseline; gap: 9px;
  padding: 4px 12px 5px; border: 1px solid; border-radius: var(--r-pill);
  line-height: 1.2; white-space: nowrap; max-width: 44ch; transition: var(--t-fast);
}
/* Label + value align on their shared text baseline. Because the label is all
   caps (no descenders) and the value is mixed case (with descenders), baseline
   alignment lands their optical centers together, where center alignment left
   the smaller label floating above the value. */
.ep__lbl { font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; font-size: 9px; padding-right: 9px; border-right: 1px solid currentColor; flex: none; }
.ep__val { font-weight: 500; font-size: var(--fs-base); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.ep__val small { font-size: 12.5px; opacity: .82; margin-left: 1px; }
.ep--order    { background: var(--order-bg);    border-color: var(--order-bd);    color: var(--order-text); }
.ep--customer { background: var(--customer-bg); border-color: var(--customer-bd); color: var(--customer-text); }
.ep--quote    { background: var(--quote-bg);    border-color: var(--quote-bd);    color: var(--quote-text); }
.ep--invoice  { background: var(--invoice-bg);  border-color: var(--invoice-bd);  color: var(--invoice-text); }
.ep--job      { background: var(--job-bg);      border-color: var(--job-bd);      color: var(--job-text); }
.ep--po       { background: var(--po-bg);       border-color: var(--po-bd);       color: var(--po-text); }
.ep--supplier { background: var(--supplier-bg); border-color: var(--supplier-bd); color: var(--supplier-text); }
.ep--shipment { background: var(--shipment-bg); border-color: var(--shipment-bd); color: var(--shipment-text); }
.ep--project  { background: var(--project-bg);  border-color: var(--project-bd);  color: var(--project-text); }
.ep--apinvoice{ background: var(--apinvoice-bg);border-color: var(--apinvoice-bd);color: var(--apinvoice-text); }
.ep--neutral  { background: rgba(255,255,255,.04); border-color: var(--hairline); color: var(--text-secondary); }
a.ep, .ep--link { cursor: pointer; }
a.ep:hover, .ep--link:hover { filter: brightness(1.14); }
.ep-sm { padding: 3px 10px 3px; }
.ep-sm .ep__val { font-size: 12.5px; }
.ep-sm .ep__lbl { font-size: 8.5px; padding-right: 7px; }

/* =============================================================================
   CARDS
   ============================================================================= */
.card {
  background: var(--bg-card); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); transition: var(--t);
}
.card--pad-lg { padding: var(--sp-6) var(--sp-8); }
.card--hover:hover { border-color: var(--border-strong); }
.card-title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: var(--track-tight); }

/* =============================================================================
   LIST ROWS  (search results, attachments, related, generic)
   ============================================================================= */
.rows { display: flex; flex-direction: column; gap: 6px; }
.row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 13px 14px; border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--bg-card); transition: var(--t-fast); text-align: left; width: 100%;
}
.row:hover, .row.is-focus {
  border-color: var(--border-strong); background: var(--bg-card-elevated);
}
.row.is-focus { box-shadow: 0 0 26px -5px var(--red-glow-50), 0 0 56px -14px var(--red-glow-40); border-color: var(--border-red-active); }
.row__icon {
  width: 36px; height: 36px; flex: none; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card-elevated); border: 1px solid var(--hairline); color: var(--text-tertiary);
}
.row__icon svg { width: 18px; height: 18px; stroke-width: 1.7; }
.row__icon--order    { color: var(--order-text);    border-color: var(--order-bd);    background: var(--order-bg); }
.row__icon--customer { color: var(--customer-text); border-color: var(--customer-bd); background: var(--customer-bg); }
.row__icon--quote    { color: var(--quote-text);    border-color: var(--quote-bd);    background: var(--quote-bg); }
.row__icon--invoice  { color: var(--invoice-text);  border-color: var(--invoice-bd);  background: var(--invoice-bg); }
.row__icon--job      { color: var(--job-text);      border-color: var(--job-bd);      background: var(--job-bg); }
.row__icon--po       { color: var(--po-text);       border-color: var(--po-bd);       background: var(--po-bg); }
.row__icon--supplier { color: var(--supplier-text); border-color: var(--supplier-bd); background: var(--supplier-bg); }
.row__icon--shipment { color: var(--shipment-text); border-color: var(--shipment-bd); background: var(--shipment-bg); }
.row__icon--project  { color: var(--project-text);  border-color: var(--project-bd);  background: var(--project-bg); }
.row__icon--apinvoice{ color: var(--apinvoice-text);border-color: var(--apinvoice-bd);background: var(--apinvoice-bg); }
/* file-type chip variant */
.row__ext {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card-elevated); border: 1px solid var(--border-red-subtle);
  font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--red-light);
  font-family: var(--font-mono);
}
.row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row__name { font-size: var(--fs-md); font-weight: 550; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__meta { font-size: var(--fs-sm); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__meta .dot { color: var(--text-faint); margin: 0 7px; }
.row__trail { display: flex; align-items: center; gap: var(--sp-3); flex: none; color: var(--text-dim); }
.row__chev { color: var(--text-faint); transition: transform var(--t-fast), color var(--t-fast); }
.row:hover .row__chev { color: var(--text-tertiary); transform: translateX(2px); }

/* =============================================================================
   BADGES / STATUS
   ============================================================================= */
.badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600;
  border: 1px solid transparent;
}
.badge svg { flex: none; width: 13px; height: 13px; }
.pipe { display: inline-block; width: 1px; height: 0.92em; background: currentColor; opacity: .38; margin: 0 9px; vertical-align: -1px; border-radius: 1px; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--calm     { color: var(--green-text);  background: rgba(46,204,113,.12);  border-color: rgba(46,204,113,.3); }
.badge--active   { color: var(--blue-text);   background: rgba(52,152,219,.12);  border-color: rgba(52,152,219,.3); }
.badge--soft     { color: var(--yellow-text); background: rgba(240,169,57,.13);  border-color: rgba(240,169,57,.34); }
.badge--hard     { color: #ff8588;            background: rgba(255,0,8,.11);     border-color: rgba(255,0,8,.34); }
.badge--released { color: var(--text-secondary); background: rgba(255,255,255,.05); border-color: var(--hairline); }
.badge--neutral  { color: var(--text-tertiary); background: rgba(255,255,255,.04); border-color: var(--hairline); }
.badge--ver      { color: var(--text-tertiary); background: rgba(255,255,255,.04); border-color: var(--hairline); font-family: var(--font-mono); }
.badge--final    { color: var(--green-text); background: rgba(46,204,113,.14); border-color: rgba(46,204,113,.4); }
.badge-final { font-size: 9px; font-weight: 800; letter-spacing: .08em; color: var(--green-text); background: rgba(46,204,113,.15); border: 1px solid rgba(46,204,113,.4); border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.badge-final--btn { cursor: pointer; display: inline-flex; align-items: center; line-height: 1; vertical-align: middle; }
.badge-final--btn .bf-x { display: none; align-items: center; }
.badge-final--btn .bf-x svg { width: 11px; height: 11px; }
.badge-final--btn:hover { color: #ff8588; background: rgba(255,0,8,.13); border-color: rgba(255,0,8,.34); }
.badge-final--btn:hover .bf-txt { display: none; }
.badge-final--btn:hover .bf-x { display: inline-flex; }
.vcompare-wrap { width: 100%; }
.vcompare-note { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--bg-card); font-size: 12px; color: var(--text-tertiary); }
.vcompare-note svg { width: 15px; height: 15px; color: var(--yellow-text); flex: none; }
.vcompare-note b { color: var(--text-secondary); }
.vcompare-note .btn { margin-left: auto; flex: none; }
.vcompare { display: flex; gap: 16px; width: 100%; align-items: stretch; min-height: 72vh; }
.vcompare__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.vcompare__hd { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.vcompare__body { background: #050507; border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 16px; display: flex; justify-content: center; min-height: 320px; overflow: auto; }
/* J: in a compare column the body fills the remaining height and the PDF.js frame
   fills the body, so there is no tall empty band above the preview from the frame's
   default 72vh min-height (that is for the full single-view stage, not a pane). */
.vcompare__col .vcompare__body { flex: 1; min-height: 0; padding: 0; overflow: hidden; position: relative; }
.vcompare__col .vcompare__body .pv-frame { position: absolute; inset: 0; min-height: 0; margin: 0; border-radius: 0; }
.vcompare__col .vcompare__body .pv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
/* U: one combined compare bar split into two cells on a 1fr/1fr grid whose gap
   matches the pane gap (16px), so each version dropdown sits directly over its own
   pane (V5/blue over the left, V4/amber over the right, controls trailing right).
   X: the split glow lines are inset from the bar's outer edges and broken at the
   centre gap, so the amber line begins exactly at the right pane's left edge and
   neither line runs past the bar. */
.vcompare-bar { display: grid; grid-template-columns: 1fr 1fr; align-items: start; column-gap: 16px; padding: 7px 14px; position: relative; margin-bottom: 14px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-card); }
.vcompare-bar__cell { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 34px; }
/* On a narrow viewport (laptop, side panel open) the right cell's controls would
   exceed its 1fr half and spill past the bar under the dropdown. Let them wrap to a
   second line inside the cell so everything stays bound to the bar (the bar just
   grows taller); the dropdowns stay left-aligned over their panes. */
.vcompare-bar__cell--b { flex-wrap: wrap; row-gap: 8px; }
.vcompare-bar__ctrls { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; row-gap: 8px; }
.vcompare-bar .select { max-width: 100%; }
/* Sync scroll keeps its visible label (a bare checkbox is not self-explanatory the
   way the Full screen / Done Comparing icons are); only those two are icon-only,
   sized to matching 32x32 boxes so they stay evenly spaced beside the label. */
.vcompare-bar__ctrls .btn-icononly { width: 32px; height: 32px; min-width: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cmp-synclock-lbl { display: flex; align-items: center; gap: 6px; flex: none; font-size: 12px; color: var(--text-secondary); white-space: nowrap; cursor: pointer; }
.cmp-synclock-lbl input { width: 15px; height: 15px; margin: 0; accent-color: var(--red-light); cursor: pointer; }
.vcompare-bar::before { content: ''; position: absolute; left: 14px; right: calc(50% + 8px); bottom: -1px; height: 2px; background: var(--order); box-shadow: 0 0 12px var(--order), 0 2px 9px -1px var(--order); border-radius: 2px; }
.vcompare-bar::after { content: ''; position: absolute; left: calc(50% + 8px); right: 14px; bottom: -1px; height: 2px; background: var(--invoice); box-shadow: 0 0 12px var(--invoice), 0 2px 9px -1px var(--invoice); border-radius: 2px; }
.vcompare__body .doc-page, .vcompare__body .sheet, .vcompare__body .txt, .vcompare__body .img-frame { width: 100%; }
.reqdocs { border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--bg-card); padding: 13px 15px; margin-bottom: 16px; }
.reqdocs__h { display: flex; align-items: center; gap: 8px; font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--text-tertiary); margin-bottom: 11px; }
.reqdocs__h span { color: var(--text-faint); font-family: var(--font-mono); letter-spacing: 0; text-transform: none; }
.reqdocs__row { display: flex; flex-wrap: wrap; gap: 8px; }
.reqdocs__h { flex-wrap: wrap; }
.reqdocs__h .reqdocs__title { display: inline-flex; align-items: center; gap: 7px; color: var(--text-primary); font-weight: 650; font-size: 13.5px; text-transform: none; letter-spacing: 0; }
.reqdocs__h .reqdocs__title svg { width: 15px; height: 15px; color: var(--red-light); }
.reqdocs__count { color: var(--text-faint); font-family: var(--font-mono); letter-spacing: 0; text-transform: none; }
.reqdocs__seg-wrap { margin-left: auto; }
.cf__seg { display: inline-flex; gap: 3px; background: var(--bg-card-elevated); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 3px; }
.cf__segbtn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: none; background: none; color: var(--text-tertiary); font-size: 12px; font-weight: 600; border-radius: var(--r-pill); cursor: pointer; letter-spacing: 0; text-transform: none; transition: var(--t-fast); }
.cf__segbtn svg { width: 13px; height: 13px; }
.cf__segbtn:hover { color: var(--text-secondary); }
.cf__segbtn.on { background: var(--bg-raised); color: var(--text-primary); box-shadow: 0 0 20px -4px var(--red-glow-40); }
/* common-file cells: requirement chip + the file that satisfies it */
.cf__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 10px; }
.cfcell { position: relative; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--bg-card-elevated); padding: 10px 11px; display: flex; flex-direction: column; gap: 9px; transition: var(--t-fast); }
.cfcell--ok { border-color: rgba(46,204,113,.26); }
.cfcell--ok:hover { border-color: rgba(46,204,113,.5); box-shadow: 0 0 18px -6px var(--green-status); }
.cfcell--miss { border-style: dashed; }
.cfcell--miss:hover { border-color: var(--border-red-active); box-shadow: 0 0 18px -6px var(--red-light); }
.cfcell__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cfcell__menu { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 3px; border-radius: 5px; display: inline-flex; opacity: 0; transition: var(--t-fast); }
.cfcell__menu svg { width: 16px; height: 16px; }
.cfcell:hover .cfcell__menu { opacity: 1; }
.cfcell__menu:hover { color: var(--text-primary); background: var(--bg-row-hover); }
.cfcell__file { display: flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; }
.cfcell__ext { flex: none; width: 26px; height: 26px; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--border-red-subtle); color: var(--red-light); font-size: 8px; font-weight: 700; font-family: var(--font-mono); }
.cfcell__fname { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfcell__file:hover .cfcell__fname { color: var(--text-primary); }
.cfcell__assign { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--text-tertiary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 3px 2px; border-radius: 5px; }
.cfcell__assign svg { width: 14px; height: 14px; }
.cfcell__assign:hover { color: var(--red-light); }
.cfmenu { position: absolute; top: 44px; left: 8px; z-index: 60; min-width: 230px; }
.popmenu__sublabel { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); padding: 8px 12px 4px; }
.cfpick__ext { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 18px; border-radius: 4px; background: var(--bg-card); border: 1px solid var(--border-red-subtle); color: var(--red-light); font-size: 7.5px; font-weight: 700; font-family: var(--font-mono); margin-right: 8px; flex: none; }
.reqchip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 500; border: 1px solid; background: none; white-space: nowrap; }
.reqchip svg { width: 13px; height: 13px; }
.reqchip--ok { color: var(--green-text); background: rgba(46,204,113,.1); border-color: rgba(46,204,113,.3); }
.reqchip--miss { color: var(--text-tertiary); background: var(--bg-card-elevated); border-color: var(--border-strong); cursor: pointer; }
.reqchip--miss:hover { color: var(--red-light); border-color: var(--border-red-active); }

/* collapsible Common Files: toggle + collapsed status-chip bar -------------- */
.reqdocs__toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; margin-left: -3px; background: none; border: none; color: var(--text-tertiary); cursor: pointer; border-radius: var(--r-sm); transition: var(--t-fast); }
.reqdocs__toggle svg { width: 16px; height: 16px; transition: transform var(--t); }
.reqdocs__toggle:hover { color: var(--text-primary); background: var(--bg-row-hover); }
.reqdocs--collapsed .reqdocs__toggle svg { transform: rotate(-90deg); }
.reqdocs__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.reqchipwrap { position: relative; display: inline-flex; }
a.reqchip--ok { cursor: pointer; text-decoration: none; transition: var(--t-fast); }
a.reqchip--ok:hover { border-color: rgba(46,204,113,.6); color: var(--green-text); box-shadow: 0 0 14px -5px var(--green-status); }
.reqchip--miss svg { width: 12px; height: 12px; }

/* record-page tabs lock to the top of the scroll area once they reach the crumb
   bar — opaque mask (overshooting edges) so file rows can't bleed past, plus the
   same synced edge-glow layer used by the dashboard tabs. */
.content__inner--wide > .tabs { position: sticky; top: 0; z-index: 50; background: var(--bg-page); border-bottom: 1px solid var(--hairline); }

/* =============================================================================
   BANNERS  (5-color urgency, top-of-content)
   ============================================================================= */
.banner {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px var(--sp-6); font-size: var(--fs-base);
  border-bottom: 1px solid; flex: none;
}
.banner svg { width: 17px; height: 17px; flex: none; }
.banner strong { color: var(--text-primary); font-weight: 600; }
.banner__grow { flex: 1; }
.banner__link { font-weight: 600; cursor: pointer; background: none; border: none; color: var(--text-primary); border-bottom: 1px solid currentColor; padding: 0; font-size: inherit; }
.banner--calm     { background: rgba(46,204,113,.06); border-color: rgba(46,204,113,.18); color: var(--green-text); }
.banner--active   { background: rgba(52,152,219,.06); border-color: rgba(52,152,219,.18); color: var(--blue-text); }
.banner--soft     { background: rgba(240,169,57,.07); border-color: rgba(240,169,57,.22); color: var(--yellow-text); }
.banner--hard     { background: rgba(255,0,8,.07);    border-color: rgba(255,0,8,.26);   color: #ff8588; }
.banner--released { background: rgba(255,255,255,.04);border-color: var(--hairline);     color: var(--text-secondary); }

/* =============================================================================
   EMPTY STATE
   ============================================================================= */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-12) var(--sp-6); gap: var(--sp-3); }
.empty__icon { width: 46px; height: 46px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--bg-card-elevated); border: 1px solid var(--hairline); color: var(--text-dim); }
.empty__icon svg { width: 22px; height: 22px; stroke-width: 1.6; }
.empty__msg { font-size: var(--fs-md); font-weight: 600; color: var(--text-secondary); }
.empty__hint { font-size: var(--fs-base); color: var(--text-dim); max-width: 40ch; }

/* =============================================================================
   COMMAND PALETTE  /  global search  (the "floating" gravity well)
   ============================================================================= */
.scrim { position: fixed; inset: 0; background: rgba(4,4,7,.62); z-index: 200; opacity: 0; transition: opacity var(--t); }
.scrim.is-open { opacity: 1; }
.scrim.is-hidden { display: none; }
.cmd {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(10px) scale(.98);
  transform-origin: bottom center;
  width: min(680px, 94vw); z-index: 201;
  display: flex; flex-direction: column;
  border-radius: var(--r-xl); background: var(--bg-card); border: 1px solid var(--border-strong);
  overflow: hidden; opacity: 0; transition: opacity var(--t), transform var(--t);
}
.cmd.is-open { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.cmd:focus-within { border-color: var(--border-red-subtle); box-shadow: var(--shadow-modal), 0 0 30px -4px var(--red-glow-50), 0 0 70px -10px var(--red-glow-40); }
/* Flipped: input sits at the bottom (by the pill), results expand upward */
.cmd__foot { order: 1; }
.cmd__results { order: 2; }
.cmd__quicktabs-host { order: 3; }
.cmd__scopes { order: 4; }
.cmd__search { order: 5; }
.cmd__search { border-bottom: none; border-top: 1px solid var(--hairline); }
.cmd__scopes { border-top: 1px solid var(--hairline); }
body.cmd-open .topbar__center { opacity: 0; pointer-events: none; }
.cmd.is-hidden { display: none; }
.cmd__search { display: flex; align-items: center; gap: 12px; padding: 17px 18px; border-bottom: 1px solid var(--hairline); }
.cmd__search-ic { display: inline-flex; flex: none; color: var(--red-light); }
.cmd__search-ic svg { width: 21px; height: 21px; filter: drop-shadow(0 0 8px var(--red-glow-30)); }
.cmd__search-esc { flex: none; opacity: .65; }
.cmd__input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: var(--fs-lg); font-weight: 500; font-family: inherit; }
.cmd__input::placeholder { color: var(--text-faint); font-weight: 400; }
.cmd__scopepill { display: none; }
.cmd__scopepill.on { display: inline-flex; flex: none; }
.cmd__scopepill-x { background: none; border: none; color: inherit; cursor: pointer; display: inline-flex; padding: 0; margin-left: 1px; opacity: .75; }
.cmd__scopepill-x svg { width: 13px; height: 13px; border-left: 0; }
.cmd__scopepill-x:hover { opacity: 1; }
.cmd__scopes { display: flex; align-items: center; gap: 6px; padding: 9px 16px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.cmd__scopes-l { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--text-faint); flex: none; margin-right: 4px; }
.scope-chip { flex: none; }
.scope-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600;
  background: rgba(255,255,255,.04); border: 1px solid var(--hairline); color: var(--text-tertiary);
  transition: var(--t-fast);
}
.scope-chip svg { width: 13px; height: 13px; }
.scope-chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.scope-chip.is-active { background: var(--red-glow-10); border-color: var(--border-red-active); color: var(--red-light); }
.cmd__results { max-height: 46vh; overflow-y: auto; overflow-x: hidden; padding: 8px; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.cmd__results::-webkit-scrollbar-track { margin: 16px 0; }
.cmd__results::-webkit-scrollbar { width: 8px; }
.cmd__group-label { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--text-faint); padding: 10px 10px 6px; }
.cmd__row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer; }
.cmd__row:hover { background: var(--bg-card-elevated); }
.cmd__row-ic { width: 30px; height: 30px; border-radius: 7px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bg-card-elevated); border: 1px solid var(--hairline); color: var(--text-tertiary); }
.cmd__row-ic svg { width: 15px; height: 15px; }
.cmd__row-name { flex: 1; min-width: 0; font-size: var(--fs-base); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd__row-x { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 5px; border-radius: 5px; display: inline-flex; opacity: 0; }
.cmd__row:hover .cmd__row-x { opacity: 1; }
.cmd__row-x:hover { background: var(--bg-raised); color: #ff8588; }
.cmd__row-x svg { width: 14px; height: 14px; }
.cmd__hint { font-size: 12.5px; color: var(--text-dim); padding: 6px 10px 4px; }
.cmd__saverow { padding: 8px 10px 2px; border-top: 1px solid var(--hairline-faint); margin-top: 6px; }
.cmd__save { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-tertiary); background: none; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); padding: 7px 12px; cursor: pointer; }
.cmd__save:hover { color: var(--red-light); border-color: var(--border-red-active); }
.cmd__save svg { width: 14px; height: 14px; }
.cmd__back { background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 0 4px 0 0; display: inline-flex; vertical-align: -2px; }
.cmd__back svg { width: 14px; height: 14px; }
.cmd__tabs { display: flex; gap: 2px; padding: 4px 8px 0; border-bottom: 1px solid var(--hairline); margin-bottom: 6px; }
.cmd__tab { background: none; border: none; padding: 9px 13px; font-size: 13px; font-weight: 600; color: var(--text-tertiary); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.cmd__tab:hover { color: var(--text-secondary); }
.cmd__tab.on { color: var(--text-primary); border-bottom-color: var(--red-bright); }
.cmd__subtog { display: flex; gap: 6px; padding: 6px 10px 10px; }
.cmd__subbtn { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--hairline); background: var(--bg-card); color: var(--text-tertiary); cursor: pointer; }
.cmd__subbtn.on { background: var(--red-glow-10); border-color: var(--border-red-active); color: var(--text-primary); }
.cmd__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-md); cursor: pointer; }
.cmd__item:hover, .cmd__item.is-focus { background: var(--bg-card-elevated); }
.cmd__item.is-focus { box-shadow: inset 0 0 0 1px var(--border-red-active), 0 0 18px var(--red-glow-10); }
.cmd__item-ep { flex: none; }
.cmd__item-ext { flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: var(--bg-card-elevated); border: 1px solid var(--border-red-subtle); color: var(--red-light); font-size: 9.5px; font-weight: 700; font-family: var(--font-mono); box-shadow: 0 0 11px -4px var(--red-light); }
.cmd__item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cmd__item-tile { width: 38px; height: 38px; flex: none; }
.cmd__item-tile svg { width: 19px; height: 19px; }
.cmd__item-name { display: block; font-size: 15.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.cmd__item-ctx { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cmd__item-ctx .ep { flex: none; }
.cmd__ctx-meta { font-size: 12px; color: var(--text-tertiary); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd__item-meta { display: block; font-size: var(--fs-sm); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd__item-go { display: inline-flex; flex: none; color: var(--text-faint); opacity: 0; transition: opacity var(--t-fast); }
.cmd__item-go svg { width: 15px; height: 15px; }
.cmd__item.is-focus .cmd__item-go { opacity: 1; }
.cmd__pin { flex: none; background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 5px; border-radius: 6px; display: inline-flex; opacity: 0; transition: var(--t-fast); }
.cmd__pin svg { width: 16px; height: 16px; }
.cmd__item:hover .cmd__pin, .cmd__item.is-focus .cmd__pin, .cmd__pin.on { opacity: 1; }
.cmd__pin:hover { color: var(--red-light); background: var(--bg-raised); box-shadow: 0 0 12px var(--red-glow-20); }
.cmd__pin.on { color: var(--red-light); }
.cmd__pin.on svg { fill: var(--red-glow-30); stroke: var(--red-light); }
.cmd__foot { display: flex; align-items: center; gap: var(--sp-4); padding: 9px 16px; border-top: 1px solid var(--hairline); font-size: var(--fs-sm); color: var(--text-dim); }
.cmd__foot .hintkey { display: inline-flex; align-items: center; gap: 5px; }
/* BROWSE bar — its own non-scrolling row between the results and the TYPE bar, so nothing scrolls behind it (no sliver). */
.cmd__quicktabs-host { flex: none; }
.cmd__quicktabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 9px 16px; background: var(--bg-raised); border-top: 1px solid var(--hairline); }
.cmd__quicktabs-l { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--text-faint); margin-right: 2px; }
.cmd__qtab { background: var(--bg-card); border: 1px solid var(--hairline); color: var(--text-tertiary); font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill); cursor: pointer; transition: var(--t-fast); }
.cmd__qtab:hover { color: var(--text-primary); border-color: var(--border-red-active); box-shadow: 0 0 14px var(--red-glow-20); }
.cmd__qtab.on { color: var(--red-light); border-color: var(--border-red-active); background: var(--red-glow-10); box-shadow: 0 0 14px var(--red-glow-20); }
/* section header: label on the left, nav helpers inline on the right */
.cmd__sechead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px 6px; }
.cmd__sechead-l { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--text-faint); }
.cmd__nav { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-sm); color: var(--text-dim); }
.cmd__nav .hintkey { display: inline-flex; align-items: center; gap: 5px; }
.cmd__backsearch { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: var(--r-sm); transition: var(--t-fast); }
.cmd__backsearch svg { width: 14px; height: 14px; }
.cmd__backsearch:hover { color: var(--red-light); box-shadow: 0 0 13px -4px var(--red-light); }
/* expandable browse overlay (Recent/Pinned/Saved/Smart) over the results */
.cmd__overlay { display: flex; flex-direction: column; animation: cmdOverlayUp var(--t) var(--ease); }
@keyframes cmdOverlayUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cmd__overlay-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--bg-raised); border-bottom: 1px solid var(--hairline); }
.cmd__overlay-title { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--text-tertiary); }
.cmd__overlay-min { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 7px; border-radius: var(--r-sm); transition: var(--t-fast); }
.cmd__overlay-min svg { width: 15px; height: 15px; }
.cmd__overlay-min:hover { color: var(--text-primary); background: var(--bg-row-hover); }
.cmd__overlay-body { padding: 6px; }
.cmd__group-label--filter { padding: 8px 10px 6px; }
.cmd__activefilter { display: inline-flex; align-items: center; gap: 7px; padding: 5px 6px 5px 11px; background: var(--red-glow-10); border: 1px solid var(--border-red-active); border-radius: var(--r-pill); color: var(--red-light); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.cmd__activefilter svg { width: 14px; height: 14px; }
.cmd__filterclear { background: none; border: none; color: inherit; cursor: pointer; display: inline-flex; padding: 2px; border-radius: 50%; }
.cmd__filterclear svg { width: 13px; height: 13px; }
.cmd__filterclear:hover { background: var(--red-glow-20); }

/* =============================================================================
   SLIDE-OUT PANEL  (Active Checkouts)
   ============================================================================= */
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 94vw); z-index: 201;
  background: var(--bg-card); border-left: 1px solid var(--hairline); box-shadow: var(--shadow-panel);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--t-slow); }
.panel.is-open { transform: translateX(0); }
.panel.is-hidden { display: none; }
.panel__head { display: flex; align-items: center; gap: var(--sp-3); padding: 18px 20px; border-bottom: 1px solid var(--hairline); }
.panel__head-ic { display: inline-flex; flex: none; color: var(--text-secondary); }
.panel__head-ic svg { width: 18px; height: 18px; }
.panel__head h2 { font-size: var(--fs-md); font-weight: 600; }
.panel__count { margin-left: auto; font-size: var(--fs-sm); font-weight: 600; color: var(--text-tertiary); background: rgba(255,255,255,.05); padding: 3px 9px; border-radius: var(--r-pill); }
.panel__close { background: none; border: none; color: var(--text-dim); padding: 4px; display: inline-flex; border-radius: var(--r-xs); }
.panel__close:hover { color: var(--text-primary); background: var(--bg-row-hover); }
.panel__close svg { width: 18px; height: 18px; }
.panel__sub { padding: 12px 20px; font-size: var(--fs-sm); color: var(--text-tertiary); border-bottom: 1px solid var(--hairline); }
.panel__list { flex: 1; overflow-y: auto; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }

.co-row { background: var(--bg-card-elevated); border: 1px solid var(--hairline); border-left: 3px solid var(--accent, var(--hairline)); border-radius: var(--r-md); padding: 14px; display: flex; flex-direction: column; gap: 9px; }
/* ════════ STAGE ACCENT · single source of truth ════════════════════════════
   The checkout-stage color (left rail + hover glow) for EVERY stage-coded
   surface — panel rows (.co-row), dashboard "pick up" cards (.cw-card), stat
   cards (.co-stat), and list items (.coitem). Each surface sets its rail via
   border-left-color: var(--accent) and its hover glow off var(--accent); the
   stage→color map lives ONLY here. Add a new stage-coded surface by appending
   its class to these selectors — never re-declare the colors elsewhere. */
.co-row--calm,   .cw-card--calm,   .co-stat--calm,   .coitem--calm   { --accent: var(--green-status); }
.co-row--active, .cw-card--active, .co-stat--active, .coitem--active { --accent: var(--blue-status); }
.co-row--soft,   .cw-card--soft,   .co-stat--soft,   .coitem--soft   { --accent: var(--yellow-status); }
.co-row--hard,   .cw-card--hard,   .co-stat--hard,   .coitem--hard   { --accent: var(--red-bright); }
.co-row--released { --accent: var(--gray-status); }
.co-stat--all     { --accent: var(--text-secondary); }
.co-row { transition: var(--t-fast); }
.co-row:hover { border-color: var(--accent); box-shadow: inset 3px 0 15px -7px var(--accent), 0 0 24px -9px var(--accent); }
.co-row__top { display: flex; align-items: center; gap: 9px; }
.co-row__name { flex: 1; font-size: var(--fs-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-row__status { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text-tertiary); }
.co-row__status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); }
.co-row--calm .co-row__status .dot { background: var(--green-status); }
.co-row--active .co-row__status .dot { background: var(--blue-status); }
.co-row--soft .co-row__status { color: var(--yellow-text); } .co-row--soft .co-row__status .dot { background: var(--yellow-status); }
.co-row--hard .co-row__status { color: #ff8588; } .co-row--hard .co-row__status .dot { background: var(--red-bright); }
.co-row__expiry { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text-dim); }
.co-row__expiry svg { width: 13px; height: 13px; flex: none; }
.co-row--soft .co-row__expiry { color: var(--yellow-text); }
.co-row--hard .co-row__expiry { color: #ff8588; }
.co-row__actions { display: flex; gap: 8px; }
.co-row__actions .btn { flex: 1; }

/* =============================================================================
   MODAL  (centered dialog)
   ============================================================================= */
.modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.97); z-index: 201;
  width: min(460px, 92vw); background: var(--bg-raised); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-modal); padding: 24px; opacity: 0; transition: var(--t); }
.modal.is-open { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.modal.is-hidden { display: none; }
.modal__title { font-size: var(--fs-lg); font-weight: 650; }
.modal__msg { font-size: var(--fs-base); color: var(--text-secondary); margin-top: 8px; line-height: var(--lh-snug); }
.modal__actions { display: flex; gap: 8px; margin-top: 20px; }
/* resume-editing modal */
.modal--resume { width: min(500px, 93vw); }
.resume__head { display: flex; align-items: flex-start; gap: 13px; }
.resume__ic { flex: none; width: 40px; height: 40px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; background: var(--red-glow-10); border: 1px solid var(--border-red-active); color: var(--red-light); box-shadow: 0 0 18px -6px var(--red-light); }
.resume__ic svg { width: 20px; height: 20px; }
.resume__hint { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 10px 13px; border-radius: var(--r-md); background: var(--bg-card); border: 1px solid var(--hairline); font-size: 12.5px; color: var(--text-tertiary); }
.resume__hint svg { width: 15px; height: 15px; flex: none; color: var(--yellow-text); }
.resume__actions { align-items: center; }
.resume__actions .grow { flex: 1; }
.btn-ghost.danger { color: #ff8588; }
.btn-ghost.danger:hover:not(:disabled) { background: rgba(255,77,79,.08); box-shadow: 0 0 16px -6px var(--red-bright); }

/* =============================================================================
   TOAST
   ============================================================================= */
.toast-stack { position: fixed; bottom: var(--sp-6); right: var(--sp-6); z-index: 210; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: flex-start; gap: var(--sp-3); width: 340px; padding: 14px 16px;
  background: var(--bg-raised); border: 1px solid var(--border-strong); border-left: 3px solid var(--yellow-status);
  border-radius: var(--r-md); box-shadow: var(--shadow-float); }
.toast svg { width: 18px; height: 18px; flex: none; color: var(--yellow-text); }
.toast__body { flex: 1; }
.toast__title { font-size: var(--fs-base); font-weight: 600; }
.toast__msg { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 3px; line-height: var(--lh-snug); }
.toast__actions { display: flex; gap: 8px; margin-top: 10px; }

/* =============================================================================
   DROP ZONE
   ============================================================================= */
.dropzone {
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg);
  padding: var(--sp-10) var(--sp-6); text-align: center; transition: var(--t);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  background: var(--bg-card);
}
.dropzone.is-hover, .dropzone:hover { border-color: var(--border-red-active); background: var(--red-glow-10); }
.dropzone__icon { width: 44px; height: 44px; color: var(--text-dim); }
.dropzone__icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
.dropzone.is-hover .dropzone__icon, .dropzone:hover .dropzone__icon { color: var(--red-light); }
.dropzone__lead { font-size: var(--fs-md); color: var(--text-secondary); font-weight: 500; }
.dropzone__sub { font-size: var(--fs-sm); color: var(--text-dim); }
.dropzone__actions { display: flex; gap: 8px; margin-top: 6px; }

/* =============================================================================
   UTIL
   ============================================================================= */
.stack-2 > * + * { margin-top: var(--sp-2); }
.stack-3 > * + * { margin-top: var(--sp-3); }
.stack-4 > * + * { margin-top: var(--sp-4); }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.grow { flex: 1; }
.muted { color: var(--text-tertiary); }
.faint { color: var(--text-dim); }
.hidden { display: none !important; }

/* =============================================================================
   PASS 2 · SHARED TILES + COMPACT LIST ROW
   ============================================================================= */
.tile-sm { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; border: 1px solid var(--hairline); background: var(--bg-card-elevated); color: var(--text-tertiary); }
.tile-sm svg { width: 16px; height: 16px; stroke-width: 1.7; }
.tile-ext { font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--red-light); }
.tint-order    { color: var(--order-text);    background: var(--order-bg);    border-color: var(--order-bd); }
.tint-customer { color: var(--customer-text); background: var(--customer-bg); border-color: var(--customer-bd); }
.tint-quote    { color: var(--quote-text);    background: var(--quote-bg);    border-color: var(--quote-bd); }
.tint-invoice  { color: var(--invoice-text);  background: var(--invoice-bg);  border-color: var(--invoice-bd); }
.tint-job      { color: var(--job-text);      background: var(--job-bg);      border-color: var(--job-bd); }
.tint-po       { color: var(--po-text);       background: var(--po-bg);       border-color: var(--po-bd); }
.tint-supplier { color: var(--supplier-text); background: var(--supplier-bg); border-color: var(--supplier-bd); }
.tint-shipment { color: var(--shipment-text); background: var(--shipment-bg); border-color: var(--shipment-bd); }
.tint-project  { color: var(--project-text);  background: var(--project-bg);  border-color: var(--project-bd); }
.tint-apinvoice{ color: var(--apinvoice-text);background: var(--apinvoice-bg);border-color: var(--apinvoice-bd); }
.tint-home, .tint-upload { color: var(--text-secondary); background: var(--bg-card-elevated); border-color: var(--hairline); }
.tint-part     { color: var(--text-secondary); }
.tint-file     { color: var(--red-light); border-color: var(--border-red-subtle); }

.lrow { display: flex; align-items: center; gap: 13px; padding: 12px 13px; border-radius: 10px; transition: var(--t-fast); cursor: pointer; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; }
.lrow:hover, .lrow.is-focus { background: var(--bg-card-elevated); }
.lrow.is-focus { box-shadow: inset 0 0 0 1px var(--border-red-active); }
.lrow__body { flex: 1; min-width: 0; }
.lrow__name { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow__meta { display: block; font-size: 12.5px; color: var(--text-tertiary); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow__meta .dot { color: var(--text-faint); margin: 0 7px; }
.lrows { display: flex; flex-direction: column; gap: 3px; }
.lrow__trail { flex: none; display: flex; align-items: center; gap: 10px; }
.lrow__count { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }
.lrow__chev { color: var(--text-faint); display: inline-flex; } .lrow__chev svg { width: 15px; height: 15px; }
.lrow:hover .lrow__chev { color: var(--text-tertiary); }
/* Red unpin pin on a pinned row; click unpins (with an Undo toast). */
.lrow__unpin { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: none; border-radius: 7px; background: none; color: var(--red-light); cursor: pointer; transition: var(--t-fast); }
.lrow__unpin svg { width: 15px; height: 15px; }
.lrow__unpin:hover { background: var(--bg-row-hover); box-shadow: 0 0 13px -4px var(--red-light); }
.lgroup { margin-bottom: 14px; }
.lgroup__h { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 0 2px; }
.lgroup__h-l { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--text-tertiary); white-space: nowrap; }
.lgroup__h-l .count { color: var(--text-faint); margin-left: 6px; }
.lgroup__h-r { flex: 1; height: 1px; background: var(--hairline); }
.lgroup__h-a { font-size: var(--fs-sm); color: var(--text-tertiary); white-space: nowrap; }
.lgroup__h-a:hover { color: var(--red-light); }

/* =============================================================================
   PASS 2 · HOME (landing = search + browse + facet results)
   ============================================================================= */
.home { max-width: none; margin: 0; }
.home__hero { padding: var(--sp-4) 0 var(--sp-2); }
.home__search { display: flex; align-items: center; gap: 13px; height: 54px; padding: 0 16px; background: var(--bg-card); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); transition: var(--t-fast); }
.home__search:focus-within { border-color: var(--red-bright); box-shadow: var(--focus-ring), 0 0 26px var(--red-glow-10); }
.home__search .lead { width: 20px; height: 20px; color: var(--text-dim); flex: none; }
.home__search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text-primary); font-size: var(--fs-lg); font-family: inherit; }
.home__search input::placeholder { color: var(--text-faint); }
.home__clear { background: none; border: none; color: var(--text-dim); padding: 6px; border-radius: var(--r-sm); display: none; }
.home__clear:hover { background: var(--bg-row-hover); color: var(--text-primary); }
.home__clear svg { width: 15px; height: 15px; }
.home__clear.show { display: inline-flex; }
.home__kbd { flex: none; display: flex; gap: 4px; }
.home__scopes { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.scopebtn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--r-pill); background: var(--bg-card); border: 1px solid var(--hairline); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; transition: var(--t-fast); white-space: nowrap; }
.scopebtn svg { width: 13px; height: 13px; color: var(--text-tertiary); }
.scopebtn:hover { border-color: var(--border-strong); color: var(--text-primary); }
.scopebtn:hover svg { color: var(--text-secondary); }
.scopebtn.on { background: var(--red-glow-10); border-color: var(--border-red-active); color: var(--red-light); }
.scopebtn.on svg { color: var(--red-light); }
.scopebtn__c { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
.scopebtn.on .scopebtn__c { color: var(--red-light); }
.saved-row { display: flex; flex-wrap: wrap; gap: 8px; }
.saved-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: var(--r-pill); background: var(--bg-card); border: 1px solid var(--hairline); color: var(--text-secondary); font-size: 12.5px; font-weight: 500; transition: var(--t-fast); }
.saved-chip svg { width: 13px; height: 13px; color: var(--text-dim); }
.saved-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.home__saved { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.lgroup__toggle { background: none; border: none; color: var(--text-dim); cursor: pointer; display: inline-flex; padding: 0; margin-right: 2px; }
.lgroup__toggle svg { width: 15px; height: 15px; transition: transform var(--t-fast); }
.lgroup__toggle.collapsed svg { transform: rotate(-90deg); }
.btn.is-pinned { color: var(--red-light); border-color: var(--border-red-active); }
/* segmented view switcher (All / Records / Files / My checkouts) */
.home__bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.seg { display: inline-flex; gap: 3px; background: var(--bg-card); border: 1px solid var(--hairline); border-radius: 10px; padding: 3px; }
.segbtn { padding: 8px 15px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--text-tertiary); background: none; border: none; transition: var(--t-fast); white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.segbtn svg { width: 14px; height: 14px; }
.segbtn:hover { color: var(--text-secondary); }
.segbtn.on { background: var(--bg-raised); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-red-active); }
.segbtn .c { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
.segbtn.on .c { color: var(--red-light); }
.home__facets { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.home__facets.hidden { display: none; }
.home__facets-lbl { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--text-faint); margin-right: 2px; }
.home__results { margin-top: var(--sp-6); }
.home__resulthead { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--sp-3); }
.home__resulthead h2 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: var(--track-tight); }
.home__resulthead .n { font-size: var(--fs-sm); color: var(--text-dim); font-family: var(--font-mono); }

/* continue-working strip */
.cw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cw-card { min-width: 0; padding: 13px 14px; border: 1px solid var(--hairline); border-left-width: 3px; border-left-color: var(--accent, var(--hairline)); border-radius: var(--r-md); background: var(--bg-card); display: flex; flex-direction: column; gap: 9px; transition: var(--t-fast); }
@media (max-width: 780px) { .cw { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cw { grid-template-columns: 1fr; } }
.cw-card:hover { border-color: var(--accent); box-shadow: inset 3px 0 15px -7px var(--accent), 0 0 24px -9px var(--accent); }
/* stage accent (--accent) for .cw-card comes from the STAGE ACCENT map above */
.cw-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cw-card__file { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-card__meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-tertiary); }
.cw-card__meta svg { width: 13px; height: 13px; flex: none; }
.cw-card--soft .cw-card__meta { color: var(--yellow-text); }
.cw-card--hard .cw-card__meta { color: #ff8588; }
.cw-card__act { display: flex; gap: 6px; margin-top: 1px; }
.cw-card__act .btn { flex: 1; }

/* =============================================================================
   PASS 2 · RECORD HEADER + TABS
   ============================================================================= */
.rec-head { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--hairline); }
.rec-head__top { display: flex; align-items: flex-start; gap: var(--sp-4); }
.rec-head__lead { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.rec-head__tile { width: 58px; height: 58px; flex: none; border: 1px solid transparent; border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 22px -7px currentColor, inset 0 0 0 1px rgba(255,255,255,.02); }
.rec-head__tile svg { width: 28px; height: 28px; stroke-width: 1.6; filter: drop-shadow(0 0 7px currentColor); }
.rec-head__idblock { flex: 1; min-width: 0; }
.rec-head__eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.rec-head__title { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: var(--track-tight); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; line-height: 1.08; }
.rec-head__actions { display: flex; gap: 8px; flex: none; align-items: center; }
/* record pin: icon-only square toggle on the right, matching the proof.pdf viewer pin */
.rec-pin { flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-left: 2px; background: var(--bg-card-elevated); color: var(--text-secondary); border: 1px solid var(--border-strong); border-radius: var(--r-sm); cursor: pointer; transition: var(--t); }
.rec-pin svg { width: 17px; height: 17px; }
.rec-pin:hover { color: var(--text-primary); border-color: var(--border-red-active); background: var(--bg-card-elevated); box-shadow: 0 0 13px -4px var(--red-light); }
.rec-pin.on { color: var(--red-light); border-color: var(--border-red-active); box-shadow: 0 0 14px var(--red-glow-20); }
.rec-pin.on svg { color: var(--red-light); fill: var(--red-glow-30); }
.rec-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-5); align-items: center; }
.rec-meta__k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); margin-bottom: 4px; white-space: nowrap; }
.rec-meta > div { min-width: max-content; }
.rec-meta__v { font-size: 14px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rec-meta__v a { color: var(--customer-text); border-bottom: 1px solid transparent; transition: var(--t-fast); }
.rec-meta__v a:hover { border-color: currentColor; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--hairline); margin: var(--sp-6) 0 var(--sp-5); overflow: visible; scrollbar-width: none; -ms-overflow-style: none; }
@media (max-width: 560px) { .tabs { overflow-x: auto; } }
.tabs::-webkit-scrollbar { height: 0; width: 0; display: none; }
.tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 11px 15px; font-size: 13.5px; font-weight: 600; color: var(--text-tertiary); transition: color var(--t-fast); white-space: nowrap; background: none; border: none; }
.tab:hover { color: var(--text-secondary); }
.tab.on { color: var(--text-primary); }
.tab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red-bright); border-radius: 2px 2px 0 0; }
.tab svg { width: 16px; height: 16px; }
.tab__c { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
.tab.on .tab__c { color: var(--text-tertiary); }
.tabpane { display: none; }
.tabpane.on { display: block; animation: fadein var(--t) var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* =============================================================================
   PASS 2 · FILES TREE (file → versions nested)
   ============================================================================= */
.ftree { display: flex; flex-direction: column; gap: 6px; }
.fitem { border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--bg-card); transition: var(--t-fast); position: relative; }
/* Lift a hovered file row above its neighbours (and the Common Files panel) so its
   hover glow radiates freely instead of being clipped into a harsh line by the
   adjacent opaque cards. */
.fitem:hover { z-index: 3; }
.fitem:hover { border-color: var(--border-strong); }
.fitem__row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; }
.fitem__open { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; border-radius: 8px; }
.fitem__tw { width: 22px; height: 22px; flex: none; color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0; border-radius: 5px; transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast); }
.fitem__tw:hover { background: var(--bg-raised); color: var(--text-secondary); }
.fitem__tw svg { width: 15px; height: 15px; }
.fitem.open .fitem__tw { transform: rotate(90deg); }
.fitem__ext { width: 38px; height: 38px; flex: none; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: var(--bg-card-elevated); border: 1px solid var(--border-red-subtle); font-size: 10px; font-weight: 700; color: var(--red-light); font-family: var(--font-mono); }
.fitem__body { flex: 1; min-width: 0; }
.fitem__name { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fitem__meta { display: block; font-size: 12px; color: var(--text-tertiary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fitem__meta .dot { color: var(--text-faint); margin: 0 6px; }
.fitem__badges { display: flex; align-items: center; gap: 8px; flex: none; }
.fitem__actions { display: flex; gap: 1px; flex: none; opacity: 0; transition: opacity var(--t-fast); }
.fitem__row:hover .fitem__actions { opacity: 1; }
.iconbtn { background: none; border: none; color: var(--text-dim); padding: 7px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.iconbtn:hover { background: var(--bg-raised); color: var(--text-primary); }
.iconbtn.danger:hover { color: #ff8588; }
.iconbtn svg { width: 16px; height: 16px; }
.fitem__versions { display: none; flex-direction: column; padding: 0 14px 10px 48px; }
.fitem.open .fitem__versions { display: flex; }
.vrow { display: flex; align-items: center; gap: 11px; padding: 8px 11px; position: relative; margin-left: 6px; }
.vrow::before { display: none; }
.vrow__tag { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-secondary); width: 28px; flex: none; }
.vrow.cur .vrow__tag { color: var(--red-light); }
.vrow__body { flex: 1; min-width: 0; }
.vrow__who { display: block; font-size: 12.5px; color: var(--text-secondary); }
.vrow__age { display: block; font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.vrow__cur { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--red-light); flex: none; }
.vrow__restore { font-size: 11.5px; color: var(--text-tertiary); border: 1px solid var(--hairline); background: none; padding: 4px 9px; border-radius: 6px; flex: none; }
.vrow__restore:hover { color: var(--text-primary); border-color: var(--border-strong); box-shadow: 0 0 12px -3px var(--red-light); }
/* mark-final flag (dedicated hit target, no hover-swap) */
.vrow__flag { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; border-radius: 7px; color: var(--text-faint); cursor: pointer; transition: var(--t-fast); }
.vrow__flag svg { width: 15px; height: 15px; }
.vrow:hover .vrow__flag { color: var(--text-tertiary); border-color: var(--hairline); }
.vrow__flag:hover { color: var(--green-text); border-color: rgba(46,204,113,.45); background: rgba(46,204,113,.1); box-shadow: 0 0 13px -4px var(--green-status); }
.vrow__flag.on { color: var(--green-text); border-color: rgba(46,204,113,.45); background: rgba(46,204,113,.14); opacity: 1; }
.vrow__flag.on svg { fill: rgba(46,204,113,.3); }
.vrow__finalribbon { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--green-text); background: rgba(46,204,113,.14); border: 1px solid rgba(46,204,113,.4); border-radius: 5px; padding: 3px 7px; box-shadow: 0 0 12px -5px var(--green-status); }
.vrow__finalribbon svg { width: 11px; height: 11px; }
.vrow.is-final { background: rgba(46,204,113,.05); border-radius: 7px; }
.vrow.is-final::before { background: rgba(46,204,113,.4); }

/* file row: checkout zone + far-right version pill */
.fitem__co { display: flex; align-items: center; gap: 9px; flex: none; }
.fitem__co .btn { white-space: nowrap; }
.fitem--co-you { border-left: 3px solid var(--green-status); }
.fitem--co-you:hover { box-shadow: 0 0 0 1px rgba(46,204,113,.2), 0 0 22px -8px var(--green-status); }
.fitem--co-other { border-left: 3px solid var(--blue-status); }
.presence__av--sm { width: 24px; height: 24px; font-size: 9px; flex: none; }
.fitem__ver { flex: none; position: relative; display: flex; align-items: center; padding-left: 16px; margin-left: 4px; }
.fitem__ver::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 16px; background: var(--hairline); }
.fitem__finaltag { display: inline-flex; align-items: center; gap: 3px; color: var(--green-text); font-weight: 600; }
.fitem__finaltag svg { width: 12px; height: 12px; }
/* actions stay visible (more usable straight from the bar), brighten on hover */
.fitem__actions { display: flex; gap: 1px; flex: none; opacity: .55; transition: opacity var(--t-fast); }
.fitem__row:hover .fitem__actions { opacity: 1; }
.iconbtn--co:hover { color: var(--red-light); box-shadow: 0 0 13px -4px var(--red-light); }

/* popover menu (overflow / open-in-new-tab) */
.popmenu { position: absolute; z-index: 50; min-width: 188px; right: 0; top: calc(100% + 4px); background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-float); padding: 6px; }
.popmenu.hidden { display: none; }
.popmenu__i { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--text-secondary); cursor: pointer; width: 100%; background: none; border: none; text-align: left; }
.popmenu__i:hover { background: var(--bg-card-elevated); color: var(--text-primary); }
.popmenu__i svg { width: 15px; height: 15px; color: var(--text-dim); flex: none; }
.popmenu__i.danger:hover { color: #ff8588; }
.popmenu__sep { height: 1px; background: var(--hairline); margin: 5px 0; }

/* =============================================================================
   PASS 2 · FINDER COLUMNS EXPLORER (Related)
   ============================================================================= */
.cols { display: flex; border: 1px solid var(--hairline); border-radius: var(--r-md); overflow-x: auto; overflow-y: hidden; background: var(--bg-card); min-height: 320px; transition: min-height var(--t); }
.rel-expanded .cols { min-height: 72vh; }
.rel-expanded .col__body { max-height: none; }
.cols::-webkit-scrollbar { height: 8px; }
.cols::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 8px; }
.cols::-webkit-scrollbar-thumb:hover { background: var(--border-neutral, var(--hairline)); }
.col { width: 198px; flex: none; border-right: 1px solid var(--hairline); display: flex; flex-direction: column; min-width: 0; }
.col:last-child { flex: 1 0 288px; border-right: none; min-width: 288px; background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent 120px); }
.col__h { padding: 10px 13px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--text-faint); border-bottom: 1px solid var(--hairline); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.col__body { padding: 6px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.colitem { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; transition: var(--t-fast); cursor: pointer; }
.colitem:hover { background: var(--bg-row-hover); }
.colitem.sel { background: var(--red-glow-10); box-shadow: inset 0 0 0 1px var(--border-red-active); }
.colitem__n { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.colitem__c { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); }
.colitem__chev { color: var(--text-faint); display: inline-flex; } .colitem__chev svg { width: 14px; height: 14px; }
.colitem.sel .colitem__chev { color: var(--red-light); }
.colgrp { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); padding: 12px 10px 5px; }
.col__search { padding: 8px 8px 6px; border-bottom: 1px solid var(--hairline-faint); }
.col__filter { width: 100%; height: 30px; padding: 0 10px 0 30px; background: var(--bg-input); border: 1px solid var(--hairline); border-radius: 6px; color: var(--text-primary); font-size: 12px; font-family: inherit; outline: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23ffffff55' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 9px center; }
.col__filter:focus { border-color: var(--red-bright); box-shadow: var(--focus-ring); }
/* Cascade color cues: the LEAF (the record whose files you are viewing) and its
   Files column read GREEN, so it stands apart from the RED breadcrumb chain of
   selected records that got you there. */
.colitem.sel.sel-leaf { background: color-mix(in srgb, var(--green-status) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green-status) 60%, transparent), 0 0 18px -8px var(--green-status); }
.colitem.sel.sel-leaf .colitem__chev { color: var(--green-text); }
.col--files .col__h { color: var(--green-text); border-bottom-color: color-mix(in srgb, var(--green-status) 32%, var(--hairline)); }
/* "End of the thread" notice shown inside the Files column when the leaf has no
   further related records (the empty drill column is suppressed). */
.col__note { display: flex; align-items: flex-start; gap: 7px; margin: 4px 4px 9px; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--bg-card-elevated); color: var(--text-tertiary); font-size: 12px; line-height: 1.35; }
.col__note svg { width: 14px; height: 14px; flex: none; color: var(--text-faint); margin-top: 1px; }
/* "Open <record> ›" link — same look in the Files column and the empty state. */
.col__open { color: var(--red-light); font-size: 12.5px; font-weight: 600; }
.col__open:hover { text-decoration: underline; color: var(--red-light); }
/* Right-click "Go to <record>" menu on a cascade tile (Kinetic-style navigation). */
.cascade-ctx { position: fixed; z-index: 300; min-width: 190px; max-width: 280px; background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: 9px; box-shadow: var(--shadow-float); padding: 4px; }
.cascade-ctx__i { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; background: none; border: none; color: var(--text-primary); font-size: 13px; cursor: pointer; border-radius: 6px; text-align: left; }
.cascade-ctx__i:hover { background: var(--bg-row-hover); }
.cascade-ctx__i svg { width: 15px; height: 15px; flex: none; color: var(--red-light); }
.cascade-ctx__i span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =============================================================================
   PASS 2 · ACTIVITY TIMELINE
   ============================================================================= */
.timeline { position: relative; }
.tl-item { display: flex; gap: 14px; padding-bottom: 18px; position: relative; }
.tl-item::before { content: ''; position: absolute; left: 14px; top: 30px; bottom: -2px; width: 1.5px; background: var(--hairline); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item:last-child::before { display: none; }
.tl-dot { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bg-card-elevated); border: 1px solid var(--hairline); color: var(--text-tertiary); z-index: 1; }
.tl-dot svg { width: 15px; height: 15px; }
.tl-dot--edit { color: var(--blue-text); border-color: var(--blue-status); }
.tl-dot--version { color: var(--red-light); border-color: var(--border-red-active); }
.tl-dot--checkin { color: var(--green-text); border-color: var(--green-status); }
.tl-dot--checkout { color: var(--yellow-text); border-color: var(--yellow-status); }
.tl-body { flex: 1; min-width: 0; padding-top: 4px; }
.tl-line { font-size: 13.5px; color: var(--text-secondary); line-height: var(--lh-snug); }
.tl-line strong { color: var(--text-primary); font-weight: 600; }
.tl-time { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }

/* =============================================================================
   PASS 2 · PRESENCE / LOCK + FILE META + CALLOUT
   ============================================================================= */
.presence { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(52,152,219,.28); background: rgba(52,152,219,.06); border-radius: var(--r-md); }
.presence__av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #5aa0d8, #2c6aa0); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; position: relative; }
.presence__av::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--blue-status); border: 2px solid var(--bg-page); }
.presence__body { flex: 1; min-width: 0; }
.presence__t { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.presence__m { font-size: 12px; color: var(--blue-text); margin-top: 2px; }
.presence__act { display: flex; gap: 8px; flex: none; }

.fmeta { display: flex; flex-wrap: wrap; gap: 7px 22px; }
.fmeta__i { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-tertiary); white-space: nowrap; }
.fmeta__i svg { width: 14px; height: 14px; color: var(--text-dim); flex: none; }
.fmeta__i b { color: var(--text-secondary); font-weight: 600; }

.callout { display: flex; gap: 11px; padding: 12px 14px; border-radius: var(--r-md); border: 1px dashed var(--border-strong); background: var(--bg-card); font-size: 12.5px; color: var(--text-tertiary); line-height: var(--lh-snug); }
.callout svg { width: 16px; height: 16px; color: var(--yellow-text); flex: none; margin-top: 1px; }
.callout code { font-family: var(--font-mono); color: var(--red-light); font-size: 11.5px; }
.callout b { color: var(--text-secondary); font-weight: 600; }

/* =============================================================================
   PASS 2 · UPLOADER (hot-canvas overlay - button-triggered, drag-more-in)
   ============================================================================= */
.uploader { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.98); z-index: 201; width: min(900px, 94vw); height: min(660px, 90vh); background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--r-xl); box-shadow: var(--shadow-modal); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transition: opacity var(--t), transform var(--t); }
.uploader.is-open { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.uploader.is-hidden { display: none; }
.uploader__head { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--hairline); }
.uploader__head h2 { font-size: var(--fs-md); font-weight: 650; }
.uploader__head-ic { display: inline-flex; flex: none; color: var(--red-light); } .uploader__head-ic svg { width: 20px; height: 20px; }
.uploader__target { display: inline-flex; align-items: center; gap: 7px; }
.uploader__spacer { flex: 1; }
.uploader__canvas { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: background var(--t-fast); }
.uploader__canvas.drag { background: var(--red-glow-10); box-shadow: inset 0 0 0 2px var(--border-red-active); }
.uploader__hint { flex: 1; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); color: var(--text-tertiary); padding: 40px; transition: var(--t-fast); }
.uploader__canvas.drag .uploader__hint { border-color: var(--border-red-active); }
.uploader__hint-ic { width: 52px; height: 52px; color: var(--text-dim); } .uploader__hint-ic svg { width: 100%; height: 100%; stroke-width: 1.4; }
.uploader__canvas.drag .uploader__hint-ic { color: var(--red-light); }
.uploader__hint .lead { font-size: var(--fs-md); font-weight: 600; color: var(--text-secondary); }
.uploader__hint .sub { font-size: var(--fs-sm); color: var(--text-dim); max-width: 46ch; line-height: var(--lh-snug); }
.uploader__foot { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--hairline); }
.uploader__count { font-size: 13px; color: var(--text-tertiary); }

.upcard { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--bg-card); }
.upcard.mapped { border-color: rgba(46,204,113,.28); background: rgba(46,204,113,.03); }
.upcard__ext { width: 38px; height: 38px; flex: none; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: var(--bg-card-elevated); border: 1px solid var(--border-red-subtle); font-size: 10px; font-weight: 700; color: var(--red-light); font-family: var(--font-mono); margin-top: 1px; }
.upcard__body { flex: 1; min-width: 0; }
.upcard__name { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upcard__map { margin-top: 9px; position: relative; }
.mapsearch { position: relative; }
.mapsearch input { width: 100%; height: 36px; padding: 0 12px 0 34px; background: var(--bg-input); border: 1px solid var(--hairline); border-radius: var(--r-sm); color: var(--text-primary); font-family: inherit; font-size: 13px; outline: none; }
.mapsearch input:focus { border-color: var(--red-bright); box-shadow: var(--focus-ring); }
.mapsearch::before { content: ''; position: absolute; left: 11px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff66' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
.mapresults { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-float); overflow: hidden; max-height: 230px; overflow-y: auto; }
.mapresults.hidden { display: none; }
.mapres { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; }
.mapres:hover { background: var(--bg-card-elevated); }
.mapres__n { font-size: 13px; color: var(--text-primary); }
.mapres__m { font-size: 12px; color: var(--text-tertiary); }
.mapdest { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mapchange { font-size: 12px; color: var(--text-tertiary); background: none; border: none; cursor: pointer; }
.mapchange:hover { color: var(--red-light); }
.mapchange.iconbtn-sm { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; padding: 0; }
.mapchange.iconbtn-sm svg { width: 14px; height: 14px; }
.mapchange.iconbtn-sm:hover { background: var(--bg-row-hover); }
/* rename-before-upload: pencil next to the queued file name */
.upcard__namerow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.upcard__namerow .upcard__name { min-width: 0; flex: 0 1 auto; }
.upcard__rename { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--text-faint); border-radius: 5px; cursor: pointer; opacity: 0; transition: var(--t-fast); }
.upcard:hover .upcard__rename, .upcard__rename:focus-visible { opacity: 1; }
.upcard__rename:hover { background: var(--bg-row-hover); color: var(--text-primary); }
.upcard__rename svg { width: 13px; height: 13px; }
.upcard__renameinput { font-size: 13.5px; font-weight: 600; color: var(--text-primary); background: var(--bg-card-elevated); border: 1px solid var(--border-red-active); border-radius: 6px; padding: 3px 8px; width: 100%; max-width: 380px; outline: none; }

.split { display: inline-flex; position: relative; }
.split__main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split__toggle { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 8px; margin-left: 1px; }
.split__toggle svg { width: 14px; height: 14px; }
.split [data-split-menu] { left: auto; right: 0; top: calc(100% + 5px); min-width: 230px; }

/* shared upload canvas (full-page + overlay) - the container IS the drop zone */
.uc { display: flex; flex-direction: column; padding: 12px; transition: background var(--t); }
.uploader__canvas.uc { gap: 0; }
/* The dashed drop frame wraps only the pane (the drop area), so the tabs sit
   ABOVE it rather than inside it. Drag highlight moves to the pane to match. */
.uc--drag .uc__pane { border-color: var(--border-red-active); background: var(--red-glow-10); box-shadow: inset 0 0 80px -34px var(--red-light); }
/* QBO-style tabs: Needs mapping vs Uploaded */
.uc__tabs { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.uc__tabs-l { display: flex; gap: 4px; }
.uc__tabs-btns { display: flex; align-items: center; gap: 8px; padding-bottom: 7px; flex-wrap: wrap; }
.uc__tab { white-space: nowrap; }
.uc__tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-tertiary); font-size: 13px; font-weight: 600; cursor: pointer; position: relative; transition: var(--t-fast); }
.uc__tab svg { width: 15px; height: 15px; }
.uc__tab:hover { color: var(--text-secondary); }
.uc__tab.on { color: var(--text-primary); border-bottom-color: var(--red-bright); }
.uc__tab.on::after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; box-shadow: 0 3px 9px -1px var(--red-bright), 0 6px 18px -4px var(--red-light); }
.uc__tab .uc__n { background: var(--bg-card-elevated); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 1px 7px; font-size: 11px; font-family: var(--font-mono); color: var(--text-tertiary); }
.uc__tab.on .uc__n { color: var(--red-light); border-color: var(--border-red-active); }
.uc__pane { min-height: 300px; display: flex; flex-direction: column; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); padding: 14px; transition: border-color var(--t), background var(--t), box-shadow var(--t); }
.uc__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); margin-bottom: 14px;}
.uc__barlead { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-tertiary); }
.uc__barlead svg { width: 17px; height: 17px; color: var(--text-dim); }
.uc__note { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--text-tertiary); padding: 0 2px 14px; line-height: var(--lh-snug); }
.uc__note svg { width: 15px; height: 15px; color: var(--text-dim); flex: none; margin-top: 1px; }
.uc__note b { color: var(--text-secondary); } .uc__note .mono { color: var(--text-tertiary); }
/* consolidated top toolbar */
.uc__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 11px 13px; margin-bottom: 12px; background: var(--bg-card); border: 1px solid var(--hairline); border-radius: var(--r-md); }id var(--hairline); border-radius: var(--r-md); }
.uc__toolbar-hint { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-tertiary); }
.uc__toolbar-hint svg { width: 17px; height: 17px; color: var(--red-light); flex: none; }
.uc__toolbar-hint b { color: var(--text-secondary); }
.uc__toolbar-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.uc__listlabel { display: flex; align-items: center; gap: 8px; font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--text-tertiary); margin: 2px 2px 10px; }
.uc__listlabel--done { color: var(--green-text); margin-top: 20px; }
.uc__listlabel--done svg { width: 14px; height: 14px; }
.uc__sechead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 10px; }
.uc__sectitle { display: flex; align-items: center; gap: 8px; font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--text-tertiary); }
.uc__sectitle svg { width: 14px; height: 14px; color: var(--green-text); }
.uc__sectitle--done { color: var(--green-text); }
.uc__n { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); background: rgba(255,255,255,.05); padding: 2px 7px; border-radius: var(--r-pill); }
.uc__list { display: flex; flex-direction: column; gap: 8px; }
.uc__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 44px 20px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); color: var(--text-tertiary); }
.uc__empty--big { min-height: 420px; }
.uc__empty svg { width: 42px; height: 42px; color: var(--text-dim); stroke-width: 1.4; }
.uc__empty-l { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.uc__empty-s { font-size: 12.5px; color: var(--text-dim); }
.uc__done { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.uc__done .upcard { opacity: .82; }
.upcard__chk { display: flex; align-items: flex-start; padding-top: 12px; flex: none; }
.upcard__chk input { width: 16px; height: 16px; accent-color: var(--red-bright); cursor: pointer; }
.uc__selbar { display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 10px; background: var(--red-glow-10); border: 1px solid var(--border-red-active); border-radius: var(--r-md); flex-wrap: wrap; }
.uc__selbar .mapsearch { flex: 1; min-width: 200px; max-width: 380px; }
.uc__sel-n { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }

/* page footer (company tagline + help) - bottom of every page */
.pagefoot { border-top: 1px solid var(--hairline); margin: var(--sp-5) var(--sp-8) 0; padding: var(--sp-6) 0 var(--sp-6); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.pagefoot__logo { max-height: 30px; max-width: 220px; width: auto; object-fit: contain; }
.pagefoot__wordmark { font-size: 15px; font-weight: 700; color: var(--text-secondary); letter-spacing: .02em; }
.pagefoot__tagline { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--text-tertiary); }
.pagefoot__help { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-tertiary); transition: color var(--t-fast); }
.pagefoot__help svg { width: 14px; height: 14px; }
.pagefoot__help:hover { color: var(--red-light); }

/* =============================================================================
   RESPONSIVE  ·  rail becomes drawer < 920px
   ============================================================================= */
@media (max-width: 1120px) {
  .topbar__center { flex: 0 1 300px; }
  .crumb-back { display: none; }
}
@media (max-width: 920px) {
  .app, .app.rail-collapsed { grid-template-columns: 1fr; }
  .rail {
    position: fixed; top: 0; left: 0; bottom: 0; width: 270px; z-index: 150;
    transform: translateX(-100%); transition: transform var(--t-slow); box-shadow: var(--shadow-panel);
  }
  .rail.is-open { transform: translateX(0); }
  .rail__collapse { display: none; }
  .topbar__hamburger { display: inline-flex; }
  .topbar__left, .topbar__right { flex: 0 0 auto; }
  .topbar__center { flex: 1 1 auto; }
  .crumb, .crumb-back { display: none; }
  .qsearch { width: auto; flex: 1; max-width: none; }
  .qsearch__label { display: none; }
  .content__inner { padding: var(--sp-6) var(--sp-5) var(--sp-6); }
  .page-head { flex-direction: column; gap: var(--sp-4); }
}
@media (max-width: 560px) {
  .topbar { padding: 0 var(--sp-4); }
  .content__inner { padding: var(--sp-5) var(--sp-4) var(--sp-5); }
  .page-title, .page-head__title { font-size: var(--fs-xl); }
  .co-pill__txt { display: none; }
  .co-pill { padding: 0 9px; }
}

/* =============================================================================
   NEON GLOW PASS  ·  EPIClock signature - everything interactive lights up.
   Appended last so these hover/active/focus glows win on equal specificity.
   ============================================================================= */
/* buttons */
.btn-primary:hover:not(:disabled) { box-shadow: 0 0 22px -3px var(--red-light), 0 2px 10px rgba(0,0,0,.4); }
.btn-secondary:hover:not(:disabled), .btn-ghost:hover:not(:disabled) { border-color: var(--border-red-active); box-shadow: 0 0 17px -5px var(--red-light); }
.btn-secondary:hover:not(:disabled) svg, .btn-ghost:hover:not(:disabled) svg { filter: drop-shadow(0 0 5px var(--red-glow-30)); }
.btn:active:not(:disabled) { transform: scale(.98); }
/* tabs */
.tab:hover { box-shadow: 0 0 15px -6px var(--red-light); }
.tab.on { box-shadow: 0 0 18px -6px var(--red-light); }
.tab.on svg { filter: drop-shadow(0 0 6px var(--red-glow-40)); }
/* rail nav */
.navlink:hover { box-shadow: inset 0 0 22px -9px var(--red-glow-40); border-color: var(--border-red-subtle); }
.navlink.is-active svg { filter: drop-shadow(0 0 7px var(--red-glow-40)); }
/* icon buttons */
.iconbtn:hover { box-shadow: 0 0 13px -4px var(--red-light); }
/* breadcrumb + inline links */
.crumb__item:not(.crumb__item--cur):hover { color: var(--red-light); text-shadow: 0 0 13px var(--red-glow-40); }
.crumb-back:hover { color: var(--red-light); box-shadow: 0 0 14px -4px var(--red-light); }
/* entity pills */
a.ep:hover, .ep--link:hover { box-shadow: 0 0 15px -5px currentColor; }
/* inputs + selects + textareas: focus glow */
.input:focus, .select:focus, textarea:focus, input[type=text]:focus, input[type=search]:focus, input[type=number]:focus,
.mapsearch input:focus, .col__filter:focus { outline: none; border-color: var(--border-red-active); box-shadow: 0 0 0 3px var(--red-glow-10), 0 0 16px -5px var(--red-light); }
/* finder columns + list rows */
.colitem:hover { box-shadow: 0 0 16px -7px var(--red-light); border-color: var(--border-red-subtle); }
.colitem.sel { box-shadow: inset 0 0 0 1px var(--border-red-active), 0 0 16px -7px var(--red-light); }
/* topbar pills + fab */
.co-pill:hover { box-shadow: 0 0 19px -5px var(--red-light); border-color: var(--border-red-active); }
.notif-fab:hover { box-shadow: 0 0 22px -3px var(--red-light); }
/* launcher cards + saved/smart rows */
.scard:hover { box-shadow: 0 0 32px -6px var(--red-glow-40), 0 0 68px -16px var(--red-glow-30); }
.cmd__row:hover { box-shadow: 0 0 15px -6px var(--red-light); }
/* version restore + final flag already glow; add to checkout/health hovers */
.hstat:hover { box-shadow: inset 0 0 22px -12px var(--red-glow-40); }
/* toggles + checkboxes get a lit ring when active */
.toggle input:checked + .toggle__track { box-shadow: 0 0 16px -2px var(--red-glow-40); }
/* section-head refresh / actions */
.section-head__action:hover { color: var(--red-light); text-shadow: 0 0 12px var(--red-glow-40); }

/* =============================================================================
   PASS 3  ·  this-round components + a real neon backlight system
   ============================================================================= */

/* ---- Common Files: 2x2 grid + readable count ---- */
.reqdocs { margin-bottom: var(--sp-5); }
.reqdocs__h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.reqdocs__count { font-size: 11.5px; color: var(--text-secondary); background: var(--bg-card-elevated); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap; }
.reqdocs__count b { color: var(--green-text); font-weight: 700; }
.cf__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (max-width: 620px){ .cf__grid { grid-template-columns: 1fr; } }
.cfcell { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; padding: 7px 9px 7px 8px; min-height: 40px; }
/* Fixed-width doc-type chip so the file link / "+ Assign" that follows it starts at a
   consistent distance from the card's left edge instead of shifting with the label
   width (Quote vs Pack Slip vs Sales Order). Longer labels grow past the floor. */
.cfcell .reqchip { flex: none; padding: 4px 9px; font-size: 11.5px; min-width: 96px; justify-content: center; }
.cfcell__file { display: inline-flex; align-items: center; gap: 0; min-width: 0; flex: 1; text-decoration: none; }
.cfcell__file .cfcell__ext { width: 0; height: 0; padding: 0; border: none; overflow: hidden; }
.cfcell__fname { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfcell__file:hover .cfcell__fname { color: var(--green-text); text-decoration: underline; }
.cfcell__menu { flex: none; opacity: 0; background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 3px; border-radius: 5px; display: inline-flex; }
.cfcell__menu svg { width: 15px; height: 15px; }
.cfcell:hover .cfcell__menu { opacity: 1; }
.cfcell--miss .cfcell__assign { flex: 1; justify-content: flex-end; }
.cfcellwrap { position: relative; }
.cfmenu { top: 42px; left: 0; }

/* ---- Mark-Final pill: check that expands to "Final" ---- */
.vrow__final { display: inline-flex; align-items: center; gap: 0; height: 26px; padding: 0 5px; flex: none; border: 1px solid transparent; border-radius: 13px; background: none; color: var(--text-faint); cursor: pointer; overflow: hidden; transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), gap .22s var(--ease), padding .22s var(--ease); }
.vrow__final-ic { display: inline-flex; flex: none; }
.vrow__final-ic svg { width: 15px; height: 15px; }
.vrow__final-txt { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; transition: max-width .24s var(--ease), opacity .16s var(--ease); }
.vrow:hover .vrow__final { color: var(--text-tertiary); border-color: var(--hairline); }
.vrow__final:hover { color: var(--green-text); border-color: rgba(46,204,113,.4); background: rgba(46,204,113,.08); }
.vrow__final.on { color: var(--green-text); border-color: rgba(46,204,113,.5); background: rgba(46,204,113,.14); box-shadow: 0 0 14px -4px var(--green-status); gap: 5px; padding: 0 9px 0 6px; opacity: 1; }
.vrow__final.on .vrow__final-txt { max-width: 50px; opacity: 1; }
.vrow.is-final { background: rgba(46,204,113,.05); border-radius: 7px; }
.vrow.is-final::before { background: rgba(46,204,113,.4); }

/* ---- Viewer: "you're viewing the final" bar (above the stage, always visible) ---- */
.vwr__finalbar { display: flex; align-items: center; gap: 12px; padding: 11px 22px; border-bottom: 1px solid rgba(46,204,113,.4); background: linear-gradient(90deg, rgba(46,204,113,.22), rgba(46,204,113,.06) 60%, transparent); color: #cdeed9; font-size: 13px; box-shadow: inset 0 0 40px -20px var(--green-status); animation: finalIn .3s var(--ease); }
.vwr__finalbar > svg:first-child { width: 22px; height: 22px; flex: none; padding: 3px; border-radius: 50%; background: rgba(46,204,113,.3); color: #d8ffe9; box-shadow: 0 0 13px -2px var(--green-status); }
.vwr__finalbar b { color: #eafff2; font-weight: 700; }
.vwr__finalbar-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #1a1a1a; background: var(--green-status); padding: 4px 10px; border-radius: var(--r-pill); box-shadow: 0 0 16px -3px var(--green-status); }
.vwr__finalbar-badge svg { width: 12px; height: 12px; }
@keyframes finalIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- "Dana has it" presence button + popover ---- */
.fitem__cobtn { display: inline-flex; align-items: center; gap: 8px; flex: none; background: none; border: 1px solid transparent; border-radius: var(--r-pill); padding: 3px 8px 3px 4px; cursor: pointer; transition: var(--t-fast); position: relative; }
.fitem__cobtn svg { width: 14px; height: 14px; color: var(--text-dim); }
.fitem__cobtn:hover { border-color: var(--border-strong); background: var(--bg-card-elevated); box-shadow: 0 0 15px -5px var(--blue-status); }
.copresence { position: absolute; top: calc(100% + 6px); right: 0; min-width: 248px; z-index: 60; }
.copresence__hd { display: flex; align-items: center; gap: 10px; padding: 4px 6px 8px; }
.copresence__nm { font-size: 13px; font-weight: 650; }
.copresence__mt { font-size: 11px; color: var(--text-dim); margin-top: 1px; }

/* ---- Notifications: tabs + per-row dismiss ---- */
.notif-pop__title { display: inline-flex; align-items: center; gap: 9px; }
.notif-pop__tabs { display: flex; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--hairline); }
.notif-tab { flex: 1; padding: 6px 10px; border: 1px solid var(--hairline); background: var(--bg-card); color: var(--text-tertiary); font-size: 12px; font-weight: 600; border-radius: var(--r-sm); cursor: pointer; transition: var(--t-fast); }
.notif-tab:hover { color: var(--text-primary); box-shadow: 0 0 13px -5px var(--red-light); }
.notif-tab.on { color: var(--red-light); border-color: var(--border-red-active); background: var(--red-glow-10); box-shadow: 0 0 14px -4px var(--red-light); }
.notif { position: relative; align-items: flex-start; }
.notif__act { flex: none; background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 5px; border-radius: 6px; display: inline-flex; opacity: 0; align-self: center; transition: var(--t-fast); }
.notif__act svg { width: 15px; height: 15px; }
.notif:hover .notif__act { opacity: 1; }
.notif__act:hover { color: var(--red-light); background: var(--bg-row-hover); box-shadow: 0 0 12px -4px var(--red-light); }

/* ---- Checkouts panel: View-all link ---- */
.panel__viewall { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 18px 14px; padding: 13px 14px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--bg-card-elevated); color: var(--text-secondary); font-size: 13px; font-weight: 600; transition: var(--t-fast); }
.panel__viewall svg { width: 16px; height: 16px; color: var(--red-light); margin: 0; flex: none; }
.panel__viewall:hover { border-color: var(--border-red-active); color: var(--text-primary); box-shadow: 0 0 20px -7px var(--red-light); }

/* ---- Upload empty/drop state: neon drop ring (lives inside the canvas pane) ---- */
.uc__pane .uc__empty { flex: 1; border: none; gap: 14px; }
.uc__empty--big { min-height: 46vh; gap: 16px; border: none; transition: var(--t); }
.uc__dropring { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--border-red-subtle); color: var(--red-light); margin-bottom: 4px; box-shadow: 0 0 0 8px rgba(255,0,8,.04), 0 0 40px -8px var(--red-light); }
.uc__dropring svg { width: 44px; height: 44px; stroke-width: 1.5; filter: drop-shadow(0 0 8px var(--red-glow-30)); position: relative; z-index: 1; }
.uc__dropring-glow { position: absolute; inset: -2px; border-radius: 50%; box-shadow: 0 0 30px 2px var(--red-glow-30); animation: dropPulse 2.6s ease-in-out infinite; }
@keyframes dropPulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.uc__empty-l { font-size: var(--fs-xl); font-weight: 650; color: var(--text-primary); }
.uc__empty-s { font-size: 13px; color: var(--text-tertiary); max-width: 44ch; text-align: center; line-height: var(--lh-snug); min-height: 4.4em; display: flex; align-items: flex-start; justify-content: center; }
.uc__attach { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.uc__attach-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.uc__empty-btns { display: flex; gap: 10px; margin-top: 8px; }

/* =============================================================================
   NEON BACKLIGHT  ·  interactive surfaces glow softly at rest, brighter on hover.
   The look: a diffused red halo bleeding out from the edges, like neon behind glass.
   ============================================================================= */
:root { --neon-idle: 0 0 16px -6px var(--red-light); --neon-hot: 0 0 22px -3px var(--red-light), 0 0 40px -10px var(--red-light); }
/* primary buttons read as lit neon signs at rest */
.btn-primary { box-shadow: 0 0 18px -7px var(--red-light), inset 0 0 0 1px rgba(255,255,255,.04); }
.btn-primary:hover:not(:disabled) { box-shadow: var(--neon-hot), 0 2px 10px rgba(0,0,0,.4); }
/* secondary / ghost: faint idle outline-glow, intensifies on hover */
.btn-secondary, .btn-ghost { transition: box-shadow var(--t-fast), border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.btn-secondary:hover:not(:disabled), .btn-ghost:hover:not(:disabled) { box-shadow: var(--neon-idle); border-color: var(--border-red-active); }
/* every icon button: idle faint ring, hot on hover */
.iconbtn { transition: var(--t-fast); }
.iconbtn:hover { box-shadow: var(--neon-idle); color: var(--red-light); }
/* tabs, scope chips, qtabs, segmented controls: idle backlight when active, hover glow always */
.tab, .scope-chip, .cmd__qtab, .cf__segbtn, .demoseg button, .notif-tab, .co-stat, .cf__seg .cf__segbtn { transition: var(--t-fast); }
.tab:hover, .scope-chip:hover, .cf__segbtn:hover, .demoseg button:hover { box-shadow: var(--neon-idle); }
.tab.on, .scope-chip.is-active, .cmd__qtab.on, .cf__segbtn.on, .demoseg button.on, .notif-tab.on { box-shadow: 0 0 15px -5px var(--red-light); }
/* nav links: active item is backlit, hovers glow */
.navlink:hover { box-shadow: inset 0 0 24px -10px var(--red-glow-40), 0 0 14px -7px var(--red-light); }
.navlink.is-active { box-shadow: inset 0 0 24px -8px var(--red-glow-40), 0 0 16px -8px var(--red-light); }
/* list rows / cards: faint lift glow on hover (covers all interactive rows) */
.lrow:hover, .row:hover, .att:hover, .scard:hover, .fitem:hover, .colitem:hover, .upcard:hover, .mapres:hover, .cmd__row:hover, .vrow:hover, .cfcell:hover, .lgroup__h-a:hover, .popmenu__i:hover {
  border-color: var(--border-red-active);
  box-shadow: 0 0 24px -9px var(--red-light);
}
.cmd__item.is-focus { box-shadow: 0 0 28px -5px var(--red-glow-50), 0 0 60px -14px var(--red-glow-40); }
/* inputs / selects: idle inner glow, hot focus ring */
.input, .select, textarea, .mapsearch input, .col__filter { transition: box-shadow var(--t-fast), border-color var(--t-fast); }
.input:hover, .select:hover, textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, textarea:focus, input[type=text]:focus, input[type=search]:focus, input[type=number]:focus, .mapsearch input:focus, .col__filter:focus {
  outline: none; border-color: var(--border-red-active); box-shadow: 0 0 0 3px var(--red-glow-10), 0 0 18px -5px var(--red-light);
}
/* topbar pills, fab, logout, pin, links */
.co-pill, .notif-fab, .rail__logout, .crumb-back, .pinbtn, #pinbtn, .fitem__cobtn, .vrow__restore, .vrow__final, .cfcell__menu, .cfcell__assign, .ep, a.ep { transition: var(--t-fast); }
.co-pill:hover, .notif-fab:hover { box-shadow: var(--neon-hot); }
/* the "going quiet / due soon" nudge pill is amber, not red — keep its glow amber
   in both states (overrides the generic red .co-pill:hover + currentColor rest glow) */
.co-pill--nudge { box-shadow: 0 0 15px -4px var(--yellow-status); }
.co-pill--nudge:hover { box-shadow: 0 0 21px -3px var(--yellow-status); border-color: rgba(240,169,57,.6); filter: none; }
a.ep:hover, .ep--link:hover { box-shadow: 0 0 16px -5px currentColor; }
/* entity pills carry a permanent faint backlight of their own color */
.ep { box-shadow: 0 0 14px -9px currentColor; }
/* toggle switch lit when on */
.toggle input:checked + .toggle__track { box-shadow: 0 0 16px -2px var(--red-glow-40); }

/* =============================================================================
   PASS 4  ·  accent-matched glow, tab-underline glow, merged pill, fixes
   ============================================================================= */
/* record header: even rounded halo (no corner cut-off) + merged type tag */
.rec-head__tile { box-shadow: 0 0 20px -2px currentColor, 0 0 7px -1px currentColor, inset 0 0 0 1px rgba(255,255,255,.03); }
.rec-head__type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-faint); align-self: center; }

/* active tab: glow radiates DOWNWARD from the underline only - no side/up bleed */
.tab.on { box-shadow: none; }
.tab.on::after { box-shadow: 0 3px 9px -1px var(--red-bright), 0 6px 18px -4px var(--red-light); }

/* search palette: glow the OUTER palette border, never the inner input */
.cmd__input:focus, .cmd__search input:focus { box-shadow: none !important; border-color: transparent !important; outline: none; }
.cmd__search { background: var(--bg-page); }
.cmd__results { background: var(--bg-card); }
.cmd { box-shadow: var(--shadow-modal), 0 0 26px -6px var(--red-glow-40); }
.cmd:focus-within { border-color: var(--border-red-subtle); box-shadow: var(--shadow-modal), 0 0 30px -4px var(--red-glow-50), 0 0 72px -10px var(--red-glow-40), 0 0 120px -18px var(--red-glow-30); }

/* nudge/ad-hoc toast: button icon matches the button text, not the toast yellow */
.toast .btn svg { color: currentColor; }

/* merged checkout pill on the record file row (status + check-in as one button) */
.fitem__copill { display: inline-flex; align-items: stretch; flex: none; height: 30px; padding: 0; border: 1px solid rgba(46,204,113,.45); border-radius: var(--r-pill); background: rgba(46,204,113,.1); cursor: pointer; overflow: hidden; transition: var(--t-fast); box-shadow: 0 0 14px -6px var(--green-status); }
.fitem__copill-status { display: inline-flex; align-items: center; gap: 7px; padding: 0 11px 0 12px; font-size: 12px; font-weight: 600; color: var(--green-text); white-space: nowrap; }
.fitem__copill-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-status); box-shadow: 0 0 7px var(--green-status); }
.fitem__copill-act { display: inline-flex; align-items: center; gap: 5px; padding: 0 13px; background: var(--green-status); color: #053; font-size: 12px; font-weight: 700; border-left: 1px solid rgba(46,204,113,.5); transition: var(--t-fast); }
.fitem__copill-act svg { width: 14px; height: 14px; }
.fitem__copill:hover { box-shadow: 0 0 20px -4px var(--green-status); border-color: var(--green-status); }
.fitem__copill:hover .fitem__copill-act { filter: brightness(1.09); }

/* Dana presence popover sits above the floating search pill */
.fitem__cobtn.cobtn-open { z-index: 200; }
.copresence { z-index: 220; }
.co-row__exact { color: var(--text-dim); }

/* ---- unified "Dana has it" pill + copill split + presence statuses ---- */
.fitem__cobtn { display: inline-flex; align-items: center; gap: 8px; flex: none; background: rgba(52,152,219,.1); border: 1px solid rgba(52,152,219,.4); border-radius: var(--r-pill); padding: 3px 9px 3px 4px; cursor: pointer; transition: var(--t-fast); position: relative; box-shadow: 0 0 14px -7px var(--blue-status); }
.fitem__cobtn-av { width: 22px; height: 22px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #4aa3e0, #2d7dbd); }
.fitem__cobtn-av--lg { width: 34px; height: 34px; font-size: 12px; }
.fitem__cobtn-txt { font-size: 12px; font-weight: 600; color: #9fd0f0; white-space: nowrap; }
.fitem__cobtn > svg { width: 14px; height: 14px; color: #7fbbe6; flex: none; transition: transform var(--t-fast); }
.fitem__cobtn:hover { border-color: var(--blue-status); box-shadow: 0 0 18px -5px var(--blue-status); }
.fitem__cobtn.cobtn-open > svg { transform: rotate(180deg); }
.copresence__nm { font-size: 13.5px; font-weight: 650; color: var(--text-primary); }
.copresence__mt { font-size: 11.5px; color: var(--text-tertiary); margin-top: 1px; }
.copresence__statuses { padding: 2px 6px 6px; display: flex; flex-direction: column; gap: 5px; }
.copresence__st { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-tertiary); padding: 5px 8px; border-radius: var(--r-sm); background: var(--bg-card-elevated); }
.copresence__st svg { width: 14px; height: 14px; flex: none; color: var(--text-dim); }
.copresence__st--on { color: var(--green-text); background: rgba(46,204,113,.1); } .copresence__st--on svg { color: var(--green-text); }
.copresence__st--warn { color: var(--yellow-status); background: rgba(243,156,18,.1); } .copresence__st--warn svg { color: var(--yellow-status); }
.copresence__exact { color: var(--text-dim); }
.popmenu__i.is-on { color: var(--green-text); } .popmenu__i.is-on svg { color: var(--green-text); }
.popmenu__i.is-warn { color: var(--yellow-status); } .popmenu__i.is-warn svg { color: var(--yellow-status); }
/* copill: status + check-in as one pill, with a caret for edit options */
.fitem__copill { display: inline-flex; align-items: stretch; flex: none; border: 1px solid rgba(46,204,113,.45); border-radius: var(--r-pill); background: rgba(46,204,113,.1); overflow: hidden; box-shadow: 0 0 16px -7px var(--green-status); transition: var(--t-fast); position: relative; }
.fitem__copill:hover { border-color: var(--green-status); box-shadow: 0 0 20px -4px var(--green-status); }
.fitem__copill-main { display: inline-flex; align-items: stretch; gap: 0; background: none; border: none; cursor: pointer; padding: 0; }
.fitem__copill-status { display: inline-flex; align-items: center; gap: 7px; padding: 0 11px 0 12px; font-size: 12px; font-weight: 600; color: var(--green-text); white-space: nowrap; }
.fitem__copill-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-status); box-shadow: 0 0 7px var(--green-status); }
.fitem__copill-act { display: inline-flex; align-items: center; gap: 5px; padding: 0 13px; background: var(--green-status); color: #053; font-size: 12px; font-weight: 700; border-left: 1px solid rgba(46,204,113,.5); transition: var(--t-fast); }
.fitem__copill-act svg { width: 14px; height: 14px; }
.fitem__copill-main:hover .fitem__copill-act { filter: brightness(1.09); }
.fitem__copill-caret { display: inline-flex; align-items: center; justify-content: center; width: 28px; background: var(--green-status); color: #053; border: none; border-left: 1px solid rgba(5,51,34,.25); cursor: pointer; transition: var(--t-fast); }
.fitem__copill-caret svg { width: 15px; height: 15px; }
.fitem__copill-caret:hover { filter: brightness(1.09); }
.cocaret { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; z-index: 60; }
.uc__tabs-btns .btn-secondary, .uc__tabs-btns .btn-ghost { border-color: transparent; background: transparent; box-shadow: none; }
.uc__tabs-btns .btn-secondary:hover:not(:disabled), .uc__tabs-btns .btn-ghost:hover:not(:disabled) { border-color: transparent; background: var(--bg-row-hover); box-shadow: none; }
.uc__tabs-btns .btn-secondary:hover:not(:disabled) svg, .uc__tabs-btns .btn-ghost:hover:not(:disabled) svg { filter: drop-shadow(0 0 5px var(--red-glow-30)); }
.checkinmenu .popmenu__i { padding: 8px 10px; font-size: 12.5px; gap: 9px; }
.checkinmenu .popmenu__i svg { width: 15px; height: 15px; }

/* ===== Upload - compact single-row cards; canvas keeps drop-zone identity ===== */
.uc__list { display: flex; flex-direction: column; gap: 7px; }
.upcard { align-items: center; padding: 9px 11px; gap: 11px; transition: var(--t-fast); }
.upcard__chk { padding-top: 0; }
.upcard__body { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.upcard__name { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upcard__trail { flex: none; display: flex; align-items: center; }
.upcard__trailwrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.upcard__doctype { display: inline-flex; align-items: center; gap: 7px; }
.upcard__doctype-l { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--text-faint); }
.upcard__doctype-l svg { width: 13px; height: 13px; }
.upcard__doctype select { background: var(--bg-card-elevated); border: 1px dashed var(--border-strong); color: var(--text-tertiary); border-radius: var(--r-pill); padding: 5px 10px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: var(--t-fast); }
.upcard__doctype select:hover { border-color: var(--border-red-active); color: var(--text-primary); box-shadow: 0 0 13px -5px var(--red-light); }
.upcard__doctype.set select { border-style: solid; border-color: var(--border-red-active); color: var(--red-light); background: var(--red-glow-10); }
.upcard__maptrigger { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--text-tertiary); background: var(--bg-card-elevated); border: 1px dashed var(--border-strong); border-radius: var(--r-pill); padding: 5px 13px; cursor: pointer; transition: var(--t-fast); }
.upcard__maptrigger svg { width: 14px; height: 14px; }
.upcard__maptrigger:hover { color: var(--red-light); border-color: var(--border-red-active); box-shadow: 0 0 14px -5px var(--red-light); }
.upcard__maprow .mapsearch { width: 340px; max-width: 46vw; }
.upcard__maprow .mapsearch.hidden { display: none; }
.upcard__maprow .mapsearch input { padding-left: 34px; }
.mapsearch__ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-dim); display: inline-flex; pointer-events: none; }
.mapsearch__ic svg { width: 15px; height: 15px; }
.upcard.mapped { border-color: rgba(46,204,113,.3); box-shadow: 0 0 16px -8px var(--green-status); }

/* ===== Accent-matched glow - glow in the element's own accent color ===== */
.fitem--co-you:hover { box-shadow: 0 0 0 1px rgba(46,204,113,.25), 0 0 22px -9px var(--green-status); }
.btn-success { box-shadow: 0 0 16px -6px var(--green-status); }
.btn-success:hover:not(:disabled) { box-shadow: 0 0 22px -3px var(--green-status); }
.badge--calm, .badge--released { box-shadow: 0 0 12px -6px var(--green-status); }
.badge--soft { box-shadow: 0 0 12px -6px var(--yellow-status); }
.badge--hard { box-shadow: 0 0 12px -6px var(--red-bright); }
.fitem--co-other:hover { box-shadow: 0 0 0 1px rgba(52,152,219,.25), 0 0 22px -9px var(--blue-status); }
.badge--active { box-shadow: 0 0 12px -6px var(--blue-status); }
.badge--final { box-shadow: 0 0 13px -5px var(--green-status); }
/* entity pills, version chips, reqchips glow their own color */
.ep, .badge--ver, .reqchip { box-shadow: 0 0 13px -8px currentColor; }
.reqchip--ok { box-shadow: 0 0 12px -6px var(--green-status); }
.reqchip--ok:hover { box-shadow: 0 0 15px -4px var(--green-status); }

/* ===== More glow - remaining interactive bits ===== */
.vrow__restore:hover { box-shadow: 0 0 13px -4px var(--red-light); }
.lgroup__toggle:hover, .fitem__tw:hover { box-shadow: 0 0 12px -5px var(--red-light); }
.floatsearch__pill { box-shadow: 0 8px 30px -10px rgba(0,0,0,.6), 0 0 32px -6px var(--red-glow-50), 0 0 70px -16px var(--red-glow-40); }
.floatsearch__pill:hover { box-shadow: 0 8px 30px -8px rgba(0,0,0,.6), 0 0 42px -6px var(--red-glow-50), 0 0 88px -16px var(--red-glow-40); }
.avatar { box-shadow: 0 0 14px -6px var(--red-light); }
.notif-fab { box-shadow: 0 0 30px -6px var(--red-glow-50), 0 0 64px -16px var(--red-glow-40); }
.lgroup__h-a:hover { box-shadow: 0 0 13px -5px var(--red-light); }
.mapres:hover { box-shadow: 0 0 14px -7px var(--red-light); }

/* =============================================================================
   PASS 5  ·  hover = edge neon glow only (NO background fill), accent everywhere
   ============================================================================= */
/* kill the filled hover/focus/selected backgrounds - keep only edge glow */
.cmd__item:hover, .cmd__item.is-focus, .cmd__row:hover, .lrow:hover, .lrow.is-focus,
.colitem:hover, .colitem.sel, .mapres:hover, .popmenu__i:hover, .row:hover, .row.is-focus,
.cfcell:hover, .upcard:hover, .qsearch:hover, .topbtn:hover, .iconbtn:hover,
.crumb__item:hover, a.crumb__item:hover, .rail__collapse:hover, .topbar__hamburger:hover,
.home__clear:hover, .panel__close:hover, .fitem__tw:hover, .cfcell__menu:hover,
.cmd__overlay-min:hover, .lgroup__toggle:hover, .notif__act:hover, .vrow__restore:hover { background: transparent; }
/* give the now-bare hovers a clear edge glow */
.colitem:hover { box-shadow: inset 0 0 0 1px var(--border-red-subtle), 0 0 14px -8px var(--red-light); }
.colitem.sel { box-shadow: inset 0 0 0 1px var(--border-red-active), 0 0 18px -8px var(--red-light); }
.popmenu__i:hover { box-shadow: 0 0 30px -6px var(--red-glow-40), 0 0 66px -16px var(--red-glow-30); color: var(--text-primary); }
.iconbtn:hover, .panel__close:hover, .topbtn:hover, .rail__collapse:hover, .topbar__hamburger:hover, .fitem__tw:hover, .home__clear:hover, .cfcell__menu:hover, .cmd__overlay-min:hover { color: var(--text-primary); box-shadow: 0 0 13px -4px var(--red-light); }
a.crumb__item:hover { color: var(--text-primary); box-shadow: 0 0 12px -5px var(--red-light); }
.qsearch:hover { border-color: var(--border-red-active); box-shadow: 0 0 14px -6px var(--red-light); }

/* Common Files: 'Assign' sits next to the chip on the left, not off to the right */
.cfcell--miss { justify-content: flex-start; }
.cfcell--miss .cfcell__assign { flex: none; justify-content: flex-start; margin-left: 2px; color: var(--text-tertiary); }
.cfcell--miss .cfcell__assign:hover { color: var(--red-light); box-shadow: none; }

/* accent glow on the remaining semantic surfaces */
.fitem--co-you { box-shadow: 0 0 0 1px rgba(46,204,113,.12); }
.fitem__copill { box-shadow: 0 0 16px -7px var(--green-status); }
.cfcell--ok:hover { box-shadow: 0 0 26px -6px rgba(46,204,113,.42), 0 0 54px -16px rgba(46,204,113,.26); }
.cfcell--miss:hover { box-shadow: 0 0 26px -6px var(--red-glow-40), 0 0 54px -16px var(--red-glow-30); }
.scope-chip.is-active { box-shadow: 0 0 14px -5px var(--red-light); }
.co-stat--calm.on { box-shadow: 0 0 26px -5px rgba(46,204,113,.55), 0 0 56px -14px rgba(46,204,113,.34); }
.co-stat--soft.on { box-shadow: 0 0 26px -5px rgba(243,156,18,.55), 0 0 56px -14px rgba(243,156,18,.34); }
.co-stat--hard.on { box-shadow: 0 0 26px -5px var(--red-glow-50), 0 0 56px -14px var(--red-glow-40); }

/* =============================================================================
   PASS 6  ·  nav active animation, rounded row glow, upload-tab red glow
   ============================================================================= */
/* rail nav: selected = NO row glow, just the red side bar that grows in + glows */
.navlink:hover { background: transparent; border-color: transparent; box-shadow: 0 0 24px -6px var(--red-glow-40), 0 0 52px -16px var(--red-glow-30); }
.navlink.is-active { background: none; box-shadow: none; }
.navlink.is-active::before { animation: navbarGrow .28s var(--ease) both; }
@keyframes navbarGrow { from { transform: translateY(-50%) scaleY(0); opacity: 0; } to { transform: translateY(-50%) scaleY(1); opacity: 1; } }

/* row/record hover glow must follow the rounded corners (was a sharp rectangle) */
.vrow { border-radius: 8px; }
.cmd__item, .lrow, .row, .coitem, .colitem, .fitem, .cw-card, .scard, .upcard, .cfcell, .mapres, .cmd__row { border-radius: var(--r-md); }

/* check-in fly-off: row winds up, then bounces off to the right and fades */
@keyframes coFly {
  0%   { transform: translateX(0) scale(1); opacity: 1; }
  16%  { transform: translateX(-12px) scale(.99); opacity: 1; }
  100% { transform: translateX(118%) scale(.94); opacity: 0; }
}
.coitem.is-flyout, .cw-card.is-flyout { animation: coFly .52s cubic-bezier(.5,-0.3,.3,1) both; pointer-events: none; position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .coitem.is-flyout, .cw-card.is-flyout { animation: none; opacity: 0; } }

/* upload tabs: inactive hover glows red from behind the text (not white) */
.uc__tab:hover { color: var(--text-primary); text-shadow: 0 0 14px var(--red-glow-40); box-shadow: none; }
.uc__tab:hover svg { filter: drop-shadow(0 0 6px var(--red-glow-40)); }

/* =============================================================================
   PASS 7  ·  borderless = glow the text/icon (no phantom border ring); full width
   ============================================================================= */
/* borderless interactive elements glow their CONTENT, not a box-shadow ring */
a.crumb__item:hover, .crumb__item:hover, .popmenu__i:hover, .cmd__backsearch:hover,
.section-head__action:hover, .lgroup__h-a:hover, .cfcell__assign:hover, .cfcell__file:hover,
.cmd__overlay-min:hover, .notif-pop__clear:hover, .uc__tab:hover, .pagefoot__help:hover,
.vrow__restore:hover, .home__clear:hover {
  box-shadow: none; text-shadow: 0 0 13px var(--red-glow-40);
}
a.crumb__item:hover, .crumb__item:hover, .popmenu__i:hover, .section-head__action:hover, .lgroup__h-a:hover { color: var(--text-primary); }
.popmenu__i:hover { background: transparent; }
/* icon-only borderless buttons glow the icon (drop-shadow), not a ring */
.iconbtn:hover, .panel__close:hover, .topbar__hamburger:hover, .rail__collapse:hover,
.fitem__tw:hover, .cfcell__menu:hover, .notif__act:hover, .lgroup__toggle:hover {
  box-shadow: none;
}
.iconbtn:hover svg, .panel__close:hover svg, .topbar__hamburger:hover svg, .rail__collapse:hover svg,
.fitem__tw:hover svg, .cfcell__menu:hover svg, .notif__act:hover svg, .lgroup__toggle:hover svg,
.crumb-back:hover svg, .vrow__restore:hover {
  filter: drop-shadow(0 0 6px var(--red-glow-40));
}
.crumb-back:hover { box-shadow: none; color: var(--red-light); }
.vrow__restore:hover { box-shadow: none; border-color: var(--border-red-active); color: var(--text-primary); }

/* ---- use the full page width everywhere (kill the artificial narrow column) ---- */
.content__inner { max-width: none; }
.content__inner--wide { max-width: none; }
.dash { max-width: none; }
.help-wrap { max-width: none; }

/* =============================================================================
   PASS 8  ·  canonical underline-tab system (bright red line + downward glow)
   Applies to ALL underline tab families: .tab and .uc__tab
   ============================================================================= */
.tab.on, .uc__tab.on { box-shadow: none; border-bottom-color: transparent; }
.tab.on::after, .uc__tab.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--red-bright); border-radius: 2px 2px 0 0;
  box-shadow: 0 0 10px 1px var(--red-bright), 0 4px 16px 0 var(--red-light), 0 8px 26px -2px var(--red-light);
}
.uc__tab.on::after { bottom: -1px; }

/* rail nav: the active red side-bar GLOWS (matches the tab system) */
.navlink.is-active::before {
  box-shadow: 0 0 8px 0 var(--red-bright), 3px 0 12px -1px var(--red-light), 6px 0 20px -5px var(--red-light);
}

/* =============================================================================
   PASS 9 · tab hover glows ONLY from the bottom; centered empty/viewall
   ============================================================================= */
/* kill every full-border glow on tabs — the only glow is the underline zone */
.tab, .uc__tab { box-shadow: none !important; }
.tab::after, .uc__tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--red-bright); border-radius: 2px 2px 0 0;
  opacity: 0; transition: opacity var(--t-fast), box-shadow var(--t-fast);
}
.uc__tab::after { bottom: -2px; }
/* hover: faint underline + soft downward glow (no top/side bleed) */
.tab:hover::after, .uc__tab:hover::after {
  opacity: .5; box-shadow: 0 2px 9px -1px var(--red-light), 0 4px 14px -3px var(--red-light);
}
.tab:hover, .uc__tab:hover { text-shadow: 0 0 13px var(--red-glow-30); }
.tab:hover svg, .uc__tab:hover svg { filter: drop-shadow(0 0 6px var(--red-glow-30)); }
/* active: full underline glow */
.tab.on::after, .uc__tab.on::after {
  opacity: 1; box-shadow: 0 0 10px 1px var(--red-bright), 0 4px 16px 0 var(--red-light), 0 8px 26px -2px var(--red-light);
}

/* upload: center the drop-files empty state vertically in both tabs (stable, no bounce) */
/* The pane fills the canvas, but its file list rides at the TOP. The empty
   drop-ring still centers itself via .uc__empty { flex: 1; justify-content: center }. */
.uc__pane { flex: 1; justify-content: flex-start; }
.uc__pane .uc__empty { flex: 1; justify-content: center; align-items: center; padding: 24px 20px; min-height: 0; }

/* checkouts panel: center the open-list link */
.panel__viewall { justify-content: center; align-items: center; gap: 9px; }
.panel__viewall svg { position: static; margin: 0; transform: none; width: 16px; height: 16px; color: var(--red-light); }

/* PASS 10 - final glyph-glow sweep: borderless icon buttons glow the glyph, no box border */
.cmd__pin:hover, .notif__act:hover, .iconbtn--co:hover { box-shadow: none !important; background: transparent !important; color: var(--red-light); }
.cmd__pin:hover svg, .notif__act:hover svg, .iconbtn--co:hover svg { filter: drop-shadow(0 0 7px var(--red-light)); }
.cmd__pin.on svg { filter: drop-shadow(0 0 6px var(--red-light)); }

/* =============================================================================
   WORKSPACE TABS  ·  live strip below the topbar (Chrome-style, entity-coloured)
   ============================================================================= */
.wstabs { display: flex; align-items: stretch; gap: 4px; height: 46px; padding: 0 12px; background: var(--bg-card); border-bottom: 1px solid var(--hairline); overflow: visible; scrollbar-width: none; flex: none; }
.wstabs::-webkit-scrollbar { display: none; }
.wtabx { display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; height: 46px; background: none; border: none; color: var(--text-tertiary); font-size: 13px; font-weight: 600; cursor: pointer; position: relative; flex: none; transition: color var(--t-fast); }
.wtabx.on, .wtabx:hover { padding-right: 27px; }
.wtabx:hover { color: var(--text-secondary); }
.wtabx.on { color: var(--text-primary); }
.wtabx__ic { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center; border: 1px solid transparent; transition: var(--t-fast); }
.wtabx__ic svg { width: 13px; height: 13px; display: block; }
.wtabx.on .wtabx__ic { box-shadow: 0 0 16px -4px var(--tc); }
.wtabx__name { flex: none; white-space: nowrap; max-width: 168px; overflow: hidden; text-overflow: ellipsis; }
.wtabx__x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-faint); opacity: 0; transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast); }
.wtabx__x svg { width: 13px; height: 13px; }
.wtabx:hover .wtabx__x, .wtabx.on .wtabx__x { opacity: 1; }
.wtabx__x:hover { background: var(--bg-row-hover); color: var(--text-primary); }
.wtabx:hover::after { content: ''; position: absolute; left: 9px; right: 9px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--red-bright); opacity: .4; }
.wtabx.on::after { content: ''; position: absolute; left: 9px; right: 9px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--red-bright); box-shadow: 0 0 9px 0 var(--red-bright), 0 0 18px 1px var(--red-light), 0 0 32px -2px var(--red-light); }
/* glowing pipe separators between every tab + before the + */
.wtabx:not(:first-child)::before, .wtabx__new::before { content: ''; position: absolute; left: -2px; top: 50%; transform: translateY(-50%); width: 1px; height: 20px; border-radius: 1px; background: var(--border-strong); box-shadow: 0 0 7px 0 var(--red-glow-30); opacity: .65; }
.wtabx__new { position: relative; align-self: center; width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); background: none; border: none; border-radius: 8px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.wtabx__new svg { width: 16px; height: 16px; }
.wtabx__new:hover { color: var(--red-light); }
.wtabx__new:hover svg { filter: drop-shadow(0 0 7px var(--red-light)); }

/* Responsive tab strip: only the tab list shrinks/scrolls; the caret menu, the
   + / close-all controls and the right group (links + theme) stay locked. */
.wstabs__menu { flex: none; align-self: center; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-dim); background: none; border: none; border-radius: 8px; cursor: pointer; margin-right: 2px; }
.wstabs__menu:hover { color: var(--red-light); background: var(--bg-row-hover); }
.wstabs__menu svg { width: 18px; height: 18px; }
.wstabs__list { flex: 0 1 auto; min-width: 0; display: flex; align-items: stretch; gap: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.wstabs__list::-webkit-scrollbar { display: none; }
.wstabs__list .wtabx { flex: 0 1 184px; min-width: 46px; max-width: 210px; }
.wstabs__list .wtabx__name { flex: 1 1 auto; min-width: 0; max-width: none; }
.wstabs__ctl { flex: none; align-self: center; display: flex; align-items: center; gap: 2px; }
.wstabs__right { flex: none; margin-left: auto; align-self: center; display: flex; align-items: center; }
.wstabs__right .extlinks { margin-left: 0; }
/* Instant tab tooltip */
.wtab-tip { position: fixed; transform: translateX(-50%); display: none; background: var(--bg-card-elevated); color: var(--text-primary); border: 1px solid var(--hairline); padding: 5px 10px; border-radius: 7px; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; z-index: 300; box-shadow: 0 8px 24px -8px rgba(0,0,0,.5); max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
/* Chrome-style tab list / search dropdown */
.wtabmenu { position: fixed; width: 320px; max-height: 70vh; display: flex; flex-direction: column; background: var(--bg-card-elevated); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: 0 18px 50px -16px rgba(0,0,0,.6); z-index: 300; overflow: hidden; }
.wtabmenu__search { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--hairline); }
.wtabmenu__sic { display: inline-flex; color: var(--text-dim); } .wtabmenu__sic svg { width: 16px; height: 16px; }
.wtabmenu__search input, .wtabmenu__search input:focus { flex: 1; min-width: 0; background: none; border: none; outline: none; box-shadow: none; color: var(--text-primary); font-size: 13px; }
.wtabmenu__head { padding: 9px 15px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); }
.wtabmenu__list { overflow-y: auto; padding: 2px 6px 8px; }
.wtabmenu__row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.wtabmenu__row:hover { background: var(--bg-row-hover); }
.wtabmenu__row.on { background: var(--red-glow-10); }
.wtabmenu__n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-secondary); }
.wtabmenu__row.on .wtabmenu__n { color: var(--text-primary); }
.wtabmenu__x { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--text-faint); border-radius: 5px; cursor: pointer; opacity: 0; transition: var(--t-fast); }
.wtabmenu__row:hover .wtabmenu__x { opacity: 1; }
.wtabmenu__x:hover { background: var(--bg-row-hover); color: var(--text-primary); }
.wtabmenu__x svg { width: 13px; height: 13px; }
.wtabmenu__empty { padding: 18px; text-align: center; color: var(--text-tertiary); font-size: 13px; }

/* topbar external links (Epicor / EPIClock) */
.extlinks { display: flex; align-items: center; gap: 8px; }
.wstabs .extlinks { margin-left: auto; align-self: center; padding-left: 12px; }
.extlink { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border-radius: var(--r-pill); border: 1px solid var(--hairline); background: var(--bg-card-elevated); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: var(--t-fast); }
.extlink:hover { color: var(--text-primary); border-color: var(--border-red-active); box-shadow: 0 0 16px -6px var(--red-light); }
.extlink__fav { width: 16px; height: 16px; border-radius: 4px; flex: none; object-fit: contain; }
.extlink__fav.is-broken { display: none; }
.extlink__fb { display: none; width: 16px; height: 16px; flex: none; border-radius: 4px; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--red-light), var(--red-deep)); }
.extlink__fav.is-broken + .extlink__fb { display: inline-flex; }
.extlink__lbl { white-space: nowrap; }
.extlink svg { width: 13px; height: 13px; color: var(--text-faint); flex: none; }
.extlink:hover svg { color: var(--red-light); }
@media (max-width: 720px) { .extlink__lbl { display: none; } .extlink { padding: 0 8px; } }

/* =============================================================================
   THEME SWITCH  ·  Light / System / Dark — segmented slider in the tab strip
   ============================================================================= */
/* glowing pipe divider before the switch, matching the strip's tab separators */
.themesw-sep { flex: none; align-self: center; width: 1px; height: 20px; margin: 0 10px 0 6px; border-radius: 1px; background: var(--hairline); box-shadow: 0 0 6px var(--red-glow-10); }
.themesw { position: relative; flex: none; align-self: center; display: inline-flex; align-items: center; height: 32px; padding: 3px; border-radius: var(--r-pill); border: 1px solid var(--hairline); background: var(--bg-card-elevated); }
.themesw__ind { position: absolute; top: 3px; left: 3px; width: 28px; height: 24px; border-radius: var(--r-pill); background: var(--bg-raised); border: 1px solid var(--border-red-subtle); box-shadow: 0 0 13px -3px var(--red-light); transition: transform var(--t); }
.themesw[data-active="0"] .themesw__ind { transform: translateX(0); }
.themesw[data-active="1"] .themesw__ind { transform: translateX(28px); }
.themesw[data-active="2"] .themesw__ind { transform: translateX(56px); }
.themesw__opt { position: relative; z-index: 1; width: 28px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; cursor: pointer; color: var(--text-dim); transition: color var(--t-fast); }
.themesw__opt svg { width: 15px; height: 15px; }
.themesw__opt:hover { color: var(--red-light); }
.themesw__opt:hover svg { filter: drop-shadow(0 0 6px var(--red-glow-40)); }
.themesw__opt[aria-checked="true"] { color: var(--red-light); }
.themesw__opt[aria-checked="true"] svg { filter: drop-shadow(0 0 6px var(--red-glow-40)); }
@media (prefers-reduced-motion: reduce) { .themesw__ind { transition: none; } }

/* =============================================================================
   LIGHT THEME  ·  [data-theme="light"] — token remap. Surfaces invert to a
   cool off-white; the brand red is kept. Floating shadows go soft + neutral.
   Glow halos survive as faint red shadows on white (tune per feedback).
   ============================================================================= */
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces — near-white off-white page for the faintest depth, white cards on top */
  --bg-page: #ffffff;
  --bg-card: #ffffff;
  --bg-card-elevated: #f8f9fb;
  --bg-raised: #ffffff;
  --bg-input: #ffffff;
  --bg-row-hover: rgba(15,18,30,.045);

  /* Entity / status accents — text variants darkened for legibility on white */
  --order-text:    #1f6fb0;
  --customer-text: #178a4d;
  --quote-text:    #7a45c4;
  --invoice-text:  #b56612;
  --job-text:      #15859f;
  --po-text:       #b23c47;
  --supplier-text: #4450c8;
  --shipment-text: #168476;
  --project-text:  #b1468e;
  --apinvoice-text:#8f6c12;
  --green-text: #178a4d;
  --blue-text:  #1f6fb0;
  --yellow-text:#956a0e;

  /* Text ramp (dark ink on light) — kept dark for legibility; hierarchy comes
     from size/weight, not washed-out grey (per Epicor light-theme feedback) */
  --text-primary:   #14161b;
  --text-secondary: rgba(18,20,25,.84);
  --text-tertiary:  rgba(18,20,25,.70);
  --text-dim:       rgba(18,20,25,.56);
  --text-faint:     rgba(18,20,25,.44);

  /* Hairlines / borders (dark alpha) */
  --hairline:        rgba(15,18,30,.10);
  --hairline-faint:  rgba(15,18,30,.06);
  --border-neutral:  rgba(15,18,30,.16);
  --border-strong:   rgba(15,18,30,.24);
  --border-red-subtle: rgba(255,0,8,.24);
  --border-red-active: rgba(255,0,8,.55);

  /* Elevation: soft neutral (slightly blue) shadows, no red */
  --shadow-pop:   0 4px 14px rgba(20,24,46,.10), 0 1px 3px rgba(20,24,46,.08);
  --shadow-float: 0 12px 34px rgba(20,24,46,.14), 0 2px 8px rgba(20,24,46,.10);
  --shadow-panel: -28px 0 80px rgba(20,24,46,.16);
  --shadow-modal: 0 30px 90px rgba(20,24,46,.24), 0 4px 16px rgba(20,24,46,.14);
}

/* --- Light: hardcoded white/dark fills that don't ride a token --- */
[data-theme="light"] *::-webkit-scrollbar-thumb { background: transparent; }
[data-theme="light"] .is-scrolling::-webkit-scrollbar-thumb { background: rgba(15,18,30,.30); background-clip: content-box; }
[data-theme="light"] .is-scrolling::-webkit-scrollbar-thumb:hover { background: rgba(15,18,30,.32); background-clip: content-box; }
[data-theme="light"] .rail { background: linear-gradient(180deg, rgba(15,18,30,.022), transparent 220px), var(--bg-card); }
[data-theme="light"] .col:last-child { background: linear-gradient(180deg, rgba(15,18,30,.02), transparent 120px); }
[data-theme="light"] .kbd,
[data-theme="light"] .ep--neutral,
[data-theme="light"] .badge--released,
[data-theme="light"] .badge--neutral,
[data-theme="light"] .badge--ver,
[data-theme="light"] .banner--released,
[data-theme="light"] .panel__count,
[data-theme="light"] .uc__n,
[data-theme="light"] .tag-release { background: rgba(15,18,30,.05); }
[data-theme="light"] .floatsearch__pill:hover { background: rgba(255,255,255,.94); }
/* Light mode: solid filled buttons read heavy against the airy theme. Switch
   primary (red) + success (green) to soft tinted buttons — brand color as a
   faint wash + colored text + hairline border, no fill, no glow. */
[data-theme="light"] .btn-primary {
  background: rgba(255,0,8,.07); color: #c10007; border: 1px solid rgba(255,0,8,.26); box-shadow: none;
}
[data-theme="light"] .btn-primary:hover:not(:disabled) {
  background: rgba(255,0,8,.13); border-color: rgba(255,0,8,.42); box-shadow: none;
}
[data-theme="light"] .btn-primary svg { filter: none; }
[data-theme="light"] .btn-success {
  background: rgba(21,146,78,.10); color: #0e7a3e; border: 1px solid rgba(21,146,78,.30); box-shadow: none;
}
[data-theme="light"] .btn-success:hover:not(:disabled) {
  background: rgba(21,146,78,.17); border-color: rgba(21,146,78,.46); box-shadow: none; filter: none;
}
/* record file checkout pill: soften the solid-green action + caret to a tint */
[data-theme="light"] .fitem__copill { background: rgba(21,146,78,.07); border-color: rgba(21,146,78,.30); box-shadow: none; }
[data-theme="light"] .fitem__copill:hover { border-color: rgba(21,146,78,.5); box-shadow: none; }
[data-theme="light"] .fitem__copill-status { color: #0e7a3e; }
[data-theme="light"] .fitem__copill-act,
[data-theme="light"] .fitem__copill-caret { background: rgba(21,146,78,.14); color: #0e7a3e; border-left-color: rgba(21,146,78,.28); }
[data-theme="light"] .fitem__copill-main:hover .fitem__copill-act,
[data-theme="light"] .fitem__copill-caret:hover { filter: none; background: rgba(21,146,78,.22); }
/* translucent dark surfaces (blurred bars/pills/scrim) → light equivalents */
[data-theme="light"] .topbar { background: transparent; }
[data-theme="light"] .floatsearch__pill { background: rgba(255,255,255,.82); }
/* entity pills: border was a separate (dark-derived) token from the text → mismatch.
   In light, derive the outline from the pill's own text color so they always match. */
[data-theme="light"] .ep { border-color: currentColor; }
[data-theme="light"] .ep--neutral { border-color: var(--hairline); }
[data-theme="dark"] .ep { border-color: currentColor; }
[data-theme="dark"] .ep--neutral { border-color: var(--hairline); }
/* "Dana has it" presence pill: light-blue text is unreadable on white — darken for light mode */
[data-theme="light"] .fitem__cobtn { background: rgba(52,152,219,.12); border-color: rgba(52,152,219,.45); }
[data-theme="light"] .fitem__cobtn-txt { color: #1f6fb0; }
[data-theme="light"] .fitem__cobtn > svg { color: #2a7fc0; }

/* rail nav hover: glow radiates from behind the text + glyph, not a box/border */
.navlink:hover { box-shadow: none !important; border-color: transparent !important; background: transparent !important; color: var(--red-light); }
.navlink:hover span { text-shadow: 0 0 11px var(--red-glow-50); }
.navlink:hover svg { filter: drop-shadow(0 0 8px var(--red-light)); }

/* final versions glow GREEN on hover, not red */
.vrow.is-final:hover { border-color: color-mix(in srgb, var(--green-status) 55%, transparent); box-shadow: 0 0 24px -8px var(--green-status); }
.vrow.is-final:hover .vrow__restore { color: var(--green-text); }

/* expanded file card: only the hovered version row glows, not the whole card */
.fitem.open { box-shadow: none !important; }
.fitem.open:hover { box-shadow: 0 0 22px -9px var(--accent) !important; }
[data-theme="light"] .scrim { background: rgba(15,18,30,.34); }

/* --- Light: the pale-pink "due soon / hard" red (#ff8588) is illegible on
       white; swap to a darker brand red for those text/icon spots --- */
[data-theme="light"] .badge--hard,
[data-theme="light"] .banner--hard,
[data-theme="light"] .co-stat--hard .co-stat__n,
[data-theme="light"] .coitem--hard .coitem__expiry,
[data-theme="light"] .cmd__row-x:hover { color: #cc1117; }

/* --- Light: same vertical-invariant left-edge gradient, lighter alpha. --- */
[data-theme="light"] .neon-breathe { display: block; background: linear-gradient(90deg, rgba(255,0,8,.05) 0, rgba(255,0,8,.024) 45px, rgba(255,0,8,.008) 120px, rgba(255,0,8,0) 245px); }
@keyframes neonBreatheLight3 {
  0%, 100% { box-shadow: inset 85px 0 85px -80px rgba(255,0,8,.059); }
  50%      { box-shadow: inset 110px 0 100px -85px rgba(255,0,8,.095); }
}
[data-theme="light"] .neon-breathe { animation-name: neonBreatheLight3; }
@media (prefers-reduced-motion: reduce) { [data-theme="light"] .neon-breathe { animation: none; box-shadow: inset 85px 0 85px -80px rgba(255,0,8,.059); } }

/* --- Chrome bars + the bottom edge-glow continuity ------------------------
   wstabs (workspace tabs) and topbar (crumb bar) have nothing scrolling behind
   them, so they go transparent and the behind-glow shows through continuously.
   The sticky dashboard tabs DO have cards scrolling behind, so it keeps an
   opaque mask (overshooting its edges to kill glow-halo bleed) + a synced red
   glow layer painted on top so the edge-glow visually continues across it. --- */
.wstabs { background: transparent; }
.topbar { background: transparent; backdrop-filter: none; }
.dash .tabs { position: sticky; top: 0; z-index: 130; background: transparent; border-bottom: none; }

/* =============================================================================
   SOFT BUTTONS (dark theme) — the solid red/green fills read heavy; switch to
   tinted bg + colored text + hairline border. Dark keeps a faint glow on hover
   so it retains its neon character. (Light variants are defined above.)
   ============================================================================= */
[data-theme="dark"] .btn-primary { background: rgba(255,0,8,.13); color: var(--red-light); border: 1px solid rgba(255,0,8,.40); box-shadow: none; }
[data-theme="dark"] .btn-primary:hover:not(:disabled) { background: rgba(255,0,8,.20); border-color: rgba(255,0,8,.62); box-shadow: 0 0 20px -9px var(--red-light); }
[data-theme="dark"] .btn-primary svg { filter: none; }
[data-theme="dark"] .btn-success { background: rgba(46,204,113,.14); color: var(--green-text); border: 1px solid rgba(46,204,113,.38); box-shadow: none; }
[data-theme="dark"] .btn-success:hover:not(:disabled) { background: rgba(46,204,113,.22); border-color: rgba(46,204,113,.60); box-shadow: 0 0 18px -9px var(--green-status); filter: none; }
[data-theme="dark"] .fitem__copill-act,
[data-theme="dark"] .fitem__copill-caret { background: rgba(46,204,113,.16); color: var(--green-text); border-left-color: rgba(46,204,113,.30); }
[data-theme="dark"] .fitem__copill-main:hover .fitem__copill-act,
[data-theme="dark"] .fitem__copill-caret:hover { filter: none; background: rgba(46,204,113,.24); }

/* =============================================================================
   FILE-TREE ROWS — match the "Pick up where you left off" cw-card glow exactly:
   an accent-colored inset-left glow + hairline ring + soft outer halo, in the
   row's own state color (green = your checkout, blue = someone else's, red =
   plain). Defined last so it wins over the older scattered .fitem glow rules.
   ============================================================================= */
.fitem            { --accent: var(--red-light); }
.fitem--co-you    { --accent: var(--green-status); }
.fitem--co-other  { --accent: var(--blue-status); }
.fitem--co-you,
.fitem--co-other  { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); }
.fitem:hover,
.fitem--co-you:hover,
.fitem--co-other:hover {
  border-color: var(--accent);
  border-left-color: var(--accent);
  box-shadow: inset 3px 0 16px -7px var(--accent),
              0 0 30px -8px color-mix(in srgb, var(--accent) 60%, transparent),
              0 0 64px -16px color-mix(in srgb, var(--accent) 42%, transparent);
}

/* Compare v1: collapsible viewer side panel (additive). The collapse button is a
   static flex item in the .vwr__side-top row (next to the tabs), so it never
   overlaps the Activity tab the way an absolute overlay did. */
.vwr__side-collapse {
  flex:none; align-self:center; margin:5px 6px 0 0;
  width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--hairline); border-radius:6px; background:var(--bg-card);
  color:var(--text-tertiary); cursor:pointer;
}
.vwr__side-collapse:hover { color:var(--text-primary); }
/* tighten the viewer side tabs so Details + Versions + Activity all fit next to the
   collapse button in the narrow panel (scoped, does not affect other tab bars) */
.vwr__side-tabs .tab { padding:11px 8px; gap:5px; }
.vwr__side-tabs .tab svg { width:15px; height:15px; }
/* A: the right padding that reserves space for the collapse button lives in the
   viewer inline <style> rule for .vwr__side-tabs (that stylesheet loads after this
   one and wins the cascade), so it is not repeated here. */
.vwr__side.is-collapsed { display:none; }
.vwr__side-handle {
  display:none; align-items:center; justify-content:center;
  width:22px; flex:none; border:none; border-left:1px solid var(--hairline);
  background:var(--bg-card); color:var(--text-tertiary); cursor:pointer;
}
.vwr__side-handle.is-visible { display:inline-flex; }
.vwr__side-handle:hover { color:var(--text-primary); }

/* Compare v1: full-screen compare modal (additive) */
.cmp-modal {
  position:fixed; inset:3vh 3vw; display:flex; flex-direction:column;
  background:var(--bg-card); border:1px solid var(--hairline); border-radius:14px;
  box-shadow:0 24px 80px rgba(0,0,0,.55); overflow:hidden;
  opacity:0; transform:scale(.99); transition:opacity .18s ease, transform .18s ease;
}
.cmp-modal.is-open { opacity:1; transform:scale(1); }
/* B: compact bar strip ~44px tall */
.cmp-modal__bar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 14px; border-bottom:1px solid var(--hairline); min-height:44px; }
.cmp-modal__title { display:flex; align-items:center; gap:7px; font-weight:600; font-size:13px; color:var(--text-primary); min-width:0; }
.cmp-modal__title svg { width:15px; height:15px; flex:none; }
.cmp-modal__title span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmp-modal__panes { flex:1; display:flex; gap:1px; min-height:0; background:var(--hairline); }
.cmp-modal__col { flex:1 1 50%; display:flex; flex-direction:column; min-width:0; background:var(--bg-card); }
.cmp-modal__col .vcompare__hd { padding:10px 12px; border-bottom:1px solid var(--hairline); position:relative; }
/* Color-coded split glow under the full-screen dropdown headers, mirroring the
   inline compare bar: blue under the left (order) pane, amber under the right
   (invoice) pane, inset at the outer edges and meeting at the centre gap. */
.cmp-modal__col .vcompare__hd { border-bottom-color:transparent; }
.cmp-modal__col:first-child .vcompare__hd::after { content:''; position:absolute; left:14px; right:0; bottom:-1px; height:2px; background:var(--order); box-shadow:0 0 12px var(--order), 0 2px 9px -1px var(--order); border-radius:2px; }
.cmp-modal__col:last-child .vcompare__hd::after { content:''; position:absolute; left:0; right:14px; bottom:-1px; height:2px; background:var(--invoice); box-shadow:0 0 12px var(--invoice), 0 2px 9px -1px var(--invoice); border-radius:2px; }
.cmp-modal__body { flex:1; overflow:auto; padding:14px; min-height:0; }
.cmp-modal__body .pv-frame, .cmp-modal__body .pv-frame iframe { width:100%; height:100%; border:none; }

/* W: row hover echoes the selected (is-viewing) state at half strength — a faint
   red left tag and soft left glow, not the shared outer ring and not a letter-only
   glow — so hover and selected speak the same visual language. The transparent base
   left border keeps every clickable row aligned so hover adds no layout shift. */
.vrow:hover { box-shadow:none; border-color:transparent; }
.vrow--click { border-left:2px solid transparent; }
.vrow--click:hover { border-left-color:color-mix(in srgb, var(--red-light) 50%, transparent); box-shadow:-6px 0 16px -13px var(--red-light); }
.vrow--click:hover .vrow__tag { color:var(--red-light); }
/* N: the header FINAL pill matches the side-panel pill (.vrow__final.on): compact,
   uppercase, same green tokens (color/bg/border/glow come from the H block above). */
.badge--final { font-size:10px; letter-spacing:.09em; text-transform:uppercase; padding:3px 9px; gap:5px; }
.badge--final svg { width:13px; height:13px; }
/* Selected (in the viewer) version row: a red left tag like the compare panes use,
   so it is obvious which version is open, including when it is the current one. */
.vrow.is-viewing { border-left:2px solid var(--red-light); box-shadow:-6px 0 18px -12px var(--red-light); }
.vrow.is-viewing .vrow__tag { color:var(--red-light); text-shadow:0 0 9px var(--red-glow-50); }
.vrow.is-viewing .vrow__who { color:var(--text-primary); }
/* The FINAL flag is shown by its pill only; no green row fill (it was reading as a
   selection and competing with the red selected-row tag). */
.vrow.is-final { background:none; }

/* H: unify FINAL pill resting colors so both the header badge and the row button
   share the same green filled pill look (same bg/border/color/glow/weight tokens).
   Geometry is kept per-component; only the color+shadow tokens are reconciled. */
.badge-final,
.badge--final {
  color:var(--green-text);
  background:rgba(46,204,113,.14);
  border-color:rgba(46,204,113,.4);
  font-weight:800;
  letter-spacing:.08em;
  box-shadow:0 0 12px -5px var(--green-status);
}
/* row pill resting state matches the header badge color+glow;
   geometry (pill shape + gap + expand animation) is preserved */
.vrow__final.on {
  color:var(--green-text);
  background:rgba(46,204,113,.14);
  border-color:rgba(46,204,113,.4);
  box-shadow:0 0 12px -5px var(--green-status);
  gap:5px; padding:0 9px 0 6px; opacity:1;
}
.vrow__final.on .vrow__final-txt { max-width:50px; opacity:1; }

/* Compare accent colors (Task 5 class hooks) */
/* left pane selector: blue/order family accent */
.cmp-sel--a { border-left:2px solid var(--order); color:var(--order-text); }
.cmp-sel--a:focus { border-color:var(--order); box-shadow:0 0 0 3px var(--order-bg), 0 0 16px -5px var(--order); }
/* right pane selector: amber/invoice family accent */
.cmp-sel--b { border-left:2px solid var(--invoice); color:var(--invoice-text); }
.cmp-sel--b:focus { border-color:var(--invoice); box-shadow:0 0 0 3px var(--invoice-bg), 0 0 16px -5px var(--invoice); }
/* whole version row is click to view; show the pointer affordance */
.vrow--click { cursor:pointer; }
/* version row: left-edge bar + letter glow in pane color */
.vrow.cmp-a { border-left:2px solid var(--order); }
.vrow.cmp-a .vrow__tag { color:var(--order-text); text-shadow:0 0 9px rgba(52,152,219,.55); }
.vrow.cmp-b { border-left:2px solid var(--invoice); }
.vrow.cmp-b .vrow__tag { color:var(--invoice-text); text-shadow:0 0 9px rgba(232,146,58,.55); }
/* pane menu items: match their side's color */
.panemenu__l { color:var(--order-text); }
.panemenu__l svg { color:var(--order-text); }
.panemenu__l:hover { color:var(--order-text); border-color:var(--order-bd); background:var(--order-bg); box-shadow:0 0 14px -5px var(--order); }
.panemenu__r { color:var(--invoice-text); }
.panemenu__r svg { color:var(--invoice-text); }
.panemenu__r:hover { color:var(--invoice-text); border-color:var(--invoice-bd); background:var(--invoice-bg); box-shadow:0 0 14px -5px var(--invoice); }

/* M: minimized search on the viewer. Collapsed = a search FAB beside the bell
   (right:84px = bell right:22 + bell width 50 + 12 gap); clicking it grows and
   slides the bar to its normal centre (right:50% + translateX centres it), then
   search opens. closeCmd removes is-open to collapse it back to the icon. */
/* collapsed: a clean 50px circle next to the bell (matches .notif-fab exactly). */
.floatsearch--mini { position:fixed; left:auto; right:84px; bottom:28px; width:50px; height:50px; padding:0; z-index:150;
  transition: right .5s var(--ease), width .5s var(--ease), height .5s var(--ease), transform .5s var(--ease), opacity .34s var(--ease); }
.floatsearch--mini .floatsearch__pill { width:50px; height:50px; min-width:0; padding:0; gap:0; border-radius:50%;
  justify-content:center; align-items:center; backdrop-filter:none;
  background:var(--bg-raised); border:1px solid var(--border-strong);
  box-shadow:0 0 30px -6px var(--red-glow-50), 0 0 64px -16px var(--red-glow-40);
  transition: width .5s var(--ease), height .5s var(--ease), padding .5s var(--ease), border-radius .5s var(--ease), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.floatsearch--mini .floatsearch__pill:hover { border-color:var(--border-red-active); transform:translateY(-1px); box-shadow:var(--neon-hot); }
.floatsearch--mini .floatsearch__pill svg { width:21px; height:21px; color:var(--text-secondary); }
.floatsearch--mini .floatsearch__pill:hover svg { color:var(--text-primary); }
.floatsearch--mini .floatsearch__label, .floatsearch--mini .floatsearch__kbd { display:none; }
/* expanded: grow and slide to the page centre, matching the command palette's
   width and centre so the palette then grows up from the pill with no jump. */
.floatsearch--mini.is-open { right:50%; transform:translateX(50%); width:min(680px, 94vw); height:54px; }
.floatsearch--mini.is-open .floatsearch__pill { width:100%; height:54px; padding:0 12px 0 22px; gap:13px; border-radius:var(--r-pill); justify-content:flex-start;
  background:rgba(22,22,26,.80); backdrop-filter:blur(12px); box-shadow:0 10px 34px rgba(0,0,0,.55); }
.floatsearch--mini.is-open .floatsearch__pill svg { color:var(--red-light); }
.floatsearch--mini.is-open .floatsearch__label { display:block; }
.floatsearch--mini.is-open .floatsearch__kbd { display:flex; }
/* Continuous open from the mini FAB: the palette eases up from the pill over the
   same curve (instead of the default 190ms pop), and the pill fades out IN PLACE
   (kept page-centred, not snapped back toward its corner) so the slide and the open
   read as one motion rather than slide, blink, pop. */
body.cmd-from-mini .cmd { transition: opacity .34s var(--ease), transform .34s var(--ease); }
body.cmd-from-mini.cmd-open .floatsearch--mini { opacity:0; transform:translateX(50%) translateY(8px); pointer-events:none; }