/* Varaa. Proposal 6's own booking page, drawn in Kokko's system.
 *
 * Loaded after styles/kokko.css and before assets/css/teema.css, so it gets
 * Kokko's fonts and palette and the palette switcher still wins over both.
 * Nothing here names a colour: every value is a role from the token contract
 * in teema.css, or one of Kokko's own derived inks (--liekki-ink).
 *
 * The page is one errand in four short steps. The structure is borrowed from
 * ilmoitus/piste (masthead band, step rail, one section at a time, a bar that
 * follows you down), but piste is a tablet at a gate and this is somebody on
 * their sofa in February planning July, so it is set quieter and larger.
 */

/* Kokko ships a `.varaa` rule for its own inline links, so the page class is
   `varaa-sivu`, never `varaa`. */
.varaa-sivu { color-scheme: light; }
:root[data-teema="kuusikko"] .varaa-sivu,
:root[data-teema="kesayo"] .varaa-sivu,
:root[data-teema="hamara"] .varaa-sivu,
:root[data-teema="nuotio"] .varaa-sivu { color-scheme: dark; }

.varaa-sivu main { padding-bottom: 0; }

/* Small uppercase lines above headings: what kind of thing follows. */
.ylapala-yla, .askel-yla, .kooste-yla, .tilanne-otsikko, .katsaus-ryhma h3,
.polku-nro, .laji-hinta, .ohjaus-kooste {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.ylapala-yla, .askel-yla, .kooste-yla, .tilanne-otsikko, .katsaus-ryhma h3 {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ===========================================================================
   YLAPALA, the masthead band
   The same inverted plate Kokko's footer uses, so the page opens and closes
   on the same surface. The horizon mark is repeated large and faint in the
   corner: the only ornament, and it is the campsite's own treeline.
   =========================================================================== */

.ylapala {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--jalka-pohja);
  color: var(--jalka-teksti);
  border-bottom: 1px solid var(--viiva);
}
.ylapala .ylin { color: var(--jalka-otsikko); }
.ylapala .tunnus-alanimi { color: var(--jalka-korostus); }
.ylapala .ylin-puh a { border-bottom-color: var(--jalka-korostus); }

.ylapala-nimi {
  padding: clamp(1.25rem, 5vh, 3rem) var(--sivu) clamp(1.75rem, 6vh, 3.5rem);
  max-width: 52rem;
}
.ylapala-yla { color: var(--jalka-korostus); }
.ylapala h1 {
  margin-top: 0.7rem;
  font-size: clamp(2.125rem, 1.4rem + 2.8vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--jalka-otsikko);
}
.ylapala-nimi p:last-child {
  margin-top: 1rem;
  max-width: 44ch;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  color: var(--jalka-teksti-2);
}

.ylapala-horisontti {
  position: absolute;
  right: -2rem;
  bottom: -0.5rem;
  z-index: -1;
  width: clamp(16rem, 46vw, 38rem);
  height: auto;
  color: var(--jalka-teksti);
  opacity: 0.07;
  pointer-events: none;
}

/* ===========================================================================
   The two columns: the form, and what you are asking for
   =========================================================================== */

.varaus {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 78rem;
  padding: 0 var(--sivu);
}
.varaus-lomake { min-width: 0; }

@media (min-width: 64rem) {
  .varaus {
    grid-template-columns: minmax(0, 42rem) minmax(17rem, 22rem);
    justify-content: space-between;
    column-gap: clamp(3rem, 6vw, 6rem);
  }
}

/* ===========================================================================
   POLKU, where you are
   Four segments of one rule. Each fills left to right as you pass it, so the
   rail reads as a line being drawn rather than a bar being topped up.
   =========================================================================== */

.polku { padding-top: clamp(2rem, 5vh, 3rem); }
.polku ol {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.polku li {
  position: relative;
  padding-top: 0.9rem;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--teksti-3);
}
.polku li::before,
.polku li::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.polku li::before { background: var(--viiva); }
.polku li::after {
  background: var(--korostus);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 560ms cubic-bezier(0.65, 0, 0.35, 1);
}
.polku li[data-ohi]::after,
.polku li[aria-current]::after { transform: scaleX(1); }

.polku-nro {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  transition: color 0.3s ease;
}
.polku-nimi {
  display: block;
  margin-top: 0.2rem;
  font-weight: 500;
  transition: color 0.3s ease;
}
.polku li[data-ohi] .polku-nro,
.polku li[aria-current] .polku-nro { color: var(--liekki-ink); }
.polku li[data-ohi] .polku-nimi { color: var(--teksti-2); }
.polku li[aria-current] .polku-nimi { color: var(--otsikko); }

/* Four names do not fit a phone. The numbers carry the progress and only the
   step you are on is named; it may run into the empty space of the next
   segment, which is fine, because that segment has no name showing. */
@media (max-width: 40rem) {
  .polku-nimi { display: none; }
  .polku li[aria-current] .polku-nimi { display: block; white-space: nowrap; }
}

/* ===========================================================================
   ASKEL, one step at a time
   =========================================================================== */

.askeleet { padding-top: clamp(2.25rem, 6vh, 3.5rem); }
.askel { padding-bottom: 1.5rem; }

@media (prefers-reduced-motion: no-preference) {
  .askel { animation: askel-saapuu 460ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .askel[data-suunta="taakse"] { animation-name: askel-palaa; }
}
@keyframes askel-saapuu {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes askel-palaa {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

.askel-yla { color: var(--liekki-ink); }

/* The one large thing on every step. Newsreader at its lightest, set big
   enough to read as a sentence being asked of you rather than a form label. */
.askel > h2 {
  margin-top: 0.75rem;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 200;
  font-size: clamp(2.375rem, 1.6rem + 3vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--otsikko);
  max-width: 16ch;
}
.askel > h2:focus { outline: none; }

.apu {
  margin-top: 1rem;
  max-width: 50ch;
  font-size: 1.0625rem;
  color: var(--teksti-2);
}

/* ===========================================================================
   Fields
   A soft filled well with a single rule under it. No box, no browser chrome.
   Focus draws the rule in the accent and warms the label above it.
   =========================================================================== */

.kentta { margin-top: 1.75rem; min-width: 0; }
.pari {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem;
}
@media (max-width: 34rem) {
  .pari { grid-template-columns: minmax(0, 1fr); }
}

.kentta > label,
.lajit-ryhma > legend {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--teksti-2);
  transition: color 0.2s ease;
}
.kentta:focus-within > label { color: var(--liekki-ink); }
.vapaa {
  font-weight: 400;
  color: var(--teksti-3);
}

.kentta input,
.kentta textarea {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-height: 3.5rem;
  margin: 0;
  padding: 0.95rem 1rem 0.85rem;
  background: var(--pinta);
  border: 0;
  border-radius: 3px 3px 0 0;
  box-shadow: inset 0 -1px 0 var(--viiva);
  font: inherit;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--otsikko);
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.kentta textarea { resize: vertical; min-height: 5.5rem; }
.kentta input::placeholder,
.kentta textarea::placeholder { color: var(--teksti-3); opacity: 1; }

.kentta input:hover,
.kentta textarea:hover { box-shadow: inset 0 -1px 0 var(--teksti-3); }

.kentta input:focus,
.kentta textarea:focus {
  outline: none;
  background: var(--syva);
  box-shadow: inset 0 -2px 0 var(--korostus);
}

.kentta [aria-invalid="true"] { box-shadow: inset 0 -2px 0 var(--liekki-ink); }

/* Dates. The picker icon is kept, because it is how a phone opens its wheel,
   but quietened, and the value is left aligned the way the other fields are. */
.kentta input[type="date"] { cursor: text; }
.kentta input::-webkit-date-and-time-value { text-align: left; }
.kentta input::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.kentta input::-webkit-calendar-picker-indicator:hover { opacity: 0.9; }

/* Errors are written in the page's derived ink rather than a stock red, and
   the empty element takes no room so nothing jumps until there is something
   to say. */
.virhe {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--liekki-ink);
}
.virhe:empty { margin: 0; }

/* ===========================================================================
   LAJIT, the accommodation cards
   A radio group underneath, so arrow keys, a screen reader and a form
   submission all see what they expect. The input itself is hidden visually
   and the card is its label.
   =========================================================================== */

.lajit-ryhma {
  margin: 2.25rem 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.lajit-ryhma > legend { margin-bottom: 0.75rem; }
.lajit-ryhma:focus-within > legend { color: var(--liekki-ink); }

.lajit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.laji { position: relative; display: block; cursor: pointer; }
.laji > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.laji-runko {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.2rem 1.15rem 1.1rem;
  background: var(--pinta);
  border: 1px solid transparent;
  border-radius: 3px;
  transition: border-color 0.2s ease, background-color 0.2s ease,
              box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.laji:hover .laji-runko { border-color: var(--viiva); }

.laji-merkki {
  display: block;
  width: 2.1rem;
  height: 2.1rem;
  color: var(--teksti-3);
  transition: color 0.2s ease;
}
.laji-nimi {
  display: block;
  margin-top: 1rem;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--otsikko);
}
.laji-kuvaus {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--teksti-2);
}
.laji-hinta {
  display: block;
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--teksti-3);
}
.laji-hinta b { font-weight: 500; font-size: 0.875rem; color: var(--otsikko); }

.laji-rasti {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border: 1.5px solid var(--viiva);
  border-radius: 50%;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.laji-rasti::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--korostus-ink);
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.laji > input:checked + .laji-runko {
  background: var(--pohja);
  border-color: var(--korostus);
  box-shadow: 0 0 0 1px var(--korostus), 0 18px 34px -22px rgb(var(--jalka-rgb) / 0.5);
  transform: translateY(-2px);
}
.laji > input:checked + .laji-runko .laji-merkki { color: var(--korostus); }
.laji > input:checked + .laji-runko .laji-rasti { background: var(--korostus); border-color: var(--korostus); }
.laji > input:checked + .laji-runko .laji-rasti::after { transform: scale(1); }
.laji > input:focus-visible + .laji-runko { outline: 3px solid var(--korostus); outline-offset: 3px; }

.lajit-ryhma[data-virhe] .laji-runko { border-color: var(--liekki-ink); }

/* Stacked on a phone, icon beside the words, so three choices still fit on
   one screen with the dates above them. */
@media (max-width: 40rem) {
  .lajit { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .laji-runko {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
    padding: 1rem 3rem 1rem 1rem;
  }
  .laji-merkki { grid-row: 1 / span 3; width: 1.9rem; height: 1.9rem; margin-top: 0.1rem; }
  .laji-nimi { margin-top: 0; }
  .laji-hinta { padding-top: 0.45rem; }
  .laji-rasti { top: 50%; margin-top: -0.6rem; }
}

/* ===========================================================================
   TILANNE, the honest availability read
   Always on the page, so the live region is always in the tree. Before
   there are dates it says what it is waiting for.
   =========================================================================== */

.tilanne {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.95rem;
  padding: 1.15rem 1.3rem 1.2rem;
  background: var(--pinta);
  border-left: 3px solid var(--viiva);
  transition: border-color 0.3s ease;
}
.tilanne-merkki { width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; color: var(--teksti-3); }
.tilanne-otsikko { color: var(--teksti-3); }
.tilanne-teksti {
  margin-top: 0.3rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--teksti-3);
}
.tilanne[data-tila="vapaa"],
.tilanne[data-tila="ruuhka"] { border-left-color: var(--korostus); }
.tilanne[data-tila="vapaa"] .tilanne-merkki,
.tilanne[data-tila="ruuhka"] .tilanne-merkki { color: var(--korostus); }
.tilanne[data-tila="vapaa"] .tilanne-otsikko,
.tilanne[data-tila="ruuhka"] .tilanne-otsikko { color: var(--liekki-ink); }
.tilanne[data-tila="vapaa"] .tilanne-teksti,
.tilanne[data-tila="ruuhka"] .tilanne-teksti { color: var(--teksti); }

.tilanne[data-tila="taysi"] { border-left-color: var(--liekki-ink); }
.tilanne[data-tila="taysi"] .tilanne-merkki,
.tilanne[data-tila="taysi"] .tilanne-otsikko { color: var(--liekki-ink); }
.tilanne[data-tila="taysi"] .tilanne-teksti { color: var(--otsikko); }

/* ===========================================================================
   KALENTERI, what is already taken
   One month at a time. Each night carries a hairline gauge of how full it
   is for the chosen type; full nights are hatched and struck through, the
   known rush weeks carry an ember dot, and the picked stay is one band of
   the accent from arrival to departure.
   =========================================================================== */

.paivat { margin-top: 0.5rem; }

.kalenteri {
  margin-top: 1.5rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--pinta);
  border-radius: 3px;
}

