/* ==========================================================================
   How forgetting works: explorable explanation
   Luna LXD, built against the live v4.9 stylesheets.

   The prose reuses the site's own .prose and .refs components, so it stays in
   sync with the Flight Log posts. Only the interactive parts are styled here.
   Sections are deep space, so a widget is a --panel island sitting on it, the
   same relationship the site already uses for its cards.

   Brand values are read through var() with the live token first and the older
   token name as a fallback, so this file also renders correctly against an
   earlier luna.css without edits.
   ========================================================================== */

.fw {
  /* Local token layer. Live name first, older name second, literal last. */
  --fw-ink: var(--t-hi, var(--white, #f6f5fa));
  --fw-body: var(--t-body, var(--comet, #b9b9c7));
  --fw-dim: var(--t-dim, var(--comet-dk, #8f8fa0));
  --fw-panel: var(--panel, var(--space-2, #14141d));
  --fw-panel-2: var(--panel-2, var(--space-3, #1a1a25));
  --fw-edge: var(--edge, var(--hair-dk, rgba(255, 255, 255, .09)));
  --fw-edge-hi: var(--edge-hi, rgba(255, 255, 255, .16));
  --fw-radius: var(--r-card, var(--radius, 16px));
  --fw-disp: var(--f-disp, var(--display, "Poppins", system-ui, sans-serif));
  --fw-text: var(--f-body, var(--body, "Inter", system-ui, sans-serif));
  --fw-mono: var(--f-mono, var(--mono, "Space Mono", ui-monospace, monospace));
  --fw-ease: var(--ease, cubic-bezier(.22, .75, .25, 1));
  --fw-chart-bg: #0b0b11;

  max-width: 900px;
  margin: clamp(34px, 5vw, 54px) auto;
  padding: clamp(20px, 3.4vw, 32px);
  background: var(--fw-panel);
  border: 1px solid var(--fw-edge);
  border-radius: var(--fw-radius);
  color: var(--fw-body);
  font-family: var(--fw-text);
}

/* luna3.css styles .prose's first paragraph as a display lede. Only the
   opening block should get that, so continuation blocks opt out. */
.prose.fx-cont > p:first-child {
  font: inherit;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--comet, #a9a9b8);
  margin: 0 0 18px;
}

/* The prose column is 70ch; widgets are allowed to run a little wider. */
.fx-wide {
  max-width: 900px;
  margin-inline: auto;
}

/* --- widget head --------------------------------------------------------- */

.fw-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 6px;
  font-family: var(--fw-mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber, #ffbd59);
}

.fw-title::before {
  content: "\25C0";
  font-size: .62rem;
  color: var(--coral, #ff784d);
}

.fw-lede {
  margin: 0 0 22px;
  max-width: 62ch;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--fw-dim);
}

/* --- controls ------------------------------------------------------------ */

.fw-controls {
  display: grid;
  gap: 20px;
  margin-bottom: 22px;
}

@media (min-width: 760px) {
  .fw-controls.cols-2 {
    grid-template-columns: 1fr 1fr;
    gap: 20px 30px;
  }
}

.fw-control label,
.fw-legend {
  display: block;
  margin-bottom: 10px;
  font-family: var(--fw-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fw-dim);
}

.fw-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fw-row input[type="range"] {
  flex: 1 1 150px;
  min-width: 120px;
}

/* 44px touch targets throughout. */
.fw-step {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--fw-panel-2);
  border: 1px solid var(--fw-edge-hi);
  border-radius: 999px;
  color: var(--fw-ink);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s var(--fw-ease), background .2s var(--fw-ease);
}

.fw-step:hover {
  border-color: var(--amber, #ffbd59);
  background: #21212d;
}

.fw-num {
  flex: 0 0 auto;
  width: 74px;
  height: 44px;
  padding: 0 8px;
  text-align: center;
  background: var(--fw-panel-2);
  border: 1px solid var(--fw-edge-hi);
  border-radius: 10px;
  color: var(--fw-ink);
  font-family: var(--fw-mono);
  font-size: .95rem;
}

.fw-unit {
  font-family: var(--fw-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fw-dim);
}

.fw input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 44px;
  background: transparent;
  cursor: pointer;
}

.fw input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 3px;
  background: var(--fw-edge-hi);
}

.fw input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 3px;
  background: var(--fw-edge-hi);
}

.fw input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8.5px;
  border-radius: 999px;
  background: var(--amber, #ffbd59);
  border: 2px solid var(--fw-panel);
}

.fw input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--amber, #ffbd59);
  border: 2px solid var(--fw-panel);
}

/* --- presets, radios and chips ------------------------------------------ */

.fw-fieldset {
  border: 0;
  margin: 0 0 22px;
  padding: 0;
}

.fw-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fw-choice {
  position: relative;
  display: block;
}

.fw-choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.fw-choice span {
  display: block;
  min-height: 44px;
  padding: 12px 18px;
  background: var(--fw-panel-2);
  border: 1px solid var(--fw-edge-hi);
  border-radius: 999px;
  color: var(--fw-body);
  font-size: .9rem;
  line-height: 1.5;
  transition: border-color .2s var(--fw-ease), color .2s var(--fw-ease);
}

.fw-choice input:checked + span {
  border-color: var(--amber, #ffbd59);
  color: var(--fw-ink);
  background: var(--cosmic-soft, rgba(255, 189, 89, .16));
}

.fw-btn {
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--fw-panel-2);
  border: 1px solid var(--fw-edge-hi);
  color: var(--fw-ink);
  font-family: var(--fw-text);
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .2s var(--fw-ease), background .2s var(--fw-ease);
}

.fw-btn:hover {
  border-color: var(--amber, #ffbd59);
  background: #21212d;
}

.fw-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.fw-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--fw-panel-2);
  border: 1px solid var(--fw-edge-hi);
  border-radius: 999px;
  color: var(--fw-body);
  font-family: var(--fw-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  cursor: pointer;
  transition: border-color .2s var(--fw-ease), color .2s var(--fw-ease);
}

.fw-chip:hover {
  border-color: var(--coral, #ff784d);
  color: var(--fw-ink);
}

.fw-chip-x {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  color: var(--coral, #ff784d);
}

.fw-empty {
  margin: 0;
  font-size: .9rem;
  color: var(--fw-dim);
}

.fw-add .fw-control {
  margin: 0;
}

/* --- chart --------------------------------------------------------------- */

/* The aspect ratio matches the chart's viewBox exactly, so the space is
   reserved before the SVG exists and nothing shifts when it renders.
   No padding, or the reserved box and the drawn box would disagree. */
.fw-chart {
  margin: 20px 0 4px;
  padding: 0;
  aspect-ratio: 720 / 380;
  background: var(--fw-chart-bg);
  border: 1px solid var(--fw-edge);
  border-radius: calc(var(--fw-radius) - 6px);
  overflow: hidden;
}

@media (max-width: 560px) {
  .fw-chart {
    aspect-ratio: 360 / 310;
  }
}


.fchart {
  display: block;
  width: 100%;
  height: auto;
}

.fchart-grid line {
  stroke: rgba(255, 255, 255, .09);
  stroke-width: 1;
}

.fchart-axis text {
  fill: var(--fw-dim);
  font-family: var(--fw-mono);
  font-size: 11px;
  letter-spacing: .05em;
}

.fchart-axis-title {
  fill: var(--fw-dim);
  font-family: var(--fw-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.fchart-key {
  fill: var(--fw-ink);
  font-family: var(--fw-mono);
  font-size: 12px;
  letter-spacing: .04em;
}

.fchart-marker-line {
  stroke: rgba(255, 255, 255, .22);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

/* The narrow layout scales type up so it stays legible on a phone. */
.fchart.is-narrow .fchart-axis text {
  font-size: 15px;
}

.fchart.is-narrow .fchart-axis-title {
  font-size: 13px;
  letter-spacing: .1em;
}

.fchart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 10px 2px 0;
  padding: 0;
  list-style: none;
  font-family: var(--fw-mono);
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--fw-ink);
}

.fchart-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fchart-swatch,
.fchart-swatch svg {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 6px;
  overflow: visible;
}

.fchart-line,
.fchart-key,
.fchart-labels line {
  transition: opacity .25s var(--fw-ease);
}

/* 0.6 is the lowest dim that keeps a comparison line above 3:1 against the
   chart background and its label above 4.5:1. Measured, not guessed. */
.fchart .is-dim,
.fchart-legend li.is-dim {
  opacity: .6;
}

/* --- readouts ------------------------------------------------------------ */

.fw-live {
  margin: 16px 0 0;
  padding: 15px 18px;
  background: var(--fw-panel-2);
  border-left: 2px solid var(--amber, #ffbd59);
  border-radius: 0 10px 10px 0;
  color: var(--fw-ink);
  font-size: 1.02rem;
  line-height: 1.6;
}

.fw-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.fw-stat {
  padding: 15px 18px;
  background: var(--fw-panel-2);
  border: 1px solid var(--fw-edge);
  border-radius: calc(var(--fw-radius) - 6px);
}

.fw-stat b {
  display: block;
  font-family: var(--fw-disp);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--fw-ink);
}

.fw-stat span {
  display: block;
  margin-top: 5px;
  font-family: var(--fw-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fw-dim);
}

/* The opening figure, deliberately larger than anything else. */
.fw-figure {
  margin: 4px 0 0;
  font-family: var(--fw-disp);
  font-size: clamp(3.4rem, 12vw, 5.6rem);
  font-weight: 800;
  line-height: 1;
  background: var(--cosmic, linear-gradient(110deg, #ffbd59, #ff784d 52%, #ff66c4));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fw-noscript {
  margin: 16px 0 0;
  padding: 15px 18px;
  border: 1px dashed var(--fw-edge-hi);
  border-radius: 10px;
  color: var(--fw-body);
  font-size: .95rem;
  line-height: 1.6;
}

/* --- model disclosure ---------------------------------------------------- */

.fx-details {
  max-width: 70ch;
  margin: clamp(42px, 6vw, 64px) auto 0;
  background: var(--panel, #14141d);
  border: 1px solid var(--edge, rgba(255, 255, 255, .09));
  border-radius: var(--r-card, 16px);
}

.fx-details > summary {
  padding: 20px 24px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-mono, "Space Mono", monospace);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber, #ffbd59);
}

.fx-details > summary::-webkit-details-marker {
  display: none;
}

.fx-details > summary::after {
  content: " +";
  color: var(--coral, #ff784d);
}

.fx-details[open] > summary::after {
  content: " \2212";
}

.fx-details-body {
  padding: 0 24px 24px;
  color: var(--t-body, #b9b9c7);
  font-size: .96rem;
  line-height: 1.75;
}

.fx-details-body h3 {
  margin: 26px 0 8px;
  font-family: var(--f-disp, "Poppins", system-ui, sans-serif);
  font-size: 1rem;
  color: var(--t-hi, #f6f5fa);
}

.fx-formula {
  display: block;
  margin: 12px 0;
  padding: 13px 15px;
  background: #0b0b11;
  border: 1px solid var(--edge, rgba(255, 255, 255, .09));
  border-radius: 10px;
  color: var(--t-hi, #f6f5fa);
  font-family: var(--f-mono, "Space Mono", monospace);
  font-size: .85rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* --- focus and motion ---------------------------------------------------- */

.fw :focus-visible,
.fx-details :focus-visible {
  outline: 2px solid var(--amber, #ffbd59);
  outline-offset: 3px;
}

.fw-choice input:focus-visible + span,
.fw input[type="range"]:focus-visible {
  outline: 2px solid var(--amber, #ffbd59);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .fw-step,
  .fw-btn,
  .fw-chip,
  .fw-choice span,
  .fchart-line,
  .fchart-key,
  .fchart-labels line {
    transition: none !important;
  }
}

/* --- narrow viewports ---------------------------------------------------- */

@media (max-width: 520px) {
  .fw-row input[type="range"] {
    flex: 1 1 100%;
    order: -1;
  }

  .fw-num {
    width: 68px;
  }

  .fw-stats {
    grid-template-columns: 1fr 1fr;
  }

  .fw-choices {
    flex-direction: column;
  }

  .fw-choice span {
    text-align: center;
  }
}

/* --- v4.9.0 merge fix: at 360px and below the two-up control grid squeezed the
   range + stepper row past the viewport (5px overflow at 320). Stack controls. --- */
@media (max-width: 400px) {
  .fw-controls, .fw-controls.cols-2 { grid-template-columns: 1fr; }
  .fw-row input[type="range"] { min-width: 0; }
}