/*
 * css/dashboard.css — Modular dashboard styles.
 *
 * Ported from the v2 redesign (on the `redesign` branch under
 * redesign/tokens, redesign/glass, redesign/components, redesign/v2/tiles,
 * redesign/v2/destinations/destinations.css).
 *
 * One file so the rest of v1 stays untouched. Strategy:
 *   1. Map every v2 token name (--accent-500, --ink-primary, --glass-4 etc.)
 *      to v1's existing tokens at the :root level — so the dashboard themes
 *      with v1's actual cyan + Space Grotesk + glass palette automatically.
 *   2. Rename v2's `.glass` class to `.v2-glass` to avoid collision with
 *      v1's own `.glass` class (which has different alpha values).
 *   3. Everything else uses unique `.v2-*` / `.v2c-*` prefixes that don't
 *      collide with v1 selectors.
 */

/* ════════════════════════════════════════════════════════════════════════════
   1. Token aliases — v2 names mapped to v1 tokens (defined in css/base.css)
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Accent ramp — all six steps point at v1's --accent-cyan family */
  --accent-300: color-mix(in srgb, var(--accent-cyan) 70%, white);
  --accent-400: color-mix(in srgb, var(--accent-cyan) 85%, white);
  --accent-500: var(--accent-cyan);
  --accent-600: color-mix(in srgb, var(--accent-cyan) 85%, black);
  --accent-700: color-mix(in srgb, var(--accent-cyan) 70%, black);
  --accent-glow: var(--glow-cyan);

  /* Glass surface tiers — v1 defines --glass-1 through --glass-4 already.
     We just add --glass-5 as a slightly heavier variant. */
  --glass-5: rgba(255,255,255,0.20);

  --edge-highlight: var(--glass-border-2);
  --edge-shadow: rgba(0,0,0,0.40);

  /* Ink — v2 names → v1 text tokens */
  --ink-primary:    var(--text-primary);
  --ink-secondary:  var(--text-secondary);
  --ink-tertiary:   var(--text-muted);
  --ink-quaternary: var(--text-dim);

  /* Surfaces — v1's canvas */
  --base-canvas: var(--col-void);
  --base-deep:   var(--col-navy);

  /* Semantic ramps */
  --good-500:     var(--accent-emerald);
  --good-tint:    var(--glow-emerald);
  --watch-500:    var(--accent-amber);
  --watch-tint:   rgba(251,191,36,0.12);
  --alert-500:    var(--accent-rose);
  --alert-tint:   var(--glow-rose);
  --critical-500: #E15A4C;
  --critical-glow: rgba(225,90,76,0.50);

  /* Radius — v1 uses --r-sm/md/lg; create v2 alias names */
  --radius-s:   var(--r-sm);
  --radius-m:   var(--r-md);
  --radius-l:   var(--r-lg);
  --radius-xl:  var(--r-xl);
  --radius-pill: 9999px;

  /* Blur tiers. Radius is the dominant cost variable in a backdrop-filter:
     every frame the background moves behind a glass tile (orbs / aurora / the
     3D overview canvas), the browser re-runs this Gaussian over the tile's
     backdrop, and that cost scales hard with the radius. These were dialed back
     from 12/24/36/56 — the frosted look is visually near-identical but the
     per-frame blur work across the many always-on dashboard tiles drops a lot. */
  --blur-s:  10px;
  --blur-m:  16px;
  --blur-l:  24px;
  --blur-xl: 32px;

  /* Space (4pt grid) */
  --space-2:  2px;
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-56: 56px;
  --space-72: 72px;
  --space-96: 96px;

  /* Elevation — five tiers */
  --elev-1: 0 1px 2px rgba(0,0,0,0.20);
  --elev-2: 0 4px 14px rgba(0,0,0,0.28), 0 1px 2px rgba(0,0,0,0.20);
  --elev-3: 0 10px 32px rgba(0,0,0,0.36), 0 2px 6px rgba(0,0,0,0.22);
  --elev-4: 0 24px 60px rgba(0,0,0,0.48), 0 4px 12px rgba(0,0,0,0.24);
  --elev-5: 0 40px 100px rgba(0,0,0,0.58), 0 8px 24px rgba(0,0,0,0.28);

  /* Motion — v1 has --t-fast/base/slow + --ease-out/spring/smooth */
  --ease-enter:  var(--ease-out);
  --ease-exit:   var(--ease-smooth);
  --ease-snap:   cubic-bezier(.5, 1.5, .5, 1);
  --ease-soft:   var(--ease-spring);
  --ease-liquid: var(--ease-out);

  --dur-instant:     90ms;
  --dur-micro:      160ms;
  --dur-quick:      240ms;
  --dur-standard:   360ms;
  --dur-flow:       520ms;
  --dur-expressive: 720ms;
  --dur-scene:     1100ms;

  /* Typography — keep v1's display + body, add v2-named sizes */
  --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  --type-display-xxl-size: 80px;   --type-display-xxl-lh: 84px;
  --type-display-xl-size:  64px;   --type-display-xl-lh:  68px;
  --type-display-l-size:   48px;   --type-display-l-lh:   52px;
  --type-display-m-size:   36px;   --type-display-m-lh:   40px;
  --type-display-s-size:   28px;   --type-display-s-lh:   32px;
  --type-title-l-size:     22px;   --type-title-l-lh:     28px;
  --type-title-m-size:     18px;   --type-title-m-lh:     24px;
  --type-title-s-size:     16px;   --type-title-s-lh:     22px;
  --type-body-l-size:      17px;   --type-body-l-lh:      26px;
  --type-body-m-size:      15px;   --type-body-m-lh:      22px;
  --type-body-s-size:      13px;   --type-body-s-lh:      18px;
  --type-body-xs-size:     12px;   --type-body-xs-lh:     16px;
  --type-mono-m-size:      15px;   --type-mono-m-lh:      22px;
  --type-mono-s-size:      13px;   --type-mono-s-lh:      18px;
  --type-caption-size:     11px;   --type-caption-lh:     14px;
  --type-caption-tracking: 0.06em;
  --type-label-size:       12px;   --type-label-lh:       16px;

  /* Z layers */
  --z-dropdown: 500;
  --z-drawer:  1000;
  --z-modal:   8500;
  --z-toast:   9000;
}