.kal-yla {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.kal-kk {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--otsikko);
  font-variant-numeric: lining-nums;
}
.kal-nuoli {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: var(--pohja);
  border: 0;
  border-radius: 50%;
  color: var(--otsikko);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.kal-nuoli svg { width: 1.1rem; height: 1.1rem; }
.kal-nuoli:hover:not(:disabled) { background: var(--korostus); color: var(--korostus-ink); }
.kal-nuoli:disabled { opacity: 0.35; cursor: default; }

.kal-ohje {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--teksti-2);
}

.kal-viikko, .kal-paivat {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}
.kal-viikko {
  margin-top: 1.1rem;
  padding-bottom: 0.4rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--teksti-3);
}

.kal-pv {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 3.25rem;
  padding: 0.35rem 0.2rem;
  background: var(--pohja);
  border: 0;
  border-radius: 2px;
  color: var(--otsikko);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.kal-nro {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kal-pv:hover:not([aria-disabled]) { box-shadow: inset 0 0 0 1px var(--korostus); }
.kal-pv:focus-visible { outline: 3px solid var(--korostus); outline-offset: 1px; z-index: 1; }
.kal-pv[data-tanaan] .kal-nro { text-decoration: underline; text-underline-offset: 0.2em; }

/* The gauge: how much of the night is spoken for. */
.kal-palkki {
  display: block;
  width: 62%;
  height: 3px;
  border-radius: 2px;
  background: var(--viiva);
  overflow: hidden;
}
.kal-palkki i {
  display: block;
  height: 100%;
  width: calc(var(--kaytto, 0) * 100%);
  background: var(--teksti-3);
}
.kal-pv[data-tila="vahissa"] .kal-palkki i { background: var(--korostus); }

/* Past, closed and full nights. Closed and past simply recede; full is
   marked, because that is the thing the guest came to find out. */
.kal-pv[data-tila="mennyt"],
.kal-pv[data-tila="kiinni"] { background: transparent; color: var(--teksti-3); opacity: 0.55; }
.kal-pv[data-tila="taysi"] {
  background:
    repeating-linear-gradient(135deg,
      transparent 0 5px,
      color-mix(in srgb, var(--teksti-3) 22%, transparent) 5px 6px),
    var(--syva);
  color: var(--teksti-3);
}
.kal-pv[data-tila="taysi"] .kal-nro { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.kal-pv[data-tila="taysi"] .kal-palkki i { background: var(--liekki-ink); }
.kal-pv[aria-disabled] { cursor: default; }

/* A full night can still be the morning you leave. */
.kal-pv[data-lahto][data-tila="taysi"] { cursor: pointer; }

/* Known rush weeks: a small ember in the corner. */
.kal-pv[data-ruuhka]::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: var(--korostus);
}

/* The chosen stay. */
.kal-pv[data-valinta="vali"] {
  background: color-mix(in srgb, var(--korostus) 22%, var(--pohja));
  color: var(--otsikko);
  opacity: 1;
}
.kal-pv[data-valinta="alku"],
.kal-pv[data-valinta="loppu"] {
  background: var(--korostus);
  color: var(--korostus-ink);
  opacity: 1;
}
.kal-pv[data-valinta="alku"] .kal-nro,
.kal-pv[data-valinta="loppu"] .kal-nro { text-decoration: none; }
.kal-pv[data-valinta="alku"] .kal-palkki,
.kal-pv[data-valinta="loppu"] .kal-palkki { background: color-mix(in srgb, var(--korostus-ink) 25%, transparent); }
.kal-pv[data-valinta="alku"] .kal-palkki i,
.kal-pv[data-valinta="loppu"] .kal-palkki i { background: var(--korostus-ink); }
.kal-pv[data-valinta="alku"] { border-radius: 999px 2px 2px 999px; }
.kal-pv[data-valinta="loppu"] { border-radius: 2px 999px 999px 2px; }

/* While picking a departure, the days you could leave on are lifted. */
.kal-pv[data-lahto]:not([data-valinta]) { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--korostus) 55%, transparent); }

