/* ==========================================================================
   Rovik v3 — calculator.html only
   --------------------------------------------------------------------------
   Loaded immediately after css/rovik.css, on this page and no other.

   RULE, no exceptions: every colour here is a var(--token) defined in
   css/rovik.css. check_contrast.py does not read this file, so any colour
   written out literally here — hex, or a functional colour notation — is
   unverified, and therefore unverifiable. If a colour is needed that no
   token provides, add the token to rovik.css (all four theme blocks)
   rather than writing the value here.

   Everything below extends the existing vocabulary: .card, .field, .label,
   .hint, .input, .range, .stat-tile, .calc-chain, .figure, .kicker. The only
   genuinely new components are the slider snap markers (.calc-marks /
   .calc-mark) and the two result notes (.calc-note), for which nothing in
   rovik.css exists.
   ========================================================================== */


/* ==========================================================================
   1. THE TWO-COLUMN SHELL
   Inputs left, results right. Below 1000px it stacks, inputs first: the
   reader has to give the numbers before the answer means anything.
   ========================================================================== */

.calc{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,3.5vw,48px);
  align-items:start;
}
@media (max-width:1000px){
  .calc{grid-template-columns:minmax(0,1fr);}
}

.calc__h{
  font-size:var(--fs-h4);
  letter-spacing:var(--tr-body);
  color:var(--ink);
  margin:0;
}

.calc__inputs{
  display:flex;
  flex-direction:column;
  gap:var(--sp-8);
}

.calc__inputs-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--line);
}

.calc__results{
  display:flex;
  flex-direction:column;
  gap:var(--sp-6);
}

/* The answer stays in view while the sliders are being moved. Sticky only
   where there is vertical room for it; on a stacked layout it would pin the
   results over the inputs, which is the opposite of useful. */
@media (min-width:1001px){
  .calc__results{
    position:sticky;
    top:calc(var(--header-h) + var(--sp-6));
  }
}


/* ==========================================================================
   2. ONE INPUT: label + numeric entry + slider + snap markers + hint
   The slider and the number box are two views of one value. Both are real
   controls, both are keyboard operable, and js/calculator.js keeps them
   in step.
   ========================================================================== */

.calc-field{gap:var(--sp-3);}

.calc-field__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-4);
}
.calc-field__top .label{
  /* The long labels wrap; the number box must not be squeezed by them. */
  flex:1 1 auto;
  line-height:var(--lh-snug);
  padding-top:6px;
}

.calc-field__entry{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:var(--sp-1);
}

.calc-field__num{
  width:6.5ch;
  padding:8px 6px;
  text-align:right;
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
}
.calc-field__num--wide{width:8.5ch;}

/* The browser's spinner is a 12px hit target that changes money. Removed on
   purpose: the slider and the markers are the fast way to move the value. */
.calc-field__num::-webkit-outer-spin-button,
.calc-field__num::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.calc-field__num{-moz-appearance:textfield;appearance:textfield;}

.calc-field__unit{
  font-family:var(--mono);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  color:var(--ink-muted);
}

/* .range in rovik.css already sets accent-color, width and height, and the
   global :focus-visible rule already rings it. Nothing to add but spacing. */
.calc-field .range{margin:0;}


/* -- Snap markers ---------------------------------------------------------
   Not decoration. Each one is a button that sets the slider to a value worth
   landing on exactly: for call volume, the three plan boundaries. Native
   <datalist> ticks render alongside them where the browser supports it. */

.calc-marks{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
}