/* Live numbers helper — wrap in .v2c-num */
.v2c-num { font-variant-numeric: tabular-nums slashed-zero; font-family: var(--font-mono); }

/* Shared animations the motion library + glass primitive reference */
@keyframes v2-shimmer { from { background-position: 200% 0; } to { background-position: -100% 0; } }
.tx-shimmer {
  background: linear-gradient(90deg, var(--glass-1), var(--glass-3), var(--glass-1));
  background-size: 200% 100%;
  animation: v2-shimmer 2400ms var(--ease-liquid) infinite;
}

/* ════════════════════════════════════════════════════════════════════════════
   2. Glass primitive (renamed from .glass to .v2-glass to avoid collision
      with v1's existing .glass class).
   ════════════════════════════════════════════════════════════════════════════ */

.v2-glass {
  position: relative;
  border-radius: var(--radius-l);
  background: var(--glass-2);
  backdrop-filter: blur(var(--blur-m)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--blur-m)) saturate(1.5);
  border: 1px solid var(--edge-highlight);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-micro) var(--ease-enter),
              border-color var(--dur-micro) var(--ease-enter),
              box-shadow var(--dur-micro) var(--ease-enter);
}
.v2-glass.tier-1 { background: var(--glass-1); backdrop-filter: blur(var(--blur-s)) saturate(1.4); -webkit-backdrop-filter: blur(var(--blur-s)) saturate(1.4); box-shadow: var(--elev-1); }
.v2-glass.tier-2 { background: var(--glass-2); backdrop-filter: blur(var(--blur-m)) saturate(1.5); -webkit-backdrop-filter: blur(var(--blur-m)) saturate(1.5); box-shadow: var(--elev-2); }
.v2-glass.tier-3 { background: var(--glass-3); backdrop-filter: blur(var(--blur-l)) saturate(1.6); -webkit-backdrop-filter: blur(var(--blur-l)) saturate(1.6); box-shadow: var(--elev-3); }
.v2-glass.tier-4 { background: var(--glass-4); backdrop-filter: blur(var(--blur-l)) saturate(1.7); -webkit-backdrop-filter: blur(var(--blur-l)) saturate(1.7); box-shadow: var(--elev-4); }
.v2-glass.tier-5 { background: var(--glass-5); backdrop-filter: blur(var(--blur-xl)) saturate(1.8); -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(1.8); box-shadow: var(--elev-5); }
.v2-glass.spec-on::after {
  content: '';
  position: absolute;
  top: -20%; left: -10%; right: -10%;
  height: 70%;
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 40%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: v2-glass-spec-drift 9000ms var(--ease-liquid) infinite alternate;
}
@keyframes v2-glass-spec-drift {
  from { transform: translate(0%,  0%)   scale(1);    opacity: .8; }
  to   { transform: translate(20%,-15%)  scale(1.18); opacity: 1; }
}
.v2-glass.tint-accent   { box-shadow: var(--elev-2), inset 0 0 32px rgba(56,189,248,0.06); }
.v2-glass.tint-good     { box-shadow: var(--elev-2), inset 0 0 32px rgba(52,211,153,0.06); }
.v2-glass.tint-watch    { box-shadow: var(--elev-2), inset 0 0 32px rgba(251,191,36,0.06); }
.v2-glass.tint-alert    { box-shadow: var(--elev-2), inset 0 0 32px rgba(251,113,133,0.08); }
.v2-glass.tint-critical { box-shadow: var(--elev-2), inset 0 0 36px rgba(225,90,76,0.12); }

.v2-glass.interactive { cursor: pointer; user-select: none; }
.v2-glass.interactive:hover {
  transform: translateY(-2px);
  border-color: var(--accent-500);
  box-shadow: var(--elev-3), 0 0 24px var(--accent-glow);
}
.v2-glass.interactive:active { transform: scale(.98); }

/* ════════════════════════════════════════════════════════════════════════════
   3. V2C primitives (button, icon button, modal, drawer, toast, num, pill,
      skel, dropdown, tabs, chip, spark, ring) — only ones the dashboard uses
   ════════════════════════════════════════════════════════════════════════════ */

.v2c-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--type-label-size);
  line-height: 1; font-weight: 600; letter-spacing: 0.04em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer; user-select: none; outline: none;
  background: transparent;
  color: var(--ink-primary);
  transition: transform var(--dur-micro) var(--ease-enter),
              background var(--dur-micro) var(--ease-enter),
              border-color var(--dur-micro) var(--ease-enter),
              filter var(--dur-micro) var(--ease-enter),
              box-shadow var(--dur-micro) var(--ease-enter);
  overflow: hidden;
}
.v2c-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.v2c-btn-size-s { height: 32px; padding: 0 14px; font-size: 11px; }
.v2c-btn-size-m { height: 38px; padding: 0 18px; }
.v2c-btn-size-l { height: 44px; padding: 0 22px; font-size: 13px; }
.v2c-btn-primary {
  background: linear-gradient(135deg, var(--accent-400), var(--accent-600));
  color: #04060B;
  box-shadow: 0 8px 28px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.4);
  border-color: rgba(255,255,255,.18);
}
.v2c-btn-primary:hover  { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 12px 36px var(--accent-glow); }
.v2c-btn-primary:active { transform: scale(.97); }
.v2c-btn-secondary {
  background: var(--glass-2);
  border-color: var(--edge-highlight);
  color: var(--ink-primary);
  backdrop-filter: blur(var(--blur-s)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--blur-s)) saturate(1.5);
}
.v2c-btn-secondary:hover  { transform: translateY(-1px); background: var(--glass-3); border-color: rgba(56,189,248,.45); color: var(--accent-500); }
.v2c-btn-secondary:active { transform: scale(.97); }
.v2c-btn-ghost  { color: var(--ink-secondary); }
.v2c-btn-ghost:hover  { color: var(--accent-500); background: var(--glass-1); }
.v2c-btn-ghost:active { transform: scale(.97); }
.tx-success-ring {
  position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
  margin: -8px 0 0 -8px; border-radius: 50%;
  background: var(--accent-glow); pointer-events: none;
}

