/* Contrails — the redesign component system. Phase 1.
 *
 * OPT-IN, AND INERT UNTIL A PAGE ASKS FOR IT. Nothing here styles an existing selector. Every
 * rule is scoped to a `cdx-` class that exists on no page today, so a page that does not carry
 * one renders exactly as it does now. That is what makes this phase reversible by deleting an
 * opt-in, and it is why the prefix is `cdx-` rather than `cd-`: `cd-` is the live site's and
 * `lr-` is the lesson player's, and RULES.md forbids a shared class name colliding with the
 * lesson player or its audio controls.
 *
 * ZERO COLOUR LITERALS. check-brand.sh scans every .css file for hex and fails non-zero on a
 * hit. Every colour here is a var(--cd-*) from brand.js, or a color-mix of one. The single
 * mixed value is the "researched" dot, which had no token: see THE ONE MIXED COLOUR below.
 *
 * The concept boards in contrails-tools/redesign/reference/ are layout references only. Their
 * palette and their fonts (Inter Tight, IBM Plex Mono) are not used anywhere in this file.
 */

.cdx {
  /* ── the type stack, the site's own ─────────────────────────────────────────────────── */
  --cdx-sans: 'Instrument Sans', 'Segoe UI', Arial, sans-serif;
  --cdx-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* ── approved token mapping, 20 Sep 2026 ────────────────────────────────────────────── */
  --cdx-label-off: var(--cd-ink-soft);      /* a stop that is not the current one           */
  --cdx-label-on: var(--cd-navy);           /* the current stop, and The Squadron           */
  --cdx-label-key: var(--cd-ink-body);      /* status-key and chip labels                   */
  --cdx-pill-on: var(--cd-placeholder);     /* the current stop's pill                      */
  --cdx-chip-face: var(--cd-surface-alt);   /* a chip that is not selected                  */
  --cdx-chip-edge: var(--cd-placeholder);   /* a chip's hairline                            */

  /* THE ONE MIXED COLOUR. "Researched" on the map, airlines and ranker keys needs a dot that
     is unmistakably not "Built" at 10px. The nearest untaken token was 17.9 dE away, and the
     only true mid-blue in brand.js belongs to the Line Ready instrument layer, which that file
     calls "deliberately NOT part of the Contrails palette". Per RULES.md the ladder is nearest
     token, then a SHADE of an existing token, then a new token as the last resort. This is the
     shade: navy, lightened. No new token was added. */
  --cdx-researched: color-mix(in srgb, var(--cd-navy) 55%, var(--cd-white));

  font-family: var(--cdx-sans);
  color: var(--cd-ink-body);
}

