/* ==========================================================================
   MPEP — capability tear sheet
   Deep industrial blue base · light blue-gray type · one amber accent.
   The amber is the hazard-chevron yellow painted on the machine's own
   track guards and mast. Every corner is chamfered, never rounded.
   ========================================================================== */

:root {
  --void:      #050E16;
  --bg:        #0A1B29;
  --surface:   #0F2637;
  --surface-2: #14324A;
  --line:      #1E4360;
  --line-hot:  #2C5F84;

  --fg:        #DCE9F2;
  --fg-2:      #93AEC2;
  --fg-3:      #708FA6;

  --hazard:    #F0A22E;
  --hazard-hi: #FFC061;
  --hazard-dk: #3A2708;

  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Two-track tracking: negative on display, positive on uppercase labels. */
  --track-display: -0.02em;
  --track-body:    -0.01em;
  --track-label:    0.16em;

  --notch: 16px;
  --chamfer: polygon(
    var(--notch) 0, 100% 0,
    100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
    0 100%, 0 var(--notch)
  );

  --gutter: 1.375rem;
  --maxw: 1440px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 900px) { :root { --gutter: 2.5rem; --notch: 22px; } }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: var(--track-body);
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--hazard); color: var(--void); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--hazard);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--hazard); color: var(--void); padding: .75rem 1.25rem;
  font-family: var(--mono); font-size: .75rem; text-transform: uppercase;
  letter-spacing: var(--track-label); text-decoration: none;
}
.skip:focus { top: 1rem; }

/* --- Type ---------------------------------------------------------------- */

.display {
  font-weight: 800;
  font-variation-settings: 'wdth' 118;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: 0.92;
  text-wrap: balance;
}

h2.display { font-size: clamp(2rem, 5.5vw, 3.75rem); }
h3 {
  font-size: clamp(1.125rem, 2vw, 1.4rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 108;
  letter-spacing: var(--track-display);
  line-height: 1.15;
}

.label {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
}
.label--hazard { color: var(--hazard); }

.eyebrow {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.75rem;
}
.eyebrow::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.eyebrow .num { color: var(--hazard); }

.lede {
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  line-height: 1.45;
  color: var(--fg);
  max-width: 34ch;
  font-variation-settings: 'wdth' 104;
}

p { color: var(--fg-2); max-width: 62ch; }
p + p { margin-top: 1rem; }
strong { color: var(--fg); font-weight: 600; }

/* --- Structure ----------------------------------------------------------- */

/* width:100% is load-bearing — as a grid child, margin-inline:auto would
   otherwise shrink this to max-content instead of stretching. */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

section { border-top: 1px solid var(--line); }
.pad { padding-block: clamp(3.5rem, 9vw, 7rem); }

.cols {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
  .cols--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Hazard chevron band — lifted off the machine's track guards. */
.chevrons {
  height: 12px;
  background: repeating-linear-gradient(
    -45deg,
    var(--hazard) 0 10px,
    var(--void) 10px 20px
  );
}

/* --- Chamfered frame ----------------------------------------------------- */

.frame {
  background: var(--line);
  padding: 1px;
  clip-path: var(--chamfer);
}
.frame-in {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  clip-path: var(--chamfer);
  background: var(--void);
}
.frame-in > img, .frame-in > video {
  width: 100%;
  filter: saturate(.78) contrast(1.05);
}
/* Light blue grade — pulls golden-hour, jungle green and overcast grey toward
   one family without flattening them. Deliberately restrained: the imagery is
   strong enough that a heavy duotone would cost more than it buys. */
.frame-in::before {
  content: ''; position: absolute; inset: 0;
  background: #1B4E77;
  mix-blend-mode: soft-light;
  opacity: .34;
  pointer-events: none;
}
.frame-in::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.frame figcaption {
  font-family: var(--mono); font-size: .625rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: #4E6A80;
  background: var(--void); padding: .5rem .875rem;
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .75rem;
  padding: 1rem 1.5rem;
  font-family: var(--mono); font-size: .8125rem; font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  text-decoration: none;
  background: var(--hazard);
  clip-path: var(--chamfer);
  --notch: 12px;
  transition: color .18s ease;
}
.btn::after {
  content: ''; position: absolute; inset: 1px;
  background: var(--bg); clip-path: var(--chamfer);
  transition: background .18s ease;
}
.btn > span { position: relative; z-index: 1; }
.btn { color: var(--hazard); }
.btn:hover, .btn:focus-visible { color: var(--void); }
.btn:hover::after, .btn:focus-visible::after { background: var(--hazard); }

.btn--ghost { background: var(--line); color: var(--fg); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--void); }
.btn--ghost:hover::after, .btn--ghost:focus-visible::after { background: var(--fg); }

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  border-top: 0;
}
.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--void); }
.hero__media video, .hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 62% 50%;
  filter: saturate(.92) contrast(1.04) brightness(.8);
}
/* Warm hero against a cold page is the point — the scrims only buy text
   contrast, they must not neutralise the golden hour behind them. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(5,14,22,.66) 0%, rgba(5,14,22,.10) 30%, rgba(10,27,41,.90) 100%),
    linear-gradient(90deg, rgba(10,27,41,.80) 0%, rgba(10,27,41,.28) 42%, rgba(10,27,41,0) 72%);
}
.hero__scrim::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--grain); opacity: .06; mix-blend-mode: overlay;
}

.classbar {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  justify-content: space-between; align-items: center;
  padding-block: .875rem;
  border-bottom: 1px solid rgba(112,143,166,.28);
}
.classbar a.label { text-decoration: none; }
.classbar a.label:hover { color: var(--hazard-hi); }
.classbar .dot {
  display: inline-block; width: 6px; height: 6px; background: var(--hazard);
  margin-right: .5rem; vertical-align: 1px;
}

.hero__body { align-self: end; padding-block: clamp(2rem, 6vw, 4rem); }
.hero__title {
  font-size: clamp(4rem, 20vw, 15rem);
  line-height: .82;
  margin-bottom: .5rem;
}
.hero__sub {
  font-family: var(--mono); font-size: clamp(.75rem, 1.6vw, .9375rem);
  font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--hazard); margin-bottom: 1.75rem;
}
.hero__lede { margin-bottom: 1rem; max-width: 40ch; color: var(--fg); }
.hero__note {
  font-family: var(--mono); font-size: .8125rem; font-weight: 500;
  line-height: 1.6; letter-spacing: .04em; color: var(--fg-2);
  max-width: 46ch; margin-bottom: 2.25rem;
  border-left: 2px solid var(--hazard); padding-left: .875rem;
}

.hero__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-block: 1.25rem; border-top: 1px solid rgba(112,143,166,.28);
}

/* --- Stat bar ------------------------------------------------------------ */