.v2c-iconbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  background: var(--glass-2); border: 1px solid var(--edge-highlight);
  border-radius: var(--radius-m); color: var(--ink-secondary);
  cursor: pointer; outline: none;
  transition: all var(--dur-micro) var(--ease-enter);
  backdrop-filter: blur(var(--blur-s)) saturate(1.5);
}
.v2c-iconbtn-32 { width: 32px; height: 32px; }
.v2c-iconbtn-36 { width: 36px; height: 36px; }
.v2c-iconbtn:hover {
  background: var(--glass-3); border-color: rgba(56,189,248,.45);
  color: var(--accent-500); box-shadow: 0 0 14px var(--accent-glow);
  transform: translateY(-1px);
}

/* Drawer (used by the tile library) */
.v2c-backdrop {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  background: rgba(4,5,18,.72);
  backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-24);
}
.v2c-drawer {
  position: fixed;
  z-index: var(--z-drawer);
  background: var(--glass-3);
  backdrop-filter: blur(var(--blur-l)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--blur-l)) saturate(1.6);
  border: 1px solid var(--edge-highlight);
  box-shadow: var(--elev-4);
}
.v2c-drawer-right  { top: 0; right: 0; bottom: 0; width: min(480px, calc(100vw - 32px)); border-radius: var(--radius-l) 0 0 var(--radius-l); }
.v2c-drawer-left   { top: 0; left: 0;  bottom: 0; width: min(480px, calc(100vw - 32px)); border-radius: 0 var(--radius-l) var(--radius-l) 0; }
.v2c-drawer-bottom { left: 0; right: 0; bottom: 0; max-height: 80vh; border-radius: var(--radius-l) var(--radius-l) 0 0; }

/* Toast stack */
.v2c-toast-stack {
  position: fixed; top: var(--space-24); right: var(--space-24);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-8);
  pointer-events: none;
}
.v2c-toast {
  pointer-events: auto;
  min-width: 260px; max-width: 380px;
  display: flex; align-items: center; gap: var(--space-12);
  padding: 14px 18px;
  background: var(--glass-4);
  border: 1px solid var(--edge-highlight);
  border-radius: var(--radius-m);
  backdrop-filter: blur(var(--blur-m)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--blur-m)) saturate(1.6);
  box-shadow: var(--elev-4);
  color: var(--ink-primary); font-size: var(--type-body-s-size);
}
.v2c-toast.tint-good     { border-color: rgba(52,211,153,.45); }
.v2c-toast.tint-watch    { border-color: rgba(251,191,36,.45); }
.v2c-toast.tint-alert    { border-color: rgba(251,113,133,.45); }
.v2c-toast.tint-critical { border-color: rgba(225,90,76,.55); box-shadow: var(--elev-4), 0 0 24px var(--critical-glow); }

/* Live number display */
.v2c-num {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero;
  color: var(--ink-primary); font-weight: 600;
}
.v2c-num-unit { font-size: .78em; color: var(--ink-tertiary); font-weight: 500; }
.v2c-num-size-s  { font-size: var(--type-mono-s-size);    line-height: var(--type-mono-s-lh); }
.v2c-num-size-m  { font-size: var(--type-mono-m-size);    line-height: var(--type-mono-m-lh); }
.v2c-num-size-l  { font-size: var(--type-display-s-size); line-height: var(--type-display-s-lh); }
.v2c-num-size-xl { font-size: var(--type-display-m-size); line-height: var(--type-display-m-lh); }

/* Status pill */
.v2c-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  background: var(--glass-2); color: var(--ink-secondary);
  white-space: nowrap;
}
.v2c-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.v2c-pill.tint-good     { color: var(--good-500);     background: var(--good-tint);  border-color: rgba(52,211,153,.40); }
.v2c-pill.tint-watch    { color: var(--watch-500);    background: var(--watch-tint); border-color: rgba(251,191,36,.40); }
.v2c-pill.tint-alert    { color: var(--alert-500);    background: var(--alert-tint); border-color: rgba(251,113,133,.40); }
.v2c-pill.tint-critical { color: var(--critical-500); background: rgba(225,90,76,.16); border-color: rgba(225,90,76,.55); box-shadow: 0 0 12px var(--critical-glow); }
.v2c-pill.tint-accent   { color: var(--accent-500);   background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.40); }

/* Skeleton */
.v2c-skel {
  border-radius: var(--radius-s);
  background: linear-gradient(90deg, var(--glass-1), var(--glass-3), var(--glass-1));
  background-size: 200% 100%;
  animation: v2-shimmer 2400ms var(--ease-liquid) infinite;
  min-height: 16px;
}

/* Dropdown (used by tile-library helpers) */
.v2c-dropdown {
  position: absolute;
  z-index: var(--z-dropdown);
  min-width: 200px;
  padding: 6px;
  background: var(--glass-4);
  border: 1px solid var(--edge-highlight);
  border-radius: var(--radius-m);
  backdrop-filter: blur(var(--blur-l)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--blur-l)) saturate(1.6);
  box-shadow: var(--elev-4);
}
.v2c-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  background: transparent; border: none;
  font-family: var(--font-body); font-size: var(--type-body-s-size);
  color: var(--ink-primary); text-align: left;
  border-radius: var(--radius-s); cursor: pointer;
  transition: background var(--dur-micro) var(--ease-enter);
}
.v2c-dropdown-item:hover { background: rgba(56,189,248,.10); color: var(--accent-500); }
.v2c-dropdown-sep { height: 1px; background: var(--edge-highlight); margin: 6px 0; }