.kal-selite {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin-top: 1.1rem;
  font-size: 0.8125rem;
  color: var(--teksti-2);
}
.kal-selite li { display: inline-flex; align-items: center; gap: 0.45rem; }
.kal-nayte {
  position: relative;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 2px;
  background: var(--pohja);
  box-shadow: inset 0 -3px 0 var(--viiva);
}
.kal-nayte[data-tila="vahissa"] { box-shadow: inset 0 -3px 0 var(--korostus); }
.kal-nayte[data-tila="taysi"] {
  background:
    repeating-linear-gradient(135deg,
      transparent 0 3px,
      color-mix(in srgb, var(--teksti-3) 35%, transparent) 3px 4px),
    var(--syva);
  box-shadow: none;
}
.kal-nayte-ruuhka { box-shadow: none; }
.kal-nayte-ruuhka::after {
  content: "";
  position: absolute;
  top: 0.15rem; right: 0.15rem;
  width: 0.3rem; height: 0.3rem;
  border-radius: 50%;
  background: var(--korostus);
}
.kal-nayte-valittu { background: var(--korostus); box-shadow: none; }

.kal-haku {
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--teksti-3);
}

@media (max-width: 26rem) {
  .kalenteri { margin-left: calc(var(--sivu) * -0.5); margin-right: calc(var(--sivu) * -0.5); }
  .kal-viikko, .kal-paivat { gap: 2px; }
  .kal-pv { min-height: 2.9rem; }
  .kal-nro { font-size: 0.875rem; }
}

