/* The two things the inflation page draws that no other page does: the buying-power bars and the
   three everyday price cards. Everything else — the hero, the tiles, the accent explorer, the
   disclosures, the chart's own line and grid — comes from results.css and styles.css.

   Scoped to .inflation-page, the body class this page opts into, so nothing here can reach another
   calculator. Every colour, radius and shadow is a token from styles.css, which is what gives both
   themes for free. */

/* ---------------------------------------------------------------- The mode switch */

/* The two modes are a row of the site's chips (styles.css), sitting at the top of the form. Only
   one is pressed at a time; the form below it is the same form in both. */
.inflation-page .mode-chips { margin: 0 0 18px; }
.inflation-page .mode-chips .chip { min-height: 44px; }

/* The preset rows: 5, 10, 20, 30 years, and the rate scenarios in the results. They carry their own
   top margin because they sit under a field's label rather than in a row of their own. */
.inflation-page .preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.inflation-page .preset-row .chip { min-height: 36px; }

/* The slider that mirrors the rate box, and the scrubber under the chart. Both are the 44px control
   the reference pages use, in the site's orange, with the value written beside the label so it is
   never carried by colour alone. */
.inflation-page input[type="range"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  accent-color: var(--highlight);
  cursor: pointer;
}
.inflation-page input[type="range"]:focus-visible { outline: 2px solid var(--highlight); outline-offset: 3px; border-radius: 5px; }
.inflation-page .slider-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
}
.inflation-page .slider-label output { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }

/* The form's own reset, at the foot of it. */
.inflation-page .reset-row { margin-top: 4px; }

/* ---------------------------------------------------------------- Buying power */

/* Two tracks, one above the other, so the shorter bar is the whole point. Each is labelled and
   carries its own percentage, which is what keeps the drawing readable without colour: the figures
   say what the lengths say, and the bars are decoration to a screen reader. */
.inflation-page .pp-bars { display: grid; gap: 14px; margin: 4px 0 0; }
.inflation-page .pp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.inflation-page .pp-head strong { color: var(--text); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.inflation-page .pp-track {
  display: block;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--border);
}
.inflation-page .pp-fill {
  display: block;
  height: 100%;
  border-radius: 10px;
  background: var(--primary);
  transition: width 220ms ease;
}
/* The later year is the one being asked about, so it wears the orange. */
.inflation-page .pp-fill.is-later { background: var(--highlight); }

/* ---------------------------------------------------------------- Everyday prices */

/* Three small cards, each a price today and what it could be later. One column on a phone. */
.inflation-page .pc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}
.inflation-page .pc-card {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  padding: 12px;
  border-radius: 12px;
  background: var(--accent);
}
.inflation-page .pc-icon { font-size: 1.35rem; line-height: 1; }
.inflation-page .pc-label { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
/* The amount box: a currency symbol and the number, reading as one field. */
.inflation-page .pc-input {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-bg);
}
.inflation-page .pc-input:focus-within { outline: 2px solid var(--highlight); outline-offset: 1px; }
.inflation-page .pc-input input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}
.inflation-page .pc-input input:focus { outline: none; }
.inflation-page .pc-prefix { color: var(--muted); font-size: 0.9rem; }
.inflation-page .pc-out { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.inflation-page .pc-arrow { color: var(--muted); margin-right: 4px; }

/* ---------------------------------------------------------------- The price chart */

/* The SVG comes from results.css; this wraps it so the tooltip has something to sit on. */
.inflation-page .chart-wrap { position: relative; margin-top: 2px; }
.inflation-page .chart-tip {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, 0);
  z-index: 2;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow);
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.inflation-page .chart-tip.is-on { opacity: 1; }
.inflation-page .chart-tip strong { display: block; font-size: 0.85rem; }
.inflation-page .chart-tip span { display: block; opacity: 0.85; }
/* What the tooltip says, in a line, for a keyboard, a screen reader and a printed page. */
.inflation-page .chart-live { margin: 2px 0 0; font-size: 0.85rem; color: var(--muted); }
.inflation-page .chart-scrub { margin-top: 4px; }

/* ---------------------------------------------------------------- A quiet state */

/* The historical mode's loading and unavailable lines: the same neutral note the rest of the site
   uses, made to sit inside a form rather than under a result. */
.inflation-page .history-note { margin: 0 0 14px; }
.inflation-page .history-note a { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- The formulas */

/* The site's formula blocks keep their spacing by scrolling sideways. These formulas are long
   enough that a sideways scroll would hide half of each one on a phone, so here they wrap. The
   monospace face stays: it is what makes a formula read as a formula. */
.inflation-page .formula { white-space: normal; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Narrow screens */

@media (max-width: 600px) {
  .inflation-page .pc-grid { grid-template-columns: minmax(0, 1fr); }
  .inflation-page .mode-chips .chip { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .inflation-page .pp-fill,
  .inflation-page .chart-tip { transition: none; }
}