/* ==========================================================================
   BIG SKY FPV 2.0 — Safety Dashboard + Process + Difference
   F1 telemetry styling: the control-panel look that makes ops feel like a system.
   ========================================================================== */

/* ---- Dashboard cards (expandable) ---------------------------------------- */
.dash-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.dash-card {
  background: var(--ink-900); border: 1px solid var(--line); border-radius: var(--radius);
  text-align: left; width: 100%; cursor: pointer; padding: var(--space-3);
  transition: border-color var(--t-standard) var(--ease);
  font: inherit; color: inherit;
}
.dash-card:hover { border-color: var(--ink-700); }
.dash-card[aria-expanded="true"] { border-color: var(--accent); grid-column: 1 / -1; }
.dash-card__head { display: flex; align-items: center; gap: var(--space-1); }
.dash-card__light {
  width: 8px; height: 8px; border-radius: 50%; background: var(--signal-ok);
  box-shadow: 0 0 8px color-mix(in srgb, var(--signal-ok) 60%, transparent);
  flex-shrink: 0;
}
.dash-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--heading-m); color: var(--text-primary); }
.dash-card__data {
  font-family: var(--font-mono); font-size: var(--mono-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-tertiary); margin-top: var(--space-1);
}
.dash-card__detail { display: none; }
.dash-card[aria-expanded="true"] .dash-card__detail {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
@media (max-width: 760px) { .dash-card[aria-expanded="true"] .dash-card__detail { grid-template-columns: 1fr; } }
.dash-card__detail h4 {
  font-family: var(--font-mono); font-size: var(--mono-label); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--space-1);
}
.dash-card__detail p { color: var(--text-secondary); font-size: 0.9375rem; }
.dash-card__actions { grid-column: 1 / -1; display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---- Process timeline ------------------------------------------------------- */
.process { position: relative; }
.process::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px;
  width: 1px; background: var(--line);
}
.process-step { position: relative; padding: 0 0 var(--space-4) var(--space-5); }
.process-step:last-child { padding-bottom: 0; }
.process-step__node {
  position: absolute; left: 0; top: 4px;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--ink-950); border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: border-color var(--t-standard) var(--ease);
}
.process-step__node::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-tertiary);
  transition: background var(--t-standard) var(--ease);
}
.process-step.is-open .process-step__node { border-color: var(--accent); }
.process-step.is-open .process-step__node::after { background: var(--accent); }
.process-step__btn {
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: baseline; gap: var(--space-2); text-align: left;
  font: inherit; color: inherit; width: 100%;
}
.process-step__num { font-family: var(--font-mono); font-size: var(--mono-label); color: var(--text-tertiary); }
.process-step__title { font-family: var(--font-display); font-weight: 600; font-size: var(--heading-m); color: var(--text-primary); }
.process-step__btn:hover .process-step__num { color: var(--accent); }
.process-step__body { display: none; margin-top: var(--space-2); max-width: 60ch; }
.process-step.is-open .process-step__body { display: block; }
.process-step__body p { color: var(--text-secondary); }
.process-step__client {
  margin-top: var(--space-2); padding: var(--space-2);
  background: var(--ink-900); border-left: 2px solid var(--accent);
  font-size: 0.9375rem; color: var(--text-secondary);
}
.process-step__client strong {
  font-family: var(--font-mono); font-size: var(--mono-label); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: 4px;
}