/* ===========================================================================
   LASKURI, how many of you
   =========================================================================== */

.laskuri {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem;
  background: var(--pinta);
  border-radius: 999px;
  transition: box-shadow 0.2s ease;
}
.laskuri:focus-within { box-shadow: 0 0 0 2px var(--korostus); }
.laskuri button {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: var(--pohja);
  border: 0;
  border-radius: 50%;
  color: var(--otsikko);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.laskuri button svg { width: 1.1rem; height: 1.1rem; }
.laskuri button:hover:not(:disabled) { background: var(--korostus); color: var(--korostus-ink); }
.laskuri button:active:not(:disabled) { transform: scale(0.96); }
.laskuri button:disabled { opacity: 0.4; cursor: default; }

.kentta .laskuri input {
  width: 4.75rem;
  min-height: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: 2.25rem;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.kentta .laskuri input:focus { background: transparent; box-shadow: none; }
.laskuri input::-webkit-inner-spin-button,
.laskuri input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.laskuri-yksikko { margin-left: 0.4rem; margin-right: 0.9rem; color: var(--teksti-2); }

/* ===========================================================================
   KATSAUS, the review before sending
   =========================================================================== */

.katsaus { margin-top: 2.25rem; border-bottom: 1px solid var(--viiva); }
.katsaus-ryhma {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem 1rem;
  padding: 1.35rem 0 1.4rem;
  border-top: 1px solid var(--viiva);
}
.katsaus-ryhma h3 {
  align-self: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  color: var(--teksti-3);
}
.katsaus-ryhma dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 0.45rem 1.25rem;
}
.katsaus-ryhma dt { font-size: 0.9375rem; color: var(--teksti-3); }
.katsaus-ryhma dd {
  margin: 0;
  font-weight: 500;
  color: var(--otsikko);
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.katsaus-ryhma > p { grid-column: 1 / -1; margin: 0; }
.katsaus-arvio dd {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--liekki-ink);
  font-variant-numeric: lining-nums tabular-nums;
}

.muokkaa, .linkki {
  padding: 0 0 0.1rem;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--korostus);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--otsikko);
  text-decoration: none;
  cursor: pointer;
}
.muokkaa { justify-self: end; align-self: center; }
.muokkaa:hover, .linkki:hover { color: var(--liekki-ink); }

