/* =============================================================
   DARK HORSE POLITICAL — Enhancements layer
   Adds: responsive (mobile/tablet), focus rings, [CONFIRM] tags,
   confirmation modals, dark-mode toggle, tweak overrides, etc.
   Loads ON TOP of each page's inline tokens. Tokens win on cascade
   because we use the same variable names — we only override at
   media-query / state level.
   ============================================================= */

/* ---------- [CONFIRM] superscript tag ----------
   Wrap unconfirmed values: <span class="confirm">$197<sup>[CONFIRM]</sup></span> */
.confirm sup,
sup.confirm {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--signal);
  background: transparent;
  border: 1px solid var(--signal);
  padding: 1px 4px;
  margin-left: 6px;
  vertical-align: super;
  line-height: 1;
  text-transform: uppercase;
  position: relative;
  top: -0.4em;
  white-space: nowrap;
}
sup.confirm::before { content: ""; }

/* ---------- Focus ring (keyboard) ---------- */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}
.btn:focus-visible,
.site-header__nav a:focus-visible {
  outline-offset: 4px;
}

/* ---------- Page-chrome controls (bottom-right, out of nav) ---------- */
.page-controls {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 90;
  display: flex;
  gap: 8px;
  align-items: center;
}
.page-controls__btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 12px;
  background: var(--paper);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.page-controls__btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.page-controls__btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.page-controls__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--signal);
  border-radius: 50%;
}

/* ---------- Form validation states ---------- */
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"],
.form-field select[aria-invalid="true"] {
  border-color: var(--signal);
  background: rgba(217, 74, 29, 0.04);
}
.form-field__error {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--signal);
  margin-top: 4px;
  display: none;
}
.form-field[data-state="invalid"] .form-field__error { display: block; }
.form-field[data-state="valid"] label::after {
  content: " ✓";
  color: var(--signal);
  font-family: var(--font-mono);
  font-size: 10px;
  margin-left: 4px;
}

/* ---------- Engage confirmation overlay ---------- */
.engage-confirm {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(27, 25, 22, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.engage-confirm[data-open="true"] { display: flex; }
.engage-confirm__panel {
  background: var(--paper);
  color: var(--ink);
  max-width: 640px;
  width: 100%;
  padding: 56px 48px;
  border-top: 4px solid var(--signal);
}
.engage-confirm__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--signal);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.engage-confirm__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 24px;
}
.engage-confirm__body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 32px;
}
.engage-confirm__body p + p { margin-top: 16px; }
.engage-confirm__sig {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 300;
  color: var(--ink-mute);
  margin-bottom: 32px;
}

/* ---------- ARMR tier selector ---------- */
.armr-tiers .card {
  cursor: pointer;
  transition: border-color 160ms, transform 160ms;
}
.armr-tiers .card:hover {
  border-color: var(--ink);
}
.armr-tiers .card[aria-pressed="true"] {
  border-color: var(--signal);
  border-left-width: 3px;
}
.armr-tiers .card[aria-pressed="true"] .t-meta {
  color: var(--signal);
  font-weight: 700;
}
.armr-detail {
  margin-top: 32px;
  padding: 32px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--signal);
  display: none;
}
.armr-detail[data-open="true"] { display: block; }
.armr-detail h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--signal);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ---------- Briefings filter active state ---------- */
.briefings-filter .tag { cursor: pointer; transition: all 120ms; }
.briefings-filter .tag:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- Card / link interactive states (light touch) ---------- */
.card { transition: transform 220ms cubic-bezier(0.22,0.61,0.36,1), border-color 220ms; }
.card--bordered:hover { border-color: var(--ink); }
.site-header__nav a { position: relative; transition: color 120ms; }
.site-header__nav a:not(.cta):hover { color: var(--signal); }
.site-header__nav a.is-active::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px;
  background: var(--signal);
}