/* Sparkline + ProgressRing — used by viz */
.v2c-spark { display: inline-block; vertical-align: middle; line-height: 0; }
.v2c-ring  { display: inline-block; vertical-align: middle; color: var(--accent-500); }
.v2c-ring circle:nth-child(2) {
  transition: stroke-dashoffset var(--dur-expressive) cubic-bezier(.22,1,.36,1);
}

/* Input — used in library search */
.v2c-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--type-body-m-size);
  color: var(--ink-primary);
  background: var(--glass-1);
  border: 1px solid var(--edge-highlight);
  border-radius: var(--radius-m);
  padding: 10px 14px;
  outline: none;
  transition: border-color var(--dur-micro) var(--ease-enter),
              box-shadow var(--dur-micro) var(--ease-enter),
              background var(--dur-micro) var(--ease-enter);
}
.v2c-input::placeholder { color: var(--ink-tertiary); }
.v2c-input:focus {
  border-color: var(--accent-500);
  background: var(--glass-2);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.16);
}

/* ════════════════════════════════════════════════════════════════════════════
   4. Visualizations
   ════════════════════════════════════════════════════════════════════════════ */

.v2-viz-empty { text-align: center; color: var(--ink-tertiary); padding: 24px; font-size: var(--type-body-s-size); }
.v2-viz-list  { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.v2-viz-list-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 6px 10px; background: var(--glass-1); border-radius: var(--radius-s);
}
.v2-viz-list-label { font-size: var(--type-body-s-size); color: var(--ink-primary); }
.v2-viz-bars { display: flex; flex-direction: column; gap: 6px; }
.v2-viz-bar-row {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center;
}
.v2-viz-bar-label { font-size: var(--type-body-s-size); color: var(--ink-secondary); }
.v2-viz-bar-track { height: 8px; background: var(--glass-2); border-radius: var(--radius-pill); overflow: hidden; }
.v2-viz-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-400), var(--accent-600));
  transition: width var(--dur-flow) cubic-bezier(.34,1.56,.64,1);
}
.v2-viz-line { width: 100%; height: auto; max-height: 200px; }
.v2-viz-gauge { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.v2-viz-gauge svg { width: 100%; max-width: 200px; }
.v2-viz-gauge-val { text-align: center; }
.v2-viz-ring-label {
  margin-top: 8px; text-align: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--accent-500); font-weight: 600;
}
.v2-viz-heat {
  display: grid; gap: 2px;
  font-family: var(--font-mono); font-size: var(--type-mono-s-size);
}
.v2-viz-heat-col, .v2-viz-heat-row-label {
  padding: 6px 8px; text-align: center;
  color: var(--ink-tertiary); font-weight: 600;
  font-size: var(--type-caption-size); letter-spacing: var(--type-caption-tracking);
  text-transform: uppercase;
}
.v2-viz-heat-row-label { text-align: left; }
.v2-viz-heat-cell {
  padding: 6px 8px; border-radius: var(--radius-s);
  color: var(--ink-primary); text-align: center;
}
.v2-viz-diff { font-family: var(--font-display); font-size: var(--type-body-s-size); margin-left: 8px; }
.v2-viz-diff.tint-good  { color: var(--good-500); }
.v2-viz-diff.tint-alert { color: var(--alert-500); }
.v2-viz-table { width: 100%; border-collapse: collapse; font-size: var(--type-body-s-size); }
.v2-viz-table th { font-family: var(--font-display); font-size: var(--type-caption-size); letter-spacing: var(--type-caption-tracking); color: var(--ink-tertiary); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--edge-highlight); }
.v2-viz-table td { padding: 8px 10px; border-bottom: 1px solid var(--glass-1); color: var(--ink-primary); }

/* ════════════════════════════════════════════════════════════════════════════
   5. Tile shell + dashboard layout
   ════════════════════════════════════════════════════════════════════════════ */

#dashboard-v2-mount {
  width: 100%;
}

/* v1's Overview tab locks to 100vh with overflow:hidden (see css/overview.css
   #tab-overview rules) so the page never scrolls. Inside that, the dashboard
   mount takes the remaining vertical space and scrolls its own contents.
   This preserves v1's "no whole-page scroll" design while letting the tile
   grid extend as tall as needed. */
#tab-overview .tab-content #dashboard-v2-mount {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(56,189,248,0.20) transparent;
  padding-right: 6px;     /* room for the scrollbar */
}
#tab-overview .tab-content #dashboard-v2-mount::-webkit-scrollbar       { width: 6px; }
#tab-overview .tab-content #dashboard-v2-mount::-webkit-scrollbar-track { background: transparent; }
#tab-overview .tab-content #dashboard-v2-mount::-webkit-scrollbar-thumb {
  background: rgba(56,189,248,0.20);
  border-radius: 3px;
}
#tab-overview .tab-content #dashboard-v2-mount::-webkit-scrollbar-thumb:hover {
  background: rgba(56,189,248,0.40);
}

.v2-route-mount { animation: v2-route-in var(--dur-standard) var(--ease-enter) forwards; }
@keyframes v2-route-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.v2-dash-strip {
  display: flex; align-items: center;
  margin-bottom: 16px;
}
.v2-dash-strip-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }

.v2-dash-canvas { position: relative; min-height: 60vh; }
.v2-dash-gridlines { display: none; }

