/* src/styles/status-pulse.css */
@keyframes status-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}


/* src/styles/tokens.css */
:root {
  /* Typography — Font families */
  --font-primary: "Overused Grotesk", sans-serif;
  --font-secondary: "Space Mono", monospace;
  --font-tertiary: "Space Grotesk", monospace;

  /* Typography — Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi: 600;
  --font-weight-bold: 700;

  /* Typography — Line-height / letter-spacing */
  --text-extra-cap-line-height: 0.75;
  --text-extra-line-height: 0.85;
  --text-extra-letter-spacing: -0.015em;

  --text-display-cap-line-height: 0.75;
  --text-display-line-height: 0.85;
  --text-display-letter-spacing: -0.015em;

  --text-h1-cap-line-height: 0.75;
  --text-h1-line-height: 1.15;
  --text-h1-letter-spacing: 0em;

  --text-h2-cap-line-height: 0.75;
  --text-h2-line-height: 1.15;
  --text-h2-letter-spacing: 0em;

  --text-h3-cap-line-height: 0.75;
  --text-h3-line-height: 1.15;
  --text-h3-letter-spacing: 0em;

  --text-h4-cap-line-height: 0.75;
  --text-h4-line-height: 1.15;
  --text-h4-letter-spacing: 0em;

  --text-h5-cap-line-height: 0.75;
  --text-h5-line-height: 1.25;
  --text-h5-letter-spacing: 0.015em;

  --text-h6-cap-line-height: 0.75;
  --text-h6-line-height: 1.25;
  --text-h6-letter-spacing: 0.015em;

  --text-title-lg-line-height: 1.75;
  --text-title-lg-letter-spacing: 0.025em;

  --text-title-md-line-height: 1.75;
  --text-title-md-letter-spacing: 0.025em;

  --text-title-sm-line-height: 1.75;
  --text-title-sm-letter-spacing: 0.025em;

  --text-eyebrow-lg-line-height: 1.75;
  --text-eyebrow-lg-letter-spacing: 0.03125em;

  --text-eyebrow-md-line-height: 1.75;
  --text-eyebrow-md-letter-spacing: 0.03125em;

  --text-eyebrow-sm-line-height: 1.75;
  --text-eyebrow-sm-letter-spacing: 0.03125em;

  --text-callout-lg-line-height: 1.15;
  --text-callout-lg-letter-spacing: 0em;

  --text-callout-md-line-height: 1.15;
  --text-callout-md-letter-spacing: 0em;

  --text-callout-sm-line-height: 1.15;
  --text-callout-sm-letter-spacing: 0em;

  --text-btn-lg-line-height: 1;
  --text-btn-lg-letter-spacing: 0em;

  --text-btn-md-line-height: 1;
  --text-btn-md-letter-spacing: 0em;

  --text-btn-sm-line-height: 1;
  --text-btn-sm-letter-spacing: 0em;

  --text-body-sm-line-height: 1.5;
  --text-body-sm-letter-spacing: 0.025em;

  --text-body-md-line-height: 1.5;
  --text-body-md-letter-spacing: 0.025em;

  --text-body-lg-line-height: 1.5;
  --text-body-lg-letter-spacing: 0.025em;

  --text-body-xl-line-height: 1.5;
  --text-body-xl-letter-spacing: 0.025em;

  --text-caption-line-height: 1.15;
  --text-caption-letter-spacing: 0.0357em;

  --text-tag-line-height: 1;
  --text-tag-letter-spacing: 0.025em;

  --text-tooltip-line-height: 1.25;
  --text-tooltip-letter-spacing: 0.025em;

  --text-legal-line-height: 1.5;
  --text-legal-letter-spacing: 0.025em;
}


/* src/styles/responsive.css */
/* Anything that is a bare class at 440 / 768 / 1440 belongs in the panel, not in this file. These queries are hand-written and do NOT track the editor's  breakpoint setting, so keep them in step by hand: Mobile is 440px. */

@media (min-width: 441px) and (max-width: 768px) {
  .hero-title-container {
    grid-row: 3;
    grid-column-start: span 4;
    grid-column-end: auto;
  }
  .hero-text-container {
    grid-row: 3;
    grid-column-start: span 4;
    grid-column-end: auto;
  }
}

/* Footer tagline has three lengths. */
.footer .u-tablet-inline { display: none; }

@media (min-width: 441px) and (max-width: 1024px) {
  .footer .u-tablet-inline { display: inline; }
  .footer .u-desktop-inline,
  .footer .u-mobile-inline { display: none; }
}

/* Public / secured nav gate. */
body:has(.is-secured) .u-public-only { display: none; }
body:not(:has(.is-secured)) .u-secured-only { display: none; }

@media (min-width: 769px) {
  .mission-media { margin-top: -2.8vw; }
}

@media (min-width: 441px) {
  .mission-stanza { max-width: 90%; }
}

p { text-wrap: pretty; }

.product { --txt-neutral: hsl(0, 0%, 60%); }


/* =============================================== */
/* 1023 / 1024 are not editor breakpoints — these cannot move to the panel. */