.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .stats { grid-template-columns: repeat(3, 1fr); } }

.stat {
  padding: clamp(1.5rem, 4vw, 2.75rem) var(--gutter);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.stat:nth-child(2n) { border-right: 0; }
@media (min-width: 900px) {
  .stat { border-right: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 1px solid var(--line); }
  .stat:nth-child(3n) { border-right: 0; }
  .stat:nth-last-child(-n+3) { border-bottom: 0; }
}
.stat__num {
  font-weight: 800; font-variation-settings: 'wdth' 112;
  font-size: clamp(1.75rem, 4.5vw, 3rem); line-height: 1;
  letter-spacing: var(--track-display); margin-bottom: .625rem;
}
.stat--key .stat__num { color: var(--hazard); }
.stat__unit { font-size: .5em; margin-left: .15em; }

/* --- Footprint comparison -------------------------------------------------
   Both rows draw the same three 463L pallet positions. What differs is how
   many each machine consumes — the empty dashed cells left over in the MPEP
   row are the whole argument. */

.fp { display: grid; gap: 1.5rem; margin-top: 2.25rem; }
.fp__row { display: grid; gap: .625rem; }
.fp__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }

.fp__bay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
/* Each cell is placed explicitly. Without this the explicitly-positioned
   .fp__unit claims column 1 and auto-placement pushes the cells into a
   phantom fourth column. */
.fp__pos {
  grid-row: 1; aspect-ratio: 108 / 88;
  border: 1px dashed var(--line-hot);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
  color: var(--fg-3);
}
.fp__pos:nth-of-type(1) { grid-column: 1; }
.fp__pos:nth-of-type(2) { grid-column: 2; }
.fp__pos:nth-of-type(3) { grid-column: 3; }
.fp__unit {
  grid-row: 1; display: grid; place-items: center; text-align: center;
  padding: .5rem; --notch: 10px; clip-path: var(--chamfer);
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.is-revealed .fp__unit { transform: scaleX(1); }
.fp__unit--mpep { grid-column: 1 / 2; background: var(--hazard); color: var(--void); }
.fp__unit--fork { grid-column: 1 / 4; background: var(--surface-2); color: var(--fg); transition-delay: .15s; }
.fp__note { font-size: .9375rem; color: var(--fg-2); }
@media (prefers-reduced-motion: reduce) { .fp__unit { transform: none; } }

/* --- Configurations ------------------------------------------------------ */

.config__panel[hidden] { display: none; }
.config__body { display: grid; gap: 1.5rem; align-content: start; }
/* Every mission-profile frame is locked to one ratio so switching tabs never
   changes the page height. */
.config .frame-in > img { aspect-ratio: 16 / 9; object-fit: cover; }
.config__status {
  display: inline-block; justify-self: start; padding: .375rem .625rem;
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--hazard-dk); color: var(--hazard-hi);
}
.config__status[data-status='fielded'] { background: var(--surface-2); color: var(--fg-2); }
.config__status[data-status='proposed'] {
  background: transparent; color: var(--fg-3);
  box-shadow: inset 0 0 0 1px var(--line-hot);
}