/* Focus is visible everywhere, on the real control, never removed. */
.cdx :focus-visible {
  outline: 2px solid var(--cd-red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* RULES.md: respect prefers-reduced-motion everywhere. Animation off, never merely paused. */
@media (prefers-reduced-motion: reduce) {
  .cdx *, .cdx *::before, .cdx *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ══ 1. THE GLOBAL HEADER ═══════════════════════════════════════════════════════════════
 * The wordmark, the four stops in order with the existing menu under each one, Squadron and
 * Pricing, and the account area. The stops and their state come from CDSite.routeStops(), the
 * menus from CDSite.routeMenu() -- which returns the live header's own GROUPS items -- and the
 * account from CDSite.accountModel().
 *
 * TWO VARIANTS, ONE COMPONENT. `--top` is the slim bar at the top of a page, in flow. `--route`
 * is the same bar sticking from wherever it is placed. home.html uses both: one above the hero
 * so Log in is reachable on landing, and one that sticks from the chapters.
 */
.cdx-hdr {
  background: var(--cd-white);
  border-bottom: 1px solid var(--cd-line-soft);
  position: relative; z-index: 50;
}
.cdx-hdr--route { position: sticky; top: 0; }
.cdx-hdr__bar {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  min-height: 60px; display: flex; align-items: center; gap: 18px;
}
/* THE WORDMARK IS THE LIVE SITE'S, EXACTLY (owner, 21 Sep 2026: branding does not change).
   Measured on production the same day: font-family `Arial Black, Arial, sans-serif`,
   letter-spacing 0.045em, font-size 1rem, and computed weight 400 -- the live header draws it
   in an <a>, which carries no UA bold, and declares no weight of its own. So none is declared
   here either. Arial Black is a SYSTEM font: production loads Instrument Sans and JetBrains
   Mono and nothing else, and there is no @font-face for it anywhere. That is a property of the
   live site, unchanged by this redesign. An earlier version of this file set Instrument Sans at
   700 and said so in the showcase; that is superseded. */
.cdx-hdr__mark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Arial Black', Arial, sans-serif; font-size: 1rem;
  letter-spacing: 0.045em; color: var(--cd-navy);
  text-decoration: none; white-space: nowrap; flex: none;
  /* A 24px-tall link is what the live header ships and it is under the 44px rule. The box is
     given the height; the type is untouched, so the wordmark still measures identical to
     production's. */
  min-height: 44px;
}
.cdx-hdr__route { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.cdx-hdr__group { position: relative; }
.cdx-hdr__stop {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; color: var(--cdx-label-off);
  text-decoration: none; white-space: nowrap;
  transition: background-color .14s ease, color .14s ease;
}
.cdx-hdr__stop:hover { color: var(--cdx-label-on); background: var(--cd-surface); }
/* YOU ARE HERE. Weight and a filled pill, not colour alone -- and aria-current carries it to a
   screen reader, which no amount of styling would. `page` is the page you are on; `true` is the
   chapter you are reading, which home's scene driver sets as you scroll. */
.cdx-hdr__stop[aria-current] {
  color: var(--cdx-label-on); font-weight: 600; background: var(--cdx-pill-on);
}
/* A stop with no destination yet is not a link. It is rendered as plain text so nothing offers
   the reader a click that goes nowhere. */
.cdx-hdr__stop--nolink { cursor: default; }
.cdx-hdr__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; position: relative; }
/* THE ROUTE LINE. A 2px fill from the first stop to the current one, on the header's bottom edge,
   over the hairline the header already draws -- that hairline is the track. Placed and filled by
   wireRoute() in redesign-system.js; without it the line has no width and is not seen. */
.cdx-hdr__route { position: relative; }
.cdx-hdr__line {
  position: absolute; left: 0; top: 0; width: 0; height: 2px;
  pointer-events: none; z-index: 1; visibility: hidden;
}
.cdx-hdr__fill {
  display: block; width: 100%; height: 100%; border-radius: 1px;
  background: var(--cd-navy); transform-origin: left center; transform: scaleX(0);
}
/* THE PULSE'S RING. Invisible at rest, so the dot keeps its shape and meaning. */
.cdx-hdr__halo {
  position: absolute; inset: -1px; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1.5px var(--cdx-dot, var(--cd-navy));
}
/* Open is filled; opening is a ring. The SHAPE carries the difference, so the two do not depend
   on telling green from navy, and the state is written out in the title and the visually hidden
   text beside it. */
.cdx-hdr__dot--open { background: var(--cdx-dot, var(--cd-green)); }
.cdx-hdr__dot--opening {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--cdx-dot, var(--cd-navy));
}
/* YOU ARE HERE IS GREEN, AND A TARGET (owner, 6 Oct 2026). The current stop is a green disc in a green
   ring on every page; the hero's "Stop N of 4" mark draws the same. Green means "you are here" and
   nothing else, so the other stops show availability in navy, by shape: open is filled, opening a ring.
   The words ("Open now", "Opening") stay in the title and the visually hidden text. */
.cdx-hdr__stop:not([aria-current]) .cdx-hdr__dot--open { background: var(--cd-navy); }
.cdx-hdr__stop[aria-current] .cdx-hdr__dot {
  background: var(--cd-green); box-shadow: none;
  outline: 1.5px solid var(--cd-green); outline-offset: 2px;
}
.cdx-hdr__stop[aria-current] .cdx-hdr__halo { box-shadow: 0 0 0 1.5px var(--cd-green); }
/* IN WORK IS A DASH (owner, 6 Oct 2026). It was a ring like opening, told apart by colour alone. The
   current stop still draws as the green target, whatever its state. */
.cdx-hdr__dot--inwork { width: 9px; height: 2.5px; border-radius: 1px; background: var(--cd-navy); }
.cdx-hdr__stop[aria-current] .cdx-hdr__dot--inwork { width: 8px; height: 8px; border-radius: 50%; }
.cdx-hdr__chev { display: block; flex: none; opacity: .55; }

/* THE MENU UNDER A STOP. Same interaction as the live header's, deliberately: it opens on hover
   for a pointer and on :focus-within for a keyboard, it needs no script and has no state that
   can get stuck, and the trigger stays a real link so a touch reader who taps it lands on that
   stop's page rather than on a control that does nothing. Below the breakpoint these are hidden
   and the same items are in the drawer, where a thumb can reach them. */
.cdx-hdr__menu {
  position: absolute; top: 100%; left: -10px; padding-top: 8px;
  min-width: 300px; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.cdx-hdr__group:hover .cdx-hdr__menu,
.cdx-hdr__group:focus-within .cdx-hdr__menu { opacity: 1; visibility: visible; transform: none; }
.cdx-hdr__menucard {
  background: var(--cd-white); border-radius: 8px; padding: 8px;
  box-shadow: rgba(18,22,30,.024) 0 0 0 1px, rgba(17,26,74,.05) 0 8px 16px 0,
              rgba(17,26,74,.05) 0 4px 8px 0;
}
.cdx-hdr__item {
  display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none;
  min-height: 44px; box-sizing: border-box;
}
.cdx-hdr__item:hover { background: var(--cd-surface); text-decoration: none; }
.cdx-hdr__item strong {
  display: block; font-size: 0.9rem; font-weight: 500; color: var(--cd-navy);
}
.cdx-hdr__item span {
  display: block; font-size: 0.8rem; color: var(--cd-ink-soft); margin-top: 2px;
}

.cdx-hdr__aside { display: flex; align-items: center; gap: 16px; flex: none; }
.cdx-hdr__aside > a {
  font-size: 0.875rem; font-weight: 500; color: var(--cdx-label-on);
  text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
}
.cdx-hdr__aside > a:hover { text-decoration: underline; }
/* TOUCH TARGET, BOTH WAYS (owner, 4 Oct 2026). The rule above makes every aside link 44px tall; a short
   label left it narrower than that -- "Log in" measured 39px wide on every opted-in page. Additive: the
   existing rule is untouched, and a link already wider than 44px is unchanged. */
.cdx-hdr__aside > a { min-width: 44px; justify-content: center; }

/* ONE CONTROL, and it is invisible until the bar runs out of room. */
.cdx-hdr__toggle {
  display: none; align-items: center; gap: 8px; margin-left: auto;
  min-height: 44px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--cd-line-soft); background: transparent;
  font-family: var(--cdx-sans); font-size: 0.875rem; font-weight: 500;
  color: var(--cd-navy); cursor: pointer;
}
.cdx-hdr__drawer { display: none; }

/* ══ THE SLIM BAR, AND WHY IT IS TWO ROWS AND NOT THREE ═══════════════════════════════════
 * The first version let the bar wrap: the wordmark took row one, Squadron / Pricing / Log in /
 * Sign up wrapped onto row two, and the four stops onto row three -- about 148px of a 844px
 * phone before a word of the page. Below 1000px everything except the wordmark and one control
 * now leaves the bar, and the four stops get the compact route row the Phase 1 brief specified:
 * their own full-width row, scrolling sideways rather than wrapping, every target still 44px.
 */
@media (max-width: 999px) {
  .cdx-hdr__bar { padding: 0 16px; min-height: 48px; gap: 6px; flex-wrap: wrap; }
  .cdx-hdr__aside { display: none; }
  .cdx-hdr__toggle { display: inline-flex; }
  .cdx-hdr__route {
    order: 3; flex-basis: 100%; margin-left: 0;
    gap: 2px; padding: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .cdx-hdr__route::-webkit-scrollbar { display: none; }
  .cdx-hdr__stop { padding: 0 10px; font-size: 0.8125rem; }   /* 44px min-height stands */
  .cdx-hdr__chev { display: none; }
  .cdx-hdr__menu { display: none; }
  .cdx-hdr__drawer { display: none; border-top: 1px solid var(--cd-line-soft); }
  .cdx-hdr[data-cdx-open="1"] .cdx-hdr__drawer {
    display: block; max-height: 70vh; max-height: 70svh; overflow-y: auto;
    padding: 8px 8px 12px; background: var(--cd-white);
  }
  .cdx-hdr__dgroup { padding: 6px 0; border-top: 1px solid var(--cd-line-soft); }
  .cdx-hdr__dgroup:first-child { border-top: 0; }
  .cdx-hdr__dlabel {
    margin: 0; padding: 6px 12px 2px;
    font-family: var(--cdx-mono); font-size: 0.6875rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--cd-ink-soft);
  }
  .cdx-hdr__dgroup--acct { display: flex; flex-direction: column; gap: 2px; }
  .cdx-hdr__dgroup--acct > a {
    display: flex; align-items: center; min-height: 44px; padding: 10px 12px;
    border-radius: 8px; text-decoration: none; font-size: 0.9rem; font-weight: 500;
    color: var(--cd-navy);
  }
  .cdx-hdr__dgroup--acct > a[data-cdx="signup"] { background: var(--cd-navy); color: var(--cd-white); }
}

/* The account area on a pointer. Same hover-and-focus-within rule the live menus use, so it
   opens with a pointer and with a keyboard, and the trigger stays a real link so nothing is
   unreachable on touch. What it CONTAINS is decided by CDSite.accountModel(), never here. */
.cdx-hdr__aside [data-cdx="signup"] {
  background: var(--cd-navy); color: var(--cd-white);
  padding: 0 16px; border-radius: 8px; font-weight: 600;
}
.cdx-hdr__aside [data-cdx="signup"]:hover { text-decoration: none; opacity: .92; }
[data-cdx="acct"] { position: relative; }
[data-cdx="acct"] > a {
  background: var(--cd-navy); color: var(--cd-white);
  padding: 0 16px; border-radius: 8px; font-weight: 600;
  min-height: 44px; display: inline-flex; align-items: center;
  font-size: 0.875rem; text-decoration: none;
}
[data-cdx="acct"] > a:hover { text-decoration: none; opacity: .92; }
[data-cdx="acctmenu"] {
  position: absolute; top: 100%; right: 0; margin-top: 10px; min-width: 272px;
  background: var(--cd-white); border-radius: 8px; padding: 8px; z-index: 60;
  box-shadow: rgba(18,22,30,.024) 0 0 0 1px, rgba(17,26,74,.05) 0 8px 16px 0,
              rgba(17,26,74,.05) 0 4px 8px 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
[data-cdx="acct"]:hover [data-cdx="acctmenu"],
[data-cdx="acct"]:focus-within [data-cdx="acctmenu"] {
  opacity: 1; visibility: visible; transform: none;
}
[data-cdx="acctrow"] {
  display: block; min-height: 44px; padding: 10px 12px; border-radius: 6px;
  text-decoration: none;
}
[data-cdx="acctrow"]:hover { background: var(--cd-surface); text-decoration: none; }
[data-cdx="acctrow"] strong {
  display: block; font-size: 0.9rem; font-weight: 500; color: var(--cd-navy);
}
[data-cdx="acctrow"] span {
  display: block; font-size: 0.8rem; color: var(--cd-ink-soft); margin-top: 2px;
}
[data-cdx="logout"] {
  display: block; width: 100%; text-align: left; min-height: 44px;
  padding: 10px 12px; margin-top: 4px; border: 0; background: transparent;
  border-top: 1px solid var(--cd-line-soft); border-radius: 0 0 6px 6px;
  font-family: var(--cdx-sans); font-size: 0.9rem; font-weight: 500;
  color: var(--cd-red); cursor: pointer;
}

/* ══ 2. THE STATUS KEY ══════════════════════════════════════════════════════════════════
 * One key, used identically by the map, the airlines page and the ranker.
 */
.cdx-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cdx-key__item {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 0; background: transparent;
  font-family: var(--cdx-sans); font-size: 0.875rem; font-weight: 500;
  color: var(--cdx-label-key); cursor: default;
}
.cdx-keydot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-sizing: border-box; }
.cdx-keydot--built { background: var(--cd-navy); }
.cdx-keydot--researched { background: var(--cdx-researched); }
/* Hollow, so "queued" is a different SHAPE and not merely a different shade of the same dot. */
.cdx-keydot--queued { background: transparent; border: 1.5px solid var(--cd-navy); }

/* ══ 3. PLANNING ESTIMATE, AND HOW IT IS WORKED OUT ═════════════════════════════════════
 * DISCLAIMERS.md rule 5: a number and its qualifier travel together, and the qualifier stays
 * reachable in the same view -- "not behind a disclosure the reader has to find". So the
 * <details> ships OPEN, and the reader may collapse it. It is a native element: keyboard
 * operable and announced without a line of script.
 * No disclaimer text is written here. The words live on the pages that own them.
 */
.cdx-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--cd-amber-bg); border: 1px solid var(--cd-amber-deep);
  font-family: var(--cdx-mono); font-size: 0.6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cd-amber-text); white-space: nowrap;
}
.cdx-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cd-amber-deep); flex: none;
}
.cdx-method { border-top: 1px solid var(--cd-line-soft); padding-top: 12px; margin-top: 16px; }
.cdx-method > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; cursor: pointer; list-style: none;
  font-family: var(--cdx-mono); font-size: 0.6875rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cd-navy-link);
}
.cdx-method > summary::-webkit-details-marker { display: none; }
.cdx-method > summary::after {
  content: "+"; margin-left: auto; font-family: var(--cdx-sans);
  font-size: 1rem; color: var(--cd-ink-soft);
}
.cdx-method[open] > summary::after { content: "\2212"; }
.cdx-method__body { font-size: 0.9375rem; line-height: 1.6; color: var(--cd-ink-body); }
.cdx-method__body p { margin: 0 0 10px; }

