/*
  Calculator kit: the shared design language for every Raynor tool.

  One verb across the tools: slide an assumption and watch the answer reshape.
  Controls are physical parts (keys that press in, a knurled lever on a ruler),
  rules are labelled walls on the ruler, and the answer is an exact number with
  the change since your last move. Loaded by the Next calculator export (after
  the site stylesheet, before each tool's own CSS) and by the static Help to Buy
  page, so both share one set of tokens and classes. Behaviour lives in
  calculator-src/.../app/_kit/kit.tsx (React) and js/calculator-kit.js (static).
*/

:root {
  --ck-navy: #1a365d;
  --ck-night: #10233f;
  --ck-gold: #f4c14f;
  --ck-gold-deep: #c9971f;
  --ck-green: #23794a;
  --ck-blue: #2d6cb5;
  --ck-coral: #c9412c;
  --ck-amber: #9a4a06;
  --ck-ink: #0b1e38;
  --ck-muted: #536476;
  --ck-line: rgba(26, 54, 93, 0.14);
  --ck-wash: #f3f6fa;
  --ck-surface: #fff;
  --ck-r-ctl: 8px;
  --ck-r-card: 16px;
  --ck-press: 0 3px 0 var(--ck-navy);
  --ck-press-down: 0 1px 0 var(--ck-navy);
  --ck-focus: 0 0 0 3px #fff, 0 0 0 6px var(--ck-navy);
  --ck-settle: 160ms;
  /* The clips' spring: quick out, a small overshoot, then rest. */
  --ck-spring: cubic-bezier(0.34, 1.7, 0.64, 1);
  --ck-roll-ease: cubic-bezier(0.22, 1.25, 0.36, 1);
}

.ck-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Keys: choices that press in ---------- */
.ck-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ck-keys[data-columns] {
  display: grid;
}

.ck-key {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 9px 12px;
  border: 2px solid var(--ck-navy);
  border-radius: var(--ck-r-ctl);
  background: var(--ck-surface);
  box-shadow: var(--ck-press);
  color: var(--ck-navy);
  font: 600 14px/1.2 Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: transform 260ms var(--ck-spring), box-shadow var(--ck-settle) ease, background-color var(--ck-settle) ease;
}

.ck-key:hover {
  background: var(--ck-wash);
}

.ck-key:active {
  transform: translateY(2px);
  box-shadow: var(--ck-press-down);
  transition-duration: 60ms;
}

.ck-key[aria-pressed='true'],
.ck-key[aria-checked='true'] {
  background: var(--ck-navy);
  box-shadow: 0 3px 0 var(--ck-night);
  color: #fff;
}

.ck-key:focus-visible {
  outline: none;
  box-shadow: var(--ck-press), var(--ck-focus);
}

.ck-key:disabled {
  border-color: #b7c2cf;
  box-shadow: 0 3px 0 #b7c2cf;
  color: #7a8898;
  cursor: not-allowed;
}

/* ---------- Lever: exact value, step keys and a ruler ---------- */
.ck-lever {
  display: grid;
  gap: 8px;
}

.ck-lever-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.ck-lever-label {
  color: var(--ck-navy);
  font: 700 13.5px/1.3 Inter, system-ui, sans-serif;
}

.ck-lever-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: stretch;
}

.ck-step {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 0;
  border: 2px solid var(--ck-navy);
  border-radius: var(--ck-r-ctl);
  background: var(--ck-surface);
  box-shadow: var(--ck-press);
  color: var(--ck-navy);
  font: 700 20px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: transform 260ms var(--ck-spring), box-shadow var(--ck-settle) ease;
}

.ck-step:active {
  transform: translateY(2px);
  box-shadow: var(--ck-press-down);
  transition-duration: 60ms;
}

.ck-step:focus-visible {
  outline: none;
  box-shadow: var(--ck-press), var(--ck-focus);
}

.ck-value {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 48px;
  padding: 0 12px;
  border: 2px solid var(--ck-navy);
  border-radius: var(--ck-r-ctl);
  background: var(--ck-surface);
  box-shadow: inset 0 2px 0 rgba(16, 35, 63, 0.08);
}