.calc-mark{
  font-family:var(--mono);
  font-size:var(--fs-label);
  font-weight:var(--fw-medium);
  letter-spacing:0.06em;
  color:var(--ink-muted);
  background:var(--surface-2);
  /* An interactive boundary, so it is the measured solid border and not the
     decorative hairline. --line-strong is 1.62:1 against the page: fine
     around a card, not around a control (WCAG 1.4.11). */
  border:1px solid var(--field-border);
  border-radius:var(--r-full);
  padding:3px 10px;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:var(--tap-highlight);
  transition:color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.calc-mark:hover{
  color:var(--ink);
  background:var(--surface-3);
  border-color:var(--accent);
}
/* The global :focus-visible rule rounds every focus ring to --r-xs. These
   are pills; keep their shape. */
.calc-mark:focus-visible{border-radius:var(--r-full);}
.calc-mark:active{transform:scale(0.97);transition-duration:var(--dur-press);}

/* The marker matching the current value reads as selected. Set by
   js/calculator.js, so it is simply absent with scripting off. A data
   attribute rather than aria-pressed: these are not toggles, they set a
   value, and announcing them as pressed would misdescribe them. */
.calc-mark[data-current]{
  color:var(--accent-ink);
  background:var(--accent-wash);
  /* --accent-edge, not --line-accent: still an interactive boundary. */
  border-color:var(--accent-edge);
}

.calc-field .hint{line-height:var(--lh-snug);}


/* ==========================================================================
   3. THE HEADLINE FIGURE
   aria-live lives on .calc-head__v alone. Never widen it to this card.
   ========================================================================== */

.calc-head{
  padding:var(--sp-8) var(--sp-6);
}

.calc-head__fig{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-3);
  margin:var(--sp-3) 0 0;
}

.calc-head__v{
  font-size:var(--fs-h2);
  line-height:var(--lh-head);
  font-weight:var(--fw-bold);
  color:var(--accent-ink);
}

.calc-head__unit{
  font-family:var(--mono);
  font-size:var(--fs-sm);
  color:var(--ink-muted);
}

.calc-head__year{
  margin:var(--sp-3) 0 0;
  font-size:var(--fs-sm);
  color:var(--ink-body);
}
.calc-head__year .figure{font-size:var(--fs-h4);}


/* ==========================================================================
   4. TILES
   .stat-tile carries the styling; only the density changes here.
   ========================================================================== */

.calc-tiles{gap:var(--sp-4);}
.calc-tiles .stat-tile{padding:var(--sp-4) var(--sp-5);}
.calc-tiles .stat-tile__v{font-size:23px;}


/* ==========================================================================
   5. THE ARITHMETIC CHAIN AND THE TWO RESULT NOTES
   .calc-chain is defined in rovik.css. It ships with .n and .blank; the
   running figure column is added here.
   ========================================================================== */

.calc-work{
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
}

.calc-chain__k{flex:1 1 auto;}

.calc-chain__v{
  flex:0 0 auto;
  margin-left:auto;
  font-size:var(--fs-xs);
  white-space:nowrap;
  color:var(--ink);
}

/* Six rows of numbers on a 375px screen will not fit side by side. */
@media (max-width:520px){
  .calc-chain li{
    flex-wrap:wrap;
    row-gap:var(--sp-1);
  }
  .calc-chain__k{flex:1 1 100%;}
  .calc-chain__v{margin-left:calc(var(--sp-4) + 3ch);}
}

.calc-note{
  border-top:1px solid var(--line);
  padding-top:var(--sp-4);
}
.calc-note__k{
  display:block;
  font-family:var(--mono);
  font-size:var(--fs-label);
  letter-spacing:var(--tr-label);
  text-transform:uppercase;
  color:var(--ink-muted);
  margin-bottom:var(--sp-2);
}
.calc-note__v{
  margin:0;
  font-size:var(--fs-sm);
  line-height:var(--lh-snug);
  color:var(--ink-body);
}
.calc-note__v .figure{font-size:var(--fs-h4);}
.calc-note__v strong{color:var(--ink);}
.calc-note__d{
  margin:var(--sp-2) 0 0;
  font-size:var(--fs-xs);
  line-height:var(--lh-snug);
  color:var(--ink-muted);
}

.calc-work__foot{
  margin:0;
  line-height:var(--lh-snug);
}


/* ==========================================================================
   6. HONESTY CARD
   It sits inside .section--band, which rebinds the ink and surface tokens
   locally, so this only needs geometry.
   ========================================================================== */

.calc-honesty{
  padding:clamp(28px,3.5vw,44px);
}
.calc-honesty h3{margin:0 0 var(--sp-4);}
.calc-honesty .lede{margin-top:0;max-width:none;}
.calc-honesty .lede + .lede{margin-top:var(--sp-5);}


/* ==========================================================================
   7. REDUCED MOTION
   Nothing here is required to read the page; all of it is press feedback.
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .calc-mark{transition:none;}
  .calc-mark:active{transform:none;}
}