/* ══ 4. THE SECTION RAIL ════════════════════════════════════════════════════════════════ */
.cdx-rail { position: sticky; top: 88px; align-self: start; }
.cdx-rail__list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--cd-line-soft); }
.cdx-rail__link {
  display: flex; align-items: center; min-height: 44px;
  padding: 0 14px; margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 0.875rem; color: var(--cdx-label-off); text-decoration: none;
  transition: color .14s ease, border-color .14s ease;
}
.cdx-rail__link:hover { color: var(--cdx-label-on); }
/* Current section: a red rule AND a weight change, so it does not rest on colour alone. */
.cdx-rail__link[aria-current="true"] {
  color: var(--cdx-label-on); font-weight: 600; border-left-color: var(--cd-red);
}
@media (max-width: 900px) { .cdx-rail { display: none; } }

/* ══ 5. THE NEXT STOP HANDOFF ═══════════════════════════════════════════════════════════ */
.cdx-next {
  display: block; padding: 24px 28px; border-radius: 8px;
  background: var(--cd-navy); color: var(--cd-ink-on-navy);
  text-decoration: none;
}
.cdx-next__eyebrow {
  font-family: var(--cdx-mono); font-size: 0.6875rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cd-ink-on-navy-soft);
  display: flex; align-items: center; gap: 8px;
}
.cdx-next__title {
  font-size: 1.375rem; font-weight: 600; color: var(--cd-white);
  margin: 10px 0 6px;
}
.cdx-next__lead { font-size: 0.9375rem; line-height: 1.6; margin: 0; }
.cdx-next__go {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  margin-top: 14px; font-size: 0.9375rem; font-weight: 600; color: var(--cd-rose);
}
.cdx-next:hover .cdx-next__go { text-decoration: underline; }
/* A lead-in nobody has written yet is marked as unwritten, loudly, rather than shipping a
   plausible sentence that would read as finished copy and never get replaced. */
