/* The two pages that come after a booking request: the guest's own view of
 * it (/oma-varaus/) and the hosts' list of all of them (/isanta/).
 *
 * Loaded after kokko.css and varaa.css, and built from their parts: the
 * masthead band, the buttons, the field underline, the mono labels. What is
 * here is only what those two pages have that the form does not: a status,
 * a row of steps, instalments, and the host's cards.
 */

.tila-sivu {
  max-width: 50rem;
  padding: clamp(2rem, 6vh, 3.5rem) var(--sivu) clamp(3rem, 8vh, 5rem);
}
.tila-sivu.leveä { max-width: 72rem; }

.lataa { color: var(--teksti-3); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.875rem; }

.virhelaatikko {
  padding: 1.1rem 1.25rem;
  background: var(--pinta);
  border-left: 3px solid var(--liekki-ink);
  color: var(--otsikko);
}
.virhelaatikko p + p { margin-top: 0.5rem; color: var(--teksti-2); }

.pieni-yla {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teksti-3);
}

/* --- the status ----------------------------------------------------------- */

.tilamerkki {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.7rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--pinta);
  color: var(--teksti-2);
  border: 1px solid var(--viiva);
  white-space: nowrap;
}
.tilamerkki::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}
.tilamerkki[data-tila="odottaa"],
.tilamerkki[data-tila="erapaiva-ohi"] { color: var(--liekki-ink); border-color: color-mix(in srgb, var(--korostus) 45%, var(--viiva)); }
.tilamerkki[data-tila="vahvistettu"],
.tilamerkki[data-tila="maksettu"] { color: var(--sammal-ink); border-color: color-mix(in srgb, var(--sammal) 55%, var(--viiva)); }
.tilamerkki[data-tila="myohassa"] { color: var(--pohja); background: var(--liekki-ink); border-color: var(--liekki-ink); }
.tilamerkki[data-tila="hylatty"],
.tilamerkki[data-tila="peruttu"] { color: var(--teksti-3); }

.tila-otsikko {
  margin-top: 1rem;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.625rem);
  line-height: 1.08;
}
.tila-selitys {
  margin-top: 0.9rem;
  max-width: 44ch;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 300;
  line-height: 1.45;
  color: var(--otsikko);
}

/* The four steps from request to arrival. Done ones are filled, the current
   one is ringed, the rest are outlines. A row on wide screens, a column on
   a phone, where four labels side by side would not fit. */
.vaiheet {
  list-style: none;
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  counter-reset: vaihe;
}
.vaiheet li {
  position: relative;
  padding-top: 1.6rem;
  font-size: 0.875rem;
  color: var(--teksti-3);
}
.vaiheet li::before {
  content: "";
  position: absolute;
  top: 0.35rem; left: 0; right: 0;
  height: 2px;
  background: var(--viiva);
}
.vaiheet li::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0.75rem; height: 0.75rem;
  border-radius: 50%;
  background: var(--pohja);
  border: 2px solid var(--viiva);
}
.vaiheet li[data-vaihe="tehty"] { color: var(--otsikko); }
.vaiheet li[data-vaihe="tehty"]::before { background: var(--korostus); }
.vaiheet li[data-vaihe="tehty"]::after { background: var(--korostus); border-color: var(--korostus); }
.vaiheet li[data-vaihe="nyt"] { color: var(--otsikko); font-weight: 500; }
.vaiheet li[data-vaihe="nyt"]::after { border-color: var(--korostus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--korostus) 22%, transparent); }
.vaiheet li[data-vaihe="ohi"] { text-decoration: line-through; }

@media (max-width: 34rem) {
  .vaiheet { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vaiheet li { padding: 0.35rem 0 0.35rem 1.6rem; }
  .vaiheet li::before { top: 0; bottom: 0; left: 0.3rem; right: auto; width: 2px; height: auto; }
  .vaiheet li::after { top: 0.6rem; }
}

/* --- the booking itself ------------------------------------------------- */

.tiedot {
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--viiva);
  border: 1px solid var(--viiva);
}
.tiedot > div { padding: 0.9rem 1rem; background: var(--pohja); }
.tiedot dt { font-size: 0.8125rem; color: var(--teksti-3); }
.tiedot dd { margin: 0.2rem 0 0; font-weight: 500; color: var(--otsikko); font-variant-numeric: tabular-nums; }
.tiedot .viite-arvo { font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.1em; }