.huom {
  margin-top: 1.5rem;
  max-width: 56ch;
  font-size: 0.9375rem;
  color: var(--teksti-3);
}
.huom a { color: var(--otsikko); text-decoration-color: var(--korostus); }

@media (max-width: 34rem) {
  .katsaus-ryhma dl { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .katsaus-ryhma dd + dt { margin-top: 0.7rem; }
}

/* ===========================================================================
   VALMIS, after the mail client has opened
   The page cannot know whether the message was sent, so it says what it
   knows: the letter is written and waiting, and how to send it another way
   if nothing opened.
   =========================================================================== */

.valmis-merkki {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.75rem;
  border-radius: 50%;
  background: var(--pinta);
  color: var(--korostus);
}
.valmis-merkki svg { width: 1.9rem; height: 1.9rem; }
@media (prefers-reduced-motion: no-preference) {
  .askel:not([hidden]) .valmis-merkki { animation: valmis-merkki 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms both; }
}
@keyframes valmis-merkki {
  from { opacity: 0; transform: scale(0.6) translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.iso-apu {
  margin-top: 1.25rem;
  max-width: 34ch;
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem);
  font-weight: 300;
  line-height: 1.42;
  color: var(--otsikko);
}

/* The reference code: five characters to read out over the phone, so it is
   set in the mono and large enough to read back without squinting. */
.viite {
  display: inline-grid;
  gap: 0.35rem;
  margin-top: 2rem;
  padding: 1.1rem 1.4rem 1.2rem;
  background: var(--pinta);
  border-top: 2px solid var(--korostus);
}
.viite dt {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teksti-3);
}
.viite dd {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--otsikko);
}
.viite + .apu { margin-top: 1.5rem; }

