/* ===== Reset & Variables ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* ─── Vantic Design System v2 (Phase A: 2026-04-17) ───────────────────
     New token layer for a more modern aesthetic. Legacy tokens below are
     kept + aliased to the new ones so existing CSS keeps working.
  */

  /* Layered surfaces — aliased onto the canonical --vnt-* tokens (Phase 2
     token consolidation, 2026-06-11). --vnt-* is the single source of truth;
     these names survive only so older CSS keeps working. */
  --surface-0: var(--vnt-bg);
  --surface-1: var(--vnt-bg-2);
  --surface-2: var(--vnt-bg-3);
  --surface-3: var(--vnt-panel-2);
  --surface-hover: var(--vnt-panel-2);
  --surface-glass: rgba(255, 255, 255, 0.78);

  /* Text (3 tiers) */
  --text-hi: var(--vnt-text);
  --text-mid: var(--vnt-text-dim);
  --text-lo: var(--vnt-text-faint);

  /* Stacking scale. Values preserve the pre-token order exactly; pick the
     tier by role instead of outbidding the last literal. --z-capture is the
     html2canvas capture root, which must escape every stacking context. */
  --z-dropdown: 4000;
  --z-sticky-banner: 9000;
  --z-overlay: 9999;
  --z-modal: 10000;
  --z-popover: 10020;
  --z-top: 12000;
  --z-capture: 2147483000;

  /* Brand accents */
  --accent: var(--vnt-accent);
  --accent-glow: rgba(89, 128, 166, 0.28);
  --accent-2: var(--vnt-coral);
  --accent-3: var(--vnt-accent-2);
  --violet: var(--vnt-info);
  --violet-glow: rgba(142, 167, 255, 0.28);

  /* Gradients */
  /* R3: gradients are out — one solid steel primary, hover one ramp step deeper */
  --gradient-cta: var(--vnt-accent);
  --gradient-cta-hover: var(--vnt-accent-600);
  --gradient-hero: radial-gradient(ellipse 80% 50% at 18% 0%, rgba(89, 128, 166,0.18), transparent 60%),
                   radial-gradient(ellipse 60% 40% at 82% 100%, rgba(255,123,143,0.13), transparent 60%),
                   radial-gradient(ellipse 50% 40% at 52% 54%, rgba(255,209,102,0.07), transparent 60%);

  /* Motion */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear:   linear;
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  /* Elevation — layered shadows, Linear-style */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 8px -2px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.3);
  --shadow-lg: 0 16px 32px -12px rgba(0,0,0,0.6), 0 4px 8px -4px rgba(0,0,0,0.3);
  --shadow-xl: 0 32px 64px -16px rgba(0,0,0,0.7), 0 8px 16px -8px rgba(0,0,0,0.4);
  --shadow-glow:       0 0 0 1px var(--accent-glow), 0 8px 32px var(--accent-glow);
  --shadow-glow-violet: 0 0 0 1px var(--violet-glow), 0 8px 32px var(--violet-glow);
  --shadow-inset-hi: inset 0 1px 0 0 rgba(255,255,255,0.06);

  /* Radii */
  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-xs: 6px;

  /* Typography — two faces */
  --font-serif: "Instrument Serif", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ─── Legacy tokens (kept for backwards compat — DO NOT reuse in new CSS) ─── */
  --bg-dark: var(--surface-0);
  --bg-panel: var(--surface-1);
  --bg-card: var(--surface-2);
  --bg-card-hover: var(--surface-3);
  --bg-input: var(--surface-0);
  --text-primary: var(--text-hi);
  --text-secondary: var(--text-mid);
  --text-muted: var(--text-lo);
  --border-color: var(--vnt-border);
  --green: var(--vnt-success);
  --green-bg: rgba(63, 122, 88, 0.14);
  --yellow: var(--vnt-accent-2);
  --yellow-bg: rgba(255, 209, 102, 0.15);
  --red: #da3633;
  --red-bg: rgba(218, 54, 51, 0.15);
  --blue: var(--accent);
  --blue-bg: rgba(89, 128, 166, 0.14);
  --magenta: var(--vnt-coral);
  --magenta-bg: rgba(255, 123, 143, 0.14);
  --orange: #ff9f5a;
  --orange-bg: rgba(255, 159, 90, 0.14);
  --font: var(--font-sans);
  --panel-radius: var(--radius-card);
  --top-bar-height: 52px;
  --strip-height: 56px;
  --handle-height: 24px;
  --collapsed-height: calc(var(--handle-height) + var(--strip-height));
  --half-height: 45vh;
  --full-height: calc(100vh - var(--top-bar-height) - 8px);
  --sidebar-width: 220px;
  --mobile-nav-height: 56px;
}

/* ─── Phase A motion utilities ────────────────────────────────────── */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer-slide {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91,140,255,0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(91,140,255,0.15); }
}

.fade-up {
  animation: fade-up var(--dur-slow) var(--ease-out-soft) both;
}

.scale-in {
  animation: scale-in var(--dur-slow) var(--ease-spring) both;
}

.shimmer {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,0.06) 50%,
      transparent 100%),
    var(--surface-2);
  background-size: 200% 100%, 100% 100%;
  animation: shimmer-slide 1.4s linear infinite;
}

/* Stagger helper — apply to parent to animate children with 40ms offset */
.stagger-children > * {
  animation: fade-up var(--dur-slow) var(--ease-out-soft) both;
}
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 40ms; }
.stagger-children > *:nth-child(3) { animation-delay: 80ms; }
.stagger-children > *:nth-child(4) { animation-delay: 120ms; }
.stagger-children > *:nth-child(5) { animation-delay: 160ms; }
.stagger-children > *:nth-child(6) { animation-delay: 200ms; }
.stagger-children > *:nth-child(7) { animation-delay: 240ms; }
.stagger-children > *:nth-child(8) { animation-delay: 280ms; }

/* Reduced motion — kill all fancy animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-up, .scale-in, .shimmer, .stagger-children > * {
    animation: none !important;
  }
}

/* ─── Glass utility ─────────────────────────────────────────────────── */

.glass {
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow-lg), var(--shadow-inset-hi);
  border-radius: var(--radius-card);
}

/* Hover lift — apply to any card/tile */
.lift {
  transition: transform var(--dur-base) var(--ease-out-soft),
              box-shadow var(--dur-base) var(--ease-out-soft);
}
.lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Vantic brand wordmark */
.brand-wordmark {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* LAANC ceiling labels — small white numbers centered on each grid cell */
.laanc-ceiling-label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.7) !important;
  pointer-events: none !important;
  padding: 0 !important;
  white-space: nowrap !important;
}
.laanc-ceiling-label::before { border: none !important; display: none !important; }

/* Serif section header — used in TowerView sidebar sections, settings groups */
.section-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--text-hi);
  line-height: 1.2;
}

/* Pin drop animation — spring-y bounce when a new pin lands on the map */
@keyframes pin-drop {
  0%   { transform: translateY(-24px) scale(0.6); opacity: 0; }
  60%  { transform: translateY(4px) scale(1.08); opacity: 1; }
  80%  { transform: translateY(-1px) scale(0.98); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.pin-drop {
  animation: pin-drop 420ms var(--ease-spring) both;
}

/* Pin drop glow ripple — pulse outward from a pin location */
@keyframes pin-ripple {
  0%   { transform: scale(0.3); opacity: 0.8; }
  100% { transform: scale(2.8); opacity: 0; }
}

.pin-ripple {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  pointer-events: none;
  animation: pin-ripple 700ms var(--ease-out-soft) both;
}

html {
  scroll-behavior: smooth;
}

html, body {
  height: 100%;
  font-family: var(--font-sans);
  background: var(--bg-dark);
  color: var(--text-primary);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.hidden { display: none !important; }

/* ===== Public Landing ===== */
.landing-page {
  /* DS deep-steel field: the hero is the ONE full-bleed dark section, so
     type reverses to paper here — a scoped token flip, not a second skin.
     The legacy aliases (--text-hi etc.) must be RE-DECLARED here: a custom
     property's var() resolves at its definition scope, so the :root aliases
     froze onto the paper values and would ignore this flip. */
  --vnt-text: #f4f6f8;
  --vnt-text-dim: #c3ccd4;
  --vnt-text-faint: #93a0ab;
  --vnt-border: rgba(255, 255, 255, 0.18);
  --vnt-border-2: rgba(255, 255, 255, 0.28);
  --vnt-panel: #10151a;
  --vnt-panel-2: #171e25;
  --vnt-bg: #07080c;
  --vnt-bg-2: #0b0e13;
  --vnt-bg-3: #12171d;
  --vnt-chip: rgba(16, 21, 26, 0.88);
  --text-hi: var(--vnt-text);
  --text-mid: var(--vnt-text-dim);
  --text-lo: var(--vnt-text-faint);
  --text-primary: var(--vnt-text);
  --text-secondary: var(--vnt-text-dim);
  --text-muted: var(--vnt-text-faint);
  --surface-0: var(--vnt-bg);
  --surface-1: var(--vnt-bg-2);
  --surface-2: var(--vnt-bg-3);
  --surface-3: var(--vnt-panel-2);
  --surface-hover: var(--vnt-panel-2);
  --bg-dark: var(--vnt-bg);
  --bg-panel: var(--vnt-bg-2);
  --bg-card: var(--vnt-bg-3);
  --bg-card-hover: var(--vnt-panel-2);
  --bg-input: var(--vnt-bg);
  --border-color: var(--vnt-border);
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    #07080c;
  background-size: 44px 44px, 44px 44px, auto;
  color: var(--text-hi);
}

.landing-page a {
  color: inherit;
  text-decoration: none;
}

.landing-hero,
.landing-section,
.landing-band,
.landing-ops {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.landing-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 0 48px;
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 48px;
}

.landing-brand,
.landing-nav-links,
.landing-actions,
.landing-proof,
.landing-product-top {
  display: flex;
  align-items: center;
}

.landing-brand {
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.landing-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--gradient-cta);
  color: #031014;
  font-weight: 900;
}

.landing-nav-links {
  gap: 22px;
  color: var(--text-mid);
  font-size: 13px;
}

.landing-nav-links a:hover,
.landing-login:hover {
  background: rgba(21, 49, 59, 0.92);
  border-color: rgba(89, 128, 166, 0.34);
  color: #f4fbff;
}

.landing-login {
  min-width: 88px;
  padding: 10px 14px;
  border: 1px solid rgba(132, 185, 196, 0.20);
  border-radius: 8px;
  color: var(--text-hi);
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  background: rgba(13, 35, 45, 0.72);
}

.landing-hero-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.86fr) minmax(560px, 1.18fr);
  align-items: center;
  gap: 48px;
  padding: 52px 0 24px;
}

.landing-copy {
  max-width: 560px;
}

.landing-kicker {
  margin-bottom: 14px;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-copy h1 {
  margin: 0 0 18px;
  font-family: var(--font-serif);
  font-size: clamp(72px, 9vw, 128px);
  line-height: 0.86;
  letter-spacing: 0;
  font-weight: 400;
}

.landing-lede,
.landing-section-copy p {
  color: var(--text-mid);
  font-size: 18px;
  line-height: 1.55;
}

.landing-actions {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.landing-primary {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: 800 14px/1 var(--font-sans);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out-soft),
              border-color var(--dur-base) var(--ease-out-soft),
              background var(--dur-base) var(--ease-out-soft);
}

.landing-primary {
  background: var(--gradient-cta);
  color: #031014;
  min-width: 138px;
  box-shadow: 0 12px 32px rgba(89, 128, 166, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.landing-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05) saturate(1.04);
}

.landing-primary:disabled {
  cursor: progress;
  opacity: 0.78;
  transform: none;
}

.landing-error {
  min-height: 20px;
  margin-top: 12px;
  color: #ff9aa5;
  font-size: 13px;
  opacity: 0;
}

.landing-error.visible {
  opacity: 1;
}

.landing-proof {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.landing-proof span {
  cursor: default;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-mid);
  font-size: 12px;
}

.landing-proof strong {
  color: var(--text-hi);
}

.landing-product {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  overflow: hidden;
  background: #0b0f16;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
}

.landing-product-top {
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-mid);
  font: 700 12px/1 var(--font-mono);
}

.landing-product-top span:first-child {
  color: #071014;
  background: var(--accent-2);
  border-radius: 6px;
  padding: 5px 7px;
}

.landing-product-top span:last-child {
  color: #79dc87;
}

.landing-product-body {
  min-height: 430px;
  display: grid;
  grid-template-columns: 170px 1fr 220px;
}

.landing-shot-list,
.landing-view-preview {
  background: #111821;
}

.landing-shot-list {
  padding: 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-panel-title {
  color: var(--text-lo);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 12px;
}

.landing-stack,
.landing-shot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-mid);
}

.landing-stack {
  min-height: 34px;
  padding: 0 10px;
  margin-bottom: 10px;
  font: 800 12px/1 var(--font-mono);
  text-transform: uppercase;
}

.landing-stack.active {
  color: #f5bf4d;
  border-color: rgba(245, 191, 77, 0.32);
}

.landing-shot {
  min-height: 35px;
  padding: 0 10px;
  margin-bottom: 7px;
  font: 700 12px/1 var(--font-mono);
}

.landing-shot.active {
  color: var(--accent-2);
  border-color: rgba(89, 128, 166, 0.42);
  background: rgba(89, 128, 166, 0.08);
}

.landing-shot b {
  color: var(--text-hi);
  font-weight: 800;
}

.landing-brief-cta {
  display: grid;
  place-items: center;
  min-height: 38px;
  margin-top: 14px;
  border-radius: 8px;
  background: var(--accent-2);
  color: #071014;
  font-size: 12px;
  font-weight: 900;
}

.landing-map-preview {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  background:
    linear-gradient(rgba(89, 128, 166, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 140, 255, 0.09) 1px, transparent 1px),
    #080d11;
  background-size: 56px 56px, 56px 56px, auto;
}

.landing-grid-lines {
  position: absolute;
  inset: 24px;
  border: 1px dashed rgba(89, 128, 166, 0.18);
}

.landing-footprint {
  position: absolute;
  left: 33%;
  top: 32%;
  width: 220px;
  height: 150px;
  display: grid;
  place-items: start center;
  padding-top: 14px;
  transform: rotate(-12deg);
  border: 3px solid #e6bd54;
  background: rgba(230, 189, 84, 0.25);
  color: #f4c95f;
  font: 900 13px/1 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.landing-fov {
  position: absolute;
  left: 48%;
  top: 48%;
  width: 180px;
  height: 180px;
  transform: translate(-48%, -44%) rotate(90deg);
  clip-path: polygon(50% 50%, 4% 8%, 4% 92%);
  background: rgba(89, 128, 166, 0.14);
  border-left: 2px solid rgba(89, 128, 166, 0.45);
}

.landing-pin {
  position: absolute;
  left: 49%;
  top: 50%;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 4px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background: rgba(8, 13, 17, 0.76);
  color: var(--accent-2);
  font: 900 15px/1 var(--font-mono);
}

.landing-map-pill {
  position: absolute;
  left: 24px;
  top: 24px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(89, 128, 166, 0.25);
  background: rgba(10, 19, 22, 0.76);
  color: #7bdc8b;
  font: 800 12px/1 var(--font-mono);
}

.landing-view-preview {
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-sky {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  background:
    linear-gradient(#17304a 0%, #6d8594 78%, #241d16 79%, #0d0d0e 100%);
}

.landing-tower {
  position: absolute;
  right: 42px;
  bottom: 28px;
  width: 76px;
  height: 132px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 10px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  background: #1d2734;
}

.landing-tower span {
  background: #3b485a;
  min-height: 9px;
}

.landing-tower span:nth-child(14),
.landing-tower span:nth-child(15),
.landing-tower span:nth-child(16) {
  background: var(--accent-2);
}

.landing-lens {
  position: absolute;
  right: 26px;
  bottom: 54px;
  width: 136px;
  height: 136px;
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
}

.landing-controls {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.landing-controls div:not(.landing-slider) {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  color: var(--text-mid);
  font: 700 12px/1 var(--font-mono);
}

.landing-controls strong {
  color: var(--text-hi);
  font-size: 18px;
}

.landing-slider {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.20);
}

.landing-slider i {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-2);
}

.landing-section {
  padding: 72px 0;
}

.landing-section-copy {
  max-width: 720px;
  margin-bottom: 28px;
}

.landing-section h2,
.landing-band h2 {
  max-width: 760px;
  margin: 0 0 14px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.02;
  letter-spacing: 0;
}

.landing-feature-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.landing-feature-row article,
.landing-metric {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.landing-feature-row article {
  padding: 22px;
}

.landing-feature-row span {
  color: var(--accent-2);
  font: 900 12px/1 var(--font-mono);
}

.landing-feature-row h3 {
  margin: 18px 0 8px;
  font-size: 18px;
}

.landing-feature-row p,
.landing-metric span {
  color: var(--text-mid);
  line-height: 1.5;
  font-size: 14px;
}

.landing-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 44px;
  border-radius: 8px;
  background: #111821;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.landing-ops {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 72px 0 96px;
}

.landing-metric {
  padding: 24px;
}

.landing-metric strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text-hi);
  font: 900 28px/1 var(--font-mono);
}

@media (max-width: 980px) {
  .landing-hero-grid {
    grid-template-columns: 1fr;
    padding-top: 34px;
  }

  .landing-product-body {
    grid-template-columns: 150px 1fr;
  }

  .landing-view-preview {
    display: none;
  }
}

@media (max-width: 720px) {
  .landing-hero,
  .landing-section,
  .landing-band,
  .landing-ops {
    width: min(100% - 28px, 1180px);
  }

  .landing-hero {
    padding-top: 18px;
  }

  .landing-nav-links {
    display: none;
  }

  .landing-hero-grid {
    gap: 28px;
  }

  .landing-copy h1 {
    font-size: clamp(62px, 20vw, 86px);
  }

  .landing-lede,
  .landing-section-copy p {
    font-size: 16px;
  }

  .landing-product-body {
    grid-template-columns: 1fr;
  }

  .landing-shot-list {
    display: none;
  }

  .landing-map-preview {
    min-height: 360px;
  }

  .landing-footprint {
    left: 24%;
    width: 190px;
  }

  .landing-feature-row,
  .landing-ops {
    grid-template-columns: 1fr;
  }

  .landing-band {
    align-items: flex-start;
    flex-direction: column;
    padding: 26px;
  }
}

/* Interactive landing scene */
.landing-flight-hero {
  width: 100%;
  min-height: 88vh;
  margin: 0;
  padding: 22px clamp(20px, 4vw, 56px) 46px;
  position: relative;
  justify-content: flex-start;
  overflow: hidden;
  background: #07080c;
}

.landing-flight-canvas,
.landing-scene-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.landing-flight-canvas {
  z-index: 0;
  cursor: crosshair;
}

.landing-scene-shade {
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 44%, rgba(89, 128, 166, 0.08), transparent 28%),
    linear-gradient(90deg, rgba(7, 8, 12, 0.88) 0%, rgba(7, 8, 12, 0.48) 42%, rgba(7, 8, 12, 0.12) 100%),
    linear-gradient(0deg, rgba(7, 8, 12, 0.72) 0%, rgba(7, 8, 12, 0) 42%);
}

.landing-flight-hero .landing-nav,
.landing-flight-hero .landing-copy,
.landing-flight-hud,
.landing-planner-panel {
  position: relative;
  z-index: 2;
}

.landing-cursor-reticle {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 42%;
  width: 58px;
  height: 58px;
  pointer-events: none;
  opacity: 0.58;
  transform: translate(-50%, -50%);
  transition: opacity 0.18s ease, filter 0.18s ease;
  filter: drop-shadow(0 0 16px rgba(89, 128, 166,0.32));
}

.landing-cursor-reticle.is-active {
  opacity: 1;
  filter: drop-shadow(0 0 22px rgba(89, 128, 166,0.52));
}

.landing-cursor-reticle span {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255,209,102,0.82);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(89, 128, 166,0.22);
  animation: landingReticlePulse 1.8s ease-in-out infinite;
}

.landing-cursor-reticle b {
  position: absolute;
  left: 50%;
  /* Sits clear of the camera-view cone the canvas draws below the
     reticle — at +7px the label covered the view. */
  top: calc(100% + 22px);
  transform: translateX(-50%);
  padding: 3px 6px;
  border: 1px solid rgba(89, 128, 166,0.28);
  border-radius: 999px;
  color: rgba(244,251,255,0.82);
  background: rgba(4,16,22,0.66);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

@keyframes landingReticlePulse {
  0%, 100% { transform: scale(0.92); opacity: 0.72; }
  50% { transform: scale(1.12); opacity: 1; }
}

.landing-flight-hero .landing-nav {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.landing-flight-hero .landing-nav-links {
  display: none;
}

.landing-nav-links button {
  color: var(--text-mid);
  border: 0;
  background: transparent;
  font: 700 13px/1 var(--font-sans);
  cursor: pointer;
}

.landing-nav-links button:hover {
  color: var(--text-hi);
}

.landing-flight-hero .landing-copy {
  width: min(500px, 100%);
  margin: clamp(70px, 14vh, 138px) 0 0 max(0px, calc((100vw - 1180px) / 2));
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.52);
}

.landing-flight-hero .landing-copy h1 {
  font-size: clamp(66px, 10vw, 132px);
}

.landing-flight-hero .landing-lede {
  max-width: 450px;
  color: #d6dde8;
}

.landing-flight-hud {
  position: absolute;
  top: 94px;
  right: clamp(20px, 4vw, 56px);
  display: grid;
  gap: 7px;
  min-width: 164px;
  padding: 12px 14px;
  border: 1px solid rgba(89, 128, 166, 0.18);
  border-radius: 8px;
  background: rgba(7, 10, 14, 0.48);
  color: #d6dde8;
  font: 800 12px/1.2 var(--font-mono);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.landing-flight-hud span:last-child {
  color: #7bdc8b;
}

.landing-motion-btn {
  width: 100%;
  border: 1px solid rgba(89, 128, 166, 0.44);
  border-radius: 999px;
  padding: 7px 10px;
  background: linear-gradient(135deg, #31ddd4 0%, #9af2cf 58%, #f3d86c 100%);
  color: #061019;
  box-shadow: 0 12px 28px rgba(89, 128, 166, 0.18);
  cursor: pointer;
  font: 950 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-motion-btn:disabled {
  cursor: wait;
  filter: saturate(0.72);
  opacity: 0.78;
}

.landing-cursor-reticle.is-motion {
  filter: drop-shadow(0 0 24px rgba(255, 209, 102, 0.52)) drop-shadow(0 0 16px rgba(89, 128, 166, 0.42));
}

.landing-cursor-reticle.is-motion span {
  border-color: rgba(89, 128, 166, 0.94);
}

.landing-planner-panel {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(24px, 4vh, 44px);
  transform: none;
  width: min(430px, 42vw);
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(89, 128, 166, 0.24);
  background:
    linear-gradient(180deg, rgba(9, 26, 36, 0.94), rgba(4, 12, 18, 0.96)),
    #05080d;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.landing-planner-top,
.landing-planner-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  color: var(--text-mid);
  font: 800 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
}

.landing-planner-top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 8, 13, 0.62);
}

.landing-planner-addr,
.landing-planner-laanc,
.landing-planner-pin,
.landing-planner-brief {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 3px 7px;
  border: 1px solid rgba(244, 251, 255, 0.14);
  border-radius: 4px;
  background: rgba(6, 23, 31, 0.56);
  color: #d6dde8;
}

.landing-planner-laanc,
.landing-planner-brief {
  color: var(--vnt-success);
  border-color: rgba(63, 122, 88, 0.34);
  background: rgba(63, 122, 88, 0.10);
}

.landing-planner-svg {
  width: 100%;
  height: clamp(170px, 19vw, 220px);
  display: block;
}

.landing-planner-cta {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 8, 13, 0.72);
}

@media (max-width: 980px) {
  .landing-flight-hero {
    min-height: 88vh;
    padding-bottom: 46px;
  }

  .landing-scene-shade {
    background:
      linear-gradient(90deg, rgba(7, 8, 12, 0.88) 0%, rgba(7, 8, 12, 0.54) 64%, rgba(7, 8, 12, 0.30) 100%),
      linear-gradient(0deg, rgba(7, 8, 12, 0.84) 0%, rgba(7, 8, 12, 0) 44%);
  }

  .landing-flight-hud {
    display: none;
  }

  .landing-flight-hero.is-motion-permission-needed .landing-flight-hud {
    display: grid;
    top: auto;
    right: 18px;
    bottom: 18px;
    min-width: 0;
    padding: 8px;
  }

  .landing-flight-hero.is-motion-permission-needed .landing-flight-hud span {
    display: none;
  }

  .landing-flight-hero.is-motion-permission-needed .landing-motion-btn {
    min-width: 132px;
  }

  .landing-flight-hero .landing-copy {
    margin-top: clamp(70px, 14vh, 120px);
  }

  .landing-planner-panel {
    display: none;
  }
}

@media (max-width: 560px) {
  .landing-flight-hero {
    min-height: 86vh;
  }

  .landing-flight-hero .landing-copy h1 {
    font-size: clamp(58px, 20vw, 84px);
  }

  .landing-proof {
    max-width: 300px;
  }
}

/* ===== Auth Views ===== */
.auth-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background:
    var(--gradient-hero),
    var(--surface-0);
  position: relative;
  overflow: hidden;
}

.auth-wrapper::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 15% 20%, rgba(91,140,255,0.10), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(167,139,250,0.08), transparent 40%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.auth-card {
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xl), var(--shadow-inset-hi);
  padding: 40px 32px;
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 1;
  animation: fade-up var(--dur-slow) var(--ease-out-soft) both;
}

/* Apply serif to the "Vantic" wordmark in auth */
.auth-logo-icon {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.02em;
}

.auth-logo {
  text-align: center;
  margin-bottom: 32px;
}

.auth-logo-icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
}

.auth-logo-icon svg {
  color: var(--blue);
}

.auth-logo-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.form-input {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--text-hi);
  font-family: var(--font-sans);
  transition: border-color var(--dur-base) var(--ease-out-soft),
              box-shadow var(--dur-base) var(--ease-out-soft),
              background var(--dur-base) var(--ease-out-soft);
  outline: none;
}

.form-input:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  background: var(--surface-1);
}

.form-input::placeholder {
  color: var(--text-muted);
}

textarea.form-input {
  resize: vertical;
  min-height: 80px;
}

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238b949e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out-soft),
              background var(--dur-base) var(--ease-out-soft),
              color var(--dur-base) var(--ease-out-soft),
              border-color var(--dur-base) var(--ease-out-soft);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--gradient-cta);
  background-size: 200% 200%;
  background-position: 0% 0%;
  border-color: transparent;
  color: #031014;
  box-shadow: 0 12px 32px rgba(89, 128, 166, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-weight: 700;
}

.btn-primary:hover {
  background-position: 100% 100%;
  filter: brightness(1.05) saturate(1.04);
  box-shadow: var(--shadow-lg), var(--shadow-glow), var(--shadow-inset-hi);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

.btn-danger {
  background: var(--red);
  color: white;
  box-shadow: var(--shadow-md), var(--shadow-inset-hi);
}
.btn-danger:hover {
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(218,54,51,0.35), 0 8px 32px rgba(218,54,51,0.25);
  transform: translateY(-1px);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-hi);
  border: 1px solid var(--vnt-border);
}

.btn-ghost:hover {
  background: #ffffff;
  color: var(--vnt-text);
  border-color: rgba(89, 128, 166, 0.34);
}

/* Ghost on a colored banner (cert-expiry etc) — white outline reads on accent. */
.btn-ghost.on-accent {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.27);
  background: rgba(255, 255, 255, 0.08);
}

/* Tier 3 — text buttons: borderless, transparent fill (design audit
   button tiers: 1 = .btn-primary gradient CTA, 2 = .btn-ghost outline,
   3 = .btn-text). Chrome-level actions (topbar Quick PDF, topbar icon
   buttons) live at this tier; color/sizing deltas stay with the
   consumer classes. */
.btn-text {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text-mid);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.btn-text:hover {
  background: var(--vnt-bg-3);
  color: var(--text-hi);
}
.btn-text:disabled {
  opacity: 0.6;
  cursor: progress;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-full {
  width: 100%;
}

/* v387: forgot-password link + unverified-email nudge */
.auth-forgot {
  margin-top: 10px;
}

.account-verify-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 190, 90, 0.35);
  background: rgba(255, 190, 90, 0.1);
  color: #ffd479;
  font-size: 13px;
}

.auth-alt {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: var(--text-secondary);
}

.auth-alt a {
  color: var(--blue);
  text-decoration: none;
  cursor: pointer;
}

.auth-alt a:hover {
  text-decoration: underline;
}

.auth-error {
  background: var(--red-bg);
  color: var(--red);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  display: none;
}

.auth-error.visible {
  display: block;
}

/* Auth tabs (Password / Magic Link) */
.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}
.auth-tab {
  flex: 1;
  padding: 10px 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.auth-tab.active {
  background: var(--blue);
  color: #fff;
}
.auth-tab:not(.active):hover {
  background: var(--hover-bg);
}
.auth-magic-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: -4px 0 12px;
  text-align: center;
}
.auth-magic-sent {
  text-align: center;
  padding: 24px 0 8px;
}
.auth-magic-sent-icon {
  font-size: 40px;
  margin-bottom: 8px;
}
.auth-magic-sent-text {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* @mention popup */
.mention-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  max-height: 240px;
  overflow-y: auto;
  z-index: 999;
  margin-bottom: 4px;
}
.mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.mention-item:hover, .mention-item.active {
  background: var(--hover-bg);
}
.mention-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.mention-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mention-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mention-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.mention-title {
  font-size: 11px;
  color: var(--text-muted);
}
.mention-tag {
  background: rgba(88, 166, 255, 0.15);
  color: var(--blue);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95em;
}

/* ===== App Layout ===== */
.app-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ===== Sidebar ===== */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-panel);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 1100;
  transition: transform 0.3s ease;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-logo {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.sidebar-logo svg {
  color: var(--blue);
  vertical-align: middle;
  margin-right: 8px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.sidebar-link:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.sidebar-link.active {
  background: var(--blue-bg);
  color: var(--blue);
}

.sidebar-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-link .coming-soon {
  font-size: 10px;
  background: var(--bg-card);
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}

.sidebar-user {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.sidebar-avatar-img {
  object-fit: cover;
  background: var(--surface-hover);
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-email {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-logout {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

.sidebar-logout:hover {
  color: var(--red);
}

.sidebar-signin-link {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(94,234,212,0.24);
  border-radius: 8px;
  color: var(--cyan);
  background: rgba(94,234,212,0.08);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.sidebar-signin-link:hover {
  border-color: rgba(94,234,212,0.52);
  background: rgba(94,234,212,0.14);
}

/* ===== Main Content Area ===== */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ===== Top Bar ===== */
.top-bar {
  height: var(--top-bar-height);
  background: rgba(13, 17, 23, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
  z-index: 1000;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.top-bar-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.top-bar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 1;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 4px;
}

.top-bar-page-title {
  font-size: 15px;
  font-weight: 700;
}

/* ===== Notification Bell ===== */
.notif-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.notif-btn:hover {
  color: var(--text-primary);
}

.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: var(--red);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-badge.hidden { display: none; }

.user-avatar-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gradient-cta);
  color: #031014;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

/* ===== Notification Dropdown ===== */

.notif-item {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(48, 54, 61, 0.3);
}

.notif-item:hover {
  background: var(--bg-card);
}

.notif-item.unread {
  background: rgba(56, 139, 253, 0.05);
}

.notif-item-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  margin-top: 2px;
}

.notif-item-body {
  flex: 1;
  min-width: 0;
}

.notif-item-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary);
}

.notif-item-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.notif-unread-dot {
  width: 8px;
  height: 8px;
  background: var(--blue);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

.notif-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ===== Notifications Inbox Page ===== */
.notif-page {
  /* Inside a flex column, auto margins shrink-to-fit; width restores fill. */
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.notif-page-header {
  margin-bottom: 16px;
}

.notif-page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.notif-page-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}

.notif-unread-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  box-shadow: 0 0 0 1px var(--accent-glow);
}

.notif-page-actions {
  display: flex;
  gap: 8px;
}

.notif-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.notif-tab {
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

.notif-tab:hover {
  color: var(--text-primary);
}

.notif-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.notif-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notif-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 14px 14px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  border-left: 3px solid transparent;
  cursor: pointer;
  color: var(--text-secondary);
}

.notif-row-unread {
  border-left-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow);
}

.notif-row-unread .notif-title {
  color: var(--text-primary);
  font-weight: 700;
}

.notif-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(91, 140, 255, 0.12);
  color: var(--accent);
  font-size: 16px;
  line-height: 1;
}

.notif-main {
  flex: 1;
  min-width: 0;
}

.notif-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.35;
}

.notif-body {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notif-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}

@media (max-width: 640px) {
  .notif-page { padding: 16px 12px 96px; }
  .notif-page-title { font-size: 18px; }
  .notif-row { padding: 12px; }
}

/* ===== Dashboard Map View ===== */
.dashboard-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Skeleton loading rows (S6). Shimmer respects reduced-motion. */
.vnt-skeleton-list {
  display: grid;
  gap: 10px;
  padding: 18px 0;
}
.vnt-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(154, 182, 193, 0.08);
}
.vnt-skeleton-row { height: 44px; }
.vnt-skeleton-row.is-tall { height: 72px; }
.vnt-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(244, 251, 255, 0.055), transparent);
  animation: vnt-shimmer 1.3s infinite;
}
@keyframes vnt-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .vnt-skeleton::after { animation: none; }
}

/* Legend under the capture bar — colour alone carried the three states. */
.capture-legend {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  color: var(--vnt-text-dim);
  font-size: 11px;
}
.capture-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 2px;
}
.capture-legend i.is-captured { background: var(--vnt-success); }
.capture-legend i.is-reshoot { background: var(--vnt-coral); }
.capture-legend i.is-not-flown { background: rgba(154, 182, 193, 0.30); }

.notif-empty-composed {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 44px 20px;
  text-align: center;
}
.notif-empty-composed strong {
  color: var(--vnt-text);
  font-size: 15px;
}
.notif-empty-composed span {
  max-width: 46ch;
  color: var(--vnt-text-dim);
  font-size: 13px;
  line-height: 1.5;
}

/* Auth-card links that only trigger JS are buttons, styled as links. */
.auth-link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--vnt-accent);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.auth-link-btn:hover { color: var(--vnt-text); }

.cal-empty-hint {
  display: grid;
  gap: 6px;
  justify-items: center;
  margin-top: 14px;
  padding: 26px 20px;
  border: 1px dashed rgba(154, 182, 193, 0.28);
  border-radius: 10px;
  text-align: center;
}
.cal-empty-hint strong { color: var(--vnt-text); font-size: 14px; }
.cal-empty-hint span {
  max-width: 52ch;
  color: var(--vnt-text-dim);
  font-size: 12.5px;
  line-height: 1.5;
}
.cal-empty-hint .btn { margin-top: 6px; }

.projects-row-counts {
  display: block;
  margin-top: 2px;
  color: var(--vnt-text-faint);
  font-family: var(--vnt-font-mono);
  font-size: 11px;
}

/* The Height stat doubles as the direct entry: type the building's total and
   every segment's floor height scales to hit it. */
.vnt-stack-stat-input {
  width: 52px;
  padding: 1px 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: right;
  -moz-appearance: textfield;
}
.vnt-stack-stat-input::-webkit-inner-spin-button,
.vnt-stack-stat-input::-webkit-outer-spin-button { display: none; }
.vnt-stack-stat.is-editable .vnt-stack-stat-input:hover,
.vnt-stack-stat.is-editable .vnt-stack-stat-input:focus {
  border-color: var(--vnt-accent);
  background: rgba(89, 128, 166, 0.08);
  outline: none;
}
.vnt-stack-stat.is-editable > span::after {
  content: " \270E";
  font-size: 9px;
  opacity: 0.7;
}

.vnt-undo-pair { display: inline-flex; gap: 2px; margin-left: auto; }
.vnt-undo-btn {
  min-width: 34px;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1;
}
.vnt-undo-btn:disabled { opacity: 0.35; cursor: default; }

.notfound-page {
  max-width: 560px;
  margin: 12vh auto 0;
  padding: 0 24px;
  text-align: center;
}
.notfound-page h1 {
  margin: 10px 0 8px;
  color: var(--vnt-text);
  font-size: clamp(24px, 3.4vw, 34px);
  letter-spacing: -0.01em;
}
.notfound-page p { margin: 0 0 22px; }
.notfound-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Keyboard users landed in the sidebar on every route change and had to tab
   past all of it to reach the page. Visually hidden until focused. */
.vnt-skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: var(--z-top);
  padding: 10px 16px;
  border-radius: var(--vnt-radius, 8px);
  background: var(--vnt-accent);
  color: #041013;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 160ms ease;
}
.vnt-skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--vnt-text);
  outline-offset: 2px;
}
#viewContainer:focus { outline: none; }


.map-wrapper {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  overflow: hidden;
  transition: flex 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/* ===== Map Controls ===== */
.map-control-btn {
  position: absolute;
  z-index: 800;
  width: 40px;
  height: 40px;
  background: rgba(13, 35, 45, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(132, 185, 196, 0.20);
  border-radius: 10px;
  color: var(--text-hi);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.map-control-btn:hover {
  background: rgba(21, 49, 59, 0.92);
  border-color: rgba(89, 128, 166, 0.34);
  color: #f4fbff;
}

.layer-btn {
  top: 12px;
  right: 12px;
}

.recenter-btn {
  top: 62px;
  right: 12px;
}

/* ===== Layer Popover ===== */
.layer-popover {
  position: absolute;
  top: 56px;
  right: 12px;
  z-index: 900;
  background: rgba(22, 27, 34, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
  width: 200px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.layer-popover-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vnt-text);
  margin-bottom: 10px;
}

.layer-section {
  margin-bottom: 10px;
}

.layer-section:last-child {
  margin-bottom: 0;
}

.layer-section-label {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  color: var(--vnt-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}

.layer-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
}

.layer-option:hover {
  background: rgba(255, 255, 255, 0.05);
}

.layer-option input {
  accent-color: var(--blue);
}

/* ===== Bottom Panel ===== */
.bottom-panel {
  flex: 0 0 auto;
  position: relative;
  z-index: 900;
  background: rgba(22, 27, 34, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-color);
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bottom-panel.collapsed {
  height: var(--collapsed-height);
}

.bottom-panel.half {
  height: 45%;
}

.bottom-panel.full {
  height: 75%;
}

/* ===== Drag Handle ===== */
.drag-handle {
  height: var(--handle-height);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
}

.drag-handle:active {
  cursor: grabbing;
}

.drag-handle-bar {
  width: 36px;
  height: 4px;
  background: var(--text-muted);
  border-radius: 2px;
  opacity: 0.6;
}

/* ===== Weather Strip ===== */
.weather-strip {
  height: var(--strip-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.weather-strip-icon {
  font-size: 24px;
  line-height: 1;
}

.weather-strip-temp {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.weather-strip-cond {
  font-size: 13px;
  color: var(--text-secondary);
}

.weather-strip-divider {
  width: 1px;
  height: 28px;
  background: var(--border-color);
}

.weather-strip-wind {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-secondary);
}

.weather-strip-wind svg {
  width: 16px;
  height: 16px;
}

.weather-strip-fly {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.weather-strip-fly.good {
  color: var(--green);
  background: var(--green-bg);
}

.weather-strip-fly.caution {
  color: var(--orange);
  background: var(--orange-bg);
}

.weather-strip-fly.no-fly {
  color: var(--red);
  background: var(--red-bg);
}

.weather-strip-tfr {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.weather-strip-tfr-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--red);
}

.weather-strip-tfr-count.none {
  background: var(--text-muted);
}

/* ===== Panel Content ===== */
.panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 16px 32px;
  -webkit-overflow-scrolling: touch;
}

.panel-content::-webkit-scrollbar {
  width: 4px;
}

.panel-content::-webkit-scrollbar-track {
  background: transparent;
}

.panel-content::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

/* ===== Panel Tabs ===== */
.panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
  flex-shrink: 0;
  padding: 0 16px;
}

.panel-tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: var(--font);
}

.panel-tab:hover {
  color: var(--text-secondary);
}

.panel-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

/* ===== Sections ===== */
.panel-section {
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-top: 8px;
}

.section-header h2 {
  font-size: 15px;
  font-weight: 700;
}

.section-header h3 {
  font-size: 14px;
  font-weight: 600;
}

/* ===== Weather Underground Style ===== */
.wx-current {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px;
  background: var(--bg-card);
  border-radius: 12px;
  margin-bottom: 16px;
}

.wx-current-icon {
  font-size: 48px;
  line-height: 1;
}

.wx-current-temp {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}

.wx-current-details {
  flex: 1;
}

.wx-current-condition {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.wx-current-feels {
  font-size: 13px;
  color: var(--text-secondary);
}

.wx-stats-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.wx-stat-item {
  flex: 1;
  background: var(--bg-card);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.wx-stat-value {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
}

.wx-stat-label {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  color: var(--vnt-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ===== 7-Day Forecast ===== */
.forecast-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.forecast-scroll::-webkit-scrollbar {
  display: none;
}

.forecast-card {
  flex-shrink: 0;
  width: 80px;
  background: var(--bg-card);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.forecast-card.today {
  border: 1px solid var(--blue);
}

.forecast-day {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.forecast-icon {
  font-size: 24px;
  line-height: 1;
}

.forecast-temps {
  display: flex;
  gap: 4px;
  align-items: baseline;
}

.forecast-high {
  font-size: 15px;
  font-weight: 700;
}

.forecast-low {
  font-size: 12px;
  color: var(--text-muted);
}

.forecast-rain {
  font-size: 10px;
  color: var(--blue);
}

.forecast-rain-bar {
  width: 100%;
  height: 3px;
  background: rgba(56, 139, 253, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

.forecast-rain-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
}

/* ===== Job Conflict Alert Cards ===== */
.conflict-alert {
  background: var(--yellow-bg);
  border: 1px solid rgba(210, 153, 34, 0.3);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.conflict-alert-icon {
  margin-right: 6px;
}

.conflict-alert-title {
  font-weight: 600;
}

/* ===== Advisory & TFR Cards ===== */
.advisory-count-badge,
.tfr-count-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--text-secondary);
}

.advisory-list,
.tfr-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.advisory-card {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 12px 14px;
  border-left: 3px solid var(--text-muted);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.advisory-card.severity-warning {
  border-left-color: var(--red);
}

.advisory-card.severity-caution {
  border-left-color: var(--yellow);
}

.advisory-card.severity-info {
  border-left-color: var(--blue);
}

.advisory-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  margin-top: 1px;
}

.advisory-body {
  flex: 1;
  min-width: 0;
}

.advisory-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 3px;
}

.advisory-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.tfr-card {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  border-left: 3px solid transparent;
}

.tfr-card:hover {
  background: var(--bg-card-hover);
  transform: translateX(2px);
}

.tfr-card.status-ACTIVE {
  border-left-color: var(--red);
}

.tfr-card.status-UPCOMING {
  border-left-color: var(--orange);
}

.tfr-card.status-EXPIRED {
  border-left-color: var(--text-muted);
}

.tfr-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.tfr-card-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.tfr-card-id {
  font-size: 13px;
  font-weight: 600;
}

.tfr-card-type {
  font-size: 11px;
  color: var(--text-secondary);
}

.tfr-card-distance {
  font-size: 12px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.tfr-card-times {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
}

.tfr-card-countdown {
  font-size: 11px;
  color: var(--orange);
  margin-top: 4px;
  font-weight: 600;
}

/* ===== Job Status Labels ===== */
/* ===== Jobs Page ===== */
.jobs-page {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.jobs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.jobs-header h1 {
  font-size: 22px;
  font-weight: 800;
}

.jobs-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jobs-filter {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--text-primary);
  font-family: var(--font);
  outline: none;
}

.jobs-filter:focus {
  border-color: var(--blue);
}

.view-toggle {
  display: flex;
  background: var(--bg-card);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.view-toggle-btn {
  background: none;
  border: none;
  padding: 7px 12px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font);
  font-weight: 600;
  transition: all 0.15s;
}

.view-toggle-btn.active {
  background: var(--blue-bg);
  color: var(--blue);
}

/* ===== Job List View ===== */
.job-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.job-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.job-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--text-muted);
}

.job-card-main {
  flex: 1;
  min-width: 0;
}

.job-card-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.job-card-client {
  font-size: 12px;
  color: var(--text-secondary);
}

.job-card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.job-card-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.job-card-fly-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.job-card-fly-dot.good { background: var(--green); }
.job-card-fly-dot.caution { background: var(--yellow); }
.job-card-fly-dot.no-fly { background: var(--red); }
.job-card-fly-dot.unknown { background: var(--text-muted); }

.job-card-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--magenta);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ===== Kanban Board ===== */
.kanban-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 16px;
  height: calc(100vh - var(--top-bar-height) - 100px);
  -webkit-overflow-scrolling: touch;
}

.kanban-column {
  flex-shrink: 0;
  width: 260px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kanban-column-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.kanban-column-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kanban-column-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vnt-text);
}

.kanban-column-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

.kanban-column-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
}

.kanban-column-body.drag-over {
  background: rgba(56, 139, 253, 0.05);
}

.kanban-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: grab;
  transition: opacity 0.15s, transform 0.15s;
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card.dragging {
  opacity: 0.5;
}

.kanban-card-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.kanban-card-client {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.kanban-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
}

.kanban-card-date {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ===== Job Form ===== */
.job-form-page {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  max-width: 700px;
}

.job-form-page h1 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 24px;
}

.job-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: flex;
  gap: 16px;
}

.form-row .form-group {
  flex: 1;
}

/* Address autocomplete suggestions */
.job-addr-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  max-height: 200px;
  overflow-y: auto;
}
.job-addr-sug {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
}
.job-addr-sug:last-child { border-bottom: none; }
.job-addr-sug:hover { background: var(--surface-hover); }

/* Date input — ensure native calendar picker always shows */
.job-date-input {
  cursor: pointer;
}
.job-date-input::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
  padding: 4px;
}

/* Assignee dropdown with avatar support */
.job-assignee-wrap select {
  width: 100%;
}

.mini-map-container {
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 6px;
  border: 1px solid var(--border-color);
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.detail-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

.detail-card h2 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
}

.detail-card h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* ===== Calendar Coming Soon ===== */
.coming-soon-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: var(--text-muted);
}

.coming-soon-page svg {
  width: 48px;
  height: 48px;
  opacity: 0.3;
}

.coming-soon-page h2 {
  font-size: 20px;
  color: var(--text-secondary);
}

.coming-soon-page p {
  font-size: 14px;
}

/* ===== Mobile Bottom Nav ===== */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--mobile-nav-height);
  background: var(--bg-panel);
  border-top: 1px solid var(--border-color);
  z-index: 1200;
  padding: 0;
}

.mobile-nav-inner {
  display: flex;
  height: 100%;
}

.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  transition: color 0.15s;
}

.mobile-nav-item svg {
  width: 20px;
  height: 20px;
}

.mobile-nav-item.active {
  color: var(--blue);
}

.mobile-nav-item span {
  display: block;
  font-size: 10px;
  line-height: 1;
}

/* Mobile More Drawer */
.mobile-more-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1300;
  pointer-events: none;
}
.mobile-more-drawer.open {
  pointer-events: auto;
}
.mobile-more-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.25s;
}
.mobile-more-drawer.open .mobile-more-overlay {
  background: rgba(0,0,0,0.5);
}
.mobile-more-sheet {
  position: absolute;
  bottom: var(--mobile-nav-height);
  left: 0;
  right: 0;
  background: var(--bg-panel);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-top: 1px solid var(--border-color);
  transform: translateY(100%);
  transition: transform 0.25s ease;
  padding: 8px 0 16px;
}
.mobile-more-drawer.open .mobile-more-sheet {
  transform: translateY(0);
}
.mobile-more-handle {
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
}
.mobile-more-items {
  display: flex;
  flex-direction: column;
}
.mobile-more-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.mobile-more-item:active {
  background: var(--bg-secondary);
}
.mobile-more-item svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

@media (min-width: 769px) {
  .mobile-more-drawer { display: none !important; }
}
@media (max-width: 768px) {
  .mobile-more-drawer { display: block; }
}

/* ===== Sidebar Overlay (mobile) ===== */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1099;
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 13px;
  z-index: var(--z-overlay);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-color);
  transition: opacity 0.3s;
  max-width: 90%;
  text-align: center;
}

.toast.error {
  background: var(--red);
  color: white;
  border: none;
}

.toast.success {
  background: var(--green);
  color: white;
  border: none;
}

/* ===== PWA install banner (iOS share steps / Android native CTA) ===== */
.vnt-install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 0;
  margin: 0 auto;
  max-width: 540px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  z-index: var(--z-sticky-banner); /* under toasts */
  animation: vnt-install-banner-up 0.4s var(--ease-spring) both;
}

@keyframes vnt-install-banner-up {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.vnt-install-banner-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  flex-shrink: 0;
}

.vnt-install-banner-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--vnt-fs-13);
  line-height: 1.45;
  color: var(--text-secondary);
}

.vnt-install-banner-copy strong {
  font-size: 14px;
  color: var(--text-primary);
}

.vnt-install-share-glyph {
  display: inline-block;
  vertical-align: -2px;
  margin: 0 1px;
  color: var(--accent);
}

.vnt-install-banner-cta {
  align-self: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.vnt-install-banner-dismiss {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.vnt-install-banner-dismiss:hover {
  color: var(--text-primary);
}

/* ===== Leaflet Popup Overrides ===== */
.leaflet-popup-content-wrapper {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
  border: 1px solid var(--border-color) !important;
}

.leaflet-popup-tip {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: none !important;
}

.leaflet-popup-content {
  margin: 14px !important;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.popup-header .notam-id {
  font-weight: 700;
  font-size: 14px;
}

.popup-type {
  font-size: 11px;
  color: var(--text-secondary);
  margin-left: 6px;
  font-weight: 400;
}

.popup-reason {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.popup-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.popup-meta strong {
  color: var(--text-secondary);
}

.popup-utc {
  color: var(--text-muted);
  font-size: 10px;
}

.popup-windows {
  margin-top: 10px;
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
}

.popup-windows h4 {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  text-transform: uppercase;
  color: var(--vnt-text-faint);
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}

.popup-window-item {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 4px 0;
  border-bottom: 1px solid rgba(48, 54, 61, 0.5);
}

.popup-active-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--red);
  color: white;
  margin-left: 6px;
  vertical-align: middle;
}

.popup-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--blue);
  text-decoration: none;
}

.popup-link:hover {
  text-decoration: underline;
}

.popup-countdown {
  font-size: 11px;
  color: var(--orange);
  font-weight: 600;
  margin-top: 2px;
}

/* ===== User Location Dot ===== */
.user-location-dot {
  width: 16px;
  height: 16px;
  background: var(--blue);
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(56, 139, 253, 0.6);
  animation: user-pulse 2s ease-in-out infinite;
}

@keyframes user-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56, 139, 253, 0.5); }
  50% { box-shadow: 0 0 0 14px rgba(56, 139, 253, 0); }
}

/* ===== Active TFR Polygon Pulse ===== */
.tfr-active-polygon {
  animation: polygon-border-pulse 2s ease-in-out infinite;
}

@keyframes polygon-border-pulse {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: 0.3; }
}

/* ===== Airport Markers ===== */
.airport-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--magenta);
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(5, 8, 12, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  white-space: nowrap;
  pointer-events: none;
}

/* ===== Leaflet Control Overrides ===== */
.leaflet-control-zoom a {
  background: color-mix(in oklch, var(--vnt-panel) 88%, transparent) !important;
  color: var(--vnt-text) !important;
  border-color: var(--vnt-border) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.leaflet-control-zoom a:hover {
  background: var(--vnt-panel-2) !important;
}

.leaflet-control-attribution {
  background: rgba(13, 17, 23, 0.7) !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
}

.leaflet-control-attribution a {
  color: var(--text-secondary) !important;
}

/* Override Leaflet default div-icon white box */
.leaflet-div-icon {
  background: none !important;
  border: none !important;
}

/* Video waypoint markers */
.tv-video-start-marker,
.tv-video-end-marker,
.tv-poi-marker,
.tv-address-marker {
  background: none !important;
  border: none !important;
}

/* Home point is a draggable map anchor, not a CTA — dark chip + accent ring
   (same idiom as .vnt-shot-id-marker); the gradient family stays reserved
   for Generate Brief. */
.vnt-home-point-marker {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #f5fbff;
  background: color-mix(in oklch, var(--vnt-accent, var(--vnt-accent)) 32%, rgba(8,12,18,0.88));
  border: 2px solid var(--vnt-accent, var(--vnt-accent));
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.36),
    0 8px 22px rgba(0,0,0,0.32);
  cursor: grab;
}
.vnt-home-point-marker:active {
  cursor: grabbing;
}
.vnt-home-point-marker svg {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vnt-home-point-glow {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(89, 128, 166,0.32), transparent 66%);
  animation: vntHomePulse 2.6s ease-in-out infinite;
  animation-play-state: paused;
}
.vnt-home-point-marker:hover .vnt-home-point-glow,
.vnt-home-point-marker:active .vnt-home-point-glow {
  animation-play-state: running;
}

@keyframes vntHomePulse {
  0%, 100% { opacity: 0.62; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

.tv-video-tooltip {
  background: rgba(13, 17, 23, 0.9) !important;
  color: #e6edf3 !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
.tv-video-tooltip::before {
  border-top-color: rgba(13, 17, 23, 0.9) !important;
}
.tv-wp-icon {
  background: none !important;
  border: none !important;
  cursor: grab !important;
}
.tv-wp-icon:active {
  cursor: grabbing !important;
}
.tv-waypoint-tooltip {
  background: rgba(13, 17, 23, 0.9) !important;
  color: #e6edf3 !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
.tv-waypoint-tooltip::before {
  border-top-color: rgba(13, 17, 23, 0.9) !important;
}

.vnt-video-control-icon {
  background: none !important;
  border: none !important;
}
.vnt-poi-control-icon {
  background: none !important;
  border: none !important;
  overflow: visible !important;
}
.vnt-poi-control-dot {
  position: relative;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: grab;
  color: #dffcff;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,0.38));
}
.vnt-poi-control-dot:active {
  cursor: grabbing;
}
.vnt-poi-control-ring {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1.5px solid rgba(143, 247, 255, 0.88);
  background:
    radial-gradient(circle, rgba(89, 128, 166,0.22) 0 3px, transparent 4px),
    conic-gradient(from 0deg, rgba(89, 128, 166,0), rgba(89, 128, 166,0.46), rgba(255,209,102,0.40), rgba(89, 128, 166,0));
  mask: radial-gradient(circle, transparent 0 45%, #000 46%);
  -webkit-mask: radial-gradient(circle, transparent 0 45%, #000 46%);
  animation: vntPoiSpin 5s linear infinite;
  animation-play-state: paused;
}
.vnt-poi-control-dot:hover .vnt-poi-control-ring,
.vnt-poi-control-dot:active .vnt-poi-control-ring {
  animation-play-state: running;
}
.vnt-poi-control-core {
  position: relative;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vnt-accent, var(--vnt-accent)), var(--vnt-accent-2));
  border: 2px solid rgba(7,12,16,0.88);
  box-shadow:
    0 0 0 5px rgba(89, 128, 166,0.14),
    0 0 22px rgba(89, 128, 166,0.56);
}
.vnt-poi-control-label {
  position: absolute;
  left: 50%;
  top: 47px;
  transform: translateX(-50%);
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(7,12,16,0.76);
  border: 1px solid rgba(143,247,255,0.26);
  color: rgba(231,251,255,0.92);
  font: 800 8.5px/1 var(--vnt-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: 0.08em;
  box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

@keyframes vntPoiSpin {
  to { transform: rotate(360deg); }
}
.vnt-video-control-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 9px/1 var(--vnt-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: 0.02em;
  color: #ffffff;
  border: 2px solid rgba(255,255,255,0.82);
  box-shadow: 0 10px 24px rgba(0,0,0,0.34), 0 0 0 5px rgba(0,0,0,0.18);
  cursor: grab;
}
.vnt-video-control-dot:active {
  cursor: grabbing;
}
.vnt-video-end-control .vnt-video-control-dot {
  background: var(--vnt-route-end);
  border-color: #ffd6d6;
  box-shadow: 0 10px 24px rgba(0,0,0,0.34), 0 0 0 5px rgba(218,54,51,0.22);
}
.vnt-video-focus-control .vnt-video-control-dot {
  width: 30px;
  height: 30px;
  background: var(--vnt-route-focus);
  border-color: #ffe0a3;
  color: #1b1304;
  font-size: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.32), 0 0 0 4px rgba(255,152,0,0.20);
}
.vnt-video-curve-control {
  width: 18px !important;
  height: 18px !important;
}
.vnt-video-curve-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--vnt-route-curve);
  border: 2px solid rgba(235,255,253,0.95);
  box-shadow:
    0 8px 16px rgba(0,0,0,0.36),
    0 0 0 4px rgba(89, 128, 166,0.14),
    inset 0 1px 0 rgba(255,255,255,0.58);
  cursor: grab;
}
.vnt-video-curve-dot:active {
  cursor: grabbing;
}
.vnt-video-path-line {
  filter: drop-shadow(0 0 5px rgba(92,203,216,0.34));
}

/* ===== Loading Placeholder ===== */
.loading-placeholder {
  font-size: 12px;
  color: var(--text-muted);
  padding: 16px;
  text-align: center;
  width: 100%;
}

/* ===== Empty State ===== */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.4;
}

.empty-state h3 {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.empty-state p {
  font-size: 13px;
  margin-bottom: 16px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
    z-index: 1100;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay.visible {
    display: block;
  }

  .mobile-nav {
    display: block;
  }

  .menu-toggle {
    display: flex;
  }

  .main-content {
    padding-bottom: var(--mobile-nav-height);
  }

  /* Dashboard map full-height on mobile */
  .map-wrapper {
    height: calc(100vh - var(--top-bar-height) - var(--mobile-nav-height) - 10px) !important;
  }
  .map-wrapper #map {
    height: 100% !important;
  }

  /* Hide activity feed card on mobile dashboard — map is the focus */
  .dashboard-content > .detail-card {
    display: none;
  }

  .bottom-panel {
    /* no absolute bottom offset needed in flex layout */
  }

  /* Top bar: smaller on mobile */
  .top-bar {
    padding: 0 12px;
  }
  .top-bar h1 {
    font-size: 14px !important;
  }

  .jobs-page {
    padding: 16px;
  }

  /* Stat cards: smaller on mobile */
  .stat-card-mini {
    padding: 8px 10px;
    min-width: 70px;
  }
  .stat-card-mini .stat-val {
    font-size: 14px;
  }

  /* Tables: horizontal scroll */
  .board-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Analytics grid: 2 columns on mobile */
  .analytics-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .job-form-page {
    padding: 16px;
  }

  .form-row {
    flex-direction: column;
    gap: 16px;
  }

  .kanban-board {
    height: calc(100vh - var(--top-bar-height) - var(--mobile-nav-height) - 100px);
  }

}


@media (min-width: 769px) {
  .bottom-panel {
    /* full width in flex layout - panel is a sibling of map */
  }
}

@media (min-width: 1200px) {
  .bottom-panel {
    /* full width in flex layout */
  }
}

@media (max-width: 600px) {
  .wx-stats-row {
    flex-wrap: wrap;
  }

  .wx-stat-item {
    min-width: calc(50% - 4px);
  }
}

/* ===== Monday.com-style Board ===== */
.monday-board {
  padding: 16px;
  overflow-y: auto;
  height: 100%;
}

.board-group {
  margin-bottom: 24px;
}

.group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  height: 40px;
  border-left: 4px solid;
  border-radius: 4px 4px 0 0;
  background: var(--bg-panel);
  cursor: pointer;
  user-select: none;
}

.group-collapse {
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  width: 20px;
  text-align: center;
}

.group-title {
  font-size: 15px;
  font-weight: 700;
}

.group-count {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 4px;
}

.board-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.board-table {
  width: 100%;
  min-width: 1400px;
  border-collapse: collapse;
  table-layout: fixed;
}

.board-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  font-size: 11px;
  font-weight: 800;
  color: var(--vnt-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
  white-space: nowrap;
  z-index: 2;
}

.board-table .col-project {
  width: 220px;
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--bg-panel);
}

.board-table tbody .col-project {
  background: var(--bg-dark);
}

.board-table .col-person { width: 80px; }
.board-table .col-status { width: 130px; }
.board-table .col-level { width: 80px; }
.board-table .col-date { width: 110px; }
.board-table .col-height { width: 70px; }
.board-table .col-type { width: 100px; }
.board-table .col-tod { width: 100px; }
.board-table .col-client { width: 150px; }
.board-table .col-revenue { width: 100px; }
.board-table .col-shoot { width: 110px; }
.board-table .col-due { width: 110px; }
.board-table .col-invoiced { width: 70px; text-align: center; }
.board-table .col-paid { width: 70px; text-align: center; }
.board-table .col-drive { width: 70px; text-align: center; }
.board-table .col-pilot { width: 100px; }

.board-row {
  height: 40px;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.1s;
  cursor: grab;
}
/* Project address in board row */
.project-addr {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  margin-top: 1px;
}
.project-addr:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Address map hover popup */
.addr-map-popup {
  position: fixed;
  z-index: var(--z-overlay);
  width: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  overflow: hidden;
  animation: addrPopIn 0.15s ease-out;
}
@keyframes addrPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.addr-map-frame {
  width: 100%;
  height: 140px;
  overflow: hidden;
  background: var(--surface-hover);
}
.addr-map-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.addr-map-info {
  padding: 10px 12px;
}
.addr-map-text {
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 6px;
}
.addr-map-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.addr-map-link:hover {
  text-decoration: underline;
}

.board-row-dragging {
  opacity: 0.4;
}
.board-group-dragover {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  background: rgba(56, 139, 253, 0.05);
}
.group-rename-input {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--accent);
  font-size: inherit;
  font-weight: inherit;
  padding: 0 2px;
  width: 160px;
  outline: none;
}
.group-title {
  cursor: pointer;
}

.board-row:hover {
  background: var(--bg-card-hover);
}

.board-row:hover .col-project {
  background: var(--bg-card-hover);
}

.board-row td {
  padding: 4px 10px;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.person-avatars {
  display: flex;
  gap: 2px;
}

.avatar-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.cell-text {
  cursor: pointer;
  display: inline-block;
  min-width: 30px;
  min-height: 20px;
  padding: 2px 4px;
  border-radius: 4px;
}

.cell-text:hover {
  background: var(--bg-card);
}

.board-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--green);
}

.drive-link-icon {
  color: var(--blue);
  font-size: 16px;
  text-decoration: none;
}

.drive-link-icon:hover {
  opacity: 0.8;
}

/* Summary row */
.board-summary {
  background: var(--bg-panel);
  border-left: 4px solid;
  height: 36px;
}

.board-summary td {
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-muted);
  vertical-align: middle;
}

.add-project-link {
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
}

.add-project-link:hover {
  color: var(--blue);
}

.status-summary-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  width: 100%;
  min-width: 60px;
  background: var(--bg-card);
}

.status-summary-seg {
  height: 100%;
  min-width: 4px;
}

.summary-value {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Inline editing */
.inline-input {
  background: var(--bg-input);
  border: 1px solid var(--blue);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 13px;
  color: var(--text-primary);
  font-family: var(--font);
  outline: none;
  width: 100%;
  max-width: 200px;
}

.inline-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(56, 139, 253, 0.2);
}

.inline-select {
  background: var(--bg-input);
  border: 1px solid var(--blue);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 13px;
  color: var(--text-primary);
  font-family: var(--font);
  outline: none;
  max-width: 150px;
}

.inline-add-input {
  max-width: 100%;
  width: 300px;
}

/* Status dropdown */
.status-dropdown {
  position: fixed;
  z-index: var(--z-overlay);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 160px;
}

.status-dropdown-item {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  margin: 2px 0;
  text-align: center;
}

.status-dropdown-item:hover {
  opacity: 0.85;
  transform: scale(1.02);
}

/* Board adding row */
.board-row-adding td {
  padding: 6px 10px;
  background: var(--bg-card);
}


/* Comment cards */

/* Files tab */

/* Tasks tab */

/* Make project name clickable for side panel */

/* ===== TowerView Styles ===== */
.tv-section { padding: 16px; border-bottom: 1px solid var(--border-color); }
.tv-section h3 { font-size: 13px; font-weight: 800; text-transform: uppercase; color: var(--vnt-text); margin-bottom: 12px; letter-spacing: 0.04em; }

/* Plan Preview */
.tv-plan-preview {
  background: var(--bg-dark); border: 2px dashed var(--border-color); border-radius: 8px;
  padding: 24px; text-align: center; min-height: 120px;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
}
.tv-plan-preview.has-plan { border-style: solid; padding: 0; overflow: hidden; }
.tv-plan-preview img { width: 100%; height: auto; display: block; }

/* Segment Builder - stacked bars representing building floors */
.tv-segment-list { display: flex; flex-direction: column-reverse; gap: 2px; }
.tv-segment-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: 6px; cursor: pointer;
  font-size: 12px; color: white; font-weight: 600;
  transition: opacity 0.2s;
  min-height: 36px;
}
.tv-segment-bar:hover { opacity: 0.85; }
.tv-segment-bar .seg-info { display: flex; align-items: center; gap: 8px; }
.tv-segment-bar .seg-height { font-size: 11px; opacity: 0.8; }
.tv-segment-edit {
  background: var(--bg-card-hover); border-radius: 6px; padding: 12px;
  margin-top: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.tv-segment-edit label { font-size: 11px; color: var(--text-secondary); display: block; margin-bottom: 2px; }
.tv-segment-edit input, .tv-segment-edit select {
  width: 100%; background: var(--bg-dark); border: 1px solid var(--border-color);
  color: var(--text-primary); padding: 6px 8px; border-radius: 4px; font-size: 12px;
}

.tv-building-total {
  display: flex; justify-content: space-between; padding: 8px 0; margin-top: 8px;
  font-size: 12px; color: var(--text-secondary); border-top: 1px solid var(--border-color);
}

/* Pin List */
.tv-pin-list { display: flex; flex-direction: column; gap: 4px; }
.tv-pin-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--bg-card-hover); border-radius: 6px; cursor: pointer;
  transition: background 0.2s; position: relative;
}
.tv-pin-delete:hover {
  opacity: 1 !important;
  color: var(--red) !important;
}
.tv-pin-item:hover { background: var(--border-color); }
.tv-pin-item.active { border-left: 3px solid var(--blue); }
.tv-pin-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tv-pin-info { flex: 1; }
.tv-pin-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.tv-pin-meta { font-size: 11px; color: var(--text-muted); }
.tv-pin-heading { font-size: 16px; transform-origin: center; display: inline-block; }
.tv-time-group { margin-bottom: 6px; }
.tv-time-header {
  padding: 5px 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
  border-radius: 4px;
}
.tv-time-header:hover { background: var(--surface-hover); }
.tv-time-arrow { font-size: 10px; color: var(--text-muted); min-width: 10px; }
.tv-time-count { margin-left: auto; font-size: 10px; color: var(--text-muted); font-weight: 400; }
.tv-pin-row {
  margin: 2px 0; border-radius: 4px;
  transition: background 0.15s;
}
.tv-pin-row.has-active { background: rgba(89, 128, 166, 0.08); }
.tv-pin-summary {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; cursor: pointer; border-radius: 4px;
}
.tv-pin-summary:hover { background: var(--surface-hover); }
.tv-pin-num { font-size: 11px; font-weight: 700; min-width: 28px; }
.tv-pin-type { font-size: 11px; color: var(--text-secondary); }
.tv-pin-ht-summary { font-size: 10px; color: var(--text-muted); margin-left: auto; }
.tv-pin-expand-arrow { font-size: 12px; color: var(--text-muted); min-width: 14px; text-align: center; }
.tv-pin-detail { padding: 0 8px 4px 20px; }
.tv-ht-row {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 8px; border-radius: 3px; cursor: pointer;
  font-size: 11px; color: var(--text-secondary);
  transition: background 0.15s;
}
.tv-ht-row:hover { background: var(--surface-hover); }
.tv-ht-row.active { background: var(--accent); color: #fff; border-radius: 3px; }
.tv-ht-elev { font-weight: 600; min-width: 40px; }
.tv-ht-label { flex: 1; color: var(--text-muted); font-size: 10px; }
.tv-ht-row.active .tv-ht-label { color: rgba(255,255,255,0.7); }
.tv-pin-delete-single {
  background: none; border: none; color: var(--red); cursor: pointer;
  font-size: 10px; padding: 2px; opacity: 0; transition: opacity 0.15s;
}
.tv-ht-row:hover .tv-pin-delete-single { opacity: 0.6; }
.tv-ht-row.active .tv-pin-delete-single { color: rgba(255,255,255,0.6); opacity: 1; }
.tv-pin-delete-group {
  background: none; border: none; color: var(--red); cursor: pointer;
  font-size: 11px; padding: 2px 4px; opacity: 0; transition: opacity 0.15s; margin-left: 4px;
}
.tv-pin-summary:hover .tv-pin-delete-group { opacity: 0.6; }
.tv-360-pause-btn {
  position: absolute; bottom: var(--vnt-preview-gutter); right: var(--vnt-preview-gutter); z-index: var(--vnt-z-overlay-chrome);
  border-radius: 16px; padding: 4px 12px;
  background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(255,255,255,0.3);
  color: var(--vnt-text); font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  backdrop-filter: blur(4px); transition: background 0.2s;
  white-space: nowrap;
}
.tv-360-pause-btn:hover { background: rgba(255, 255, 255, 0.94); }
.tv-360-pause-btn.look-mode {
  top: auto;
  left: 50%;
  right: auto;
  bottom: 12px;
  z-index: var(--vnt-z-overlay-chrome);
  width: 46px;
  min-width: 46px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 79, 91, 0.96), rgba(184, 28, 44, 0.94));
  border-color: rgba(255, 190, 196, 0.88);
  color: var(--vnt-text);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 0 4px rgba(255, 79, 91, 0.12),
    0 10px 22px rgba(29, 31, 32, 0.22);
}
.tv-360-pause-btn.look-mode:hover {
  background: linear-gradient(180deg, rgba(255, 101, 112, 1), rgba(207, 36, 54, 0.98));
}
.tv-360-pause-btn.look-mode.paused {
  background: linear-gradient(180deg, rgba(255, 115, 124, 0.96), rgba(255, 255, 255, 0.94));
  border-color: rgba(255, 214, 218, 0.90);
}

/* 3D Viewer */
.tv-cesium-container { width: 100%; height: 300px; border-radius: 8px; overflow: hidden; background: #000; }
.tv-view-controls { display: flex; align-items: center; gap: 12px; padding: 8px 0; flex-wrap: wrap; }
.tv-view-controls label { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.tv-view-controls input[type="range"] { width: 100px; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .monday-board {
    padding: 8px;
  }

  .board-table {
    min-width: 1200px;
  }

  .group-header {
    padding: 6px 8px;
  }
}

/* ===== TFR Labels on map ===== */
.tfr-label { background: none; border: none; }
.tfr-label span {
  font-size: 10px; font-weight: 700; color: #ff3333; text-shadow: 0 0 3px rgba(0,0,0,0.8), 0 0 6px rgba(0,0,0,0.5);
  white-space: nowrap; pointer-events: none;
}
.tfr-label.upcoming span { color: #ff8c00; }
.tfr-label:not(.active):not(.upcoming) span { color: #888; font-weight: 400; }

/* TFR Active polygon animation */
@keyframes tfr-pulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.25; } }

/* TFR Popup Styling - SkyVector inspired */
.tfr-popup .leaflet-popup-content-wrapper {
  background: #1a1d23; border: 1px solid #333; border-radius: 8px; color: #e6edf3;
}
.tfr-popup .leaflet-popup-tip { background: #1a1d23; border-color: #333; }
.tfr-popup-content { font-size: 12px; line-height: 1.5; }
.tfr-popup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #333; }
.tfr-popup-header.active { border-bottom-color: #ff3333; }
.tfr-popup-header.upcoming { border-bottom-color: #ff8c00; }
.tfr-notam-id { font-weight: 700; font-size: 13px; font-family: monospace; }
.tfr-popup-type { font-size: 10px; font-weight: 800; font-family: var(--vnt-font-mono); color: var(--vnt-text-faint); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px; }
.tfr-popup-reason { font-size: 12px; color: #c9d1d9; margin-bottom: 8px; }
.tfr-popup-details { font-size: 11px; }
.tfr-detail-row { display: flex; justify-content: space-between; padding: 2px 0; }
.tfr-detail-label { color: #8b949e; font-weight: 600; }
.tfr-windows { margin-top: 6px; padding-top: 6px; border-top: 1px solid #333; }
.tfr-window-row { padding: 2px 0; font-size: 11px; color: #c9d1d9; }
.tfr-active-now { background: #ff3333; color: white; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 6px; margin-left: 4px; }
.tfr-countdown { margin-top: 6px; padding: 6px 8px; background: rgba(255,140,0,0.1); border-radius: 4px; color: #ffaa33; font-weight: 600; font-size: 11px; }
.tfr-faa-link { display: block; margin-top: 8px; padding-top: 6px; border-top: 1px solid #333; color: #58a6ff; text-decoration: none; font-size: 11px; font-weight: 600; }
.tfr-faa-link:hover { text-decoration: underline; }

/* ===== Settings Page ===== */
.settings-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px;
}

.settings-section {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}

.settings-section h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.settings-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.account-page {
  max-width: 980px;
}

.account-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.account-tab {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.account-tab.active,
.account-tab:hover {
  background: rgba(94,234,212,0.13);
  color: var(--text-primary);
}

.account-workspace-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.account-workspace-grid > div {
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px;
}

.account-workspace-grid span,
.account-workspace-grid strong {
  display: block;
}

.account-workspace-grid strong {
  color: var(--text-primary);
  font-size: 14px;
}

.projects-page {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 16px;
}

.projects-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.projects-header h1 {
  margin: 0 0 6px;
  font-size: 28px;
}

.projects-header p {
  margin: 0;
  color: var(--text-secondary);
}

.projects-table-wrap {
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-panel);
}

.projects-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.projects-table th,
.projects-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.projects-table th {
  color: var(--vnt-text-faint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.projects-table td strong,
.projects-table td span {
  display: block;
}

.projects-table td strong {
  color: var(--text-primary);
  font-size: 14px;
}

.projects-table td span {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 4px;
}

.projects-row {
  cursor: pointer;
}

.projects-row:hover {
  background: rgba(94,234,212,0.055);
}

/* Delete lives inside the kebab as a plain menu item (2026-08-03 review, 3f:
   destruction was the loudest affordance on the page). The confirming state
   keeps its warning treatment. */
.projects-delete-btn {
  appearance: none;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #ff8a9d;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}

.projects-delete-btn:hover {
  background: rgba(226, 68, 92, 0.14);
  color: #ffd7de;
}

.projects-delete-btn.is-confirming {
  border-color: rgba(255, 209, 102, 0.72);
  background: rgba(255, 209, 102, 0.14);
  color: #ffe7a6;
  box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.1), 0 0 18px rgba(255, 209, 102, 0.1);
}

.projects-delete-btn:disabled {
  cursor: wait;
  opacity: 0.65;
}

.project-status-dot {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  width: auto;
  margin: 0 !important;
  color: var(--text-primary) !important;
  font-weight: 700;
}

.project-status-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-color);
  box-shadow: 0 0 14px var(--status-color);
}

.project-muted {
  color: var(--text-muted) !important;
}

.projects-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.projects-public-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: center;
  min-height: 270px;
  padding: 24px;
  border: 1px solid rgba(94,234,212,0.2);
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 0%, rgba(94,234,212,0.16), transparent 34%),
    linear-gradient(135deg, rgba(18,24,34,0.96), rgba(10,15,22,0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 24px 70px rgba(0,0,0,0.24);
}

.projects-public-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--vnt-accent);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.projects-public-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(94,234,212,0.7);
}

.projects-public-copy h2 {
  max-width: 620px;
  margin: 12px 0 10px;
  color: var(--text-primary);
  font-size: 34px;
  line-height: 1.02;
  letter-spacing: 0;
}

.projects-public-copy p {
  max-width: 560px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.55;
}

.projects-public-actions {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(2,6,12,0.52);
}

.projects-public-actions .btn {
  width: 100%;
}

.projects-public-actions .link {
  justify-self: center;
  color: var(--text-secondary);
  font-size: 13px;
}

.project-new-public {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: center;
  width: min(960px, 100%);
  min-height: 360px;
  margin: 12px auto 0;
  padding: 28px;
  border: 1px solid rgba(94,234,212,0.22);
  border-radius: 14px;
  background:
    radial-gradient(circle at 82% 0%, rgba(253,171,61,0.16), transparent 34%),
    radial-gradient(circle at 0% 10%, rgba(94,234,212,0.14), transparent 30%),
    linear-gradient(135deg, rgba(16,24,34,0.97), rgba(7,12,18,0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 24px 70px rgba(0,0,0,0.24);
}

.project-new-public-copy h1 {
  max-width: 620px;
  margin: 12px 0 10px;
  color: var(--text-primary);
  font-size: 42px;
  line-height: 1;
  letter-spacing: 0;
}

.project-new-public-copy p {
  max-width: 560px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.55;
}

.project-new-public-actions {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(2,6,12,0.54);
}

.project-new-public-actions .btn {
  width: 100%;
}

.project-new-public-actions .link {
  justify-self: center;
  color: var(--text-secondary);
  font-size: 13px;
}

.account-usage-summary {
  margin-top: 12px;
}

.account-usage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.account-usage-card {
  min-height: 106px;
  display: grid;
  align-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(8, 14, 24, 0.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.account-usage-card strong {
  color: var(--text-primary);
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0;
}

.account-usage-card small,
.account-policy-editor {
  margin: 14px 0 6px;
  padding: 12px 14px;
  border: 1px solid rgba(132, 185, 196, 0.22);
  border-radius: 10px;
  background: rgba(8, 24, 32, 0.55);
}
.account-policy-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vnt-text-dim);
  margin-bottom: 10px;
}
.account-policy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.account-policy-grid label,
.account-policy-flags label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--vnt-text-dim);
}
.account-policy-grid input {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(4, 16, 22, 0.7);
  color: inherit;
}
.account-policy-flags {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.account-policy-flags label {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.account-policy-flags .btn { margin-left: auto; }
@media (max-width: 700px) {
  .account-policy-grid { grid-template-columns: 1fr; }
}
.account-usage-note {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.account-usage-label {
  color: var(--vnt-text-faint);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.account-usage-card.is-open {
  border-color: rgba(76, 201, 240, 0.24);
}

.account-usage-card.is-limited {
  border-color: rgba(253, 171, 61, 0.34);
  background: rgba(253, 171, 61, 0.08);
}

.account-usage-card.is-warning {
  border-color: rgba(245, 158, 11, 0.58);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.14), rgba(8, 14, 24, 0.8));
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.12), 0 10px 28px rgba(245, 158, 11, 0.08);
}

.account-usage-card.is-disabled {
  border-color: rgba(244, 63, 94, 0.36);
  background: rgba(244, 63, 94, 0.08);
}

.account-usage-alert {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, 0.34);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.1);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.account-usage-alert strong {
  color: var(--text-primary);
  font-size: 13px;
}

.account-usage-alert ul {
  margin: 0;
  padding-left: 18px;
}

.account-usage-alert.is-clear {
  border-color: rgba(34, 197, 94, 0.28);
  background: rgba(34, 197, 94, 0.08);
}

.account-usage-note {
  margin: 12px 0 0;
}

.account-cost-panel {
  display: grid;
  gap: 14px;
  margin: 0 0 12px;
  padding: 16px;
  border: 1px solid rgba(94, 234, 212, 0.24);
  border-radius: 10px;
  background:
    radial-gradient(circle at 0% 0%, rgba(94, 234, 212, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(7, 20, 28, 0.94), rgba(6, 12, 20, 0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.account-cost-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.account-cost-head strong {
  display: block;
  margin-top: 4px;
  color: var(--text-primary);
  font-size: 18px;
  letter-spacing: 0;
}

.account-cost-status {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid rgba(94, 234, 212, 0.25);
  border-radius: 999px;
  color: var(--text-primary);
  background: rgba(94, 234, 212, 0.09);
  font-size: 11px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.account-cost-status.is-clear {
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(34, 197, 94, 0.1);
}

.account-cost-status.is-warning {
  border-color: rgba(245, 158, 11, 0.46);
  background: rgba(245, 158, 11, 0.12);
}

.account-cost-status.is-danger {
  border-color: rgba(244, 63, 94, 0.46);
  background: rgba(244, 63, 94, 0.12);
}

.account-cost-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.account-cost-grid > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(2, 6, 12, 0.48);
}

.account-cost-grid span,
.account-cost-breakdown span {
  display: block;
  color: var(--vnt-text-faint);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.account-cost-grid strong {
  display: block;
  margin: 5px 0 3px;
  color: var(--text-primary);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0;
}

.account-cost-grid small {
  color: var(--text-muted);
  font-size: 12px;
}

.account-cost-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-cost-breakdown span {
  padding: 6px 8px;
  border: 1px solid rgba(94, 234, 212, 0.18);
  border-radius: 999px;
  color: var(--text-secondary);
  background: rgba(94, 234, 212, 0.07);
  letter-spacing: 0.04em;
  text-transform: none;
}

@media (max-width: 900px) {
  .account-usage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-cost-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .account-usage-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .projects-public-entry,
  .project-new-public {
    grid-template-columns: 1fr;
  }

  .projects-public-copy h2,
  .project-new-public-copy h1 {
    font-size: 28px;
  }
}

.sidebar-spacer {
  flex: 1;
  min-height: 16px;
}

.muted {
  color: var(--text-muted);
}

.account-shell,
.projects-shell {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 80px;
}

.account-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.account-header h1 {
  margin: 0 0 6px;
  font-size: 28px;
}

.project-row {
  cursor: pointer;
}

.project-row:hover {
  background: rgba(94,234,212,0.055);
}

.vnt-topbar-divider {
  width: 1px;
  height: 18px;
  background: rgba(29, 31, 32, 0.12);
}

.vnt-topbar-switcher {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: var(--vnt-text-dim);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--vnt-radius-sm);
}

.vnt-topbar-switcher:hover {
  background: var(--vnt-bg-3);
  color: var(--vnt-text);
}

/* Tier-3 .btn-text consumer — only the accent color/sizing deltas here. */
.vnt-topbar-action {
  color: var(--vnt-accent);
  font-size: var(--vnt-fs-13);
  font-weight: 800;
  padding: 7px 10px;
  border-radius: var(--vnt-radius-sm);
}

.vnt-topbar-action:hover {
  background: rgba(89, 128, 166, 0.10);
  color: var(--vnt-accent);
}

.vnt-switcher-dd {
  position: absolute;
  top: 44px;
  left: 120px;
  z-index: var(--z-popover);
  min-width: 240px;
  padding: 6px;
  background: var(--vnt-bg-2);
  border: 1px solid var(--vnt-border);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

.vnt-switcher-dd a {
  display: block;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--vnt-text);
  text-decoration: none;
  font-size: 13px;
}

.vnt-switcher-dd a:hover {
  background: var(--vnt-bg-3);
}

.vnt-switcher-all {
  color: var(--vnt-accent) !important;
  border-top: 1px solid var(--vnt-border);
  margin-top: 4px;
}

.settings-empty {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 16px 0;
}

.settings-loading {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 8px 0;
}

/* Range slider */
.form-range {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--border-color);
  outline: none;
  margin-top: 8px;
}
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue);
  cursor: pointer;
}
.form-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue);
  cursor: pointer;
  border: none;
}

/* Team member cards */
.team-member-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}
.team-member-card:last-child { border-bottom: none; }
.team-member-name { font-weight: 600; font-size: 14px; }
.team-member-detail { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.team-member-actions { display: flex; gap: 6px; }

/* Team member form */
.team-member-form {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
}
.team-member-form h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}
.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

/* Small button variant */
.btn-sm { padding: 4px 10px; font-size: 12px; }
/* Ghost-danger tint — scoped so the FILLED .btn-danger keeps white-on-red. */
.btn-ghost.btn-danger { color: var(--red); }
.btn-ghost.btn-danger:hover { background: var(--red-bg); }

/* ===== File Integrations ===== */
.file-upload-actions {
  display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.file-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  background: var(--surface-hover); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: 6px; font-size: 12px;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.file-btn:hover { background: var(--border); }
.file-btn svg { flex-shrink: 0; }
.dropbox-btn:hover { border-color: #0061FF; }
.gdrive-btn:hover { border-color: #4285F4; }

.file-category-tabs {
  display: flex; gap: 4px; padding: 8px 16px; border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.file-cat-tab {
  padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600;
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  cursor: pointer; white-space: nowrap;
}
.file-cat-tab.active { background: var(--blue); border-color: var(--blue); color: white; }
.file-cat-badge {
  display: inline-block; padding: 1px 6px; border-radius: 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
}
.file-cat-badge.instruction { background: rgba(0,134,192,0.2); color: #58a6ff; }
.file-cat-badge.delivery { background: rgba(63, 122, 88,0.2); color: var(--vnt-success); }
.file-cat-badge.plan { background: rgba(253,171,61,0.2); color: #fdab3d; }
.file-cat-badge.reference { background: rgba(188,77,202,0.2); color: #bc4dca; }
.file-cat-badge.general { background: rgba(139,148,158,0.2); color: #8b949e; }

.manual-link-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); background: var(--surface-hover);
}
.manual-link-form input, .manual-link-form select {
  background: var(--bg); border: 1px solid var(--border); color: var(--text-primary);
  padding: 6px 8px; border-radius: 4px; font-size: 12px;
}
.manual-link-form button { grid-column: span 2; }

/* ===== Google Sign-In ===== */
.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 20px 0;
  color: var(--text-muted); font-size: 13px;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px; background: white; color: #333;
  border: 1px solid #ddd; border-radius: 8px; font-size: 14px;
  font-weight: 600; cursor: pointer; transition: background 0.2s;
}
.btn-google:hover { background: #f5f5f5; }
.btn-google svg { flex-shrink: 0; }
.btn-google.is-localhost-redirect {
  border-color: color-mix(in oklch, var(--accent) 48%, #ddd);
  background: color-mix(in oklch, var(--accent) 8%, white);
}
.google-signin-wrapper { margin-bottom: 16px; }
.google-signin-wrapper .g-rendered-btn {
  display: flex;
  justify-content: center;
}
.google-signin-wrapper.has-google-rendered .google-fallback-btn {
  display: none;
}
.auth-origin-note {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}
.btn-guest-login {
  width: 100%;
  min-height: 44px;
  padding: 12px;
  border: 1px solid color-mix(in oklch, var(--accent) 42%, var(--border-color));
  border-radius: 8px;
  background: color-mix(in oklch, var(--accent) 12%, var(--surface-hover));
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn-guest-login:hover {
  background: color-mix(in oklch, var(--accent) 20%, var(--surface-hover));
  border-color: color-mix(in oklch, var(--accent) 72%, var(--border-color));
  transform: translateY(-1px);
}
.btn-guest-login:disabled {
  cursor: progress;
  opacity: 0.7;
  transform: none;
}

/* ===== Planning Hub ===== */
.planning-hub {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.planning-hub-header {
  margin-bottom: 24px;
}
.planning-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.planning-hub-card {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.planning-hub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  border-color: var(--blue);
}
.planning-hub-card-body {
  padding: 14px 16px 16px;
}
.planning-hub-card .leaflet-container {
  background: var(--surface-hover) !important;
}

/* ===== TowerView Full Page ===== */
.tv-page {
  display: flex;
  height: 100vh;
  width: 100vw;
  background: var(--bg-dark);
  overflow: hidden;
}

.tv-resize-handle {
  width: 5px;
  flex-shrink: 0;
  background: var(--border-color);
  cursor: col-resize;
  position: relative;
  z-index: 10;
  transition: background 0.15s;
}
.tv-resize-handle:hover,
.tv-resize-handle.active {
  background: var(--blue);
}
.tv-resize-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 30px;
  border-left: 1px solid rgba(255,255,255,0.2);
  border-right: 1px solid rgba(255,255,255,0.2);
}

.tv-left-panel {
  width: 320px;
  min-width: 200px;
  max-width: 500px;
  flex-shrink: 0;
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.tv-left-panel::-webkit-scrollbar { width: 6px; }
.tv-left-panel::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }

.tv-center-panel {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tv-center-map {
  flex: 1;
  position: relative;
  min-height: 200px;
}

.tv-right-panel {
  width: 400px;
  min-width: 280px;
  max-width: 600px;
  flex-shrink: 0;
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* Left Panel - Project Header */
.tv-project-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

.tv-back-btn {
  margin-bottom: 12px;
  display: inline-flex;
}

.tv-page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 8px 0;
  outline: none;
  border-bottom: 1px dashed transparent;
  min-height: 28px;
  line-height: 1.3;
}

.tv-page-title:hover {
  border-bottom-color: var(--border-color);
}

.tv-page-title:focus {
  border-bottom-color: var(--blue);
}

.tv-project-address {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  position: relative;
  flex-wrap: wrap;
  align-items: center;
}
.tv-address-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
}

.tv-addr-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 0 0 8px 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.tv-addr-suggestion {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
}
.tv-addr-suggestion:last-child {
  border-bottom: none;
}
.tv-addr-suggestion:hover {
  background: var(--surface-hover);
}

.tv-address-input {
  flex: 1;
  font-size: 13px;
  padding: 6px 10px;
}

.tv-ground-elev {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tv-ground-elev label {
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  color: var(--vnt-text-faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.tv-ground-elev span {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 16px;
}

/* Segments Panel */
.tv-segments-panel {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

.tv-segments-panel h3 {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  text-transform: uppercase;
  color: var(--vnt-text-faint);
  margin-bottom: 12px;
  letter-spacing: 0.12em;
}

.tv-building-layout {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* Building tower wrapper — outline gives it structure */
.tv-building-tower {
  display: flex;
  flex-direction: column;
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  position: relative;
  background: rgba(0,0,0,0.2);
}

/* Roof cap */
.tv-building-tower::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.15), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.tv-diag-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 2px;
  position: relative;
  min-height: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.tv-diag-block:last-child {
  border-bottom: none;
}

.tv-diag-block-name {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding: 0 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.tv-diag-block-info {
  font-size: 10px;
  color: rgba(255,255,255,0.65);
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.tv-diag-total {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
  padding: 2px 0;
}

.tv-diag-gnd {
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  padding-top: 3px;
  position: relative;
}

.tv-diag-gnd::before {
  content: "";
  display: block;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--text-muted) 0, var(--text-muted) 4px, transparent 4px, transparent 8px);
  margin-bottom: 2px;
}

/* Segment list column wrapper */
.tv-seg-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Segment items are now direct children of .tv-building-layout grid */
.tv-segment-list-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.tv-no-building {
  color: var(--text-muted);
  font-size: 12px;
  padding: 20px 0;
  text-align: center;
}

.tv-add-seg-btn {
  margin-top: 10px;
  width: 100%;
}

/* Segment Item in full page */
.tvp-segment-item {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: var(--bg-card);
  border-radius: 8px;
  transition: background 0.15s;
}

.tvp-segment-item:hover {
  background: var(--bg-card-hover);
}

.tvp-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.tvp-stepper-btn {
  width: 28px;
  min-width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-hover);
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  padding: 0;
  flex-shrink: 0;
}
.tvp-stepper-btn:hover {
  background: var(--blue);
  color: white;
}
.tvp-stepper-val {
  min-width: 32px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0 2px;
}

.tvp-seg-color {
  width: 4px;
  border-radius: 4px;
  flex-shrink: 0;
}

.tvp-seg-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tvp-seg-header {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tvp-seg-header .tvp-seg-name {
  flex: 1;
}

.tvp-seg-steppers {
  display: flex;
  gap: 8px;
}

.tvp-stepper-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tvp-stepper-group label {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  color: var(--vnt-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.tvp-seg-name {
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  padding: 2px 0;
  font-family: var(--font);
  outline: none;
  width: 100%;
}

.tvp-seg-name:focus {
  border-bottom-color: var(--blue);
}

.tvp-seg-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.tvp-seg-body select.tvp-seg-type {
  background: var(--bg-dark);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font);
  outline: none;
  width: 100%;
}

.tvp-seg-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--text-muted);
}

.tvp-seg-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.tvp-seg-delete:hover {
  color: var(--red);
}
.tvp-segment-item:hover .tvp-seg-delete {
  opacity: 1;
}

.tvp-seg-drag {
  display: flex;
  align-items: center;
  cursor: grab;
  color: var(--text-muted);
  font-size: 16px;
  padding: 0 2px;
  user-select: none;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.tvp-seg-drag:hover {
  opacity: 1;
  color: var(--text-primary);
}

/* Pins Panel */
.tv-pins-panel {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  /* The rail is a flex column and this is its only crushable child (the list
     body clips), so flexbox stole ALL missing height from the Shot List when
     Site Massing grew (v430) — 26px remained: title only, Add Shot clipped
     into invisibility. Never shrink; the rail scrolls instead. */
  flex-shrink: 0;
}

.tv-pins-panel h3 {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  text-transform: uppercase;
  color: var(--vnt-text-faint);
  margin-bottom: 12px;
  letter-spacing: 0.12em;
}

/* Map Toolbar */
.tv-map-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-color);
  z-index: 500;
  flex-shrink: 0;
}

/* Airspace / LAANC toggle button */
.tv-laanc-toggle {
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tv-laanc-toggle.active {
  background: rgba(0, 134, 192, 0.18);
  color: #5bc0de;
  border-color: #0086c0;
}

.tv-align-status {
  font-size: 12px;
  color: var(--yellow);
  font-weight: 600;
}

.tv-opacity-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.tv-plan-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  /* Below the search bar, not under it — the sliders were painted beneath
     the address search and unreachable (owner report 2026-08-19). */
  position: relative;
  z-index: 640;
  margin-top: 6px;
}
.tv-plan-ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.tv-plan-ctrl label {
  white-space: nowrap;
}
.tv-plan-overlay-img {
  cursor: move;
  border: 2px dashed rgba(255,255,255,0.5);
  pointer-events: auto !important;
}
/* Allow plan overlay to receive pointer events through Leaflet's pane */
.tv-plan-active .leaflet-overlay-pane { pointer-events: auto !important; }
.tv-pin-height-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.tv-opacity-wrap label {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Alignment markers */
.tv-align-marker-a,
.tv-align-marker-b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: white;
  text-align: center;
  line-height: 24px;
}

.tv-align-marker-a {
  background: var(--red);
  border: 2px solid white;
}

.tv-align-marker-b {
  background: var(--blue);
  border: 2px solid white;
}

/* Right Panel - Cesium */
.tv-cesium-viewer {
  height: 45vh;
  min-height: 300px;
  max-height: 600px;
  background: #000;
  position: sticky;
  top: 0;
  z-index: 5;
  overflow: hidden;
  flex-shrink: 0;
}

.tv-3d-controls {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--border-color);
}

.tv-control-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tv-control-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tv-control-group label span {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 13px;
}

/* Grouped slider boxes */
.tv-slider-box {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tv-slider-box-title {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vnt-text-faint);
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}
.tv-slider-box .tv-control-group {
  gap: 4px;
}
.tv-slider-box .form-range {
  margin-top: 4px;
}

.tv-floor-select {
  font-size: 12px;
  padding: 6px 10px;
}
.tv-height-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tv-height-input {
  width: 80px;
  font-size: 14px !important;
  font-weight: 700;
  padding: 4px 8px !important;
  text-align: right;
  background: var(--surface-hover);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  -moz-appearance: textfield;
}
.tv-height-input::-webkit-inner-spin-button,
.tv-height-input::-webkit-outer-spin-button {
  opacity: 1;
}
.tv-height-input:focus {
  border-color: var(--accent);
  outline: none;
}
.tv-height-unit {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Per-pin custom altitude stack (TowerView right panel)
 * ------------------------------------------------------------------------- */
.tv-pin-custom-stack {
  /* Reuse .tv-slider-box base; override padding + make summary clickable */
  padding: 0;
  gap: 0;
}
.tv-pin-custom-stack[open] {
  padding: 12px 14px;
  gap: 10px;
}
.tv-pin-custom-stack:not([open]) > .tv-pin-custom-stack-summary {
  border-bottom: none;
  padding: 10px 14px;
}
.tv-pin-custom-stack-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  gap: 10px;
}
.tv-pin-custom-stack-summary::-webkit-details-marker { display: none; }
.tv-pin-custom-stack-summary > span:first-child {
  flex: 1;
}
.tv-pin-custom-stack-toggle {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  flex: 0 0 auto;
}
.tv-pin-custom-stack-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.tv-pin-custom-stack-slider {
  position: absolute;
  inset: 0;
  background: var(--border-color);
  border-radius: 999px;
  transition: background 0.15s ease;
}
.tv-pin-custom-stack-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.tv-pin-custom-stack-toggle input:checked + .tv-pin-custom-stack-slider {
  background: var(--accent, #4caf50);
}
.tv-pin-custom-stack-toggle input:checked + .tv-pin-custom-stack-slider::before {
  transform: translateX(14px);
}
.tv-pin-stack-help {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}
.tv-pin-stack-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tv-pin-stack-row {
  display: grid;
  grid-template-columns: 1fr 90px 28px;
  gap: 6px;
  align-items: center;
}
.tv-pin-stack-head {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vnt-text-faint);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border-color);
}
.tv-pin-stack-empty {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  padding: 6px 0;
}
.tv-pin-stack-lbl-input,
.tv-pin-stack-ht-input {
  font-size: 12px !important;
  padding: 4px 8px !important;
}
.tv-pin-stack-ht-input {
  text-align: right;
}
.tv-pin-stack-del-btn {
  padding: 2px 6px !important;
  font-size: 14px !important;
  line-height: 1;
  min-width: 0 !important;
}
.tv-pin-stack-add {
  align-self: flex-start;
  font-size: 11px !important;
  padding: 4px 10px !important;
}

.tv-3d-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* Footer action-bar contract (photo/360/video): quiet secondaries are the
   standard .btn-ghost treatment — no bespoke skin — with the autosave chip
   anchored right by the space-between above. Only the busy state is ours. */
.tv-preview-export-btn:disabled {
  cursor: wait;
  opacity: 0.68;
}

.tv-shot-autosave-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  color: var(--text-muted);
  background: rgba(9, 17, 25, 0.72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.tv-shot-autosave-status::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.tv-shot-autosave-status.is-saving {
  color: var(--vnt-accent);
  border-color: rgba(89, 128, 166, 0.34);
}

.tv-shot-autosave-status.is-saved {
  color: var(--vnt-success);
  border-color: rgba(87, 217, 111, 0.30);
}

.tv-shot-autosave-status.is-draft {
  color: var(--vnt-accent-2);
  border-color: rgba(255, 204, 102, 0.30);
}

.tv-shot-autosave-status.is-error {
  color: var(--vnt-danger);
  border-color: rgba(255, 93, 108, 0.36);
}

.tv-3d-info {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  font-size: 11px;
  color: var(--text-muted);
}
.tv-3d-standby .cesium-viewer,
.tv-3d-standby .cesium-widget {
  display: none;
}
/* Standby means asleep — hide the live-instrument chrome too. */
.tv-3d-standby .vnt-hud,
.tv-3d-standby .vnt-compass,
.tv-3d-standby .vnt-building-preview,
.tv-3d-standby .vnt-3d-time-badge,
.tv-3d-standby .vnt-viewfinder-gsd,
.tv-3d-keyless .vnt-hud,
.tv-3d-keyless .vnt-compass,
.tv-3d-keyless .vnt-building-preview,
.tv-3d-keyless .vnt-3d-time-badge,
.tv-3d-keyless .vnt-viewfinder-gsd {
  display: none !important;
}
.tv-3d-standby-msg {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: var(--vnt-z-overlay-data);
  padding: 12px 14px;
  border: 1px solid rgba(92,203,216,0.28);
  border-radius: 8px;
  background: rgba(5,10,16,0.64);
  color: rgba(255,255,255,0.88);
  pointer-events: none;
  box-shadow: 0 12px 36px rgba(0,0,0,0.26);
}
.tv-3d-standby-kicker {
  color: var(--vnt-accent);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tv-3d-standby-title {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 800;
}
.tv-3d-standby-body {
  margin-top: 3px;
  color: rgba(255,255,255,0.62);
  font-size: 11px;
  line-height: 1.35;
}

/* Pin Navigation */
.tv-pin-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
}
.tv-pin-nav-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Backplate Controls */
.tv-backplate-info {
  background: var(--surface-hover);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 12px;
}
.tv-bp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  color: var(--text-secondary);
}
.tv-bp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tv-bp-subject { background: #ff6b6b; }
.tv-bp-drone { background: #00d2ff; }
.tv-bp-icon { font-size: 14px; }
.tv-bp-coord {
  margin-left: auto;
  font-family: monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.tv-bp-actions {
  margin-top: 4px;
}
.tv-bp-actions .btn {
  width: 100%;
}

/* Video Keyframe Cards */
.tv-video-keyframes { display: flex; gap: 6px; margin-bottom: 4px; }
/* START and END live side by side in one block; the full-width orbit card
   replaces END for orbit moves (and START spans both columns then). */
.tv-video-keyframes-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 4px;
}
.tv-video-keyframes-stack .tv-keyframe-card { min-width: 0; }
#tvKfOrbitCard { grid-column: 1 / -1; }
.tv-video-keyframes-stack.is-orbit #tvKfStartCard { grid-column: 1 / -1; }
.tv-keyframe-card {
  flex: 1; padding: 8px; border-radius: 6px;
  background: var(--surface-hover); border: 1px solid var(--border-color);
}
.tv-keyframe-card-compact {
  padding: 7px 8px;
  background: rgba(89, 128, 166,0.07);
  border-color: rgba(89, 128, 166,0.20);
}
.tv-keyframe-card.set {
  border-color: var(--vnt-accent);
  background: color-mix(in oklch, var(--vnt-accent) 8%, transparent);
}
.tv-kf-header { font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.tv-kf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tv-kf-detail { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; min-height: 16px; line-height: 1.4; }
.tv-kf-btn { width: 100%; font-size: 11px !important; padding: 3px 6px !important; }
.tv-kf-alt-row { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.tv-kf-alt-label { font-size: 10px; font-weight: 600; color: var(--text-muted); flex: 0 0 auto; }
/* Shared height-row pattern squeezed into the narrow keyframe cards. */
.tv-kf-alt-row .tv-height-row { flex: 1; min-width: 0; }
.tv-kf-alt-row .tv-height-input {
  width: 100%;
  min-width: 0;
  flex: 1;
  font-size: 12px !important;
  padding: 3px 6px !important;
}
.tv-kf-slider { height: 14px; margin: 2px 0 0; accent-color: var(--accent); }
.tv-kf-alt-range { width: 100%; margin: 0 0 4px; accent-color: var(--vnt-accent); }
.tv-video-move-group {
  margin-bottom: 8px;
}
.tv-video-move-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tv-video-move-pills .tv-pill,
.tv-video-orbit-dir .tv-pill {
  border-radius: 10px;
  text-align: center;
  font-weight: 800;
}
.tv-video-move-pills .tv-pill.active,
.tv-video-orbit-dir .tv-pill.active {
  background: linear-gradient(135deg, rgba(89, 128, 166,0.92), rgba(143,247,255,0.72));
  color: #041013;
  border-color: rgba(224,255,252,0.65);
  box-shadow: 0 0 0 1px rgba(89, 128, 166,0.24), 0 10px 22px rgba(89, 128, 166,0.12);
}
.tv-video-move-hint {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: var(--vnt-fs-11);
  line-height: 1.35;
}
.tv-video-orbit-options {
  padding: 8px;
  margin: 6px 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(143,247,255,0.18);
  background: rgba(89, 128, 166,0.055);
}

/* Shot Type & Time Pill Buttons */
.tv-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tv-pill {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.tv-pill:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--text-muted);
}
.tv-pill.active {
  color: #fff;
  background: color-mix(in oklch, var(--vnt-accent) 24%, var(--bg-card));
  border-color: var(--vnt-accent);
}
/* Legacy per-type/per-time pill accent rules removed — these classes render
   only inside .vnt-planning-shell, whose overrides win (see #tvShotTypePills /
   .tv-pill-group rules in the shell section). */

/* ==========================================
   Seg component — ONE compact segmented-toggle recipe (design
   audit DC4). Consumers: the Time Windows rows (#tvTimePills
   .tv-tod-card + custom row) and the Shot Type switch
   (#tvShotTypePills .tv-pill; its sizing and its saturated
   active fill live with the shell rules — as the panel's
   primary switch it deliberately opts out of the quiet active
   tint below). Identity is the leading dot — never per-value
   active fills. New consumers join these selector lists
   instead of copying the recipe.
   ========================================== */
.tv-tod-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.tv-tod-card,
.tv-tod-custom-row,
.vnt-planning-shell #tvShotTypePills .tv-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  min-width: 0;
  padding: 3px 8px 3px 6px;
  border: 1px solid var(--vnt-border);
  border-left: 3px solid transparent;
  border-radius: var(--vnt-radius-sm);
  background: rgba(255,255,255,0.025);
  color: var(--vnt-text-dim);
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.tv-tod-card:hover,
.vnt-planning-shell #tvShotTypePills .tv-pill:hover {
  background: rgba(255,255,255,0.045);
  border-color: var(--vnt-border-2);
  color: var(--vnt-text);
}
.tv-tod-card.active,
.tv-tod-custom-row.active {
  border-color: var(--vnt-border-2);
  border-left-color: var(--vnt-accent);
  background: color-mix(in oklch, var(--vnt-accent) 12%, var(--vnt-bg-3));
  color: var(--vnt-text);
}
.tv-tod-dot {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.18);
}
.tv-tod-icon {
  color: #fff;
  font-size: 9px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.tv-tod-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.1;
  color: inherit;
}
.tv-tod-time {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1;
  font-size: 10px;
  font-weight: 700;
  color: var(--vnt-text-faint);
}
.tv-tod-card.active .tv-tod-time {
  color: var(--vnt-accent);
}

/* Custom time row below the window rows — shared seg recipe above,
   but it is a container (the <input> inside is the control). */
.tv-tod-custom-row {
  grid-column: 1 / -1;
  cursor: default;
}

/* Small pill variant */
.tv-pill-sm .tv-pill { padding: 4px 10px; font-size: 11px; }
.tv-video-move-pills.tv-pill-sm .tv-pill.active,
.tv-video-orbit-dir.tv-pill-sm .tv-pill.active {
  background: linear-gradient(135deg, rgba(89, 128, 166,0.92), rgba(143,247,255,0.72));
  color: #041013;
}
.tv-fov-cal-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.2;
}
.tv-fov-nudge {
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(92,203,216,0.34);
  border-radius: 6px;
  background: rgba(12,20,28,0.76);
  color: var(--vnt-accent, var(--vnt-accent));
  font: 800 10px var(--vnt-font-mono, monospace);
  cursor: pointer;
}
.tv-fov-nudge:hover {
  border-color: rgba(92,203,216,0.68);
  background: rgba(92,203,216,0.12);
}
/* Lock Camera Toggle */
.tv-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.tv-toggle-row label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.tv-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
}
.tv-toggle-track {
  display: block;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  position: relative;
  transition: background 0.2s;
}
.tv-toggle-thumb {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s, background 0.2s;
}
.tv-toggle-btn.active .tv-toggle-track {
  background: var(--blue);
  border-color: var(--blue);
}
.tv-toggle-btn.active .tv-toggle-thumb {
  background: #fff;
  transform: translateX(16px);
}

/* Airspace Warning */
.tv-airspace-banner {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 8px;
}
.tv-airspace-error {
  background: rgba(226, 68, 92, 0.15);
  border: 1px solid var(--red);
  color: #ff6b6b;
}
.tv-airspace-warn {
  background: rgba(253, 171, 61, 0.15);
  border: 1px solid #fdab3d;
  color: #fdab3d;
}
.tv-airspace-info {
  /* R7: compliant states go QUIET — neutral ink on a hairline, no warning
     dress. Loud styling is reserved for actual violations. */
  background: transparent;
  border: 1px solid var(--vnt-border);
  color: var(--vnt-text-dim);
}

/* Building Summary Stats */
.tv-building-summary {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.tv-bldg-stat {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}
.tv-bldg-stat label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tv-bldg-stat-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 2px;
}

.tv-bldg-height-input {
  width: 58px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
  padding: 2px 4px;
  text-align: center;
  -moz-appearance: textfield;
}
.tv-bldg-height-input::-webkit-outer-spin-button,
.tv-bldg-height-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tv-bldg-height-input:focus {
  outline: none;
  border-color: var(--accent);
}
.tv-bldg-stat-editable {
  border-color: var(--accent);
  background: rgba(87,155,252,0.06);
}

/* Building Template Presets */
.tv-template-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.tv-template-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px dashed var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tv-template-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--blue);
}

/* Override Cesium widget styling for dark theme */
.tv-cesium-viewer .cesium-viewer-bottom {
  display: none !important;
}

.tv-cesium-viewer .cesium-widget-credits {
  display: none !important;
}

/* Responsive: collapse on smaller screens */
@media (max-width: 1200px) {
  .tv-right-panel {
    width: 340px;
  }
}

/* Flight Brief Modal */
.brief-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.brief-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.brief-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-color);
}

.brief-modal-header h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.brief-modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.brief-modal-close:hover { color: var(--text-primary); }

.brief-modal-body {
  overflow-y: auto;
  padding: 20px 24px;
  flex: 1;
}

.brief-section {
  margin-bottom: 20px;
}

.brief-section h3 {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}

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

.brief-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 120px;
}

.brief-row .form-input {
  flex: 1;
  padding: 6px 10px;
  font-size: 13px;
  background: var(--surface-hover);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
}

.brief-row .brief-val {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.brief-row-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.brief-row-half .brief-row {
  margin-bottom: 8px;
}

.brief-section textarea.form-input {
  width: 100%;
  padding: 10px;
  font-size: 13px;
  background: var(--surface-hover);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  resize: vertical;
  font-family: inherit;
}

.brief-modal-footer {
  display: flex;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  justify-content: flex-end;
}

/* Shot List in Brief */
.brief-shot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brief-shot-card {
  display: flex;
  gap: 12px;
  padding: 10px;
  background: var(--surface-hover);
  border-radius: 6px;
  border: 1px solid var(--border-color);
}
.brief-shot-thumb {
  width: 140px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.brief-shot-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-dark);
  color: var(--text-muted);
  font-size: 11px;
}
.brief-shot-info {
  flex: 1;
  min-width: 0;
}
.brief-shot-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--text-primary);
}
.brief-shot-meta {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Brief V2 — BINYAN-inspired premium layout */
.brief-modal-v2 {
  width: 860px;
  max-width: 95vw;
}
.brief-header-v2 {
  background: var(--bg-dark);
  border-radius: 12px 12px 0 0;
}
.brief-section-v2 {
  margin-bottom: 24px;
}
.brief-section-title {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vnt-text-faint);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 6px;
  margin-bottom: 14px;
}
.brief-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.brief-map-container {
  height: 260px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-dark);
}
.brief-map-tooltip {
  background: rgba(0,0,0,0.8) !important;
  border: none !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.brief-map-tooltip::before { display: none !important; }
.brief-overview-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brief-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.brief-field label {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vnt-text-faint);
}
.brief-input {
  font-size: 13px !important;
  padding: 6px 10px !important;
  background: var(--surface-hover) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
}
.brief-field-row {
  display: flex;
  gap: 12px;
}
.brief-field-row .brief-field {
  flex: 1;
}
.brief-stats-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.brief-stat {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  background: var(--surface-hover);
  border-radius: 6px;
  border: 1px solid var(--border-color);
}
.brief-stat-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  display: block;
  line-height: 1.2;
}
.brief-stat-label {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vnt-text-faint);
}
.brief-shot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.brief-shot-card-v2 {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: var(--surface-hover);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  position: relative;
}
/* Legacy brief modal corner number — positioning layer over the shared badge. */
.vnt-letter-badge.brief-shot-num {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  --badge-bg: var(--accent);
  --badge-ink: #fff;
  border: 0;
}
.brief-shot-preview {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
}
.brief-shot-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brief-shot-empty-v2 {
  width: 100%;
  height: 100%;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.brief-shot-details {
  flex: 1;
  min-width: 0;
}
.brief-shot-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brief-shot-tags {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.brief-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
}
.brief-tag-type {
  background: rgba(79,70,229,0.2);
  color: #818cf8;
}
.brief-tag-tod {
  background: rgba(255,152,0,0.15);
  color: #ff9800;
}
.brief-shot-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  font-size: 11px;
}
.brief-spec-label {
  color: var(--text-muted);
  font-size: 10px;
}
.brief-spec-val {
  color: var(--text-secondary);
  margin-left: 4px;
}
.brief-shot-coords {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.tv-csv-import-modal {
  max-width: 760px;
}
.tv-csv-preview-subtitle {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}
.tv-csv-preview-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.tv-csv-preview-summary div {
  padding: 12px;
  border: 1px solid rgba(92, 203, 216, 0.28);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(92,203,216,0.12), rgba(214,235,126,0.07));
}
.tv-csv-preview-summary span,
.tv-csv-preview-row small {
  display: block;
  color: var(--vnt-text-faint);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.tv-csv-preview-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--text-primary);
  font-size: 18px;
}
.tv-csv-preview-note {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(214, 235, 126, 0.22);
  border-radius: 10px;
  background: rgba(214, 235, 126, 0.07);
  color: var(--text-secondary);
  font-size: 12px;
}
.tv-csv-preview-list {
  display: grid;
  gap: 6px;
}
.tv-csv-preview-row {
  display: grid;
  grid-template-columns: 1fr 90px 84px;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
}
.tv-csv-preview-row span {
  color: var(--text-primary);
  font-weight: 700;
}
.tv-csv-preview-row b {
  color: var(--vnt-accent, var(--vnt-accent));
  font-size: 12px;
}
.tv-csv-preview-row small {
  text-align: right;
  text-transform: none;
  letter-spacing: 0;
}
.tv-shot-csv-preview-row {
  grid-template-columns: minmax(0, 1.1fr) 92px minmax(120px, 0.9fr);
}
.tv-shot-csv-help-modal {
  max-width: 560px;
}
.tv-shot-csv-help-simple {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(89, 128, 166, 0.28);
  border-radius: 10px;
  background: rgba(89, 128, 166, 0.08);
}
.tv-shot-csv-help-simple strong,
.tv-shot-csv-help-grid b {
  color: var(--vnt-accent, var(--vnt-accent));
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tv-shot-csv-help-simple code {
  display: block;
  overflow-x: auto;
  padding: 9px 10px;
  border: 1px solid rgba(132, 185, 196, 0.18);
  border-radius: 8px;
  background: rgba(2, 8, 12, 0.62);
  color: var(--text-primary);
  font-family: var(--vnt-font-mono, monospace);
  font-size: 12px;
}
.tv-shot-csv-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.tv-shot-csv-help-grid div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(132, 185, 196, 0.16);
  border-radius: 9px;
  background: rgba(2, 8, 12, 0.36);
}
.tv-shot-csv-help-grid span {
  color: var(--text-secondary);
  font-size: 12px;
}
.tv-shot-csv-sample-link {
  width: 100%;
  justify-content: center;
  margin-top: 12px;
}
.tv-csv-preview-warnings {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(253,171,61,0.28);
  border-radius: 10px;
  background: rgba(253,171,61,0.08);
  color: var(--text-secondary);
}
.tv-csv-preview-warnings strong {
  color: var(--yellow);
  font-size: 12px;
}
.tv-csv-preview-warnings ul {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 12px;
}
.brief-ops-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.brief-ops-col h4 {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.brief-ops-col .brief-field {
  margin-bottom: 6px;
}

@media (max-width: 960px) {
  .tv-page {
    flex-direction: column;
  }
  .tv-left-panel {
    width: 100%;
    max-height: 35vh;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
  .tv-right-panel {
    width: 100%;
    max-height: 35vh;
    border-left: none;
    border-top: 1px solid var(--border-color);
  }
  .tv-cesium-viewer {
    height: 22vh;
    min-height: 200px;
    max-height: none;
  }
}

/* ===== Pricing Estimator ===== */
.est-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.est-left, .est-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.est-right {
  position: relative;
}
.est-card {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
}
.est-price-card {
  position: sticky;
  top: 24px;
}
.est-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.est-shots-display {
  font-size: 48px;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  margin-bottom: 16px;
  line-height: 1;
}
.est-presets {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.est-preset {
  background: var(--bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 6px 18px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.est-preset:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.est-preset.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.est-custom-input {
  display: flex;
  align-items: center;
  gap: 12px;
}
.est-label {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.est-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-primary);
  font-size: 14px;
  max-width: 120px;
}
.est-input:focus {
  outline: none;
  border-color: var(--accent);
}
.est-times {
  display: flex;
  gap: 10px;
}
.est-time-card {
  flex: 1;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.5;
  background: var(--bg);
}
.est-time-card.active {
  opacity: 1;
  border-color: rgba(255,255,255,0.3);
}
.est-time-sunrise { background: linear-gradient(135deg, #c47d1a, #d4a04a); }
.est-time-midday { background: linear-gradient(135deg, #7a6520, #b89a3a); }
.est-time-twilight { background: linear-gradient(135deg, #8b4a6b, #c27a7a); }
.est-time-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}
.est-time-cap {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
}
.est-times-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 10px;
  text-align: center;
  font-style: italic;
}
.est-tour-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.est-tour-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.est-tour-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.est-toggle {
  width: 48px;
  height: 26px;
  border-radius: 13px;
  background: var(--border-color);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.est-toggle.active {
  background: var(--accent);
}
.est-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.est-toggle.active .est-toggle-knob {
  transform: translateX(22px);
}
/* Breakdown */
.est-breakdown {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.est-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
}
.est-line-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.est-line-detail {
  font-size: 13px;
  color: var(--text-secondary);
}
.est-line-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  min-width: 70px;
}
.est-line-note {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: -8px;
  padding-left: 2px;
}
.est-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
  margin-bottom: 20px;
}
.est-total-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.est-total-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
}
.est-summary {
  background: var(--bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px 16px;
}
.est-summary-line {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.est-summary-line strong {
  color: var(--text-primary);
}
@media (max-width: 768px) {
  .est-layout {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .est-price-card {
    position: static;
  }
  .est-times {
    flex-direction: column;
  }
}

/* ===== Client Portal ===== */
/* R3 follow-up (v459): the portal joins the paper standard — the client
   sees the same drawing language as the brief PDF. Tenant theming still
   flows through --portal-primary. */
:root {
  --portal-primary: var(--vnt-accent);
  --portal-secondary: var(--vnt-success);
  --portal-bg: var(--vnt-bg);
  --portal-surface: var(--vnt-bg-2);
  --portal-text: var(--vnt-text);
}

.portal-page {
  min-height: 100vh;
  width: 100%;
  background: var(--portal-bg);
  color: var(--portal-text);
  font-family: var(--vnt-font-body);
  padding-bottom: 60px;
}

.portal-loading,
.portal-error,
.portal-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 24px 0;
}
.portal-brand-logo {
  height: 28px;
  width: auto;
}
.portal-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #04141a;
  font-weight: 800;
  font-size: 15px;
}
.portal-brand-name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
}
.portal-brand-kicker {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vnt-text-dim);
  border: 1px solid var(--vnt-border);
  border-radius: 0;
  padding: 4px 10px;
}
.portal-empty-row {
  max-width: 1100px;
  margin: 8px auto 0;
  padding: 12px 24px;
  font-size: 13px;
  color: var(--vnt-text-dim);
}
.portal-shot-letter-icon {
  background: transparent;
  border: 0;
}
.portal-shot-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--pin-color, var(--vnt-accent));
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  border: 2px solid var(--vnt-bg-2);
  box-shadow: 0 2px 8px rgba(29, 31, 32, 0.28);
}
.portal-empty {
  text-align: center;
  padding: 80px 24px;
  font-size: 16px;
  color: var(--vnt-text-dim);
}

.portal-error {
  color: var(--vnt-danger);
}

/* Header */
.portal-header {
  text-align: center;
  padding: 48px 24px 32px;
  max-width: 800px;
  margin: 0 auto;
}

.portal-logo {
  height: 48px;
  margin-bottom: 20px;
  object-fit: contain;
}

.portal-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.portal-subtitle {
  font-size: 16px;
  color: var(--vnt-text-dim);
  margin-bottom: 4px;
}

.portal-address {
  font-size: 14px;
  color: var(--vnt-text-faint);
}

/* Sections */
.portal-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

.portal-section-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--vnt-border);
}

/* Deliverables Grid */
.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.portal-card {
  display: block;
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--portal-surface);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border: 1px solid var(--vnt-border);
}

.portal-card:hover {
  transform: translateY(-4px);
  border-color: var(--vnt-accent-400, var(--vnt-accent));
  box-shadow: 0 12px 32px rgba(29, 31, 32, 0.16);
}

.portal-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--vnt-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portal-card-thumb-placeholder {
  color: var(--vnt-text-faint);
}

.portal-card-info {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.portal-card-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.portal-card-type {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* Map */
.portal-map {
  width: 100%;
  height: 300px;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--vnt-border);
}

/* Planned-flight preview — the drone traces the route in letter order. */
.portal-flight-ctl.leaflet-bar {
  border: none;
  box-shadow: none;
  margin: 0 0 10px 10px;
}
.portal-flight-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--vnt-border);
  border-radius: 0;
  background: var(--portal-surface, var(--vnt-bg-2));
  color: var(--vnt-text);
  font: 700 12px/1 var(--vnt-font-body, inherit);
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(29, 31, 32, 0.14);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.portal-flight-btn:hover { border-color: var(--vnt-accent, #5980a6); }
.portal-flight-btn.is-playing { color: var(--vnt-accent, #5980a6); border-color: var(--vnt-accent, #5980a6); }
.portal-flight-glyph {
  font-size: 10px;
  line-height: 1;
  color: var(--vnt-accent, #5980a6);
}
.portal-flight-drone-icon { background: transparent; border: none; overflow: visible; }
.portal-flight-drone svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--pin-color, var(--vnt-accent));
  stroke-width: 1.6;
  filter: drop-shadow(0 1px 3px rgba(29, 31, 32, 0.45));
}
.portal-flight-drone svg circle { fill: var(--vnt-bg-2, #fff); }
.portal-flight-drone svg rect { fill: var(--pin-color, var(--vnt-accent)); stroke: none; }
/* Letter marker flashes when the drone "captures" it. */
.portal-shot-letter.is-captured {
  animation: portalCapturePulse 620ms ease-out;
}
@keyframes portalCapturePulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pin-color, var(--vnt-accent)) 70%, transparent); transform: scale(1); }
  40%  { transform: scale(1.28); }
  100% { box-shadow: 0 0 0 16px transparent; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .portal-shot-letter.is-captured { animation: none; }
}

/* Shot details table */
.portal-shots-table-wrap {
  border-radius: 0;
  overflow: auto;
  background: var(--portal-surface);
  border: 1px solid var(--vnt-border);
}

.portal-shots-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.portal-shots-table th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--vnt-text-dim);
  border-bottom: 1px solid var(--vnt-border);
  white-space: nowrap;
}

.portal-shots-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--vnt-bg-3);
}

.portal-shots-table tr:last-child td {
  border-bottom: none;
}

/* Password form */
.portal-password {
  max-width: 400px;
  margin: 0 auto;
  padding: 120px 24px 60px;
  text-align: center;
}

.portal-password-icon {
  color: var(--vnt-text-dim);
  margin-bottom: 20px;
}

.portal-password h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.portal-password p {
  color: var(--vnt-text-dim);
  font-size: 14px;
  margin-bottom: 24px;
}

.portal-pw-error {
  color: var(--vnt-danger);
  font-size: 13px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(171, 70, 52, 0.08);
  border: 1px solid rgba(171, 70, 52, 0.35);
  border-radius: 0;
}

.portal-pw-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--vnt-border);
  border-radius: 0;
  background: var(--portal-surface);
  color: inherit;
  font-size: 15px;
  margin-bottom: 12px;
  outline: none;
  transition: border-color 0.2s;
}

.portal-pw-input:focus {
  border-color: var(--portal-primary);
}

.portal-pw-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 0;
  background: var(--portal-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.portal-pw-btn:hover {
  opacity: 0.9;
}

/* Footer */
.portal-footer {
  /* Normal flow — the old fixed overlay floated "Powered by"
     over mid-page content. */
  text-align: center;
  padding: 32px 24px 40px;
  font-size: 13px;
  color: var(--vnt-text-faint);
}

/* Mobile */
@media (max-width: 640px) {
  .portal-header {
    padding: 32px 16px 24px;
  }
  .portal-title {
    font-size: 22px;
  }
  .portal-section {
    padding: 0 16px 32px;
  }
  .portal-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .portal-map {
    height: 220px;
  }
  .portal-shots-table {
    font-size: 12px;
  }
  .portal-shots-table th,
  .portal-shots-table td {
    padding: 8px 10px;
  }
}

/* ===== Client Shot Approval Workflow ===== */

/* Operator-side: "Client Approval" card on job detail page */
.approval-card-summary .approval-counts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.approval-feedback-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.approval-feedback-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  background: rgba(29, 31, 32, 0.03);
  border-radius: 0;
  border-left: 3px solid var(--accent);
}
.approval-feedback-body { flex: 1; min-width: 0; }
.approval-feedback-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.approval-feedback-msg {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.approval-feedback-more {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 4px;
}

/* Per-feedback inline chips (used on summary card + shot list rows) */
.approval-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.approval-status-chip-approved { background: rgba(63, 122, 88, 0.14); color: var(--vnt-success); }
.approval-status-chip-changes  { background: rgba(171, 70, 52, 0.12); color: var(--vnt-danger); }
.approval-status-chip-comment  { background: rgba(89, 128, 166, 0.14); color: var(--vnt-accent); }

/* Operator-side "Send for Approval" modal */
.client-shot-review-modal {
  max-width: 520px;
}
.approval-modal-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.approval-modal-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-secondary, var(--vnt-bg-2));
  border: 1px solid var(--border, var(--vnt-border));
  border-radius: 0;
  color: var(--text-primary);
  font-size: 14px;
  box-sizing: border-box;
}
.approval-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.approval-link-row .approval-modal-input { flex: 1; }
.approval-email-status {
  margin-top: 8px;
  font-size: 12px;
}

/* Client portal — shot review grid */
.client-shot-review {
  padding-top: 8px;
}
.portal-review-intro {
  color: var(--portal-text);
  opacity: 0.8;
  font-size: 14px;
  margin: 0 0 16px;
  line-height: 1.5;
}
.portal-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.portal-shot-card {
  border: 1px solid var(--vnt-border);
  border-radius: 0;
  background: var(--portal-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease;
}
.portal-shot-card.shot-card-approved {
  border-color: rgba(63, 122, 88, 0.65);
  box-shadow: 0 0 0 1px rgba(63, 122, 88, 0.25);
}
.portal-shot-card.shot-card-changes {
  border-color: rgba(171, 70, 52, 0.6);
  box-shadow: 0 0 0 1px rgba(171, 70, 52, 0.22);
}
.portal-shot-thumb {
  height: 160px;
  background: var(--vnt-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.portal-shot-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portal-shot-thumb-empty {
  font-size: 40px;
  opacity: 0.3;
}
.portal-shot-map-cue {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A real render of the shot's placement — it stands at full strength.
     The 0.55 wash existed to sit a "preview pending" stamp on top. */
  opacity: 1;
}
.portal-shot-thumb-pending {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    linear-gradient(rgba(89, 128, 166, 0.06), rgba(89, 128, 166, 0.03)),
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(29, 31, 32, 0.035) 14px 15px);
  border-bottom: 1px solid var(--vnt-border);
}
.portal-shot-pending-copy {
  position: relative;
  z-index: 1;
  padding: 3px 10px;
  border-radius: 0;
  background: var(--portal-surface);
  border: 1px solid var(--vnt-border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--vnt-text-dim);
  text-align: center;
  line-height: 1.5;
}
.portal-shot-pending-copy small {
  font-size: 10px;
  font-weight: 500;
  color: var(--vnt-text-faint);
}
.portal-shot-letter-chip,
.portal-shot-title-letter {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--pin-color, var(--vnt-accent));
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 auto;
}
.portal-shot-title-letter {
  width: 20px;
  height: 20px;
  font-size: 11px;
  margin-right: 8px;
  vertical-align: -4px;
}
.portal-shot-info {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portal-shot-title {
  font-size: 15px;
  font-weight: 700;
}
.portal-shot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  opacity: 0.7;
}
.portal-shot-notes {
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.85;
  white-space: pre-wrap;
}
.portal-review-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 -4px 12px;
  padding: 12px 4px;
  background: var(--portal-bg);
  border-bottom: 1px solid var(--vnt-border);
}
.portal-review-sticky .portal-section-title { margin: 0; }
.portal-review-sticky-copy {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.portal-review-count {
  color: var(--vnt-text-dim);
  font-family: var(--vnt-font-mono);
  font-size: 12.5px;
  white-space: nowrap;
}
.portal-shot-btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--vnt-text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.portal-shot-btn-quiet:hover { color: var(--vnt-text); }
.portal-shot-reopen {
  margin-top: 8px;
  padding: 4px 0;
  background: none;
  border: 0;
  color: var(--vnt-text-dim);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.portal-shot-reopen:hover { color: var(--vnt-text); }

.portal-shot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.portal-shot-btn {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--vnt-border);
  background: var(--portal-surface);
  color: inherit;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.portal-shot-btn:hover { background: rgba(29, 31, 32, 0.05); }
.portal-shot-btn-approve:hover { background: rgba(63, 122, 88, 0.14); }
.portal-shot-btn-change:hover  { background: rgba(171, 70, 52, 0.12); }
.portal-shot-message-wrap {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.portal-shot-message {
  width: 100%;
  box-sizing: border-box;
  min-height: 72px;
  padding: 8px 10px;
  background: var(--portal-surface);
  border: 1px solid var(--vnt-border);
  border-radius: 0;
  color: inherit;
  font-size: 13px;
  resize: vertical;
  font-family: inherit;
}
.portal-shot-message-row {
  display: flex;
  gap: 6px;
}
.portal-shot-btn-submit { flex: 1; background: var(--portal-primary, var(--vnt-accent)); color: #fff; border-color: transparent; }
.portal-shot-btn-cancel { flex: 0 0 auto; }
.portal-review-submit-row {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.portal-submit-review-btn {
  padding: 12px 24px;
  background: var(--portal-primary, var(--vnt-accent));
  color: #fff;
  border: none;
  border-radius: 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.portal-submit-review-btn:disabled { opacity: 0.6; cursor: default; }
.portal-review-hint { font-size: 13px; opacity: 0.8; }

@media (max-width: 640px) {
  .portal-review-grid { grid-template-columns: 1fr; }
}

/* ===== Video Fullscreen + Transport Controls ===== */
.tv-cesium-viewer.tv-fullscreen {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: var(--z-modal);
  border-radius: 0;
}
.tv-fullscreen-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: var(--vnt-z-overlay-chrome);
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  width: 36px;
  height: 36px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.tv-fullscreen-btn:hover { background: rgba(0,0,0,0.8); }
/* Transport bar — floating glass pill on the 10px overlay grid (titlebar
   recipe); right inset clears the 42px compass at bottom-right. */
.tv-video-transport {
  position: absolute;
  bottom: var(--vnt-preview-gutter);
  left: var(--vnt-preview-gutter);
  right: 62px; /* clears the bottom-right compass/pause column */
  z-index: var(--vnt-z-overlay-transport);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(6, 13, 18, 0.54);
  box-shadow: 0 10px 26px rgba(0,0,0,0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.tv-transport-btn {
  background: rgba(255,255,255,0.08);
  color: rgba(246,252,255,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
.tv-transport-btn:hover { background: rgba(255,255,255,0.2); }
.tv-transport-play {
  width: 34px;
  height: 34px;
  font-size: 13px;
  color: #06171a;
  border-color: transparent;
  background: var(--vnt-accent, var(--vnt-accent));
}
.tv-transport-play:hover { background: color-mix(in oklch, var(--vnt-accent, var(--vnt-accent)) 85%, white); }
.tv-transport-slider {
  flex: 1;
  min-width: 0;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.18);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.tv-transport-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--vnt-accent, var(--vnt-accent));
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.4);
}
.tv-transport-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--vnt-accent, var(--vnt-accent));
  cursor: pointer;
  border: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.4);
}
.tv-transport-time {
  color: rgba(225,239,245,0.72);
  font-family: var(--vnt-font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 70px;
  text-align: center;
  flex-shrink: 0;
}

/* ===== Calendar View ===== */
.cal-page { width: 100%; max-width: 1000px; margin: 0 auto; padding: 20px; }
.cal-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cal-title { flex: 1; text-align: center; font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border-color, rgba(255,255,255,0.06)); border-radius: 8px; overflow: hidden; }
.cal-day-name { background: var(--bg-secondary); padding: 8px; text-align: center; font-size: 10px; font-weight: 800; font-family: var(--vnt-font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--vnt-text-faint); }
.cal-cell { background: var(--bg-primary); min-height: 100px; padding: 6px; cursor: pointer; transition: background 0.15s; position: relative; }
.cal-cell:hover { background: var(--surface-hover); }
.cal-cell.cal-empty { cursor: default; background: var(--bg-secondary); opacity: 0.5; }
.cal-cell.cal-today .cal-date-num { background: var(--accent); color: #fff; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.cal-cell.cal-selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-date-num { font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; display: inline-block; }
.cal-jobs { display: flex; flex-direction: column; gap: 2px; }
.cal-job-pill { font-size: 10px; padding: 2px 6px; border-radius: 3px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; font-weight: 500; }
.cal-job-pill:hover { opacity: 0.85; filter: brightness(1.15); }
.cal-more { font-size: 10px; color: var(--text-muted); padding-left: 4px; }
.cal-day-detail { margin-top: 16px; background: var(--bg-secondary); border-radius: 8px; padding: 16px; }
.cal-detail-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
.cal-detail-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 20px; }
.cal-detail-job { display: flex; align-items: center; gap: 10px; padding: 8px; border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.06)); cursor: pointer; transition: background 0.15s; border-radius: 4px; }
.cal-detail-job:hover { background: var(--surface-hover); }
.cal-detail-job:last-child { border-bottom: none; }
.cal-detail-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cal-detail-time { font-size: 12px; color: var(--text-muted); min-width: 40px; font-variant-numeric: tabular-nums; }
.cal-detail-name { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; }
.cal-detail-client { font-size: 11px; color: var(--text-secondary); }
.cal-detail-status { font-size: 11px; font-weight: 600; }

@media (max-width: 768px) {
  .cal-cell { min-height: 60px; padding: 4px; }
  .cal-job-pill { font-size: 10px; padding: 1px 4px; }
  .cal-date-num { font-size: 11px; }
}

/* Deliverables Grid */
.deliverables-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; padding: 8px 0; }
.deliverable-item { background: var(--bg-secondary); border-radius: 8px; padding: 8px; transition: transform 0.15s; }
.deliverable-item:hover { transform: translateY(-2px); }
.deliverable-item a { text-decoration: none; }
.btn-icon-xs { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 0 4px; line-height: 1; }
.btn-icon-xs:hover { color: #e44258; }

/* Stat card mini */
.stat-card-mini { background: var(--bg-secondary); border-radius: 8px; padding: 10px 16px; min-width: 90px; }
.stat-card-mini .stat-val { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.stat-card-mini .stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: var(--z-overlay); }
.modal-card { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 0; padding: 24px; width: 90%; box-shadow: 0 20px 60px rgba(29, 31, 32, 0.2); }

/* Analytics */
.analytics-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }

/* Revenue chart */
.rev-chart { display: flex; flex-direction: column; gap: 6px; }
.rev-bar-row { display: flex; align-items: center; gap: 8px; }
.rev-bar-label { font-size: 11px; color: var(--text-muted); min-width: 60px; text-align: right; }
.rev-bar-track { flex: 1; height: 20px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden; }
.rev-bar-fill { height: 100%; background: linear-gradient(90deg, var(--vnt-accent, var(--vnt-accent)), var(--vnt-success)); border-radius: 4px; transition: width 0.5s ease; }
.rev-bar-val { font-size: 11px; color: var(--text-secondary); min-width: 100px; }

/* Activity feed */
.activity-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border, rgba(255,255,255,0.06)); }
.activity-item:last-child { border-bottom: none; }
.activity-icon { font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.activity-body { flex: 1; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.activity-user { font-weight: 600; color: var(--text-primary); }
.activity-job { color: var(--accent); text-decoration: none; font-weight: 500; }
.activity-job:hover { text-decoration: underline; }
.activity-time { font-size: 10px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }

/* Map Quick-Create Popup */
.map-quick-create { width: 260px; }
.mqc-header { font-size: 14px; font-weight: 800; margin-bottom: 6px; color: var(--text-primary); }
.mqc-address { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mqc-input { width: 100%; padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-secondary); color: var(--text-primary); font-size: 12px; margin-bottom: 6px; font-family: var(--font); box-sizing: border-box; }
.mqc-row { display: flex; gap: 6px; }
.mqc-half { width: 50% !important; }
.mqc-btn { width: 100%; margin-top: 4px; }

/* Leaflet popup dark theme override */
.leaflet-popup-content-wrapper { background: var(--bg-primary) !important; color: var(--text-primary) !important; border-radius: 12px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important; }
.leaflet-popup-tip { background: var(--bg-primary) !important; }
.leaflet-popup-close-button { color: var(--text-muted) !important; }

/* ===== Offline / Sync Badge ===== */
.offline-badge {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--z-overlay);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: rgba(26, 29, 35, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  user-select: none;
  pointer-events: none;
}
.offline-badge .offline-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6c757d;
}
.offline-badge.is-offline {
  border-color: #dc3545;
  color: #ffdcdf;
}
.offline-badge.is-offline .offline-dot {
  background: #dc3545;
  animation: offline-pulse 1.4s ease-in-out infinite;
}
.offline-badge.is-pending {
  border-color: #ffc107;
  color: #ffe8a1;
}
.offline-badge.is-pending .offline-dot {
  background: #ffc107;
}
@keyframes offline-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.25); }
}
@media (max-width: 768px) {
  .offline-badge {
    bottom: 80px;
    right: 12px;
  }
}

/* ===== Flight Logs ===== */
.fl-page { padding: 8px 4px 40px; }
.fl-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.fl-page-title { font-size: 22px; font-weight: 800; color: var(--text-primary); }
.fl-add-btn { white-space: nowrap; }

.fl-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.fl-stat-card { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px 18px; }
.fl-stat-val { font-size: 28px; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.fl-stat-label { font-size: 10px; font-weight: 800; font-family: var(--vnt-font-mono); color: var(--vnt-text-faint); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.12em; }

.fl-section { margin-top: 16px; }
.fl-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.fl-table th { text-align: left; font-weight: 800; color: var(--vnt-text-faint); padding: 8px 10px; border-bottom: 1px solid var(--border-color); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; }
.fl-table td { padding: 10px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); }
.fl-table tr:last-child td { border-bottom: none; }
.fl-table-clickable tr.fl-row { cursor: pointer; transition: background 0.12s ease; }
.fl-table-clickable tr.fl-row:hover { background: var(--bg-card-hover); }

.fl-compact-list { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.fl-compact-item { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 12px; }
.fl-compact-row { display: flex; justify-content: space-between; align-items: center; }
.fl-compact-date { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.fl-compact-meta { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.fl-compact-notes { font-size: 12px; color: var(--text-secondary); margin-top: 6px; font-style: italic; line-height: 1.4; }

/* Flight log modal */
.fl-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); padding: 20px; overflow-y: auto; }
.fl-modal-card { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 14px; width: 100%; max-width: 640px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,0.5); }
.fl-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
.fl-modal-title { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.fl-modal-close { background: none; border: none; color: var(--text-muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.fl-modal-close:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.fl-modal-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.fl-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border-color); }

.fl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 12px; }
.fl-form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.fl-label { font-size: 10px; font-weight: 800; font-family: var(--vnt-font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--vnt-text-faint); }
.fl-input { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 8px; padding: 9px 11px; color: var(--text-primary); font-family: var(--font); font-size: 13px; outline: none; transition: border-color 0.15s ease; }
.fl-input:focus { border-color: var(--blue); }
.fl-textarea { resize: vertical; min-height: 72px; font-family: var(--font); }

.fl-pill-group { display: flex; gap: 6px; flex-wrap: wrap; }
.fl-pill { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 7px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; }
.fl-pill:hover { color: var(--text-primary); border-color: var(--text-muted); }
.fl-pill.active { background: var(--blue-bg); border-color: var(--blue); color: var(--blue); }

/* Sign-off prompt banner */
.fl-signoff-banner { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--bg-panel); border: 1px solid var(--blue); border-radius: 14px; padding: 14px 18px; display: flex; align-items: center; gap: 16px; z-index: calc(var(--z-overlay) - 1); box-shadow: 0 14px 40px rgba(0,0,0,0.5); max-width: calc(100% - 32px); }
.fl-signoff-text { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.fl-signoff-actions { display: flex; gap: 8px; flex-shrink: 0; }

@media (max-width: 640px) {
  .fl-form-grid { grid-template-columns: 1fr; }
  .fl-signoff-banner { bottom: 80px; flex-direction: column; align-items: stretch; text-align: center; }
  .fl-signoff-actions { justify-content: center; }
  .fl-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Profile pages ===== */
.profile-page-wrap { min-height: 100vh; background: var(--bg-primary); color: var(--text-primary); }
.profile-page { width: 100%; max-width: 960px; margin: 0 auto; padding: 32px 24px; }
.profile-hero { display: flex; gap: 24px; align-items: center; padding: 24px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px; }
.profile-avatar-lg { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid var(--border-color); }
.profile-avatar-initials { display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: 44px; font-weight: 700; }
.profile-meta { flex: 1; min-width: 0; }
.profile-name { font-size: 28px; font-weight: 700; margin: 0 0 4px 0; color: var(--text-primary); }
.profile-sub { color: var(--text-secondary); font-size: 14px; margin-bottom: 4px; }
.profile-specialties { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.profile-spec-pill { background: rgba(89, 128, 166, 0.15); color: var(--accent); padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.profile-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.profile-badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--border-color); color: var(--text-secondary); }
.profile-badge-exp { background: rgba(63, 122, 88, 0.1); color: var(--vnt-success); border-color: rgba(63, 122, 88, 0.3); }
.profile-badge-107 { background: rgba(253, 171, 61, 0.1); color: #fdab3d; border-color: rgba(253, 171, 61, 0.3); }
.profile-links { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.profile-link-btn { display: inline-block; padding: 6px 14px; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); text-decoration: none; font-size: 13px; background: var(--bg-primary); }
.profile-link-btn:hover { border-color: var(--accent); color: var(--accent); }
.profile-bio { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px 20px; margin-top: 16px; color: var(--text-primary); line-height: 1.55; white-space: pre-wrap; }
.profile-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 16px; }
.profile-stat { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; text-align: center; }
.profile-stat-val { font-size: 28px; font-weight: 700; color: var(--accent); }
.profile-stat-label { font-size: 10px; font-weight: 800; font-family: var(--vnt-font-mono); color: var(--vnt-text-faint); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 4px; }
.profile-section-title { font-size: 18px; font-weight: 700; margin: 24px 0 12px; color: var(--text-primary); }
.profile-portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.profile-port-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; color: inherit; text-decoration: none; display: flex; flex-direction: column; transition: transform 0.15s, border-color 0.15s; }
.profile-port-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.profile-port-thumb { width: 100%; aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: var(--bg-primary); }
.profile-port-thumb-empty { background: linear-gradient(135deg, #2a2f38, #1a1d23); }
.profile-port-info { padding: 12px 14px; }
.profile-port-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.profile-port-client { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.profile-port-meta { display: flex; gap: 10px; font-size: 12px; color: var(--text-secondary); }
.profile-port-empty { padding: 32px; text-align: center; color: var(--text-secondary); background: var(--bg-secondary); border: 1px dashed var(--border-color); border-radius: 12px; }
.profile-edit-form .settings-section { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; }

@media (max-width: 640px) {
  .profile-hero { flex-direction: column; text-align: center; }
  .profile-avatar-lg { width: 96px; height: 96px; }
  .profile-avatar-initials { font-size: 36px; }
  .profile-specialties, .profile-badges, .profile-links { justify-content: center; }
  .profile-page { padding: 16px; }
}

/* ===== Billing Page ===== */
.billing-page { width: 100%; padding: 24px; max-width: 1200px; margin: 0 auto; }
.billing-page-title { font-size: 24px; font-weight: 700; margin-bottom: 20px; color: var(--text-primary); }
.billing-hero {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.billing-hero-left { flex: 1; min-width: 200px; }
.billing-hero-right { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.billing-hero-label { font-size: 10px; font-weight: 800; font-family: var(--vnt-font-mono); color: var(--vnt-text-faint); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 6px; }
.billing-hero-plan { font-size: 28px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
.billing-hero-meta { font-size: 13px; color: var(--text-secondary); }
.billing-section-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; color: var(--text-primary); }
.billing-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.billing-plan-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, transform 0.15s;
}
.billing-plan-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.billing-plan-current { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-bg); }
.billing-plan-name { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.billing-plan-price { font-size: 32px; font-weight: 700; color: var(--text-primary); }
.billing-plan-price-unit { font-size: 14px; font-weight: 400; color: var(--text-secondary); margin-left: 4px; }
.billing-plan-seats { font-size: 13px; color: var(--text-secondary); margin: 8px 0 16px; }
.billing-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.billing-features-list li {
  font-size: 13px;
  color: var(--text-primary);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}
.billing-features-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green);
  font-weight: 700;
}
.billing-plan-cta { width: 100%; margin-top: auto; }
.billing-plan-cta:disabled { opacity: 0.6; cursor: default; }

.billing-banner {
  grid-column: 1 / -1;
  background: var(--red-bg);
  border-bottom: 1px solid var(--red);
  color: var(--red);
  padding: 10px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  font-weight: 500;
  z-index: 100;
  flex-wrap: wrap;
}
.billing-banner-text { flex: 1; text-align: center; max-width: 800px; }
.billing-banner-cta {
  display: inline-block;
  padding: 6px 16px;
  background: var(--red);
  color: white;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}
.billing-banner-cta:hover { opacity: 0.9; }

@media (max-width: 640px) {
  .billing-page { padding: 16px; }
  .billing-hero { flex-direction: column; }
  .billing-hero-right { align-items: flex-start; width: 100%; }
  .billing-hero-plan { font-size: 24px; }
}

/* ============================================================
 * Mobile Pilot View (3-tab full-screen)
 * ============================================================ */
.pilot-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0d1117;
  color: var(--text-primary);
  z-index: 2000;
  overflow: hidden;
}

.pilot-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-color);
  min-height: 52px;
  position: sticky;
  top: 0;
  z-index: 2;
}
.pilot-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 22px;
  text-decoration: none;
  background: transparent;
}
.pilot-back:hover { background: rgba(255, 255, 255, 0.05); }
.pilot-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pilot-tabs {
  display: flex;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 52px;
  z-index: 2;
}
.pilot-tab {
  flex: 1;
  min-height: 48px;
  padding: 12px 8px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.pilot-tab:hover { color: var(--text-primary); }
.pilot-tab-active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.pilot-tab-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.pilot-tab-track {
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 220ms ease;
  transform: translateX(0);
}
.pilot-tab-content {
  width: calc(100% / 3);
  height: 100%;
  overflow-y: auto;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}
.pilot-loading {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* Info cards */
.pilot-card {
  display: block;
  padding: 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
}
.pilot-card-link:active { background: rgba(56, 139, 253, 0.08); }
.pilot-card-label {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vnt-text-faint);
  margin-bottom: 6px;
}
.pilot-card-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-word;
}
.pilot-card-meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-secondary);
}
.pilot-card-notes { white-space: pre-wrap; font-weight: 400; font-size: 14px; }
.pilot-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--blue-bg);
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
}

/* Quick-actions */
.pilot-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.pilot-qa-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  min-height: 80px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(56, 139, 253, 0.25);
}
.pilot-qa-btn:active { background: rgba(56, 139, 253, 0.1); }
.pilot-qa-icon { font-size: 24px; line-height: 1; margin-bottom: 6px; }
.pilot-qa-label { font-size: 12px; font-weight: 600; text-align: center; }

/* Chat */
#pilotPane1 { display: flex; flex-direction: column; padding: 0; }
.pilot-chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}
.pilot-chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}
.pilot-chat-msg-mine { flex-direction: row-reverse; }
.pilot-chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  flex-shrink: 0;
}
.pilot-chat-bubble-wrap { max-width: 76%; }
.pilot-chat-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 3px;
  padding: 0 4px;
}
.pilot-chat-msg-mine .pilot-chat-meta { text-align: right; }
.pilot-chat-bubble {
  padding: 10px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.pilot-chat-msg-mine .pilot-chat-bubble {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.pilot-chat-input {
  display: flex;
  gap: 8px;
  padding: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-panel);
  border-top: 1px solid var(--border-color);
  align-items: flex-end;
}
.pilot-chat-textarea {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  padding: 10px 12px;
  background: #0d1117;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font: inherit;
  font-size: 15px;
  resize: vertical;
}
.pilot-chat-textarea:focus {
  outline: none;
  border-color: var(--blue);
}
.pilot-chat-send {
  min-height: 44px;
  min-width: 64px;
  padding: 0 16px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.pilot-chat-send:hover { opacity: 0.92; }

/* Documents */
.pilot-docs-header { margin-bottom: 12px; }
.pilot-docs-generate { width: 100%; min-height: 56px; flex-direction: row; gap: 10px; }
.pilot-docs-generate .pilot-qa-icon { margin-bottom: 0; }
.pilot-docs-generate .pilot-qa-label { font-size: 14px; }

.pilot-doc-list { display: flex; flex-direction: column; gap: 8px; }
.pilot-doc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  min-height: 64px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.pilot-doc-row:active { background: rgba(56, 139, 253, 0.08); }
.pilot-doc-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.pilot-doc-body { flex: 1; min-width: 0; }
.pilot-doc-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pilot-doc-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pilot-doc-chevron { color: var(--text-muted); font-size: 20px; }

/* ============================================================
 * Mobile Shot Viewer (pilot/client field packet)
 * ============================================================ */
/* The field-brief shell is the page scroller. It was a fixed-height dark
   flex box for the tab era; the brief feed scrolls as one document, so the
   shell must scroll and carry the paper background all the way down. */
.mobile-shot-shell {
  position: fixed;
  inset: 0;
  z-index: 2100;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background: #F2F0EB;
  color: #141414;
  font-family: var(--font-sans);
}

.mobile-shot-topbar {
  min-height: 64px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--vnt-border);
  background: color-mix(in srgb, var(--vnt-bg-2) 90%, transparent);
  backdrop-filter: blur(14px);
}

.mobile-shot-back,
.mobile-shot-plan-link {
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vnt-text);
  text-decoration: none;
  border: 1px solid var(--vnt-border);
  background: var(--vnt-bg-2);
  font-weight: 800;
}

.mobile-shot-plan-link {
  padding: 0 14px;
  color: var(--vnt-accent-bright);
  font-family: var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
}

.mobile-shot-kicker {
  color: var(--vnt-text-dim);
  font-size: 10px;
  font-family: var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}

.mobile-shot-topbar h1 {
  margin: 2px 0 0;
  font-size: clamp(17px, 5vw, 22px);
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-shot-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}

.mobile-home-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-home-hero h2 {
  margin: 10px 0 8px;
  font-size: clamp(24px, 8vw, 34px);
  line-height: 1.02;
}

.mobile-home-actions,
.mobile-home-project-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mobile-home-actions a,
.mobile-home-actions button,
.mobile-home-project-actions a,
.mobile-home-project-actions button,
.mobile-empty-card button {
  min-height: 44px;
  border: 1px solid var(--vnt-border);
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vnt-text);
  background: var(--vnt-bg-2);
  text-decoration: none;
  font: inherit;
  font-weight: 900;
}

.mobile-home-actions a:first-child,
.mobile-home-project-actions a:first-child {
  color: #fff;
  background: var(--vnt-gradient-go);
  border-color: transparent;
}

.mobile-home-projects {
  display: grid;
  gap: 12px;
}

.mobile-home-project-card {
  border: 1px solid var(--vnt-border);
  border-radius: 18px;
  background: var(--vnt-bg-2);
  overflow: hidden;
}

.mobile-home-project-main {
  padding: 14px;
  display: grid;
  gap: 6px;
  color: var(--vnt-text);
  text-decoration: none;
}

.mobile-home-project-main strong {
  font-size: 19px;
  line-height: 1.08;
}

.mobile-home-project-main em,
.mobile-home-project-main small {
  color: var(--vnt-text-dim);
  font-style: normal;
}

.mobile-home-status {
  /* placement + casing only — pill mechanics come from .vnt-status-pill */
  justify-self: start;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.mobile-home-project-actions {
  padding: 0 14px 14px;
}

.mobile-shot-hero {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--vnt-border);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--vnt-accent) 10%, var(--vnt-bg-2)), var(--vnt-bg-2)),
    repeating-linear-gradient(90deg, rgba(29, 31, 32, 0.04) 0 1px, transparent 1px 18px);
  box-shadow: 0 18px 50px rgba(29, 31, 32, 0.10);
}

.mobile-shot-hero > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--vnt-accent-bright);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.mobile-shot-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vnt-success);
  box-shadow: 0 0 16px rgba(63, 122, 88, 0.55);
}

.mobile-shot-hero p {
  margin: 10px 0 14px;
  color: var(--vnt-text-dim);
  font-size: 15px;
  line-height: 1.35;
}


.shot-log-entry-head em {
  font-style: normal;
  color: var(--vnt-text-faint);
  font-weight: 500;
}


/* Field-status pill rides .vnt-status-pill--lg; mobile keeps its chunky weight. */


/* Complete 360 stack heights list: full-width row that wraps freely. */


.mobile-video-player {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--vnt-border);
  border-radius: 14px;
  background: var(--vnt-bg-2);
}

.mobile-video-player-head {
  min-height: 38px;
  padding: 9px 11px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--vnt-border);
}

.mobile-video-player-head b {
  color: var(--vnt-text);
  font-size: 13px;
}

.mobile-video-player-head span {
  color: var(--vnt-text-dim);
  font: 850 11px/1 var(--font-mono);
}


.mobile-video-controls {
  padding: 10px;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.mobile-video-controls button {
  min-height: 36px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: var(--vnt-gradient-go);
  font: inherit;
  font-size: 12px;
  font-weight: 950;
}

.mobile-video-controls span {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--vnt-bg-3);
}

.mobile-video-controls i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--vnt-accent-dim);
  box-shadow: 0 0 12px rgba(89, 128, 166, 0.5);
}


.mobile-time-group,
.mobile-field-card,
.mobile-empty-card {
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--vnt-border);
  background: var(--vnt-bg-2);
}

.mobile-empty-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--vnt-text);
}


/* v386: Times tab reads as a schedule — planned window vs actual outcome. */


.mobile-time-shot-stamp {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--vnt-text-dim);
}

.mobile-time-shot-stamp[data-tone="ready"] { color: var(--vnt-success); }
.mobile-time-shot-stamp[data-tone="warning"] { color: var(--vnt-accent-2); }
.mobile-time-shot-stamp[data-tone="error"] { color: var(--vnt-danger); }


.mobile-field-muted {
  margin-top: 10px !important;
  color: var(--vnt-text-dim) !important;
  font-size: 13px;
}

.mobile-checklist-list {
  display: grid;
  gap: 8px;
}

.mobile-checklist-progress {
  position: relative;
  overflow: hidden;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--vnt-border);
  background: var(--vnt-bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--vnt-text);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mobile-checklist-progress i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--vnt-accent), var(--vnt-success));
}

.mobile-checklist-item {
  min-height: 46px;
  padding: 9px 10px;
  width: 100%;
  border: 1px solid var(--vnt-border);
  border-radius: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--vnt-bg-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.mobile-checklist-item:disabled {
  opacity: 0.72;
  cursor: wait;
}

.mobile-checklist-item:focus-visible {
  outline: 2px solid var(--vnt-accent);
  outline-offset: 2px;
}

.mobile-checklist-item > span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--vnt-bg-3);
  color: var(--vnt-text-dim);
  flex-shrink: 0;
}

.mobile-checklist-item.is-complete > span {
  background: var(--vnt-success);
  color: #fff;
}

.mobile-checklist-item strong,
.mobile-checklist-item small {
  display: block;
}

.mobile-checklist-item small {
  margin-top: 2px;
  color: var(--vnt-text-dim);
}

.mobile-field-note {
  width: 100%;
  min-height: 110px;
  padding: 12px;
  border-radius: 13px;
  border: 1px solid var(--vnt-border);
  background: var(--vnt-bg-2);
  color: var(--vnt-text);
  resize: vertical;
  font: inherit;
}

.mobile-field-save {
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  border: 0;
  border-radius: 13px;
  background: var(--vnt-gradient-go);
  color: #fff;
  font: inherit;
  font-weight: 950;
}

.projects-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.projects-kebab { position: relative; }
.projects-kebab summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--vnt-text-dim);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.projects-kebab summary::-webkit-details-marker { display: none; }
.projects-kebab summary:hover { color: var(--vnt-text); border-color: var(--vnt-border-2); }
.projects-kebab[open] summary { color: var(--vnt-text); border-color: var(--vnt-accent); }
.projects-kebab-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: var(--z-dropdown);
  display: grid;
  min-width: 170px;
  padding: 6px;
  border: 1px solid var(--vnt-border);
  border-radius: 10px;
  background: var(--vnt-panel-2);
  box-shadow: 0 14px 34px rgba(29, 31, 32, 0.16);
}
.projects-kebab-menu a {
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--vnt-text);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.projects-kebab-menu a:hover { background: rgba(89, 128, 166, 0.10); }

.projects-brief-link,
.projects-mobile-link,
.projects-shot-log-link,
.projects-edit-link {
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  color: var(--vnt-accent-bright);
  border: 1px solid color-mix(in srgb, var(--vnt-accent-dim) 24%, transparent);
  background: color-mix(in srgb, var(--vnt-accent-dim) 8%, transparent);
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
}

.shot-log-page {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px;
}

.shot-log-header,
.shot-log-summary,
.shot-log-times,
.shot-log-feed {
  border: 1px solid var(--vnt-border);
  border-radius: 16px;
  background: var(--vnt-bg-2);
}

/* Back affordance matches the Brief Designer's ghost back button (one
   desktop back treatment; mobile-first surfaces keep the icon square). */
.shot-log-back-link {
  margin-right: 10px;
  margin-bottom: 6px;
}

.shot-log-header {
  padding: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.shot-log-header h1 {
  margin: 6px 0 6px;
  color: var(--text-primary);
  font-size: clamp(26px, 4vw, 40px);
}

.shot-log-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.shot-log-body {
  margin-top: 16px;
  display: grid;
  gap: 14px;
}

.shot-log-summary {
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.shot-log-summary h2,
.shot-log-summary p {
  margin: 0;
}

.shot-log-summary p {
  margin-top: 4px;
  color: var(--text-secondary);
}

.shot-log-stats,
.shot-log-time-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.shot-log-stat,
.shot-log-time-chip {
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid var(--vnt-border);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--vnt-text-dim);
  background: var(--vnt-bg);
  font-size: 12px;
  font-weight: 900;
}

.shot-log-stat b,
.shot-log-time-chip b {
  color: var(--vnt-text);
  font-size: 16px;
}

.shot-log-stat.is-done {
  border-color: rgba(63, 122, 88, 0.45);
  background: rgba(63, 122, 88, 0.10);
  color: var(--vnt-success);
}

.shot-log-stat.is-issue {
  border-color: rgba(171, 70, 52, 0.45);
  background: rgba(171, 70, 52, 0.08);
  color: var(--vnt-danger);
}

.shot-log-stat.is-skipped {
  border-color: rgba(176, 124, 46, 0.45);
  background: rgba(176, 124, 46, 0.10);
  color: var(--vnt-accent-2);
}

.shot-log-times,
.shot-log-feed {
  padding: 16px;
}

/* ===========================================================================
   Capture record — every planned shot x every time window, one cell each.
   The page this replaced was an event stream, so a planned shot nobody ever
   opened had no row at all.
   =========================================================================== */
.capture-score {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 4px 8px;
  justify-items: end;
}
.capture-score b {
  color: var(--vnt-text);
  font-family: var(--vnt-font-mono);
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
}
.capture-score span {
  color: var(--text-secondary);
  font-size: 13px;
}
/* Captured / reshoot / not flown in one bar — four separate counters made the
   reader do the subtraction. */
.capture-bar {
  grid-column: 1 / -1;
  display: flex;
  width: 220px;
  max-width: 100%;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--vnt-bg-3);
}
.capture-bar i { display: block; height: 100%; }
.capture-bar i.is-captured { background: var(--vnt-success); }
.capture-bar i.is-reshoot { background: var(--vnt-coral); }
.capture-bar i.is-not-flown { background: var(--vnt-border); }

.capture-filter {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 12px;
  padding: 3px;
  border: 1px solid var(--vnt-border);
  border-radius: 999px;
  background: var(--vnt-bg-2);
}
.capture-filter-btn {
  border: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--vnt-text-dim);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.capture-filter-btn:hover { color: var(--vnt-text); }
.capture-filter-btn.is-active {
  background: var(--vnt-accent);
  color: #fff;
}
.capture-filter-empty {
  padding: 22px 12px;
  color: var(--vnt-text-dim);
  font-size: 13px;
  text-align: center;
}

.capture-grid-wrap {
  padding: 16px;
  border: 1px solid var(--vnt-border);
  border-radius: 16px;
  background: var(--vnt-bg-2);
  /* Many windows scroll the grid, never the page body. */
  overflow-x: auto;
}
.capture-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 6px;
}
.capture-grid th,
.capture-grid td { text-align: left; vertical-align: top; }
.capture-col-corner {
  color: var(--vnt-text-faint);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}
.capture-col {
  min-width: 130px;
  padding-bottom: 4px;
}
.capture-col b {
  display: inline-block;
  color: var(--vnt-text);
  font-size: 13px;
  font-weight: 700;
}
.capture-col em {
  display: block;
  margin-top: 2px;
  color: var(--vnt-text-faint);
  font-family: var(--vnt-font-mono);
  font-size: 11px;
  font-style: normal;
}
.capture-col.is-custom b { color: var(--vnt-coral); }
.capture-col-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: middle;
}
.capture-row-head {
  min-width: 150px;
  padding-right: 10px;
  vertical-align: middle;
}
.capture-row-head-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.capture-row.is-priority .capture-row-letter {
  box-shadow: 0 0 0 2px var(--vnt-coral);
}
.capture-row-letter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-family: var(--vnt-font-mono);
  font-size: 14px;
  font-weight: 800;
}
.capture-row-meta { min-width: 0; }
.capture-row-meta b {
  display: block;
  color: var(--vnt-text);
  font-family: var(--vnt-font-mono);
  font-size: 13px;
  font-weight: 700;
}
.capture-row-meta em {
  color: var(--vnt-text-faint);
  font-size: 11px;
  font-style: normal;
}

.capture-cell {
  padding: 9px 11px;
  border: 1px solid var(--vnt-border);
  border-radius: 10px;
  background: var(--vnt-bg);
}
.capture-cell-state {
  display: block;
  color: var(--vnt-text);
  font-size: 12.5px;
  font-weight: 700;
}
.capture-cell-count,
.capture-cell-at {
  display: block;
  margin-top: 2px;
  color: var(--vnt-text-dim);
  font-family: var(--vnt-font-mono);
  font-size: 11px;
}
/* The reason sits on the cell it was written about — an editor should not have
   to correlate a feed by timestamp to find out why a frame needs a reshoot. */
.capture-cell-note {
  display: block;
  margin-top: 5px;
  color: var(--vnt-text-dim);
  font-size: 11.5px;
  line-height: 1.35;
}
.capture-cell.is-captured {
  border-color: rgba(63, 122, 88, 0.42);
  background: rgba(63, 122, 88, 0.10);
}
.capture-cell.is-captured .capture-cell-state { color: var(--vnt-success); }
.capture-cell.is-reshoot {
  border-color: rgba(176, 124, 46, 0.5);
  background: rgba(176, 124, 46, 0.10);
}
.capture-cell.is-reshoot .capture-cell-state { color: var(--vnt-coral); }
.capture-cell.is-partial {
  border-color: rgba(176, 124, 46, 0.42);
  background: rgba(176, 124, 46, 0.07);
}
.capture-cell.is-partial .capture-cell-state { color: var(--vnt-accent-2); }
.capture-cell.is-not-flown .capture-cell-state { color: var(--vnt-text-dim); }
/* A window this shot was never scheduled in is absence, not a to-do. */
.capture-cell.is-unplanned {
  border-color: transparent;
  background: transparent;
}
.capture-cell.is-unplanned .capture-cell-state {
  color: var(--vnt-text-faint);
  font-weight: 500;
  font-style: italic;
}

.capture-archived {
  padding: 16px;
  border: 1px solid var(--vnt-border);
  border-radius: 16px;
  background: var(--vnt-bg-2);
}
.capture-archived-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 9px 0;
  border-top: 1px solid var(--vnt-bg-3);
  color: var(--vnt-text-dim);
  font-size: 12.5px;
}
.capture-archived-row:first-of-type { border-top: 0; }
.capture-archived-row b { color: var(--vnt-text); }
.capture-archived-row em {
  margin-left: auto;
  font-family: var(--vnt-font-mono);
  font-size: 11px;
  font-style: normal;
}
.capture-archived-row p {
  flex-basis: 100%;
  margin: 2px 0 0;
  color: var(--vnt-text-faint);
}

.shot-log-section-title {
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.shot-log-section-title b {
  color: var(--vnt-text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shot-log-section-title span {
  color: var(--text-secondary);
  font-size: 12px;
}

.shot-log-time-chip em {
  color: var(--vnt-accent-dim);
  font-style: normal;
  font-weight: 900;
}

.shot-log-entry {
  margin-top: 10px;
  padding: 13px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--vnt-border);
  border-radius: 14px;
  background: var(--vnt-bg);
}

.shot-log-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.shot-log-entry-head strong {
  color: var(--text-primary);
  font-size: 16px;
}

.shot-log-entry-head span,
.shot-log-entry-meta,
.shot-log-entry-user {
  color: var(--text-secondary);
  font-size: 12px;
}

/* The pin NAME lives here, next to the position-letter badge: it can be long
   ("Hero northwest still"), so it takes the slack in the row and ellipsises
   instead of pushing the timestamp out. */
.shot-log-entry-head .shot-log-entry-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.shot-log-entry-head > span:last-child {
  white-space: nowrap;
}

.shot-log-entry-meta {
  margin-top: 4px;
  font-family: var(--vnt-font-mono);
}

.shot-log-entry p {
  margin: 8px 0 0;
  color: var(--vnt-text);
  line-height: 1.4;
}

.shot-log-entry-user {
  white-space: nowrap;
}

.shot-log-empty {
  padding: 24px;
  border: 1px dashed var(--vnt-border-2);
  border-radius: 14px;
  display: grid;
  gap: 8px;
  color: var(--text-secondary);
  text-align: center;
}

.shot-log-empty strong {
  color: var(--text-primary);
  font-size: 18px;
}

@media (max-width: 760px) {
  .shot-log-page { padding: 14px; }
  .shot-log-header,
  .shot-log-summary {
    grid-template-columns: 1fr;
    display: grid;
  }
  .shot-log-header-actions {
    justify-content: stretch;
  }
  .shot-log-header-actions .btn {
    width: 100%;
  }
  .shot-log-entry {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .shot-log-entry-user {
    grid-column: 2;
  }
}

/* Desktop: centered column */
@media (min-width: 768px) {
  .pilot-shell { max-width: 640px; margin: 0 auto; border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); }
  .mobile-shot-shell { max-width: 520px; margin: 0 auto; border-left: 1px solid rgba(20, 20, 20, 0.14); border-right: 1px solid rgba(20, 20, 20, 0.14); }
}

/* ===== Client-facing Booking Portal ===== */
.book-page {
  min-height: 100vh;
  padding: 32px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: var(--vnt-font-body);
}
.book-card {
  width: 100%;
  max-width: 600px;
  padding: 32px;
  border-radius: 0;
  border: 1px solid var(--vnt-border);
  box-shadow: 0 10px 40px rgba(29, 31, 32, 0.12);
}
.book-header { text-align: center; margin-bottom: 24px; }
.book-logo { max-height: 48px; margin-bottom: 12px; }
.book-title { margin: 0 0 4px; font-size: 26px; font-weight: 700; }
.book-tagline { margin: 0 0 12px; opacity: 0.75; font-size: 14px; }
.book-lede { margin: 0; opacity: 0.85; font-size: 15px; }
.book-form { display: flex; flex-direction: column; gap: 14px; }
.book-field { display: flex; flex-direction: column; gap: 6px; }
.book-field label { font-size: 13px; font-weight: 600; opacity: 0.9; }
.book-field input,
.book-field select,
.book-field textarea {
  background: var(--vnt-bg-2);
  border: 1px solid var(--vnt-border);
  border-radius: 0;
  padding: 10px 12px;
  color: inherit;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.book-field input:focus,
.book-field select:focus,
.book-field textarea:focus {
  border-color: var(--accent);
  background: var(--vnt-bg-2);
}
.book-field textarea { resize: vertical; min-height: 80px; }
.book-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .book-row { grid-template-columns: 1fr; } }
.book-checks { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 6px 0; }
.book-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.book-check input { margin: 0; }
.book-addr-wrap { position: relative; }
.book-suggest {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--vnt-bg-2);
  border: 1px solid var(--vnt-border);
  border-radius: 0;
  max-height: 240px;
  overflow-y: auto;
  z-index: 10;
  margin-top: 4px;
  box-shadow: 0 8px 20px rgba(29, 31, 32, 0.16);
}
.book-suggest-item {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--vnt-bg-3);
  color: var(--text-primary);
}
.book-suggest-item:last-child { border-bottom: none; }
.book-suggest-item:hover { background: rgba(29, 31, 32, 0.05); }
.book-submit {
  margin-top: 8px;
  padding: 14px 20px;
  border: none;
  border-radius: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.book-submit:hover:not(:disabled) { opacity: 0.92; }
.book-submit:active:not(:disabled) { transform: translateY(1px); }
.book-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.book-foot { text-align: center; margin: 12px 0 0; font-size: 12px; opacity: 0.6; }
.book-error,
.book-error-inline {
  background: rgba(171, 70, 52, 0.08);
  border: 1px solid rgba(171, 70, 52, 0.4);
  color: var(--vnt-danger);
  padding: 10px 12px;
  border-radius: 0;
  font-size: 14px;
  margin-bottom: 12px;
}
.book-loading { color: var(--vnt-text-dim); font-size: 14px; text-align: center; padding: 48px 0; }
.book-success { text-align: center; padding: 48px 32px; }
.book-success h1 { margin: 12px 0 8px; font-size: 24px; }
.book-success p { margin: 0; opacity: 0.85; font-size: 15px; }
.book-success-icon { display: flex; justify-content: center; margin-bottom: 8px; }

/* ===== AI Shot Planner — suggestion modal ===== */
.tv-ai-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: 20px;
}
.tv-ai-modal {
  background: var(--vnt-bg-2);
  border: 1px solid var(--vnt-border);
  border-radius: 0;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(29, 31, 32, 0.2);
}
.tv-ai-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--vnt-border);
}
.tv-ai-modal .modal-header h2 {
  margin: 0;
  font-size: 18px;
  color: var(--vnt-text);
}
.tv-ai-modal .modal-close {
  background: none;
  border: none;
  color: var(--vnt-text-dim);
  font-size: 24px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.tv-ai-modal .modal-close:hover { color: var(--vnt-text); }
.tv-ai-modal .modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}
.tv-ai-modal .modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--vnt-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.ai-suggestion-card {
  background: var(--vnt-bg-3);
  border: 1px solid var(--vnt-border);
  border-radius: 0;
  padding: 12px;
  margin-bottom: 10px;
  transition: opacity 0.2s, background 0.2s;
}
.ai-suggestion-card.ai-added {
  opacity: 0.5;
  background: rgba(63, 122, 88, 0.08);
  border-color: rgba(63, 122, 88, 0.3);
}
.ai-suggestion-card.ai-skipped {
  opacity: 0.4;
}
.ai-suggestion-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ai-badge {
  background: color-mix(in srgb, var(--vnt-accent) 14%, transparent);
  color: var(--vnt-accent);
  padding: 2px 8px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ai-suggestion-name {
  font-weight: 600;
  color: var(--vnt-text);
  flex: 1;
  font-size: 14px;
}
.ai-suggestion-alt {
  font-family: var(--vnt-font-mono, monospace);
  font-size: 12px;
  color: var(--vnt-text-dim);
  background: var(--vnt-bg);
  padding: 2px 8px;
  border-radius: 0;
}
.ai-suggestion-desc {
  font-size: 13px;
  color: var(--vnt-text);
  margin-bottom: 4px;
}
.ai-suggestion-reasoning {
  font-size: 12px;
  color: var(--vnt-text-dim);
  margin-bottom: 6px;
}
.ai-suggestion-meta {
  font-size: 11px;
  color: var(--vnt-text-faint);
  font-family: var(--vnt-font-mono, monospace);
  margin-bottom: 8px;
}
.ai-suggestion-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.tv-ai-suggest-btn {
  background: color-mix(in srgb, var(--vnt-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--vnt-accent) 40%, transparent);
}
.tv-ai-suggest-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--vnt-accent) 18%, transparent);
}
.tv-ai-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid color-mix(in srgb, var(--vnt-text) 18%, transparent);
  border-top-color: var(--vnt-accent);
  border-radius: 50%;
  animation: tv-ai-spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes tv-ai-spin {
  to { transform: rotate(360deg); }
}

/* ---------- TowerView 3D Model upload (Level 1) ---------- */
.tv-model-list { display: flex; flex-direction: column; gap: 6px; }
.tv-model-empty {
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 0;
}
.tv-model-import-note,
.tv-model-lock {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
}
.tv-model-import-note {
  margin: -2px 0 8px;
}
.tv-model-lock {
  margin-top: -2px;
}
.tv-model-row {
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}
.tv-model-row-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.tv-model-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  cursor: pointer;
  min-width: 0;
}
.tv-model-toggle input[type="checkbox"] { margin: 0; }
.tv-model-name {
  font-size: 12px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.tv-model-delete {
  font-size: 11px;
  color: var(--red, #e74c3c);
  padding: 2px 6px;
  flex-shrink: 0;
}
.tv-model-actions {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 6px;
  font-size: 11px;
  align-items: center;
}
.tv-model-actions label {
  color: var(--text-secondary);
}
.tv-model-actions input[type="range"] {
  width: 100%;
}
.tv-model-actions span {
  font-family: monospace;
  width: 40px;
  text-align: right;
  color: var(--text-primary);
}

/* ===== Analytics Reporting — print view ===== */
.an-sortable:hover { background: var(--bg-secondary); }
@media print {
  /* Hide app chrome and controls so the report prints cleanly. */
  .no-print,
  nav,
  .sidebar,
  .topbar,
  .top-nav,
  header.app-header,
  .toast,
  .toasts,
  button,
  .btn { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .an-report, .an-report * { color: #000 !important; }
  .an-report .detail-card {
    background: #fff !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .an-two-col { grid-template-columns: 1fr 1fr !important; }
  .rev-bar-fill { background: #555 !important; }
}

/* ===== Real-time Pilot Tracking ===== */
.active-pilots-card {
  /* Sits in the operator dashboard between the map and the activity feed */
}
.active-pilots-card h2 {
  font-size: 13px;
  font-weight: 800;
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vnt-text);
  opacity: 0.85;
}

.pilot-ping-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.pilot-ping-row:hover {
  background: rgba(89, 128, 166, 0.08);
}

.pilot-ping-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #2a2d35;
  flex-shrink: 0;
}
.pilot-ping-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--vnt-gradient-go);
}

.pilot-ping-body {
  flex: 1;
  min-width: 0;
}
.pilot-ping-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.pilot-ping-meta {
  font-size: 11px;
  opacity: 0.7;
  color: var(--text);
  margin-top: 2px;
}
.pilot-ping-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vnt-success);
  box-shadow: 0 0 0 0 rgba(63, 122, 88, 0.6);
  animation: pilot-ping-pulse 2s infinite;
  flex-shrink: 0;
}

@keyframes pilot-ping-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(63, 122, 88, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(63, 122, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 122, 88, 0); }
}

/* Trail modal opened from clicking a pilot row */
.pilot-trail-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-sticky-banner);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pilot-trail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.pilot-trail-dialog {
  position: relative;
  width: min(90vw, 720px);
  height: min(80vh, 540px);
  background: #1a1d23;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.pilot-trail-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #2a2d35;
}
.pilot-trail-header h3 {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.pilot-trail-close {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.pilot-trail-map {
  flex: 1;
  background: #0b0c0f;
}
.pilot-trail-meta {
  padding: 8px 16px;
  font-size: 11px;
  opacity: 0.7;
  border-top: 1px solid #2a2d35;
}

/* Live flight-trail marker overlaid on job detail map */
.pilot-trail-marker {
  position: relative;
  width: 24px !important;
  height: 24px !important;
}
.pilot-trail-marker-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--vnt-success);
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  z-index: 2;
}
.pilot-trail-marker-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(63, 122, 88, 0.35);
  transform: translate(-50%, -50%);
  animation: pilot-trail-ring 1.6s infinite ease-out;
  z-index: 1;
}
@keyframes pilot-trail-ring {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0.9; }
  80%  { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

/* Shot preview thumbnails — populated by the Save 3D Preview flow in
   TowerView. Two sizes: a compact rectangle in the planning shot list
   and a full-bleed hero image on the mobile shot-card view. The
   placeholder mirrors the image box so layouts never jump when the pin
   hasn't been captured yet. */
.shot-thumbnail {
  display: inline-block;
  object-fit: cover;
  border-radius: 6px;
  background: var(--surface-hover, #1e2025);
  flex-shrink: 0;
}
.shot-thumbnail-sm {
  width: 40px;
  height: 28px;
  margin-right: 6px;
  vertical-align: middle;
}
.shot-thumbnail-lg {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  margin-bottom: 12px;
  display: block;
}
.shot-thumbnail-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #8a8f98);
  font-size: 14px;
  gap: 8px;
  border: 1px dashed var(--border, #2a2d34);
}
.shot-thumbnail-sm.shot-thumbnail-placeholder {
  font-size: 12px;
  line-height: 28px;
  text-align: center;
}
.shot-thumbnail-empty-label {
  font-size: 13px;
}

/* ===========================================================================
   Command Palette (Cmd+K / Ctrl+K) — global full-text search
   =========================================================================== */

/* Omnibar button in the top bar */
.omnibar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px 0 12px;
  min-width: 220px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--vnt-border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.omnibar-btn:hover {
  border-color: rgba(91, 140, 255, 0.35);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.08);
}
.omnibar-btn-label {
  flex: 1;
  text-align: left;
}
.omnibar-btn-kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted, #8a94a6);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 640px) {
  .omnibar-btn { min-width: 0; padding: 0 10px; }
  .omnibar-btn-label, .omnibar-btn-kbd { display: none; }
}

/* Modal overlay + container */
.cmd-palette-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(5, 8, 16, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  animation: fade-up var(--dur-slow, 0.28s) var(--ease-out-soft, ease-out) both;
}
.cmd-palette {
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh;
  background: var(--surface-glass, rgba(23, 27, 38, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: var(--shadow-xl, 0 32px 64px -16px rgba(0,0,0,0.7)),
              0 0 0 1px var(--accent-glow, rgba(91, 140, 255, 0.35));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cmd-palette-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cmd-palette-input-icon {
  color: var(--text-muted, #8a94a6);
  flex: 0 0 auto;
}
.cmd-palette-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text-primary);
  font-size: 16px;
  font-family: inherit;
}
.cmd-palette-input::placeholder { color: var(--text-muted, #6a7283); }
.cmd-palette-esc {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted, #8a94a6);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.cmd-palette-results {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 0 10px;
}
.cmd-result-group-header {
  font-size: 10px;
  font-family: var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vnt-text-faint);
  padding: 10px 16px 4px;
  font-weight: 800;
}
.cmd-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 14px;
  border-left: 2px solid transparent;
  transition: background 0.1s ease;
}
.cmd-result-row.selected,
.cmd-result-row:hover {
  background: rgba(91, 140, 255, 0.12);
  border-left-color: var(--accent);
}
.cmd-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted, #8a94a6);
  flex: 0 0 auto;
}
.cmd-icon-job    { color: #64a2ff; }
.cmd-icon-user   { color: #b089ff; }
.cmd-icon-pin    { color: #ffb454; }
.cmd-icon-project{ color: #48d58a; }
.cmd-result-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmd-result-sub {
  color: var(--text-muted, #8a94a6);
  font-weight: 400;
}
.cmd-palette-empty {
  padding: 26px 16px;
  text-align: center;
  color: var(--text-muted, #8a94a6);
  font-size: 14px;
}

/* ---------------------------------------------------------------------------
 * Sparkline KPI cards — dashboard 4-up grid
 * ------------------------------------------------------------------------ */
.sparkline-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) {
  .sparkline-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .sparkline-kpis { grid-template-columns: 1fr; }
}
.sparkline-card {
  padding: 14px 16px 10px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
}
.sparkline-label {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  color: var(--vnt-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.sparkline-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary, #e6edf3);
}
.sparkline-delta {
  font-size: 11px;
}
.sparkline-delta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(138, 148, 166, 0.15);
  color: var(--text-muted, #8a94a6);
}
.sparkline-delta-chip.up {
  background: rgba(89, 128, 166, 0.15);
  color: var(--accent-2, #ff7b8f);
}
.sparkline-delta-chip.down {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}
.sparkline-delta-chip.flat {
  background: rgba(138, 148, 166, 0.15);
  color: var(--text-muted, #8a94a6);
}
.sparkline-chart {
  margin-top: auto;
  width: 100%;
  overflow: hidden;
}
.sparkline-chart svg.sparkline {
  width: 100%;
  height: 40px;
  display: block;
}

/* ==========================================================================
   Vantic Planning Redesign
   Ported from design_handoff_planning_redesign/ (Apr 2026)
   Ops-theme tokens and component styles scoped under .vnt-redesign
   ========================================================================== */
:root {
  /* Roadmap v2 R3: the Industry DS token remap — ground/ink/steel, square
     blueprint grammar. Names keep working; values lift from the bound DS. */
  --vnt-accent: #5980a6;         /* steel = default tenant */
  --vnt-accent-100: #eceef2;
  --vnt-accent-200: #d5dde6;
  --vnt-accent-300: #b6c5d4;
  --vnt-accent-600: #4c6f92;
  --vnt-accent-700: #3f5c7a;
  --vnt-accent-900: #263a4e;
  --vnt-accent-2: #b07c2e;       /* warn/reshoot — was #ffd166 */
  --vnt-coral: #b07c2e;          /* reshoot ink — was #ff7b8f */
  --vnt-success: #3f7a58;        /* was #52e39f */
  --vnt-danger: #ab4634;
  --vnt-info: var(--vnt-accent);
  --vnt-chip: #ffffff;
  --vnt-bg: #f2f2f3;
  --vnt-bg-2: #ffffff;
  --vnt-bg-3: #e9eaeb;
  --vnt-panel: #ffffff;
  --vnt-panel-2: #e9eaeb;
  --vnt-border: #c9cccf;
  --vnt-border-2: #b8b8bb;
  --vnt-text: #1d1f20;
  --vnt-text-dim: #4a4d4f;
  --vnt-text-faint: #66696c;  /* DS said 6d7073; that is 4.45:1 on paper — one notch darker holds AA */
  --vnt-radius: 0px;
  --vnt-radius-sm: 0px;
  --vnt-radius-lg: 0px;
  --vnt-radius-pill: 0px;
  /* inputs keep DS --radius (4px): set radius on field/input rules, not the token */
  /* Type scale — R4: 12.5px floor rides the scale (fs-10/11 lift together) */
  --vnt-fs-10: 12.5px;
  --vnt-fs-11: 12.5px;
  --vnt-fs-12: 12.5px;
  --vnt-fs-13: 13px;
  --vnt-fs-15: 15px;
  --vnt-fs-18: 18px;
  /* Spacing — 4px grid */
  --vnt-sp-1: 4px;
  --vnt-sp-2: 8px;
  --vnt-sp-3: 12px;
  --vnt-sp-4: 16px;
  --vnt-sp-5: 20px;
  --vnt-sp-6: 24px;
  /* 3D-preview overlay z-scale — three tiers for every floating element:
   * passive readouts < interactive controls < the playback transport bar. */
  --vnt-z-overlay-data: 40;
  --vnt-z-overlay-chrome: 80;
  --vnt-z-overlay-transport: 100;
  /* 3D-preview overlay anchor grid — the shared edge gutter plus the two
   * top rows chips snap to (row 1, 0–36px, is the preview titlebar). */
  --vnt-preview-gutter: 10px;
  --vnt-preview-row-2: 46px;
  --vnt-preview-row-3: 86px;
  /* Accent steps ride the steel ramp — hover one step deeper, dim one
     step lighter. (The permit-surface accent lives once in app.js.) */
  --vnt-accent-bright: var(--vnt-accent-600);
  --vnt-accent-dim: var(--vnt-accent-300);
  /* Route point semantics — one color per route role on every surface */
  --vnt-route-start: #6de5a6;
  --vnt-route-start-hi: #8af0ba;
  --vnt-route-start-lo: #2ed878;
  --vnt-route-end: #da3633;
  --vnt-route-focus: #ff9800;
  --vnt-route-curve: var(--vnt-accent);
  --vnt-route-path: #5ccbd8;
  /* Route tokens are functional MAP color (exempt from the R3 ink sweep,
     like maps themselves) — the orbit ring keeps its high-vis cyan. */
  --vnt-route-orbit: #8ff7ff;
  /* R3: gradients are out — the "go" surface is solid steel, stale is warn. */
  --vnt-accent-lime: var(--vnt-accent);
  --vnt-gradient-go: var(--vnt-accent);
  --vnt-gradient-stale: var(--vnt-accent-2);
  --vnt-shadow-sm: 0 1px 2px rgba(29, 31, 32, 0.08);
  --vnt-shadow-md: 0 2px 6px rgba(29, 31, 32, 0.1);
  --vnt-shadow-lg: 0 8px 24px rgba(29, 31, 32, 0.14);
  --vnt-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --vnt-font-heading: "Barlow Condensed", "Barlow", sans-serif;
  --vnt-font-body: "Barlow", -apple-system, sans-serif;
}

/* DS rule: inputs keep a 4px radius; every other frame is square. */
.vnt-planning-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.vnt-planning-shell select,
.vnt-planning-shell textarea {
  border-radius: 4px;
}

/* R7 — trust pass: clickable violation rows + the warning CTA tier. */
.vnt-airspace-jump {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--vnt-border-2);
  text-underline-offset: 2px;
}
.vnt-airspace-jump:hover {
  color: var(--vnt-accent-700);
}
.vnt-brief-status.warning {
  color: var(--vnt-accent-2);
  font-weight: 700;
}
.vnt-big-cta.has-warning:not(.locked) {
  animation: none;
  box-shadow: inset 0 0 0 2px var(--vnt-accent-2);
}

/* R6 — field night mode: the same token roles flipped onto ink ground,
   applied to the field feed shells only (launcher + pilot checkoff). Not a
   second design: hover steps to accent-400 per the DS dark-ground rule.
   The legacy aliases must be re-declared (var() freezes at definition
   scope — same lesson as the landing hero). */
.vnt-night {
  --vnt-accent-400: #8aa4bd;
  --vnt-bg: #16181a;
  --vnt-bg-2: #1c1f22;
  --vnt-bg-3: #24282c;
  --vnt-panel: #1c1f22;
  --vnt-panel-2: #2a2f34;
  --vnt-border: rgba(255, 255, 255, 0.16);
  --vnt-border-2: rgba(255, 255, 255, 0.26);
  --vnt-text: #f4f6f8;
  --vnt-text-dim: #c3ccd4;
  --vnt-text-faint: #93a0ab;
  /* Status inks lift for the ink ground: the paper danger/success (#ab4634 /
     #3f7a58) fall under AA on the night surface (2.88 / 3.26), so a pilot
     reading an "issue" or "ready" status in the field at night gets a
     brighter tone — #d9705f is 5.07:1, #5aa17d is 5.38:1 on --vnt-bg-2. */
  --vnt-danger: #d9705f;
  --vnt-success: #5aa17d;
  --vnt-chip: rgba(28, 31, 34, 0.9);
  --vnt-accent-bright: var(--vnt-accent-400);
  --text-hi: var(--vnt-text);
  --text-mid: var(--vnt-text-dim);
  --text-lo: var(--vnt-text-faint);
  --text-primary: var(--vnt-text);
  --text-secondary: var(--vnt-text-dim);
  --text-muted: var(--vnt-text-faint);
  --surface-0: var(--vnt-bg);
  --surface-1: var(--vnt-bg-2);
  --surface-2: var(--vnt-bg-3);
  --surface-3: var(--vnt-panel-2);
  --surface-hover: var(--vnt-panel-2);
  --bg-dark: var(--vnt-bg);
  --bg-panel: var(--vnt-bg-2);
  --bg-card: var(--vnt-bg-3);
  --bg-card-hover: var(--vnt-panel-2);
  --bg-input: var(--vnt-bg);
  --border-color: var(--vnt-border);
  background: var(--vnt-bg);
  color: var(--vnt-text);
}
.vnt-night :focus-visible {
  outline-color: var(--vnt-accent-400);
}
.vnt-night button:hover,
.vnt-night a:hover {
  color: var(--vnt-accent-400);
}

/* DS states (R3): one ramp step past base on hover/press, a real focus
   ring, accent-tinted selection, 45% disabled — never per-view restyles. */
.vnt-planning-shell :focus-visible {
  outline: 2px solid var(--vnt-accent);
  outline-offset: 2px;
}
.vnt-planning-shell ::selection {
  background: var(--vnt-accent-200);
  color: var(--vnt-text);
}
.vnt-planning-shell button:disabled {
  opacity: 0.45;
}

/* Shell wraps topbar + merged status/task bar + tv-page (Phase 4: the task
   strip lives inside the subbar's left half — two chrome rows, not three). */
.vnt-planning-shell {
  display: grid;
  grid-template-rows: 46px auto minmax(0, 1fr);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.vnt-planning-shell > .tv-page {
  grid-row: 3;
  height: 100%;
  min-height: 0;
}

.vnt-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 14px;
  background: var(--vnt-bg-2);
  border-bottom: 1px solid var(--vnt-border);
  color: var(--vnt-text);
}
.vnt-topbar svg {
  width: 16px;
  height: 16px;
  display: block;
}
.vnt-topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 14px;
  white-space: nowrap;
}
.vnt-logo-mark {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--gradient-cta);
  color: #031014;
  font-family: var(--vnt-font-mono);
  font-size: 12px;
  font-weight: 800;
}
.vnt-topbar-back {
  color: var(--vnt-text-dim);
  text-decoration: none;
  padding: 6px 9px;
  border: 1px solid rgba(29, 31, 32, 0.08);
  border-radius: var(--vnt-radius-sm);
  font-weight: 650;
  font-size: 12px;
  white-space: nowrap;
  transition: color 150ms ease-out, background 150ms ease-out, border-color 150ms ease-out;
}
.vnt-topbar-back:hover {
  color: var(--vnt-text);
  background: var(--vnt-bg-3);
  border-color: rgba(89, 128, 166, 0.34);
}
.vnt-topbar-project {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 2px;
}
.vnt-topbar-project strong {
  min-width: 0;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.1;
}
.vnt-topbar-spacer {
  flex: 1;
  min-width: 10px;
}
/* Tier-3 .btn-text consumer — layout/color deltas only, the borderless
   transparent base comes from .btn-text. */
.vnt-topbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 9px;
  border-radius: var(--vnt-radius-sm);
  color: var(--vnt-text-dim);
  font-weight: 600;
  font-size: 12px;
  transition: color 150ms ease-out, background 150ms ease-out;
}
.vnt-topbar-icon {
  width: 30px;
  padding: 0;
}
.vnt-topbar-brief.locked {
  opacity: 0.55;
}
.vnt-topbar-icon:hover {
  color: var(--vnt-text);
  background: var(--vnt-bg-3);
}
.vnt-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gradient-cta);
  color: #031014;
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  font-weight: 800;
}

/* Subbar refinements — live mission math and status chips */
.vnt-planning-shell .vnt-pill {
  transition: color 250ms ease, border-color 250ms ease, background 400ms ease;
}

/* Motion: pin-row / shot row / segment hover — 150ms ease-out */
.vnt-planning-shell .tv-ht-row,
.vnt-planning-shell .tv-pin-summary,
.vnt-planning-shell .vnt-segment,
.vnt-planning-shell #tvShotTypePills .tv-pill,
.vnt-planning-shell #tvTimePills .tv-pill {
  transition: all 150ms ease-out;
}

/* Subbar — phase + live math */
.vnt-subbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 0;
  min-height: 40px;
  background: var(--vnt-panel);
  border-bottom: 1px solid var(--vnt-border);
  overflow-x: auto;
  white-space: nowrap;
  flex-shrink: 0;
}
.vnt-subbar::-webkit-scrollbar { height: 4px; }
.vnt-subbar::-webkit-scrollbar-thumb { background: var(--vnt-border); border-radius: 2px; }
.vnt-subbar .vnt-spacer { flex: 1; min-width: 10px; }

/* Current task lives in the merged bar's left half. Step state reads as a
   left-border accent + kicker tint, not a banner louder than the topbar. */
.vnt-task-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 1 auto;
  align-self: stretch;
  padding: 4px 10px 4px 12px;
  border-left: 3px solid var(--vnt-accent-dim);
  color: var(--vnt-text);
}
.vnt-task-kicker {
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(89, 128, 166, 0.24);
  background: rgba(89, 128, 166, 0.10);
  color: var(--vnt-accent-bright);
  font: 800 10px/1 var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.vnt-task-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  color: var(--vnt-text);
}
.vnt-task-body {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--vnt-text-dim);
  font-size: 12px;
}
.vnt-task-btn {
  min-height: 28px;
  padding: 0 12px;
  border-radius: 7px;
  border: 1px solid rgba(89, 128, 166, 0.36);
  background: rgba(89, 128, 166, 0.14);
  color: var(--vnt-text);
  font: 800 11px/1 var(--vnt-font-mono);
  cursor: pointer;
}
.vnt-task-btn:hover {
  background: rgba(89, 128, 166, 0.24);
  border-color: rgba(89, 128, 166, 0.62);
}
.vnt-task-strip[data-step="shots"] {
  border-left-color: var(--vnt-accent-2);
}
.vnt-task-strip[data-step="guest"] {
  border-left-color: var(--vnt-accent);
}
.vnt-task-strip[data-step="placing"] {
  border-left-color: var(--vnt-accent-2);
}
.vnt-task-strip[data-step="placing"] .vnt-task-kicker {
  border-color: rgba(255, 209, 102, 0.40);
  background: rgba(255, 209, 102, 0.12);
  color: var(--vnt-accent-2);
}
.vnt-task-strip[data-step="placing"] .vnt-task-btn {
  background: rgba(255, 209, 102, 0.18);
  border-color: rgba(255, 209, 102, 0.58);
  color: #fff5cc;
}
.vnt-task-strip[data-step="brief"] {
  border-left-color: var(--vnt-success);
}
.vnt-planning-shell[data-flow-step="guest"] .vnt-defer-until-shots,
.vnt-planning-shell[data-flow-step="guest"] .vnt-defer-until-brief,
.vnt-planning-shell[data-flow-step="guest"] .vnt-hide-until-site,
.vnt-planning-shell[data-flow-step="guest"] .tv-3d-standby-msg,
.vnt-planning-shell[data-flow-step="site"] .tv-3d-standby-msg,
.vnt-planning-shell[data-flow-step="site"] .vnt-defer-until-shots,
.vnt-planning-shell[data-flow-step="site"] .vnt-defer-until-brief,
.vnt-planning-shell[data-flow-step="site"] .vnt-hide-until-site,
.vnt-planning-shell[data-flow-step="shots"] .vnt-defer-until-shots,
.vnt-planning-shell[data-flow-step="shots"] .vnt-defer-until-brief,
.vnt-planning-shell[data-flow-step="structure"] .vnt-defer-until-brief {
  display: none !important;
}
.vnt-planning-shell[data-flow-step="site"] .tv-map-toolbar,
.vnt-planning-shell[data-flow-step="shots"] .tv-map-toolbar {
  max-width: min(720px, calc(100% - 24px));
}
.vnt-planning-shell[data-flow-step="site"] .vnt-map-search-wrap,
.vnt-planning-shell[data-flow-step="shots"] .vnt-map-search-wrap {
  flex: 1 1 420px;
}
.vnt-flow-current {
  position: relative;
}
.vnt-flow-current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 999px;
  background: var(--vnt-accent-600);
  box-shadow: 0 0 14px rgba(89, 128, 166, 0.42);
}
.vnt-flow-secondary {
  opacity: 0.56;
  filter: saturate(0.68);
  transition: opacity 150ms ease, filter 150ms ease;
}
.vnt-flow-secondary:hover,
.vnt-flow-secondary:focus-within {
  opacity: 1;
  filter: none;
}
.vnt-task-focus-flash {
  box-shadow: 0 0 0 2px rgba(89, 128, 166,0.72), 0 0 28px rgba(89, 128, 166,0.28) !important;
}

.tv-project-meta {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
}
.tv-project-meta details {
  border: 1px solid var(--vnt-border);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.7);
  overflow: hidden;
}
.tv-project-meta summary {
  cursor: pointer;
  padding: 7px 9px;
  color: var(--vnt-text-faint);
  font: 800 10px/1 var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.tv-project-meta textarea,
.tv-project-meta input {
  width: calc(100% - 16px);
  margin: 0 8px 8px;
}
.tv-project-meta p {
  margin: 0 8px 8px;
}

/* Phase indicator chips */
.vnt-phase-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  font-size: 11px;
  color: var(--vnt-text-dim);
}
.vnt-phase-step {
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--vnt-text-faint);
  font-weight: 400;
}
.vnt-phase-step.done { color: var(--vnt-text); }
.vnt-phase-step.locked { opacity: 0.58; }
.vnt-phase-step.active {
  color: var(--vnt-text);
  font-weight: 600;
  background: color-mix(in oklch, var(--vnt-accent) 18%, transparent);
}
.vnt-phase-sep { color: var(--vnt-text-faint); font-size: 10px; }

/* Live math pills */
.vnt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--vnt-radius-pill);
  background: var(--vnt-chip);
  font-size: var(--vnt-fs-12);
  color: var(--vnt-text-dim);
  border: 1px solid var(--vnt-border);
  white-space: nowrap;
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}
.vnt-pill .vnt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vnt-text-dim);
  display: inline-block;
}
.vnt-pill.ok { color: var(--vnt-success); border-color: color-mix(in oklch, var(--vnt-success) 40%, transparent); }
.vnt-pill.ok .vnt-dot { background: var(--vnt-success); box-shadow: 0 0 6px var(--vnt-success); }
.vnt-pill.warn { color: var(--vnt-accent-2); border-color: color-mix(in oklch, var(--vnt-accent-2) 40%, transparent); }
.vnt-pill.warn .vnt-dot { background: var(--vnt-accent-2); }
.vnt-pill.err { color: var(--vnt-danger); border-color: color-mix(in oklch, var(--vnt-danger) 40%, transparent); }
.vnt-pill.err .vnt-dot { background: var(--vnt-danger); }
.vnt-pill.danger {
  color: var(--vnt-danger);
  border-color: color-mix(in oklch, var(--vnt-danger) 55%, transparent);
  background: color-mix(in oklch, var(--vnt-danger) 14%, transparent);
  font-weight: 800;
}
.vnt-pill.danger .vnt-dot { background: var(--vnt-danger); }
.vnt-pill.pending {
  color: var(--vnt-text-dim);
  border-color: rgba(255, 255, 255, 0.16);
}
.vnt-pill.pending .vnt-dot {
  background: var(--vnt-text-faint);
  animation: vnt-pending-pulse 1.2s ease-in-out infinite;
}
@keyframes vnt-pending-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
.vnt-airspace-popover {
  position: fixed;
  z-index: var(--z-dropdown);
  min-width: 280px;
  max-width: 380px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(6, 20, 27, 0.97);
  border: 1px solid rgba(132, 185, 196, 0.28);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  font-size: 12px;
  color: var(--vnt-text);
}
.vnt-airspace-popover-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vnt-text-dim);
  margin-bottom: 8px;
}
.vnt-airspace-group { margin-bottom: 10px; }
.vnt-airspace-group:last-child { margin-bottom: 0; }
.vnt-airspace-group b {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.vnt-airspace-group ul { margin: 0; padding-left: 16px; }
.vnt-airspace-group li { margin: 2px 0; line-height: 1.45; }
.vnt-airspace-group.is-nofly b { color: var(--vnt-danger); }
.vnt-airspace-group.is-violation b { color: var(--vnt-accent-2); }
.vnt-airspace-group.is-caution b { color: #ffd479; }
.vnt-airspace-group.is-failed b { color: var(--vnt-text-dim); }
.vnt-airspace-group.is-clear b { color: var(--vnt-success); }

/* Stack chip for time-of-day group headers in shot list */
.vnt-stack-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  background: color-mix(in oklch, var(--vnt-accent-2) 20%, transparent);
  color: var(--vnt-accent-2);
  font-family: var(--vnt-font-mono);
  font-size: var(--vnt-fs-11);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid color-mix(in oklch, var(--vnt-accent-2) 30%, transparent);
}

/* Applied to .tv-time-header to give the grouped shot list a chip look */
.tv-time-header.vnt-tod-header {
  border-left: none !important;
  padding: 6px 8px;
  background: transparent;
}
.tv-time-header.vnt-tod-header {
  flex-wrap: wrap;
  row-gap: 3px;
}
.tv-time-header.vnt-tod-header .vnt-stack-chip { margin-right: auto; }

/* Mono typography for altitude / id readouts in shot rows */
.tv-ht-row.vnt-shot-row {
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.01em;
}
.tv-ht-row.vnt-shot-row .tv-ht-label-id { font-size: var(--vnt-fs-11); letter-spacing: 0; }
.tv-ht-row.vnt-shot-row .tv-ht-elev { font-size: 13px; }

/* Big persistent primary CTA — the sole outcome of the Planning page */
.vnt-big-cta {
  padding: 11px 14px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  border-radius: var(--vnt-radius);
  background: var(--gradient-cta);
  color: var(--vnt-panel-2);
  box-shadow: 0 12px 32px rgba(89, 128, 166, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  transition: filter 0.12s;
  width: 100%;
}
.vnt-big-cta:hover { filter: brightness(1.08); }
.vnt-big-cta:active { transform: translateY(0.5px); }
/* (the dead subbar Export chip was removed in the Phase 4 bar merge — Quick
   PDF in the topbar and the rail Advanced export panel are the export paths) */
.vnt-big-cta.locked {
  /* Was var(--vnt-chip) = white on the white rail footer — the Generate
     Brief button vanished whenever it was locked (every new plan). A
     locked control must still LOOK like a control. */
  background: transparent;
  border: 1px solid var(--vnt-border);
  color: var(--vnt-text-dim);
  box-shadow: none;
  cursor: not-allowed;
}
.vnt-big-cta .vnt-count {
  font-family: var(--vnt-font-mono);
  font-size: 11px;
  background: rgba(29, 31, 32, 0.11);
  padding: 2px 6px;
  border-radius: 4px;
  color: inherit;
}
.vnt-big-cta .vnt-brief-status {
  flex-basis: 100%;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.72;
}
.vnt-big-cta .vnt-brief-status.ready {
  opacity: 0.88;
}

.vnt-advanced-export-panel {
  margin-top: 8px;
  border: 1px solid rgba(132, 185, 196, 0.16);
  border-radius: 8px;
  background: rgba(6, 17, 24, 0.58);
}

.vnt-advanced-export-panel summary {
  cursor: pointer;
  padding: 8px 10px;
  color: var(--vnt-text-dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  list-style: none;
}

.vnt-advanced-export-panel summary::-webkit-details-marker {
  display: none;
}

.vnt-advanced-export-panel summary::after {
  content: "+";
  float: right;
  color: var(--vnt-accent);
  font-family: var(--vnt-font-mono);
}

.vnt-advanced-export-panel[open] summary::after {
  content: "-";
}

.vnt-advanced-export-panel p {
  margin: 0;
  padding: 0 10px 8px;
  color: var(--vnt-text-faint);
  font-size: var(--vnt-fs-11);
  line-height: 1.35;
}

.vnt-advanced-export-panel .btn {
  margin: 0 8px 8px;
  width: calc(100% - 16px) !important;
}

.vnt-workspace-save-status {
  display: flex;
  justify-content: center;
}

.vnt-workspace-save-status span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 30px;
  border: 1px solid rgba(87, 217, 111, 0.22);
  border-radius: var(--vnt-radius-pill);
  background: rgba(87, 217, 111, 0.07);
  color: var(--vnt-success);
  font-family: var(--vnt-font-mono);
  font-size: var(--vnt-fs-11);
  font-weight: 800;
  letter-spacing: 0;
}

.vnt-workspace-save-status span::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

/* Left-rail footer hosting the big CTA */
.vnt-rail-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-panel);
  position: sticky;
  bottom: 0;
  z-index: 5;
}
/* Save state now reads in one place beside the Generate Brief CTA. */
.vnt-rail-save {
  margin-top: 8px;
}

/* ---- Design audit Phase 4 part 2: left-rail re-architecture ----
   The rail reads Title -> Address -> Shot List -> CTA. Project notes, the
   deliverables link, and the 3D-calibration plumbing move into a "Project
   settings" drawer opened from a kebab beside the title; Import CSV, AI
   Suggest, and the Waypoint export fold into a shot-list overflow menu. */
.vnt-planning-shell .vnt-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.vnt-planning-shell .vnt-title-row .tv-page-title {
  flex: 1 1 auto;
  min-width: 0;
}
.vnt-planning-shell .vnt-kebab {
  flex: 0 0 auto;
  width: 30px;
  min-height: 30px;
  margin-top: 6px;
  padding: 0;
  border-radius: var(--vnt-radius-sm);
  border: 1px solid var(--vnt-border);
  background: var(--vnt-bg-3);
  color: var(--vnt-text-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.vnt-planning-shell .vnt-kebab:hover {
  color: var(--vnt-text);
  border-color: var(--vnt-accent);
}
.vnt-planning-shell .vnt-kebab[aria-expanded="true"] {
  color: var(--vnt-accent);
  border-color: var(--vnt-accent);
}

/* Project settings drawer — fixed overlay so it covers the planner regardless
   of where it sits in the rail DOM. */
.vnt-settings-drawer {
  display: none;
  position: fixed;
  inset: 0;
  /* Modal tier: must cover the right inspector panel (900) and the
     floating 3D preview (1500); toasts (9999) stay on top. */
  z-index: 1600;
}
.vnt-settings-drawer.open { display: block; }
.vnt-settings-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 10, 14, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.vnt-settings-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-color);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.42);
  animation: vntSettingsSlideIn 160ms ease;
}
@keyframes vntSettingsSlideIn {
  from { transform: translateX(18px); opacity: 0.35; }
  to   { transform: translateX(0); opacity: 1; }
}
.vnt-settings-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
}
.vnt-settings-drawer-head .vnt-kicker {
  font: 800 10px/1 var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vnt-text-dim);
}
.vnt-settings-drawer-close {
  width: 28px;
  height: 28px;
  border-radius: var(--vnt-radius-sm);
  border: 1px solid var(--vnt-border);
  background: var(--vnt-bg-3);
  color: var(--vnt-text-dim);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.vnt-settings-drawer-close:hover {
  color: var(--vnt-text);
  border-color: var(--vnt-accent);
}
.vnt-settings-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px 24px;
  display: grid;
  gap: 12px;
}
.vnt-settings-drawer-body .tv-project-meta { margin: 0; }
.vnt-settings-drawer-body .tv-project-settings { margin-top: 0 !important; }

/* Drawer content — tokenized rebuild of the calibration block that moved in
   from the rail (formerly ~40 inline style attributes). Scoped under the
   drawer so global .tv-pill / .tv-ground-elev / .form-input styling
   elsewhere is untouched. */
.vnt-settings-drawer .vnt-settings-note {
  font-size: 11px;
  margin-top: 4px;
}
.vnt-settings-drawer .vnt-settings-summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 6px 0;
}
.vnt-settings-drawer .vnt-settings-card {
  padding: 8px;
  background: var(--surface-hover);
  border-radius: 6px;
  margin-top: 4px;
}
.vnt-settings-drawer .vnt-settings-elev-row {
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.vnt-settings-drawer .vnt-settings-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vnt-settings-drawer .vnt-settings-elev-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.vnt-settings-drawer .vnt-settings-num {
  width: 80px;
  padding: 4px 8px;
  font-size: 13px;
  background: var(--surface-hover);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
}
.vnt-settings-drawer .vnt-settings-datum-pills { gap: 2px; }
.vnt-settings-drawer .vnt-settings-datum-pills .tv-pill {
  font-size: 10px;
  padding: 2px 8px;
}
.vnt-settings-drawer .vnt-settings-loc {
  padding: 8px;
  background: var(--surface);
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 8px;
}
.vnt-settings-drawer .vnt-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.vnt-settings-drawer .vnt-settings-label {
  font-size: 12px;
  color: var(--text-secondary);
}
.vnt-settings-drawer .vnt-settings-label-strong { font-weight: 600; }
.vnt-settings-drawer .vnt-settings-check { cursor: pointer; }
.vnt-settings-drawer .vnt-settings-check input {
  margin-right: 6px;
  vertical-align: middle;
}
.vnt-settings-drawer .vnt-settings-readout {
  font-size: 11px;
  color: var(--text-primary);
  font-family: var(--vnt-font-mono);
}
.vnt-settings-drawer .vnt-settings-range { width: 100%; }
.vnt-settings-drawer .vnt-settings-hint {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.35;
}
.vnt-settings-drawer .vnt-settings-divider {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}
.vnt-settings-drawer .vnt-settings-actions {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}
.vnt-settings-drawer .vnt-settings-actions .btn {
  width: 100%;
  font-size: 11px;
}
.vnt-settings-drawer .vnt-settings-diag {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 6px;
  font-family: var(--vnt-font-mono);
  word-break: break-all;
  line-height: 1.4;
}
.vnt-settings-drawer .vnt-settings-file-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.vnt-settings-drawer .vnt-settings-file-row input[type="file"] {
  flex: 1;
  font-size: 11px;
}
.vnt-settings-drawer .vnt-settings-file-row .btn { font-size: 11px; }

/* Shot-list overflow: + Add Shot stays visible, the rest fold into the menu. */
.vnt-planning-shell .vnt-shot-actions-more {
  width: 100%;
  min-height: 34px;
  color: var(--text-secondary);
}
.vnt-planning-shell .vnt-shot-list-actions {
  position: relative; /* anchors the overflow popover */
}
.vnt-planning-shell .vnt-shot-actions-menu {
  /* Popover above the trigger row — the section card is overflow:hidden, so
     opening downward (in flow) would clip at the card's bottom edge. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 30;
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--vnt-border);
  border-radius: var(--vnt-radius-sm);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 32px rgba(29, 31, 32, 0.225);
}
.vnt-planning-shell .vnt-shot-actions-menu.hidden { display: none; }
/* Full-width menu entries (the CSV row manages its own two-button layout). */
.vnt-planning-shell .vnt-shot-actions-menu-btn { width: 100%; }

.vnt-map-tools-drawer {
  position: relative;
  flex: 0 0 auto;
}

.vnt-map-tools-drawer summary {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--vnt-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--vnt-text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  list-style: none;
  box-shadow: 0 8px 22px rgba(29, 31, 32, 0.1);
}

.vnt-map-tools-drawer summary::-webkit-details-marker {
  display: none;
}

.vnt-map-tools-drawer summary::after {
  content: "+";
  color: var(--vnt-accent);
  font-family: var(--vnt-font-mono);
  font-size: 13px;
}

.vnt-map-tools-drawer[open] summary {
  border-color: rgba(89, 128, 166, 0.36);
  background: rgba(255, 255, 255, 0.94);
}

.vnt-map-tools-drawer[open] summary::after {
  content: "-";
}

.vnt-map-tools-drawer summary small {
  color: var(--vnt-text-faint);
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  font-weight: 700;
}

.vnt-map-tools-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 750;
  min-width: 190px;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(29, 31, 32, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 48px rgba(29, 31, 32, 0.21), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.vnt-map-tools-menu .btn {
  justify-content: flex-start;
  width: 100%;
}

.tv-permit-safety-toggle.active {
  color: #ffebe8;
  border-color: rgba(255, 70, 44, 0.72);
  background: rgba(255, 59, 34, 0.18);
  box-shadow: inset 3px 0 0 rgba(255, 59, 34, 0.95);
}

.vnt-permit-draw-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(255, 110, 48, 0.24);
  border-radius: 8px;
  background: rgba(255, 76, 31, 0.07);
}

.vnt-permit-draw-title {
  grid-column: 1 / -1;
  color: var(--vnt-accent-2);
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vnt-permit-kind-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.vnt-permit-kind-btn {
  min-width: 0;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 126, 58, 0.18);
  border-radius: 7px;
  background: rgba(4, 12, 18, 0.58);
  color: rgba(255, 238, 230, 0.78);
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.vnt-permit-kind-btn i {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #ff3b22;
  box-shadow: 0 0 0 3px rgba(255, 59, 34, 0.16);
}

.vnt-permit-kind-btn[data-permit-kind="transition"] i {
  background: #ffd400;
  box-shadow: 0 0 0 3px rgba(255, 212, 0, 0.16);
}

.vnt-permit-kind-btn[data-permit-kind="no_overflight"] i {
  background: #ff1d1d;
  box-shadow: 0 0 0 3px rgba(255, 29, 29, 0.18);
}

.vnt-permit-kind-btn[data-permit-kind="staging"] i {
  background: #ff8a35;
  box-shadow: 0 0 0 3px rgba(255, 138, 53, 0.18);
}

.vnt-permit-kind-btn[data-permit-kind="observer"] i {
  background: var(--vnt-accent-dim);
  box-shadow: 0 0 0 3px rgba(102, 232, 220, 0.18);
}

.vnt-permit-kind-btn[data-permit-kind="note"] i {
  background: #f8fbff;
  box-shadow: 0 0 0 3px rgba(248, 251, 255, 0.14);
}

.vnt-permit-kind-btn.active {
  color: #f9ffff;
  border-color: rgba(102, 232, 220, 0.56);
  background: rgba(102, 232, 220, 0.10);
}

.vnt-permit-label-input {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255, 126, 58, 0.24);
  border-radius: 8px;
  background: rgba(4, 12, 18, 0.84);
  color: rgba(255, 245, 238, 0.96);
  font-family: var(--vnt-font-mono);
  font-size: 11px;
  font-weight: 800;
  outline: none;
}

.vnt-permit-label-input:focus {
  border-color: rgba(255, 156, 66, 0.82);
  box-shadow: 0 0 0 2px rgba(255, 104, 52, 0.18);
}

.vnt-permit-label-input::placeholder {
  color: rgba(255, 218, 190, 0.46);
}

.vnt-permit-selected-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(102, 232, 220, 0.32);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(102, 232, 220, 0.12), rgba(255, 138, 53, 0.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

.vnt-permit-selected-kicker {
  color: var(--vnt-accent-bright);
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vnt-permit-selected-name {
  min-width: 0;
  overflow: hidden;
  color: rgba(245, 252, 255, 0.96);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vnt-permit-selected-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 6px;
}

.vnt-permit-draw-tools .btn.danger {
  color: rgba(255, 219, 214, 0.96);
  border-color: rgba(255, 60, 42, 0.48);
}

.vnt-permit-draw-tools .btn.danger:hover {
  border-color: rgba(255, 60, 42, 0.86);
  background: rgba(255, 60, 42, 0.16);
}

.vnt-permit-draw-tools .btn {
  justify-content: center;
  min-height: 30px;
  padding-inline: 8px;
  color: rgba(255, 238, 230, 0.9);
  border-color: rgba(255, 126, 58, 0.22);
}

.vnt-permit-draw-tools .btn.active {
  color: var(--vnt-panel-2);
  border-color: rgba(255, 156, 66, 0.95);
  background: linear-gradient(135deg, #ff6537, #ffc15a);
  box-shadow: 0 0 18px rgba(255, 104, 52, 0.32);
}

.vnt-permit-draw-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.vnt-permit-draw-actions .btn {
  font-size: 11px;
}

.vnt-permit-safety-label-icon,
.vnt-permit-takeoff-icon,
.vnt-permit-draft-point-icon,
.vnt-permit-edit-handle-icon {
  background: transparent;
  border: 0;
}

.vnt-permit-corner-handle,
.vnt-permit-radius-handle {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.95);
  border-radius: 999px;
  background: #0d2233;
  box-shadow: 0 0 0 2px rgba(6,16,25,0.65), 0 6px 14px rgba(0,0,0,0.4);
  cursor: grab;
}

.vnt-permit-corner-handle:active,
.vnt-permit-radius-handle:active {
  cursor: grabbing;
}

.vnt-permit-radius-handle {
  border-radius: 4px;
  background: var(--vnt-accent);
}

.vnt-permit-safety-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  max-width: 170px;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 2px;
  background: rgba(255, 50, 24, 0.92);
  color: #060606;
  font-family: var(--vnt-font-mono);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

.vnt-permit-safety-label-icon.takeoff .vnt-permit-safety-label {
  min-width: 128px;
  background: rgba(255, 135, 34, 0.96);
}

.vnt-permit-safety-label-icon.transition .vnt-permit-safety-label {
  background: rgba(255, 218, 28, 0.94);
  color: #151006;
}

.vnt-permit-safety-label-icon.danger .vnt-permit-safety-label {
  background: rgba(255, 31, 20, 0.96);
  color: #070707;
}

.vnt-permit-safety-label-icon.staging .vnt-permit-safety-label {
  background: rgba(255, 138, 53, 0.96);
  color: #120805;
}

.vnt-permit-safety-label-icon.observer .vnt-permit-safety-label {
  background: rgba(102, 232, 220, 0.94);
  color: #041414;
}

.vnt-permit-safety-label-icon.note .vnt-permit-safety-label {
  background: rgba(3, 8, 12, 0.94);
  color: rgba(245, 252, 255, 0.98);
  border: 1px solid rgba(245, 252, 255, 0.4);
}

.vnt-permit-takeoff-helipad {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255,255,255,0.92);
  border-radius: 999px;
  background: radial-gradient(circle at 38% 30%, #ffd86d 0 18%, #ff8b2c 19% 62%, #e74216 63% 100%);
  color: #1b0803;
  font-family: var(--vnt-font-mono);
  font-size: 22px;
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(0,0,0,0.34), 0 0 0 4px rgba(255, 139, 44, 0.22);
}

.vnt-permit-draft-point {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 999px;
  background: #ff8a35;
  color: #081016;
  font-family: var(--vnt-font-mono);
  font-size: 11px;
  font-weight: 1000;
  box-shadow: 0 8px 18px rgba(0,0,0,0.32);
}

/* Building segment row — color-bar + meta + cumulative AGL */
.vnt-segment {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--vnt-radius-sm);
  border: 1px solid var(--border-color);
  background: var(--surface-hover);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 4px;
}
.vnt-segment:hover { border-color: var(--vnt-border-2); }
.vnt-segment.active {
  border-color: var(--vnt-accent);
  background: color-mix(in oklch, var(--vnt-accent) 8%, var(--surface-hover));
}
.vnt-segment .vnt-seg-bar {
  width: 6px;
  height: 34px;
  border-radius: 2px;
  background: var(--vnt-seg-color, var(--vnt-accent));
  justify-self: center;
}
.vnt-segment .vnt-seg-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vnt-segment .vnt-seg-name {
  font-weight: 600;
  font-size: var(--vnt-fs-13);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vnt-segment .vnt-seg-sub {
  font-family: var(--vnt-font-mono);
  font-size: var(--vnt-fs-11);
  color: var(--text-secondary);
}
.vnt-segment .vnt-seg-right {
  font-family: var(--vnt-font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  text-align: right;
}
.vnt-segment .vnt-seg-right b {
  display: block;
  font-size: var(--vnt-fs-13);
  color: var(--text-primary);
  font-weight: 500;
}
.vnt-segment .vnt-seg-right .vnt-unit { color: var(--vnt-text-faint); font-weight: 400; }

/* Responsive: hide non-critical subbar items on narrow screens */
@media (max-width: 700px) {
  .vnt-subbar .vnt-pill-hideable { display: none; }
}

/* ==========================================================================
   Vantic Planning — Aggressive Visual Overlay (ops theme)
   Scoped under .vnt-planning-shell so it only affects the new Planning page.
   Transforms existing TowerView markup to match the design-handoff prototype:
   - dark ops background, tighter rail, mono-typography numeric fields
   - color-bar building segments
   - stack-chip time-of-day headers (SUNRISE amber / MID-DAY cyan / TWILIGHT violet)
   - monospace shot rows with idx + altitude + direction
   No markup changes — pure CSS override.
   ========================================================================== */

/* Base page surface */
.vnt-planning-shell {
  background: var(--vnt-bg);
  color: var(--vnt-text);
  font-size: var(--vnt-fs-13);
  letter-spacing: -0.005em;
}
.vnt-planning-shell .tv-page {
  background: var(--vnt-bg);
  color: var(--vnt-text);
  display: grid !important;
  grid-template-columns: 308px 1fr 376px;
  min-height: 0;
}
.vnt-planning-shell .tv-resize-handle { display: none !important; }
.vnt-planning-shell .tv-center-panel { min-width: 0; }

/* ---------- Left rail ---------- */
.vnt-planning-shell .tv-left-panel {
  /* Fill the 308px grid column (the legacy 336px override spilled the rail's
     right edge — incl. the project-settings kebab — under the map). */
  width: auto;
  background: var(--vnt-panel);
  border-right: 1px solid var(--vnt-border);
  color: var(--vnt-text);
}
.vnt-planning-shell .tv-left-panel::-webkit-scrollbar { width: 8px; }
.vnt-planning-shell .tv-left-panel::-webkit-scrollbar-thumb { background: var(--vnt-border); border-radius: 4px; }

.vnt-planning-shell .tv-section {
  padding: 12px 14px;
  border-bottom: 1px solid var(--vnt-border);
  background: var(--vnt-panel);
}
.vnt-planning-shell .tv-section h3 {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vnt-text-faint);
  margin-bottom: 10px;
  font-family: var(--vnt-font-mono);
}

/* Inputs in the left rail — ops-dark fields */
.vnt-planning-shell .tv-left-panel input[type="text"],
.vnt-planning-shell .tv-left-panel input[type="number"],
.vnt-planning-shell .tv-left-panel input[type="search"],
.vnt-planning-shell .tv-left-panel select,
.vnt-planning-shell .tv-left-panel textarea {
  background: var(--vnt-bg-3);
  border: 1px solid var(--vnt-border);
  border-radius: var(--vnt-radius-sm);
  color: var(--vnt-text);
  font-size: var(--vnt-fs-13);
  outline: none;
}
.vnt-planning-shell .tv-left-panel input:focus,
.vnt-planning-shell .tv-left-panel select:focus,
.vnt-planning-shell .tv-left-panel textarea:focus {
  border-color: var(--vnt-accent);
}
.vnt-planning-shell .tv-left-panel input[type="number"] {
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* ---------- Building stack — segment items get color-bar treatment ---------- */
.vnt-planning-shell .tvp-segment-item {
  position: relative;
  background: var(--vnt-bg-3);
  border: 1px solid var(--vnt-border);
  border-radius: var(--vnt-radius-sm);
  padding: 10px 10px 10px 22px;
  margin-bottom: 6px;
  transition: border-color 0.15s, background 0.15s;
}
.vnt-planning-shell .tvp-segment-item:hover {
  background: var(--vnt-bg-3);
  border-color: var(--vnt-border-2);
}
/* The existing 4px colored strip becomes a prominent 6px color bar stuck to the left edge */
.vnt-planning-shell .tvp-seg-color {
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.vnt-planning-shell .tvp-seg-name {
  color: var(--vnt-text);
  font-weight: 600;
  font-size: var(--vnt-fs-13);
  border-bottom-color: transparent;
}
.vnt-planning-shell .tvp-seg-name:focus {
  border-bottom-color: var(--vnt-accent);
}
.vnt-planning-shell .tvp-seg-meta {
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: var(--vnt-fs-11);
  color: var(--vnt-text-dim);
}
.vnt-planning-shell .tvp-stepper {
  border: 1px solid var(--vnt-border);
  background: var(--vnt-bg);
  border-radius: var(--vnt-radius-sm);
}
.vnt-planning-shell .tvp-stepper-btn {
  background: var(--vnt-bg);
  color: var(--vnt-text);
  width: 22px;
  min-width: 22px;
  height: 24px;
  font-size: 13px;
}
.vnt-planning-shell .tvp-stepper-btn:hover {
  background: var(--vnt-accent);
  color: var(--vnt-bg);
}
.vnt-planning-shell .tvp-stepper-val {
  color: var(--vnt-text);
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: var(--vnt-fs-12);
}
.vnt-planning-shell .tvp-stepper-group label {
  font-size: 10px;
  color: var(--vnt-text-faint);
  letter-spacing: 0.08em;
}
.vnt-planning-shell .tvp-seg-body select.tvp-seg-type {
  background: var(--vnt-bg);
  border: 1px solid var(--vnt-border);
  color: var(--vnt-text-dim);
  font-family: var(--vnt-font-mono);
  font-size: var(--vnt-fs-11);
}

/* Building tower diagram: keep it but bump contrast */
.vnt-planning-shell .tv-building-tower {
  background: rgba(29, 31, 32, 0.175);
  border: 1px solid var(--vnt-border);
}
.vnt-planning-shell .tv-diag-block {
  border-bottom-color: rgba(255,255,255,0.08);
}
.vnt-planning-shell .tv-diag-block-name {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.vnt-planning-shell .tv-diag-block-info {
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}
.vnt-planning-shell .tv-diag-total,
.vnt-planning-shell .tv-diag-gnd {
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  color: var(--vnt-text-dim);
}

/* ---------- Shot list — stack-chip headers + mono rows ---------- */
.vnt-planning-shell .tv-time-group {
  background: var(--vnt-bg-3);
  border: 1px solid var(--vnt-border);
  border-radius: var(--vnt-radius-sm);
  padding: 6px;
  margin-bottom: 8px;
}
.vnt-planning-shell .tv-time-header {
  padding: 4px 6px;
  border-radius: 4px;
  background: transparent;
  color: var(--vnt-accent-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--vnt-font-mono);
}
.vnt-planning-shell .tv-time-header:hover {
  background: rgba(255,255,255,0.03);
}
.vnt-planning-shell .tv-time-arrow { color: var(--vnt-text-faint); }
.vnt-planning-shell .tv-time-count {
  color: var(--vnt-text-dim);
  font-family: var(--vnt-font-mono);
  font-weight: 500;
}
/* Per-time-of-day color coding via [data-tod] attr OR textContent keyword match (fallback uses child chip) */
.vnt-planning-shell .tv-time-header[data-tod="sunrise"],
.vnt-planning-shell .tv-time-header[data-tod="sunset"],
.vnt-planning-shell .tv-time-header[data-tod="golden"],
.vnt-planning-shell .tv-time-header[data-tod="morning"] {
  color: var(--vnt-accent-2);
}
.vnt-planning-shell .tv-time-header[data-tod="midday"],
.vnt-planning-shell .tv-time-header[data-tod="noon"],
.vnt-planning-shell .tv-time-header[data-tod="day"] {
  color: var(--vnt-accent);
}
.vnt-planning-shell .tv-time-header[data-tod="twilight"],
.vnt-planning-shell .tv-time-header[data-tod="twilight_am"],
.vnt-planning-shell .tv-time-header[data-tod="blue"],
.vnt-planning-shell .tv-time-header[data-tod="night"] {
  color: var(--vnt-info);
}

.vnt-planning-shell .tv-pin-row {
  background: transparent;
  border-radius: 5px;
}
.vnt-planning-shell .tv-pin-row.has-active {
  background: color-mix(in oklch, var(--vnt-accent) 14%, var(--vnt-bg-3));
  border: 1px solid color-mix(in oklch, var(--vnt-accent) 60%, transparent);
}
.vnt-planning-shell .tv-pin-summary {
  /* Two lines like the detail rows: identity (arrow · letter · window ·
     delete) over type + height — one line ellipsized the type to "Pho…". */
  display: grid;
  grid-template-columns: 14px auto minmax(0, 1fr) auto;
  grid-template-areas:
    "arrow num chip del"
    "arrow type type ht";
  column-gap: 7px;
  row-gap: 2px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 5px;
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}
.vnt-planning-shell .tv-pin-summary .tv-pin-expand-arrow { grid-area: arrow; }
.vnt-planning-shell .tv-pin-summary .tv-pin-num { grid-area: num; }
.vnt-planning-shell .tv-pin-summary .tv-pin-time-chip { grid-area: chip; justify-self: start; margin-left: 0; }
.vnt-planning-shell .tv-pin-summary .tv-pin-type { grid-area: type; min-width: 0; }
.vnt-planning-shell .tv-pin-summary .tv-pin-ht-summary { grid-area: ht; margin-left: 0; white-space: nowrap; }
.vnt-planning-shell .tv-pin-summary .tv-pin-delete-group { grid-area: del; }
.vnt-planning-shell .tv-pin-summary:hover {
  background: var(--vnt-panel-2);
}
.vnt-planning-shell .tv-pin-num {
  color: var(--vnt-text-dim);
  font-weight: 600;
  font-size: var(--vnt-fs-11);
}
.vnt-planning-shell .tv-pin-row.has-active .tv-pin-num { color: var(--vnt-accent); }
.vnt-planning-shell .tv-pin-type {
  color: var(--vnt-text-dim);
  font-size: 11px;
}
.vnt-planning-shell .tv-pin-ht-summary {
  color: var(--vnt-text-faint);
  font-size: var(--vnt-fs-11);
  font-family: var(--vnt-font-mono);
}
.vnt-planning-shell .tv-pin-expand-arrow { color: var(--vnt-text-faint); }
.vnt-planning-shell .tv-pin-detail { padding: 2px 8px 4px 28px; }

.vnt-planning-shell .tv-ht-row {
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: 11px;
  color: var(--vnt-text-dim);
  padding: 4px 8px;
  border-radius: 4px;
}
.vnt-planning-shell .tv-ht-row {
  /* Two lines: identity (letter · type · delete) over data (height ·
     readiness). One flex line could not fit all of it at rail width. */
  scroll-margin: 12px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb id label del"
    "thumb elev status status";
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
}
.vnt-planning-shell .tv-ht-row .shot-thumbnail-sm { grid-area: thumb; }
.vnt-planning-shell .tv-ht-row .tv-ht-label-id { grid-area: id; }
.vnt-planning-shell .tv-ht-row .tv-ht-label { grid-area: label; min-width: 0; }
.vnt-planning-shell .tv-ht-row .tv-ht-elev { grid-area: elev; min-width: 0; }
.vnt-planning-shell .tv-ht-row .tv-pin-delete-single { grid-area: del; }
.vnt-planning-shell .tv-ht-row:hover {
  background: var(--vnt-panel-2);
  color: var(--vnt-text);
}
.vnt-planning-shell .tv-ht-row.active {
  background: color-mix(in oklch, var(--vnt-accent) 14%, var(--vnt-bg-3));
  color: var(--vnt-accent);
  border: 1px solid color-mix(in oklch, var(--vnt-accent) 60%, transparent);
}
.vnt-planning-shell .tv-ht-row.active .tv-ht-label {
  color: color-mix(in oklch, var(--vnt-accent) 80%, var(--vnt-text-dim));
}
.vnt-planning-shell .tv-ht-elev {
  color: var(--vnt-text);
  font-weight: 650;
  font-size: 13px;
}
.vnt-planning-shell .tv-ht-label {
  color: var(--vnt-text-faint);
  font-size: var(--vnt-fs-11);
}
/* Shot-list readiness chip — tones from .vnt-status-pill[data-tone]; this
   site class only constrains geometry for the tight shot rows. inline-block
   (not flex) so text-overflow can ellipsize the label. */
.vnt-planning-shell .vnt-shot-status {
  /* Full readiness words — the v244 84px cap ellipsized them to "REA…". */
  grid-area: status;
  justify-self: end;
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vnt-planning-shell .tv-ht-row.active .vnt-shot-status {
  color: var(--vnt-panel-2);
  background: rgba(255,255,255,0.84);
  border-color: transparent;
}

/* ---------- Pin list (legacy ungrouped) ---------- */
.vnt-planning-shell .tv-pin-item {
  background: var(--vnt-bg-3);
  border: 1px solid var(--vnt-border);
  border-radius: var(--vnt-radius-sm);
}
.vnt-planning-shell .tv-pin-item:hover { background: var(--vnt-panel-2); border-color: var(--vnt-border-2); }
.vnt-planning-shell .tv-pin-item.active {
  border-left: 3px solid var(--vnt-accent);
  background: color-mix(in oklch, var(--vnt-accent) 10%, var(--vnt-bg-3));
}
.vnt-planning-shell .tv-pin-label { color: var(--vnt-text); font-size: var(--vnt-fs-13); }
.vnt-planning-shell .tv-pin-meta {
  color: var(--vnt-text-dim);
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: var(--vnt-fs-11);
}

/* ---------- Buttons in the rail ----------
   Glass values match the tier-2 .btn-ghost base (the deleted skin layer used
   to force these via !important). Rail primaries inherit the tier-1 gradient. */
.vnt-planning-shell .tv-left-panel .btn,
.vnt-planning-shell .tv-left-panel button:not(.vnt-big-cta):not(.tvp-stepper-btn):not(.tv-pin-delete-single):not(.tv-pin-delete-group):not(.tvp-seg-delete):not(.tv-time-header):not(.tv-pin-summary):not(.tv-ht-row) {
  background: rgba(255, 255, 255, 0.94);
  color: var(--vnt-text);
  border: 1px solid rgba(29, 31, 32, 0.1);
  border-radius: var(--vnt-radius-sm);
  padding: 6px 10px;
  font-weight: 500;
  font-size: 12px;
  transition: background 0.12s, border-color 0.12s;
}
.vnt-planning-shell .tv-left-panel .btn:hover {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(89, 128, 166, 0.34);
}
.vnt-planning-shell .tv-left-panel .btn.btn-primary,
.vnt-planning-shell .tv-left-panel .btn-primary {
  background: var(--gradient-cta);
  color: var(--vnt-panel-2);
  border-color: transparent;
  font-weight: 600;
}

/* Add-shot / add-segment ghost buttons */
.vnt-planning-shell .tv-add-seg-btn,
.vnt-planning-shell .tv-add-pin-btn {
  background: transparent;
  border: 1px dashed var(--vnt-border-2);
  color: var(--vnt-text-dim);
  border-radius: 5px;
  padding: 8px;
  width: 100%;
  font-size: 12px;
}
.vnt-planning-shell .tv-add-seg-btn:hover,
.vnt-planning-shell .tv-add-pin-btn:hover {
  color: var(--vnt-text);
  border-color: var(--vnt-accent);
  background: var(--vnt-bg-3);
}

/* ---------- Right panel (3D viewer + shot editor) ---------- */
.vnt-planning-shell .tv-right-panel {
  width: 376px;
  min-width: 300px;
  max-width: 680px;
  position: relative;
  z-index: 900;
  background: var(--vnt-panel);
  border-left: 1px solid var(--vnt-border);
  color: var(--vnt-text);
}
.vnt-planning-shell .tv-right-panel .tv-section h3 {
  color: var(--vnt-text-faint);
  font-size: 10px;
  font-family: var(--vnt-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
}

/* ---------- Center panel (map) — dark surround ---------- */
.vnt-planning-shell .tv-center-panel,
.vnt-planning-shell .tv-center-map {
  background: var(--vnt-bg);
}
.vnt-planning-shell .tv-center-panel {
  position: relative;
}
.vnt-planning-shell .tv-map-toolbar {
  position: absolute !important;
  top: 12px;
  left: 12px;
  right: auto;
  /* Above Leaflet's control panes (.leaflet-top/.leaflet-bottom are z-index
     1000) so the search field and the Map tools menu own their hit area — the
     zoom control used to paint over the left of the field, hiding the
     crosshair icon and zooming instead of focusing the input. */
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
/* ...and drop the zoom stack below the toolbar row so both stay clickable
   (toolbar row is ~35px tall starting at 12px; the control adds its own 10px
   margin on top of this offset). */
.vnt-planning-shell .tv-center-map .leaflet-top.leaflet-left {
  top: 44px;
}
.vnt-planning-shell .vnt-map-search-wrap {
  position: relative;
}
.vnt-planning-shell .vnt-map-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--vnt-text-faint);
  pointer-events: none;
  /* The input's backdrop-filter makes it a stacking context, so with z-index
     auto it paints as z-index 0 in tree order — after this earlier sibling —
     and its own background swallowed the crosshair entirely. Lift the icon
     above it; pointer-events:none keeps the whole field clickable. */
  z-index: 1;
}
.vnt-planning-shell .vnt-map-search-icon svg {
  width: 14px;
  height: 14px;
}
.vnt-planning-shell .vnt-map-search {
  width: 300px;
  max-width: 34vw;
  padding: 8px 10px 8px 32px;
  border-radius: var(--vnt-radius-sm);
  background: color-mix(in oklch, var(--vnt-panel) 88%, transparent);
  border: 1px solid var(--vnt-border);
  color: var(--vnt-text);
  outline: none;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.vnt-planning-shell .vnt-map-search:focus {
  border-color: var(--vnt-accent);
}
.vnt-planning-shell .tv-map-toolbar .btn {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(29, 31, 32, 0.1);
  color: var(--vnt-text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.vnt-planning-shell .tv-map-toolbar .btn:hover {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(89, 128, 166, 0.34);
  color: var(--vnt-text);
}
.vnt-planning-shell .tv-map-toolbar .btn.active,
.vnt-planning-shell .tv-site-plan-toggle.active {
  color: var(--vnt-accent);
  border-color: color-mix(in oklch, var(--vnt-accent) 55%, var(--vnt-border));
  background: color-mix(in oklch, var(--vnt-accent) 16%, var(--vnt-panel));
}
.vnt-planning-shell .tv-center-map.tv-site-plan-mode {
  background:
    radial-gradient(circle at 50% 45%, rgba(92,203,216,0.08), transparent 28%),
    linear-gradient(180deg, var(--vnt-panel-2) 0%, var(--vnt-panel-2) 100%);
}
.vnt-planning-shell .tv-center-map.tv-site-plan-mode::before,
.vnt-planning-shell .tv-center-map.tv-site-plan-mode::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 420;
  pointer-events: none;
}
.vnt-planning-shell .tv-center-map.tv-site-plan-mode::before {
  background:
    linear-gradient(rgba(109,229,166,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,229,166,0.07) 1px, transparent 1px),
    linear-gradient(rgba(92,203,216,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,203,216,0.045) 1px, transparent 1px);
  background-size: 150px 150px, 150px 150px, 30px 30px, 30px 30px;
  opacity: 0.38;
  mix-blend-mode: screen;
}
.vnt-planning-shell .tv-center-map.tv-site-plan-mode::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 0%, transparent 62%, rgba(29, 31, 32, 0.1) 100%),
    linear-gradient(90deg, rgba(29, 31, 32, 0.04), transparent 18%, transparent 82%, rgba(29, 31, 32, 0.05));
}
.vnt-planning-shell .tv-center-map.tv-site-plan-mode .leaflet-tile-pane {
  /* Blueprint style stays a real layer effect: desaturate toward plan
     linework — but at FULL opacity (the dark-era 0.78 dim blend is out;
     maps must never wash against the paper shell). */
  opacity: 1;
  filter: grayscale(0.55) contrast(1.05);
}
.vnt-planning-shell .tv-center-map.tv-site-plan-mode .leaflet-control-zoom {
  filter: none;
}

/* 2D map shot identity marker: small selector, separate from aim controls. */
.vnt-shot-id-icon {
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}
.vnt-shot-id-marker {
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in oklch, var(--pin-color, var(--vnt-accent)) 32%, rgba(8,12,18,0.88));
  border: 2px solid var(--pin-color, var(--vnt-accent));
  transform: scale(var(--pin-alt-scale, 1));
  transform-origin: 50% 50%;
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.36),
    0 var(--pin-shadow-y, 8px) var(--pin-shadow-blur, 22px) rgba(0,0,0,var(--pin-shadow-alpha,0.32));
  color: #f5fbff;
  font-family: var(--vnt-font-mono);
  font-size: 14px;
  font-weight: 800;
  cursor: move;
  transition: transform 160ms ease-out, box-shadow 180ms ease-out;
}
.vnt-shot-id-letter {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.vnt-shot-id-marker.is-active {
  border-color: rgba(255,255,255,0.92);
  box-shadow:
    0 0 0 3px color-mix(in oklch, var(--pin-color, var(--vnt-accent)) 60%, transparent),
    0 var(--pin-shadow-y, 10px) var(--pin-shadow-blur, 26px) rgba(0,0,0,var(--pin-shadow-alpha,0.38));
}
.vnt-shot-id-icon.is-video-start-icon {
  overflow: visible !important;
}
/* R7 spiderfy: when letter chips collide at low zoom they fan out on a
   ring; the leg ties each chip back to its true camera position, marked
   by a survey-diamond foot in the chip's color. */
.vnt-spider-leg {
  pointer-events: none;
}
.vnt-spider-foot-icon {
  background: transparent;
  border: none;
  overflow: visible !important;
}
.vnt-spider-foot {
  display: block;
  width: 9px;
  height: 9px;
  background: var(--vnt-bg, #f2f2f3);
  border: 1.5px solid var(--pin-color, var(--vnt-accent));
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px rgba(29, 31, 32, 0.18);
}
.vnt-shot-id-marker.is-video-start {
  margin-left: 11px;
  margin-top: 2px;
  background: linear-gradient(180deg, rgba(12, 43, 34, 0.94), rgba(6, 24, 23, 0.94));
  border-color: var(--vnt-route-start);
  cursor: grab;
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.4),
    0 0 0 5px rgba(109,229,166,0.14),
    0 var(--pin-shadow-y, 8px) var(--pin-shadow-blur, 22px) rgba(0,0,0,var(--pin-shadow-alpha,0.34));
}
.vnt-shot-id-marker.is-video-start:active {
  cursor: grabbing;
}
.vnt-shot-id-marker.is-video-start.is-active {
  border-color: rgba(255,255,255,0.94);
  box-shadow:
    0 0 0 3px rgba(109,229,166,0.58),
    0 0 0 7px rgba(109,229,166,0.16),
    0 var(--pin-shadow-y, 10px) var(--pin-shadow-blur, 26px) rgba(0,0,0,var(--pin-shadow-alpha,0.38));
}
.vnt-shot-start-tag {
  position: absolute;
  left: 50%;
  top: 25px;
  transform: translateX(-50%);
  min-width: 44px;
  height: 15px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 0 0 7px 7px;
  border: 1px solid rgba(166, 255, 205, 0.72);
  border-top: 0;
  background: linear-gradient(180deg, var(--vnt-route-start-hi), var(--vnt-route-start-lo));
  color: #052118;
  font-family: var(--vnt-font-mono);
  font-size: var(--vnt-fs-10);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 8px 14px rgba(0,0,0,0.34), 0 0 18px rgba(71, 220, 128, 0.24);
  pointer-events: none;
  z-index: 1;
}
.vnt-planning-shell.is-shot-dragging .leaflet-marker-icon,
.vnt-planning-shell.is-shot-dragging .vnt-shot-id-marker,
.vnt-planning-shell.is-shot-dragging .vnt-shot-vector {
  transition: none !important;
}
/* 2D map shot orientation control: drag the front handle to rotate heading. */
.vnt-shot-direction-icon {
  background: transparent !important;
  border: 0 !important;
}
.vnt-shot-map-control {
  position: relative;
  width: 220px;
  height: 220px;
  transform: translateZ(0);
  cursor: crosshair;
  color: var(--vnt-accent);
  --fov-len: 88px;
  --fov-width: 72px;
}
.vnt-shot-map-control::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(7,12,16,0.68);
  border: 1px solid rgba(92,203,216,0.5);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 0 18px rgba(92,203,216,0.24);
}
.vnt-shot-map-control.is-active::before {
  border-color: rgba(255,255,255,0.9);
  box-shadow: 0 0 0 2px rgba(92,203,216,0.65), 0 0 24px rgba(92,203,216,0.32);
}
.vnt-shot-map-control.is-ghost {
  color: var(--pin-color, var(--vnt-accent));
  opacity: 0.62;
  cursor: default;
  filter: saturate(0.9);
}
.vnt-shot-map-control.is-ghost::before {
  display: none;
}
.vnt-shot-map-control.is-ghost .vnt-shot-vector {
  cursor: default;
}
.vnt-shot-map-control.is-ghost .vnt-shot-fov {
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--pin-color, var(--vnt-accent)) 36%, transparent), color-mix(in oklch, var(--pin-color, var(--vnt-accent)) 10%, transparent)),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.13) 0 1px, transparent 1px 14px);
  border-color: color-mix(in oklch, var(--pin-color, var(--vnt-accent)) 62%, white);
  box-shadow: 0 0 20px color-mix(in oklch, var(--pin-color, var(--vnt-accent)) 22%, transparent);
}
.vnt-shot-map-control.is-ghost .vnt-shot-handle {
  display: none;
}
.vnt-shot-vector {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  cursor: grab;
  transition: filter 140ms ease;
}
.vnt-shot-vector:active {
  cursor: grabbing;
}
.vnt-shot-fov {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: var(--fov-width);
  height: var(--fov-len);
  transform: translateX(-50%);
  clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--vnt-accent-2) 50%, transparent), color-mix(in oklch, var(--vnt-accent) 28%, transparent)),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.18) 0 1px, transparent 1px 14px);
  border: 1px solid color-mix(in oklch, var(--vnt-accent-2) 78%, white);
  box-shadow: 0 0 28px color-mix(in oklch, var(--vnt-accent-2) 28%, transparent);
  /* Dark halo keeps the wedge readable over white rooftops. */
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.6));
  pointer-events: none;
}
.vnt-shot-map-control.is-photo::before,
.vnt-shot-map-control.is-photo .vnt-shot-handle {
  display: none;
}
.vnt-shot-map-control.is-photo .vnt-shot-fov {
  bottom: 50%;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
}
.vnt-shot-vector::before {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: calc(50% - var(--fov-len));
  width: 2px;
  height: var(--fov-len);
  background: linear-gradient(180deg, rgba(255,209,102,0.92), rgba(92,203,216,0.20));
  box-shadow: 0 0 12px rgba(255,209,102,0.34);
  /* Dark halo keeps the sight line readable over white rooftops. */
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.6));
  pointer-events: none;
}
.vnt-shot-map-control.is-photo .vnt-shot-vector::before {
  display: none;
}
.vnt-shot-handle {
  position: absolute;
  left: calc(50% - 14px);
  top: calc(50% - var(--fov-len) - 14px);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--vnt-accent-2);
  border: 2px solid rgba(10,12,16,0.9);
  box-shadow: 0 0 0 2px rgba(224,184,74,0.35), 0 0 20px rgba(224,184,74,0.45);
}
.vnt-shot-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(7,10,12,0.88);
}
.vnt-shot-orbit {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(89, 128, 166, 0.74);
  background:
    radial-gradient(circle at 50% 50%, rgba(89, 128, 166,0.16) 0 2px, transparent 3px),
    repeating-radial-gradient(circle at 50% 50%, rgba(89, 128, 166,0.10) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 0 14px rgba(89, 128, 166,0.10), 0 0 14px rgba(89, 128, 166,0.16);
  pointer-events: none;
}
.vnt-shot-orbit-dot {
  position: absolute;
  left: 50%;
  top: -7px;
  width: 14px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ffd166;
  border: 2px solid rgba(7,10,12,0.88);
  box-shadow: 0 0 18px rgba(255,209,102,0.56);
}
.vnt-shot-map-control.is-360 .vnt-shot-fov {
  display: none;
}
.vnt-shot-map-control.is-360 .vnt-shot-orbit {
  display: block;
}
.vnt-shot-map-control.is-360 .vnt-shot-handle {
  display: none;
}
.vnt-shot-map-control.is-360 .vnt-shot-vector::before {
  display: none;
}
.vnt-shot-map-control.is-360 .vnt-shot-orbit-dot {
  top: -6px;
  width: 12px;
  height: 12px;
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(89, 128, 166,0.18), 0 0 12px rgba(255,209,102,0.54);
}
.vnt-shot-map-control.is-360.is-paused .vnt-shot-orbit-dot {
  top: -10px;
  width: 20px;
  height: 20px;
  background: #ff4f5b;
  border-color: rgba(255,255,255,0.92);
  box-shadow:
    0 0 0 3px rgba(255, 79, 91, 0.24),
    0 0 24px rgba(255, 79, 91, 0.72),
    0 0 34px rgba(89, 128, 166,0.38);
}
.vnt-shot-map-control.is-video .vnt-shot-fov {
  display: none;
}
.vnt-shot-map-control.is-video {
  color: #ff7b8f;
}
.vnt-shot-map-control.is-video::before {
  border-color: rgba(255,123,143,0.72);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 0 18px rgba(255,123,143,0.28);
}
.vnt-shot-map-control.is-video .vnt-shot-handle {
  top: calc(50% - 66px);
  background: #ff7b8f;
}
.vnt-shot-map-control.is-video .vnt-shot-vector::before {
  /* Tail alpha floor mirrors the base sight-line rule (0.20) so the far end
     stays visible over bright rooftops. */
  background: linear-gradient(180deg, rgba(255,123,143,0.94), rgba(255,123,143,0.20));
  box-shadow: 0 0 12px rgba(255,123,143,0.34);
}
.vnt-video-aircraft-icon {
  background: transparent !important;
  border: 0 !important;
  pointer-events: none;
}
.vnt-video-aircraft {
  position: relative;
  width: 66px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #88fff0;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.44));
}
.vnt-video-aircraft::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(89, 128, 166,0.28), rgba(89, 128, 166,0.04) 58%, transparent 70%);
  border: 1px solid rgba(136,255,240,0.38);
  box-shadow: 0 0 20px rgba(89, 128, 166,0.28);
}
.vnt-video-aircraft-plane {
  position: relative;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  transform: rotate(var(--aircraft-heading, 0deg));
  transform-origin: center;
}
.vnt-video-aircraft-plane svg {
  width: 32px;
  height: 32px;
  overflow: visible;
}
.vnt-video-aircraft-plane path:first-child {
  fill: color-mix(in oklch, var(--vnt-accent) 76%, white);
  stroke: rgba(255,255,255,0.92);
  stroke-width: 1.45;
  stroke-linejoin: round;
}
.vnt-video-aircraft-plane path:last-child {
  fill: none;
  stroke: rgba(5,12,16,0.82);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.vnt-video-aircraft-letter {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  font-weight: 950;
  color: #02191d;
}
.vnt-video-aircraft-progress {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(5,8,12,0.78);
  border: 1px solid rgba(136,255,240,0.36);
  color: rgba(226,255,252,0.92);
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
}

.tv-360-structure-panel {
  border-color: rgba(92,203,216,0.30);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94));
}
.tv-360-stack-help {
  margin: -2px 0 10px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}
.tv-360-stack-template-row,
.tv-360-stack-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
}
.tv-360-stack-quick {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.tv-360-stack-quick .tv-360-import-help {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.tv-360-stack-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--vnt-text-faint);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tv-parcel-toggle.active {
  border-color: rgba(247, 215, 116, 0.70);
  color: #f7d774;
  background: rgba(247, 215, 116, 0.10);
  box-shadow: 0 0 0 1px rgba(247, 215, 116, 0.10), 0 0 18px rgba(247, 215, 116, 0.12);
}
.tv-360-import-help {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
}
.tv-360-stack-template-row .form-input {
  min-width: 0;
  height: 34px;
  padding: 6px 8px;
  font-size: 12px;
}
.tv-360-floor-panel {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid rgba(92,203,216,0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(89, 128, 166,0.09), rgba(29, 31, 32, 0.17));
}
/* Advanced disclosure (Stack name, Base offset, Import CSV) — one folded
   group so the panel leads with floor setup + capture pattern. */
/* Base offset + stack name + import live INSIDE the capture-pattern bubble
   (owner ruling 2026-08-26 — the separate Advanced fold is gone). */
.tv-360-capture-pattern-extras {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(29, 31, 32, 0.1);
}
.tv-360-capture-pattern-extras .tv-360-offset-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  margin-top: 0;
}
.tv-360-capture-pattern-extras .tv-360-stack-name {
  margin-bottom: 0;
}
.tv-360-capture-pattern-extras .tv-360-stack-quick {
  margin-bottom: 0;
}
.tv-360-floor-title {
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vnt-text-dim);
}
.tv-360-stack-name {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
  color: var(--vnt-text-faint);
  font-size: 10px;
  font-weight: 600;
}
.tv-360-stack-name .form-input {
  width: 100%;
  min-width: 0;
  padding: 6px 7px;
  font-size: 12px;
  font-family: var(--vnt-font-body, inherit);
  text-transform: none;
  letter-spacing: normal;
}
.tv-360-floor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.tv-360-floor-grid label {
  display: grid;
  gap: 4px;
  color: var(--vnt-text-faint);
  font-size: 10px;
  font-weight: 600;
}
.tv-360-floor-grid .form-input {
  width: 100%;
  min-width: 0;
  padding: 6px 7px;
  font-size: 12px;
}
/* Floor height rides the shared height-row + unit pattern; let the input
   flex so the "ft" unit stays inside the grid cell. */
.tv-360-floor-grid .tv-height-row {
  /* A grid item's min-width defaults to auto, so the row refused to shrink
     below the number input's ~170px intrinsic width and overflowed its
     column — the Floor height field then painted over the Floors field's
     right edge, covering its spinner arrows. */
  min-width: 0;
}
.tv-360-floor-grid .tv-height-row .form-input {
  width: auto;
  flex: 1;
  min-width: 0;
}
.tv-360-offset-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 6px;
  margin-top: 6px;
  align-items: end;
}
.tv-360-offset-row label {
  display: grid;
  gap: 3px;
  color: var(--vnt-text-faint);
  font-size: 10px;
  font-weight: 600;
}
.tv-360-offset-row .form-input {
  width: 100%;
  min-width: 0;
  height: 29px;
  padding: 4px 7px;
  font-size: 11px;
}
.tv-360-offset-select {
  background: rgba(255, 255, 255, 0.94);
}
.tv-360-offset-custom {
  font-family: var(--vnt-font-mono, monospace);
  text-align: right;
}
.tv-360-floor-preview {
  min-height: 16px;
  margin: 8px 0;
  color: var(--text-secondary);
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  line-height: 1.35;
}
.tv-360-capture-pattern {
  display: grid;
  gap: 8px;
  margin: 8px 0;
  padding: 8px;
  border: 1px solid rgba(89, 128, 166, 0.22);
  border-radius: 8px;
  background: rgba(29, 31, 32, 0.26);
}
.tv-360-capture-pattern-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--vnt-text-dim);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tv-360-capture-pattern-head small {
  color: var(--vnt-accent);
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.tv-360-capture-pattern-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.tv-360-capture-pattern-grid button {
  min-width: 0;
  min-height: 44px;
  padding: 7px 8px;
  border: 1px solid rgba(29, 31, 32, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--vnt-text);
  text-align: left;
  cursor: pointer;
}
.tv-360-capture-pattern-grid button:hover {
  border-color: rgba(89, 128, 166, 0.58);
  background: rgba(89, 128, 166, 0.12);
}
.tv-360-capture-pattern-grid button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.tv-360-capture-pattern-grid strong,
.tv-360-capture-pattern-grid span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tv-360-capture-pattern-grid strong {
  font-size: 11px;
  font-weight: 850;
}
.tv-360-capture-pattern-grid span {
  margin-top: 3px;
  color: var(--text-secondary);
  font-family: var(--vnt-font-mono);
  font-size: 10px;
}
.tv-360-custom-floor-row {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid rgba(89, 128, 166, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
}
.tv-360-custom-floor-head,
.tv-360-custom-floor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tv-360-custom-floor-head {
  justify-content: space-between;
  color: var(--vnt-text-faint);
  font: 800 10px/1.2 var(--vnt-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tv-360-custom-floor-head button {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(29, 31, 32, 0.13);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--vnt-text-muted);
  cursor: pointer;
}
.tv-360-custom-floor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  max-height: 132px;
  overflow: auto;
}
.tv-360-custom-floor-grid label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 28px;
  padding: 4px 6px;
  border: 1px solid rgba(29, 31, 32, 0.09);
  border-radius: var(--vnt-radius-sm);
  background: rgba(255, 255, 255, 0.94);
  color: var(--vnt-text-muted);
  font-size: var(--vnt-fs-11);
  font-weight: 700;
  white-space: nowrap;
}
.tv-360-custom-floor-grid input {
  accent-color: var(--vnt-accent);
}
.tv-360-custom-floor-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}
.tv-360-level-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(89, 128, 166,0.32);
  border-radius: 8px;
  background: rgba(89, 128, 166,0.10);
  color: var(--vnt-accent);
  cursor: pointer;
  font-family: var(--vnt-font-mono);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.tv-360-level-btn:hover {
  border-color: rgba(89, 128, 166,0.72);
  background: rgba(89, 128, 166,0.18);
  transform: translateY(-1px);
}
.tv-360-level-btn:active {
  transform: translateY(0);
}
.tv-360-building-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 10px;
}
.tv-hidden-target-height {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.tv-360-building-layout {
  max-height: 280px;
  margin-top: 8px;
  overflow: auto;
  padding-right: 2px;
}
.tv-360-stack-actions {
  grid-template-columns: 1fr;
  margin-top: 8px;
}
.tv-360-advanced {
  margin-top: 10px;
  border: 1px solid rgba(29, 31, 32, 0.08);
  border-radius: 8px;
  background: rgba(29, 31, 32, 0.09);
  overflow: hidden;
}
.tv-360-advanced summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  color: var(--vnt-text-dim);
  cursor: pointer;
  list-style: none;
}
.tv-360-advanced summary::-webkit-details-marker {
  display: none;
}
.tv-360-advanced summary span {
  color: var(--vnt-text);
  font-weight: 800;
  font-size: 11px;
}
.tv-360-advanced summary small {
  color: var(--vnt-text-faint);
  font-family: var(--vnt-font-mono);
  font-size: 10px;
}
.tv-360-advanced[open] {
  padding-bottom: 10px;
}
.tv-360-advanced[open] > :not(summary) {
  margin-left: 10px;
  margin-right: 10px;
}

/* ---------- Rail footer CTA — wire into our dark tokens ---------- */
.vnt-planning-shell .vnt-rail-footer {
  background: var(--vnt-panel);
  border-top: 1px solid var(--vnt-border);
}

/* Responsive: tighten when viewport narrows. The grid columns shrink with the
   panels — a fixed panel width inside the base 308px/376px columns left a dead
   strip between the rail and the map (the same column-vs-width mismatch the
   base .tv-left-panel rule fixes). The left rail keeps width:auto and fills
   its column; the right panel width tracks its column exactly. */
@media (max-width: 1100px) {
  .vnt-planning-shell .tv-page { grid-template-columns: 280px 1fr 340px; }
  .vnt-planning-shell .tv-right-panel { width: 340px; }
}
@media (max-width: 900px) {
  .vnt-planning-shell .tv-page { grid-template-columns: 260px 1fr 320px; }
  .vnt-planning-shell .tv-right-panel { width: 320px; }
}

/* ==========================================================================
   Vantic Planning — Prototype DOM port (segment rows, shot stack)
   Matches design_handoff_planning_redesign/Planning.html pixel layout.
   ========================================================================== */

/* Kill the old tower visualization entirely inside the planning shell */
.vnt-planning-shell .tv-building-tower,
.vnt-planning-shell .tv-diag-total,
.vnt-planning-shell .tv-diag-gnd {
  display: none !important;
}
.vnt-planning-shell .tv-building-layout {
  display: block !important;
}

.vnt-planning-shell .vnt-workflow-card {
  display: none !important;
}
.vnt-planning-shell .vnt-workflow-title {
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vnt-text-faint);
}
.vnt-planning-shell .vnt-workflow-step {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: center;
  padding: 7px 6px;
  border-radius: 6px;
  color: var(--vnt-text-dim);
}
.vnt-planning-shell .vnt-workflow-step + .vnt-workflow-step {
  margin-top: 2px;
}
.vnt-planning-shell .vnt-workflow-dot {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vnt-border-2);
  border-radius: 50%;
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  color: var(--vnt-text-faint);
  background: var(--vnt-bg);
}
.vnt-planning-shell .vnt-workflow-step b {
  display: block;
  font-size: 12px;
  color: var(--vnt-text);
  line-height: 1.1;
}
.vnt-planning-shell .vnt-workflow-step small {
  display: block;
  margin-top: 2px;
  font-size: var(--vnt-fs-11);
  color: var(--vnt-text-faint);
  line-height: 1.25;
}
.vnt-planning-shell .vnt-workflow-step.is-active {
  background: color-mix(in oklch, var(--vnt-accent) 12%, var(--vnt-bg-3));
}
.vnt-planning-shell .vnt-workflow-step.is-active .vnt-workflow-dot {
  border-color: var(--vnt-accent);
  color: var(--vnt-bg);
  background: var(--vnt-accent);
}
.vnt-planning-shell .vnt-workflow-step.is-done .vnt-workflow-dot {
  border-color: var(--vnt-success);
  color: var(--vnt-success);
}
.vnt-planning-shell .vnt-workflow-step.is-done .vnt-workflow-dot::before {
  content: "\2713";
}
.vnt-planning-shell .vnt-workflow-step.is-done .vnt-workflow-dot {
  font-size: 0;
}
.vnt-planning-shell .vnt-workflow-step.is-done .vnt-workflow-dot::before {
  font-size: 12px;
}
.vnt-planning-shell .vnt-workflow-step.is-locked {
  opacity: 0.48;
}

@keyframes vnt-next-action-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(89, 128, 166, 0.0), 0 0 0 1px rgba(89, 128, 166, 0.55); }
  50% { box-shadow: 0 0 0 4px rgba(89, 128, 166, 0.16), 0 0 22px rgba(89, 128, 166, 0.26); }
}
.vnt-planning-shell .vnt-next-action {
  position: relative;
  border-color: rgba(89, 128, 166, 0.84) !important;
  background-color: rgba(89, 128, 166, 0.10) !important;
  animation: vnt-next-action-pulse 1.8s ease-in-out infinite;
}
.vnt-planning-shell input.vnt-next-action {
  color: var(--vnt-text);
}
.vnt-planning-shell button.vnt-next-action::after,
.vnt-planning-shell a.vnt-next-action::after {
  display: none;
  content: "";
}

.vnt-planning-shell #tvDropPin {
  width: 100%;
  min-height: 44px;
  margin-top: 0;
  justify-content: center;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0;
  overflow: visible;
}
.vnt-planning-shell #tvDropPin::before,
.vnt-planning-shell #tvDropPin::after {
  display: none !important;
  content: "" !important;
}
.vnt-planning-shell .vnt-shot-list-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
  min-width: 0;
}
.vnt-planning-shell .vnt-import-shot-csv-row {
  position: relative;
  min-width: 0;
}
.vnt-planning-shell .vnt-import-shot-csv-btn {
  width: 100%;
  min-height: 34px;
  padding-right: 38px;
  color: var(--text-secondary);
  border-style: dashed;
  border-color: rgba(92, 203, 216, 0.36);
}
.vnt-planning-shell .vnt-import-shot-csv-help {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(92, 203, 216, 0.44);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--vnt-accent);
  font-family: var(--vnt-font-mono);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: help;
  box-shadow: 0 0 0 1px rgba(89, 128, 166, 0.08), 0 8px 20px rgba(29, 31, 32, 0.11);
}
.vnt-planning-shell .vnt-import-shot-csv-help:hover {
  border-color: rgba(89, 128, 166, 0.72);
  background: rgba(89, 128, 166, 0.16);
  color: #eaffff;
}

.vnt-planning-shell .vnt-shot-guidance {
  margin: -2px 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(89, 128, 166, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(89, 128, 166, 0.12), rgba(74, 111, 165, 0.08)),
    rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.vnt-planning-shell .vnt-shot-guidance-title {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vnt-accent);
}
.vnt-planning-shell .vnt-shot-guidance-body {
  margin-top: 4px;
  color: var(--vnt-text);
  font-size: 12px;
  line-height: 1.35;
}
.vnt-planning-shell .vnt-shot-guidance-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}
.vnt-planning-shell .vnt-shot-guidance-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: var(--vnt-radius-pill);
  color: var(--vnt-text-muted);
  background: rgba(29, 31, 32, 0.15);
  font-size: var(--vnt-fs-11);
  font-weight: 650;
}
.vnt-planning-shell .vnt-shot-guidance-step::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.6);
}
.vnt-planning-shell .vnt-shot-guidance-step.is-active {
  border-color: rgba(89, 128, 166, 0.62);
  color: var(--vnt-text);
  background: rgba(89, 128, 166, 0.12);
}
.vnt-planning-shell .vnt-shot-guidance-step.is-active::before {
  background: var(--vnt-accent);
  box-shadow: 0 0 12px rgba(89, 128, 166, 0.55);
}
.vnt-planning-shell .vnt-shot-guidance-step.is-done {
  border-color: rgba(87, 217, 111, 0.34);
  color: var(--vnt-success);
}
.vnt-planning-shell .vnt-shot-guidance-step.is-done::before {
  background: var(--vnt-success);
}
.vnt-planning-shell .vnt-shot-guidance-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.vnt-planning-shell .vnt-shot-guidance-action {
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid rgba(29, 31, 32, 0.12);
  border-radius: var(--vnt-radius-sm);
  background: rgba(29, 31, 32, 0.18);
  color: var(--vnt-text);
  font-size: var(--vnt-fs-11);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vnt-planning-shell .vnt-shot-guidance-action:hover {
  border-color: rgba(89, 128, 166, 0.58);
  background: rgba(89, 128, 166, 0.10);
}
.vnt-planning-shell .vnt-shot-guidance-action.is-primary {
  background: var(--vnt-accent);
  border-color: var(--vnt-accent);
  color: var(--vnt-panel-2);
}

@keyframes vnt-shot-next-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(89, 128, 166, 0), 0 0 0 1px rgba(89, 128, 166, 0.62); }
  50% { box-shadow: 0 0 0 4px rgba(89, 128, 166, 0.18), 0 0 24px rgba(89, 128, 166, 0.28); }
}
.vnt-planning-shell .vnt-shot-next {
  position: relative;
  border-color: rgba(89, 128, 166, 0.88) !important;
  outline: 1px solid rgba(89, 128, 166, 0.38);
  outline-offset: 2px;
  animation: vnt-shot-next-pulse 1.7s ease-in-out infinite;
}
.vnt-planning-shell button.vnt-shot-next {
  background-color: rgba(89, 128, 166, 0.13) !important;
}
.vnt-planning-shell button.vnt-shot-next::after {
  display: none;
  content: "";
}
.vnt-planning-shell input[type="range"].vnt-shot-next {
  accent-color: var(--vnt-accent);
  outline-offset: 6px;
}
.vnt-planning-shell select.vnt-shot-next {
  background-color: rgba(89, 128, 166, 0.1);
}

.brief-designer-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  background:
    radial-gradient(circle at 82% 0%, rgba(89, 128, 166, 0.08), transparent 30%),
    var(--vnt-panel-2);
  color: var(--vnt-text);
}
.brief-designer-topbar {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) minmax(220px, 420px) auto;
  grid-template-areas: "back title ready export";
  align-items: center;
  gap: 8px 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(29, 31, 32, 0.09);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 42px rgba(29, 31, 32, 0.11);
}
.brief-back-link {
  grid-area: back;
}
.brief-designer-title {
  grid-area: title;
  min-width: 0;
}
.brief-designer-title div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--vnt-text);
  font-size: 15px;
  font-weight: 800;
}
.brief-designer-title span {
  display: none;
}
.brief-designer-status {
  color: var(--vnt-text-dim);
  font-size: 11px;
}
.brief-readiness-strip {
  grid-area: ready;
  display: block;
  min-width: 0;
  overflow: hidden;
}
.brief-topbar-actions {
  grid-area: export;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
#bdTopExport {
  /* One Generate finish line pre-export (the rail CTA); the topbar slot
     is the Regenerate affordance once an export exists. */
  display: none;
  white-space: nowrap;
}
.brief-designer-shell.has-export #bdTopExport {
  display: inline-flex;
}
.brief-export-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(29, 31, 32, 0.18);
}
.brief-export-status b,
.brief-export-status span {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brief-export-status b {
  color: var(--vnt-text-faint);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.brief-export-status span {
  color: var(--vnt-text-muted);
  font-size: 10px;
}
/* Readiness tones share the status-pill --pill-color vocabulary; the grid
   geometry (label + truncating detail) stays a one-off. */
.brief-export-status.is-exportable { --pill-color: var(--vnt-success); }
.brief-export-status.is-warning { --pill-color: var(--vnt-accent-2); }
.brief-export-status.is-blocked { --pill-color: var(--vnt-danger); }
.brief-export-status.is-exportable,
.brief-export-status.is-warning,
.brief-export-status.is-blocked {
  border-color: color-mix(in srgb, var(--pill-color) 32%, transparent);
  background: color-mix(in srgb, var(--pill-color) 8%, transparent);
}
@media (max-width: 1180px) {
  .brief-designer-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "back title export"
      "ready ready ready";
  }
}
.brief-designer-topbar .btn.is-disabled,
.brief-options-panel .btn.is-disabled {
  opacity: 0.72;
  box-shadow: none;
}
.brief-designer-shell.has-stale-export #bdTopExport,
.brief-designer-shell.has-stale-export #bdExport {
  background: var(--vnt-gradient-stale);
  color: var(--vnt-panel-2);
  box-shadow: 0 14px 32px rgba(255, 209, 102, 0.18);
}
.brief-export-result:empty {
  display: none;
}
.brief-export-result {
  padding: 10px 14px 12px;
  background: rgba(7, 24, 32, 0.92);
}
.brief-pdf-qa-panel {
  padding: 10px;
  border: 1px solid rgba(89, 128, 166, 0.22);
  border-radius: 10px;
  background:
    radial-gradient(circle at 14% 0%, rgba(89, 128, 166, 0.10), transparent 34%),
    rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 50px rgba(29, 31, 32, 0.12);
}
.brief-pdf-qa-panel.is-stale {
  border-color: rgba(255, 209, 102, 0.40);
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 209, 102, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.94);
}
.brief-export-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(89, 128, 166, 0.32);
  border-radius: 8px;
  background: rgba(89, 128, 166, 0.08);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.brief-export-card.is-generating {
  border-color: rgba(255, 209, 102, 0.28);
  background: rgba(255, 209, 102, 0.08);
}
.brief-export-card.is-error {
  border-color: rgba(255, 107, 107, 0.34);
  background: rgba(255, 107, 107, 0.08);
}
.brief-export-card.is-error b {
  color: #ffb4b4;
}
.brief-export-copy {
  min-width: 0;
}
.brief-export-card b,
.brief-export-card span {
  display: block;
}
.brief-export-card b {
  color: var(--vnt-text);
  font-size: 12px;
  font-weight: 850;
}
.brief-export-card span {
  margin-top: 2px;
  color: var(--vnt-text-muted);
  font-size: 11px;
}
.brief-export-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}
.brief-pdf-stale-note {
  display: none;
  grid-column: 1 / -1;
  color: #ffd166;
  font-size: 11px;
  font-style: normal;
}
.brief-pdf-qa-panel.is-stale .brief-pdf-stale-note {
  display: block;
}
.brief-pdf-frame {
  width: 100%;
  min-height: 154px;
  border: 1px solid var(--vnt-border);
  border-radius: 8px;
  background: var(--vnt-bg-3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 16px 42px rgba(0,0,0,0.22);
}
.brief-designer-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
.brief-options-panel {
  width: 360px;
  min-width: 360px;
  overflow-y: auto;
  padding: 14px;
  border-right: 1px solid rgba(29, 31, 32, 0.09);
  background: rgba(255, 255, 255, 0.94);
  transition: width 180ms ease, min-width 180ms ease;
}
.brief-designer-shell.has-export .brief-options-panel {
  width: 300px;
  min-width: 300px;
}
.brief-designer-shell.has-export .brief-option-section.is-output,
.brief-designer-shell.has-export .brief-export-note {
  display: none;
}
/* One Generate control per state: the panel block owns pre-export, the
   topbar #bdTopExport owns Regenerate once an export exists. */
.brief-designer-shell.has-export .brief-export-action-block {
  display: none;
}
.brief-preview-stage {
  flex: 1;
  overflow-y: auto;
  padding: 26px;
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),
    var(--vnt-panel-2);
  background-size: 32px 32px;
}
.brief-review-nav {
  position: sticky;
  top: -1px;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.5fr) minmax(160px, 0.9fr);
  gap: 10px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto 16px;
  padding: 9px 10px;
  border: 1px solid rgba(29, 31, 32, 0.11);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(29, 31, 32, 0.12), inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.brief-review-nav-title,
.brief-review-nav-site {
  min-width: 0;
}
.brief-review-nav-title b,
.brief-review-nav-title span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brief-review-nav-title b {
  color: var(--vnt-text-faint);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.brief-review-nav-title span,
.brief-review-nav-site {
  color: var(--vnt-text-muted);
  font-size: 10px;
}
.brief-review-nav-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.brief-review-nav-actions::-webkit-scrollbar {
  display: none;
}
.brief-review-nav-actions button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(29, 31, 32, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--vnt-text-muted);
  font-size: 10px;
  font-weight: 850;
  cursor: pointer;
}
.brief-review-nav-actions button:hover {
  border-color: rgba(89, 128, 166, 0.48);
  color: var(--vnt-text);
}
.brief-review-nav-actions button.active {
  border-color: rgba(89, 128, 166, 0.70);
  background: rgba(89, 128, 166, 0.16);
  color: var(--vnt-text);
  box-shadow: 0 0 0 1px rgba(89, 128, 166, 0.08);
}
.brief-review-nav-site {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brief-preview-page {
  scroll-margin-top: 74px;
}
.brief-pdf-capture-root {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--z-capture);
  width: 1120px;
  max-width: none;
  height: 100vh;
  overflow: auto;
  padding: 24px 0;
  background: #061019;
  pointer-events: none;
}
.brief-pdf-capture-root .brief-review-nav {
  display: none !important;
}
.brief-export-capturing.brief-preview-stage {
  overflow: visible !important;
}
.brief-pdf-capture-root.brief-export-capturing {
  overflow: hidden !important;
}
.brief-export-capturing {
  --vnt-success: #6de5a6;
  --vnt-panel: #07141d;
  --vnt-bg-3: #0a1a25;
  --vnt-route-start: #6de5a6;
  --vnt-route-end: #da3633;
  --vnt-route-focus: #ff9800;
  --vnt-route-path: #5ccbd8;
  /* Route tokens are functional MAP color (exempt from the R3 ink sweep,
     like maps themselves) — the orbit ring keeps its high-vis cyan. */
  --vnt-route-orbit: #8ff7ff;
}
/* Print-safe teal for the FOV drag handle (was a --vnt-accent-2 hue-flip
   redefinition; same shipped-PDF color, no more two-meaning token). */
.brief-export-capturing .vnt-shot-handle {
  background: #63eadf !important;
}
.brief-export-capturing .brief-3d-building-stack span {
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, rgba(92,203,216,0.76), rgba(12,28,38,0.95)) !important;
}
.brief-export-capturing .brief-shot-map-cone,
.brief-export-capturing .vnt-shot-fov,
.brief-export-capturing .vnt-shot-map-control.is-ghost .vnt-shot-fov {
  background:
    linear-gradient(180deg, rgba(99,234,223,0.42), rgba(99,234,223,0.12)),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.16) 0 1px, transparent 1px 13px) !important;
  border-color: rgba(169,255,247,0.72) !important;
  box-shadow: 0 0 22px rgba(89, 128, 166,0.24) !important;
}
.brief-export-capturing .brief-shot-map-pin,
.brief-export-capturing .vnt-shot-id-marker {
  background: rgba(24, 60, 72, 0.94) !important;
  border-color: var(--pin-color, #63eadf) !important;
  box-shadow: 0 0 0 3px rgba(99,234,223,0.20), 0 12px 22px rgba(0,0,0,0.40) !important;
}
.brief-export-capturing .vnt-shot-id-marker.is-active {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.34), 0 12px 24px rgba(0,0,0,0.42) !important;
}
.brief-export-capturing .brief-preview-page {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  contain: none !important;
}
.brief-hidden-3d-capture {
  position: fixed;
  left: 0;
  top: 0;
  width: 960px;
  height: 540px;
  overflow: hidden;
  opacity: 0.012;
  pointer-events: none;
  transform: scale(0.01);
  transform-origin: top left;
  z-index: 0;
  contain: layout paint size;
}
.brief-hidden-3d-capture .tv-cesium-viewer {
  width: 960px;
  height: 540px;
  min-height: 540px;
}
@media (max-width: 980px) {
  .brief-review-nav {
    grid-template-columns: 1fr;
  }
  .brief-review-nav-actions {
    justify-content: flex-start;
  }
  .brief-review-nav-site {
    display: none;
  }
}
.brief-option-section {
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(29, 31, 32, 0.08);
  border-radius: 8px;
  background: rgba(29, 31, 32, 0.11);
}
.brief-export-action-block {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}
.brief-option-heading {
  margin-bottom: 8px;
  color: var(--vnt-text-faint);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.brief-option-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  color: var(--vnt-text-dim);
  font-size: 12px;
}
.brief-option-check input {
  accent-color: var(--vnt-accent);
}
.brief-auto-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(89, 128, 166, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0%, rgba(89, 128, 166,0.16), transparent 42%),
    rgba(255, 255, 255, 0.94);
}
.brief-auto-card b {
  color: var(--vnt-text);
  font-size: 14px;
}
.brief-auto-card span {
  color: var(--vnt-text-muted);
  font-size: 12px;
  line-height: 1.4;
}
/* The gold permit card panel section is gone (permit links live in the
   topbar now); its rules were dead CSS and the one-off gold accent went
   with them. */
.brief-permit-link {
  white-space: nowrap;
}
.brief-auto-flow {
  display: grid;
  grid-template-columns: 1fr 18px 1fr 18px 1fr;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--vnt-text-dim);
  font-size: 10.5px;
  text-align: center;
}
.brief-auto-flow i {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(89, 128, 166,0.62), transparent);
}
.brief-simple-label {
  display: block;
  margin: 10px 0 4px;
  color: var(--vnt-text-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
}
.brief-optional-details {
  margin-top: 12px;
  color: var(--vnt-text-muted);
}
.brief-optional-details summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--vnt-accent);
}
.brief-one-click-export {
  min-height: 46px;
}
.brief-export-note {
  margin: 8px 0 0;
  color: var(--vnt-text-faint);
  font-size: 11px;
  line-height: 1.35;
}
.brief-live-map {
  position: relative;
  min-height: 360px;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--vnt-border);
  border-radius: 8px;
  background: var(--vnt-bg-3);
}
/* Cover site-locator plate (makeover 2026-08-26): fills its plate box —
   no min-height, no frame of its own (the ticked plate frames it). */
.brief-cover-site-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--vnt-bg-3);
}
.brief-cover-site-map .brief-static-map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.brief-cover-site-map .brief-live-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--vnt-text-faint);
}
.brief-planner-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(292px, 340px);
  gap: 14px;
  align-items: stretch;
}
.brief-planner-map-layout.is-simple {
  display: block;
}
.brief-planner-map-column {
  min-width: 0;
}
.brief-planner-map-layout .brief-live-map {
  min-height: 500px;
  height: 500px;
  border-color: rgba(89, 128, 166, 0.26);
}
.brief-planner-map-layout.is-simple .brief-live-map {
  min-height: 520px;
  height: 520px;
}
/* On the exported map page the height comes from the page geometry
   (--brief-map-page-h, set in briefPreviewPages) so heading + map + caption +
   QR badge fit inside the captured page node. Without it the page grew and the
   badge was clipped to a sliver. */
#briefMapPage .brief-planner-map-layout .brief-live-map,
#briefMapPage .brief-planner-map-layout.is-simple .brief-live-map {
  min-height: var(--brief-map-page-h, 500px);
  height: var(--brief-map-page-h, 500px);
}
.brief-planner-map-caption {
  margin-top: 7px;
  color: var(--vnt-text-muted);
  font-size: 11px;
  line-height: 1.35;
}
.brief-planner-right-clone {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--vnt-border);
  border-radius: 8px;
  background: var(--vnt-bg-2);
  box-shadow: inset 1px 0 0 rgba(29, 31, 32, 0.04);
}
.brief-planner-right-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--vnt-border);
  background: var(--vnt-bg);
  color: var(--vnt-text-muted);
  font: 800 10px/1 var(--vnt-font-mono);
}
.brief-planner-right-status span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--vnt-border);
  border-radius: 999px;
  background: var(--vnt-bg-2);
}
.brief-planner-right-status b {
  color: var(--vnt-text);
}
.brief-planner-3d-clone .brief-3d-preview-card {
  border-width: 0 0 1px;
  border-radius: 0;
  background: var(--vnt-bg-3);
}
.brief-planner-3d-clone .brief-3d-preview-card.is-hero .brief-3d-scene {
  height: 190px;
}
.brief-planner-3d-clone .brief-3d-card-meta {
  padding: 10px 13px;
}
.brief-summary-preview-block {
  margin: 12px 0;
  overflow: hidden;
  border: 1px solid var(--vnt-border);
  border-radius: 10px;
  background: var(--vnt-bg-2);
}
.brief-summary-3d-clone .brief-3d-preview-card.is-hero .brief-3d-scene {
  height: 210px;
}
.brief-planner-active-shot {
  padding: 12px 14px;
  border-bottom: 1px solid var(--vnt-border);
  background: var(--vnt-bg);
}
.brief-planner-shot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.brief-planner-shot-head b {
  color: var(--vnt-text);
  font-size: 18px;
  font-weight: 900;
}
.brief-planner-shot-head span {
  padding: 3px 8px;
  border: 1px solid rgba(89, 128, 166, 0.32);
  border-radius: 999px;
  color: var(--vnt-accent);
  font: 800 10px/1 var(--vnt-font-mono);
}
.brief-planner-shot-sub {
  margin-top: 5px;
  color: var(--vnt-text-muted);
  font: 750 11px/1.35 var(--vnt-font-mono);
}
.brief-time-chip {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 7px 4px 5px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: #fff;
  background: rgba(8, 23, 32, 0.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 5px 14px rgba(0,0,0,0.18);
}
.brief-time-chip i {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-style: normal;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}
.brief-time-chip b,
.brief-time-chip em,
.brief-time-chip small {
  color: inherit;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.brief-time-chip b {
  font-size: 10.5px;
  font-weight: 900;
}
.brief-time-chip em {
  font-family: var(--vnt-font-mono);
  font-size: 9px;
  font-style: normal;
  opacity: 0.78;
}
.brief-time-chip small {
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(3, 16, 21, 0.58);
  font-size: 9px;
  font-weight: 900;
}
.brief-time-chip.is-empty {
  color: var(--vnt-text-muted);
  border-color: rgba(132,185,196,0.2);
}
.brief-time-chip-bluehour { background: linear-gradient(145deg, #07162a, #235486); }
.brief-time-chip-sunrise { background: linear-gradient(145deg, #3a2142, #cf6749); }
.brief-time-chip-midday { background: linear-gradient(145deg, #0974c9, #2eb6e9); }
.brief-time-chip-golden { background: linear-gradient(145deg, #5b421f, #d69b35); }
.brief-time-chip-sunset { background: linear-gradient(145deg, #231040, #b63b5a); }
.brief-time-chip-twilight { background: linear-gradient(145deg, #030814, #1e315d); }
.brief-time-chip-custom { background: linear-gradient(145deg, #10222c, #31464f); }

/* Batch C (2026-08-26): on print pages the glossy window pill becomes a
   square paper plate — the window color survives as a left ink bar (it
   encodes the shoot window), never as a glow. Scoped to .brief-preview-page
   so the planner rail keeps its interactive chips. */
.brief-preview-page .brief-time-chip {
  border-radius: 0;
  border: 1px solid rgba(29, 31, 32, 0.28);
  background: #fff;
  color: #1d1f20;
  box-shadow: inset 3px 0 0 #5980a6;
}
.brief-preview-page .brief-time-chip i {
  border-radius: 0;
  background: transparent;
  color: #1d1f20;
}
.brief-preview-page .brief-time-chip em { opacity: 1; color: #66696c; }
.brief-preview-page .brief-time-chip small {
  border-radius: 0;
  background: #e9eaeb;
  color: #1d1f20;
}
.brief-preview-page .brief-time-chip-bluehour { box-shadow: inset 3px 0 0 #235486; }
.brief-preview-page .brief-time-chip-sunrise { box-shadow: inset 3px 0 0 #cf6749; }
.brief-preview-page .brief-time-chip-midday { box-shadow: inset 3px 0 0 #0974c9; }
.brief-preview-page .brief-time-chip-golden { box-shadow: inset 3px 0 0 #d69b35; }
.brief-preview-page .brief-time-chip-sunset { box-shadow: inset 3px 0 0 #b63b5a; }
.brief-preview-page .brief-time-chip-twilight { box-shadow: inset 3px 0 0 #1e315d; }
.brief-preview-page .brief-time-chip-custom { box-shadow: inset 3px 0 0 #ab4634; }

.brief-time-chip.is-shot-time {
  min-height: 24px;
  padding-right: 8px;
  border-color: rgba(255,255,255,0.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 6px 18px rgba(0,0,0,0.18);
}
/* The brief-planner gradient TOD cards were retired with the planner's
   Time Windows seg-row redesign; the brief surface renders windows as
   brief-time-chip dots/chips only (see .brief-time-chip-* above). */
.brief-planner-time-note,
.brief-planner-schedule-more {
  margin-top: 8px;
  color: var(--vnt-text-faint);
  font-size: 10px;
  line-height: 1.3;
}
.brief-planner-schedule-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 36px;
  padding: 5px 0;
  border-top: 1px solid var(--vnt-bg-3);
}
.brief-planner-schedule-row:first-of-type {
  border-top: 0;
}
.brief-planner-schedule-row.active {
  color: var(--vnt-text);
}
/* (old planner-clone shot badge deleted with its dead render path) */
.brief-planner-schedule-row b,
.brief-planner-schedule-row em {
  display: block;
}
.brief-planner-schedule-row b {
  color: var(--vnt-text);
  font-size: 11px;
}
.brief-planner-schedule-row em {
  color: var(--vnt-text-muted);
  font-style: normal;
  font: 700 9.5px/1.35 var(--vnt-font-mono);
}
@media (max-width: 1180px) {
  .brief-planner-map-layout {
    grid-template-columns: 1fr;
  }
}
.brief-live-map .leaflet-tile-pane {
  filter: saturate(1.08) contrast(1.02) brightness(0.92);
}
.brief-live-map-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--vnt-text-faint);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background:
    linear-gradient(rgba(29, 31, 32, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 31, 32, 0.04) 1px, transparent 1px),
    var(--vnt-bg-3);
  background-size: 34px 34px;
}
.brief-live-map.is-loaded .brief-live-map-loading {
  display: none;
}
.brief-static-map {
  position: relative;
  overflow: hidden;
}
.brief-static-map-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.02) brightness(0.92);
}
.brief-static-map.is-static-map-error {
  border-color: rgba(255, 132, 132, 0.42);
}
.brief-shot-map-mini.brief-shot-map-mini-live {
  min-height: 170px;
  height: 100%;
  width: 100%;
  border-color: var(--vnt-border);
  border-radius: 8px;
  background: var(--vnt-bg-3);
}
.brief-shot-map-mini.brief-shot-map-mini-static {
  min-height: 170px;
  height: 100%;
  width: 100%;
  border: 1px solid var(--vnt-border);
  border-radius: 8px;
  background: var(--vnt-bg-3);
}
.brief-shot-map-mini-live .leaflet-control-container {
  display: none;
}
.brief-shot-map-mini-live .vnt-shot-direction-icon {
  transform: scale(0.92);
  transform-origin: center;
}
.brief-shot-map-mini-live .vnt-shot-id-marker {
  width: 38px;
  height: 38px;
  font-size: 15px;
}
.brief-shot-map-mini-live .vnt-shot-start-tag {
  top: 30px;
  font-size: 8px; /* print-DPI surface — keep pre-floor size (10px floor is on-screen only) */
}
.brief-shot-map-mini-live .vnt-shot-map-control.is-ghost {
  opacity: 0.94;
}
.brief-live-map .leaflet-pane,
.brief-live-map .leaflet-top,
.brief-live-map .leaflet-bottom {
  z-index: 1;
}
.brief-live-map .vnt-shot-map-control.is-ghost {
  opacity: 0.78;
}
.brief-live-map .vnt-shot-map-control.is-360.is-brief-compact-360 .vnt-shot-orbit {
  width: 52px;
  height: 52px;
  border-width: 2px;
  background:
    radial-gradient(circle at 50% 50%, rgba(89, 128, 166,0.18) 0 2px, transparent 3px),
    repeating-radial-gradient(circle at 50% 50%, rgba(89, 128, 166,0.10) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 0 14px rgba(89, 128, 166,0.10), 0 0 14px rgba(89, 128, 166,0.16);
}
.brief-live-map .vnt-shot-map-control.is-360.is-brief-compact-360 .vnt-shot-orbit-dot {
  display: none;
}
.brief-live-map .vnt-shot-map-control.is-video .vnt-shot-fov {
  display: block;
  background:
    linear-gradient(180deg, rgba(255, 123, 143, 0.32), rgba(255, 123, 143, 0.08)),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 14px);
  border-color: rgba(255, 186, 197, 0.74);
  box-shadow: 0 0 22px rgba(255, 123, 143, 0.22);
}
/* (old brief map pin/home divIcon styles deleted — the brief flight map uses
   server static maps or live maps with .vnt-shot-id-marker) */
.brief-map-reticle-icon {
  background: transparent;
  border: 0;
}
.brief-map-reticle {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
}
.brief-map-reticle::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid var(--vnt-accent-300);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(143,247,255,0.3);
}
.brief-map-reticle::after {
  content: "";
  position: absolute;
  inset: 3px;
  background:
    linear-gradient(90deg, transparent 0 13px, var(--vnt-accent-300) 13px 21px, transparent 21px),
    linear-gradient(0deg, transparent 0 13px, var(--vnt-accent-300) 13px 21px, transparent 21px);
}
.brief-map-reticle i {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 1;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vnt-accent);
}
.brief-3d-preview-strip {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--vnt-border);
  border-radius: 10px;
  background: var(--vnt-bg-2);
}
.brief-3d-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.brief-3d-preview-head b {
  color: var(--vnt-text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.brief-3d-preview-head span,
.brief-3d-preview-more {
  color: var(--vnt-text-muted);
  font-size: 10.5px;
  line-height: 1.35;
}
.brief-3d-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.brief-3d-preview-grid.has-captures {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.brief-3d-preview-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--vnt-border);
  border-radius: 8px;
  background: var(--vnt-bg-2);
}
.brief-3d-preview-card.is-hero {
  grid-column: 1 / -1;
}
.brief-3d-scene {
  position: relative;
  height: 104px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #17314d 0%, #496f8b 54%, #89b5bf 71%, #30291f 71.5%, #0b0908 100%);
}
.brief-3d-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: 0.24;
  pointer-events: none;
}
.brief-3d-shot-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.86;
}
.brief-3d-preview-card.is-hero .brief-3d-scene {
  height: 260px;
}
.brief-3d-preview-card.has-capture .brief-3d-scene {
  background: #02070b;
  height: auto;
  aspect-ratio: 16 / 9;
}
.brief-planner-3d-clone .brief-3d-preview-card.has-capture.is-hero .brief-3d-scene,
.brief-summary-3d-clone .brief-3d-preview-card.has-capture.is-hero .brief-3d-scene {
  height: auto;
  aspect-ratio: 16 / 9;
}
.brief-3d-preview-card.has-capture .brief-3d-scene::before,
.brief-3d-preview-card.has-capture .brief-3d-hud,
.brief-3d-preview-card.has-capture .brief-3d-mode,
.brief-3d-preview-card.has-capture .brief-3d-reticle,
.brief-3d-preview-card.has-capture .brief-3d-orbit,
.brief-3d-preview-card.has-capture .brief-3d-video-path,
.brief-3d-preview-card.has-capture .brief-3d-city,
.brief-3d-preview-card.has-capture .brief-3d-building,
.brief-3d-preview-card.has-capture .brief-3d-ground,
.brief-3d-preview-card.has-capture .brief-3d-compass {
  display: none !important;
}
/* R1: a needs-capture scene holds the shot's real map plate, not the
   synthetic sky theatre — kill the painted gradient and let the mini fill. */
.brief-3d-preview-card.needs-capture .brief-3d-scene {
  background: var(--vnt-bg-3);
}
.brief-3d-preview-card.needs-capture .brief-3d-scene::before {
  display: none;
}
.brief-3d-scene .brief-shot-map-mini,
.brief-3d-scene .brief-shot-map-mini-static,
.brief-3d-scene .brief-shot-map-mini-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.brief-3d-preview-card.has-capture .brief-3d-shot-image {
  opacity: 1;
  object-fit: contain;
  background: #02070b;
}
.brief-3d-preview-card.is-preview-image-failed .brief-3d-shot-image,
.brief-shot-preview-mini.is-preview-image-failed img {
  display: none !important;
}
.brief-shot-preview-mini.is-preview-image-failed {
  position: relative;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(180deg, #17314d 0%, #496f8b 54%, #89b5bf 71%, #30291f 71.5%, #0b0908 100%);
  background-size: 38px 38px, 38px 38px, auto;
}
.brief-shot-preview-mini.is-preview-image-failed .brief-3d-missing-chip {
  left: 50%;
  right: auto;
  bottom: 50%;
  transform: translate(-50%, 50%);
  white-space: nowrap;
}
.brief-3d-missing-preview {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 45%;
  z-index: 3;
  transform: translateY(-50%);
  padding: 7px 8px;
  border: 1px solid var(--vnt-border);
  border-radius: 8px;
  background: var(--vnt-bg);
  color: var(--vnt-text-dim);
  font: 800 9px/1.25 var(--vnt-font-mono);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.brief-3d-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  background:
    linear-gradient(90deg, rgba(255,209,102,0.20), rgba(89, 128, 166,0.08), rgba(255,255,255,0.05)),
    linear-gradient(180deg, rgba(33,24,16,0.74), rgba(3,5,6,0.88));
}
.brief-3d-hud {
  position: absolute;
  left: 8px;
  top: 7px;
  z-index: 4;
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 7px;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  background: rgba(7, 12, 17, 0.56);
  color: rgba(255,255,255,0.94);
  font-family: var(--vnt-font-mono);
  font-size: 8.5px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.brief-3d-hud span {
  color: rgba(255,255,255,0.58);
  font-weight: 800;
  letter-spacing: 0.08em;
}
.brief-3d-hud b {
  min-width: 38px;
  font-weight: 700;
  text-align: right;
}
.brief-3d-mode {
  position: absolute;
  left: 8px;
  bottom: 9px;
  z-index: 5;
  max-width: calc(100% - 64px);
  padding: 4px 7px;
  border: 1px solid rgba(89, 128, 166,0.28);
  border-radius: 999px;
  background: rgba(5, 12, 16, 0.62);
  color: rgba(225,250,255,0.92);
  font-family: var(--vnt-font-mono);
  font-size: 8.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brief-3d-reticle {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 4;
  width: 58px;
  height: 1px;
  transform: translate(-50%, -50%);
  border-top: 1px dashed rgba(255,255,255,0.46);
}
.brief-3d-reticle::before,
.brief-3d-reticle::after {
  content: "";
  position: absolute;
  top: -13px;
  width: 1px;
  height: 26px;
  background: rgba(255,255,255,0.38);
}
.brief-3d-reticle::before { left: 28px; }
.brief-3d-reticle::after { display: none; }
.brief-3d-orbit,
.brief-3d-video-path {
  display: none;
}
.brief-3d-preview-card.is-360 .brief-3d-reticle {
  display: none;
}
.brief-3d-preview-card.is-360 .brief-3d-orbit {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 4;
  display: block;
  width: 76px;
  height: 76px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(89, 128, 166,0.72);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(89, 128, 166,0.22), inset 0 0 20px rgba(89, 128, 166,0.10);
}
.brief-3d-preview-card.is-360 .brief-3d-orbit span {
  position: absolute;
  left: 50%;
  top: -8px;
  width: 15px;
  height: 15px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ffd166;
  border: 2px solid rgba(7,12,16,0.88);
  box-shadow: 0 0 16px rgba(255,209,102,0.54);
}
.brief-3d-preview-card.is-video .brief-3d-reticle {
  display: none;
}
.brief-3d-preview-card.is-video .brief-3d-video-path {
  position: absolute;
  left: 38%;
  top: 34%;
  z-index: 4;
  display: block;
  width: 68px;
  height: 34px;
  border-bottom: 2px dashed rgba(92,203,216,0.9);
  border-right: 2px dashed rgba(92,203,216,0.76);
  transform: skewX(-18deg);
  filter: drop-shadow(0 0 8px rgba(92,203,216,0.28));
}
.brief-3d-preview-card.is-video .brief-3d-video-path::after {
  content: "END";
  position: absolute;
  right: -15px;
  bottom: -10px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #da3633;
  color: #fff;
  font: 800 6px/1 var(--vnt-font-mono);
  border: 2px solid rgba(255,255,255,0.78);
}
.brief-3d-city,
.brief-3d-building {
  position: absolute;
  right: 44px;
  bottom: 26px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  width: clamp(62px, 24%, 88px);
  height: clamp(68px, 44%, 102px);
}
.brief-3d-city i {
  flex: 1;
  min-width: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.14) 0 4px, transparent 4px 9px),
    linear-gradient(180deg, rgba(45,65,82,0.92), rgba(10,16,24,0.95));
  box-shadow: 0 13px 24px rgba(0,0,0,0.48);
}
.brief-3d-building {
  right: 56px;
  width: clamp(38px, 16%, 58px);
  gap: 0;
}
.brief-3d-building-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(9,14,20,0.74);
  box-shadow: 0 13px 24px rgba(0,0,0,0.52);
}
.brief-3d-building-stack span {
  display: block;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, color-mix(in oklch, var(--seg-color, var(--vnt-accent, var(--vnt-accent))) 60%, white 6%), color-mix(in oklch, var(--seg-color, var(--vnt-accent, var(--vnt-accent))) 72%, black 10%));
}
.brief-3d-building b {
  position: absolute;
  right: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brief-accent, var(--vnt-accent));
  border: 2px solid rgba(6,10,14,0.9);
  box-shadow: 0 0 14px rgba(89, 128, 166,0.58);
}
.brief-3d-compass {
  position: absolute;
  right: 9px;
  bottom: 8px;
  z-index: 5;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.42);
  color: rgba(255,255,255,0.90);
  font-family: var(--vnt-font-mono);
  font-size: 9px;
  font-weight: 800;
}
.brief-3d-compass::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 8px solid var(--brief-accent, var(--vnt-accent));
}
.brief-3d-card-meta {
  padding: 7px 8px 8px;
}
.brief-3d-card-meta b,
.brief-3d-card-meta span {
  display: block;
  min-width: 0;
}
.brief-3d-card-meta b {
  color: var(--vnt-text);
  font-size: 11px;
}
.brief-3d-card-meta span {
  margin-top: 2px;
  color: var(--vnt-text-muted);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brief-shot-summary-head {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.brief-shot-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
}
.brief-shot-summary-row {
  display: grid;
  grid-template-columns: 24px minmax(58px, 0.8fr) 54px minmax(0, 1.4fr);
  gap: 6px;
  align-items: center;
  min-height: 22px;
  padding: 4px 6px;
  /* Batch C: ledger rows are square hairline plates on paper. */
  border: 1px solid rgba(29, 31, 32, 0.22);
  border-radius: 0;
  background: #fff;
  font-size: 10.5px;
}
.brief-shot-summary-row.tod-bluehour,
.brief-shot-instruction-card.tod-bluehour { border-color: rgba(84, 163, 212, 0.46); box-shadow: inset 4px 0 0 rgba(84, 163, 212, 0.78); }
.brief-shot-summary-row.tod-sunrise,
.brief-shot-instruction-card.tod-sunrise { border-color: rgba(255, 156, 92, 0.46); box-shadow: inset 4px 0 0 rgba(255, 156, 92, 0.78); }
.brief-shot-summary-row.tod-midday,
.brief-shot-instruction-card.tod-midday { border-color: rgba(72, 203, 244, 0.48); box-shadow: inset 4px 0 0 rgba(72, 203, 244, 0.82); }
.brief-shot-summary-row.tod-golden,
.brief-shot-instruction-card.tod-golden { border-color: rgba(255, 210, 113, 0.48); box-shadow: inset 4px 0 0 rgba(255, 210, 113, 0.82); }
.brief-shot-summary-row.tod-sunset,
.brief-shot-instruction-card.tod-sunset { border-color: rgba(255, 106, 132, 0.48); box-shadow: inset 4px 0 0 rgba(255, 106, 132, 0.82); }
.brief-shot-summary-row.tod-twilight,
.brief-shot-instruction-card.tod-twilight { border-color: rgba(95, 128, 205, 0.48); box-shadow: inset 4px 0 0 rgba(95, 128, 205, 0.82); }
.brief-shot-summary-row.tod-custom,
.brief-shot-instruction-card.tod-custom { border-color: rgba(132, 185, 196, 0.42); box-shadow: inset 4px 0 0 rgba(132, 185, 196, 0.72); }
.brief-shot-summary-row.has-notes {
  align-items: start;
}
.brief-shot-summary-row span,
.brief-shot-summary-row b {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Export capture: html2canvas draws overflow:hidden but drops the ellipsis,
   so a clipped chip reads as cut-off data. Let the time chips wrap instead. */
.brief-shot-summary-row .brief-shot-summary-times {
  white-space: normal;
  overflow: visible;
}
.brief-shot-summary-note {
  grid-column: 2 / -1;
  min-width: 0;
  margin-top: -2px;
  color: #66696c;
  font-size: 9px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brief-shot-instruction-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.brief-shot-instruction-grid.has-captures {
  grid-template-columns: minmax(0, 1fr);
}
/* Makeover batch B (2026-08-26): cards are paper plates — the brief is a
   print document, so these rules pin DS inks regardless of app theme. */
.brief-shot-instruction-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  padding: 14px;
  border: 1px solid rgba(29, 31, 32, 0.25);
  border-radius: 0;
  background: #fff;
}
.brief-shot-instruction-card.is-360 {
  min-height: 0;
}
.brief-shot-instruction-card.has-capture {
  align-items: stretch;
}
.brief-shot-instruction-card.has-capture .brief-shot-thumb {
  width: 100%;
  height: auto;
  justify-self: stretch;
  min-height: 260px;
  aspect-ratio: 16 / 9;
  background: #02080d;
}
.brief-shot-instruction-grid:not(.has-captures) .brief-shot-instruction-card {
  grid-template-columns: minmax(0, 1fr);
}
.brief-shot-visual-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
  gap: 12px;
  min-width: 0;
  align-items: stretch;
}
.brief-shot-visual-pair.is-map-only {
  grid-template-columns: minmax(0, 1fr);
}
.brief-shot-visual-pair.is-map-only .brief-shot-map-mini {
  min-height: 420px;
}
/* Compact mode: applied by briefPaginateInstructionCards when a lone card
   would overflow the print page — smaller visuals beat a mid-card slice. */
.brief-card-compact .brief-shot-visual-block {
  grid-template-rows: auto minmax(200px, 1fr);
}
.brief-card-compact .brief-shot-visual-pair.is-map-only .brief-shot-map-mini {
  min-height: 230px;
}
.brief-card-compact .brief-shot-map-mini,
.brief-card-compact .brief-shot-preview-mini {
  max-height: 230px;
}
/* Tier-2 compact: a lone compact card still taller than the print page.
   Stack the visuals in a left column beside the copy so the card roughly
   halves its height — anything beats a mid-card pixel slice. The 360
   schedule card keeps its own two-column layout. */
.brief-shot-instruction-card.brief-card-compact-2:not(.is-360-schedule) {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
}
.brief-card-compact-2:not(.is-360-schedule) .brief-shot-visual-pair {
  grid-template-columns: minmax(0, 1fr);
}
.brief-card-compact-2 .brief-shot-visual-block {
  grid-template-rows: auto minmax(150px, 1fr);
}
.brief-card-compact-2 .brief-shot-map-mini,
.brief-card-compact-2 .brief-shot-preview-mini {
  min-height: 150px;
  max-height: 175px;
}
.brief-card-compact-2.has-capture .brief-shot-thumb {
  min-height: 0;
  max-height: 175px;
}
.brief-shot-visual-block {
  display: grid;
  grid-template-rows: auto minmax(340px, 1fr);
  gap: 5px;
  min-width: 0;
}
.brief-shot-visual-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #8a8c8e;
  font-size: 7px;
  font-weight: 700;
  font-family: var(--vnt-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.brief-shot-hold-tag {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid #1d1f20;
  color: #1d1f20;
  font: normal 700 6.5px/1.2 var(--vnt-font-mono);
  font-style: normal;
  letter-spacing: 0.1em;
}
.brief-shot-map-mini,
.brief-shot-preview-mini {
  position: relative;
  min-width: 0;
  min-height: 340px;
  overflow: hidden;
  border: 1px solid var(--vnt-border);
  border-radius: 8px;
  background:
    radial-gradient(circle at 52% 46%, rgba(89, 128, 166,0.08), transparent 38%),
    linear-gradient(rgba(89, 128, 166,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89, 128, 166,0.09) 1px, transparent 1px),
    var(--vnt-bg-3);
  background-size: auto, 28px 28px, 28px 28px, auto;
}
.brief-shot-map-grid {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(89, 128, 166,0.22) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, transparent 0 34px, rgba(89, 128, 166,0.12) 35px, transparent 36px);
  opacity: 0.7;
}
.brief-shot-map-cone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--mini-fov-width);
  height: var(--mini-fov-len);
  transform: translate(-50%, -100%) rotate(var(--mini-heading));
  transform-origin: 50% 100%;
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--mini-accent, var(--vnt-accent)) 42%, transparent), color-mix(in oklch, var(--mini-accent, var(--vnt-accent)) 12%, transparent)),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.16) 0 1px, transparent 1px 13px);
  border: 1px solid color-mix(in oklch, var(--mini-accent, var(--vnt-accent)) 76%, white);
  box-shadow: 0 0 22px color-mix(in oklch, var(--mini-accent, var(--vnt-accent)) 26%, transparent);
}
.brief-shot-map-mini.is-video .brief-shot-map-cone {
  opacity: 0.66;
  filter: hue-rotate(135deg);
}
.brief-shot-map-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 82px;
  height: 82px;
  transform: translate(-50%, -50%) rotate(var(--mini-heading));
  border: 2px solid rgba(89, 128, 166,0.78);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(89, 128, 166,0.22) 0 3px, transparent 4px),
    repeating-radial-gradient(circle, rgba(89, 128, 166,0.12) 0 1px, transparent 1px 13px);
  box-shadow: inset 0 0 22px rgba(89, 128, 166,0.1), 0 0 22px rgba(89, 128, 166,0.16);
}
.brief-shot-map-orbit i {
  position: absolute;
  left: 50%;
  top: -8px;
  width: 16px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ffd166;
  border: 2px solid rgba(7,10,12,0.88);
  box-shadow: 0 0 18px rgba(255,209,102,0.56);
}
.brief-shot-map-path {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 2px;
  transform: rotate(30deg);
  transform-origin: 0 50%;
  border-top: 3px dashed rgba(109,229,166,0.78);
}
.brief-shot-map-poi,
.brief-shot-map-focus,
.brief-shot-map-end {
  position: absolute;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  height: 18px;
  border-radius: 999px;
  color: #061017;
  font: 950 7px/1 var(--vnt-font-mono);
  letter-spacing: 0.04em;
}
.brief-shot-map-poi {
  right: 16%;
  top: 24%;
  background: linear-gradient(135deg, #ffb347, #ffd166);
}
.brief-shot-map-focus {
  right: 22%;
  top: 28%;
  background: #ffd166;
}
.brief-shot-map-end {
  right: 12%;
  bottom: 20%;
  background: #ff6b5f;
  color: #fff;
}
.brief-shot-map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,0.92);
  border-radius: 50%;
  background: color-mix(in oklch, var(--mini-accent, var(--vnt-accent)) 45%, rgba(7,12,18,0.92));
  color: #f5fbff;
  font: 950 13px/1 var(--vnt-font-mono);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--mini-accent, var(--vnt-accent)) 24%, transparent), 0 12px 22px rgba(0,0,0,0.4);
}
.brief-shot-map-pin.is-video-start {
  top: 47%;
  border-color: rgba(166,255,205,0.92);
  background: linear-gradient(180deg, rgba(12,43,34,0.98), rgba(6,24,23,0.98));
}
.brief-shot-map-pin em {
  position: absolute;
  left: 50%;
  top: 26px;
  transform: translateX(-50%);
  min-width: 42px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(180deg, var(--vnt-route-start-hi), var(--vnt-route-start-lo));
  color: #052118;
  font: normal 900 7px/1 var(--vnt-font-mono);
  letter-spacing: 0.08em;
}
.brief-shot-map-heading {
  position: absolute;
  left: 10px;
  bottom: 9px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(5,8,12,0.74);
  color: rgba(245,251,255,0.9);
  font: 900 9px/1.2 var(--vnt-font-mono);
}
.brief-shot-preview-mini {
  display: grid;
  place-items: center;
  padding: 12px;
  color: var(--vnt-text-muted);
  text-align: center;
}
.brief-shot-preview-mini.brief-shot-thumb {
  min-height: 340px;
  padding: 0;
}
.brief-shot-preview-mini b,
.brief-shot-preview-mini span {
  display: block;
}
.brief-shot-preview-mini b {
  color: var(--vnt-text);
  font-size: 11px;
}
.brief-shot-preview-mini span {
  max-width: 18ch;
  color: var(--vnt-text-faint);
  font-size: 9px;
  line-height: 1.25;
}
.brief-shot-summary-times {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.brief-shot-time-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.brief-shot-time-badges.is-summary .brief-time-chip {
  min-height: 18px;
  padding: 2px 5px 2px 3px;
}
.brief-shot-time-badges.is-summary .brief-time-chip i {
  width: 14px;
  height: 14px;
  font-size: 8px;
}
.brief-shot-time-badges.is-summary .brief-time-chip b {
  font-size: 8.5px;
}
.brief-shot-time-badges.is-summary .brief-time-chip em {
  display: none;
}
.brief-shot-preview-mini.is-360-reference {
  background:
    radial-gradient(circle at 50% 30%, rgba(176, 124, 46, 0.10), transparent 34%),
    linear-gradient(rgba(89, 128, 166,0.10) 1px, transparent 1px),
    var(--vnt-bg-3);
  background-size: auto, 20px 20px, auto;
}
.brief-shot-3d-fallback,
.brief-shot-360-viewer-mini {
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, #17314d 0%, #496f8b 54%, #89b5bf 71%, #30291f 71.5%, #0b0908 100%);
}
.brief-shot-3d-fallback::before,
.brief-shot-360-viewer-mini::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.22;
}
.brief-shot-3d-fallback > *,
.brief-shot-360-viewer-mini > * {
  position: relative;
  z-index: 2;
}
/* The HUD/mode/reticle/ground/compass overlays are absolutely positioned
   scene chrome (see .brief-3d-hud etc. above); the generic child reset just
   above must not flatten them into the centering grid — that stacked ALT,
   TILT, and the mode line in a pile under the "Planner reference view" pill
   on exported instruction cards. Re-assert their corner placement and undo
   the generic .brief-shot-preview-mini span 18ch clamp. */
.brief-shot-3d-fallback > .brief-3d-hud,
.brief-shot-3d-fallback > .brief-3d-mode,
.brief-shot-3d-fallback > .brief-3d-reticle,
.brief-shot-3d-fallback > .brief-3d-ground,
.brief-shot-3d-fallback > .brief-3d-compass,
.brief-shot-3d-fallback > .brief-3d-missing-chip {
  position: absolute;
  max-width: none;
}
.brief-shot-3d-fallback > .brief-3d-mode {
  max-width: calc(100% - 64px);
}
/* The same child reset also flattened every overlay to z-index 2, so the ground
   band — last in DOM order — painted its 74-88% dark gradient straight over the
   mode pill and the compass, which is what made both read as illegible
   dark-on-dark on exported cards. Restore the scene stacking: ground below the
   plates, plates above it. */
.brief-shot-3d-fallback > .brief-3d-ground {
  z-index: 1;
}
.brief-shot-3d-fallback > .brief-3d-hud,
.brief-shot-3d-fallback > .brief-3d-reticle {
  z-index: 4;
}
.brief-shot-3d-fallback > .brief-3d-mode,
.brief-shot-3d-fallback > .brief-3d-compass,
.brief-shot-3d-fallback > .brief-3d-missing-chip {
  z-index: 5;
}
/* Same collision on the other three properties the generic b/span rules set:
   display flattened the 2x2 HUD grid into a four-line stack, and the muted
   ink printed the mode pill and the compass "N" dark-on-dark inside their own
   dark plates. Scoped to any preview mini (not just the 3D fallback) because
   the 360 viewer mini nests the same compass. */
.brief-shot-preview-mini .brief-3d-hud {
  display: grid;
  max-width: none;
  color: rgba(255,255,255,0.94);
  font-size: 8.5px;
}
.brief-shot-preview-mini .brief-3d-hud span {
  max-width: none;
  color: rgba(255,255,255,0.58);
  font-size: 8.5px;
}
.brief-shot-preview-mini .brief-3d-hud b {
  color: rgba(255,255,255,0.94);
  font-size: 8.5px;
}
.brief-shot-preview-mini .brief-3d-mode {
  display: block;
  color: rgba(225,250,255,0.92);
  font-size: 8.5px;
}
.brief-shot-preview-mini .brief-3d-compass {
  display: grid;
  max-width: none;
  color: rgba(255,255,255,0.90);
  font-size: 9px;
}
.brief-shot-preview-mini .brief-3d-missing-chip {
  color: rgba(245,251,255,0.9);
  font-size: 9px;
}
.brief-shot-3d-fallback > b,
.brief-shot-3d-fallback > em,
.brief-shot-3d-fallback > p,
.brief-shot-3d-fallback > span:not(.brief-3d-hud):not(.brief-3d-mode):not(.brief-3d-reticle):not(.brief-3d-ground):not(.brief-3d-compass):not(.brief-3d-missing-chip) {
  display: none !important;
}
.brief-shot-3d-fallback.needs-capture .brief-3d-missing-chip {
  display: none !important;
}
/* Legacy stored exports can still carry .brief-shot-3d-fallback nodes; the
   honest label replaces the old "Planner reference view" theatre chip. */
.brief-shot-3d-fallback.needs-capture::after {
  content: "Capture failed — use pin map";
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 6;
  transform: translate(-50%, -50%);
  width: auto;
  max-width: 86%;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(4, 12, 18, 0.46);
  color: rgba(225,250,255,0.82);
  font: 850 8px/1.2 var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
}
.brief-3d-missing-chip {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 5;
  transform: translate(-50%, -50%);
  width: auto;
  max-width: 86%;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(4, 12, 18, 0.46);
  color: rgba(225,250,255,0.82);
  font: 850 8px/1.2 var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
}
.brief-shot-360-viewer-mini {
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 0;
  text-align: left;
}
.brief-shot-360-sky {
  position: relative;
  min-height: 118px;
}
.brief-shot-360-sky .brief-3d-building {
  right: 48px;
  bottom: 16px;
  width: 64px;
  height: 104px;
}
.brief-shot-360-sky .brief-3d-building-stack {
  width: 58px;
  height: 104px;
}
.brief-shot-360-orbit {
  position: absolute;
  left: 45%;
  top: 44%;
  z-index: 4;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(89, 128, 166,0.72);
  border-radius: 999px;
  box-shadow: 0 0 24px rgba(89, 128, 166,0.22), inset 0 0 20px rgba(89, 128, 166,0.10);
}
.brief-shot-360-orbit i {
  position: absolute;
  left: 50%;
  top: -8px;
  width: 15px;
  height: 15px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ffd166;
  border: 2px solid rgba(7,12,16,0.88);
  box-shadow: 0 0 16px rgba(255,209,102,0.54);
}
.brief-shot-360-levels {
  position: relative;
  z-index: 5;
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(4, 10, 16, 0.72);
}
.brief-shot-360-levels b {
  color: var(--vnt-accent);
  font: 900 9px/1.2 var(--vnt-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.brief-shot-360-levels span {
  /* Complete heights list for the pilot: wrap every value, never clip. */
  max-width: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  color: rgba(225, 250, 255, 0.86);
  font: 800 8.5px/1.3 var(--vnt-font-mono);
}
.brief-shot-thumb {
  position: relative;
  width: 100%;
  height: auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--vnt-border);
  border-radius: 8px;
  background: var(--vnt-bg-3);
  object-fit: initial;
}
.brief-shot-thumb img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
}
.brief-shot-instruction-card.has-capture .brief-shot-thumb img {
  min-height: 0;
  object-fit: contain;
  background: #02080d;
}

@media (max-width: 1180px) {
  .brief-shot-instruction-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .brief-shot-visual-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .brief-shot-visual-pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .brief-shot-visual-block {
    grid-template-rows: auto minmax(300px, 1fr);
  }
  .brief-shot-map-mini,
  .brief-shot-preview-mini,
  .brief-shot-preview-mini.brief-shot-thumb {
    min-height: 300px;
  }
}
.brief-shot-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* Priority tag (makeover batch B): bad-ink bordered plate, spelling out
   the rule — matching the red priority convention in client briefs. */
.brief-priority-tag {
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid #ab4634;
  border-radius: 0;
  background: transparent;
  color: #ab4634;
  font: normal 700 7.5px/1.2 var(--vnt-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-style: normal;
}
.brief-shot-instruction-card.is-priority .brief-shot-card-head b i {
  border-color: #ab4634;
  color: #ab4634;
}
.brief-shot-card-head b {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #1d1f20;
  font-family: var(--vnt-font-heading, "Barlow Condensed", sans-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* The letter box: square, hairline, ink — registration mark, not a chip. */
.brief-shot-card-head b i {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #1d1f20;
  border-radius: 0;
  background: transparent;
  color: #1d1f20;
  font: normal 700 15px/1 var(--vnt-font-heading, "Barlow Condensed", sans-serif);
  font-style: normal;
}
.brief-shot-card-head span {
  flex: 0 0 auto;
  color: #5980a6;
  font: 700 8px/1.2 var(--vnt-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.brief-shot-card-head + .brief-shot-time-badges {
  margin-top: 6px;
}
.brief-shot-purpose {
  margin-top: 6px;
  color: #1d1f20;
  font-size: 11px;
  line-height: 1.45;
}
.brief-shot-purpose b {
  margin-right: 7px;
  color: #5980a6;
  font: normal 400 7px/1 var(--vnt-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Spec grid (D5): five mono cells in one hairline plate, repeated on
   every card — altitude, labeled tolerance, gimbal/aim, format, wx gate. */
.brief-shot-spec-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 8px 0;
  border: 1px solid rgba(29, 31, 32, 0.28);
  background: #fff;
}
.brief-shot-spec-grid > span {
  min-width: 0;
  padding: 6px 8px;
  border-right: 1px solid rgba(29, 31, 32, 0.12);
  overflow: hidden;
}
.brief-shot-spec-grid > span:last-child {
  border-right: 0;
}
.brief-shot-spec-grid b {
  display: block;
  color: #8a8c8e;
  font: normal 400 6.5px/1.2 var(--vnt-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.brief-shot-spec-grid em {
  display: block;
  margin-top: 2px;
  color: #1d1f20;
  font: normal 700 9px/1.3 var(--vnt-font-mono);
  font-style: normal;
  white-space: normal;
}
.brief-shot-spec-grid small {
  display: block;
  margin-top: 1px;
  color: #8a8c8e;
  font: normal 400 6px/1.3 var(--vnt-font-mono);
  letter-spacing: 0.04em;
  white-space: normal;
}
.brief-shot-instruction-list {
  margin: 0;
  padding-left: 16px;
  color: var(--vnt-text-muted);
  font-size: 10.2px;
  line-height: 1.35;
}
.brief-shot-instruction-list li {
  margin: 0 0 4px;
}
.brief-shot-notes {
  margin-top: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(89, 128, 166, 0.24);
  border-left: 3px solid var(--vnt-accent);
  border-radius: 8px;
  background: rgba(89, 128, 166, 0.09);
  color: var(--vnt-text);
}
.brief-shot-notes b,
.brief-shot-notes span {
  display: block;
  min-width: 0;
}
.brief-shot-notes b {
  margin-bottom: 3px;
  color: var(--vnt-accent);
  font-size: 7.5px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.brief-shot-notes span {
  color: rgba(225, 250, 255, 0.9);
  font-size: 10px;
  line-height: 1.3;
}
.brief-shot-level-grid {
  margin-top: 8px;
  padding: 7px 8px 8px;
  border: 1px solid rgba(89, 128, 166, 0.22);
  border-radius: 8px;
  background: rgba(2, 8, 12, 0.34);
}
.brief-shot-level-grid.is-empty {
  color: var(--vnt-text-faint);
  font: 800 9px/1.2 var(--vnt-font-mono);
}
.brief-shot-level-grid-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.brief-shot-level-grid-head b {
  color: var(--vnt-accent);
  font-size: 9px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.brief-shot-level-grid-head span {
  color: var(--vnt-text-faint);
  font: 800 8px/1.25 var(--vnt-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: right;
}
.brief-shot-level-grid-cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 3px;
}
.brief-shot-level-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px 2px 4px;
  border: 1px solid var(--vnt-border);
  border-radius: 5px;
  background: rgba(89, 128, 166, 0.10);
}
.brief-shot-level-cell b {
  color: var(--vnt-text-faint);
  font-size: 6.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
}
.brief-shot-level-cell i {
  font: 800 10.5px/1.1 var(--vnt-font-mono);
  font-style: normal;
  color: rgba(225, 250, 255, 0.92);
}
/* Batch C one-sheet: from 10 levels the schedule folds into two columns
   so a 19-level stack never splits across pages. */
.brief-360-sched-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  align-items: start;
}
.brief-360-sched {
  margin-top: 8px;
  padding: 8px 9px 9px;
  border: 1px solid rgba(89, 128, 166, 0.24);
  border-radius: 8px;
  background: rgba(2, 8, 12, 0.34);
}
.brief-360-sched-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 8px;
  color: var(--vnt-text-faint);
  font: 800 8px/1.3 var(--vnt-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.brief-360-sched-scroll {
  overflow-x: auto;
}
.brief-360-sched-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--vnt-font-mono);
}
.brief-360-sched-table th {
  padding: 3px 4px;
  border-bottom: 1px solid rgba(89, 128, 166, 0.5);
  color: var(--vnt-text-faint);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  /* Window headers wrap instead of forcing the table past the card edge —
     the PDF capture clips anything that overflows horizontally. */
  white-space: normal;
  line-height: 1.2;
  max-width: 56px;
}
.brief-360-sched-table th.brief-360-sched-floor,
.brief-360-sched-table th.brief-360-sched-h { white-space: nowrap; max-width: none; }
.brief-360-sched-table th.brief-360-sched-floor { text-align: left; }
.brief-360-sched-table th.brief-360-sched-h { text-align: right; }
.brief-360-win-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 50%;
  vertical-align: baseline;
}
.brief-360-sched-table td {
  padding: 3px 4px;
  text-align: center;
  white-space: nowrap;
}
.brief-360-sched-table tbody tr:nth-child(even) { background: rgba(97, 126, 232, 0.07); }
.brief-360-sched-table td.brief-360-sched-floor {
  text-align: left;
  color: var(--vnt-text-muted);
  font-size: 9.5px;
  font-weight: 800;
}
.brief-360-sched-table td.brief-360-sched-h {
  text-align: right;
  color: rgba(225, 250, 255, 0.95);
  font-size: 12px;
  font-weight: 800;
}
.brief-360-sched-cell {
  color: rgba(49, 71, 78, 0.9);
  font-size: 11px;
}
.brief-360-sched-cell.is-on {
  color: var(--vnt-accent);
  font-weight: 900;
}
.brief-360-sched-foot {
  margin-top: 7px;
  color: var(--vnt-text-faint);
  font-size: 8.5px;
  line-height: 1.35;
}
/* Schedule card: map sits beside the height matrix (like a client per-position
   page), not the 420px map-only tower a photo card would get. */
.brief-shot-instruction-grid .brief-shot-instruction-card.is-360-schedule {
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}
.brief-shot-instruction-card.is-360-schedule .brief-shot-visual-block {
  grid-template-rows: auto auto;
}
.brief-shot-instruction-card.is-360-schedule .brief-shot-visual-pair.is-map-only .brief-shot-map-mini {
  min-height: 200px;
}
@media (max-width: 720px) {
  .brief-shot-instruction-grid .brief-shot-instruction-card.is-360-schedule {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Building Stack: standard left-rail element (approved 2026-08-07 redesign).
   Stat row + segment stack render for any project; quiet empty state otherwise. */
#vntBuildingStackSection { margin: 0 0 10px; }
.vnt-stack-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 10px;
}
.vnt-stack-stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--vnt-border);
  border-radius: 6px;
  padding: 6px 8px;
  min-width: 0;
}
.vnt-stack-stat b {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--vnt-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vnt-stack-stat span {
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vnt-text-faint);
}
.vnt-add-segment-btn { width: 100%; margin-top: 8px; }

/* ---------- Editorial brief theme overrides ----------
   Scoped to exported brief pages only. Since the 2026-08-26 makeover these
   sit on the Drone Genius paper standard: paper ground, hairline plates,
   status inks (priority = bad ink), color reserved for view badges and
   window bars. The old RGB-split display treatment and dot grids are gone. */
.bd-page.brief-theme-editorial { position: relative; }
/* The old editorial dot-grid flourish is gone (makeover 2026-08-26): it
   collided with the cover's version stamp, and the DS decorates with
   registration ticks, not texture. */
/* The Capture standards band is gone (makeover batch B, 2026-08-26): its
   content became the inline-styled .brief-standards-footline every
   instructions page repeats. */
.brief-theme-editorial .brief-shot-instruction-card {
  background: #FFFFFF;
  border: 1px solid rgba(29, 31, 32, 0.22);
  border-left-width: 1px;
  box-shadow: none;
  color: #1d1f20;
}
.brief-theme-editorial .brief-shot-card-head b { color: #1d1f20; }
.brief-theme-editorial .brief-shot-instruction-card .brief-shot-visual-label { color: #8a8c8e; }
.brief-theme-editorial .brief-shot-notes,
.brief-theme-editorial .brief-shot-summary-note {
  background: #F2F4F3;
  border-color: #DDE2E1;
  color: #0E1116;
}
.brief-theme-editorial .brief-shot-notes b { color: #5A6470; }
.brief-theme-editorial .brief-shot-notes span { color: #0E1116; }
.brief-theme-editorial .brief-shot-summary-row {
  background: #FFFFFF;
  border-color: #DDE2E1;
}
/* Spec-grid cells wrap by default (html2canvas drops text-overflow:
   ellipsis, so nowrap would print values cut mid-word on export). */
/* Same ellipsis-less clipping in the capture-group rows, and here it cut
   pilot data: the 2-up grid gives a row ~223px, so the longest row printed
   "360 Stack · Ma" / "59-243 ft (" and lost the third stack note mid-word.
   A brief page is 216-210mm wide, so on export pages the rows take the full
   column width — every cell then fits on one line — and the note wraps
   instead of clipping. */
.brief-preview-page .brief-shot-summary-grid {
  grid-template-columns: minmax(0, 1fr);
}
.brief-preview-page .brief-shot-summary-row {
  grid-template-columns: 24px minmax(58px, 0.7fr) minmax(96px, 0.6fr) minmax(0, 1.2fr);
}
.brief-preview-page .brief-shot-summary-note {
  white-space: normal;
  overflow: visible;
}
.brief-theme-editorial .brief-360-sched {
  background: #F5F7F6;
  border-color: #DDE2E1;
}
.brief-theme-editorial .brief-360-sched-spec { color: #5A6470; }
.brief-theme-editorial .brief-360-sched-table th {
  color: #5A6470;
  border-bottom-color: #0E1116;
}
.brief-theme-editorial .brief-360-sched-table tbody tr:nth-child(even) { background: #EEF1F0; }
.brief-theme-editorial .brief-360-sched-table td.brief-360-sched-floor { color: #5A6470; }
.brief-theme-editorial .brief-360-sched-table td.brief-360-sched-h { color: #0E1116; }
.brief-theme-editorial .brief-360-sched-cell { color: #DDE2E1; }
.brief-theme-editorial .brief-360-sched-cell.is-on { color: #0E1116; }
.brief-theme-editorial .brief-360-sched-foot { color: #5A6470; }
.brief-theme-editorial .brief-day-sched-intro { color: #5A6470; }
.brief-theme-editorial .brief-day-sched thead th { color: #5A6470; border-bottom-color: #0E1116; }
.brief-theme-editorial .brief-day-sched-win td { border-bottom-color: #0E1116; }
.brief-theme-editorial .brief-day-sched-win b { color: #0E1116; }
.brief-theme-editorial .brief-day-sched-win.is-custom b { color: #ab4634; }
.brief-theme-editorial .brief-day-sched-range,
.brief-theme-editorial .brief-day-sched-batt,
.brief-theme-editorial .brief-day-sched-type,
.brief-theme-editorial .brief-day-sched-note { color: #5A6470; }
.brief-theme-editorial .brief-day-sched-row td { border-bottom-color: #E0E4E3; }
.brief-theme-editorial .brief-day-sched-heights { color: #0E1116; }
.brief-theme-editorial .brief-day-sched-row.is-priority td { background: #f6ebe8; }
.brief-theme-editorial .brief-day-sched-row.is-priority .brief-day-sched-heights,
.brief-theme-editorial .brief-day-sched-row.is-priority .brief-day-sched-note b { color: #ab4634; }
.brief-theme-editorial .brief-day-sched-badge { border-color: #FFFFFF; }
.brief-theme-editorial .brief-day-sched-row.is-priority .brief-day-sched-badge { box-shadow: 0 0 0 2px #ab4634; }
.brief-theme-editorial .brief-day-sched-foot { color: #5A6470; border-top-color: #0E1116; }
.brief-theme-editorial .brief-day-sched-foot b { color: #0E1116; }
.brief-theme-editorial .brief-priority-tag {
  border-color: #ab4634;
  background: transparent;
  color: #ab4634;
}
.brief-theme-editorial .brief-shot-instruction-card.is-priority .brief-shot-card-head b i {
  border-color: #ab4634;
  box-shadow: none;
}
.brief-theme-editorial .brief-3d-fallback,
.brief-theme-editorial .brief-shot-preview-mini { background: #E8ECEA; border-color: #DDE2E1; }
.brief-theme-editorial .brief-3d-missing-preview,
.brief-theme-editorial .brief-3d-missing-chip { color: #5A6470; background: #FAFBFA; border-color: #DDE2E1; }
/* The ivory panel fill above is right for a captured/empty preview but it also
   flattened the reference scenes: their sky-to-ground gradient is a 0-1-0 rule,
   so the HUD, mode pill and compass ended up floating on a cream field. Give
   the two scene minis their gradient back (the plates on top are dark by
   design and stay legible in print). */
.brief-theme-editorial .brief-shot-3d-fallback,
.brief-theme-editorial .brief-shot-360-viewer-mini {
  background:
    linear-gradient(180deg, #17314d 0%, #496f8b 54%, #89b5bf 71%, #30291f 71.5%, #0b0908 100%);
}

/* ---------- Day Schedule page: the brief-level timeline matrix ---------- */
.brief-day-sched-intro {
  margin: 2px 0 12px;
  color: var(--vnt-text-muted);
  font-size: 11.5px;
  line-height: 1.5;
  max-width: 72ch;
}
table.brief-day-sched {
  width: 100%;
  border-collapse: collapse;
}
.brief-day-sched thead th {
  padding: 4px 8px 6px;
  border-bottom: 1px solid rgba(89, 128, 166, 0.5);
  color: var(--vnt-text-faint);
  font: 800 9px/1.3 var(--vnt-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}
.brief-day-sched-win td {
  padding: 16px 8px 6px;
  border-bottom: 1px solid rgba(89, 128, 166, 0.5);
}
.brief-day-sched-win b {
  color: var(--vnt-text);
  font-size: 13px;
  margin-right: 10px;
}
.brief-day-sched-win.is-custom b { color: #ab4634; }
.brief-day-sched-range {
  color: var(--vnt-text-muted);
  font-family: var(--vnt-font-mono);
  font-size: 11px;
}
.brief-day-sched-batt {
  float: right;
  color: var(--vnt-text-faint);
  font-size: 10px;
  font-family: var(--vnt-font-mono);
}
/* Batch C: quantified per-window weather gate rides the window header. */
.brief-day-sched-wx {
  float: right;
  margin-right: 12px;
  padding: 1px 6px;
  border: 1px solid rgba(29, 31, 32, 0.28);
  color: #1d1f20;
  font: 700 8.5px/1.4 var(--vnt-font-mono);
  letter-spacing: 0.08em;
}
.brief-day-sched-row td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  vertical-align: top;
}
.brief-day-sched-row.is-priority td {
  background: #f6ebe8;
}
.brief-day-sched-row.is-priority .brief-day-sched-heights,
.brief-day-sched-row.is-priority .brief-day-sched-note b {
  color: #ab4634;
}
.brief-day-sched-badge {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  color: #fff;
  font: 900 11px/1 var(--vnt-font);
}
.brief-day-sched-row.is-priority .brief-day-sched-badge {
  box-shadow: 0 0 0 2px rgba(224, 82, 74, 0.55);
}
.brief-day-sched-type {
  margin-left: 7px;
  color: var(--vnt-text-faint);
  font: 800 8.5px/1.2 var(--vnt-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.brief-day-sched-heights {
  color: rgba(225, 250, 255, 0.95);
  font-family: var(--vnt-font-mono);
  font-size: 12px;
  font-weight: 700;
  /* Full height lists are the pilot contract — wrap, never clip. */
  white-space: normal;
  overflow-wrap: break-word;
}
.brief-day-sched-note {
  color: var(--vnt-text-muted);
  font-size: 11px;
  line-height: 1.4;
}
.brief-day-sched-note b { letter-spacing: 0.06em; }
.brief-day-sched-foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 9px;
  /* Clear the page QR badge (58px QR + card padding + 14px inset) so the
     right-aligned battery estimate never prints underneath it. */
  padding-right: 96px;
  border-top: 1px solid rgba(89, 128, 166, 0.5);
  color: var(--vnt-text-muted);
  font-size: 11px;
}
.brief-day-sched-foot b { color: var(--vnt-text); }

.vnt-planning-shell .tv-center-map.vnt-next-action {
  background-color: var(--vnt-bg) !important;
}
.vnt-planning-shell .tv-center-map.vnt-next-action::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(89, 128, 166, 0.58);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(89, 128, 166, 0.14), 0 0 32px rgba(89, 128, 166, 0.16);
  pointer-events: none;
  z-index: 620;
}
.vnt-map-flow-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 720;
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 10px;
  align-items: center;
  max-width: min(460px, calc(100% - 48px));
  padding: 9px 12px;
  border: 1px solid rgba(89, 128, 166, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--vnt-text);
  box-shadow: 0 18px 48px rgba(29, 31, 32, 0.18), inset 0 1px 0 rgba(255,255,255,0.05);
  transform: translateX(-50%);
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.vnt-map-flow-step {
  grid-row: span 2;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--vnt-accent);
  color: var(--vnt-panel-2);
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}
.vnt-map-flow-hint strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}
.vnt-map-flow-hint > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--vnt-text-muted);
  font-size: var(--vnt-fs-11);
}
.vnt-map-flow-hint.is-complete {
  opacity: 0.88;
}
.vnt-map-flow-hint.is-idle-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
}
.vnt-map-flow-hint.is-guest-step {
  border-color: rgba(89, 128, 166, 0.36);
  background: rgba(255, 255, 255, 0.94);
}
.vnt-map-flow-hint.is-placing-shot,
.vnt-map-flow-hint.is-setting-poi,
.vnt-map-flow-hint.is-setting-video,
.vnt-map-flow-hint.is-setting-drone {
  border-color: rgba(255, 209, 102, 0.42);
  box-shadow: 0 18px 48px rgba(29, 31, 32, 0.18), 0 0 28px rgba(255, 209, 102, 0.13);
}
.vnt-map-flow-hint.is-setting-poi .vnt-map-flow-step {
  background: #ffb454;
}
.vnt-map-flow-hint.is-setting-video .vnt-map-flow-step {
  background: #ff7b8f;
}
.vnt-map-flow-hint.is-setting-drone .vnt-map-flow-step {
  background: var(--vnt-accent-600);
}

.tv-parcel-draft-notice {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 721;
  max-width: min(360px, calc(100% - 36px));
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(247, 215, 116, 0.38);
  border-radius: 8px;
  background: rgba(16, 18, 18, 0.84);
  color: var(--vnt-text);
  box-shadow: 0 18px 48px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.05);
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tv-parcel-draft-notice strong {
  color: #f7d774;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tv-parcel-draft-notice span {
  color: var(--vnt-text-muted);
  font-size: var(--vnt-fs-11);
  line-height: 1.35;
}

/* Stack wrap — clean vertical list of segment rows */
.vnt-planning-shell .vnt-stack-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Segment row — prototype exact layout: 18px color bar | meta | right altitude */
.vnt-planning-shell .vnt-segment {
  display: grid;
  grid-template-columns: 64px 14px 1fr auto;
  align-items: stretch;
  gap: 10px;
  padding: 10px 10px 10px 8px;
  border-radius: var(--vnt-radius-sm);
  border: 1px solid var(--vnt-border);
  background: var(--vnt-bg-3);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.vnt-planning-shell .vnt-segment:hover {
  border-color: var(--vnt-border-2);
}
.vnt-planning-shell .vnt-segment.active {
  border-color: var(--vnt-accent);
  background: color-mix(in oklch, var(--vnt-accent) 8%, var(--vnt-bg-3));
}

/* When stacked (.vnt-stack-wrap), cards visually connect into one tower:
 * inner edges share borders, top card gets a crown / antenna, bottom card
 * gets a foundation / sidewalk line. */
.vnt-planning-shell .vnt-stack-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 14px;     /* space for the antenna spire on the top card */
  padding-bottom: 8px;
  position: relative;
}
.vnt-planning-shell .vnt-stack-wrap .vnt-segment {
  border-radius: 0;
  border-bottom: none;
}
.vnt-planning-shell .vnt-stack-wrap .vnt-segment.is-top {
  border-radius: var(--vnt-radius-sm) var(--vnt-radius-sm) 0 0;
}
.vnt-planning-shell .vnt-stack-wrap .vnt-segment.is-bottom {
  border-radius: 0 0 var(--vnt-radius-sm) var(--vnt-radius-sm);
  border-bottom: 1px solid var(--vnt-border);
  margin-bottom: 8px;
}
/* Foundation tick under the bottom card — sells the building base. */
.vnt-planning-shell .vnt-stack-wrap .vnt-segment.is-bottom::after {
  content: "0 ft";
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  height: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0 1px, transparent 1px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 8px, transparent 8px 16px);
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: var(--vnt-fs-10);
  color: var(--vnt-text-faint);
  padding-top: 3px;
  border-radius: 0 0 var(--vnt-radius-sm) var(--vnt-radius-sm);
}
/* Crown / antenna on the top card. */
.vnt-planning-shell .vnt-stack-wrap .vnt-segment.is-top::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 14px;
  width: 50px;
  height: 14px;
  background: linear-gradient(180deg, transparent 0 6px, var(--vnt-bg-3) 6px 100%);
  border-top: 1px solid rgba(255,255,255,0.18);
  border-left: 1px solid rgba(255,255,255,0.18);
  border-right: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px 4px 0 0;
}
.vnt-planning-shell .vnt-stack-wrap .vnt-segment.is-top::after {
  content: "";
  position: absolute;
  top: -22px;
  left: 36px;
  width: 2px;
  height: 12px;
  background: rgba(255,255,255,0.6);
  box-shadow: 0 0 6px rgba(92,203,216,0.55);
  border-radius: 2px;
}

/* ===== Per-segment FACADE — the actual "building slice" visual =====
 * Each segment card gets a 64px facade panel that renders type-specific
 * windows + decorations. When the stack of cards is read top-to-bottom,
 * you see the building you're authoring: parking stripes at the bottom,
 * residential window grid in the middle, pool deck on amenity, antenna
 * crown on rooftop, etc. */
.vnt-planning-shell .vnt-seg-facade {
  position: relative;
  width: 100%;
  min-height: 48px;
  align-self: center;
  border-radius: 3px;
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--vnt-seg-color, var(--vnt-accent, var(--vnt-accent))) 50%, white 0%) 0%,
      color-mix(in oklch, var(--vnt-seg-color, var(--vnt-accent, var(--vnt-accent))) 75%, black 4%) 100%);
  box-shadow: inset 0 0 0 1px rgba(29, 31, 32, 0.175), 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
  pointer-events: none;
}
.vnt-planning-shell .vnt-seg-facade-windows {
  position: absolute;
  inset: 0;
}
.vnt-planning-shell .vnt-seg-facade-floor {
  position: absolute;
  left: 6%;
  right: 6%;
  height: 1px;
  background: rgba(29, 31, 32, 0.16);
  pointer-events: none;
}
.vnt-planning-shell .vnt-seg-facade-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.vnt-planning-shell .vnt-seg-shot-band {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.70);
  box-shadow: 0 0 0 1px rgba(29, 31, 32, 0.21), 0 0 10px rgba(89, 128, 166, 0.24);
  z-index: 3;
}
.vnt-planning-shell .vnt-seg-shot-band::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--vnt-accent);
  border: 1px solid rgba(255, 255, 255, 0.94);
}
.vnt-planning-shell .vnt-seg-shot-band-360_photo::after {
  background: #bc4dca;
}
.vnt-planning-shell .vnt-seg-shot-band-video::after {
  background: #ff7b8f;
}
.vnt-planning-shell .vnt-seg-shot-band.active {
  height: 3px;
  background: var(--vnt-text);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.94), 0 0 16px rgba(89, 128, 166, 0.78);
}
.vnt-planning-shell .vnt-seg-current-marker {
  position: absolute;
  left: -2px;
  right: -2px;
  height: 0;
  border-top: 2px solid var(--vnt-accent-600);
  z-index: 4;
  filter: drop-shadow(0 0 8px rgba(89, 128, 166, 0.76));
}
.vnt-planning-shell .vnt-seg-current-marker span {
  position: absolute;
  right: 4px;
  top: -10px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--vnt-text);
  font: 800 9px/1 var(--vnt-font-mono);
  white-space: nowrap;
}
.vnt-planning-shell .vnt-segment.is-active-segment {
  border-color: rgba(89, 128, 166, 0.48);
  background:
    linear-gradient(90deg, rgba(89, 128, 166, 0.15), rgba(255, 255, 255, 0.94));
  box-shadow: 0 0 0 1px rgba(89, 128, 166, 0.16), 0 12px 30px rgba(89, 128, 166, 0.10);
}
.vnt-planning-shell .vnt-segment.is-active-segment .vnt-seg-facade {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    0 0 0 1px rgba(89, 128, 166, 0.42),
    0 0 18px rgba(89, 128, 166, 0.20);
}
.vnt-planning-shell .vnt-seg-shot-count {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(89, 128, 166, 0.24);
  background: rgba(89, 128, 166, 0.10);
  color: var(--vnt-accent-600);
  font: 800 9px/1 var(--vnt-font-mono);
  white-space: nowrap;
}
.vnt-planning-shell .vnt-seg-shot-count.is-empty {
  color: var(--vnt-text-faint);
  border-color: rgba(29, 31, 32, 0.07);
  background: rgba(255,255,255,0.03);
}

/* ----- Type-specific facade patterns ----- */

/* LOBBY — tall vertical glass + center entry doors */
.vnt-planning-shell .vnt-segment[data-segtype="lobby"] .vnt-seg-facade-windows {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.18) 0 6px,
      rgba(29, 31, 32, 0.09) 6px 8px);
}
.vnt-planning-shell .vnt-segment[data-segtype="lobby"] .vnt-seg-facade-deco::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 36%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.14)),
    rgba(29, 31, 32, 0.175);
  border: 1px solid rgba(29, 31, 32, 0.225);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

/* PARKING — horizontal slat openings (concrete decks) */
.vnt-planning-shell .vnt-segment[data-segtype="parking"] .vnt-seg-facade-windows {
  background-image:
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, 0.94) 0 3px,
      transparent 3px 12px);
}
.vnt-planning-shell .vnt-segment[data-segtype="parking"] .vnt-seg-facade {
  background: linear-gradient(180deg, #6f7680 0%, #4a5159 100%);
}

/* OFFICE — large rectangular curtain-wall windows */
.vnt-planning-shell .vnt-segment[data-segtype="office"] .vnt-seg-facade-windows {
  background-image:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.20) 0 7px,
      rgba(29, 31, 32, 0.1) 7px 11px),
    repeating-linear-gradient(90deg,
      rgba(29, 31, 32, 0.15) 0 1.5px,
      transparent 1.5px 14px);
}

/* RESIDENTIAL — tighter window grid + thin balcony bands */
.vnt-planning-shell .vnt-segment[data-segtype="residential"] .vnt-seg-facade-windows {
  background-image:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.18) 0 5px,
      rgba(29, 31, 32, 0.11) 5px 9px),
    repeating-linear-gradient(90deg,
      rgba(29, 31, 32, 0.15) 0 1px,
      transparent 1px 8px);
}

/* AMENITY / POOL DECK — pool wave at bottom + cabana railing on top */
.vnt-planning-shell .vnt-segment[data-segtype="amenity"] .vnt-seg-facade {
  background: linear-gradient(180deg, #6dc7e8 0%, #2f8fb6 60%, #1a5d7d 100%);
}
.vnt-planning-shell .vnt-segment[data-segtype="amenity"] .vnt-seg-facade-windows {
  background-image:
    /* pool wave at bottom 40% */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.30) 0 6px,
      transparent 6px 12px);
  background-size: 100% 38%;
  background-position: bottom;
  background-repeat: no-repeat;
}
.vnt-planning-shell .vnt-segment[data-segtype="amenity"] .vnt-seg-facade-deco::before {
  /* railing across the top — cabana / pool deck guardrail */
  content: "";
  position: absolute;
  top: 8%;
  left: 4%;
  right: 4%;
  height: 8%;
  background:
    repeating-linear-gradient(90deg,
      rgba(29, 31, 32, 0.25) 0 2px,
      transparent 2px 10px),
    rgba(255,255,255,0.18);
  border-top: 1px solid rgba(255,255,255,0.4);
  border-bottom: 1px solid rgba(29, 31, 32, 0.2);
}

/* PENTHOUSE — large floor-to-ceiling windows + terrace railing */
.vnt-planning-shell .vnt-segment[data-segtype="penthouse"] .vnt-seg-facade-windows {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.30) 0 14px,
      rgba(29, 31, 32, 0.15) 14px 16px);
}
.vnt-planning-shell .vnt-segment[data-segtype="penthouse"] .vnt-seg-facade-deco::before {
  /* terrace railing along bottom */
  content: "";
  position: absolute;
  bottom: 10%;
  left: 4%;
  right: 4%;
  height: 6%;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.55) 0 2px,
      transparent 2px 8px);
}

/* MECHANICAL — louvered horizontal slats */
.vnt-planning-shell .vnt-segment[data-segtype="mechanical"] .vnt-seg-facade {
  background: linear-gradient(180deg, #4a5159 0%, var(--vnt-panel-2) 100%);
}
.vnt-planning-shell .vnt-segment[data-segtype="mechanical"] .vnt-seg-facade-windows {
  background-image:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0.16) 0 2px,
      transparent 2px 5px,
      rgba(29, 31, 32, 0.225) 5px 6px);
}

/* ROOFTOP — parapet + antenna spire */
.vnt-planning-shell .vnt-segment[data-segtype="rooftop"] .vnt-seg-facade {
  background: linear-gradient(180deg, #5a626c 0%, #3f454d 100%);
}
.vnt-planning-shell .vnt-segment[data-segtype="rooftop"] .vnt-seg-facade-deco::before {
  /* antenna mast */
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 18px;
  background: rgba(255,255,255,0.6);
  box-shadow: 0 0 4px rgba(255,255,255,0.4);
}
.vnt-planning-shell .vnt-segment[data-segtype="rooftop"] .vnt-seg-facade-deco::after {
  /* parapet wall along top */
  content: "";
  position: absolute;
  top: 0;
  left: 4%;
  right: 4%;
  height: 14%;
  background: rgba(29, 31, 32, 0.225);
  border-bottom: 1px solid rgba(255,255,255,0.25);
}

/* RETAIL — big shopfront windows + signage band */
.vnt-planning-shell .vnt-segment[data-segtype="retail"] .vnt-seg-facade-windows {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.30) 0 18px,
      rgba(29, 31, 32, 0.225) 18px 20px);
}
.vnt-planning-shell .vnt-segment[data-segtype="retail"] .vnt-seg-facade-deco::before {
  /* signage band across the top */
  content: "";
  position: absolute;
  top: 12%;
  left: 0;
  right: 0;
  height: 18%;
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.vnt-planning-shell .vnt-segment[data-segtype="retail"] .vnt-seg-facade-deco::after {
  content: "";
  position: absolute;
  top: 16%;
  left: 18%;
  right: 18%;
  height: 8%;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.45) 0 4px,
      transparent 4px 9px);
}

/* The color bar lives inside the 18px track, centered */
.vnt-planning-shell .vnt-segment .vnt-seg-bar {
  width: 6px;
  height: 34px;
  border-radius: 2px;
  background: var(--vnt-seg-color, var(--vnt-accent));
  justify-self: center;
}

/* Meta column: name row + floors/height inline controls */
.vnt-planning-shell .vnt-segment .vnt-seg-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.vnt-planning-shell .vnt-seg-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.vnt-planning-shell .vnt-seg-name {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 4px;
  color: var(--vnt-text);
  font-weight: 600;
  font-size: var(--vnt-fs-13);
  font-family: "Barlow", sans-serif;
  min-width: 0;
  outline: none;
}
.vnt-planning-shell .vnt-seg-name:hover {
  background: rgba(255,255,255,0.03);
}
.vnt-planning-shell .vnt-seg-name:focus {
  background: var(--vnt-bg);
  border-color: var(--vnt-accent);
}
.vnt-planning-shell .vnt-seg-delete {
  background: none;
  border: none;
  color: var(--vnt-text-faint);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.vnt-planning-shell .vnt-segment:hover .vnt-seg-delete { opacity: 1; }
.vnt-planning-shell .vnt-seg-delete:hover { color: var(--vnt-danger); }

/* Sub line — inline selector + stepper pills in mono */
.vnt-planning-shell .vnt-seg-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: var(--vnt-fs-11);
  color: var(--vnt-text-dim);
  flex-wrap: wrap;
}
.vnt-planning-shell .vnt-seg-sub-sep {
  color: var(--vnt-text-faint);
}
.vnt-planning-shell .vnt-seg-type-inline {
  background: transparent;
  border: none;
  color: var(--vnt-text-dim);
  font-family: var(--vnt-font-mono);
  font-size: var(--vnt-fs-11);
  padding: 0;
  cursor: pointer;
  max-width: 80px;
  outline: none;
}
.vnt-planning-shell .vnt-seg-type-inline:focus {
  color: var(--vnt-accent);
}
.vnt-planning-shell .vnt-seg-type-inline option {
  background: var(--vnt-panel);
  color: var(--vnt-text);
}

/* Inline steppers — tiny, flush-row, reveal +/- on hover */
.vnt-planning-shell .vnt-seg-floors-ctrl,
.vnt-planning-shell .vnt-seg-fh-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.vnt-planning-shell .vnt-ctrl-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--vnt-text-faint);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
}
.vnt-planning-shell .vnt-segment:hover .vnt-ctrl-btn { opacity: 1; }
.vnt-planning-shell .vnt-ctrl-btn:hover {
  color: var(--vnt-text);
  border-color: var(--vnt-border);
  background: var(--vnt-bg);
}
.vnt-planning-shell .vnt-ctrl-val {
  color: var(--vnt-text-dim);
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: var(--vnt-fs-11);
  min-width: 42px;
  text-align: center;
}
.vnt-planning-shell .vnt-ctrl-val b {
  color: var(--vnt-text);
  font-weight: 600;
}

/* Inline editable input inside a stepper readout — looks like the span,
 * but lets the user type precise values like 11.2 ft. */
.vnt-planning-shell .vnt-ctrl-input {
  width: 36px;
  padding: 1px 2px;
  margin: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--vnt-text);
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: var(--vnt-fs-11);
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}
.vnt-planning-shell .vnt-ctrl-input::-webkit-inner-spin-button,
.vnt-planning-shell .vnt-ctrl-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.vnt-planning-shell .vnt-ctrl-input:hover {
  border-color: var(--vnt-border-2);
}
.vnt-planning-shell .vnt-ctrl-input:focus {
  outline: none;
  border-color: var(--vnt-accent, var(--vnt-accent));
  background: rgba(29, 31, 32, 0.125);
}

/* Right column — cumulative AGL ft */
.vnt-planning-shell .vnt-segment .vnt-seg-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: 11px;
  color: var(--vnt-text-dim);
  text-align: right;
  white-space: nowrap;
}
.vnt-planning-shell .vnt-segment .vnt-seg-right b {
  font-size: 13px;
  color: var(--vnt-text);
  font-weight: 500;
  line-height: 1.1;
}
.vnt-planning-shell .vnt-segment .vnt-seg-right .vnt-unit {
  font-size: 10px;
  color: var(--vnt-text-faint);
  font-weight: 400;
}
.vnt-planning-shell .vnt-segment .vnt-seg-from {
  font-size: var(--vnt-fs-11);
  color: var(--vnt-text-faint);
  line-height: 1.2;
}

/* Building summary row — collapse the legacy 4-stat into prototype 4-col grid */
.vnt-planning-shell .tv-building-summary {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1px !important;
  background: var(--vnt-border) !important;
  border: 1px solid var(--vnt-border) !important;
  border-radius: var(--vnt-radius-sm) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
}
.vnt-planning-shell .tv-bldg-stat {
  background: var(--vnt-bg-3) !important;
  padding: 7px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  border: none !important;
  border-radius: 0 !important;
  gap: 2px !important;
}
.vnt-planning-shell .tv-bldg-stat label {
  font-size: 10px !important;
  color: var(--vnt-text-faint) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-weight: 800 !important;
  font-family: var(--vnt-font-mono) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.vnt-planning-shell .tv-bldg-stat-val {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.vnt-planning-shell .tv-bldg-stat-val {
  font-family: var(--vnt-font-mono) !important;
  font-feature-settings: "tnum" 1, "zero" 1 !important;
  font-size: 13px !important;
  color: var(--vnt-text) !important;
  font-weight: 500 !important;
}
.vnt-planning-shell .tv-bldg-height-input {
  background: transparent !important;
  border: none !important;
  color: var(--vnt-text) !important;
  font-family: var(--vnt-font-mono) !important;
  font-size: 13px !important;
  width: 42px !important;
  padding: 0 !important;
  outline: none !important;
}

/* Building Stack / Shot List section headers — prototype look */
.vnt-planning-shell .tv-segments-panel h3,
.vnt-planning-shell .tv-pins-panel h3 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--vnt-text-faint) !important;
  font-family: var(--vnt-font-mono) !important;
  margin-bottom: 10px !important;
}
.vnt-planning-shell .vnt-section-identifier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 10px 9px;
  border: 1px solid rgba(89, 128, 166, 0.28);
  border-left: 3px solid var(--vnt-accent);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(89, 128, 166, 0.13), rgba(255, 209, 102, 0.06)),
    rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.vnt-planning-shell .vnt-section-identifier strong {
  display: block;
  color: var(--vnt-text);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.1;
}
.vnt-planning-shell .vnt-section-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--vnt-accent);
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}
.vnt-planning-shell .vnt-section-helper {
  flex: 0 0 auto;
  border: 1px solid rgba(29, 31, 32, 0.1);
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(29, 31, 32, 0.21);
  color: var(--vnt-text-dim);
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
.vnt-planning-shell .vnt-section-subcopy {
  margin: -2px 2px 8px;
  color: var(--vnt-text-muted);
  font-size: 11px;
  line-height: 1.35;
}
.vnt-planning-shell .vnt-shot-type-section {
  padding-top: 0;
}

/* Address block — prototype input + coord subline */
.vnt-planning-shell .tv-project-header {
  transition: padding 160ms ease, border-color 160ms ease, background 160ms ease;
}
.vnt-planning-shell .tv-project-header.vnt-site-compact {
  padding: 10px 10px 8px !important;
  background: rgba(255, 255, 255, 0.94);
}
.vnt-planning-shell .tv-project-header.vnt-site-compact .tv-page-title {
  min-height: 20px !important;
  margin: 3px 0 5px !important;
  font-size: 17px !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vnt-planning-shell .tv-project-address {
  display: grid !important;
  grid-template-columns: 14px 1fr !important;
  gap: 6px !important;
  align-items: center !important;
  background: var(--vnt-bg-3) !important;
  border: 1px solid var(--vnt-border) !important;
  border-radius: var(--vnt-radius-sm) !important;
  padding: 6px 8px !important;
}
.vnt-planning-shell .tv-project-address #tvGeocode {
  grid-column: 2 !important;
  justify-self: start;
  padding: 3px 8px !important;
  font-size: 11px !important;
  margin-top: 4px;
}
.vnt-planning-shell .tv-project-address .tv-addr-suggestions {
  grid-column: 1 / -1 !important;
}
.vnt-planning-shell .tv-project-address:focus-within {
  border-color: var(--vnt-accent);
}
.vnt-planning-shell .tv-project-header.vnt-site-compact .tv-project-address {
  grid-template-columns: 14px minmax(0, 1fr) auto !important;
  padding: 4px 6px !important;
  gap: 5px !important;
  background: rgba(255, 255, 255, 0.94) !important;
}
.vnt-planning-shell .tv-project-header.vnt-site-compact .tv-project-address #tvGeocode {
  grid-column: 3 !important;
  justify-self: end;
  margin-top: 0 !important;
  padding: 2px 7px !important;
  min-height: 22px !important;
  font-size: var(--vnt-fs-11) !important;
}
.vnt-planning-shell .tv-project-header.vnt-site-compact .tv-project-address .tv-addr-suggestions {
  grid-column: 1 / -1 !important;
}
.vnt-planning-shell .tv-address-icon {
  color: var(--vnt-accent);
  flex-shrink: 0;
}
.vnt-planning-shell .tv-address-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-size: var(--vnt-fs-13) !important;
  min-width: 120px;
}
.vnt-planning-shell .tv-project-header.vnt-site-compact .tv-address-input {
  min-width: 0 !important;
  font-size: var(--vnt-fs-12) !important;
  text-overflow: ellipsis;
}

/* Project name serif — keep but refine */
.vnt-planning-shell .tv-page-title {
  font-family: "Instrument Serif", serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: var(--vnt-text) !important;
  margin: 6px 0 2px !important;
}
/* VISUAL POLISH #2: Gradient color bars + stack connector line
   The stack connector is a 2px line under all segments implying a continuous building */
.vnt-planning-shell .vnt-stack-wrap {
  position: relative;
}
.vnt-planning-shell .vnt-stack-wrap::before {
  content: "";
  position: absolute;
  left: 19px;   /* aligns to middle of 18px color-bar track + 10px padding = 19px */
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--vnt-border-2);
  z-index: 0;
  border-radius: 1px;
}
.vnt-planning-shell .vnt-segment {
  position: relative;
  z-index: 1;
}
.vnt-planning-shell .vnt-segment .vnt-seg-bar {
  background: linear-gradient(180deg,
    var(--vnt-seg-color, var(--vnt-accent)) 0%,
    color-mix(in oklch, var(--vnt-seg-color, var(--vnt-accent)) 82%, #000) 100%);
  box-shadow: 0 0 0 2px var(--vnt-bg-3);
}
.vnt-planning-shell .vnt-segment.active .vnt-seg-bar {
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--vnt-accent) 8%, var(--vnt-bg-3)),
              0 0 10px -2px var(--vnt-seg-color, var(--vnt-accent));
}

/* VISUAL POLISH #7: Generate Brief CTA pulsing accent shadow when ready */
.vnt-planning-shell .vnt-big-cta:not(.locked) {
  animation: vnt-cta-pulse 2.4s ease-in-out infinite;
}
@keyframes vnt-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--vnt-accent) 45%, transparent); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}
.vnt-planning-shell .vnt-big-cta:not(.locked):hover {
  transform: translateY(-1px);
  animation-play-state: paused;
  box-shadow: 0 4px 20px -4px var(--vnt-accent);
}
.vnt-planning-shell .vnt-big-cta:not(.locked):active {
  transform: scale(0.98);
  transition: transform 100ms ease;
}

/* VISUAL POLISH #6: Flight-minutes pill colored by range */
.vnt-planning-shell .vnt-pill.vnt-flight-ok { color: var(--vnt-success); border-color: color-mix(in oklch, var(--vnt-success) 40%, transparent); }
.vnt-planning-shell .vnt-pill.vnt-flight-warn { color: var(--vnt-accent-2); border-color: color-mix(in oklch, var(--vnt-accent-2) 40%, transparent); }
.vnt-planning-shell .vnt-pill.vnt-flight-err { color: var(--vnt-danger); border-color: color-mix(in oklch, var(--vnt-danger) 40%, transparent); }

/* Pulse animation for pill value changes */
@keyframes vnt-pill-flash {
  0%   { background: color-mix(in oklch, var(--vnt-accent) 20%, var(--vnt-chip)); }
  100% { background: var(--vnt-chip); }
}
.vnt-planning-shell .vnt-pill.vnt-pill-flash {
  animation: vnt-pill-flash 400ms ease;
}

/* VISUAL POLISH #3: Shot list timeline feel — accent-2 left bar on TOD groups */
.vnt-planning-shell .tv-pin-list .tv-time-group {
  position: relative;
  padding-left: 10px;
}
.vnt-planning-shell .tv-pin-list .tv-time-group::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--vnt-accent-2);
  border-radius: 1px;
  opacity: 0.5;
}
/* Saved / unsaved shot markers — 4px dot far right of each shot row */
.vnt-planning-shell .tv-ht-row::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--vnt-accent);
  margin-left: 4px;
  flex-shrink: 0;
}
.vnt-planning-shell .tv-ht-row:not([data-saved="true"])::after {
  background: transparent;
  border: 1px solid var(--vnt-text-faint);
}
.vnt-planning-shell .tv-ht-row.active::after {
  box-shadow: 0 0 6px var(--vnt-accent);
}

/* Active shot row glow (VP #3) */
.vnt-planning-shell .tv-ht-row.active {
  box-shadow: 0 0 0 1px var(--vnt-accent), 0 0 12px -4px var(--vnt-accent);
}

/* VISUAL POLISH #10: Empty state dashed placeholders */
.vnt-planning-shell .tv-no-building {
  border: 1px dashed var(--vnt-border-2);
  border-radius: var(--vnt-radius-sm);
  padding: 20px;
  color: var(--vnt-text-faint);
  text-align: center;
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.02em;
}
.vnt-planning-shell .tv-pin-list:empty::before {
  content: "";
  display: none;
}

/* ============================================================
   Right panel — style existing controls to match prototype
   ============================================================ */

/* Shot Type compact selector — rows consume the shared seg recipe
   (Seg component block by .tv-tod-grid); only the 3-up grid, the
   primary-switch sizing, and the saturated active fill live here. */
.vnt-planning-shell #tvShotTypePills {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
.vnt-planning-shell #tvShotTypePills .tv-pill {
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: var(--vnt-radius);
  font-size: var(--vnt-fs-12);
  font-weight: 750;
}
/* The panel's primary switch earns the one saturated fill: accent bg +
   dark text. Identity stays in the dot — one accent, never per-type
   fills. !important + id specificity outranks the generic pill-group
   active tint below. */
.vnt-planning-shell #tvShotTypePills .tv-pill.active {
  background: var(--vnt-accent) !important;
  border-color: var(--vnt-accent) !important;
  color: var(--vnt-bg) !important;
}
.vnt-planning-shell #tvShotTypePills .tv-pill.active .tv-shot-type-dot {
  background: var(--vnt-bg);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--vnt-bg) 22%, transparent);
}
.vnt-planning-shell #tvShotTypePills .tv-shot-type-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--vnt-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--vnt-accent) 16%, transparent);
  flex: 0 0 auto;
}
/* One selection color for every generic pill toggle in the planner
   (Aim at POI / Manual Heading, Track POI / Fixed Heading, focal, move). */
.vnt-planning-shell .tv-pill-group .tv-pill.active {
  background: color-mix(in oklch, var(--vnt-accent) 14%, var(--vnt-bg-3)) !important;
  border-color: var(--vnt-accent) !important;
  color: var(--vnt-accent) !important;
}
.vnt-planning-shell #tvShotTypePills .tv-shot-type-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vnt-planning-shell .tv-tod-section {
  position: relative;
  z-index: 16;
  margin-bottom: 10px;
}
/* Time Windows header: standard section-title kicker + live summary text,
   the one header recipe shared by the photo/360 panel sections. */
.vnt-planning-shell .tv-tod-inline-header {
  min-height: 28px;
  margin-bottom: 6px;
  padding: 0 2px;
  color: var(--vnt-text);
}
.vnt-planning-shell .tv-tod-toggle-kicker {
  color: var(--vnt-text-dim);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Generalized live-summary slot for any .vnt-menu-title header (Time
   Windows, Drone Camera Height, Photo Camera, Capture Floors). */
.vnt-planning-shell .vnt-menu-summary {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--vnt-accent);
  font-family: var(--vnt-font-mono);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}
/* Time Windows seg rows: the base .tv-tod-* rules ARE the design now
   (compact two-state rows, no gradients, no animation) — no shell
   overrides needed beyond the section header above. */
.vnt-planning-shell .tv-shot-notes-box {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
.vnt-planning-shell .tv-shot-priority-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 8px;
  cursor: pointer;
  user-select: none;
}
.vnt-planning-shell .tv-shot-priority-row input[type="checkbox"] {
  accent-color: #e0524a;
  width: 14px;
  height: 14px;
  margin: 0;
}
.vnt-planning-shell .tv-shot-priority-label {
  color: var(--vnt-text);
  font-size: 12px;
  font-weight: 700;
}
.vnt-planning-shell .tv-shot-priority-hint {
  color: var(--vnt-text-faint);
  font-size: 10px;
  letter-spacing: 0.03em;
}
.vnt-planning-shell .tv-shot-notes-input {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  border-radius: 8px;
  border: 1px solid var(--vnt-border);
  background: rgba(255, 255, 255, 0.94);
  color: var(--vnt-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 1.45;
  padding: 10px 11px;
}
.vnt-planning-shell .tv-shot-notes-input:focus {
  border-color: var(--vnt-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(89, 128, 166,0.14);
}
.vnt-planning-shell .tv-shot-notes-input::placeholder {
  color: var(--vnt-text-faint);
}
.vnt-planning-shell .tv-shot-notes-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  color: var(--vnt-text-faint);
  font-size: 10px;
  line-height: 1.3;
}
.vnt-planning-shell .tv-shot-notes-meta span:last-child {
  flex: 0 0 auto;
  font-family: var(--vnt-font-mono);
  color: var(--vnt-text-dim);
}
/* Control group labels — quieter than section titles so field names and
   section heads stop sharing one font spec. */
.vnt-planning-shell .tv-control-group > label {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--vnt-text-faint) !important;
  font-family: inherit !important;
  margin-bottom: 6px !important;
  display: block;
}
/* Section titles (prototype .field-group-title): uppercase mono kicker */
.vnt-planning-shell .tv-slider-box-title,
.vnt-planning-shell .tv-framing-section-title {
  font-size: var(--vnt-fs-10);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vnt-text-dim);
  font-family: var(--vnt-font-mono);
  margin-bottom: 6px;
  display: block;
}

/* Slider box — tighten to prototype card look */
.vnt-planning-shell .tv-slider-box {
  background: var(--vnt-bg-3) !important;
  border: 1px solid var(--vnt-border) !important;
  border-radius: var(--vnt-radius-sm) !important;
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
}
.vnt-planning-shell .tv-framing-positioning-box {
  padding: 0 !important;
  overflow: hidden;
}
.vnt-planning-shell .tv-framing-positioning-box > .tv-slider-box-title {
  display: flex;
  align-items: center;
  min-height: 36px;
  margin: 0 !important;
  padding: 10px 12px 8px !important;
  border-bottom: 1px solid rgba(29, 31, 32, 0.08);
}
.vnt-planning-shell .tv-framing-section {
  padding: 10px 12px;
  border-top: 1px solid rgba(29, 31, 32, 0.06);
}
.vnt-planning-shell .tv-framing-positioning-box > .tv-slider-box-title + .tv-framing-section {
  border-top: 0;
}
.vnt-planning-shell .tv-framing-section-title {
  margin-bottom: 8px;
  color: var(--vnt-text-dim);
}
.vnt-planning-shell .tv-framing-section .tv-control-group:last-child {
  margin-bottom: 0;
}
.vnt-planning-shell .vnt-menu-title {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.vnt-planning-shell .vnt-menu-title::after {
  content: "\25BE";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(29, 31, 32, 0.12);
  color: var(--vnt-accent);
  font-size: 12px;
  line-height: 1;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.vnt-planning-shell .vnt-menu-title:hover::after {
  background: rgba(89, 128, 166, 0.11);
  border-color: rgba(89, 128, 166, 0.42);
}
.vnt-planning-shell [data-menu-key].is-collapsed > .vnt-menu-title::after {
  transform: rotate(-90deg);
}
.vnt-planning-shell .vnt-collapsible-menu.is-collapsed > :not(.vnt-menu-title) {
  display: none !important;
}
.vnt-planning-shell #vntShotsSection {
  margin: 12px 10px 12px;
  padding: 12px;
  width: auto;
  max-width: calc(100% - 20px);
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(63, 122, 88, 0.48);
  border-left: 3px solid var(--vnt-success);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(63, 122, 88, 0.11), rgba(89, 128, 166, 0.045)),
    rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(63, 122, 88, 0.04);
}
.vnt-planning-shell #vntShotsSection.is-collapsed .vnt-shot-list-body {
  display: none !important;
}
.vnt-planning-shell #vntShotsSection .vnt-shot-list-title {
  margin-bottom: 10px;
  border-color: rgba(63, 122, 88, 0.38);
  border-left-color: var(--vnt-success);
  background:
    linear-gradient(90deg, rgba(63, 122, 88, 0.14), rgba(89, 128, 166, 0.055)),
    rgba(255, 255, 255, 0.94);
}
.vnt-planning-shell #vntShotsSection .vnt-shot-list-title::after {
  color: var(--vnt-success);
  border-color: rgba(63, 122, 88, 0.36);
}
.vnt-planning-shell #vntShotsSection.is-collapsed .vnt-shot-list-title {
  margin-bottom: 0;
}
.vnt-planning-shell .vnt-shot-list-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}

.vnt-planning-shell .tv-left-panel,
.vnt-planning-shell .tv-left-panel * {
  box-sizing: border-box;
}

.vnt-planning-shell .tv-left-panel {
  min-width: 0;
  overflow-x: clip;
}

.vnt-planning-shell #vntShotsSection {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.vnt-planning-shell .vnt-section-subcopy,
.vnt-planning-shell .vnt-shot-list-body,
.vnt-planning-shell .tv-time-group,
.vnt-planning-shell .tv-time-body,
.vnt-planning-shell .tv-pin-row,
.vnt-planning-shell .tv-pin-detail {
  max-width: 100%;
  min-width: 0;
  /* clip, not hidden: hidden would turn these into scroll containers and
     break the sticky sequence headers inside #tvPinList. */
  overflow: clip;
}

.vnt-planning-shell .vnt-section-subcopy {
  overflow-wrap: anywhere;
}

.vnt-planning-shell .tv-time-header,
.vnt-planning-shell .tv-pin-summary,
.vnt-planning-shell .tv-ht-row {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.vnt-planning-shell .tv-time-header {
  display: flex;
  align-items: center;
  gap: 7px;
}

.vnt-planning-shell .tv-time-header span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vnt-planning-shell .tv-time-count {
  flex: 0 0 auto;
}

.vnt-planning-shell .tv-pin-summary > * {
  min-width: 0;
}

.vnt-planning-shell .tv-pin-num,
.vnt-planning-shell .tv-pin-expand-arrow {
  flex: 0 0 auto;
}

.vnt-planning-shell .tv-pin-type,
.vnt-planning-shell .tv-pin-ht-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vnt-planning-shell .tv-pin-type {
  flex: 1 1 auto;
}

.vnt-planning-shell .tv-pin-ht-summary {
  flex: 0 1 72px;
  text-align: right;
}

.vnt-planning-shell .tv-pin-detail {
  padding: 2px 6px 4px 16px;
}

.vnt-planning-shell .tv-ht-row {
  gap: 6px;
  overflow: hidden;
}

.vnt-planning-shell .tv-ht-row > * {
  min-width: 0;
}

.vnt-planning-shell .tv-ht-row .shot-thumbnail-sm {
  flex: 0 0 34px;
  width: 34px;
  height: 28px;
}

.vnt-planning-shell .tv-ht-label-id {
  flex: 0 0 22px;
  min-width: 0 !important;
}

.vnt-planning-shell .tv-ht-elev {
  flex: 0 1 54px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vnt-planning-shell .tv-ht-label {
  flex: 1 1 42px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Containment without a width cap: .tv-ht-row is a grid and the status chip
   spans the two right-hand columns, so the old 72px cap only clipped "NEEDS
   PREVIEW" mid-word ("NEEDS PREVI") past the chip background and the row
   border. Stay inside the rail via the row width, ellipsizing if it ever
   gets narrower than the word. */
.vnt-planning-shell .tv-ht-row .vnt-shot-status {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vnt-planning-shell .tv-pin-delete-single {
  flex: 0 0 16px;
}

.vnt-planning-shell #tvPinList {
  max-width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 240px;
  max-height: min(70vh, 880px);
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.vnt-planning-shell #tvPinList .tv-time-body,
.vnt-planning-shell #tvPinList .tv-pin-detail {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.vnt-planning-shell #tvPinList .tv-time-body {
  overflow-y: visible;
}

/* Expanded 360 stacks flow in the single #tvPinList scroll — no nested
   scrollbar. The old min(42vh, 460px) inner cap made long level ladders a
   tiny scroll-within-a-scroll. */

/* Sticky plan-sequence headers: the time-of-day header pins to the top of
   the shot-list scroll and the position summary pins just under it, so a
   long 360 ladder always shows which stack you are scrolling through. */
.vnt-planning-shell #tvPinList .tv-time-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--vnt-panel);
  box-shadow: 0 6px 10px -8px rgba(255, 255, 255, 0.94);
}
.vnt-planning-shell #tvPinList .tv-pin-summary {
  position: sticky;
  /* --vnt-seq-head is set by tvApplyShotListScrollBounds from the measured
     header height — the header wraps to two lines on narrow rails. */
  top: var(--vnt-seq-head, 23px);
  z-index: 4;
  background: var(--vnt-panel);
}
.vnt-planning-shell #tvPinList .tv-pin-row.has-active .tv-pin-summary {
  background: color-mix(in oklch, var(--vnt-accent) 10%, var(--vnt-panel));
}
/* The opaque sticky backgrounds above outrank the generic hover rules —
   restore hover feedback on both clickable header rows. */
.vnt-planning-shell #tvPinList .tv-time-header:hover,
.vnt-planning-shell #tvPinList .tv-pin-summary:hover {
  background: var(--vnt-panel-2);
}

/* 360 level ladder rows: height is the payload, so the type label becomes
   "Level n" and the ft readout is the loudest text in the row. */
.vnt-planning-shell .tv-ht-row.is-360-level {
  padding: 3px 8px;
}
.vnt-planning-shell .tv-ht-row.is-360-level .tv-ht-label {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 10px;
}

.vnt-planning-shell #tvPinList::-webkit-scrollbar {
  width: 7px;
}

.vnt-planning-shell #tvPinList::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(29, 31, 32, 0.14);
}

.vnt-planning-shell #tvPinList::-webkit-scrollbar-track {
  background: rgba(29, 31, 32, 0.12);
  border-radius: 999px;
}

.vnt-planning-shell #tvDropPin,
.vnt-planning-shell .vnt-import-shot-csv-btn,
.vnt-planning-shell .vnt-workspace-save-status,
.vnt-planning-shell .vnt-advanced-export-panel,
.vnt-planning-shell .vnt-big-cta {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.vnt-planning-shell .tv-backplate-camera-section {
  background: rgba(89, 128, 166, 0.035);
}
.vnt-planning-shell .tv-composition-control {
  display: grid;
  gap: 9px;
}
.vnt-planning-shell .tv-composition-presets {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px !important;
}
.vnt-planning-shell .tv-composition-axis {
  display: grid;
  gap: 4px;
}
.vnt-planning-shell .tv-composition-axis-head,
.vnt-planning-shell .tv-composition-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--vnt-text-faint);
  font-family: var(--vnt-font-mono);
  font-size: 10px;
}
.vnt-planning-shell .tv-composition-axis-head span {
  color: var(--vnt-text-faint);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.vnt-planning-shell .tv-composition-axis-head output {
  color: var(--vnt-accent);
  font-weight: 800;
}
.vnt-planning-shell .tv-composition-slider-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.vnt-planning-shell .tv-composition-scale {
  opacity: 0.72;
}

/* Range inputs — prototype accent-color fill */
.vnt-planning-shell .tv-right-panel input[type="range"] {
  accent-color: var(--vnt-accent);
  width: 100%;
}

/* Text / number inputs + select dropdowns */
.vnt-planning-shell .tv-right-panel input[type="text"],
.vnt-planning-shell .tv-right-panel input[type="number"],
.vnt-planning-shell .tv-right-panel input[type="search"],
.vnt-planning-shell .tv-right-panel .form-input,
.vnt-planning-shell .tv-right-panel select {
  background: var(--vnt-bg) !important;
  border: 1px solid var(--vnt-border) !important;
  border-radius: var(--vnt-radius-sm) !important;
  color: var(--vnt-text) !important;
  font-family: var(--vnt-font-mono) !important;
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: 12px !important;
  padding: 6px 9px !important;
  outline: none;
}
.vnt-planning-shell .tv-right-panel input:focus,
.vnt-planning-shell .tv-right-panel select:focus {
  border-color: var(--vnt-accent) !important;
}

/* Value readouts in slider labels (0° / 150ft etc.) use mono */
.vnt-planning-shell #tvHeadingVal,
.vnt-planning-shell #tvTiltVal,
.vnt-planning-shell #tvFovVal {
  font-family: var(--vnt-font-mono) !important;
  font-feature-settings: "tnum" 1, "zero" 1 !important;
  font-size: 12px !important;
  color: var(--vnt-text) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Shot nav label — use mono for the "N of M · Segment - Floor X · Yft AGL" line */
.vnt-planning-shell .tv-pin-nav-label {
  font-family: var(--vnt-font-mono) !important;
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: 12px !important;
  color: var(--vnt-text) !important;
  padding: 8px 12px;
  user-select: none;
}
.vnt-planning-shell .tv-pin-nav-center {
  display: grid;
  gap: 4px;
  justify-items: center;
  min-width: 0;
  width: 100%;
}
.vnt-planning-shell .tv-360-viewer-level-nav {
  align-items: center;
  gap: 8px;
  width: min(100%, 268px);
  padding: 6px 8px;
  border: 1px solid rgba(89, 128, 166,0.26);
  border-radius: 12px;
  background: rgba(89, 128, 166,0.08);
  color: var(--vnt-accent);
  font-family: var(--vnt-font-mono);
  font-size: 12px;
  letter-spacing: 0;
  user-select: none;
}
.vnt-planning-shell .tv-360-viewer-level-nav .tv-360-level-btn {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 16px;
}
.vnt-planning-shell .tv-360-viewer-level-nav .tv-360-level-select {
  flex: 1 1 auto;
  width: auto;
  height: 34px;
  min-width: 0;
  padding: 0 30px 0 12px;
  border: 1px solid rgba(89, 128, 166,0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--vnt-text) !important;
  font-family: var(--vnt-font-mono) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
}
.vnt-planning-shell .tv-360-viewer-level-nav .tv-360-level-select:focus {
  border-color: rgba(89, 128, 166,0.72);
  box-shadow: 0 0 0 2px rgba(89, 128, 166,0.16);
}

/* Pin nav — top strip of the right panel */
.vnt-planning-shell .tv-pin-nav {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 6px !important;
  border-bottom: 1px solid var(--vnt-border);
  background: var(--vnt-panel);
}

/* Empty state — prototype dashed placeholder card */
.vnt-planning-shell #tvEmptyState {
  padding: 12px !important;
}
.vnt-planning-shell #tvEmptyState > div {
  border: 1px dashed var(--vnt-border-2);
  border-radius: var(--vnt-radius-sm);
}
.vnt-planning-shell .vnt-right-empty-card {
  padding: 18px 16px;
  color: var(--vnt-text-muted);
  background:
    linear-gradient(135deg, rgba(89, 128, 166, 0.06), transparent 40%),
    rgba(255, 255, 255, 0.94);
}
.vnt-planning-shell .vnt-right-empty-kicker {
  color: var(--vnt-accent);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vnt-planning-shell .vnt-right-empty-title {
  margin-top: 6px;
  color: var(--vnt-text);
  font-size: 15px;
  font-weight: 750;
}
.vnt-planning-shell .vnt-right-empty-body {
  margin-top: 6px;
  max-width: 27ch;
  color: var(--vnt-text-dim);
  font-size: 12px;
  line-height: 1.42;
}
/* VIEWFINDER HUD overlay (mirrors prototype .preview-3d.horizon-info/.compass) */
.vnt-planning-shell .vnt-hud {
  position: absolute;
  top: var(--vnt-preview-row-2);
  left: var(--vnt-preview-gutter);
  z-index: var(--vnt-z-overlay-data);
  pointer-events: none;
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 8px;
  padding: 6px 10px;
  border-radius: var(--vnt-radius-sm);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: var(--vnt-fs-11);
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.02em;
  min-width: 96px;
}
.vnt-planning-shell .vnt-hud-row { display: contents; }
.vnt-planning-shell .vnt-hud-k { color: var(--vnt-text-faint); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; }
.vnt-planning-shell .vnt-hud-v { color: var(--vnt-text); font-weight: 500; text-align: right; min-width: 48px; }
.vnt-planning-shell .vnt-hud-v.warn { color: var(--vnt-accent-2); }
.vnt-planning-shell .vnt-hud-v.err { color: var(--vnt-danger); }

.vnt-planning-shell .tv-cesium-viewer {
  height: var(--tv-preview-height, 180px) !important;
  min-height: 150px !important;
  max-height: 460px !important;
  position: sticky !important;
  top: 0;
  z-index: 920;
  background:
    linear-gradient(180deg, var(--vnt-panel-2) 0%, #3a5f7f 56%, #5a8fa8 88%, var(--vnt-panel-2) 88.01%, var(--vnt-panel-2) 100%);
  border-bottom: 1px solid var(--vnt-border);
}
.vnt-planning-shell .tv-cesium-viewer.is-floating {
  position: fixed !important;
  left: 16px;
  top: 96px;
  width: var(--tv-preview-width, 500px) !important;
  height: var(--tv-preview-height, 300px) !important;
  min-width: 280px !important;
  min-height: 170px !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 24px) !important;
  z-index: 1500;
  border: 1px solid rgba(29, 31, 32, 0.18);
  border-radius: 12px;
  box-shadow: 0 28px 90px rgba(29, 31, 32, 0.23), 0 0 0 1px rgba(89, 128, 166,0.10);
  overflow: hidden;
}
.vnt-planning-shell .tv-cesium-viewer.is-moving {
  box-shadow: 0 34px 110px rgba(255, 255, 255, 0.94), 0 0 0 2px rgba(89, 128, 166,0.26);
}
/* Split view: the preview lives in the center column above the map. The
   center panel is a flex column, so a fixed-height preview here pushes the
   map (flex:1) down; the right rail keeps its full height for controls. */
.tv-cesium-viewer.is-split {
  position: relative;
  flex: 0 0 auto;
  width: auto !important;
  height: var(--tv-preview-height, 300px) !important;
  min-height: 180px;
  border-bottom: 1px solid rgba(132,185,196,0.36);
  overflow: hidden;
  z-index: 5;
}
/* The map toolbar is absolutely positioned in the center panel; keep it
   pinned to the MAP, below the split preview. */
.tv-center-panel.has-split-preview .tv-map-toolbar {
  top: calc(var(--tv-split-offset, 300px) + 12px);
}
.vnt-planning-shell .tv-cesium-viewer.tv-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  z-index: var(--z-modal) !important;
}
.vnt-preview-titlebar {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: var(--vnt-z-overlay-chrome);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 5px 4px 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: rgba(246,252,255,0.94);
  background: rgba(29, 31, 32, 0.27);
  box-shadow: 0 10px 26px rgba(29, 31, 32, 0.125);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: move;
  user-select: none;
}
.vnt-preview-grip {
  display: grid;
  gap: 3px;
  padding: 0 2px;
  opacity: 0.62;
}
.vnt-preview-grip span {
  display: block;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.62);
}
.vnt-preview-titlebar strong {
  font-size: 10px;
  font-weight: 800;
  font-family: var(--vnt-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vnt-preview-dock-state {
  min-width: 0;
  flex: 1 1 auto;
  color: rgba(225,239,245,0.58);
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vnt-preview-mini-btn {
  flex: 0 0 auto;
  height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(89, 128, 166,0.34);
  border-radius: 999px;
  color: rgba(245,253,255,0.92);
  background: rgba(89, 128, 166,0.10);
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.vnt-preview-mini-btn:hover {
  border-color: rgba(89, 128, 166,0.72);
  background: rgba(89, 128, 166,0.20);
}
/* View-corridor toggle reads as pressed while the wedges are drawn. */
.vnt-preview-mini-btn.is-on {
  border-color: rgba(89, 128, 166,0.85);
  background: rgba(89, 128, 166,0.88);
  color: #041013;
}
.vnt-planning-shell .tv-fullscreen-btn {
  top: var(--vnt-preview-row-2);
  right: var(--vnt-preview-gutter);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 14px;
}
.vnt-planning-shell .tv-cesium-viewer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: soft-light;
  background: linear-gradient(180deg, rgba(117, 194, 255, 0.24), rgba(255,255,255,0.02) 48%, rgba(29, 31, 32, 0.05));
  transition: opacity 220ms ease, background 220ms ease;
}
.vnt-planning-shell .tv-cesium-viewer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 72% 82%, rgba(255,220,160,0.18), transparent 42%);
  z-index: 4;
}
.vnt-planning-shell .tv-cesium-viewer.vnt-3d-tod-sunset::before,
.vnt-planning-shell .tv-cesium-viewer.vnt-3d-tod-morning::before {
  opacity: 0.56;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 82% 34%, rgba(255, 178, 74, 0.58) 0 6%, rgba(255, 107, 86, 0.24) 17%, transparent 36%),
    linear-gradient(180deg, rgba(42, 69, 128, 0.20) 0%, rgba(255, 151, 85, 0.30) 54%, rgba(251, 91, 97, 0.24) 76%, rgba(29, 31, 32, 0.12) 100%);
}
.vnt-planning-shell .tv-cesium-viewer.vnt-3d-tod-twilight::before,
.vnt-planning-shell .tv-cesium-viewer.vnt-3d-tod-twilight-am::before {
  opacity: 0.44;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 78% 26%, rgba(142, 190, 255, 0.28), transparent 26%),
    linear-gradient(180deg, rgba(29, 31, 32, 0.21), rgba(51, 100, 153, 0.22) 56%, rgba(29, 31, 32, 0.17));
}
.vnt-planning-shell .tv-cesium-viewer.vnt-3d-tod-sunrise::before {
  opacity: 0.46;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 22% 38%, rgba(255, 213, 120, 0.46), transparent 25%),
    linear-gradient(180deg, rgba(84, 146, 207, 0.18), rgba(255, 198, 141, 0.26) 62%, rgba(29, 31, 32, 0.06));
}
.vnt-planning-shell .tv-cesium-viewer.vnt-3d-tod-midday::before {
  opacity: 0.16;
  mix-blend-mode: soft-light;
}
.vnt-3d-time-badge {
  position: absolute;
  top: var(--vnt-preview-row-3);
  right: var(--vnt-preview-gutter);
  z-index: var(--vnt-z-overlay-data);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  max-width: 148px;
  padding: 5px 8px;
  border: 1px solid var(--vnt-border);
  border-radius: 999px;
  color: var(--vnt-text);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  font-family: var(--vnt-font-mono);
}
.vnt-3d-time-badge .vnt-3d-time-symbol {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #071017;
  background: linear-gradient(135deg, #65e4ff, #ffd166);
  box-shadow: 0 0 18px rgba(255, 202, 102, 0.28);
  font-size: 12px;
  flex: 0 0 auto;
}
.vnt-3d-time-badge b,
.vnt-3d-time-badge em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vnt-3d-time-badge b {
  font-size: 10px;
  line-height: 1.05;
}
.vnt-3d-time-badge em {
  margin-top: 1px;
  font-size: 10px;
  color: rgba(225, 239, 245, 0.66);
  font-style: normal;
}
.vnt-preview-resize {
  position: absolute;
  z-index: var(--vnt-z-overlay-chrome);
  pointer-events: auto;
  opacity: 0.78;
  transition: opacity 120ms ease, background 120ms ease;
}
.vnt-planning-shell .tv-cesium-viewer:hover .vnt-preview-resize,
.vnt-planning-shell .tv-cesium-viewer.is-resizing .vnt-preview-resize,
.vnt-planning-shell .tv-cesium-viewer.is-floating .vnt-preview-resize {
  opacity: 1;
}
.vnt-preview-resize::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(89, 128, 166, 0.38);
  background: rgba(89, 128, 166, 0.08);
}
.vnt-preview-resize-se {
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  cursor: nwse-resize;
}
.vnt-preview-resize-se::after {
  border-radius: 7px 0 0 0;
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(89, 128, 166,0.55) 47% 53%, transparent 54%),
    linear-gradient(135deg, transparent 0 66%, rgba(89, 128, 166,0.42) 67% 72%, transparent 73%);
}
/* ===== Building elevation preview (right side of 3D pane) =====
 * Reads like an architectural elevation drawing — the building you're
 * planning shots on, drawn at proportional scale. Each segment block is
 * sized to its real-world height share, colored by segment type, with
 * faint floor lines inside. Pin dots sit on the right face of the tower
 * at their AGL. The active pin's segment glows. A live camera tick
 * shows where the user is flying relative to the structure. */
.vnt-building-preview {
  position: absolute;
  right: 60px; /* clears the bottom-right compass/pause column (42px + gutters) */
  bottom: var(--vnt-preview-gutter);
  z-index: var(--vnt-z-overlay-data);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 108px;
  height: clamp(92px, 48%, 230px);
  max-height: calc(100% - 34px);
  pointer-events: auto;
}
/* v401 review: a 360 building strip and the video transport can coexist
   (360 stack + a video pin previewing). The pill spans the full bottom
   edge, so the strip stacks above it instead of sliding underneath.
   60px = 10px inset + 40px pill + 10px gap. */
.tv-cesium-viewer.tv-has-transport .vnt-building-preview {
  bottom: 60px;
  max-height: calc(100% - 84px);
}
.vnt-bp-tower {
  position: relative;
  flex: 1 1 auto;
  width: 64px;
  min-height: 0;
  display: flex;
  flex-direction: column-reverse;
}
/* Tapered crown — subtle setback on top so the silhouette reads as a
 * tower rather than a slab. */
.vnt-bp-roof {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 64%;
  height: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.18);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  pointer-events: none;
}
.vnt-bp-roof::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 12px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 6px rgba(92,203,216,0.5);
  border-radius: 2px;
}
/* The stack itself — vertical column of segments, top-to-bottom. */
.vnt-bp-stack {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.06), transparent 22%, transparent 78%, rgba(255,255,255,0.10)),
    rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255,255,255,0.16);
  border-bottom: 2px solid rgba(255,255,255,0.32);
  box-shadow:
    0 18px 40px rgba(255, 255, 255, 0.94),
    inset 0 0 28px rgba(92,203,216,0.08);
  overflow: hidden;
}
/* Empty / ghost state — small italic label centered on a striped placeholder */
.vnt-building-preview.is-empty .vnt-bp-stack {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.04) 0 8px,
      rgba(255,255,255,0.07) 8px 16px
    ),
    rgba(255, 255, 255, 0.94);
}
.vnt-building-preview.is-hidden {
  display: none;
}
.vnt-bp-empty {
  margin: auto;
  padding: 0 6px;
  text-align: center;
  font-family: var(--vnt-font);
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.62);
  line-height: 1.25;
}
.vnt-bp-empty span {
  font-weight: 400;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
}
/* Each segment block — height set inline as a % of total. Renders a
 * colored fill, faint floor lines, and a label on the side. */
.vnt-bp-seg {
  position: relative;
  width: 100%;
  cursor: pointer;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.vnt-bp-seg + .vnt-bp-seg {
  border-top: 1px solid rgba(29, 31, 32, 0.225);
}
.vnt-bp-seg-fill {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--seg-color, var(--vnt-accent, var(--vnt-accent))) 55%, white 0%) 0%,
      color-mix(in oklch, var(--seg-color, var(--vnt-accent, var(--vnt-accent))) 78%, black 4%) 100%);
  opacity: 0.86;
}
.vnt-bp-seg-fill::before {
  /* Subtle "windows" — repeating vertical gridlines for building feel */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(29, 31, 32, 0.09) 0 1px, transparent 1px 12px);
  opacity: 0.5;
  pointer-events: none;
}
.vnt-bp-floorline {
  position: absolute;
  left: 6%;
  right: 6%;
  height: 1px;
  background: rgba(29, 31, 32, 0.16);
  pointer-events: none;
}
.vnt-bp-seg-label {
  position: absolute;
  right: -118px;
  top: 50%;
  transform: translateY(-50%);
  width: 110px;
  display: flex;
  flex-direction: column;
  font-family: var(--vnt-font);
  font-size: 10px;
  color: rgba(255,255,255,0.85);
  text-align: left;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.94);
  pointer-events: none;
}
.vnt-building-preview .vnt-bp-seg-label,
.vnt-building-preview .vnt-bp-seg-top {
  display: none;
}
.vnt-bp-seg-name {
  font-weight: 600;
  font-size: var(--vnt-fs-11);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vnt-bp-seg-meta {
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  font-feature-settings: "tnum" 1, "zero" 1;
}
.vnt-bp-seg-top {
  position: absolute;
  left: -42px;
  top: 0;
  transform: translateY(-50%);
  padding: 0 4px;
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  background: rgba(255, 255, 255, 0.94);
  border-radius: 2px;
  pointer-events: none;
}
.vnt-bp-seg:hover .vnt-bp-seg-fill { opacity: 1; }
.vnt-bp-seg.active .vnt-bp-seg-fill {
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--vnt-accent, var(--vnt-accent));
}
.vnt-bp-seg.active::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid color-mix(in oklch, var(--vnt-accent, var(--vnt-accent)) 80%, transparent);
  border-radius: 1px;
  box-shadow: 0 0 14px color-mix(in oklch, var(--vnt-accent, var(--vnt-accent)) 50%, transparent);
  pointer-events: none;
}
/* Ground baseline — solid bar with 0 ft tick under the stack. */
.vnt-bp-base {
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.vnt-bp-base-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
}
.vnt-bp-base-tick {
  margin-left: 6px;
  padding: 0 4px;
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  color: var(--vnt-text-dim);
  background: rgba(255, 255, 255, 0.94);
  border-radius: 2px;
}
/* Pin dots — placed on the right face of the tower at their AGL. */
.vnt-bp-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.vnt-bp-pin {
  position: absolute;
  right: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vnt-accent, var(--vnt-accent));
  border: 1.5px solid rgba(255, 255, 255, 0.94);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.94);
  transform: translateY(50%);
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.vnt-bp-pin-360_photo { background: #c47bff; }
.vnt-bp-pin-video { background: #ff6b6b; }
.vnt-bp-pin.active {
  width: 15px;
  height: 15px;
  right: -7px;
  box-shadow: 0 0 12px var(--vnt-accent, var(--vnt-accent)), 0 0 4px rgba(255, 255, 255, 0.94);
  z-index: 2;
}
/* Live camera tick — small horizontal mark + readout on left side. */
.vnt-bp-camera {
  position: absolute;
  left: -58px;
  width: 68px;
  height: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 3;
  transition: bottom 200ms ease;
}
.vnt-bp-camera-dot {
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--vnt-accent-bright);
  box-shadow: 0 0 8px rgba(89, 128, 166,0.9);
  flex: 0 0 auto;
}
.vnt-bp-camera-tick {
  flex: 1 1 auto;
  padding: 1px 4px;
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: 10px;
  font-weight: 600;
  color: var(--vnt-accent-bright);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(89, 128, 166,0.4);
  border-radius: 2px;
  text-align: center;
  white-space: nowrap;
}
.vnt-viewfinder-gsd {
  position: absolute;
  left: var(--vnt-preview-gutter);
  bottom: 60px; /* clears the transport-pill row (10px inset + 40px pill + 10px gap) */
  z-index: var(--vnt-z-overlay-data);
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: var(--vnt-fs-11);
  font-weight: 700;
  color: var(--vnt-text);
  padding: 5px 8px;
  border: 1px solid rgba(89, 128, 166,0.28);
  border-radius: var(--vnt-radius-pill);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

/* Compass in bottom-right — 42px round, counter-rotates to keep N pointing north */
.vnt-planning-shell .vnt-compass {
  position: absolute;
  bottom: var(--vnt-preview-gutter);
  right: var(--vnt-preview-gutter);
  z-index: var(--vnt-z-overlay-data);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(29, 31, 32, 0.2);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.92);
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  font-weight: 700;
  transition: transform 250ms ease;
}
.vnt-planning-shell .vnt-compass::before {
  /* N-pointer tick */
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 5px solid var(--vnt-accent);
}
.vnt-planning-shell .vnt-compass-n { color: var(--vnt-accent); }

/* Coord subline under the address */
.vnt-planning-shell .vnt-addr-coords {
  font-family: var(--vnt-font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: 11px;
  color: var(--vnt-text-faint);
  padding: 4px 2px 0;
  letter-spacing: 0;
  display: flex;
  gap: 6px;
  align-items: center;
}
.vnt-planning-shell .vnt-addr-coords b {
  color: var(--vnt-text-dim);
  font-weight: 500;
}
.vnt-planning-shell .tv-project-header.vnt-site-compact .vnt-addr-coords {
  padding: 3px 1px 0;
  font-size: var(--vnt-fs-10);
  overflow: hidden;
  white-space: nowrap;
}
.vnt-planning-shell .tv-project-header.vnt-site-compact .vnt-addr-coords span {
  display: none;
}

/* ==========================================================================
   Futuristic Miami Theme
   App-wide finishing layer: restrained Biscayne aqua, sunset coral, warm
   concrete highlights, and glassy midnight surfaces.
   ========================================================================== */
html,
body {
  background: var(--vnt-bg);
}

/* R3 straggler fixed 2026-08-26: this gradient kept the app ground dark
   after the token sheet went to paper — ink page headings were invisible
   on it. One token ground, no gradients (DS). */
.app-shell,
.dashboard-content,
.planning-hub,
.monday-board,
.notif-page {
  background: var(--vnt-bg);
}

.top-bar,
.vnt-topbar {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94) 52%, rgba(255, 255, 255, 0.94));
  border-bottom-color: rgba(29, 31, 32, 0.09);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 44px rgba(29, 31, 32, 0.1);
}

.vnt-subbar,
.bottom-panel,
.layer-popover,
.auth-card,
.landing-planner-panel,
.vnt-planning-shell .tv-left-panel,
.vnt-planning-shell .tv-right-panel,
.vnt-planning-shell .tv-section,
.vnt-planning-shell .vnt-rail-footer {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(29, 31, 32, 0.09);
  box-shadow: 0 18px 48px rgba(29, 31, 32, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.vnt-planning-shell .tv-page,
.vnt-planning-shell .tv-center-panel,
.vnt-planning-shell .tv-center-map {
  background:
    radial-gradient(circle at 76% 16%, rgba(89, 128, 166, 0.08), transparent 26%),
    radial-gradient(circle at 20% 88%, rgba(255, 123, 143, 0.055), transparent 28%),
    var(--vnt-panel-2);
}

.landing-page {
  background:
    linear-gradient(rgba(89, 128, 166, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 209, 102, 0.028) 1px, transparent 1px),
    #041016;
  background-size: 48px 48px, 48px 48px, auto;
}

.landing-flight-hero {
  background: #041016;
}

.landing-scene-shade {
  background:
    radial-gradient(circle at 72% 42%, rgba(89, 128, 166, 0.12), transparent 30%),
    radial-gradient(circle at 48% 74%, rgba(255, 123, 143, 0.08), transparent 26%),
    linear-gradient(90deg, rgba(4, 16, 22, 0.86) 0%, rgba(4, 16, 22, 0.48) 42%, rgba(4, 16, 22, 0.10) 100%),
    linear-gradient(0deg, rgba(4, 16, 22, 0.74) 0%, rgba(4, 16, 22, 0) 42%);
}

/* The button skin patch that lived here was folded into the tier-1/2/3 base
   rules (design audit Phase 3). Only the planner form controls remain. */
.vnt-planning-shell .vnt-map-search,
.vnt-planning-shell .tv-left-panel input[type="text"],
.vnt-planning-shell .tv-left-panel input[type="number"],
.vnt-planning-shell .tv-left-panel input[type="search"],
.vnt-planning-shell .tv-left-panel select,
.vnt-planning-shell .tv-left-panel textarea {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(29, 31, 32, 0.1);
  color: var(--text-hi);
}

.landing-proof span,
.landing-feature-row article,
.landing-metric,
.planning-hub-card,
.notif-row,
.vnt-segment,
.vnt-planning-shell .tvp-segment-item,
.vnt-planning-shell .tv-time-group,
.vnt-planning-shell .tv-pin-item,
.vnt-planning-shell .tv-pin-row.has-active {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(29, 31, 32, 0.09);
}

.vnt-pill,
.notif-unread-pill {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--vnt-border);
}
.landing-planner-top,
.landing-planner-cta {
  background: rgba(6, 23, 31, 0.76);
  border-color: rgba(89, 128, 166, 0.24);
}

.vnt-pill.ok {
  color: var(--vnt-success);
  border-color: rgba(63, 122, 88, 0.34);
  background: rgba(63, 122, 88, 0.10);
}

.vnt-pill.warn {
  color: var(--vnt-accent-2);
  border-color: rgba(176, 124, 46, 0.36);
  background: rgba(176, 124, 46, 0.10);
}

.notif-row-unread,
.vnt-segment.active,
.vnt-planning-shell .tv-pin-item.active,
.vnt-planning-shell .tv-ht-row.active {
  border-color: rgba(89, 128, 166, 0.52);
  box-shadow: 0 0 0 1px rgba(89, 128, 166, 0.18), 0 0 28px rgba(89, 128, 166, 0.08);
}

.vnt-planning-shell .tv-center-map.tv-site-plan-mode {
  background:
    radial-gradient(circle at 50% 48%, rgba(89, 128, 166, 0.11), transparent 28%),
    radial-gradient(circle at 72% 78%, rgba(255, 123, 143, 0.07), transparent 26%),
    linear-gradient(180deg, var(--vnt-panel-2) 0%, var(--vnt-panel-2) 100%);
}

.vnt-planning-shell .tv-center-map.tv-site-plan-mode::before {
  background:
    linear-gradient(rgba(89, 128, 166, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89, 128, 166, 0.13) 1px, transparent 1px),
    linear-gradient(rgba(255, 209, 102, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 209, 102, 0.055) 1px, transparent 1px);
  background-size: 150px 150px, 150px 150px, 30px 30px, 30px 30px;
}

/* (Stale theme-era .vnt-shot-fov override removed — it reset the wedge to the
   old pale-teal ~13% narrow-end fill and negated the accent-2 contrast recipe
   at the canonical .vnt-shot-fov rule above.) */

.vnt-shot-handle {
  background: #ffd166;
  box-shadow: 0 0 0 2px rgba(255, 123, 143, 0.26), 0 0 20px rgba(255, 209, 102, 0.38);
}

.form-input:focus,
.vnt-planning-shell .vnt-map-search:focus,
.vnt-planning-shell .tv-left-panel input:focus,
.vnt-planning-shell .tv-left-panel select:focus,
.vnt-planning-shell .tv-left-panel textarea:focus {
  border-color: rgba(89, 128, 166, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(89, 128, 166, 0.16) !important;
}

/* V58 planning cleanup: keep the 360 stack focused on level generation.
   Program bands remain available, but they read like advanced metadata instead
   of a second miniature building editor. */
.vnt-planning-shell .tv-360-level-stack-panel .tv-building-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin: 8px 0 !important;
}

.vnt-planning-shell .tv-360-level-stack-panel .vnt-stack-wrap {
  gap: 6px !important;
  padding: 0 !important;
}

.vnt-planning-shell .tv-360-level-stack-panel .vnt-stack-wrap::before,
.vnt-planning-shell .tv-360-level-stack-panel .vnt-stack-wrap .vnt-segment.is-top::before,
.vnt-planning-shell .tv-360-level-stack-panel .vnt-stack-wrap .vnt-segment.is-top::after,
.vnt-planning-shell .tv-360-level-stack-panel .vnt-stack-wrap .vnt-segment.is-bottom::after {
  display: none !important;
  content: none !important;
}

.vnt-planning-shell .tv-360-level-stack-panel .vnt-stack-wrap .vnt-segment {
  grid-template-columns: 8px minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  border: 1px solid rgba(29, 31, 32, 0.08) !important;
  border-radius: 7px !important;
  padding: 8px !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

.vnt-planning-shell .tv-360-level-stack-panel .vnt-seg-facade {
  display: none !important;
}

.vnt-planning-shell .tv-360-level-stack-panel .vnt-segment .vnt-seg-bar {
  grid-column: 1;
  width: 4px;
  height: 100%;
  min-height: 32px;
  border-radius: 999px;
}

.vnt-planning-shell .tv-360-level-stack-panel .vnt-seg-meta {
  grid-column: 2;
}

.vnt-planning-shell .tv-360-level-stack-panel .vnt-segment .vnt-seg-right {
  grid-column: 3;
}

.vnt-planning-shell .tv-360-level-stack-panel .vnt-seg-shot-count {
  display: none;
}

@media (max-width: 960px) {
  .vnt-planning-shell .tv-left-panel,
  .vnt-planning-shell .tv-right-panel {
    max-height: none;
    height: 100%;
  }
}

/* Permit / film-office mobile flight-plan viewer */
/* ===== Client flight-plan page (#/permit/{token}) — first full R3 surface.
   Pocket Brief spec 2026-08-26: DS paper/ink/steel, square blueprint
   grammar, one solid steel object (the walkthrough Play button). Every rule
   rides the :root Industry tokens — zero color literals. The route class
   below paints the ground before JS settles (iOS overscroll must never
   flash the dark shell). */
html.vnt-ds-route,
html.vnt-ds-route body {
  background: var(--vnt-bg);
}
.permit-mobile {
  min-height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--vnt-bg);
  color: var(--vnt-text);
  font-family: var(--vnt-font-body);
  font-size: 17px; /* R4 field floor: everything read is >=17px */
  line-height: 1.5;
  padding: 14px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
.permit-kicker {
  display: block;
  font-family: var(--vnt-font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vnt-text-dim);
}
.permit-kicker-steel { color: var(--vnt-accent-700); }
.permit-kicker-danger { color: var(--vnt-danger); }
.permit-loading,
.permit-error {
  margin: 24vh auto 0;
  max-width: 380px;
  padding: 22px 20px;
  border: 1px solid var(--vnt-border);
  border-radius: 0;
  background: transparent;
  text-align: center;
  display: grid;
  gap: 8px;
}
.permit-cover,
.permit-player,
.permit-schedule-wrap,
.permit-shot-card,
.permit-footer {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.permit-cover {
  border: 1px solid var(--vnt-border);
  padding: 18px 16px 16px;
  margin-bottom: 18px;
}
.permit-cover h1 {
  margin: 8px 0 6px;
  font-family: var(--vnt-font-heading);
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--vnt-text);
}
.permit-cover-addr {
  margin: 0;
  color: var(--vnt-text-dim);
}
.permit-cover-prep {
  margin: 4px 0 0;
  color: var(--vnt-text-dim);
}
.permit-cover-prep b { color: var(--vnt-text); font-weight: 600; }
.permit-cover-metrics {
  display: flex;
  margin-top: 14px;
  border-top: 1px solid var(--vnt-border);
  padding-top: 12px;
}
.permit-cover-metrics div {
  flex: 1;
  padding: 0 10px;
  border-left: 1px solid var(--vnt-border);
}
.permit-cover-metrics div:first-child { border-left: 0; padding-left: 0; }
.permit-cover-metrics b {
  display: block;
  font-family: var(--vnt-font-mono);
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.permit-cover-metrics span {
  font-family: var(--vnt-font-heading);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vnt-text-faint);
}
.permit-cover-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}
.permit-ghost-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--vnt-text);
  border-radius: 0;
  background: transparent;
  color: var(--vnt-text);
  font-family: var(--vnt-font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.permit-ghost-btn:hover { border-color: var(--vnt-accent-600); color: var(--vnt-accent-700); }
.permit-ghost-btn:active { border-color: var(--vnt-accent-700); }
/* One interaction-state spec page-wide (FLIGHT SHEET graft). */
.permit-mobile button:focus-visible,
.permit-mobile a:focus-visible {
  outline: 2px solid var(--vnt-accent);
  outline-offset: 2px;
}
.permit-mobile button:disabled { opacity: 0.45; }
.permit-player { margin-bottom: 18px; }
.permit-player-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-end;
  padding: 0 0 10px;
}
.permit-player-head span,
.permit-preview span {
  display: block;
  font-family: var(--vnt-font-heading);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vnt-text-dim);
}
.permit-player-head strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  font-weight: 600;
}
.permit-player-controls {
  display: flex;
  gap: 6px;
}
.permit-player-controls button {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vnt-border);
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: var(--vnt-text);
  cursor: pointer;
}
.permit-player-controls button:hover { border-color: var(--vnt-accent-600); }
/* THE one solid steel object on the page. */
.permit-player-controls .permit-play {
  background: var(--vnt-accent);
  border-color: var(--vnt-accent);
  color: var(--vnt-bg);
}
.permit-player-controls .permit-play:hover { background: var(--vnt-accent-600); border-color: var(--vnt-accent-600); }
.permit-player-controls .permit-play:active { background: var(--vnt-accent-700); border-color: var(--vnt-accent-700); }
.permit-map-shell {
  position: relative;
  border: 1px solid var(--vnt-border);
  background: var(--vnt-bg-3);
  touch-action: pan-y;
}
/* Registration ticks ride the shared .blueprint utility (member list below);
   Leaflet panes stack to ~700, so the ticks need a permit-scoped lift. */
.permit-mobile .permit-map-shell::after { z-index: 700; }
.permit-map {
  height: min(58vh, 520px);
  min-height: 360px;
  background: var(--vnt-bg-3);
  touch-action: pan-y;
}
.permit-map.is-scroll-safe,
.permit-map.is-scroll-safe .leaflet-container,
.permit-map.is-scroll-safe .leaflet-pane,
.permit-map.is-scroll-safe .leaflet-map-pane {
  touch-action: pan-y !important;
}
.permit-map.is-scroll-safe .leaflet-grab,
.permit-map.is-scroll-safe .leaflet-dragging .leaflet-grab {
  cursor: default;
}
.permit-playback-bar {
  height: 3px;
  overflow: hidden;
  background: var(--vnt-bg-3);
  border-left: 1px solid var(--vnt-border);
  border-right: 1px solid var(--vnt-border);
}
.permit-playback-bar i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 0;
  background: var(--vnt-accent);
  transition: width 90ms linear;
}
.permit-aircraft-icon { pointer-events: none; }
.permit-aircraft {
  width: 30px;
  height: 30px;
  border-radius: 0;
  display: grid;
  place-items: center;
  color: var(--vnt-text);
  background: var(--vnt-bg-2);
  border: 1px solid var(--vnt-border-2);
  box-shadow: var(--vnt-shadow-sm);
  font-size: 14px;
  line-height: 1;
}
.permit-preview {
  display: grid;
  gap: 12px;
  padding: 12px 0 0;
}
.permit-preview-planner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.permit-preview-panel {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.permit-preview-panel > span { padding-left: 2px; }
.permit-preview .brief-shot-map-mini,
.permit-preview .brief-live-map {
  width: 100%;
  min-height: 230px;
  height: 230px;
  border: 1px solid var(--vnt-border);
}
.permit-preview .brief-3d-preview-card {
  width: 100%;
  max-width: 100%;
  height: 100%;
}
.permit-preview .brief-3d-preview-card.is-hero { grid-column: auto; }
.permit-preview .brief-3d-scene,
.permit-preview .brief-3d-preview-card.is-hero .brief-3d-scene {
  width: 100%;
  max-width: 100%;
  min-height: 230px;
  height: 230px;
}
.permit-preview .brief-3d-preview-card.has-capture .brief-3d-scene {
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: auto;
  aspect-ratio: 16 / 9;
}
.permit-preview .brief-3d-shot-image { max-width: 100%; }
.permit-preview .brief-3d-card-meta { padding: 8px 10px 10px; }
.permit-preview-copy {
  display: grid;
  gap: 4px;
  padding: 12px 0 0;
  border-top: 1px solid var(--vnt-border);
}
.permit-preview-copy strong {
  color: var(--vnt-text);
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.permit-preview p {
  margin: 0;
  color: var(--vnt-text-dim);
}
.permit-preview-copy span { /* spec line rides body size, not the label class */
  font-family: var(--vnt-font-body);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vnt-text);
}
.permit-mono {
  font-family: var(--vnt-font-mono);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.permit-priority-tag {
  display: inline-block;
  border: 1px solid var(--vnt-text);
  padding: 1px 7px;
  font-family: var(--vnt-font-heading);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--vnt-text);
}
/* ---- Capture Schedule: the paper brief's Day-Schedule model on a phone ---- */
.permit-schedule-wrap {
  margin-bottom: 18px;
  overflow-x: auto;
}
.permit-schedule-wrap > .permit-kicker { margin-bottom: 8px; }
.permit-schedule {
  border: 1px solid var(--vnt-border);
}
.permit-schedule-legend {
  margin: 0;
  padding: 10px 12px;
  color: var(--vnt-text-dim);
  border-bottom: 1px solid var(--vnt-border);
}
.permit-window { padding: 10px 12px 6px; }
.permit-window + .permit-window { border-top: 1px solid var(--vnt-border); }
.permit-window-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--vnt-font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vnt-text);
}
.permit-window-clock {
  font-family: var(--vnt-font-mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vnt-text-dim);
}
.permit-sched-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 2px;
  border: 0;
  border-top: 1px solid var(--vnt-bg-3);
  border-radius: 0;
  background: transparent;
  color: var(--vnt-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.permit-sched-row:first-of-type { border-top: 0; }
.permit-sched-row.is-active {
  outline: 2px solid var(--vnt-accent);
  outline-offset: -2px;
  background: var(--vnt-accent-100);
}
.permit-letter-chip {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--vnt-text);
  font-family: var(--vnt-font-mono);
  font-size: 12.5px;
  font-weight: 600;
}
.permit-sched-heights {
  margin-left: auto;
  font-family: var(--vnt-font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--vnt-text-dim);
  white-space: nowrap;
}
.permit-time-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.permit-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--vnt-border);
  border-radius: 0;
  padding: 9px 12px;
  background: transparent;
  color: var(--vnt-text);
}
/* ---- Shot index ---- */
.permit-shot-stack {
  display: grid;
  gap: 8px;
  max-width: 980px;
  margin: 0 auto 18px;
}
.permit-shot-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--vnt-border);
  border-radius: 0;
  padding: 12px;
  background: transparent;
  color: var(--vnt-text);
  text-align: left;
  cursor: pointer;
}
.permit-shot-card.is-active {
  border: 2px solid var(--vnt-accent);
  padding: 11px;
  background: var(--vnt-accent-100);
}
.permit-shot-main strong,
.permit-shot-main em {
  display: block;
}
.permit-shot-main strong { font-size: 17px; font-weight: 600; }
.permit-shot-main em {
  margin-top: 3px;
  color: var(--vnt-text-dim);
  font-style: normal;
  font-size: 17px;
}
/* ---- Provenance footer ---- */
.permit-footer {
  border-top: 1px solid var(--vnt-border);
  padding: 14px 4px 24px;
  display: grid;
  gap: 6px;
  color: var(--vnt-text);
}
.permit-footer-dir {
  font-family: var(--vnt-font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vnt-accent-700);
  text-decoration: none;
}
.permit-footer-dir:hover { color: var(--vnt-accent-600); }
.permit-footer-coords {
  font-family: var(--vnt-font-mono);
  font-size: 13px;
  color: var(--vnt-text-faint);
}
.permit-footer-powered {
  font-size: 13px;
  color: var(--vnt-text-faint);
}
/* ---- Video player chrome on paper — permit-scoped overrides ONLY; the
   authed field feed keeps its own skin until R3 sweeps it. ---- */
.permit-mobile .mobile-video-player {
  border: 1px solid var(--vnt-border);
  border-radius: 0;
  background: var(--vnt-bg-2);
  box-shadow: none;
}
.permit-mobile .mobile-video-player-head b { color: var(--vnt-text); }
.permit-mobile .mobile-video-player-head span { color: var(--vnt-text-dim); }
.permit-mobile .mobile-video-player-stage { background: var(--vnt-bg-3); }
.permit-mobile .mobile-video-bigplay {
  border-radius: 0;
  border: 1px solid var(--vnt-text);
  background: rgba(242, 242, 243, 0.85);
  color: var(--vnt-text);
  box-shadow: none;
}
.permit-mobile .mobile-video-controls button {
  border-radius: 0;
  border: 1px solid var(--vnt-border);
  background: transparent;
  color: var(--vnt-text);
}
.permit-mobile .mobile-video-controls i {
  border-radius: 0;
  background: var(--vnt-accent);
  box-shadow: none;
}
.permit-mobile .mobile-video-controls span {
  color: var(--vnt-text-dim);
  font-family: var(--vnt-font-mono);
}
@media (max-width: 720px) {
  .permit-mobile { padding: 10px; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .permit-cover h1 { font-size: 28px; }
  .permit-player-head { align-items: flex-start; flex-wrap: wrap; }
}
@media (max-width: 620px) {
  .permit-map {
    min-height: 420px;
    height: 58vh;
  }
  .permit-preview { grid-template-columns: 1fr; }
  .permit-preview-planner { grid-template-columns: 1fr; }
  .permit-preview .brief-shot-map-mini,
  .permit-preview .brief-live-map,
  .permit-preview .brief-3d-scene,
  .permit-preview .brief-3d-preview-card.is-hero .brief-3d-scene {
    min-height: 250px;
    height: 250px;
  }
  .permit-preview .brief-3d-preview-card.has-capture .brief-3d-scene {
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .permit-cover-metrics span { font-size: 11.5px; }
}

/* v288: unified mobile / permit viewer polish */


.mobile-summary-card h2 {
  margin: 0 0 8px;
  color: #f2fdff;
}

.mobile-type-row {
  margin-top: 8px;
}


.mobile-pilot-mode-btn {
  box-shadow: 0 12px 28px rgba(39, 241, 222, 0.18);
}

/* ===== Brief generation loading feedback (v322) =====
   briefDesignerSetGeneratingOverlay builds this overlay in JS; it shipped
   without styles, so Generate PDF / Quick PDF showed no motion at all. */
.brief-generate-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-top);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 12, 20, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: brief-overlay-in 220ms ease-out;
}

@keyframes brief-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.brief-generate-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 28px;
  border-radius: 14px;
  background: rgba(10, 22, 34, 0.94);
  border: 1px solid rgba(89, 128, 166, 0.25);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}

.brief-generate-orbit {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.brief-generate-orbit i {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--vnt-accent, var(--vnt-accent));
  animation: brief-orbit-spin 1.1s linear infinite;
}

.brief-generate-orbit i:nth-child(2) {
  top: 7px;
  right: 7px;
  bottom: 7px;
  left: 7px;
  border-top-color: rgba(89, 128, 166, 0.85);
  animation-duration: 1.6s;
  animation-direction: reverse;
}

.brief-generate-orbit i:nth-child(3) {
  top: 14px;
  right: 14px;
  bottom: 14px;
  left: 14px;
  border-top-color: rgba(91, 140, 255, 0.85);
  animation-duration: 2.2s;
}

@keyframes brief-orbit-spin {
  to { transform: rotate(360deg); }
}

.brief-generate-copy b {
  display: block;
  color: #eaf8ff;
  font-size: 15px;
  margin-bottom: 4px;
}

.brief-generate-copy span {
  display: block;
  max-width: 340px;
  color: #9db8c8;
  font-size: var(--vnt-fs-13);
  animation: brief-msg-pulse 1.8s ease-in-out infinite;
}

@keyframes brief-msg-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

body.brief-is-generating {
  overflow: hidden;
}

/* Generic inline busy spinner for action buttons/links */
.is-busy {
  position: relative;
  pointer-events: none;
  opacity: 0.78;
}

.is-busy::after {
  content: "";
  display: inline-block;
  vertical-align: -2px;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border-radius: 50%;
  border: 2px solid rgba(89, 128, 166, 0.25);
  border-top-color: var(--vnt-accent, var(--vnt-accent));
  animation: vnt-busy-spin 0.8s linear infinite;
}

@keyframes vnt-busy-spin {
  to { transform: rotate(360deg); }
}

/* Brief Designer initial loading screen */
.brief-designer-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 72px 24px;
  color: var(--text-secondary, #9db8c8);
}

/* Brief QR (makeover 2026-08-26): the floating per-page .brief-page-qr-badge
   is gone — the QR lives in the cover's dedicated plate, which renders its
   own .brief-page-qr-img slot with inline sizing. */
.brief-page-qr-img {
  display: block;
}

/* v328: times-tab jump buttons + stack visual on mobile cards */

.mobile-stack-visual {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: rgba(10, 26, 38, 0.85);
}

.mobile-stack-visual .brief-shot-level-grid {
  flex: 1;
  margin-top: 0;
}

.mobile-stack-visual .brief-shot-level-grid-cells {
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 4px;
}

.mobile-stack-visual .brief-shot-level-cell {
  padding: 5px 3px 6px;
}

.mobile-stack-visual .brief-shot-level-cell b {
  font-size: 8px;
}

.mobile-stack-visual .brief-shot-level-cell i {
  font-size: 13px;
}

/* v329: mobile video player — satellite base + aircraft overlay */
/* Tap target ON the video: a centered badge that hides during playback.
   The row transport survives beneath, but play must not live below the fold
   of a tall map (owner report). */
.mobile-video-bigplay {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: rgba(4, 16, 19, 0.72);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 160ms ease, transform 160ms ease;
}
.mobile-video-bigplay.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
}
.mobile-video-player-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 880 / 550;
  border-radius: 12px;
  overflow: hidden;
  background: #07131b;
}

.mobile-video-player-map,
.mobile-video-player-stage .brief-static-map-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mobile-video-player-stage .brief-static-map-img {
  object-fit: fill;
}

.mobile-video-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Planner-parity route geometry over the satellite player (client-drawn,
   matches the planner's path/START/END/FOCUS grammar and colors). */
.mobile-video-overlay [data-mobile-video-route] {
  fill: none;
  stroke: var(--vnt-route-orbit);
  stroke-width: 3;
  stroke-dasharray: 8 6;
  stroke-linecap: round;
  opacity: 0.95;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65));
}

.mobile-video-overlay [data-mobile-video-start] circle {
  fill: var(--vnt-route-start);
  stroke: rgba(4, 22, 14, 0.9);
  stroke-width: 2.5;
}

.mobile-video-overlay [data-mobile-video-start] text {
  fill: #06281a;
  font-size: 12px;
  font-weight: 900;
  text-anchor: middle;
}

.mobile-video-overlay [data-mobile-video-end] circle {
  fill: var(--vnt-route-end);
  stroke: rgba(28, 5, 5, 0.9);
  stroke-width: 2.5;
}

.mobile-video-overlay [data-mobile-video-focus] circle {
  fill: none;
  stroke: var(--vnt-route-focus);
  stroke-width: 3;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.mobile-video-overlay [data-mobile-video-aircraft] circle {
  fill: rgba(8, 22, 32, 0.85);
  stroke: var(--vnt-accent-dim);
  stroke-width: 2.5;
}

.mobile-video-overlay [data-mobile-video-aircraft] path {
  fill: #9ffced;
}

.mobile-video-overlay [data-mobile-video-aircraft] text {
  fill: #d8fbff;
  font-size: 14px;
  font-weight: 800;
  text-anchor: middle;
}

.mobile-video-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.mobile-video-controls [data-mobile-route-play] {
  flex: 0 0 44px;
  min-height: 44px;
  border-radius: 12px;
  border: 0;
  background: var(--vnt-gradient-go);
  color: #04222b;
  font-size: 15px;
  cursor: pointer;
}

.mobile-video-controls [data-mobile-route-scrub] {
  flex: 1;
  min-height: 44px;
  accent-color: var(--vnt-accent);
}

.mobile-video-controls [data-mobile-route-time] {
  flex: 0 0 auto;
  font-size: 11px;
  color: #b7d3df;
  font-variant-numeric: tabular-nums;
}

/* ===== Design audit Phase 1 (2026-06-11) ===== */

/* Route point card buttons — panel colors match the 2D map markers. */
.btn-ghost.tv-kf-btn { width: 100%; }
.btn-ghost.tv-kf-btn-start,
.btn-ghost.tv-kf-btn-end { margin-top: 4px; }
.btn-ghost.tv-kf-btn-poi { border-color: var(--vnt-route-focus); color: var(--vnt-route-focus); }
.btn-ghost.tv-kf-btn-start { border-color: var(--vnt-route-start); color: var(--vnt-route-start); }
.btn-ghost.tv-kf-btn-end { border-color: var(--vnt-route-end); color: var(--vnt-route-end); }

/* ===== Shared status pill (design audit Phase 3) =====
   One pill, one mechanism: tone color flows through --pill-color into
   color-mix tints (the .mobile-home-status donor pattern). data-tone sets
   a default; data-driven sites override inline: style="--pill-color:#hex". */
.vnt-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--vnt-radius-pill);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--pill-color, var(--vnt-text-dim));
  background: color-mix(in srgb, var(--pill-color, var(--vnt-text-dim)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--pill-color, var(--vnt-text-dim)) 38%, transparent);
}
.vnt-status-pill[data-tone="neutral"] { --pill-color: #9aa3b2; }
.vnt-status-pill[data-tone="info"] { --pill-color: var(--vnt-info); }
.vnt-status-pill[data-tone="ready"] { --pill-color: var(--vnt-success); }
.vnt-status-pill[data-tone="warning"] { --pill-color: var(--vnt-accent-2); }
.vnt-status-pill[data-tone="error"] { --pill-color: var(--vnt-danger); }
/* Solid variant: data-driven sites that need tappable, white-on-color chips. */
.vnt-status-pill[data-variant="solid"] {
  background: var(--pill-color, var(--vnt-text-dim));
  border-color: transparent;
  color: #fff;
}
/* Chunky thumb-target size (mobile field viewer). */
.vnt-status-pill--lg {
  min-height: 28px;
  padding: 5px 10px;
  font-size: 12px;
}
.vnt-status-pill[data-interactive] {
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s;
}
.vnt-status-pill[data-interactive]:hover { opacity: 0.8; }
.vnt-status-pill[data-interactive]:focus-visible {
  outline: 2px solid var(--vnt-accent);
  outline-offset: 2px;
}

/* ===== Shared letter badge (design audit Phase 3) =====
   One circular letter/ID badge: size via --badge-size, palette via
   --badge-color / --badge-bg / --badge-ink. The 2D-map markers
   (.vnt-shot-id-marker, .brief-shot-map-pin) intentionally stay separate —
   they render inside PDF-capture pages with their own export overrides. */
.vnt-letter-badge {
  --badge-size: 32px;
  width: var(--badge-size);
  height: var(--badge-size);
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--badge-border, var(--badge-color, var(--vnt-accent)));
  background: var(--badge-bg, color-mix(in oklch, var(--badge-color, var(--vnt-accent)) 32%, rgba(8, 12, 18, 0.88)));
  color: var(--badge-ink, #f5fbff);
  font: 900 14px/1 var(--vnt-font-mono);
}
.vnt-letter-badge--sm { --badge-size: 24px; font-size: 10px; }
.vnt-letter-badge--lg { --badge-size: 38px; font-size: 16px; }
/* --xl hosts multi-character labels ("Shot"), so the font stays at 13px. */
.vnt-letter-badge--xl { --badge-size: 42px; font-size: 13px; }
.vnt-letter-badge--solid {
  --badge-bg: var(--vnt-accent-bright);
  --badge-ink: #06212b;
  border: 0;
}
.vnt-letter-badge--outline {
  --badge-bg: #09242c;
  --badge-border: var(--vnt-accent-bright);
  --badge-ink: #ecfeff;
  box-shadow: 0 0 0 4px rgba(95, 231, 238, 0.12);
}
.vnt-letter-badge--gradient {
  --badge-bg: var(--vnt-gradient-go);
  --badge-ink: #031015;
  border: 0;
}

/* Monochrome ink chips on this surface: letters encode nothing; color is
   for status only (DS). Scoped override of the shared badge — the authed
   surfaces keep their palette until R2. */
.permit-mobile .vnt-letter-badge {
  border-radius: 0;
  border: 1px solid var(--vnt-text);
  background: transparent;
  color: var(--vnt-text);
  font-weight: 600;
  box-shadow: none;
}
.permit-shot-card.is-active .vnt-letter-badge {
  background: var(--vnt-text);
  color: var(--vnt-bg);
}

/* Same camera position repeated under multiple time windows — label the repeat
   so a duplicated letter reads as intentional, not as a duplicated shot. */
.tv-pin-time-chip {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.85;
  white-space: nowrap;
}

/* ---------- Mobile field feed (brief-page rebuild, rounds 1-2) ----------
   The phone renders the same document as the printed brief: ivory paper,
   ink text, mono heights (the pilot contract), canonical letter chips.
   Deliberately single-theme — paper reads in sunlight, and a pilot
   comparing phone to printout must not see two different documents. */
.mfv {
  --mfv-paper: #F2F0EB;
  --mfv-card: #F8F7F3;
  --mfv-ink: #141414;
  --mfv-ink-60: rgba(20, 20, 20, 0.6);
  --mfv-hairline: rgba(20, 20, 20, 0.14);
  --mfv-red: #C42B1C;
  --mfv-red-tint: #F9E9E6;
  --mfv-accent: #00B8A9;
  /* Every numeral on this page comes through one token, and it is the same
     one the brief pages print with — the pilot comparing phone to printout
     must not see two different documents. */
  --mfv-mono: var(--vnt-font-mono);
  min-height: 100dvh;
  background: var(--mfv-paper);
  color: var(--mfv-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.mfv-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 16px calc(env(safe-area-inset-top, 0px) * 0);
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--mfv-paper);
  border-bottom: 1px solid var(--mfv-hairline);
}
.mfv-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -12px;
  color: var(--mfv-ink);
  text-decoration: none;
  font-size: 20px;
}
.mfv-bar-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mfv-bar-count {
  flex: 0 0 auto;
  font: 700 15px/1 var(--mfv-mono);
  font-variant-numeric: tabular-nums;
  color: var(--mfv-ink);
}
.mfv-bar-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: rgba(20, 20, 20, 0.12);
}
.mfv-bar-track b {
  display: block;
  height: 100%;
  background: var(--mfv-ink);
  transition: width 240ms ease-out;
}
.mfv-body {
  padding: 0 24px calc(40px + env(safe-area-inset-bottom, 0px));
}
.mfv-title { padding: 24px 0 4px; }
.mfv-title h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mfv-title p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--mfv-ink-60);
}
.mfv-checklist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  margin-top: 16px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--mfv-hairline);
  border-radius: 10px;
  color: var(--mfv-ink);
  font: 600 14px/1 inherit;
  font-family: inherit;
  cursor: pointer;
}
.mfv-checklist-row em {
  font: 700 13px/1 var(--mfv-mono);
  font-style: normal;
  color: var(--mfv-ink-60);
}
.mfv-panel { padding: 8px 0 0; }
.mfv-window { margin-top: 40px; }
.mfv-window-head {
  /* Rides under the 48px bar so a card is never orphaned from its window —
     scrolled past the band, a lone "A · 74' + 96'" is unidentifiable. */
  position: sticky;
  top: calc(48px + env(safe-area-inset-top, 0px));
  z-index: 10;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 10px 0 8px;
  background: var(--mfv-paper);
  border-bottom: 1px solid var(--mfv-ink);
}
.mfv-window-head b { white-space: nowrap; }
/* Auto-advance must not park a card beneath the two sticky rows: the 48px
   bar plus the window band. A window band is itself the first sticky row, so
   it only has to clear the bar — parking it as low as a card left the previous
   window's band still on screen above it, decapitated by the bar. */
.mfv-shot { scroll-margin-top: calc(124px + env(safe-area-inset-top, 0px)); }
.mfv-window { scroll-margin-top: calc(48px + env(safe-area-inset-top, 0px)); }
.mfv-window.is-past > .mfv-window-head b,
.mfv-window.is-past > .mfv-window-head .mfv-window-range { color: var(--mfv-ink-60); }
.mfv-window.is-past > .mfv-window-head .mfv-window-dot { opacity: 0.45; }
.mfv-window.is-now .mfv-window-head { border-bottom-width: 2px; }
.mfv-now {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--mfv-ink);
  color: var(--mfv-paper);
  font: 800 12px/1.4 var(--mfv-mono);
  letter-spacing: 0.08em;
}
.mfv-window.is-complete .mfv-window-load { color: var(--mfv-ink); font-weight: 700; }
.mfv-window-dot {
  flex: 0 0 auto;
  align-self: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.mfv-window-head b { font-size: 20px; font-weight: 600; }
.mfv-window-range {
  font: 600 17px/1.2 var(--mfv-mono);
  color: var(--mfv-ink-60);
}
.mfv-window-load {
  flex-basis: 100%;
  font: 600 15px/1.4 var(--mfv-mono);
  color: var(--mfv-ink-60);
}
.mfv-window.is-custom .mfv-window-head b,
.mfv-window.is-custom .mfv-window-range { color: var(--mfv-red); }
.mfv-shot {
  margin-top: 16px;
  padding: 20px;
  background: var(--mfv-card);
  border: 1px solid var(--mfv-hairline);
  border-radius: 12px;
}
.mfv-shot.is-priority {
  border-color: var(--mfv-hairline);
  border-left: 3px solid var(--mfv-red);
}
.mfv-shot.is-done .mfv-visual { display: none; }
.mfv-shot.is-done .mfv-heights { opacity: 0.55; }
.mfv-shot-head { display: flex; align-items: flex-start; gap: 12px; }
.mfv-letter {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  font: 800 18px/1 var(--mfv-mono);
}
.mfv-shot.is-done .mfv-letter::after {
  content: "\2713";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--mfv-ink);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}
.mfv-shot-id { flex: 1; min-width: 0; }
.mfv-card-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}
.mfv-heights {
  margin-top: 4px;
  font: 700 19px/1.45 var(--mfv-mono);
  overflow-wrap: break-word;
}
.mfv-flag {
  margin: 12px 0 0;
  font: 700 17px/1.35 var(--mfv-mono);
  letter-spacing: 0.04em;
  color: var(--mfv-red);
}
.mfv-flag.is-time { color: var(--mfv-ink-60); }
.mfv-note {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--mfv-ink-60);
}
.mfv-note.is-priority { color: var(--mfv-red); }
.mfv-visual:empty { display: none; }
.mfv-map {
  margin-top: 16px;
  width: 100%;
  aspect-ratio: 720 / 300;
  background: #E3DFD5;
  border-radius: 12px;
  overflow: hidden;
}
.mfv-map img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mfv-stamp {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font: 700 17px/1.3 var(--mfv-mono);
}
.mfv-shot.is-issue .mfv-stamp { color: var(--mfv-red); }
.mfv-change {
  margin-left: auto;
  min-height: 44px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  color: var(--mfv-ink-60);
  font: 600 15px/1 inherit;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}
/* Per-height checkoff (2026-08-26): a stack's heights are separate
   captures — one row, one button, one pin write each. */
.mfv-heights-log {
  margin-top: 16px;
  border: 1px solid var(--mfv-hairline);
  border-radius: 10px;
  overflow: hidden;
}
.mfv-heights-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--mfv-hairline);
}
.mfv-heights-log-head span {
  font: 700 13px/1 inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mfv-ink-60);
}
.mfv-heights-all {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--mfv-ink);
  border-radius: 8px;
  background: transparent;
  color: var(--mfv-ink);
  font: 700 15px/1 inherit;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.mfv-height-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 12px;
}
.mfv-height-row + .mfv-height-row { border-top: 1px solid var(--mfv-hairline); }
.mfv-height-row.is-done { background: rgba(63, 122, 88, 0.07); }
.mfv-height-row.is-issue { background: rgba(176, 124, 46, 0.09); }
.mfv-height-ft {
  font-family: var(--mfv-mono, var(--vnt-font-mono));
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 72px;
}
.mfv-height-stamp {
  font-size: 15px;
  color: var(--mfv-ink-60);
  flex: 1;
}
.mfv-height-row.is-done .mfv-height-stamp { color: #3f7a58; }
.mfv-height-row.is-issue .mfv-height-stamp { color: #b07c2e; }
.mfv-height-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.mfv-height-actions button {
  min-width: 48px;
  min-height: 44px;
  border-radius: 8px;
  font: 700 17px/1 inherit;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.mfv-height-done {
  background: var(--mfv-ink);
  color: var(--mfv-paper);
  border: 1px solid var(--mfv-ink);
}
.mfv-height-issue {
  background: transparent;
  color: var(--mfv-ink);
  border: 1px solid var(--mfv-ink);
}
.mfv-height-undo {
  background: transparent;
  color: var(--mfv-ink);
  border: 0;
  text-decoration: underline;
  font-size: 15px;
}

.mfv-actions { display: flex; gap: 12px; margin-top: 16px; }
.mfv-actions button {
  flex: 1;
  min-height: 48px;
  border-radius: 10px;
  font: 700 17px/1 inherit;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.mfv-btn-done {
  background: var(--mfv-ink);
  color: var(--mfv-paper);
  border: 1px solid var(--mfv-ink);
}
.mfv-btn-done:active { opacity: 0.85; }
.mfv-btn-reshoot {
  background: transparent;
  color: var(--mfv-ink);
  border: 1px solid var(--mfv-ink);
}
.mfv-btn-reshoot:active { background: rgba(20, 20, 20, 0.06); }
.mfv-reshoot { margin-top: 16px; }
.mfv-reshoot textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--mfv-hairline);
  border-radius: 10px;
  font: 400 15px/1.4 inherit;
  font-family: inherit;
  color: var(--mfv-ink);
}
.mfv-reshoot-row { display: flex; gap: 12px; margin-top: 10px; }
.mfv-reshoot-row button {
  flex: 1;
  min-height: 48px;
  border-radius: 10px;
  font: 700 15px/1 inherit;
  font-family: inherit;
  cursor: pointer;
}
.mfv-btn-cancel {
  background: transparent;
  border: 1px solid var(--mfv-hairline);
  color: var(--mfv-ink-60);
}
.mfv-btn-confirm {
  background: var(--mfv-red);
  border: 1px solid var(--mfv-red);
  color: #fff;
}
.mfv-empty {
  margin-top: 32px;
  padding: 20px;
  border: 1px dashed var(--mfv-hairline);
  border-radius: 12px;
  color: var(--mfv-ink-60);
  font-size: 14px;
}
.mfv-foot {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--mfv-hairline);
}
.mfv-foot-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: 16px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--mfv-ink);
  font: 600 14px/1 inherit;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.mfv-foot-meta {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mfv-ink-60);
}
.mfv-panel textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--mfv-hairline);
  border-radius: 10px;
  font: 400 15px/1.4 inherit;
  font-family: inherit;
  color: var(--mfv-ink);
}
.mfv-panel #mfvNoteSave {
  min-height: 48px;
  margin-top: 10px;
  padding: 0 20px;
  background: var(--mfv-ink);
  color: var(--mfv-paper);
  border: 1px solid var(--mfv-ink);
  border-radius: 10px;
  font: 700 15px/1 inherit;
  font-family: inherit;
}
/* Author display rules outrank the UA [hidden] rule — restore it explicitly
   so logged cards actually collapse their buttons. */
.mfv [hidden] { display: none !important; }

/* --- Field feed round 3 --- */
/* The app shell is dark; this route is paper. Painting the root stops the
   dark background showing through overscroll and any uncovered area. */
html.vnt-paper-route,
html.vnt-paper-route body { background: #F2F0EB; }
.mfv-contract {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mfv-ink-60);
}
.mfv-undo { display: flex; gap: 12px; margin-top: 16px; }
.mfv-undo button { flex: 1; min-height: 48px; border-radius: 10px; font: 700 15px/1 inherit; font-family: inherit; cursor: pointer; }
.mfv-reason {
  min-height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  color: var(--mfv-ink-60);
  font: 600 13px/1 inherit;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.mfv-foot-total {
  margin: 12px 0 0;
  font: 700 13px/1.5 var(--mfv-mono);
  color: var(--mfv-ink);
}
/* The checklist panel still renders legacy mobile components; scope them to
   the paper page so the drawer stops looking like a different application. */
.mfv .mobile-checklist-progress {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--mfv-hairline);
  border-radius: 0;
  color: var(--mfv-ink);
  padding: 8px 0;
}
.mfv .mobile-checklist-progress span,
.mfv .mobile-checklist-progress strong { color: var(--mfv-ink); }
.mfv .mobile-checklist-progress i { background: var(--mfv-ink); }
.mfv .mobile-checklist-item {
  min-height: 48px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--mfv-hairline);
  border-radius: 0;
  color: var(--mfv-ink);
}
.mfv .mobile-checklist-item span { color: var(--mfv-ink); }
.mfv .mobile-checklist-item small,
.mfv .mobile-checklist-item em { color: var(--mfv-ink-60); }
.mfv .mobile-checklist-item.is-complete { color: var(--mfv-ink-60); }
.mfv .mobile-empty-card {
  background: transparent;
  border: 1px dashed var(--mfv-hairline);
  color: var(--mfv-ink-60);
}

/* The shared map failure/loading states are dark-theme components; inside the
   paper feed they must read as a quiet empty frame, not a black hole. */
.mfv .brief-static-map.is-preview-image-failed,
.mfv .mfv-map .brief-live-map-loading {
  background: #E3DFD5;
  color: var(--mfv-ink-60);
  border: 0;
}
.mfv .mfv-map .brief-live-map-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font: 600 12px/1 inherit;
  font-family: inherit;
}

/* --- Field feed round 4 --- */
/* Window dots must match the PRINTED brief, which fills them with colors[2]
   (the pastel highlight) — reusing the planner's .brief-time-chip-* gradients
   put dark plum dots on paper. Hard times are red, as on the page. */
.mfv .mfv-window-dot { background-image: none; }
.mfv .mfv-window-dot.brief-time-chip-bluehour,
.mfv .mfv-window-dot.brief-time-chip-twilight_am { background-color: #54a3d4; }
.mfv .mfv-window-dot.brief-time-chip-sunrise { background-color: #ffd36b; }
.mfv .mfv-window-dot.brief-time-chip-midday { background-color: #c8f3ff; }
.mfv .mfv-window-dot.brief-time-chip-golden,
.mfv .mfv-window-dot.brief-time-chip-morning { background-color: #ffe28f; }
.mfv .mfv-window-dot.brief-time-chip-sunset { background-color: #ff9c38; }
.mfv .mfv-window-dot.brief-time-chip-twilight,
.mfv .mfv-window-dot.brief-time-chip-dusk { background-color: #4979aa; }
.mfv .mfv-window-dot.brief-time-chip-custom { background-color: var(--mfv-red); }
/* Pastel dots need a hairline to stay visible on paper. */
.mfv .mfv-window-dot { box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.22); }

/* Priority reads like the brief's red row: tinted band, red heights. */
.mfv-shot.is-priority { background: var(--mfv-red-tint); }
.mfv-shot.is-priority .mfv-heights { color: var(--mfv-red); }

/* --- Field feed round 5 --- */
.mfv-site {
  margin: 8px 0 0;
  font: 600 13px/1.5 var(--mfv-mono);
  color: var(--mfv-ink);
}
.mfv-site a { color: var(--mfv-ink); text-decoration: underline; }
.mfv-daydone {
  margin-top: 32px;
  padding: 18px;
  border: 1px solid var(--mfv-ink);
  border-radius: 12px;
  background: var(--mfv-card);
  font: 700 15px/1.4 inherit;
  text-align: center;
  color: var(--mfv-ink);
}
/* Global toast + offline badge are dark-theme chrome; on the paper route they
   floated over the page as if they belonged to a different app. */
html.vnt-paper-route .toast {
  background: #141414;
  color: #F2F0EB;
  border: 1px solid #141414;
}
html.vnt-paper-route .toast.error { background: #C42B1C; border-color: #C42B1C; }
html.vnt-paper-route .offline-badge {
  background: #F8F7F3;
  color: #141414;
  border: 1px solid rgba(20, 20, 20, 0.14);
  box-shadow: none;
}
html.vnt-paper-route .offline-badge .offline-dot { background: #C42B1C; }

/* Segments are capture scopes (2026-08-19): the per-segment 360-stack mint
   and the pattern's scope select. */
.vnt-seg-add-stack {
  flex: 0 0 auto;
  border: 1px solid rgba(89, 128, 166, 0.4);
  border-radius: 999px;
  background: rgba(89, 128, 166, 0.10);
  color: var(--vnt-accent, var(--vnt-accent));
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  cursor: pointer;
  line-height: 16px;
  /* Lives in the segment row's auto-width right column (under the elevation
     numbers) so overflowing name-row content can never paint over it; the
     z-index wins any residual overlap so clicks always reach the button. */
  position: relative;
  z-index: 2;
  margin-top: 4px;
  white-space: nowrap;
}
.vnt-seg-add-stack:hover {
  background: rgba(89, 128, 166, 0.22);
  border-color: rgba(89, 128, 166, 0.8);
}
.vnt-seg-add-stack.armed {
  background: var(--vnt-accent, var(--vnt-accent));
  color: var(--vnt-panel-2);
  border-color: var(--vnt-accent, var(--vnt-accent));
  box-shadow: 0 0 0 3px rgba(89, 128, 166, 0.25);
}
/* The shot-count chip must be able to shrink so the name row never
   overflows its 1fr grid column on narrow rails. */
.vnt-seg-shot-count {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tv-360-scope-select {
  flex: 0 0 auto;
  max-width: 150px;
  height: 22px;
  padding: 0 6px;
  font-size: 11px;
}

/* R7: parcel-draft disclosure on the brief map page. */
.brief-map-caveat {
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid #b07c2e;
  color: #b07c2e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* R7: Map tools — layers get explicit toggle-state cues; actions sit in
   their own group. */
.vnt-map-tools-kicker {
  font-family: var(--vnt-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vnt-text-faint);
  margin: 8px 2px 2px;
}
.vnt-map-tools-kicker:first-child {
  margin-top: 2px;
}
.vnt-layer-toggle::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border: 1px solid var(--vnt-border-2);
  border-radius: 50%;
  background: transparent;
  vertical-align: 1px;
}
.vnt-layer-toggle.active::before {
  background: var(--vnt-success);
  border-color: var(--vnt-success);
}
.vnt-layer-toggle.active {
  border-color: var(--vnt-border-2);
  color: var(--vnt-text);
}

/* ===== Blueprint registration marks (R3) =====
   The web mirror of the PDF's _brief_plate corner ticks: four hairline
   L-marks inset from the frame edge, drawn with layered gradients — no
   markup needed. `.blueprint` opts any element in; the major frames
   (dialogs, shot cards, preview plates, portal cards) are members. */
.blueprint,
.modal-card,
.tv-ai-modal,
.portal-card,
.portal-shot-card,
.brief-3d-preview-card,
.brief-shot-instruction-card,
.permit-map-shell {
  position: relative;
}
.blueprint::after,
.modal-card::after,
.tv-ai-modal::after,
.portal-card::after,
.portal-shot-card::after,
.brief-3d-preview-card::after,
.brief-shot-instruction-card::after,
.permit-map-shell::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 4;
  pointer-events: none;
  --tick-ink: var(--vnt-border-2);
  background-image:
    linear-gradient(var(--tick-ink), var(--tick-ink)),
    linear-gradient(var(--tick-ink), var(--tick-ink)),
    linear-gradient(var(--tick-ink), var(--tick-ink)),
    linear-gradient(var(--tick-ink), var(--tick-ink)),
    linear-gradient(var(--tick-ink), var(--tick-ink)),
    linear-gradient(var(--tick-ink), var(--tick-ink)),
    linear-gradient(var(--tick-ink), var(--tick-ink)),
    linear-gradient(var(--tick-ink), var(--tick-ink));
  background-size: 1px 7px, 7px 1px, 1px 7px, 7px 1px, 1px 7px, 7px 1px, 1px 7px, 7px 1px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

/* Paste Capture Heights — the height-list door into a 360 stack.
   Steel accent per the Roadmap v2 visual standard, deliberately NOT the
   legacy teal the neighbouring .tv-csv-preview-* rules still use. */
.tv-height-list-modal {
  max-width: 560px;
}
.tv-height-list-input {
  width: 100%;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
}
.tv-height-list-echo {
  margin-top: 12px;
  min-height: 56px;
}
.tv-height-list-empty {
  color: var(--text-muted);
  font-size: 12px;
}
.tv-height-list-count {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.tv-height-list-count strong {
  color: #5980a6;
  font-size: 14px;
}
.tv-height-list-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tv-height-list-chip {
  padding: 3px 9px;
  border: 1px solid rgba(89, 128, 166, 0.42);
  background: rgba(89, 128, 166, 0.12);
  color: var(--text-primary);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
}

/* ===== Phone gate — workspace views are desktop-only (owner ruling
   2026-08-26). Night tokens: this renders over the dark app shell. ===== */
.vnt-phone-block {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--vnt-bg);
}
.vnt-phone-block-card {
  max-width: 420px;
  border: 1px solid var(--vnt-border);
  padding: 24px 20px;
  display: grid;
  gap: 10px;
}
.vnt-phone-block-kicker {
  font-family: var(--vnt-font-heading);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vnt-accent-700);
}
.vnt-phone-block-card h1 {
  margin: 0;
  font-family: var(--vnt-font-heading);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.05;
  color: var(--vnt-text);
}
.vnt-phone-block-card p {
  margin: 0;
  font-size: 17px;
  color: var(--vnt-text-dim);
}
.vnt-phone-block-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.vnt-phone-block-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--vnt-border);
  color: var(--vnt-text);
  text-decoration: none;
  font-family: var(--vnt-font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vnt-phone-block-actions .vnt-phone-block-primary {
  background: var(--vnt-accent);
  border-color: var(--vnt-accent);
  color: var(--vnt-bg);
}

/* G4 reference board (Brief Designer rail, 2026-08-27): DO / DON'T slots. */
.brief-ref-note { margin: 0 0 8px; color: var(--vnt-text-muted); font-size: 11px; line-height: 1.45; }
.brief-ref-board { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.brief-ref-slot { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.brief-ref-slot-head { display: flex; align-items: center; justify-content: space-between; min-height: 14px; }
.brief-ref-slot-head b { font: 700 8.5px/1 var(--vnt-font-mono); letter-spacing: 0.12em; }
.brief-ref-remove { border: 0; background: none; color: var(--vnt-text-faint); font-size: 10px; cursor: pointer; text-decoration: underline; padding: 0; }
.brief-ref-remove:hover { color: var(--vnt-danger, #ab4634); }
.brief-ref-thumb { width: 100%; height: 74px; object-fit: cover; border: 1px solid var(--vnt-border); display: block; }
.brief-ref-drop { display: grid; place-items: center; height: 74px; border: 1px dashed var(--vnt-border); color: var(--vnt-text-muted); font-size: 11px; cursor: pointer; }
.brief-ref-drop:hover { border-color: var(--vnt-accent); color: var(--vnt-accent); }
.brief-ref-caption { font-size: 11px; }

/* NSEW Site Views (pre-sale, 2026-08-27): permit-page band + planner row.
   Paper plates, mono labels — DS language; the active floor chip inverts. */
.permit-siteviews-wrap { padding: 18px 16px 6px; }
.permit-siteviews { border: 1px solid rgba(29, 31, 32, 0.22); background: #fff; padding: 12px; margin-bottom: 14px; }
.permit-siteviews-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.permit-siteviews-head strong { font: 700 15px/1.2 var(--vnt-font-heading, "Barlow Condensed", sans-serif); letter-spacing: 0.02em; text-transform: uppercase; color: #1d1f20; }
.permit-siteviews-head span { font: 400 8.5px/1.3 var(--vnt-font-mono); color: #66696c; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.permit-siteviews-floors { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.permit-sv-floor { padding: 4px 9px; border: 1px solid rgba(29, 31, 32, 0.28); background: #fff; color: #1d1f20; font: 700 9.5px/1.3 var(--vnt-font-mono); cursor: pointer; }
.permit-sv-floor.active { background: #1d1f20; color: #fff; border-color: #1d1f20; }
.permit-siteviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.permit-sv-cell { margin: 0; position: relative; border: 1px solid rgba(29, 31, 32, 0.18); overflow: hidden; }
.permit-sv-cell img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #e9eaeb; }
.permit-sv-cell figcaption { position: absolute; top: 6px; left: 6px; padding: 2px 7px; background: #f2f2f3; border: 1px solid #1d1f20; color: #1d1f20; font: 700 8px/1.3 var(--vnt-font-mono); letter-spacing: 0.12em; }
.permit-siteviews-note { margin: 8px 0 0; color: #66696c; font-size: 10.5px; line-height: 1.45; }
.tv-360-siteviews-row { margin-top: 6px; }

/* Video route previews (ruling 2026-08-26 #4): START / MID / END grabs on
   the brief's video card — three hairline plates with mono corner tags. */
.brief-route-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.brief-route-preview-cell { margin: 0; position: relative; border: 1px solid rgba(29, 31, 32, 0.18); overflow: hidden; }
.brief-route-preview-cell img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #e9eaeb; }
.brief-route-preview-cell figcaption { position: absolute; top: 5px; left: 5px; padding: 2px 6px; background: #f2f2f3; border: 1px solid #1d1f20; color: #1d1f20; font: 700 7.5px/1.3 var(--vnt-font-mono); letter-spacing: 0.12em; }

/* Day Timeline + Altitude Ladder (makeover P4, 2026-08-27): the day's
   shape in time and height. Paper plates, mono labels, window inks. */
.brief-day-timeline { margin: 0 0 14px; border: 1px solid rgba(29, 31, 32, 0.22); background: #fff; padding: 10px 12px 12px; }
.brief-day-timeline-kicker { font: 700 8px/1.3 var(--vnt-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #5980a6; margin-bottom: 8px; }
.brief-day-timeline-kicker em { font-style: normal; color: #8a8c8e; margin-left: 8px; letter-spacing: 0.06em; }
.brief-day-timeline-track { position: relative; height: 52px; border-top: 1px solid rgba(29, 31, 32, 0.18); border-bottom: 1px solid rgba(29, 31, 32, 0.18); background: #fafafa; }
.brief-day-timeline-tick { position: absolute; top: 0; bottom: -16px; font: 400 6.5px/1 var(--vnt-font-mono); color: #8a8c8e; letter-spacing: 0.06em; }
.brief-day-timeline-tick i { position: absolute; top: 0; bottom: 16px; left: 0; width: 1px; background: rgba(29, 31, 32, 0.10); }
.brief-day-timeline-tick { display: flex; align-items: flex-end; padding-left: 3px; }
.brief-day-timeline-win { position: absolute; top: 8px; bottom: 8px; border: 1px solid; background: #fff; overflow: hidden; display: flex; align-items: center; gap: 5px; padding: 0 6px 0 0; min-width: 0; }
.brief-day-timeline-win i { width: 4px; align-self: stretch; flex: 0 0 auto; }
.brief-day-timeline-win b { font: 700 8px/1.2 var(--vnt-font-mono); color: #1d1f20; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.brief-day-timeline-win.is-point { min-width: 10px; }
.brief-alt-ladder { margin: 14px 0 12px; border: 1px solid rgba(29, 31, 32, 0.22); background: #fff; padding: 10px 12px; }
.brief-alt-ladder-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 78px; gap: 8px; align-items: center; min-height: 18px; }
.brief-alt-ladder-row b { font: 700 9.5px/1 var(--vnt-font-mono); color: #1d1f20; }
.brief-alt-ladder-row em { font: 400 8px/1.2 var(--vnt-font-mono); font-style: normal; color: #66696c; text-align: right; white-space: nowrap; }
.brief-alt-ladder-track { position: relative; height: 8px; background: #f0f0f1; border: 1px solid rgba(29, 31, 32, 0.10); min-width: 0; }
.brief-alt-ladder-bar { position: absolute; top: 1px; bottom: 1px; }

/* Benchmark close-out (2026-08-27): sun bearings, 360 view ladder. */
.brief-day-sched-sun { float: right; margin-right: 12px; color: #b07c2e; font: 700 8.5px/1.4 var(--vnt-font-mono); letter-spacing: 0.08em; }
.brief-360-viewladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 8px 0; }
.brief-360-viewladder-cell { margin: 0; position: relative; border: 1px solid rgba(29, 31, 32, 0.18); overflow: hidden; }
.brief-360-viewladder-cell img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #e9eaeb; }
.brief-360-viewladder-cell figcaption { position: absolute; top: 5px; left: 5px; padding: 2px 6px; background: #f2f2f3; border: 1px solid #1d1f20; color: #1d1f20; font: 700 7.5px/1.3 var(--vnt-font-mono); letter-spacing: 0.1em; }
.brief-360-viewladder-note { grid-column: 1 / -1; font: 400 6.5px/1.4 var(--vnt-font-mono); color: #8a8c8e; letter-spacing: 0.08em; }