/* =====================================================================
   Operations Command Section — Borneo Distributed Logistics Console
   =====================================================================
   SCOPE
     Every rule is scoped to `.operations` — the section class that
     actually exists in index.html / build_html.py. An earlier revision
     scoped to `.ops-command`, a class that never appears in the markup,
     which silently disabled this entire stylesheet and every motion
     hook in operations.js (the section fell back to the global
     `.metric-block` rules in style.css: 2-column grid with 80–128px
     numerals). Do not reintroduce `.ops-command`.

   RESPONSIVE / VIEWPORT BUDGETING
   - Desktop >1100px: telemetry map is an absolutely positioned backdrop
     (58% width, negative insets as parallax bleed, clipped by the
     section). Metrics render as ONE 3-column row (20 / 16 / 4) sharing
     a numeral baseline: identical font metrics + line-height 1 +
     tabular figures, labels top-locked under each numeral.
   - Laptop 1366×768 / 1440×900: vertical rhythm is viewport-proportional
     (padding-block clamp(64px, 9vh, 110px); intro margin
     clamp(28px, 4.5vh, 48px)) plus a hard compaction tier at
     (min-width:1101px) and (max-height:820px). Budget at 1366×768:
     56 pad + 39 eyebrow + 100 h2 + 81 intro + 24 gap + ~262 metric
     block ≈ 562px < 668px usable under the scroll-padding offset, so an
     anchor jump to #operations shows the heading, all three metric
     numerals AND their labels simultaneously — no awkward truncation.
   - Tablet 761–1100px: map widens to 65% and dims; metrics stay 3-up
     with tighter gaps and padding.
   - Mobile ≤760px: the map becomes a full-bleed top telemetry banner,
     height min(42vh, 300px), cover-cropped by the SVG's
     preserveAspectRatio="xMidYMid slice" attribute (object-fit does NOT
     apply to inline SVG — that is set in the markup, not here). The 3
     metrics stack as separated rows (numeral left, label right, hairline
     separators). All interactive elements keep a ≥44px touch target;
     duty chips are padded to 44px min-height for consistent rhythm.

   THEME (dark default / html[data-theme=light])
     Light mode re-inks the SVG map instead of letting site gold wash
     out on cream: polygon strokes + labels + HUD grid use #705423 ink,
     route arteries switch to solid rust #a0472e, river spine to
     #0284c7. The photo badge and status chips use FIXED high-contrast
     scrims (never var(--accent) over a photo/scrim), so both themes
     clear WCAG AA for their text.

   GPU / COMPOSITOR CONTRACT (60fps)
     - Animated elements: .ops-telemetry (yPercent/rotation drift),
       .ops-chip (y drift), .ops-feed (y counter-drift, >760px only).
       Those three — and only those — carry will-change: transform.
     - NONE of them carries backdrop-filter: chips and the feed card use
       solid translucent scrims (.glass blur is explicitly overridden)
       because a blurred layer is re-filtered on every composited frame.
     - transform/opacity only; the stroke-dash river draw is bounded to a
       single path; will-change is dropped under reduced-motion/motion-off.
   ===================================================================== */

/* ---- 0. Section shell & scrims ------------------------------------ */

.operations {
  /* Theme-local scrim tokens (kept independent of .glass blur) */
  --ops-scrim: rgba(25, 42, 32, 0.92);      /* feed card, chips */
  --ops-scrim-strong: rgba(20, 36, 27, 0.9); /* photo badge */
  --ops-chip-ink: #e4c999;                  /* gold ink ON dark scrim */
  position: relative;
  overflow: clip; /* clips map bleed + ±0.1° drift rotation; no h-scroll */
  padding-block: clamp(36px, 4.5vh, 56px);   /* py-16 … py-28 viewport-scaled */
}

html[data-theme=light] .operations {
  --ops-scrim: rgba(239, 241, 227, 0.94);
  --ops-scrim-strong: rgba(20, 36, 27, 0.9); /* stays dark: sits over a photo */
  --ops-chip-ink: #705423;
}

/* Compact intro so the metric row reaches the first laptop screen */
.operations .section-intro {
  margin-bottom: clamp(18px, 2.8vh, 28px);
}

.ops-stage {
  position: relative;
  isolation: isolate; /* keeps the z-index:-1 backdrop above section bg */
}

/* ---- 1. Telemetry map backdrop ------------------------------------ */

.ops-telemetry {
  position: absolute;
  top: -4%;
  right: -2%;
  bottom: -6%;
  width: 58%;
  z-index: -1;
  opacity: 0.55;
  pointer-events: none;
  will-change: transform; /* animated: scrubbed yPercent/rotation drift */
  display: flex;
  align-items: center;
  justify-content: center;
}

