/* ============================================================================
   GSB DESIGN SYSTEM v3 — Deep Dive (#venue-deep-dive-screen)
   Source of truth: the "GSB Design System" artifact (v3, 2026-10-09) — cool
   green neutrals (snow / frost / mist), one green family, Instrument Sans for
   everything, square corners, flat fills instead of borders and shadows.
   Loaded LAST and scoped to this screen, so no other tab changes.

   How the tab gets there:
   1. The Deep Dive's own renderers (js/lt-app-v2.js VENUE DEEP DIVE section,
      js/vdd-*.js, its style.css block) had their old warm hexes remapped to v3
      at the source. Hex -> hex, so Chart.js canvases changed too.
   2. This file: tokens, type, surfaces, the command bar, tables, and a small
      bridge for SHARED renderers whose inline colours stay as they are on other
      tabs (P&L tables, the P&L Analysis portal, the filter popovers).
   3. js/vdd-chart-theme.js recolours canvases drawn by shared chart helpers.
   The --ds-* names match the Sales Flash v3 re-skin, so both tabs read alike.
   ============================================================================ */

#venue-deep-dive-screen {
  --ds-snow: #F6F7F3;  --ds-frost: #ECF0EA;  --ds-mist: #D9E3D8;  --ds-sage: #A9C2AE;
  --ds-moss: #4F7A5A;  --ds-forest: #2E4F3B; --ds-pine: #1C3326;  --ds-ink: #1A1E1B;
  --ds-leaf: #82BB90;  --ds-muted: #56625A;  --ds-muted-pine: #B2C4B7;
  --ds-clay: #B5532E;  --ds-clay-light: #E39A7E; --ds-ochre: #B98B32; --ds-slate: #5D7584;

  --ds-bg: var(--ds-snow);
  --ds-fg: var(--ds-ink);
  --ds-fg-2: #3A453E;
  --ds-fg-3: #66726A;
  --ds-surface: var(--ds-frost);
  --ds-surface-strong: var(--ds-mist);
  --ds-accent: var(--ds-moss);
  --ds-accent-text: #3E6348;
  --ds-danger-text: #9A4423;
  --ds-on-accent: var(--ds-snow);
  --ds-field: var(--ds-pine);
  --ds-on-field: var(--ds-snow);
  --ds-rule: rgba(26, 30, 27, 0.10);
  --ds-rule-strong: rgba(26, 30, 27, 0.30);
  --ds-hover: rgba(79, 122, 90, 0.08);
  --ds-title-block: var(--ds-mist);
  --ds-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* legacy aliases read by inline var() styles inside this screen */
  --heading: var(--ds-ink);
  --text-main: var(--ds-ink);
  --text-muted: var(--ds-muted);
  --border: var(--ds-mist);
  --primary: var(--ds-moss);
  --surface: var(--ds-snow);
  --bg: var(--ds-snow);
  --font-main: var(--ds-font);
  --font-mono: var(--ds-font);
  --gsb-paper: var(--ds-snow);
  --gsb-soil-ink: var(--ds-ink);
  --gsb-stone: var(--ds-muted);
  --gsb-shoot-green: var(--ds-moss);
  --gsb-leaf: var(--ds-moss);
  --vpm-ink: var(--ds-ink);
  --vpm-stone: var(--ds-muted);
  --vpm-green: var(--ds-accent-text);
  --vpm-line: var(--ds-mist);

  background: var(--ds-bg) !important;
  color: var(--ds-fg);
  font-family: var(--ds-font) !important;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- One voice: Instrument Sans everywhere (inline 'Inter' / 'JetBrains Mono' included) ---- */
#venue-deep-dive-screen *:not(svg):not(svg *) {
  font-family: var(--ds-font) !important;
}
#venue-deep-dive-screen svg text { font-family: var(--ds-font); }