.v2-dash-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* FIXED row height (was minmax(110, auto)). With `auto`, each row
     independently grew to fit its tallest tile — so per-row pixel heights
     differed and the drag math (which derives stride from cellHeight/h)
     gave wrong cursor↔row mapping, causing tiles to leap to the bottom
     on grab. Fixed height = uniform stride = drag math always correct.
     Tiles that need more height should pick a bigger h: size or scroll
     their own content internally. */
  grid-auto-rows: 140px;
  gap: 12px;
}
.v2-dash-cell {
  position: relative;
  /* Visible by default — the hidden state lives ONLY inside the keyframe, never
     as a persistent base style. So if the entrance animation is stripped
     (content/ad-blocker), suspended (backgrounded Safari tab), or never sticks,
     the tile degrades to "no fade-in" instead of "permanently blank". */
  opacity: 1; transform: none;
  animation: v2-row-in .32s var(--ease-enter) both;
  animation-delay: calc(var(--i, 0) * 40ms);
  cursor: grab;
  /* `min-height: 0` / `min-width: 0` defeat the default `auto` minimums on
     flex/grid children — that's what actually forces the cell to respect
     its grid track height (e.g. 140 × h) even when an internal min-content
     child would otherwise push the row taller. The tile itself already has
     `overflow: hidden`, so we don't clip a second time at the cell level
     (that was eating the inbox's internal scroll + tile chrome). */
  min-height: 0;
  min-width: 0;
}
.v2-dash-cell:active { cursor: grabbing; }
.v2-dash-cell .v2-tile { height: 100%; }
@keyframes v2-row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Tile */
.v2-tile {
  display: flex; flex-direction: column;
  padding: 12px 14px;
  height: 100%; min-height: 0;
  position: relative; overflow: hidden;
}
.v2-tile-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; gap: 6px; min-width: 0;
}
.v2-tile-title {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  color: var(--ink-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.v2-tile-scope {
  font-family: var(--font-display); font-size: var(--type-caption-size);
  letter-spacing: var(--type-caption-tracking); color: var(--ink-tertiary);
  text-transform: uppercase;
}
.v2-tile-body { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.v2-tile-foot, .v2-tile-foot-inline {
  margin-top: auto; padding-top: 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.v2-tile-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.v2-tile-kpis > div { display: flex; flex-direction: column; gap: 4px; }
.v2-kpi-eyebrow {
  font-family: var(--font-display); font-size: var(--type-caption-size);
  letter-spacing: var(--type-caption-tracking); color: var(--ink-tertiary);
  text-transform: uppercase; font-weight: 600;
}
.v2-tile-notes {
  width: 100%; min-height: 70px;
  background: var(--glass-1); border: 1px solid var(--edge-highlight);
  border-radius: var(--radius-m); color: var(--ink-primary);
  font-family: var(--font-body); font-size: var(--type-body-s-size);
  padding: 10px 12px; outline: none; resize: vertical;
}
.v2-tile-clock { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.v2-tile-clock-day {
  color: var(--ink-tertiary); font-size: var(--type-body-xs-size);
  letter-spacing: .04em; text-transform: uppercase;
}

/* Always-on tile chrome */
.v2-tile-hover-chrome {
  position: absolute; top: 8px; right: 8px;
  display: flex; gap: 4px; z-index: 5;
  opacity: 0; transform: translateY(-2px); pointer-events: none;
  transition: opacity var(--dur-micro) var(--ease-enter),
              transform var(--dur-micro) var(--ease-enter);
}
/* Per user 2026-05-30: chrome (X close button etc.) was popping on hover —
   distracting on a dashboard. Now appears only when the tile is actively
   being dragged or resized, matching the resize-handle behaviour. */
.v2-dash-cell.is-dragging  .v2-tile-hover-chrome,
.v2-dash-cell.is-resizing .v2-tile-hover-chrome { opacity: 1; transform: translateY(0); pointer-events: auto; }
.v2-tile-hover-btn {
  width: 26px; height: 26px;
  background: rgba(7,9,11,.70); border: 1px solid var(--edge-highlight);
  color: var(--ink-primary); cursor: pointer;
  border-radius: 50%; font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(var(--blur-s)) saturate(1.5);
  transition: all var(--dur-micro) var(--ease-enter);
}
.v2-tile-hover-btn:hover {
  background: rgba(56,189,248,.20); border-color: rgba(56,189,248,.55); color: var(--accent-500);
}
.v2-tile-hover-x:hover {
  background: rgba(225,90,76,.22); border-color: rgba(225,90,76,.55); color: var(--critical-500);
}

/* ════════════════════════════════════════════════════════════════════════════
   Inbox tile — filter pills + compact mail-row list
   ════════════════════════════════════════════════════════════════════════════ */
.v2-inbox-head { gap: 12px; }
.v2-inbox-count {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; color: var(--accent-500);
  padding: 2px 10px; border-radius: var(--radius-pill);
  background: rgba(56,189,248,.10); border: 1px solid rgba(56,189,248,.30);
  min-width: 0;
}
.v2-inbox-count:empty { display: none; }

/* Archive all — non-destructive, pushed to the far right of the header */
.v2-inbox-clear {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--glass-1); border: 1px solid var(--edge-highlight);
  color: var(--ink-secondary);
  font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--dur-micro) var(--ease-enter);
}
.v2-inbox-clear:hover {
  background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.35);
  color: var(--accent-500);
}
.v2-inbox-clear:disabled { opacity: .55; cursor: default; }
.v2-inbox-clear svg { flex-shrink: 0; }

.v2-inbox-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 2px 0 10px;
  border-bottom: 1px solid var(--edge-highlight);
  margin-bottom: 8px;
}
.v2-inbox-pill {
  background: var(--glass-1); border: 1px solid var(--edge-highlight);
  color: var(--ink-secondary);
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--dur-micro) var(--ease-enter);
}
.v2-inbox-pill:hover {
  background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.35);
  color: var(--accent-500);
}
.v2-inbox-pill.is-active {
  background: rgba(56,189,248,.16); border-color: rgba(56,189,248,.55);
  color: var(--accent-500); box-shadow: 0 0 12px rgba(56,189,248,.18) inset;
}

.v2-inbox-body {
  /* Internal scroll WITHOUT `overscroll-behavior: contain` — once the body
     hits its scroll limit, wheel events chain up to the dashboard mount
     instead of being trapped. That keeps cursor-over-inbox dashboard scroll
     working naturally. */
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(56,189,248,.25) transparent;
  display: flex; flex-direction: column; gap: 4px;
  padding-right: 4px;
}
.v2-inbox-body::-webkit-scrollbar       { width: 6px; }
.v2-inbox-body::-webkit-scrollbar-track { background: transparent; }
.v2-inbox-body::-webkit-scrollbar-thumb {
  background: rgba(56,189,248,.22); border-radius: 3px;
}
.v2-inbox-body::-webkit-scrollbar-thumb:hover { background: rgba(56,189,248,.40); }