.ck-value:focus-within {
  box-shadow: inset 0 2px 0 rgba(16, 35, 63, 0.08), var(--ck-focus);
}

.ck-value > span {
  color: var(--ck-muted);
  font: 600 16px/1 Inter, system-ui, sans-serif;
}

/* Doubled class so page-wide input rules in each tool cannot restyle the value. */
.ck-value.ck-value input,
.ck-value.ck-value input:focus,
.ck-value.ck-value input:focus-visible {
  outline: none;
  box-shadow: none;
}

.ck-value input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ck-ink);
  font: 700 22px/1.2 Poppins, Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

.ck-value.ck-value input {
  font: 700 22px/1.2 Poppins, Inter, system-ui, sans-serif;
}

.ck-value[data-invalid='true'] {
  border-color: var(--ck-coral);
}

/* The ruler: ticks, a gold fill and a knurled thumb over a native range input. */
.ck-ruler {
  position: relative;
  height: 34px;
  margin-top: 2px;
}

.ck-ruler[data-walls='true'] {
  margin-top: 22px;
}

.ck-ruler[data-walls='2'] {
  margin-top: 42px;
}

.ck-ruler[data-walls='3'] {
  margin-top: 62px;
}

.ck-wall[data-row='1'] > b {
  bottom: calc(100% + 24px);
}

.ck-wall[data-row='2'] > b {
  bottom: calc(100% + 44px);
}

.ck-ruler-track {
  position: absolute;
  top: 12px;
  right: 11px;
  left: 11px;
  height: 10px;
  overflow: hidden;
  border: 2px solid var(--ck-navy);
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(26, 54, 93, 0.22) calc(10% - 2px) 10%),
    var(--ck-wash);
}

.ck-ruler-fill {
  display: block;
  width: var(--ck-fill, 0%);
  height: 100%;
  background: var(--ck-gold);
  transition: width var(--ck-settle) ease;
}

.ck-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 34px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.ck-range::-webkit-slider-runnable-track {
  height: 34px;
  background: transparent;
}

.ck-range::-moz-range-track {
  height: 34px;
  background: transparent;
}

.ck-range::-webkit-slider-thumb {
  width: 22px;
  height: 34px;
  border: 2px solid var(--ck-navy);
  border-radius: 7px;
  background:
    linear-gradient(90deg, transparent 5px, var(--ck-gold) 5px 7px, transparent 7px 9px, var(--ck-gold) 9px 11px, transparent 11px 13px, var(--ck-gold) 13px 15px, transparent 15px),
    var(--ck-navy);
  box-shadow: 0 3px 0 var(--ck-night);
  -webkit-appearance: none;
  appearance: none;
}

.ck-range::-moz-range-thumb {
  width: 18px;
  height: 30px;
  border: 2px solid var(--ck-navy);
  border-radius: 7px;
  background:
    linear-gradient(90deg, transparent 4px, var(--ck-gold) 4px 6px, transparent 6px 8px, var(--ck-gold) 8px 10px, transparent 10px 12px, var(--ck-gold) 12px 14px, transparent 14px),
    var(--ck-navy);
  box-shadow: 0 3px 0 var(--ck-night);
}

.ck-range:focus-visible {
  outline: none;
}

.ck-ruler .ck-range::-moz-range-progress {
  background: transparent;
}

.ck-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 3px 0 var(--ck-night), 0 0 0 3px #fff, 0 0 0 6px var(--ck-navy);
}

.ck-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 3px 0 var(--ck-night), 0 0 0 3px #fff, 0 0 0 6px var(--ck-navy);
}

/* Walls: where a rule changes. They are labelled, never magnetic. */
.ck-wall {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 0;
  border-left: 2px dashed var(--ck-coral);
  pointer-events: none;
}

.ck-wall > b {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  padding: 1px 6px;
  border: 1.5px solid var(--ck-coral);
  border-radius: 5px;
  background: #fff;
  color: var(--ck-coral);
  font: 700 11px/1.4 Inter, system-ui, sans-serif;
  white-space: nowrap;
  transform: translateX(-50%);
}