/* ---- Square corners, no shadows. Round dots/avatars keep their 50%. ---- */
#venue-deep-dive-screen *:not([style*="50%"]):not(.sf-dot):not(.vdd-round),
#venue-deep-dive-screen *::before, #venue-deep-dive-screen *::after {
  border-radius: 0 !important;
}
#venue-deep-dive-screen *:not(#vdd-sticky-bar) { box-shadow: none !important; }
#venue-deep-dive-screen *:not(#vdd-sticky-bar):not(#vdd-jump-rail) { text-shadow: none !important; }

/* ---- Page title: GSB + square seed, half highlight on "Deep Dive" ---- */
#venue-deep-dive-screen .nav-bar { background: transparent !important; border: 0 !important; padding: 18px 16px 0 !important; }
#venue-deep-dive-screen .nav-bar h2 {
  font-family: var(--ds-font) !important; font-size: 34px !important; font-weight: 600 !important;
  letter-spacing: -0.03em !important; line-height: 1.1 !important; color: var(--ds-ink) !important;
  gap: 0.24em; align-items: baseline;
}
#venue-deep-dive-screen .nav-bar h2 .gsb-title-mark { color: var(--ds-ink) !important; font-weight: 600 !important; }
#venue-deep-dive-screen .nav-bar h2 .gsb-title-seed {
  display: inline-block; width: 0.19em; height: 0.19em; margin-left: 0.05em; background: var(--ds-moss);
  vertical-align: baseline;
}
#venue-deep-dive-screen .nav-bar h2 .gsb-kw {
  background: linear-gradient(transparent 58%, var(--ds-title-block) 58%, var(--ds-title-block) 96%, transparent 96%) !important;
  padding: 0 0.08em !important; margin: 0 -0.08em !important; box-shadow: none !important; color: var(--ds-ink) !important;
}
#venue-deep-dive-screen #vdd-venue-label {
  font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; color: var(--ds-muted) !important;
  margin-left: 6px !important;
}
#venue-deep-dive-screen #vdd-freshness { color: var(--ds-muted) !important; font-size: 12px !important; }

/* ---- Command bar: one flat frost field; labels = v3 caps label ---- */
#venue-deep-dive-screen .newdev-command-bar {
  background: var(--ds-surface) !important; border: 0 !important; padding: 10px 14px !important; margin-top: 14px;
}
#venue-deep-dive-screen .newdev-command-bar .cmdbar-label {
  font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.08em !important;
  text-transform: uppercase; color: var(--ds-muted) !important;
}
#venue-deep-dive-screen .newdev-command-bar .cmdbar-divider { background: var(--ds-rule-strong) !important; opacity: 0.5; }
#venue-deep-dive-screen #vdd-store-count { font-size: 11px !important; color: var(--ds-fg-3) !important; }

/* filter triggers + venue pill: tonal snow fill on the frost bar */
#venue-deep-dive-screen .sf-trigger,
#venue-deep-dive-screen #vdd-venue-pill,
#venue-deep-dive-screen #vdd-sticky-bar .vsb-pill {
  background: var(--ds-snow) !important; border: 0 !important; color: var(--ds-ink) !important;
  font-weight: 500 !important;
}
#venue-deep-dive-screen .sf-trigger:hover, #venue-deep-dive-screen #vdd-venue-pill:hover { background: var(--ds-mist) !important; }
#venue-deep-dive-screen .sf-trigger.open { background: var(--ds-mist) !important; }
#venue-deep-dive-screen .sf-trigger .sf-tcaret { color: var(--ds-muted); }
#venue-deep-dive-screen .sf-dot { width: 8px !important; height: 8px !important; }
#venue-deep-dive-screen #vdd-venue-pill button { color: var(--ds-muted) !important; }
#venue-deep-dive-screen #vdd-venue-pill button:hover { background: var(--ds-mist) !important; color: var(--ds-ink) !important; }
#venue-deep-dive-screen #vdd-venue-display { color: var(--ds-ink) !important; font-weight: 600 !important; }
/* popovers: snow panel, hairline, no shadow */
#venue-deep-dive-screen .sf-popover { background: var(--ds-snow) !important; border: 1px solid var(--ds-rule-strong) !important; }
#venue-deep-dive-screen .sf-popover button { color: var(--ds-ink); }
#venue-deep-dive-screen .sf-seg button { border-color: var(--ds-mist) !important; }