.cdx-next__lead--todo {
  border: 1px dashed var(--cd-ink-on-navy-soft);
  padding: 8px 10px; border-radius: 6px;
  color: var(--cd-ink-on-navy-soft); font-style: italic;
}
/* AN UNWRITTEN CARD IS NOT SHOWN (owner, 23 Oct 2026: "render the next-stop card only where a real line exists").
   A card whose lead is still the marked placeholder hides, together with the wrapper it sits alone in, so nothing
   unwritten ships and nothing generic stands in for it. The markup stays: writing the line means replacing the
   placeholder text AND dropping the --todo class, and the card then appears with no other change. A browser without
   :has() hides only the placeholder line; the card's eyebrow, title and link are derived from the route, not typed. */
div:has(> .cdx-next > .cdx-next__lead--todo) { display: none; }
@supports not selector(:has(*)) { .cdx-next__lead--todo { display: none; } }

/* ══ 6a. FILTER CHIPS ═══════════════════════════════════════════════════════════════════ */
.cdx-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--cdx-chip-face); border: 1px solid var(--cdx-chip-edge);
  font-family: var(--cdx-sans); font-size: 0.875rem; font-weight: 500;
  color: var(--cdx-label-key); cursor: pointer;
  transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}
.cdx-chip:hover { border-color: var(--cd-line-strong); }
/* Selected is a real pressed state, announced by aria-pressed, not a colour swap alone. */
.cdx-chip[aria-pressed="true"] {
  background: var(--cd-navy); border-color: var(--cd-navy);
  color: var(--cd-white); font-weight: 600;
}
.cdx-chip[aria-pressed="true"]::before {
  content: "\2713"; font-size: 0.75rem; line-height: 1;
}
.cdx-chip[disabled] { opacity: .5; cursor: not-allowed; }