.ops-telemetry svg {
  width: 100%;
  height: 100%;
  max-height: 850px;
  /* Crisp cover-crop comes from preserveAspectRatio="xMidYMid slice"
     on the <svg> element in the markup; object-fit is a no-op here. */
}

/* Light theme: re-ink the map — no washed-out gold on cream.
   NOTE: the SVG sets presentation ATTRIBUTES (opacity="0.35",
   stroke-opacity, fill-opacity) which CSS properties override —
   so each override must also re-declare the opacity, not just the
   color, or the attribute value keeps the ink washed out. */
html[data-theme=light] .ops-telemetry { opacity: 0.4; }
html[data-theme=light] .regency-polygon path {
  fill: #e3e5d7;
  fill-opacity: 0.9;
  stroke: #705423;
  stroke-opacity: 0.55;
}
html[data-theme=light] .kcp-nodes text { fill: #21382b; fill-opacity: 1; }
html[data-theme=light] .kcp-nodes circle { stroke: #f0eee4; }
html[data-theme=light] .hud-grid line { stroke: #705423; stroke-opacity: 0.16; }
html[data-theme=light] .regency-labels {
  opacity: 0.85; /* beats the opacity="0.35" attribute */
}
html[data-theme=light] .regency-labels text { fill: #5a4419; }
html[data-theme=light] .distribution-arteries {
  stroke: #a0472e;        /* solid rust: gradient gold fades on cream */
  stroke-opacity: 0.55;
}
html[data-theme=light] .river-spine {
  stroke: #0284c7;
  stroke-opacity: 0.5;
}

/* ---- 2. Metric triad: one 3-column row (20 / 16 / 4) -------------- */

.operations .metric-block {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start; /* shared top edge → shared numeral baseline */
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 24px;
  padding: 22px 24px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.operations .metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 0;
  border-bottom: none; /* reset style.css global .metric rules */
}

.operations .metric strong {
  font-family: var(--display);
  font-size: clamp(44px, 4.6vw, 64px);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.operations .metric span {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  font-weight: 400;
}

/* ---- 3. Duties / role line / details ------------------------------ */

.ops-duties {
  grid-column: 1 / -1;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 16px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.ops-duties li {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12.5px;
  color: var(--text);
  min-height: 44px; /* ≥44px ergonomics, consistent chip rhythm */
  display: flex;
  align-items: center;
}

.operations .role-line {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text);
}

.operations .role-line b { color: var(--accent); }

.ops-details {
  grid-column: 1 / -1;
  margin-top: 4px;
}

/* Interactive: full ≥44px touch target */
.ops-details summary {
  min-height: 44px;
  padding-block: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ops-details p {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---- 4. Command context feed card (foreground plane) -------------- */
/* Animated (y counter-drift >760px) → NO backdrop-filter. The .glass
   blur from style.css is overridden with an opaque-enough scrim so the
   card reads as glass without per-frame re-filtering. */

.operations .ops-feed {
  padding: 22px 24px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: color-mix(in srgb, var(--ops-scrim) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (min-width: 761px) {
  .operations .ops-feed { will-change: transform; } /* drift runs here only */
}

.ops-feed .eyebrow { margin-bottom: 2px; }

.ops-feed h3 {
  font-family: var(--display);
  font-size: 22px; /* site entry-heading standard: 22px desktop */
  font-weight: 500;
  color: var(--text);
  margin: 0;
  line-height: 1.25;
}

.feed-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.feed-list li {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
}

.feed-tag {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 600;
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 6px;
  text-align: center;
  background: var(--surface);
}

.feed-note {
  font-size: 11.5px;
  color: var(--muted);
  margin: 4px 0 0;
  opacity: 0.8;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

/* ---- 5. Floating status chips (parallax plane 2) ------------------ */
/* Animated (y drift) → solid scrim, never backdrop-filter. */

.ops-chip {
  position: absolute;
  z-index: 2;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--ops-chip-ink);
  background: var(--ops-scrim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  pointer-events: none;
  white-space: nowrap;
  will-change: transform;
}

.chip-a { top: 8%; right: 48%; }
.chip-b { top: 48%; right: 4%; }
.chip-c { bottom: 8%; right: 38%; }

/* ---- 6. Command photo + badge -------------------------------------- */

.ops-command-photo {
  margin: 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
  background: var(--bg);
}

.ops-command-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

/* Static overlay → fixed dark scrim + fixed gold ink in BOTH themes
   (var(--accent) turns dark-brown-on-dark-green in light mode). */
.feed-photo-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: var(--ops-scrim-strong);
  color: #e4c999;
  font-family: var(--display);
  font-size: 9px;
  letter-spacing: 0.14em;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid #e4c99933;
}

/* ---- 7. Tablet (761px – 1100px) ------------------------------------ */

@media (max-width: 1100px) {
  .ops-telemetry {
    width: 65%;
    opacity: 0.35;
  }

  .operations .metric-block {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 24px;
  }
}

/* ---- 8. Laptop compaction tier (short viewports) ------------------- */
/* 1366×768, 1280×720, 1440×800-class: keep the whole value proposition
   (heading + 20/16/4 numerals with labels + duty chips) inside the
   first screen after an anchor jump. */

@media (min-width: 1101px) and (max-height: 820px) {
  .operations { padding-block: 48px; }
  .operations .section-intro { margin-bottom: 18px; }
  .operations .section-intro .eyebrow { margin-bottom: 12px; }
  .operations .section-intro h2 { font-size: 44px; line-height: 1.04; margin-bottom: 16px; }
  .operations .metric-block { padding: 18px 22px; gap: 12px; }
  .operations .metric strong { font-size: clamp(40px, 3.6vw, 50px); }
  .operations .metric span { font-size: 12.5px; line-height: 1.4; }
  .ops-duties { margin-top: 10px; padding-top: 10px; gap: 6px; }
  .ops-duties li { min-height: 40px; padding: 6px 14px; font-size: 12px; }
  .operations .role-line { margin-top: 6px; font-size: 13.5px; line-height: 1.45; }
}

/* ---- 9. Mobile (≤760px): banner + stacked metrics ------------------ */

@media (max-width: 760px) {
  html { scroll-padding-top: 130px; } /* 110px wrapped header + landing gap */

  /* Compact intro: on a 390×844 phone the anchor must land the heading,
     intro and at least the first metric (20) inside the first screen.
     Budget: 130 pad + 12 banner-top + 42vh banner (capped 300) + 20 gap
     + ~35 eyebrow + ~73 h2 + ~50 intro + 20 gap + first metric ≈ 700px
     under an 844px viewport — one small scroll reveals the rest. */
  .operations .section-intro { margin-bottom: 20px; }
  .operations .section-intro .eyebrow { margin-bottom: 12px; font-size: 10px; }
  .operations .section-intro h2 { font-size: 32px; line-height: 1.08; margin-bottom: 14px; }
  .operations .section-intro p { font-size: 14px; line-height: 1.55; }

  /* Full-bleed top telemetry banner, cover-cropped by the SVG slice */
  .ops-telemetry {
    position: relative;
    inset: auto;
    width: calc(100% + 48px); /* section side padding is 24px here */
    margin: -4px -24px 20px -24px;
    height: min(42vh, 300px);
    opacity: 0.9;
    overflow: clip;
    border-bottom: 1px solid var(--line);
  }

  .ops-telemetry svg {
    max-height: none;
    width: 100%;
    height: 100%;
  }

  /* Banner overlay chip only; other chips would fight the crop */
  .ops-chip { display: none; }
  .ops-chip.chip-b {
    display: inline-flex;
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 9.5px;
    padding: 5px 12px;
  }

  /* Metrics stack: numeral left, label right, hairline separators */
  .operations .metric-block {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px 18px;
  }

  .operations .metric {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;
    border-bottom: 1px solid var(--line);
    padding-block: 12px;
  }

  .operations .metric:last-of-type { border-bottom: none; }

  .operations .metric strong {
    font-size: clamp(44px, 13vw, 54px);
  }

  .operations .metric span {
    font-size: 12.5px;
    line-height: 1.4;
  }

  .operations .ops-feed {
    padding: 20px 18px;
    background: var(--ops-scrim);
    backdrop-filter: none; /* never re-enable blur on this animated card */
    -webkit-backdrop-filter: none;
    will-change: auto; /* drift tween is gated to >760px in operations.js */
  }

  .ops-feed h3 { font-size: 20px; } /* site entry-heading standard: 20px mobile */

  .feed-list li {
    grid-template-columns: 74px 1fr;
    font-size: 12.5px;
  }
}

@media (max-width: 380px) {
  .ops-telemetry {
    width: calc(100% + 40px); /* section side padding drops to 20px */
    margin: -8px -20px 20px -20px;
  }
}

/* ---- 10. Reduced motion / motion-off guards ------------------------ */

@media (prefers-reduced-motion: reduce) {
  .ops-telemetry,
  .ops-chip,
  .operations .ops-feed {
    transform: none !important;
    will-change: auto !important;
  }
}

body.motion-off .ops-telemetry,
body.motion-off .ops-chip,
body.motion-off .operations .ops-feed {
  transform: none !important;
  will-change: auto !important;
}