/* ---- Big Sky Difference ------------------------------------------------------- */
.difference { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 860px) { .difference { grid-template-columns: 1fr; } }
.difference__col { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); }
.difference__col--us { background: var(--ink-900); border-color: var(--ink-700); }
.difference__label {
  font-family: var(--font-mono); font-size: var(--mono-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: var(--space-2);
}
.difference__col--us .difference__label { color: var(--accent); }
.difference__list { list-style: none; }
.difference__list li { padding-block: 8px; color: var(--text-secondary); border-top: 1px solid var(--line); }
.difference__list li:first-child { border-top: 0; }
.difference__list li::before { content: "✓"; font-family: var(--font-mono); margin-right: var(--space-1); color: var(--text-tertiary); }
.difference__col--us .difference__list li::before { color: var(--signal-ok); }
.difference__col--us .difference__list a { color: inherit; border-bottom: 1px dashed var(--line); }
.difference__col--us .difference__list a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ============================================================================
   OPS MAP LAYER — flight-path & operations map behind the safety page.
   Native SVG (crisp at any size): dashed ops boundary, color-coded flight
   lines (cinema vs over-people), takeoff/landing marks, and two aircraft
   dots flying their routes. Sticky ambient layer, mouse-parallax via reveal.js.
   ========================================================================== */
.ops-zone { position: relative; }
.ops-map {
  position: sticky; top: 0; height: 0; z-index: 0;
  pointer-events: none;
}
.ops-map svg {
  position: absolute; top: 4vh; left: 50%;
  transform: translateX(-50%);
  width: min(1400px, 110vw); height: auto;
  opacity: 0.34;
  -webkit-mask-image: radial-gradient(85% 85% at 50% 50%, #000 45%, transparent 78%);
          mask-image: radial-gradient(85% 85% at 50% 50%, #000 45%, transparent 78%);
}
.ops-zone > .section, .ops-zone > header { position: relative; z-index: 1; }

.om-boundary {
  fill: none; stroke: color-mix(in srgb, var(--text-primary) 45%, transparent);
  stroke-width: 2; stroke-dasharray: 14 10;
  animation: om-march 30s linear infinite;
}
@keyframes om-march { to { stroke-dashoffset: -240; } }
.om-venue, .om-block {
  fill: color-mix(in srgb, var(--ink-700) 40%, transparent);
  stroke: var(--line); stroke-width: 1;
}
.om-path { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.om-path--a {
  stroke: var(--accent);
  stroke-dasharray: 8 8;
  animation: om-march 24s linear infinite reverse;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent));
}
.om-path--b {
  stroke: #ffb224;
  stroke-dasharray: 6 8;
  animation: om-march 18s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255, 178, 36, 0.5));
}
.om-dot--a {
  fill: var(--accent);
  filter: drop-shadow(0 0 8px var(--accent));
  offset-path: path("M240 620 C 180 420, 320 200, 620 190 C 920 180, 1040 340, 980 480 C 930 600, 700 660, 460 640 C 380 632, 300 630, 240 620 Z");
  animation: om-fly 26s linear infinite;
}
.om-dot--b {
  fill: #ffb224;
  filter: drop-shadow(0 0 8px #ffb224);
  offset-path: path("M430 500 C 420 380, 520 300, 640 310 C 770 320, 820 420, 760 490 C 700 555, 500 570, 430 500 Z");
  animation: om-fly 15s linear infinite reverse;
}
@keyframes om-fly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.om-tri-up { fill: var(--signal-ok); }
.om-tri-dn { fill: var(--accent); }
.om-mark text {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em;
  fill: color-mix(in srgb, var(--text-secondary) 80%, transparent);
}
.om-mark--b text { fill: rgba(255, 178, 36, 0.8); }
@media (prefers-reduced-motion: reduce) {
  .om-boundary, .om-path, .om-dot--a, .om-dot--b { animation: none; }
}

/* ---- ops map v2: street grid, parcels, hatches, red mission line ------------- */
.om-roads path {
  fill: none;
  stroke: color-mix(in srgb, #ffffff 16%, transparent);
  stroke-width: 1;
}
.om-roads .om-road--major { stroke-width: 2.5; stroke: color-mix(in srgb, #ffffff 22%, transparent); }
.om-parcels rect {
  fill: color-mix(in srgb, #ffffff 4%, transparent);
  stroke: color-mix(in srgb, #ffffff 14%, transparent);
  stroke-width: 1;
}
.om-hatch rect {
  fill: none;
  stroke: color-mix(in srgb, #ffffff 10%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}
/* red mission line: slowly draws across the map, holds, fades, repeats */
.om-path--c {
  stroke: #E5484D;
  stroke-width: 2.5;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  filter: drop-shadow(0 0 6px rgba(229, 72, 77, 0.55));
  animation: om-draw 18s linear infinite;
}
@keyframes om-draw {
  0%        { stroke-dashoffset: 1000; opacity: 1; }
  60%       { stroke-dashoffset: 0;    opacity: 1; }
  82%       { stroke-dashoffset: 0;    opacity: 1; }
  96%, 100% { stroke-dashoffset: 0;    opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .om-path--c { animation: none; stroke-dashoffset: 0; } }

/* map shows through every section on this page, contact band included */
.ops-zone .section--alt { background: color-mix(in srgb, var(--ink-900) 42%, transparent); }
.contact-band--map {
  background: none;
  border-block: 0;
}

/* ---- v1.7.4: dash cards, full-size ops consoles ------------------------------
   Bigger 2-up cards; the "What it lets us do" education is ALWAYS visible;
   click still expands "What it means for you" + actions. */
.dash-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
@media (max-width: 760px) { .dash-grid { grid-template-columns: 1fr; } }

.dash-card {
  position: relative;
  text-align: left;
  padding: var(--space-3);
  background: color-mix(in srgb, var(--ink-900) 68%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-left: 3px solid color-mix(in srgb, var(--signal-ok) 50%, transparent);
  border-radius: var(--radius);
  transition: transform var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease);
}
.dash-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  border-left-color: var(--signal-ok);
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--accent) 45%, transparent);
}
.dash-card__light { animation: bsf-pulse 2.4s var(--ease) infinite; }
@keyframes bsf-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal-ok) 50%, transparent); }
  55%      { box-shadow: 0 0 0 7px transparent; }
}
.dash-card__data { margin-top: 6px; }

/* education visible by default; expansion adds the rest */
.dash-card__detail { display: block; margin-top: var(--space-2); }
.dash-card__detail > span { display: none; }
.dash-card__detail > span:first-child { display: block; }
.dash-card__detail p { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.55; }
.dash-card[aria-expanded="true"] .dash-card__detail > span { display: block; }

/* expand cue, console-style */
.dash-card::after {
  content: "EXPAND +";
  position: absolute; top: var(--space-3); right: var(--space-3);
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: var(--tracking-label); color: var(--text-tertiary);
  transition: color var(--t-micro) var(--ease);
}
.dash-card:hover::after { color: var(--accent); }
.dash-card[aria-expanded="true"]::after { content: "COLLAPSE −"; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .dash-card__light { animation: none; } }

/* v1.8.8: keep the EXPAND cue off the card title on phones */
@media (max-width: 640px) { .dash-card__head { padding-right: 86px; } }