.v2-inbox-cap {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;             /* push to the right of the pills row */
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-tertiary);
}
.v2-inbox-cap-label { white-space: nowrap; }
.v2-inbox-cap-select {
  appearance: none; -webkit-appearance: none;
  background: var(--glass-1); border: 1px solid var(--edge-highlight);
  color: var(--ink-primary);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  padding: 4px 22px 4px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer; outline: none;
  /* Custom chevron — inline SVG so we don't need a separate asset. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2338bdf8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color var(--dur-micro) var(--ease-enter),
              background-color var(--dur-micro) var(--ease-enter);
}
.v2-inbox-cap-select:hover  { border-color: rgba(56,189,248,.45); background-color: var(--glass-2); }
.v2-inbox-cap-select:focus  { border-color: var(--accent-500); box-shadow: 0 0 0 2px rgba(56,189,248,.20); }
.v2-inbox-cap-select option { background: var(--col-navy); color: var(--ink-primary); }
/* ════════════════════════════════════════════════════════════════════════════
   Inbox detail modal — opened on click of an inbox row
   ════════════════════════════════════════════════════════════════════════════ */
.v2-inbox-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(4,5,18,0); backdrop-filter: blur(0);
  z-index: 8499;
  pointer-events: none;
  transition: background var(--dur-quick) var(--ease-enter),
              backdrop-filter var(--dur-quick) var(--ease-enter);
}
.v2-inbox-modal-backdrop.is-open {
  pointer-events: auto;
  background: rgba(4,5,18,0.62);
  backdrop-filter: blur(6px);
}

.v2-inbox-modal {
  position: fixed; top: 50%; left: 50%;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  z-index: 8500;
  padding: 22px 24px 18px;
  border-radius: var(--radius-l);
  transform: translate(-50%, -48%) scale(.96);
  opacity: 0;
  transition: transform var(--dur-quick) var(--ease-enter),
              opacity var(--dur-quick) var(--ease-enter);
  scrollbar-width: thin; scrollbar-color: rgba(56,189,248,.30) transparent;
}
.v2-inbox-modal.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.v2-inbox-modal::-webkit-scrollbar       { width: 6px; }
.v2-inbox-modal::-webkit-scrollbar-thumb { background: rgba(56,189,248,.30); border-radius: 3px; }

.v2-inbox-modal.inbox-sev-critical { border-color: rgba(225,90,76,.55);  box-shadow: var(--elev-5), 0 0 32px var(--critical-glow); }
.v2-inbox-modal.inbox-sev-warning  { border-color: rgba(251,191,36,.55); box-shadow: var(--elev-5), 0 0 28px rgba(251,191,36,.30); }

.v2-inbox-modal-hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.v2-inbox-modal-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-family: var(--font-display); font-size: 11px;
}
.v2-inbox-modal-sev {
  font-weight: 700; letter-spacing: .08em;
  padding: 3px 8px; border-radius: var(--radius-pill);
}
.v2-inbox-modal-sev.sev-critical { color: var(--critical-500); background: rgba(225,90,76,.16); border: 1px solid rgba(225,90,76,.55); }
.v2-inbox-modal-sev.sev-warning  { color: var(--watch-500);    background: var(--watch-tint);  border: 1px solid rgba(251,191,36,.40); }
.v2-inbox-modal-time {
  color: var(--ink-tertiary); font-family: var(--font-mono);
  font-size: var(--type-mono-s-size); font-variant-numeric: tabular-nums;
}
.v2-inbox-modal-x {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: var(--glass-2); border: 1px solid var(--edge-highlight);
  color: var(--ink-secondary);
  border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-micro) var(--ease-enter);
}
.v2-inbox-modal-x:hover { background: rgba(225,90,76,.20); border-color: rgba(225,90,76,.55); color: var(--critical-500); }

.v2-inbox-modal-title {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  line-height: 1.3; color: var(--ink-primary);
  margin: 0 0 4px;
}
.v2-inbox-modal-from {
  color: var(--ink-tertiary); font-size: var(--type-body-s-size);
  margin-bottom: 14px;
}
.v2-inbox-modal-from strong { color: var(--ink-primary); font-weight: 600; }

.v2-inbox-modal-body { margin: 8px 0 16px; }

.v2-inbox-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px;
  margin: 8px 0 12px;
}
.v2-inbox-detail-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  background: var(--glass-1); border: 1px solid var(--edge-highlight);
  border-radius: var(--radius-m);
}
.v2-inbox-detail-row > span {
  font-family: var(--font-display); font-size: var(--type-caption-size);
  letter-spacing: var(--type-caption-tracking); text-transform: uppercase;
  color: var(--ink-tertiary); font-weight: 600;
}
.v2-inbox-detail-row > strong {
  font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  color: var(--ink-primary); font-variant-numeric: tabular-nums;
}

.v2-inbox-detail-rx {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px;
  padding: 12px;
  background: rgba(56,189,248,.04); border: 1px solid rgba(56,189,248,.25);
  border-radius: var(--radius-m);
  margin: 8px 0 12px;
}
.v2-inbox-detail-rx-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 2px 4px;
}
.v2-inbox-detail-rx-row > span    { color: var(--ink-tertiary); font-size: var(--type-body-s-size); }
.v2-inbox-detail-rx-row > strong  { color: var(--accent-500); font-family: var(--font-mono); font-size: 13px; }

.v2-inbox-detail-msg {
  margin: 8px 0 0; padding: 10px 12px;
  background: var(--glass-1); border-left: 2px solid var(--accent-500);
  border-radius: 4px;
  color: var(--ink-primary); font-size: var(--type-body-m-size);
  line-height: 1.45;
}

.v2-inbox-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--edge-highlight);
}
.v2-inbox-modal-btn {
  background: var(--glass-2); border: 1px solid var(--edge-highlight);
  color: var(--ink-secondary);
  padding: 8px 16px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur-micro) var(--ease-enter);
}
.v2-inbox-modal-btn:hover { background: var(--glass-3); color: var(--ink-primary); }
.v2-inbox-modal-btn.primary {
  background: linear-gradient(135deg, var(--accent-400), var(--accent-600));
  color: #04060B; border-color: rgba(255,255,255,.18);
  box-shadow: 0 6px 20px var(--accent-glow);
}
.v2-inbox-modal-btn.primary:hover { filter: brightness(1.08); }

