/* IRD mileage calculator — additions on top of the shared base.
   AAA+++ STUDIO PREMIUM (§3.2, §4 calculator-card row): this file must not
   re-declare radius or elevation. The shared layer gives .calc-card the ONE
   lift shadow and --radius-lg, and removes it entirely in dark mode; a local
   20px pill + a second shadow declaration was exactly the "everything floats a
   little" tell the spec kills. Site-local rules below are geometry only. */

.calc-card {
  max-width: 620px; margin: 26px auto 0; background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}
.calc-top { padding: 24px 24px 20px; }
.mode-row { display: flex; justify-content: center; margin-bottom: 20px; }
.amount-field { position: relative; }
/* The unit sits in the mono spec voice, not as an oversized glyph — a unit is
   a specification, not display typography (§3.4). */
.amount-field .cur {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: .8125rem; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 500; color: var(--muted); pointer-events: none;
}
/* Inputs are SUNKEN WELLS, not pills (§4). The shared layer already sets
   --surface-sunken, the inset hairline and the 48px floor for
   .calc-card input / .field input; this rule only carries the km affordance
   (left padding for the unit) and the numeral treatment. Do not re-declare
   background, border-radius or min-height here. */
.amount-input {
  width: 100%; padding: 14px 16px 14px 52px;
  font: inherit; font-size: clamp(1.9rem, 6vw, 2.6rem); font-weight: 650;
  letter-spacing: -.02em; color: var(--ink-num);
  font-variant-numeric: tabular-nums lining-nums;
}
/* Focus is the shared 2px accent outline (§3.6) — no glow ring, no colour swap. */
.amount-input:focus { outline: none; }
.rate-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; font-size: .88rem; color: var(--muted); }
.rate-row .seg button { font-size: .8rem; padding: 6px 11px; }
.rate-custom { width: 74px; text-align: center; padding: 7px 8px !important; font-size: .88rem !important; }

.out {
  background: var(--surface-2); border-top: 1px solid var(--line);
  padding: 22px 24px 24px;
}
.out-main { text-align: center; margin-bottom: 16px; }
.out-main .k { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
/* The claim numeral is .result-v (shared: tabular, 650, --ink-num) with the
   unit beside it in .result-u mono. The old rule painted it --accent at
   weight 800, which made the one number on the page read as a button. */
.out-main .result-v { margin-top: 2px; }
.out-main .result-u { display: block; margin-top: 6px; }
.out-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 460px) { .out-grid { grid-template-columns: 1fr; } }
.out-cell {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.out-cell .k { font-size: .8rem; color: var(--muted); font-weight: 600; }
.out-cell .v { font-size: 1.06rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.out-cell button {
  border: 0; background: none; color: var(--muted); padding: 4px; border-radius: 6px; line-height: 0;
}
.out-cell button:hover { color: var(--accent); }
.out-cell svg { width: 15px; height: 15px; }

/* .handoff is now the shared sticky-loop FURNITURE block (accent keel, kicker,
   title, reason) — the old site-local `display:flex` rule here silently
   overrode it, because tool.css loads after styles.css. Deleted, not edited.
   Secondary links sit in their own row underneath. */
.handoff-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The rate table's mono vintage chip (§4 data-table row). */
.tbl-cap {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-top: 18px;
}
.tbl-cap .vintage { color: var(--muted); text-transform: uppercase; }
.tbl-wrap td.n, .tbl-wrap th.n { text-align: right; }
.tbl-wrap td.n { font-family: var(--mono); font-size: .86rem; }

.quick-answer {
  max-width: 620px; margin: 22px auto 0; padding: 18px 20px;
  border-radius: 16px; background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.quick-answer h2 { font-size: .96rem; font-weight: 700; margin-bottom: 8px; }
.quick-answer ul { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: .93rem; }
.quick-answer li { margin-bottom: 5px; }
.quick-answer b { color: var(--ink); font-variant-numeric: tabular-nums; }

.shortcut {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 18px;
}
.shortcut div { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.shortcut .eq { font-size: 1.12rem; font-weight: 800; color: var(--accent); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.shortcut p { font-size: .87rem; color: var(--muted); margin-top: 6px; }