/* buttons in the bar: secondary = mist fill, primary = moss */
#venue-deep-dive-screen #vdd-custom-list-toggle,
#venue-deep-dive-screen #vdd-visit-report-btn,
#venue-deep-dive-screen #vdd-sticky-bar #vsb-custom,
#venue-deep-dive-screen #vdd-sticky-bar #vsb-top {
  background: var(--ds-mist) !important; color: var(--ds-ink) !important; border: 0 !important;
  font-weight: 500 !important; font-size: 12px !important; padding: 7px 12px !important; height: auto;
}
#venue-deep-dive-screen #vdd-visit-report-btn { background: var(--ds-moss) !important; color: var(--ds-on-accent) !important; }
#venue-deep-dive-screen #vdd-visit-report-btn:hover { background: var(--ds-forest) !important; }
#venue-deep-dive-screen #vdd-custom-list-toggle:hover,
#venue-deep-dive-screen #vdd-sticky-bar #vsb-custom:hover,
#venue-deep-dive-screen #vdd-sticky-bar #vsb-top:hover { background: var(--ds-sage) !important; }
#venue-deep-dive-screen #vdd-reset-btn,
#venue-deep-dive-screen #vdd-sticky-bar #vsb-reset {
  background: rgba(181, 83, 46, 0.12) !important; color: var(--ds-danger-text) !important; border: 0 !important;
  font-weight: 600 !important; font-size: 12px !important; padding: 7px 12px !important;
}
#venue-deep-dive-screen #vdd-custom-badge { background: var(--ds-moss) !important; color: var(--ds-on-accent) !important; }
#venue-deep-dive-screen #vdd-custom-panel { background: var(--ds-surface) !important; border: 0 !important; }
#venue-deep-dive-screen #vdd-custom-panel input,
#venue-deep-dive-screen #vdd-custom-panel select,
#venue-deep-dive-screen #vdd-avail-list,
#venue-deep-dive-screen #vdd-selected-list { background: var(--ds-snow) !important; border: 0 !important; border-bottom: 1px solid var(--ds-rule-strong) !important; }
#venue-deep-dive-screen #vdd-apply-btn { background: var(--ds-moss) !important; color: var(--ds-on-accent) !important; }

/* ---- Section chips (in-flow + sticky): plain text tabs, moss underline when active ---- */
#venue-deep-dive-screen #vdd-section-nav { border-bottom: 1px solid var(--ds-rule) !important; margin-top: 10px !important; }
#venue-deep-dive-screen #vdd-section-nav button,
#venue-deep-dive-screen #vdd-sticky-bar .vsb-chips button {
  font-size: 12.5px !important; font-weight: 500 !important; color: var(--ds-muted) !important; padding: 8px 10px 9px !important;
}
#venue-deep-dive-screen #vdd-section-nav button:hover,
#venue-deep-dive-screen #vdd-sticky-bar .vsb-chips button:hover { background: var(--ds-surface) !important; color: var(--ds-ink) !important; }
#venue-deep-dive-screen #vdd-section-nav button.active,
#venue-deep-dive-screen #vdd-sticky-bar .vsb-chips button.active {
  color: var(--ds-ink) !important; background: transparent !important; border-bottom-color: var(--ds-moss) !important;
}
#venue-deep-dive-screen #vdd-sticky-bar {
  background: rgba(246, 247, 243, 0.97) !important; border-bottom: 1px solid var(--ds-rule) !important;
  box-shadow: none !important;
}
#venue-deep-dive-screen #vdd-sticky-bar .vsb-mark { font-weight: 600 !important; font-size: 15px !important; letter-spacing: -0.02em; color: var(--ds-ink) !important; }
#venue-deep-dive-screen #vdd-sticky-bar .vsb-mark span {
  display: inline-block; width: 0.19em; height: 0.19em; margin: 0 0.24em 0 0.05em; background: var(--ds-moss);
  color: transparent !important; overflow: hidden; vertical-align: baseline; font-size: inherit;
}
#venue-deep-dive-screen #vdd-jump-rail button { border: 0 !important; background: var(--ds-surface) !important; color: var(--ds-fg-2) !important; font-weight: 500 !important; }
#venue-deep-dive-screen #vdd-jump-rail button.active { background: var(--ds-moss) !important; color: var(--ds-on-accent) !important; }