.v2-inbox-more-note {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: .04em; color: var(--ink-tertiary);
  padding: 8px 4px 2px; text-align: center;
  border-top: 1px dashed var(--edge-highlight);
  margin-top: 4px;
}

/* When the nav bell is clicked we route to the dashboard and briefly flash
   the inbox tile so the user sees where their click went. */
.v2-dash-cell-flash > .v2-tile {
  animation: v2-inbox-flash 1.2s ease-out;
}
@keyframes v2-inbox-flash {
  0%   { box-shadow: var(--elev-2), 0 0 0 0 rgba(56,189,248,0); }
  20%  { box-shadow: var(--elev-3), 0 0 0 4px rgba(56,189,248,.45); }
  100% { box-shadow: var(--elev-2), 0 0 0 0 rgba(56,189,248,0); }
}

.v2-inbox-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 80px;
  color: var(--ink-tertiary); font-size: var(--type-body-s-size);
  text-align: center; padding: 16px;
}

.v2-inbox-row {
  display: grid;
  grid-template-columns: minmax(72px, auto) 1fr minmax(0, 90px) 36px;
  gap: 12px; align-items: center;
  width: 100%; padding: 8px 10px;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-m);
  color: var(--ink-primary); font-family: var(--font-body);
  font-size: var(--type-body-s-size); text-align: left;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-enter),
              border-color var(--dur-micro) var(--ease-enter);
}
.v2-inbox-row:hover {
  background: rgba(56,189,248,.06);
  border-color: rgba(56,189,248,.30);
}
.v2-inbox-row.is-unread {
  background: rgba(56,189,248,.04);
  border-color: rgba(56,189,248,.18);
}
.v2-inbox-row.is-unread .v2-inbox-row-title { color: var(--ink-primary); font-weight: 600; }
.v2-inbox-row .v2-inbox-row-title { color: var(--ink-secondary); }

.v2-inbox-row-tag {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-pill);
  text-align: center; white-space: nowrap;
  background: var(--glass-2); border: 1px solid var(--edge-highlight);
  color: var(--ink-secondary);
}
.v2-inbox-row-tag.tint-accent   { color: var(--accent-500);   background: rgba(56,189,248,.12);  border-color: rgba(56,189,248,.40); }
.v2-inbox-row-tag.tint-good     { color: var(--good-500);     background: var(--good-tint);      border-color: rgba(52,211,153,.40); }
.v2-inbox-row-tag.tint-watch    { color: var(--watch-500);    background: var(--watch-tint);     border-color: rgba(251,191,36,.40); }
.v2-inbox-row-tag.tint-alert    { color: var(--alert-500);    background: var(--alert-tint);     border-color: rgba(251,113,133,.40); }

.v2-inbox-row-title {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2-inbox-row-from {
  color: var(--ink-tertiary); font-size: var(--type-body-xs-size);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2-inbox-row-time {
  color: var(--ink-tertiary); font-family: var(--font-mono);
  font-size: var(--type-mono-s-size); font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Scope pill */
.v2-tile-scope-pick {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--glass-2); border: 1px solid var(--edge-highlight);
  color: var(--ink-secondary);
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--dur-micro) var(--ease-enter);
}
.v2-tile-scope-pick:hover {
  background: rgba(56,189,248,.10); border-color: rgba(56,189,248,.45);
  color: var(--accent-500);
}

/* Drag visuals — tile snaps to grid coords, shows cyan outline.
   No grid-column / grid-row transition during drag: animating the grid
   position makes the tile lag behind the cursor (was reported by user as
   "the tile doesn't match my cursor"). Snapping is instant. */
.v2-dash-cell.is-dragging {
  cursor: grabbing; z-index: 50;
  transition: none !important;
}
.v2-dash-cell.is-dragging > .v2-tile {
  outline: 2px solid var(--accent-500); outline-offset: -1px;
  box-shadow: var(--elev-5), 0 0 40px var(--accent-glow);
}
.v2-dash-cell.is-conflict > .v2-tile {
  outline-color: var(--critical-500);
  box-shadow: var(--elev-5), 0 0 40px var(--critical-glow);
}
body.v2-dash-dragging { cursor: grabbing; user-select: none; }
body.v2-dash-dragging * { user-select: none; }

/* Corner resize handle — lives inside the tile and tucks into the rounded
   bottom-right corner. Hidden by default; fades in on tile hover, stays
   visible while dragging or resizing. */
.v2-tile-resize-handle {
  position: absolute; bottom: 4px; right: 4px;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-tertiary);
  cursor: nwse-resize;
  opacity: 0; z-index: 6; user-select: none;
  transition: opacity 0.18s var(--ease-enter), color var(--dur-micro) var(--ease-enter);
}
.v2-dash-cell:hover .v2-tile-resize-handle,
.v2-tile:hover .v2-tile-resize-handle { opacity: 0.85; }
.v2-dash-cell.is-dragging .v2-tile-resize-handle { opacity: 1; }
.v2-tile-resize-handle:hover { color: var(--accent-500); opacity: 1; }
.v2-dash-cell.is-resizing { filter: drop-shadow(0 12px 32px rgba(0,0,0,.40)) drop-shadow(0 0 24px var(--accent-glow)); }
.v2-dash-cell.is-resizing .v2-tile-resize-handle { color: var(--accent-500); opacity: 1; }
body.v2-dash-resizing { cursor: nwse-resize; user-select: none; }
body.v2-dash-resizing * { user-select: none; }

.v2-dash-readout {
  position: fixed; z-index: var(--z-toast);
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--glass-5); backdrop-filter: blur(var(--blur-m)) saturate(1.6);
  border: 1px solid rgba(56,189,248,.5);
  color: var(--accent-500); font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 16px var(--accent-glow);
}