@media (max-width: 1023px) {
  .lede-wrap { justify-content: flex-start; }
  .lede-wrap .lede { max-width: 100%; }
  .section-aside { max-width: 100%; align-self: stretch; }
  .statement-section { grid-template-columns: minmax(0, 1fr); }

  .section-cols { grid-template-columns: minmax(0, 1fr); row-gap: var(--section-row-gap); }
  .evidence-body { grid-template-columns: minmax(0, 1fr); row-gap: var(--section-row-gap); }

  .tr-wrap { flex-direction: column; row-gap: var(--section-row-gap); }
  .tr-map { flex: 0 0 auto; width: 100%; }

  /* The plot gets its height from the table column on desktop. */
  .tr-map-panel {
    flex: 0 0 auto;
    height: 220px;
    min-height: 220px;
  }
  .hv-wrap { grid-template-columns: minmax(0, 1fr); row-gap: var(--section-row-gap); }
  .domain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .spec-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }
}

@media (min-width: 1024px) {
  .lede-wrap .lede { max-width: min(658px, 100%); }
  .statement { grid-column: 5 / span 8; }
}

/* First and last tab bleed to the card edge. */
@media (min-width: 441px) {
  .evidence-menu:not(.evidence-menu-single) > .evidence-tab:first-of-type {
    margin-left: -24px;
    padding-left: 24px;
    flex-basis: 24px;
  }
  .evidence-menu:not(.evidence-menu-single) > .evidence-tab:last-of-type {
    margin-right: -24px;
    padding-right: 24px;
    flex-basis: 24px;
  }
}


/* =============================================== */
/* Phone. The bare-class rules that used to live here are now Mobile
   breakpoint overrides in the panel. Only compound selectors remain. */

@media (max-width: 440px) {
  .domain-grid::-webkit-scrollbar { display: none; }
  .evidence-menu::-webkit-scrollbar { display: none; }

  /* The tab rule bleeds past the inset to meet the card edge; with the inset
     gone on phone it would overhang instead. */
  .evidence-menu::after { display: none; }

  /* A single-tab bar is a heading, not a menu: the heading owns the rule, so
     the note reads as a caption under it rather than as a second tab. */
  .evidence-menu-single::after { display: none; }
  .evidence-menu-single .evidence-tab {
    width: 100%;
    row-gap: 0;
    padding-right: 0;
    padding-bottom: 8px;
    border-right: 0;
    border-bottom: 2px solid var(--txt-white);
  }
  .evidence-menu-single .evidence-tab-marker { display: none; }
  .evidence-menu-single .evidence-predicted {
    border-left: 0;
    padding: 12px 0 0;
    white-space: normal;
  }
}


/* Hero CRT overlay. Aperture grille: one hard 1px stripe per phosphor on a 3px
   triad. Tune the alpha for strength or the period for coarseness — keep the
   stops PAIRED or the colours interpolate into a rainbow smear. */
.hero-media::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(255, 0, 0, 0.20) 0px,
      rgba(255, 0, 0, 0.20) 1px,
      rgba(0, 255, 0, 0.20) 1px,
      rgba(0, 255, 0, 0.20) 2px,
      rgba(0, 0, 255, 0.20) 2px,
      rgba(0, 0, 255, 0.20) 3px
    );
}


/* ==========================================================================
   Tree-shake refuge. Do NOT move these into the class registry.

   The publisher ships a registry rule only if the rule's own id is carried in
   some node's classIds. Compound selectors never are, so they render in the
   canvas and vanish on publish. This file is emitted whole.

   It loads at priority 200, AFTER the registry, so anything added here gains
   precedence it did not have. Check that before adding.
   ========================================================================== */

.cap-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.cap-media img, .cap-media video {
  mix-blend-mode: lighten;
}

.page-hero-stage .page-hero-lede {
  z-index: 1;
  position: relative;
}

.accordion-header:hover .title-name {
  color: var(--txt-white);
}

.accordion-header:hover .title-tag {
  color: var(--txt-white);
}

.accordion-header:hover .accordion-chevron {
  color: var(--txt-white);
}

.accordion-header:hover {
  color: var(--txt-white);
}

.accordion-header:focus-visible {
  outline: 1px solid var(--txt-white);
  outline-offset: 4px;
}

/* WORKAROUND — remove once the VC visibility facet publishes.

   The footnote's visibility is a boolean parameter on product-accordion. It is
   set OFF on the component AND on the Payloads instance, and the canvas honours
   both — but the published HTML renders the node in full: not omitted, no
   display:none, no hidden attribute. The facet is not applied at publish at
   all, so the default is not honoured either; this is not an override problem.

   Packet must therefore stay switched on so Thunderstrike's footnotes show.
   This hides Packet's only. Delete it and set visibility per instance once the
   facet publishes. */
#packet .accordion-footnote {
  display: none;
}

.roster-item:hover .roster-name {
  color: var(--txt-white);
}

.roster-item:hover .roster-arrow {
  color: var(--txt-white);
}

.form-field-input::placeholder {
  color: var(--txt-neutral);
}

.privacy-h + .privacy-p {
  margin-top: 26px;
}

.privacy-h + .privacy-lead {
  margin-top: 26px;
}