/* ---- Cards: flat frost fields on snow, no border ---- */
#venue-deep-dive-screen .card {
  background: var(--ds-surface) !important; border: 0 !important;
}
/* ...and anything nested that used to be a white card is snow (one tonal step) */
#venue-deep-dive-screen .card .card { background: var(--ds-snow) !important; }

/* Section titles (the uppercase "P&L TABLES: ENTIRE PORTFOLIO" rows): v3 card title */
#venue-deep-dive-screen .card > h3,
#venue-deep-dive-screen .card > div > h3,
#venue-deep-dive-screen .vdd-sec-headrow {
  font-family: var(--ds-font) !important; font-size: 24px !important; font-weight: 600 !important;
  letter-spacing: -0.025em !important; line-height: 1.15 !important; text-transform: none !important;
  color: var(--ds-ink) !important;
}
#venue-deep-dive-screen .card > h3 > span[style*="linear-gradient"],
#venue-deep-dive-screen .card > div > h3 > span[style*="linear-gradient"],
#venue-deep-dive-screen .vdd-sec-headrow > span[style*="linear-gradient"],
#venue-deep-dive-screen h4 > span[style*="linear-gradient"],
#venue-deep-dive-screen h3 span[style*="linear-gradient(transparent"] {
  background: none !important; padding: 0 !important;
}
#venue-deep-dive-screen h4 { font-family: var(--ds-font) !important; letter-spacing: -0.01em; }
/* The old leaf "highlighter" sat under every sub-heading. v3 keeps ONE half
   highlight on the page (the title); everywhere else it goes. */
#venue-deep-dive-screen > div:not(.nav-bar) [style*="linear-gradient(transparent" i],
#venue-deep-dive-screen #vdd-rank-section .vsr-title > span { background: none !important; }

/* Section and sub-section titles were 15-17px / 800 / UPPERCASE. v3: sentence
   case, 600, tracked tight. (Small 500-weight caps labels are left alone.) */
#venue-deep-dive-screen h3[style*="text-transform:uppercase" i][style*="font-weight:800" i],
#venue-deep-dive-screen h3[style*="text-transform: uppercase" i][style*="font-weight: 800" i],
#venue-deep-dive-screen #vdd-rank-section .vsr-title {
  font-size: 24px !important; font-weight: 600 !important; letter-spacing: -0.025em !important;
  text-transform: none !important; line-height: 1.15 !important; color: var(--ds-ink) !important;
}
#venue-deep-dive-screen h4[style*="text-transform:uppercase" i][style*="font-weight:800" i],
#venue-deep-dive-screen h4[style*="text-transform: uppercase" i][style*="font-weight: 800" i] {
  font-size: 17px !important; font-weight: 600 !important; letter-spacing: -0.015em !important;
  text-transform: none !important; color: var(--ds-ink) !important;
}

/* ---- Tables: tabular figures, hairlines ---- */
#venue-deep-dive-screen table { font-variant-numeric: tabular-nums lining-nums; }
#venue-deep-dive-screen td, #venue-deep-dive-screen th { border-color: var(--ds-rule) !important; }

/* ---- Bridge for SHARED renderers (pnl-tables.js, the P&L portal, filter-bar.js).
   Their inline colours stay warm on other tabs; inside this screen they read v3.
   Kept to the colours those renderers actually use. ---- */