.ck-wall[data-edge='start'] > b {
  transform: none;
}

.ck-wall[data-edge='end'] > b {
  transform: translateX(-100%);
}

.ck-wall.is-crossed > b {
  animation: ck-clunk 520ms cubic-bezier(0.2, 1.4, 0.4, 1);
  background: var(--ck-gold);
  border-color: var(--ck-navy);
  color: var(--ck-navy);
}

@keyframes ck-clunk {
  0% { transform: translateX(-50%) scale(1); }
  35% { transform: translateX(-50%) scale(1.18); }
  100% { transform: translateX(-50%) scale(1); }
}

.ck-wall[data-edge='start'].is-crossed > b,
.ck-wall[data-edge='end'].is-crossed > b {
  animation: none;
}

/* Crossing a wall: short impact lines burst from where the rule sits on the
   track, the same mark the clips use when something lands. */
.ck-wall::after {
  position: absolute;
  top: 50%;
  left: -1px;
  z-index: 2;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 12deg, var(--ck-navy) 0 7deg, transparent 7deg 45deg);
  -webkit-mask: radial-gradient(circle, transparent 0 54%, #000 55% 80%, transparent 81%);
  mask: radial-gradient(circle, transparent 0 54%, #000 55% 80%, transparent 81%);
  content: '';
  opacity: 0;
  pointer-events: none;
}

.ck-wall.is-crossed::after {
  animation: ck-burst 440ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes ck-burst {
  0% { opacity: 0.9; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.25); }
}

.ck-lever-note {
  margin: 0;
  color: var(--ck-muted);
  font: 500 12.5px/1.45 Inter, system-ui, sans-serif;
}

.ck-lever-note strong {
  color: var(--ck-navy);
}

.ck-lever-note[data-tone='rule'] {
  color: var(--ck-amber);
  font-weight: 600;
}

/* ---------- Answer: exact figure, change since last move, why ---------- */
.ck-answer {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border-radius: var(--ck-r-card);
  background: var(--ck-night);
  color: #fff;
}

.ck-answer-kicker {
  color: var(--ck-gold);
  font: 700 12px/1.3 Inter, system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ck-answer-figure {
  color: #fff;
  font: 800 clamp(32px, 6vw, 44px)/1.05 Poppins, Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

.ck-answer-because {
  margin: 0;
  color: #dbe4ee;
  font: 500 14px/1.5 Inter, system-ui, sans-serif;
}

.ck-answer-because strong {
  color: #fff;
}

.ck-delta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 30px;
}

.ck-delta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1.5px solid var(--ck-gold);
  border-radius: 6px;
  color: var(--ck-gold);
  font: 700 13px/1.3 Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  animation: ck-rise 280ms ease-out;
}

.ck-delta-undo {
  min-height: 32px;
  padding: 4px 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font: 600 13px/1.2 Inter, system-ui, sans-serif;
  cursor: pointer;
}

.ck-delta-undo:hover {
  background: rgba(255, 255, 255, 0.1);
}

.ck-delta-undo:focus-visible {
  outline: 3px solid var(--ck-gold);
  outline-offset: 2px;
}

@keyframes ck-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* A rule the reader just crossed, shown beside the answer. */
.ck-rule {
  margin: 0;
  padding: 10px 12px;
  border-left: 4px solid var(--ck-gold);
  border-radius: 6px;
  background: rgba(244, 193, 79, 0.12);
  color: #fff;
  font: 500 13.5px/1.5 Inter, system-ui, sans-serif;
  animation: ck-rise 280ms ease-out;
}

/* ---------- Figure: exact answers whose changed digits roll ----------
   Only the characters that changed move, all at once: the new one rises from
   under a mask (drops, when the answer went down) and the old one leaves the
   other way. The figure reads as the old value until the new one lands, never
   as a mix of the two; changes of shape swap without rolling. */
.ck-roll {
  display: inline-block;
  white-space: nowrap;
}

.ck-roll-slot {
  display: inline-block;
  position: relative;
}

/* The mask sits at the digits' cap height and baseline, like the clips'
   headline line, so a digit slides out from behind an invisible edge. */
.ck-roll-slot.is-rolling {
  clip-path: inset(0.1em -0.15em 0.1em);
}

.ck-roll-in {
  display: inline-block;
}

.ck-roll-out {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  text-align: center;
  visibility: hidden;
}

.ck-roll[data-dir] .ck-roll-in,
.ck-roll[data-dir] .ck-roll-out {
  animation-duration: 240ms;
  animation-fill-mode: both;
  animation-timing-function: var(--ck-roll-ease);
}

.ck-roll[data-dir] .ck-roll-out {
  visibility: visible;
}

.ck-roll[data-dir='up'] .ck-roll-in { animation-name: ck-roll-from-below; }
.ck-roll[data-dir='up'] .ck-roll-out { animation-name: ck-roll-to-above; }
.ck-roll[data-dir='down'] .ck-roll-in { animation-name: ck-roll-from-above; }
.ck-roll[data-dir='down'] .ck-roll-out { animation-name: ck-roll-to-below; }

@keyframes ck-roll-from-below {
  from { transform: translateY(0.82em); }
  to { transform: none; }
}

@keyframes ck-roll-to-above {
  from { transform: none; }
  to { transform: translateY(-0.82em); }
}

@keyframes ck-roll-from-above {
  from { transform: translateY(-0.82em); }
  to { transform: none; }
}

@keyframes ck-roll-to-below {
  from { transform: none; }
  to { transform: translateY(0.82em); }
}

/* ---------- Stage: the card that holds the answer and its live visual ---------- */
.ck-stage {
  display: grid;
  gap: 16px;
  padding: 12px;
  border: 2px solid var(--ck-navy);
  border-radius: var(--ck-r-card);
  background: var(--ck-surface);
  box-shadow: 0 6px 0 var(--ck-navy);
}

/* ---------- Ghost: where a bar was before the last move ---------- */
.ck-ghost {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 0;
  border-left: 2px dashed rgba(255, 255, 255, 0.7);
  transition: left var(--ck-settle) ease;
  pointer-events: none;
}

/* ---------- Phone shortcut to the answer ---------- */
.ck-phonebar {
  display: none;
}

@media (max-width: 979px) {
  .ck-phonebar:not([hidden]) {
    position: fixed;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 10px 16px;
    border: 2px solid var(--ck-night);
    border-radius: 14px;
    background: var(--ck-night);
    box-shadow: 0 10px 28px rgba(16, 42, 76, 0.28);
    color: #fff;
    text-decoration: none;
  }

  .ck-phonebar > span:first-child {
    display: flex;
    flex-direction: column;
    color: #dbe4ee;
    font: 500 12px/1.3 Inter, system-ui, sans-serif;
  }

  .ck-phonebar strong {
    color: #fff;
    font: 700 18px/1.2 Poppins, Inter, system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
  }

  .ck-phonebar-go {
    flex: none;
    padding: 8px 12px;
    border: 2px solid var(--ck-navy);
    border-radius: var(--ck-r-ctl);
    background: var(--ck-gold);
    box-shadow: 0 3px 0 var(--ck-gold-deep);
    color: var(--ck-navy);
    font: 700 14px/1.2 Inter, system-ui, sans-serif;
  }

  .ck-phonebar:focus-visible {
    outline: 3px solid var(--ck-gold);
    outline-offset: 2px;
  }

  html {
    scroll-padding-bottom: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ck-key,
  .ck-step,
  .ck-ruler-fill,
  .ck-ghost {
    transition: none;
  }

  .ck-wall.is-crossed > b,
  .ck-wall.is-crossed::after,
  .ck-delta-chip,
  .ck-rule,
  .ck-roll[data-dir] .ck-roll-in {
    animation: none;
  }

  .ck-roll-out,
  .ck-roll[data-dir] .ck-roll-out {
    display: none;
  }
}