/* ---------- Tweaks panel ---------- */
.tweaks {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 320px;
  max-height: 78vh;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--signal);
  box-shadow: 0 12px 40px rgba(27,25,22,0.18);
  z-index: 95;
  font-family: var(--font-sans);
  display: none;
}
.tweaks[data-open="true"] { display: block; }
.tweaks__head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tweaks__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink);
  text-transform: uppercase;
}
.tweaks__close {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-mute);
  cursor: pointer;
  background: none; border: none;
  padding: 4px 8px;
}
.tweaks__close:hover { color: var(--signal); }
.tweaks__section {
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule-soft);
}
.tweaks__section:last-child { border-bottom: none; }
.tweaks__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}
.tweaks__row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tweaks__row:last-child { margin-bottom: 0; }
.tweaks__row label {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
  flex: 1;
}
.tweaks__radio {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.tweaks__radio button {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  cursor: pointer;
}
.tweaks__radio button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.tweaks__swatches { display: flex; gap: 6px; }
.tweaks__swatch {
  width: 28px; height: 28px;
  border: 2px solid var(--rule);
  cursor: pointer;
  padding: 0;
}
.tweaks__swatch[aria-pressed="true"] {
  border-color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.tweaks__slider { flex: 1; }
.tweaks__value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  min-width: 36px;
  text-align: right;
}

/* Hero variant: mark in composition */
body[data-hero-variant="mark-bg"] .hero {
  position: relative;
  overflow: hidden;
}
body[data-hero-variant="mark-bg"] .hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  width: 720px;
  height: 540px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 200'><line x1='20' y1='80' x2='260' y2='80' stroke='%23d94a1d' stroke-width='4' stroke-linecap='square' opacity='0.08'/><path d='M 40 80 C 70 80, 80 20, 110 20 C 140 20, 140 80, 140 80 C 140 80, 140 190, 170 190 C 200 190, 210 80, 240 80' stroke='%23d94a1d' stroke-width='4' fill='none' opacity='0.08'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}
body[data-hero-variant="mark-bg"] .hero > .container { position: relative; z-index: 1; }

body[data-hero-variant="stamp"] .hero__eyebrow::before {
  content: "";
  display: block;
  width: 40px;
  height: 28px;
  margin-bottom: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 200'><line x1='20' y1='80' x2='260' y2='80' stroke='%23d94a1d' stroke-width='10' stroke-linecap='square'/><path d='M 40 80 C 70 80, 80 20, 110 20 C 140 20, 140 80, 140 80 C 140 80, 140 190, 170 190 C 200 190, 210 80, 240 80' stroke='%23d94a1d' stroke-width='10' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ARMR layout variant: spec sheet rows */
body[data-armr-variant="spec"] .armr-tiers { display: none; }

/* Stat scale */
body[data-stat-scale="xl"] .stat__number { font-size: 220px; }
body[data-stat-scale="xxl"] .stat__number { font-size: 260px; line-height: 0.85; }

/* Monster scale */
body[data-monster-scale="lg"] .monster-line { font-size: 152px !important; }
body[data-monster-scale="sm"] .monster-line { font-size: 112px !important; }

/* Nav variant: mono */
body[data-nav-variant="mono"] .site-header__nav a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
body[data-nav-variant="serif-italic"] .site-header__nav a {
  font-style: italic;
  font-weight: 300;
}

/* =============================================================
   RESPONSIVE — Tablet (1024px and below)
   ============================================================= */
@media (max-width: 1024px) {
  :root { --gutter: 40px; }
  .site-header__inner { padding: 16px 0; }
  .grid-2, .grid-3 { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .site-footer__grid { grid-template-columns: 1fr 1fr 1fr !important; }
  /* Hero with Signal mark — collapse to single column at tablet */
  .hero__layout { grid-template-columns: 1fr !important; gap: 56px !important; }
  .hero__mark { padding-left: 0 !important; border-left: 0 !important; border-top: 1px solid var(--rule); padding-top: 40px !important; }
  .hero__mark-svg { max-width: 360px !important; }
  /* Monster line scales down */
  .monster-line { font-size: 96px !important; line-height: 0.95 !important; }
  /* Big inline display copy at 1024 */
  body main p[style*="fs-6xl"] { font-size: 84px !important; line-height: 0.95 !important; }
  body main p[style*="fs-5xl"] { font-size: 64px !important; line-height: 1.0 !important; }
}

/* =============================================================
   RESPONSIVE — Mobile (768px and below)
   ============================================================= */
@media (max-width: 768px) {
  :root {
    --gutter: 24px;
    --fs-3xl: 36px;
    --fs-4xl: 44px;
    --fs-5xl: 52px;
    --fs-6xl: 72px;
  }
  body { font-size: 15px; }

  /* Header collapse — replace inline nav with hamburger */
  .site-header__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
  }
  .site-header__nav {
    display: none !important;
  }
  .mobile-nav-toggle {
    display: inline-flex !important;
  }

  /* Hero / page header */
  .hero, .page-header { padding-top: 64px !important; padding-bottom: 48px !important; }
  .hero__title { font-size: 44px !important; }
  .hero__sub { font-size: 18px !important; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__actions .btn { width: 100%; justify-content: center; text-align: center; }
  .page-header__title { font-size: 40px !important; }

  /* Stat */
  .stat__number { font-size: 92px !important; line-height: 0.9 !important; }
  .stat__dek, .stat__close { font-size: 16px !important; }

  /* Sections */
  .content-section { padding: 56px 0 !important; }

  /* Grids collapse */
  .grid-2, .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Footer */
  .site-footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px;
  }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__meta {
    grid-template-columns: 1fr !important;
    gap: 8px;
    text-align: left !important;
  }
  .site-footer__meta span { text-align: left !important; }

  /* Hero with Signal mark — already 1-col at 1024, just tighten */
  .hero__layout { gap: 40px !important; }
  .hero__mark-svg { max-width: 280px !important; }
  .hero__tagline { font-size: 36px !important; }

  /* Monster line — readable on phone */
  .monster-line { font-size: 56px !important; line-height: 1.0 !important; letter-spacing: -0.02em !important; }

  /* Big inline display copy — let it scale */
  body main p[style*="fs-5xl"],
  body main p[style*="fs-6xl"] { font-size: 56px !important; line-height: 1.05 !important; }
  body main h2[style*="fs-3xl"],
  body main h2[style*="fs-4xl"] { font-size: 32px !important; }
  body main p[style*="fs-4xl"] { font-size: 36px !important; }
  body main p[style*="fs-2xl"] { font-size: 22px !important; }
  body main p[style*="fs-xl"] { font-size: 18px !important; }
  body main h3[style*="fs-3xl"] { font-size: 28px !important; }
  body main h2[style*="fs-6xl"] { font-size: 64px !important; }

  /* Page-controls */
  .page-controls { bottom: 12px; left: 12px; }
  .page-controls__btn { font-size: 9px; padding: 6px 10px; }

  /* Tweaks panel becomes bottom sheet */
  .tweaks {
    bottom: 0; right: 0; left: 0;
    width: 100%;
    border: none;
    border-top: 3px solid var(--signal);
    max-height: 70vh;
  }

  /* Engage form: stack columns */
  .engage-confirm__panel { padding: 32px 24px; }
  .engage-confirm__title { font-size: 28px; }
}

/* =============================================================
   RESPONSIVE — Small phones (480px and below)
   ============================================================= */
@media (max-width: 480px) {
  :root {
    --gutter: 18px;
    --fs-3xl: 30px;
    --fs-4xl: 36px;
    --fs-5xl: 42px;
    --fs-6xl: 56px;
  }
  .hero__title { font-size: 36px !important; line-height: 1.05 !important; }
  .hero__sub { font-size: 16px !important; }
  .hero__tagline { font-size: 30px !important; }
  .hero__mark-svg { max-width: 220px !important; }
  .page-header__title { font-size: 32px !important; }
  .stat__number { font-size: 56px !important; letter-spacing: -0.04em !important; }
  .monster-line { font-size: 40px !important; line-height: 1.05 !important; }
  body main p[style*="fs-5xl"],
  body main p[style*="fs-6xl"] { font-size: 40px !important; }
  body main p[style*="fs-4xl"] { font-size: 28px !important; }
  body main h2[style*="fs-6xl"] { font-size: 44px !important; }
  .site-footer__grid { grid-template-columns: 1fr !important; }
  .content-section { padding: 40px 0 !important; }
  .card, .card--bordered { padding: 24px !important; }
}

/* =============================================================
   MOBILE NAV — Hamburger + centered overlay
   ============================================================= */
.mobile-nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: border-color 160ms;
  z-index: 1100;
}
.mobile-nav-toggle:hover { border-color: var(--ink); }
.mobile-nav-toggle__bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 220ms cubic-bezier(0.22,0.61,0.36,1), opacity 160ms;
  transform-origin: center;
}
.mobile-nav-toggle.is-open {
  border-color: var(--ink);
  position: fixed;
  top: 16px;
  right: var(--gutter, 24px);
}
.mobile-nav-toggle.is-open .mobile-nav-toggle__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.mobile-nav-toggle.is-open .mobile-nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.mobile-nav-toggle.is-open .mobile-nav-toggle__bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-nav-panel {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 32px 56px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms cubic-bezier(0.22,0.61,0.36,1), visibility 240ms;
}
.mobile-nav-panel[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}
.mobile-nav-panel__close {
  position: absolute;
  top: 16px;
  right: var(--gutter, 24px);
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Hidden — the hamburger button itself becomes the X when open. Kept for a11y fallback. */
  opacity: 0;
  pointer-events: none;
}
.mobile-nav-panel__list {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px !important;
  text-align: center;
  width: 100%;
  max-width: 420px;
  border: none !important;
  padding: 0 !important;
}
.mobile-nav-panel__list a {
  font-family: var(--font-sans);
  font-size: 26px !important;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 12px;
  text-transform: none;
  transition: color 140ms;
}
.mobile-nav-panel__list a:hover,
.mobile-nav-panel__list a:focus-visible {
  color: var(--signal);
}
.mobile-nav-panel__list a.cta {
  color: var(--signal);
  font-weight: 600;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  margin-top: 8px;
  width: 100%;
}
.mobile-nav-panel__seal {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--ink-mute);
  width: 120px;
}
.mobile-nav-panel__seal svg { width: 100%; height: auto; }
.mobile-nav-panel__tagline {
  font-family: var(--font-sans);
  font-size: 12px;
  font-style: italic;
  font-weight: 300;
  color: var(--ink-mute);
  text-align: center;
  white-space: nowrap;
}

/* Dark-mode contrast for the panel */
body.dark .mobile-nav-panel { background: var(--paper); color: var(--ink); }

/* =============================================================
   PRINT — clean exports
   ============================================================= */
@media print {
  .page-controls, .tweaks { display: none !important; }
}