.viesti-isannalta {
  margin-top: 1.75rem;
  padding: 1rem 1.2rem;
  background: var(--pinta);
  border-left: 3px solid var(--sammal);
  color: var(--otsikko);
}
.viesti-isannalta .pieni-yla { display: block; margin-bottom: 0.35rem; }

.lohko-otsikko { margin-top: clamp(2.5rem, 6vh, 3.5rem); font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem); }

/* --- paying ----------------------------------------------------------------- */

.erat { list-style: none; margin-top: 1rem; border-top: 1px solid var(--viiva); }
.erat li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--viiva);
}
.era-nimi b { display: block; font-weight: 500; color: var(--otsikko); }
.era-nimi span { font-size: 0.875rem; color: var(--teksti-3); }
.era-summa { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--otsikko); }

.maksa {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  background: var(--pinta);
}
.maksa-qr { background: #fff; padding: 0.4rem; }
.maksa-qr svg { display: block; width: 100%; height: auto; }
.maksa-qr-teksti { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--teksti-3); text-align: center; }
.maksa-summa {
  font-family: "Geist", system-ui, sans-serif;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--otsikko);
  line-height: 1.1;
}
.maksa-era { margin-top: 0.3rem; color: var(--teksti-2); }
.maksa-tiedot { margin-top: 1.1rem; }
.maksa-tiedot > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--viiva);
}
.maksa-tiedot dt { font-size: 0.875rem; color: var(--teksti-3); }
.maksa-tiedot dd {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.9375rem;
  color: var(--otsikko);
  overflow-wrap: anywhere;
}
/* The second way to pay, set under the bank details as a quiet label
   rather than a new heading: same money, other route. */
.maksa-tai {
  margin-top: 1.25rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teksti-3);
}
.maksa-tai + .maksa-tiedot { margin-top: 0.5rem; }
.kopioi {
  margin-left: 0.5rem;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 0.8125rem;
  color: var(--liekki-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (max-width: 40rem) {
  .tiedot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maksa { grid-template-columns: minmax(0, 1fr); }
  .maksa-qr-kehys { max-width: 13rem; }
  .erat li { grid-template-columns: minmax(0, 1fr) auto; }
  .erat li .tilamerkki { grid-column: 1 / -1; justify-self: start; }
}

/* The note about how long a transfer takes. Deliberately the same plate as
   the "no staff on site" note on the front page: something to know, not a
   warning. */
.siirtoaika {
  margin-top: 1.25rem;
  padding: 0.9rem 1.15rem;
  background: var(--pohja);
  border-left: 3px solid var(--korostus);
  max-width: 60ch;
  font-size: 0.9375rem;
  color: var(--teksti-2);
}
.maksa .siirtoaika { background: var(--pohja); }

.testitili {
  margin-top: 1.25rem;
  padding: 0.8rem 1rem;
  border: 2px dashed var(--liekki-ink);
  color: var(--liekki-ink);
  font-weight: 600;
}

/* --- cancelling ----------------------------------------------------------- */

.peru { margin-top: clamp(2.5rem, 6vh, 3.5rem); border-top: 1px solid var(--viiva); padding-top: 1rem; }
.peru summary { cursor: pointer; font-weight: 500; color: var(--otsikko); }
.peru summary::marker { color: var(--korostus); }
.peru p { margin-top: 0.75rem; max-width: 60ch; color: var(--teksti-2); font-size: 0.9375rem; }
.nappi-vaara {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.2rem;
  background: none;
  border: 1px solid var(--liekki-ink);
  color: var(--liekki-ink);
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 600;
  cursor: pointer;
}
.nappi-vaara:hover { background: var(--liekki-ink); color: var(--pohja); }
.nappi-vaara[disabled], .nappi[disabled] { opacity: 0.55; cursor: progress; }

/* ===========================================================================
   ISANTA, the hosts' list
   =========================================================================== */

.isanta-palkki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.isanta-kuka { font-size: 0.9375rem; color: var(--teksti-2); }

.luvut {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--viiva);
  border: 1px solid var(--viiva);
}
.luvut > div { padding: 0.9rem 1rem; background: var(--pohja); }
.luvut b {
  display: block;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--otsikko);
  font-variant-numeric: tabular-nums;
}
.luvut span { font-size: 0.875rem; color: var(--teksti-3); }
.luvut .huomioitava b { color: var(--liekki-ink); }