/* When the request did not reach the server: the same letter, by email. */
.varalla {
  margin-top: 2rem;
  padding: 1.25rem 1.35rem 1.35rem;
  background: var(--pinta);
  border-left: 3px solid var(--liekki-ink);
}
.varalla > p { max-width: 56ch; color: var(--teksti-2); }
.varalla > p + p { margin-top: 0.4rem; }
.varalla .varalla-otsikko { font-weight: 600; color: var(--otsikko); }
.viesti {
  margin: 1.1rem 0 0;
  padding: 1rem 1.15rem;
  background: var(--pinta);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--teksti);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.varalla .napit { margin-top: 1rem; }
.kopioitu { font-size: 0.9375rem; color: var(--teksti-2); }

.napit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}
.valmis-napit { margin-top: 2.25rem; }

/* ===========================================================================
   Buttons
   One filled surface per screen, as on the homepage. Everything else is a
   word with a rule under it.
   =========================================================================== */

.nappi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 3.25rem;
  padding: 0.8rem 1.6rem;
  background: var(--korostus);
  border: 1px solid var(--korostus);
  border-radius: 2px;
  color: var(--korostus-ink);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.nappi svg { width: 1.05rem; height: 1.05rem; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.nappi:hover { box-shadow: 0 12px 26px -14px var(--korostus); }
.nappi:hover svg { transform: translateX(3px); }
.nappi:active { transform: translateY(1px); }

.nappi-toinen {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.25rem;
  padding: 0.8rem 0.1rem;
  background: none;
  border: 0;
  color: var(--otsikko);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}
.nappi-toinen span { border-bottom: 2px solid var(--korostus); padding-bottom: 0.05rem; }
.nappi-toinen svg { width: 1rem; height: 1rem; color: var(--teksti-3); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.nappi-toinen:hover svg { transform: translateX(-3px); color: var(--otsikko); }

/* ===========================================================================
   OHJAUS, the bar that follows you down
   Opaque, with the fade above it rather than in it, so nothing ghosts
   through the button (the lesson piste already paid for).
   =========================================================================== */

.ohjaus {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 1rem;
  padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
  background: var(--pohja);
}
.ohjaus::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 2.25rem;
  background: linear-gradient(to top, var(--pohja), rgb(var(--pohja-rgb) / 0));
  pointer-events: none;
}
.ohjaus-napit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ohjaus-napit .nappi { margin-left: auto; }

/* What you are asking for, in one line, for the screens without the side
   panel. It rides in the bar so it is always in view. */
.ohjaus-kooste {
  margin-bottom: 0.7rem;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--teksti-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The palette switcher lives in the bottom right corner. Below the two
   column layout the bar is full width, so its right edge keeps clear. */
@media (max-width: 63.99rem) {
  .ohjaus-napit { padding-right: 6.5rem; }
}
@media (max-width: 46rem) {
  .ohjaus-napit { padding-right: 2.75rem; }
  .ohjaus .nappi { padding-left: 1.2rem; padding-right: 1.2rem; }
}
/* On the narrowest phones Takaisin keeps its arrow and a screen reader keeps
   its word, so both buttons still fit on one line beside the switcher. */
@media (max-width: 26rem) {
  .ohjaus .nappi-toinen { min-width: 2.75rem; justify-content: center; }
  .ohjaus .nappi-toinen span {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (min-width: 64rem) {
  .ohjaus-kooste { display: none; }
}

/* ===========================================================================
   KOOSTE, the side panel
   The cart summary of a checkout: what you are asking for stays in view
   while you type your address. Wide screens only; narrower ones get the one
   line in the bar above.
   =========================================================================== */

.kooste { display: none; }

@media (min-width: 64rem) {
  .kooste {
    display: block;
    position: sticky;
    top: 1.5rem;
    align-self: start;
    margin-top: clamp(2rem, 5vh, 3rem);
    padding: 1.75rem 1.6rem 1.6rem;
    background: var(--pinta);
    border-top: 2px solid var(--korostus);
  }
}
.kooste-yla { color: var(--liekki-ink); }
.kooste-paivat {
  margin-top: 0.85rem;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 200;
  font-size: clamp(1.875rem, 1.4rem + 1vw, 2.375rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  color: var(--otsikko);
}
.kooste-yot {
  margin-top: 0.4rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--teksti-3);
}
.kooste dl { margin-top: 1.4rem; }
.kooste dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--viiva);
}
.kooste dt { font-size: 0.875rem; color: var(--teksti-3); }
.kooste dd { margin: 0; font-weight: 500; text-align: right; color: var(--otsikko); }

.kooste-arvio {
  margin-top: 0.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--viiva);
}
.kooste-arvio-nimi { font-size: 0.875rem; color: var(--teksti-3); }
.kooste-arvio-luku {
  margin-top: 0.25rem;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--liekki-ink);
}
.kooste-arvio-huom {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--teksti-3);
}
.kooste-apu {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--viiva);
  font-size: 0.875rem;
  color: var(--teksti-2);
}
.kooste-apu a { color: var(--otsikko); text-decoration: none; border-bottom: 2px solid var(--korostus); white-space: nowrap; }

