/* Everything here is borrowed from the site theme rather than invented, so the
   article reads as part of the same publication. That also means dark mode
   needs no handling of its own: the theme already flips these tokens. */
.fl-article {
  --fl-panel: var(--theme-background-alt);
  --fl-ink: var(--theme-foreground);
  --fl-muted: var(--theme-foreground-muted);
  --fl-grid: var(--theme-foreground-faintest);
  --fl-line: var(--theme-foreground-faintest);
  --fl-measure: 640px; /* the max-width the theme gives every paragraph */
}

/* The canvases need concrete rgb values, and the theme tokens resolve through
   color-mix(), which getPropertyValue hands back unevaluated. Reading real
   properties off a hidden probe gets them resolved instead. */
.fl-theme-probe {
  position: absolute;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  border-style: solid;
  border-width: 0;
  background-color: var(--fl-panel);
  color: var(--fl-ink);
  border-top-color: var(--fl-muted);
  border-bottom-color: var(--fl-line);
}

.fl-article :is(p, h1, h2, blockquote, ol) {
  max-width: var(--fl-measure);
}

/* --- hero --- */

.fl-hero {
  margin: 2rem 0 3.5rem;
}

.fl-kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fl-muted);
  margin: 0 0 1.25rem;
}

/* Same weight and rhythm as an h1 anywhere else on the site, just a little
   larger because this page is a cover. */
.fl-title {
  font-size: clamp(2rem, 4.5vw, 2.6rem);
  line-height: 1.15;
  font-weight: 700;
  color: var(--theme-foreground-alt);
  margin: 0;
  border: none;
  padding: 0;
}

/* The theme styles `h1 + h2` as an italic serif standfirst. Reusing that here
   rather than inventing a second subtitle style. */
.fl-subtitle {
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  color: var(--fl-ink);
  margin: 0.35rem 0 0;
}

.fl-intro {
  color: var(--fl-muted);
  margin: 1.5rem 0 0;
}

/* --- level rail --- */

.fl-rail-hint {
  font-family: var(--sans-serif);
  font-size: 0.82rem;
  color: var(--fl-muted);
  margin: 0 0 0.9rem;
}

.fl-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 4.5rem;
  max-width: none;
}

.fl-rail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.35rem 0.8rem 0.35rem 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--fl-line);
  background: transparent;
  color: var(--fl-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.fl-rail-number {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--fl-line);
  color: var(--fl-muted);
  font-weight: 600;
  font-size: 0.72rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.fl-rail-item:hover:not(:disabled) {
  border-color: var(--fl-muted);
  color: var(--fl-ink);
}

.fl-rail-item.is-open {
  color: var(--fl-ink);
  border-color: currentColor;
}

.fl-rail-item.is-open .fl-rail-number {
  background: #1768C9;
  color: #fff;
}

.fl-rail-item.is-locked {
  cursor: not-allowed;
  opacity: 0.5;
}

.fl-rail-item:focus-visible {
  outline: 2px solid #1768C9;
  outline-offset: 3px;
}

/* --- levels --- */

.fl-level[hidden] {
  display: none;
}

.fl-level {
  margin: 0 0 6rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--fl-line);
}

.fl-eyebrow {
  font-family: var(--sans-serif);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fl-level-number {
  font-weight: 700;
}

.fl-level-audience {
  color: var(--fl-muted);
}

.fl-statement {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.35;
  font-weight: 400;
  color: var(--theme-foreground-alt);
  margin: 0 0 2.5rem;
}

.fl-pull {
  margin: 0 0 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid #1768C9;
  font-size: 1.15rem;
  line-height: 1.45;
  font-weight: 500;
  font-style: normal;
  color: var(--fl-ink);
}

/* --- figures --- */

.fl-figure {
  margin: 0 0 2.5rem;
}

.fl-figure-single {
  max-width: 32rem;
}

/* Both level-2 panels sit inside the same column as the prose. */
.fl-figure-pair,
.fl-controls {
  max-width: var(--fl-measure);
}

.fl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.fl-panel {
  margin: 0;
  padding: 0;
}

.fl-panel-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fl-muted);
  margin: 0 0 0.5rem;
}

.fl-panel-body {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: var(--fl-panel);
  border: 1px solid var(--fl-line);
}

.fl-canvas {
  display: block;
  width: 100%;
  background: var(--fl-panel);
  touch-action: pan-y;
}

/* Grid children default to min-width:auto, which lets wide content push the
   column past the figure's max-width. */
.fl-grid > *,
.fl-panel,
.fl-panel-body {
  min-width: 0;
}

.fl-figure-pair .fl-canvas {
  cursor: crosshair;
}

.fl-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem;
  margin-top: 1.75rem;
}

.fl-controls-single {
  grid-template-columns: 1fr;
}

.fl-figure-single .fl-control {
  margin-top: 1.75rem;
}

.fl-control-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fl-muted);
  margin-bottom: 0.5rem;
}

.fl-control-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.fl-control-end {
  font-size: 0.78rem;
  color: var(--fl-muted);
  flex: 0 0 auto;
}

.fl-range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  background: transparent;
  cursor: pointer;
}

.fl-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--fl-track, var(--fl-line));
}

.fl-range::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--fl-track, var(--fl-line));
}

.fl-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--fl-panel);
  border: 2px solid var(--fl-ink);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
}

.fl-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fl-panel);
  border: 2px solid var(--fl-ink);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
}

.fl-range:focus-visible {
  outline: 2px solid #1768C9;
  outline-offset: 4px;
  border-radius: 4px;
}

.fl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1.5rem;
  max-width: var(--fl-measure);
}

.fl-button {
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--fl-ink);
  background: transparent;
  color: var(--fl-ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.fl-button.is-active {
  background: #1768C9;
  border-color: #1768C9;
  color: #fff;
}

.fl-scoreboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.5rem 2.5rem;
  margin: 2rem 0;
  max-width: var(--fl-measure);
}

.fl-score-number {
  font-family: var(--sans-serif);
  font-size: 2.4rem !important;
  font-weight: 700;
  line-height: 1 !important;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--fl-ink);
}

.fl-score-number span {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--fl-muted);
}

.fl-score-label {
  font-family: var(--sans-serif);
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
  color: var(--fl-muted);
  margin: 0.4rem 0 0;
}

.fl-button:hover {
  background: var(--fl-ink);
  color: var(--fl-panel);
}

.fl-button:focus-visible {
  outline: 2px solid #1768C9;
  outline-offset: 3px;
}

.fl-actions .fl-readout {
  margin: 0;
  color: var(--fl-muted);
}

.fl-readout {
  font-family: var(--sans-serif);
  margin: 1rem 0 0;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--fl-ink);
}

.fl-caption {
  font-family: var(--sans-serif);
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--fl-muted);
  max-width: var(--fl-measure);
}

@media (max-width: 640px) {
  .fl-grid,
  .fl-controls {
    grid-template-columns: 1fr;
  }
  .fl-level {
    margin-bottom: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fl-canvas {
    /* The simulation still runs; this only removes CSS transitions elsewhere. */
    transition: none !important;
  }
}