.ryhma-otsikko {
  margin-top: clamp(2.25rem, 5vh, 3rem);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
}
.ryhma-otsikko small { font-size: 0.875rem; font-weight: 400; color: var(--teksti-3); }
.tyhja { margin-top: 0.75rem; color: var(--teksti-3); font-size: 0.9375rem; }

.kortit { list-style: none; margin-top: 1rem; display: grid; gap: 1rem; }
.kortti {
  padding: clamp(1rem, 2.2vw, 1.4rem);
  background: var(--pinta);
  border-left: 3px solid var(--viiva);
}
.kortti[data-tila="odottaa"] { border-left-color: var(--korostus); }
.kortti[data-tila="vahvistettu"] { border-left-color: var(--sammal); }
.kortti[data-huomio="myohassa"] { border-left-color: var(--liekki-ink); }

.kortti-yla {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.kortti-nimi { font-family: "Geist", system-ui, sans-serif; font-size: 1.1875rem; font-weight: 600; color: var(--otsikko); }
.kortti-nimi span { margin-left: 0.5rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.08em; color: var(--teksti-3); }
.kortti-rivi { margin-top: 0.4rem; color: var(--teksti-2); font-size: 0.9375rem; }
.kortti-rivi a { color: inherit; text-underline-offset: 3px; }
.kortti-rivi b { color: var(--otsikko); font-weight: 500; }

.kortti-lomake {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  align-items: end;
}
.kortti-lomake .kentta { margin-top: 0.5rem; }
.kortti-lomake .kentta-leve { grid-column: 1 / -1; }
.kortti-lomake .kentta input, .kortti-lomake .kentta textarea { background: var(--pohja); }
.maksutapa { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; padding: 0.6rem 0; border: 0; }
.maksutapa legend { font-size: 0.875rem; color: var(--teksti-3); margin-bottom: 0.25rem; }
.maksutapa label { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.maksutapa input { accent-color: var(--korostus); width: 1.05rem; height: 1.05rem; }
.kortti-napit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 0.75rem; }
.kortti-napit .nappi { min-height: 2.75rem; padding: 0.55rem 1.2rem; }
.kortti-napit .nappi-toinen { min-height: 2.75rem; }

.kortti .erat { margin-top: 0.85rem; }
.kortti .erat li { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.era-toiminto { display: inline-flex; align-items: center; gap: 0.5rem; }
.era-toiminto input[type="date"] {
  padding: 0.3rem 0.4rem;
  background: var(--pohja);
  border: 1px solid var(--viiva);
  font: inherit;
  font-size: 0.875rem;
  color: var(--otsikko);
}
.pikku-nappi {
  padding: 0.35rem 0.75rem;
  background: var(--pohja);
  border: 1px solid var(--teksti-3);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--otsikko);
  cursor: pointer;
  white-space: nowrap;
}
.pikku-nappi:hover { border-color: var(--korostus); }
.pikku-nappi.linkkina { border-color: transparent; background: none; color: var(--teksti-3); text-decoration: underline; text-underline-offset: 3px; }
.era-viive { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--liekki-ink); }

.kortti-alaosa { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.875rem; }

@media (max-width: 40rem) {
  .luvut { grid-template-columns: minmax(0, 1fr); }
  .kortti-lomake { grid-template-columns: minmax(0, 1fr); }
  .kortti .erat li { grid-template-columns: minmax(0, 1fr) auto; }
  .era-toiminto { grid-column: 1 / -1; }
}

/* A short line that says what just happened, then goes. */
.ilmoitus-rivi {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 20;
  max-width: min(92vw, 34rem);
  padding: 0.8rem 1.1rem;
  background: var(--jalka-pohja);
  color: var(--jalka-otsikko);
  font-size: 0.9375rem;
  box-shadow: 0 16px 36px -18px rgb(0 0 0 / 0.6);
}
.ilmoitus-rivi[data-laji="virhe"] { border-left: 3px solid var(--jalka-korostus); }

.kirjaudu { margin-top: 1.5rem; }

/* Email and password sign-in on the hosts' page, above the Google button. */
.salasana-lomake { max-width: 26rem; }
.salasana-napit { margin-top: 1.5rem; }
.tai { margin: 1.5rem 0 0; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teksti-3); }
.tai + .kirjaudu { margin-top: 0.25rem; }
.ok-laatikko { margin-top: 1.25rem; padding: 0.9rem 1.1rem; background: var(--pinta); border-left: 4px solid var(--korostus); max-width: 48ch; }