/* --- Spec table ---------------------------------------------------------- */

.specs { display: grid; gap: 0; }
@media (min-width: 900px) { .specs { grid-template-columns: 1fr 1fr; column-gap: 4rem; } }

.spec {
  display: flex; align-items: baseline; gap: .75rem;
  padding-block: .875rem;
  border-bottom: 1px solid var(--line);
}
.spec__k {
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3);
  flex: 0 0 auto;
}
.spec__dots { flex: 1 1 auto; border-bottom: 1px dotted var(--line-hot); transform: translateY(-3px); min-width: 1.5rem; }
.spec__v {
  font-family: var(--mono); font-size: .875rem; font-weight: 500;
  color: var(--fg); text-align: right; flex: 0 0 auto;
}
.spec--key .spec__v { color: var(--hazard); }

/* --- Timeline ------------------------------------------------------------ */

.timeline { display: grid; gap: 0; margin-top: .5rem; }
.tl {
  display: grid; gap: .5rem 1.25rem;
  grid-template-columns: auto 1fr;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.tl__mark {
  width: 10px; height: 10px; background: var(--line-hot);
  margin-top: .55rem;
}
.tl[data-status='test'] .tl__mark { background: var(--hazard); }
.tl__body > p { margin-top: .375rem; }

/* --- Media gallery ------------------------------------------------------- */

.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery button { display: block; width: 100%; text-align: left; }
/* Every tile — stills and the video thumbnail alike — is one ratio. */
.gallery .frame-in > img { aspect-ratio: 16 / 9; object-fit: cover; }
.gallery button:hover .frame { background: var(--hazard); }

.gallery .play {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; pointer-events: none;
}
.gallery .play span {
  background: var(--hazard); color: var(--void);
  padding: .5rem .75rem; --notch: 8px; clip-path: var(--chamfer);
  font-family: var(--mono); font-size: .625rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}

dialog.lightbox {
  position: fixed; inset: 0; margin: auto;
  width: fit-content; height: fit-content;
  border: 1px solid var(--line); padding: 0;
  max-width: min(1100px, 92vw); max-height: 92svh;
  background: var(--void); color: var(--fg);
}
dialog.lightbox::backdrop { background: rgba(5,14,22,.92); }
dialog.lightbox img { max-height: 78svh; max-width: 100%; width: auto; margin-inline: auto; display: block; }
/* Explicit ratio: without it the element has no intrinsic size until metadata
   arrives, so on mobile it renders 0px tall and there is nothing to tap. */
dialog.lightbox video {
  display: block; width: min(100%, 1100px); height: auto;
  aspect-ratio: 16 / 9; max-height: 78svh;
  margin-inline: auto; background: #000; object-fit: contain;
}
dialog.lightbox [hidden] { display: none; }
.lightbox__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .875rem 1rem; border-top: 1px solid var(--line);
}

/* --- Contact ------------------------------------------------------------- */