#venue-deep-dive-screen [style*="background:#221E18" i], #venue-deep-dive-screen [style*="background: #221E18" i],
#venue-deep-dive-screen [style*="background-color:#221E18" i], #venue-deep-dive-screen [style*="background-color: #221E18" i] {
  background: var(--ds-pine) !important; color: var(--ds-snow) !important;
}
#venue-deep-dive-screen [style*="background:#6F695B" i], #venue-deep-dive-screen [style*="background: #6F695B" i] {
  background: var(--ds-forest) !important;
}
#venue-deep-dive-screen [style*="background:#EDE7DA" i], #venue-deep-dive-screen [style*="background: #EDE7DA" i],
#venue-deep-dive-screen [style*="background:#F3EEE3" i], #venue-deep-dive-screen [style*="background: #F3EEE3" i],
#venue-deep-dive-screen [style*="background:#EFE9DC" i], #venue-deep-dive-screen [style*="background: #EFE9DC" i] {
  background: var(--ds-mist) !important;
}
#venue-deep-dive-screen [style*="background:#fff" i], #venue-deep-dive-screen [style*="background: #fff" i],
#venue-deep-dive-screen [style*="background:white" i], #venue-deep-dive-screen [style*="background: white" i],
#venue-deep-dive-screen [style*="background:#FDFCF9" i], #venue-deep-dive-screen [style*="background: #FDFCF9" i] {
  background: var(--ds-snow) !important;
}
#venue-deep-dive-screen [style*="background:#E8E0D1" i], #venue-deep-dive-screen [style*="background: #E8E0D1" i] {
  background: var(--ds-mist) !important;
}
#venue-deep-dive-screen [style*="background:#2F6B45" i], #venue-deep-dive-screen [style*="background: #2F6B45" i] {
  background: var(--ds-moss) !important;
}
#venue-deep-dive-screen [style*="#E8E0D1" i], #venue-deep-dive-screen [style*="#D8CFBA" i] { border-color: var(--ds-mist) !important; }
#venue-deep-dive-screen [style^="color:#2F6B45" i], #venue-deep-dive-screen [style*=";color:#2F6B45" i],
#venue-deep-dive-screen [style*="; color:#2F6B45" i], #venue-deep-dive-screen [style*=" color: #2F6B45" i] { color: var(--ds-accent-text) !important; }
#venue-deep-dive-screen [style^="color:#B5532E" i], #venue-deep-dive-screen [style*=";color:#B5532E" i],
#venue-deep-dive-screen [style*="; color:#B5532E" i], #venue-deep-dive-screen [style*=" color: #B5532E" i] { color: var(--ds-danger-text) !important; }
#venue-deep-dive-screen [style^="color:#6F695B" i], #venue-deep-dive-screen [style*=";color:#6F695B" i],
#venue-deep-dive-screen [style*="; color:#6F695B" i], #venue-deep-dive-screen [style*=" color: #6F695B" i] { color: var(--ds-muted) !important; }
#venue-deep-dive-screen [style^="color:#8A8171" i], #venue-deep-dive-screen [style*=";color:#8A8171" i],
#venue-deep-dive-screen [style*="; color:#8A8171" i], #venue-deep-dive-screen [style*=" color: #8A8171" i] { color: var(--ds-fg-3) !important; }
#venue-deep-dive-screen [style^="color:#221E18" i], #venue-deep-dive-screen [style*=";color:#221E18" i],
#venue-deep-dive-screen [style*="; color:#221E18" i], #venue-deep-dive-screen [style*=" color: #221E18" i] { color: var(--ds-ink) !important; }

/* ---- Phones ---- */
@media (max-width: 600px) {
  #venue-deep-dive-screen .nav-bar { padding: 12px 12px 0 !important; }
  #venue-deep-dive-screen .nav-bar h2 { font-size: 26px !important; }
  #venue-deep-dive-screen .newdev-command-bar { padding: 8px 10px !important; }
  #venue-deep-dive-screen .card > h3, #venue-deep-dive-screen .card > div > h3, #venue-deep-dive-screen .vdd-sec-headrow { font-size: 20px !important; }
}