/* A value that has not been chosen yet is a dash in the muted ink. */
[data-kooste][data-tyhja] { color: var(--teksti-3); font-weight: 400; }

/* The footer divider carries the page into the dark plate, as on proposal 6. */
.varaa-sivu .savu { margin-top: clamp(2.5rem, 7vh, 4.5rem); }

/* ===========================================================================
   MATKUSTAJAILMOITUS
   Every guest owes one before arriving, so the page ends on it: a full-width
   band, and the same reminder again on the thank-you step.
   =========================================================================== */

.matkustaja {
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
  padding: clamp(2.5rem, 7vh, 4rem) var(--sivu);
  background: var(--pinta);
  border-top: 3px solid var(--korostus);
}
.matkustaja-sisus {
  max-width: 78rem;
  display: grid;
  gap: 1.75rem 3rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 56rem) {
  .matkustaja-sisus { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
}
.matkustaja h2 {
  margin: 0.4rem 0 0.9rem;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.1;
  color: var(--otsikko);
  text-wrap: balance;
}
.matkustaja-teksti > p:last-child { max-width: 52ch; color: var(--teksti-2); }
.matkustaja-valinnat { display: grid; gap: 0.9rem; }
.matkustaja-kortti {
  position: relative;
  display: grid;
  gap: 0.25rem;
  padding: 1.2rem 3.2rem 1.2rem 1.3rem;
  background: var(--pohja);
  border: 1px solid var(--viiva);
  border-left: 4px solid var(--korostus);
  border-radius: 2px;
  color: var(--teksti);
  text-decoration: none;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.matkustaja-kortti b { font-size: 1.125rem; color: var(--otsikko); }
.matkustaja-kortti span { font-size: 0.9375rem; color: var(--teksti-3); }
.matkustaja-kortti svg {
  position: absolute; right: 1.2rem; top: 50%;
  width: 1.2rem; height: 1.2rem; margin-top: -0.6rem;
  color: var(--liekki-ink);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.matkustaja-kortti:hover { box-shadow: 0 12px 26px -18px var(--korostus); border-color: var(--korostus); }
.matkustaja-kortti:hover svg { transform: translateX(3px); }

/* The same reminder on the thank-you step. */
.muistutus {
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--pinta);
  border-left: 4px solid var(--korostus);
  max-width: 56ch;
}
.muistutus p { margin: 0; color: var(--teksti-2); }
.muistutus p + p { margin-top: 0.5rem; }
.muistutus-otsikko { font-size: 1.125rem; font-weight: 600; color: var(--otsikko) !important; }
.muistutus-linkit { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.muistutus-linkit a { color: var(--otsikko); font-weight: 500; text-underline-offset: 0.2em; text-decoration-color: var(--korostus); text-decoration-thickness: 2px; }

/* How to pay, on the thank-you step: the reminder's plate, with the two
   routes set as a small table so the numbers can be read off and typed. */
.maksutavat {
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--pinta);
  border-left: 4px solid var(--korostus);
  max-width: 56ch;
}
.maksutavat p { margin: 0; color: var(--teksti-2); }
.maksutavat p + p { margin-top: 0.5rem; }
.maksutavat b { color: var(--otsikko); font-family: "IBM Plex Mono", ui-monospace, monospace; }
.maksutavat dl { margin: 0.9rem 0 0; }
.maksutavat dl > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--viiva);
}
.maksutavat dt { font-size: 0.875rem; color: var(--teksti-3); }
.maksutavat dd {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--otsikko);
  overflow-wrap: anywhere;
}
.maksutavat dd span {
  display: block;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 0.875rem;
  color: var(--teksti-2);
}