/* ══ 6b. SCORE BARS — TWO RAMPS, ONE COMPONENT ══════════════════════════════════════════
 * The site already has good / okay / poor, and it already has TWO of them: the deep variants
 * carry contrast on the canvas, the light ones read against a navy panel. american.html:2020
 * and :2089 and sixteen sibling pages use them that way. Collapsing them into one ramp would
 * break one surface or the other, so the surface is a variant and both ramps are kept.
 */
.cdx-score { display: block; }
.cdx-score__track {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--cd-line-soft);
}
.cdx-score__fill { display: block; height: 100%; border-radius: 999px; }
.cdx-score__value {
  font-family: var(--cdx-mono); font-size: 0.75rem;
  color: var(--cdx-label-key);
}
/* On the canvas: the deep variants. */
.cdx-score--good .cdx-score__fill { background: var(--cd-green); }
.cdx-score--okay .cdx-score__fill { background: var(--cd-amber-text); }
.cdx-score--poor .cdx-score__fill { background: var(--cd-orange-deep); }
/* On a navy panel: the light variants, and a track that reads against navy. */
.cdx-on-navy .cdx-score__track { background: var(--cd-navy-edge); }
.cdx-on-navy .cdx-score__value { color: var(--cd-ink-on-navy); }
.cdx-on-navy .cdx-score--good .cdx-score__fill { background: var(--cd-green-soft); }
.cdx-on-navy .cdx-score--okay .cdx-score__fill { background: var(--cd-amber); }
.cdx-on-navy .cdx-score--poor .cdx-score__fill { background: var(--cd-orange); }

/* Screen-reader-only text, used to say "open" and "opening" in words beside every dot. */
.cdx-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}