/* Library drawer */
.v2-lib-wrap { display: flex; flex-direction: column; height: 100%; }
.v2-libfilter {
  flex-shrink: 0; padding: 16px 16px 8px;
  background: linear-gradient(to bottom, var(--glass-3) 70%, transparent);
  position: sticky; top: 0; z-index: 2;
}
.v2-libgrid {
  flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: 1fr; gap: 8px;
  padding: 0 16px 24px;
  scrollbar-width: thin; scrollbar-color: rgba(56,189,248,.3) transparent;
}
.v2-libgrid::-webkit-scrollbar { width: 6px; }
.v2-libgrid::-webkit-scrollbar-track { background: transparent; }
.v2-libgrid::-webkit-scrollbar-thumb { background: rgba(56,189,248,.25); border-radius: 3px; }
.v2-libgrid::-webkit-scrollbar-thumb:hover { background: rgba(56,189,248,.45); }
.v2-libcard {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; text-align: left;
  cursor: pointer; border: 1px solid var(--edge-highlight);
  background: var(--glass-2); border-radius: var(--radius-m);
  opacity: 1; transform: none;                          /* visible by default (see .v2-dash-cell note) */
  animation: v2-row-in .32s var(--ease-enter) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}
.v2-libcard:hover { border-color: rgba(56,189,248,.5); }
.v2-libcard-group { font-family: var(--font-display); font-size: var(--type-caption-size); letter-spacing: var(--type-caption-tracking); color: var(--accent-500); text-transform: uppercase; }
.v2-libcard-name  { font-family: var(--font-display); font-weight: 600; color: var(--ink-primary); font-size: var(--type-title-s-size); }
.v2-libcard-size  { font-family: var(--font-mono); font-size: var(--type-mono-s-size); color: var(--ink-tertiary); }

/* ════════════════════════════════════════════════════════════════════════════
   6. Responsive — keep desktop priority, degrade for narrow viewports
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .v2-dash-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 768px) {
  .v2-dash-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .v2-glass.spec-on::after { animation: none; }
  .v2-glass.interactive:hover, .v2-glass.interactive:active { transform: none; }
  .v2-dash-cell, .v2-libcard { animation: none; opacity: 1; transform: none; }
  .v2c-skel, .tx-shimmer { animation: none; }
  .v2-route-mount { animation: none; }
}

/* ── Light-theme overrides ───────────────────────────────────────────────
   Most of dashboard.css already inherits from base.css tokens that flip
   automatically. These targeted overrides catch the v2-specific values
   that don't pick up the theme switch: the heavier glass-5 tier, dark
   modal/backdrop colors, and a couple of white-on-glass borders. */
html[data-theme="light"] {
  /* glass-5 is the heaviest tier — needs a darker tint over the light bg */
  --glass-5: rgba(255,255,255,0.94);
  --edge-shadow: rgba(0,0,0,0.10);

  /* Elevation ramp is defined with pure-black rgba in :root and never flipped,
     so every drawer / toast / modal / tile that reads var(--elev-*) casts a
     harsh black shadow over the light bg. Re-tint the whole ramp to a soft
     cool violet-grey so elevation still reads but sits calmly on light. */
  --elev-1: 0 1px 2px rgba(80,90,160,0.10);
  --elev-2: 0 4px 14px rgba(80,90,160,0.12), 0 1px 2px rgba(80,90,160,0.10);
  --elev-3: 0 10px 32px rgba(80,90,160,0.14), 0 2px 6px rgba(80,90,160,0.10);
  --elev-4: 0 24px 60px rgba(80,90,160,0.16), 0 4px 12px rgba(80,90,160,0.10);
  --elev-5: 0 40px 100px rgba(80,90,160,0.18), 0 8px 24px rgba(80,90,160,0.12);
}

/* Tile hover-chrome buttons (X / resize) are a near-black disc (rgba(7,9,11,.70))
   — invisible-as-glass and heavy on the light bg. Swap to a frosted light disc. */
html[data-theme="light"] .v2-tile-hover-btn {
  background: rgba(255,255,255,0.82);
  color: var(--ink-secondary);
}

/* Native <option> list inherits --col-navy (does NOT invert) → dark bg with the
   now-dark ink-primary text = unreadable. Give the popup a light surface. */
html[data-theme="light"] .v2-inbox-cap-select option {
  background: #eef1fb;
  color: var(--ink-primary);
}

html[data-theme="light"] .v2c-backdrop {
  background: rgba(180, 190, 220, 0.55);
}
html[data-theme="light"] .v2c-drawer,
html[data-theme="light"] .v2c-toast {
  background: rgba(248, 250, 254, 0.96);
  border-color: rgba(0, 0, 0, 0.10);
}

html[data-theme="light"] .v2-inbox-modal,
html[data-theme="light"] .v2-inbox-modal-overlay {
  background: rgba(255, 255, 255, 0.96);
}
html[data-theme="light"] .v2-inbox-modal-overlay {
  background: rgba(20, 30, 60, 0.45);
}

html[data-theme="light"] .v2c-btn-primary {
  color: #ffffff;
}

/* Cyan accent tints survive in light mode but the dark text on cyan
   buttons (#04060B) becomes the right call too — leave it. */
html[data-theme="light"] .v2-inbox-body::-webkit-scrollbar-thumb,
html[data-theme="light"] .v2-inbox-modal::-webkit-scrollbar-thumb,
html[data-theme="light"] .v2-libgrid::-webkit-scrollbar-thumb {
  background: rgba(2, 132, 199, 0.45);
}

/* ── MOBILE (2026-07-06 overhaul) — scoped, desktop untouched ──
   #ov-submit-btn / #ov-addback-btn (Overview header primary actions) collapse
   to icon-only ~27x33px pills in mobile.css's legacy ≤640 band — well under
   the 44px touch minimum. Hosted here because this file loads AFTER
   css/mobile.css; only additive properties, nothing in that band conflicts. */
@media (max-width: 640px) {
  .ov-submit-btn {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
  }
}