/* Zecca — Stake. One control blown up: the amount slider. The field takes the home currency's colour. */

@property --field { syntax: '<color>'; inherits: true; initial-value: #f5b93a; }
@property --field-on { syntax: '<color>'; inherits: true; initial-value: #14181a; }

.js .nav { opacity: 1; transition: none; }
.nav { color: var(--field-on); }
.nav__links a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }

/* ---------- the machine ---------- */
.stake {
  min-height: 100svh; padding: 150px var(--m) 80px;
  transition: --field .7s var(--ease), --field-on .7s var(--ease);
}
.machine {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  grid-template-areas:
    "intro intro intro intro intro intro intro intro pick  pick  pick  pick"
    "amt   amt   amt   amt   amt   amt   amt   amt   pick  pick  pick  pick"
    "sl    sl    sl    sl    sl    sl    sl    sl    sl    sl    sl    sl"
    "ends  ends  ends  ends  ends  ends  ends  ends  ends  ends  ends  ends"
    "dur   dur   dur   dur   dur   dur   out   out   out   out   out   out"
    "note  note  note  note  note  note  out   out   out   out   out   out"
    "go    go    go    go    go    go    go    go    go    go    go    go";
  align-items: start;
}
.stake__intro { grid-area: intro; }
.stake__title { font-size: clamp(3.5rem, 9vw, 9rem); line-height: .92; letter-spacing: -.04em; margin-bottom: 20px; }
.stake__intro p { font-size: var(--step-lead); line-height: 1.3; font-weight: 500; max-width: 34ch; }

/* currency chips sit on an ink tile so the selected chip can wear its own colour */
.pick {
  grid-area: pick; align-self: start; padding: 20px 20px 14px; background: var(--ink); color: var(--paper);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.pick .chips { margin: 0; }
.pick .chips legend { font-size: 1.0625rem; font-weight: 500; margin-bottom: 12px; color: var(--paper); }
.pick .chip span { height: 52px; background: var(--ink-2); color: var(--paper); }
.pick .chip:hover span { background: #2b3236; }
.pick .chip input:checked + span { background: var(--c); color: var(--on); }
.pick .chip input:focus-visible + span { outline: 3px solid var(--paper); outline-offset: 2px; }

/* the amount, set as a poster */
.amount {
  grid-area: amt; align-self: end; margin-top: 40px;
  font-family: var(--display); font-weight: 300; font-size: 12vw; line-height: .95; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.amount__unit { font-size: .38em; letter-spacing: -.02em; font-weight: 400; }

/* the slider: native range input, flat. Fill is its own element so there is no gradient. */
.slider { grid-area: sl; position: relative; height: 104px; margin-top: 28px; --th: 36px; }
.slider__track, .slider__fill { position: absolute; left: 0; top: 16px; height: 72px; pointer-events: none; }
.slider__track { right: 0; background: color-mix(in srgb, var(--field-on) 18%, transparent); transition: background-color .25s var(--ease); }
.slider:hover .slider__track { background: color-mix(in srgb, var(--field-on) 26%, transparent); }
.slider__fill { width: calc(var(--p) * (100% - var(--th)) + var(--th) / 2); background: var(--field-on); }
.slider input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize; touch-action: pan-y;
}
.slider input::-webkit-slider-runnable-track { height: 104px; background: transparent; border: 0; }
.slider input::-moz-range-track { height: 104px; background: transparent; border: 0; }
.slider input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: var(--th); height: 104px; background: var(--field-on); border: 8px solid var(--field); border-radius: 0;
  transition: transform .25s var(--ease);
}
.slider input::-moz-range-thumb {
  box-sizing: border-box; width: var(--th); height: 104px; background: var(--field-on); border: 8px solid var(--field); border-radius: 0;
}
.slider input:active::-webkit-slider-thumb { transform: scaleY(.92); }
.slider:has(input:focus-visible) { outline: 3px solid var(--field-on); outline-offset: 6px; }
.slider input:focus-visible { outline: none; }
.slider__ends { grid-area: ends; display: flex; justify-content: space-between; margin-top: 10px; font-size: var(--step-body); font-weight: 500; }

/* duration: a segmented switch, three big squares */
.dur { grid-area: dur; display: flex; gap: 6px; margin-top: 56px; }
.dur button {
  flex: 1; min-height: 208px; padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; text-align: left;
  background: color-mix(in srgb, var(--field-on) 16%, transparent); color: var(--field-on); border: 0; border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.dur button:hover { transform: translateY(-4px); }
.dur button:active { transform: translateY(1px) scale(.98); }
.dur button[aria-checked="true"] { background: var(--field-on); color: var(--field); }
.dur button:focus-visible { outline: 3px solid var(--field-on); outline-offset: 3px; }
.dur__n { font-family: var(--display); font-weight: 300; font-size: 4rem; line-height: .9; letter-spacing: -.04em; }
.dur__u { font-size: 1.125rem; font-weight: 500; margin-top: -4px; }
.dur__r { font-size: 1rem; font-weight: 500; }
.dur__note { grid-area: note; margin-top: 14px; font-size: var(--step-body); }

/* the computed reward */
.out { grid-area: out; margin-top: 56px; padding-left: 24px; }
.out__big { font-family: var(--display); font-weight: 300; font-size: clamp(3.5rem, 7vw, 7rem); line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.out__sent { margin-top: 14px; font-size: var(--step-lead); line-height: 1.3; font-weight: 500; max-width: 30ch; }
.out__sent b { font-weight: 600; }
.out__sm { margin-top: 14px; font-size: var(--step-body); max-width: 44ch; }

.go { grid-area: go; margin-top: 64px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.go .btn { min-height: 68px; padding: 0 36px; font-size: 1.375rem; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.go__msg { font-size: var(--step-body); font-weight: 500; max-width: 46ch; min-height: 1.5em; }

/* ---------- how: the lock as a bar ---------- */
.stk-how { --field: var(--ink); --field-on: var(--paper); min-height: 100svh; }
.stk-how .how__title { max-width: 10ch; }
.stk-how .bar { height: 30vh; min-height: 200px; }
.stk-how .seg { color: var(--ink); }
.stk-how .clause { color: var(--paper); }
.stk-how__note { margin-top: 40px; font-size: var(--step-body); max-width: 46ch; }

/* ---------- faq: filled tiles in paper ---------- */
.stk-faq { --field: var(--paper-2); --field-on: var(--ink); }
.stk-faq .q { background: var(--paper); }
.stk-faq .q:hover:not([open]) { background: #f6f8f4; }
.stk-faq .q[open] { background: var(--ink); color: var(--paper); }

/* ---------- phone: one column, the slider stays thumb-sized ---------- */
@media (max-width: 860px) {
  .stake { padding: 108px var(--m) 56px; }
  .machine { display: flex; flex-direction: column; align-items: stretch; }
  .amount { align-self: flex-start; }
  .stake__title { font-size: 19vw; margin-bottom: 16px; }
  .stake__intro p { font-size: 1.25rem; }
  .pick { margin-top: 28px; padding: 16px 14px 10px; }
  .pick .chip span { height: 48px; }
  .amount { margin-top: 32px; font-size: 21vw; }
  .amount__unit { display: block; font-size: .3em; margin-top: 4px; }
  .slider { margin-top: 18px; height: 96px; --th: 40px; }
  .slider__track, .slider__fill { top: 12px; height: 72px; }
  .slider input::-webkit-slider-runnable-track, .slider input::-moz-range-track { height: 96px; }
  .slider input::-webkit-slider-thumb, .slider input::-moz-range-thumb { height: 96px; }
  .slider__ends { font-size: 1rem; }
  .dur { margin-top: 36px; gap: 4px; }
  .dur button { min-height: 132px; padding: 14px 12px; }
  .dur__n { font-size: 2.75rem; }
  .dur__u { font-size: 1rem; }
  .dur__r { font-size: 1rem; }
  .out { margin-top: 36px; padding-left: 0; }
  .out__big { font-size: 17vw; }
  .out__sent { font-size: 1.375rem; }
  .go { margin-top: 36px; flex-direction: column; align-items: stretch; gap: 14px; }
  .go .btn { width: 100%; min-height: 64px; font-size: 1.25rem; }

  .stk-how .how__title { max-width: none; }
  .stk-how .bar { height: auto; min-height: 0; }
  .stk-faq { min-height: 0; }
  .stk-faq .q summary { padding-right: 60px; }
  .stk-how__note { margin-top: 28px; }

  .ft--time { grid-column: 1 / -1; order: 4; min-height: 150px; }
  .ft--say { grid-column: 1 / -1; order: 5; min-height: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .dur button:hover { transform: none; }
  .stake { transition: none; }
}