.contact { background: var(--hazard-dk); border-top: 1px solid var(--hazard); }
.contact .label { color: var(--hazard-hi); }
.contact p { color: #E8D6B4; }
.contact .eyebrow::after { background: rgba(240,162,46,.35); }

.dl { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 700px) { .dl { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.dl a {
  display: block; text-decoration: none;
  font-weight: 700; font-variation-settings: 'wdth' 108;
  font-size: clamp(1.25rem, 3.2vw, 1.875rem);
  letter-spacing: var(--track-display); color: var(--hazard-hi);
  padding-block: .5rem;
}
.dl a:hover { color: #fff; }
.dl a small {
  font-family: var(--mono); font-size: .8125rem; font-weight: 500;
  letter-spacing: var(--track-label); color: var(--fg-3);
  margin-left: .75rem; white-space: nowrap; vertical-align: middle;
}
.dl a:hover small { color: var(--fg-2); }

.callbar {
  position: sticky; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--void); border-top: 1px solid var(--hazard);
}
.callbar a {
  padding: 1.125rem .75rem; text-align: center; text-decoration: none;
  font-family: var(--mono); font-size: .8125rem; font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--hazard); min-height: 56px;
}
.callbar a + a { border-left: 1px solid var(--line); }
.callbar a:hover { background: var(--hazard); color: var(--void); }
@media (min-width: 900px) { .callbar { display: none; } }

/* --- Footer -------------------------------------------------------------- */

footer { background: var(--void); border-top: 1px solid var(--line); }
.foot {
  display: grid; gap: 2rem; padding-block: 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .foot { grid-template-columns: auto 1fr; align-items: center; gap: 4rem; } }
.foot img { width: 118px; opacity: .55; filter: grayscale(1) brightness(1.5); }
.foot p { font-size: .8125rem; color: var(--fg-3); max-width: 78ch; }
.foot p strong { color: var(--fg-2); }
.fineprint { font-size: .6875rem !important; line-height: 1.6; color: #4E6A80 !important; max-width: 88ch; }

/* --- Reveal -------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-revealed {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-revealed { opacity: 1; transform: none; transition: none; }
  .fp__cell { transition: none; }
  .hero__media video { display: none; }
}

/* --- Customer marks + paired figures (In service) ------------------------- */

.orgs {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1.75rem;
}
.org {
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .625rem .875rem;
  background: var(--surface);
  border-left: 2px solid var(--hazard);
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3);
}
.org strong { color: var(--fg); font-weight: 600; letter-spacing: .12em; }

.pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-top: 1.25rem;
}
.pair .frame-in > img { aspect-ratio: 16 / 10; object-fit: cover; }

/* --- Video lead (imagery section) ---------------------------------------- */

.filmstrip {
  display: block; width: 100%; text-align: left;
  margin-bottom: 1rem;
}
.filmstrip .frame-in > img { aspect-ratio: 21 / 9; object-fit: cover; }
.filmstrip:hover .frame { background: var(--hazard); }

.filmstrip__overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end; gap: 1.25rem;
  padding: clamp(1rem, 3vw, 2rem);
  background: linear-gradient(0deg, rgba(5,14,22,.88) 0%, rgba(5,14,22,.15) 55%, rgba(5,14,22,.35) 100%);
}
.filmstrip__play {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: clamp(48px, 7vw, 72px); aspect-ratio: 1;
  background: var(--hazard); color: var(--void);
  font-size: clamp(1rem, 2vw, 1.5rem); line-height: 1;
  --notch: 12px; clip-path: var(--chamfer);
  transition: background .18s ease;
}
.filmstrip:hover .filmstrip__play { background: var(--hazard-hi); }
.filmstrip__meta { display: grid; gap: .375rem; }
.filmstrip__kicker {
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--hazard);
}
.filmstrip__title {
  font-weight: 700; font-variation-settings: 'wdth' 108;
  font-size: clamp(1rem, 2.4vw, 1.5rem); line-height: 1.15;
  letter-spacing: var(--track-display); color: var(--fg);
}

/* --- Mission profile index ------------------------------------------------
   Nine profiles wrapped into a ragged two-row pill cloud. Presented instead as
   a deliberate numbered index: a column beside the panel on desktop, a single
   scrollable rail on mobile. */

.config-layout { display: grid; gap: 1.5rem; }
@media (min-width: 1000px) {
  .config-layout { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
}

.chips {
  display: flex; flex-wrap: nowrap; gap: .375rem;
  overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) .5rem;
  scroll-snap-type: x proximity;
}
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) {
  .chips {
    display: grid; grid-template-columns: 1fr; gap: 0;
    overflow: visible; margin: 0; padding: 0;
    border-top: 1px solid var(--line);
  }
}

.chip {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; align-items: center; gap: .625rem;
  padding: .75rem .875rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-3); background: var(--surface);
  border-bottom: 2px solid transparent;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.chip__n {
  font-size: .625rem; color: var(--line-hot);
  font-variant-numeric: tabular-nums;
}
.chip:hover { color: var(--fg); background: var(--surface-2); }
.chip[aria-selected='true'] {
  color: var(--fg); background: var(--surface-2); border-bottom-color: var(--hazard);
}
.chip[aria-selected='true'] .chip__n { color: var(--hazard); }

@media (min-width: 1000px) {
  .chip {
    width: 100%; text-align: left;
    background: none; padding: .875rem .25rem;
    border-bottom: 1px solid var(--line);
    border-left: 2px solid transparent;
  }
  .chip:hover { background: none; color: var(--fg); border-left-color: var(--line-hot); }
  .chip[aria-selected='true'] {
    background: none; color: var(--fg);
    border-bottom-color: var(--line);
    border-left-color: var(--hazard);
    padding-left: .875rem;
  }
}

/* Inside the narrower panel column, stack the figure above the copy. */
@media (min-width: 1000px) and (max-width: 1279px) {
  .config .cols--even { grid-template-columns: minmax(0, 1fr); }
}