/* Page-specific styles for inflation-calculator-app.html.
   Shared layout, colours and components live in brand-shared.css (the
   whole site) and calculator-shared.css (every calculator) — this file
   only holds what's unique to this calculator. The page uses the shared
   single-column layout (.layout-single). */

  /* ---------- inflation-calculator (scoped) ---------- */

  /* Links on this page are the brand blue. */
  .calc-shell a { color: var(--brand); }

  /* Swap control. Sits under the year pair rather than between the two
     selects, so the two-column field grid above it stays intact and it has
     somewhere sensible to go when the grid collapses on narrow screens. */
  .calc-shell .swap-btn {
    margin-top: -4px;
    margin-bottom: 4px;
    padding: 6px 10px 6px 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
  }
  .calc-shell .swap-btn:hover {
    color: var(--brand);
    border-color: var(--brand);
    /* The same light fill as the input boxes. (This used to name
       --surface-alt, which only the other calculators define, so the fill
       never appeared.) */
    background: var(--surface-alt);
  }
  .calc-shell .swap-btn .swap-ico { font-size: 1rem; line-height: 1; }

  /* The hand-off sitting between the headline figure and the source note. */
  .calc-shell .res-after {
    margin: 10px 0 0;
    font-size: var(--text-small);
    color: var(--ink-soft);
  }
  /* Which series produced the figure above. */
  .calc-shell .res-note {
    margin-top: 14px;
    font-size: var(--text-small);
    color: var(--ink-soft);
  }
  .calc-shell .btn-ghost {
    background: var(--bg);
  }

  /* The result box is the shared .result-lead (calculator-shared.css, with
     its sentence, figure and two stats). This page hides it until there is
     an answer, then fades it in. */
  .calc-shell .result-lead { margin-top: 4px; display: none; }
  .calc-shell .result-lead.show { display: block; animation: calc-reveal .25s ease; }
  @media (prefers-reduced-motion: reduce){ .calc-shell .result-lead.show { animation: none; } }

  .calc-shell .msg { color: var(--danger); font-size: var(--text-read); }
  .calc-shell .msg:not(:empty) { margin-top: 10px; }