/* teksti-tv.com — teletext reader styles
 *
 * The screen reproduces the broadcast grid of 40 columns and its eight
 * colours. Everything around it is modern, high contrast and readable: body
 * copy never drops below 18px and controls never below 16px.
 */

/* ------------------------------------------------------------------ */
/* Kirjasin                                                            */
/* ------------------------------------------------------------------ */

/* JetBrains Mono (SIL Open Font License 1.1) tarjoillaan omalta palvelimelta,
   koska laitteiden omat tasalevyiset kirjasimet vaihtelevat: iOS:ssä DejaVu
   Sans Mono ei ole saatavilla, jolloin selain käytti ohutta Courieria. */
@font-face {
  font-family: 'TekstiTV Mono';
  src: url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TekstiTV Mono';
  src: url('/assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TekstiTV Mono';
  src: url('/assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --tt-black: #000000;
  --tt-red: #ff3b30;
  --tt-green: #28e05c;
  --tt-yellow: #ffe814;
  --tt-blue: #3a6bff;
  --tt-magenta: #ff5cf0;
  --tt-cyan: #2ae0e0;
  --tt-white: #ffffff;

  --ink: #f2f4f8;
  --ink-dim: #a7b0c0;
  --surface: #11141b;
  --surface-raised: #1a1f2b;
  --surface-line: #2b3242;
  --accent: var(--tt-yellow);

  --mono: "TekstiTV Mono", "DejaVu Sans Mono", "Liberation Mono", ui-monospace,
    SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;

  /* Ruudun 40 merkkiä mitoitetaan käytettävissä olevan leveyden mukaan niin,
     että reunukset ja kehys on vähennetty ensin. */
  --screen-font: clamp(9px, calc((100vw - 52px) / 24.15), 24px);
  /* JetBrains Monon glyfilaatikko on 1.32em (ascender 1.02 + descender 0.30),
     joten merkkiruudun on oltava sitä korkeampi, muuten Ä:n ja Ö:n pisteet
     jäävät värillisen taustan ulkopuolelle. */
  --cell-h: 1.4em;
  /* Kuinka paljon tekstiä lasketaan merkkiruudussa alaspäin. */
  --cell-lead: 0.08em;
  --screen-weight: 500;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: #070910;
}

body {
  margin: 0;
  background: #070910;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  /* Lyhyillä sivuilla alatunniste jäisi leijumaan kesken ruudun, joten se
     työnnetään aina näkymän alareunaan. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  /* iOS kumittaa sivua vaakasuunnassa, jos pyyhkäisy osuu vierittyvään
     elementtiin. Sivua selataan vain pystysuunnassa. */
  overscroll-behavior-x: none;
}

a {
  color: var(--tt-cyan);
}

a:hover,
a:focus-visible {
  color: var(--tt-yellow);
}

/* ------------------------------------------------------------------ */
/* Header and footer                                                    */
/* ------------------------------------------------------------------ */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 14px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--surface-line);
  background: var(--surface);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
}

.wordmark-mark {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--tt-black);
  background: var(--tt-yellow);
  padding: 4px 8px;
  border-radius: 3px;
  letter-spacing: 0.08em;
}

.wordmark-tld {
  color: var(--muted);
  font-weight: 500;
}

/*
 * Alasivulaskuri ruudun oikeassa yläkulmassa, kuten teksti-tv:n ruudussa.
 * Ei ota vastaan kosketuksia, jotta se ei peitä sisällön linkkejä.
 */
/*
 * Osoitin kertoo heti sivun avautuessa, että alasivut liikkuvat
 * pystysuunnassa. Se on ruudun päällä ja peittää pari merkkiä, joten se
 * häivytetään muutaman sekunnin kuluttua. Jokainen alasivun vaihto lataa
 * sivun uudelleen, joten osoitin näkyy juuri silloin kun se kertoo jotain.
 * Osoittimeen osuva hiiri tai näppäimistö tuo sen takaisin.
 */
.subpage-steps {
  animation: subpage-steps-fade 1s ease 6s forwards;
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 3px;
  border-radius: 6px;
  background: rgba(10, 12, 20, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e8ecf4;
}

/*
 * Nuolet kertovat, että alasivut liikkuvat pystysuunnassa, ja toimivat myös
 * painikkeina. Ne ovat tarkoituksella pienet, koska ne ovat ruudun päällä;
 * samat siirtymät ovat täysikokoisina painikkeina ruudun alapuolella.
 */
.subpage-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
}

@keyframes subpage-steps-fade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Kosketusnäytöllä ei ole hiirtä, mutta työpöydällä osoitin palaa esiin. */
.subpage-steps:hover,
.subpage-steps:focus-within {
  animation: none;
  opacity: 1;
  visibility: visible;
}

/* Liikkeen vähentämistä toivovalle ei animoida: osoitin jää näkyviin. */
@media (prefers-reduced-motion: reduce) {
  .subpage-steps {
    animation: none;
  }
}

.subpage-step:hover,
.subpage-step:focus-visible {
  color: var(--tt-yellow);
  background: rgba(255, 255, 255, 0.1);
}

.subpage-now {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.subpage-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 3px 0;
}

.subpage-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
}

.subpage-dot.current {
  background: var(--tt-yellow);
}

/* Nuoli ruudun alapuolisessa navigaatiossa on tavallinen täysikokoinen
   painike, joten se perii alasivupainikkeen mitat. */
.subpage-arrow {
  color: var(--ink-dim);
}

.subpage-arrow:hover,
.subpage-arrow:focus-visible {
  color: var(--tt-yellow);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 16px;
}

.site-nav a {
  color: var(--ink-dim);
  text-decoration: none;
  padding: 6px 0;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--tt-yellow);
}

.site-footer {
  flex: 0 0 auto;
  margin-top: 56px;
  padding: 28px clamp(16px, 4vw, 40px) 48px;
  border-top: 1px solid var(--surface-line);
  background: var(--surface);
  font-size: 16px;
  color: var(--ink-dim);
}

.site-footer p {
  max-width: 70ch;
}

.source-note {
  margin-top: 0;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Layout                                                               */
/* ------------------------------------------------------------------ */

.site-main {
  /* Venyy täyttämään tilan, jolloin alatunniste painuu alareunaan. */
  flex: 1 0 auto;
  width: 100%;
  box-sizing: border-box;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 36px) clamp(16px, 4vw, 24px) 0;
}

.page-heading {
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.25;
  margin: 0 0 20px;
}

.content {
  margin-top: 40px;
}

.content h2 {
  font-size: 22px;
  margin: 32px 0 12px;
}

.content p {
  max-width: 70ch;
}

.intro p {
  font-size: 19px;
  color: var(--ink);
}

.editorial {
  border-top: 1px solid var(--surface-line);
  padding-top: 24px;
}

/* ------------------------------------------------------------------ */
/* The teletext screen                                                  */
/* ------------------------------------------------------------------ */

.screen-frame {
  background: var(--tt-black);
  border: 1px solid var(--surface-line);
  border-radius: 8px;
  position: relative;
  /* Kehys myötäilee 40 merkin ruutua, jotta sen ympärille ei jää tyhjää
     mustaa aluetta. */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(8px, 2vw, 16px);
  /* Ruutu mitoitetaan aina näkyvälle alueelle, joten vieritystä ei tarvita
     kumpaankaan suuntaan. Pelkkä overflow-x: hidden teki laatikosta
     pystysuunnassa vierittyvän, jolloin se nielaisi sormieleen eikä sivu
     vierittynyt ruudun päältä lainkaan. */
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}

.viewer {
  touch-action: pan-y pinch-zoom;
}

/*
 * Alasivuja selataan pystypyyhkäisyllä ruudun päältä, kuten Ylen omassa
 * sovelluksessa. Selaimen oma pystyvieritys estetään ruudun riveiltä:
 * kehyksen pan-y ja rivin pan-x leikkaavat tyhjään, jolloin ele jää meille.
 * Sormizoomaus säilyy molemmissa, joten se ei katoa.
 */
.screen-frame.has-subpages .row {
  touch-action: pan-x pinch-zoom;
}

/*
 * Pienillä näytöillä ruutu täyttää koko näkymän, jolloin sivua ei pääsisi
 * vierittämään mistään. Ruudun alimmat rivit jätetään silloin tavalliseksi
 * vieritysalueeksi. Suuremmilla näytöillä ruudun alle jää jo näkyvää tilaa,
 * eikä kaistaa tarvita.
 */
.screen-frame.has-subpages .row.scroll-zone {
  touch-action: auto;
}

.screen {
  font-family: var(--mono);
  font-size: var(--screen-font);
  font-variant-ligatures: none;
  line-height: var(--cell-h);
  width: 40ch;
  margin: 0 auto;
  background: var(--tt-black);
  color: var(--tt-white);
  /* Vaalea teksti mustalla taustalla näyttää ohuemmalta kuin se on, joten
     ruudussa käytetään keskivahvaa leikkausta. */
  font-weight: var(--screen-weight);
}

/*
 * Teksti-tv:ssä sivuviittaukset ovat pelkkiä numeroita. Ne ovat klikattavia,
 * mutta eivät saa muuttaa merkkien leveyttä eivätkä ruudun värejä.
 */
.page-ref {
  position: relative;
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: currentColor;
  cursor: pointer;
}

/* Kosketusalue on merkkiruutua suurempi, mutta ei vaikuta asetteluun. */
.page-ref::after {
  content: '';
  position: absolute;
  inset: -0.5em -0.15em;
}

.page-ref:hover,
.page-ref:focus-visible {
  color: var(--tt-black);
  background: var(--tt-yellow);
  text-decoration: none;
  outline: none;
}

.row {
  display: block;
  height: var(--cell-h);
  white-space: pre;
  /* Kaksinkertaisen korkeuden rivi skaalataan, mikä luo oman
     piirtokontekstin. Ilman tätä se peittäisi seuraavan rivin ylätarkkeet,
     jolloin Ä:n ja Ö:n pisteet katoaisivat. */
  position: relative;
}

.row-double {
  height: calc(var(--cell-h) * 2);
}

.row-double > .cell-run {
  transform: scaleY(2);
  transform-origin: top left;
}

.cell-run {
  display: inline-block;
  height: var(--cell-h);
  white-space: pre;
  vertical-align: top;
}

/*
 * The font's declared box is 1.32em, and CSS would centre it in the cell,
 * leaving the dots on Ä and Ö a fraction of a pixel from the edge. The text
 * is instead given the exact font box and pushed down, so the diacritics keep
 * real headroom inside the coloured background at every size.
 */
.row,
.cell-run {
  box-sizing: border-box;
  padding-top: var(--cell-lead);
  line-height: calc(var(--cell-h) - var(--cell-lead));
}

/* Mosaic graphics are drawn as a 2x3 block grid so that no special font is
   required and the result is identical on every platform. */
.cell {
  display: inline-block;
  width: 1ch;
  height: var(--cell-h);
  vertical-align: top;
}

.cell.mosaic {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.cell.mosaic i {
  display: block;
}

.cell.mosaic i.on {
  background: currentColor;
}

.fg-black { color: var(--tt-black); }
.fg-red { color: var(--tt-red); }
.fg-green { color: var(--tt-green); }
.fg-yellow { color: var(--tt-yellow); }
.fg-blue { color: var(--tt-blue); }
.fg-magenta { color: var(--tt-magenta); }
.fg-cyan { color: var(--tt-cyan); }
.fg-white { color: var(--tt-white); }

.bg-black { background-color: var(--tt-black); }
.bg-red { background-color: var(--tt-red); }
.bg-green { background-color: var(--tt-green); }
.bg-yellow { background-color: var(--tt-yellow); }
.bg-blue { background-color: var(--tt-blue); }
.bg-magenta { background-color: var(--tt-magenta); }
.bg-cyan { background-color: var(--tt-cyan); }
.bg-white { background-color: var(--tt-white); }

/* ------------------------------------------------------------------ */
/* Controls                                                             */
/* ------------------------------------------------------------------ */

.page-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--surface-line);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 16px;
  text-decoration: none;
}

.chev {
  flex: none;
}

.control:hover,
.control:focus-visible {
  border-color: var(--tt-yellow);
  color: var(--tt-yellow);
}

.control.disabled {
  opacity: 0.4;
}

.control-page {
  font-family: var(--mono);
  font-weight: 700;
}

.page-jump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

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

.page-jump input {
  width: 5ch;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--surface-line);
  border-radius: 6px;
  background: var(--tt-black);
  color: var(--tt-yellow);
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.page-jump input:focus-visible {
  outline: 2px solid var(--tt-yellow);
  outline-offset: 2px;
}

.page-jump button {
  min-height: 48px;
  padding: 10px 18px;
  border: 0;
  border-radius: 6px;
  background: var(--tt-yellow);
  color: #16180d;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.subpage-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 16px;
  color: var(--ink-dim);
}

.subpage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--surface-line);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 16px;
  text-decoration: none;
}

.subpage.current {
  background: var(--tt-yellow);
  border-color: var(--tt-yellow);
  color: #16180d;
  font-weight: 700;
}

.fastext {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.fastext-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--surface-line);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 16px;
  text-decoration: none;
}

.fastext-key b {
  font-family: var(--mono);
  color: var(--ink-dim);
}

.fastext-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
}

.fastext-red .fastext-dot { background: var(--tt-red); }
.fastext-green .fastext-dot { background: var(--tt-green); }
.fastext-yellow .fastext-dot { background: var(--tt-yellow); }
.fastext-cyan .fastext-dot { background: var(--tt-cyan); }

.updated {
  margin-top: 16px;
  font-size: 16px;
  color: var(--ink-dim);
}

/* ------------------------------------------------------------------ */
/* Link lists                                                           */
/* ------------------------------------------------------------------ */

.page-links,
.directory-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-links a,
.directory-list a {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--surface-line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
  text-decoration: none;
}

.page-links a:hover,
.directory-list a:hover,
.page-links a:focus-visible,
.directory-list a:focus-visible {
  border-color: var(--tt-yellow);
  color: var(--tt-yellow);
}

.page-links b,
.directory-list b {
  font-family: var(--mono);
  color: var(--tt-yellow);
  flex: none;
}

.directory-group {
  margin-top: 40px;
}

.directory-group h2 {
  font-size: 22px;
  margin-bottom: 6px;
}

.directory-group .range {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ink-dim);
  font-weight: 400;
}

.lead {
  font-size: 19px;
  max-width: 70ch;
}

.group-link {
  margin-top: 28px;
  font-size: 16px;
}

/* ------------------------------------------------------------------ */
/* Simple pages                                                         */
/* ------------------------------------------------------------------ */

.button {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 12px 22px;
  border-radius: 6px;
  background: var(--tt-yellow);
  color: #16180d;
  font-weight: 700;
  text-decoration: none;
}

.notfound h1 {
  font-size: clamp(24px, 5vw, 32px);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------------ */
/* Kapeat näytöt                                                        */
/* ------------------------------------------------------------------ */

@media (max-width: 680px) {
  /* Ylätunniste pysyy yhdellä rivillä, eikä valikko vie puolta ruudusta. */
  .site-header {
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
  }

  .wordmark {
    font-size: 17px;
    gap: 8px;
    flex: none;
  }

  .wordmark-mark {
    font-size: 13px;
    padding: 3px 6px;
  }

  .site-nav {
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Vieritettävä rivi alkaa aina vasemmalta, jotta mikään linkki ei jää
       pysyvästi näkymän ulkopuolelle. */
    justify-content: flex-start;
    font-size: 15px;
    /* Oikea reuna häivytetään, jotta rivi näyttää vieritettävältä eikä
       katkaistulta. */
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-nav a {
    white-space: nowrap;
    padding: 4px 0;
  }

  .site-main {
    padding: 8px 12px 0;
  }

  /* Otsikko mahtuu yhdelle tai kahdelle riville, jotta ruutu näkyy heti. */
  .page-heading {
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 12px;
  }

  /*
   * Merkin koko otetaan siitä mitasta, joka loppuu ensin: 40 merkkiä leveys-
   * suunnassa tai 24 riviä ylätunnisteen alle jäävään korkeuteen. Rivikorkeus
   * on --cell-h, joten 24 riviä on 33.6em. Varaus 74px = ylätunniste, sisällön
   * ylätäyte ja kehyksen pystytäyte. svh on iOS:n pienin näkymäkorkeus, joten
   * ruutu mahtuu myös silloin kun selaimen palkit ovat näkyvissä.
   */
  :root {
    /* Puhelimessa rivi on hieman matalampi kuin työpöydällä, jotta 40 merkkiä
       mahtuu leveyssuunnassa ilman että 24 riviä karkaa näkyvän alueen alle.
       1.35em on yhä enemmän kuin kirjasimen 1.32em glyfilaatikko. */
    --cell-h: 1.35em;
    /* Matalammassa ruudussa teksti lasketaan hieman enemmän alas, jotta Ä:n
       pisteille jää yhtä paljon varaa kuin laskeville merkeille. */
    --cell-lead: 0.105em;
    --screen-font: min(calc((100vw - 2px) / 24.05), calc((100vh - 60px) / 32.4));
    --screen-font: min(calc((100vw - 2px) / 24.05), calc((100svh - 60px) / 32.4));
  }

  .screen-frame {
    /* Ruutu reunasta reunaan: kehys, pyöristys ja sivutäyte veivät tilaa,
       joka kuuluu merkeille. Negatiiviset marginaalit kumoavat sisällön
       sivutäytteen, joten musta alue ulottuu näytön reunoihin. */
    width: auto;
    max-width: none;
    margin-left: -12px;
    margin-right: -12px;
    padding: 4px 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  /* Selaus ensin: edellinen ja seuraava ovat omalla rivillään isoina
     painikkeina, ja sivunumerokenttä on niiden alapuolella. */
  .page-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'prev next'
      'jump jump';
    align-items: center;
    gap: 10px;
    margin-top: 12px;
  }

  .control-prev {
    grid-area: prev;
  }

  .control-next {
    grid-area: next;
  }

  .page-jump {
    grid-area: jump;
  }

  .control {
    justify-content: center;
    /* Ilman tätä ruudukon sarake levenee sisällön mukaan ja työntää sivun
       vaakasuunnassa yli reunan. */
    min-width: 0;
    min-height: 52px;
    padding: 10px 8px;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
  }
}

@media (max-width: 680px) {

  .control-next {
    flex-direction: row;
  }

  .control-label {
    display: inline;
  }

  .control-page {
    opacity: 0.75;
  }

  .page-jump {
    justify-content: center;
    gap: 6px;
  }

  .page-jump input {
    width: 4.5ch;
    font-size: 19px;
    padding: 8px 6px;
  }

  .page-jump button {
    padding: 10px 14px;
    font-size: 15px;
  }

  .subpage-nav {
    margin-top: 10px;
    gap: 6px;
  }

  .fastext {
    margin-top: 12px;
    gap: 8px;
  }

  .fastext-key {
    padding: 10px 12px;
    font-size: 15px;
    flex: 1 1 calc(50% - 4px);
  }

  .content {
    margin-top: 28px;
  }

  .page-links,
  .directory-list {
    grid-template-columns: 1fr;
  }
}

/* Hyvin kapeat puhelimet: nimi riittää ilman erillistä merkkiä. */
@media (max-width: 360px) {
  /* Kapeimmilla puhelimilla toiminto ja kohdesivun numero eivät mahdu
     rinnakkain, joten numero jätetään pois. Se näkyy sivunumerokentässä. */
  .control {
    font-size: 15px;
  }

  .control-page {
    display: none;
  }

  .wordmark-mark {
    display: none;
  }
}

/* ================================================================== */
/* Numeronäppäimistö, suosikit ja sovellusnäkymät                      */
/* ================================================================== */

/*
 * Sivunumeron näppäily omalla näppäimistöllä. Puhelimen oma näppäimistö peittää
 * puolet ruudusta, ja teksti-tv:ssä näppäillään vain kolme numeroa.
 */
.keypad {
  margin: 10px 0 0;
  padding: 14px;
  border: 1px solid var(--surface-line);
  border-radius: 10px;
  background: var(--surface);
}

.keypad[hidden] {
  display: none;
}

.keypad-display {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--tt-yellow);
}

.keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.keypad-key {
  min-height: 52px;
  border: 1px solid var(--surface-line);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
}

.keypad-key:active {
  background: #242b3a;
}

.keypad-clear,
.keypad-go {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
}

.keypad-go {
  background: var(--tt-yellow);
  border-color: var(--tt-yellow);
  color: #16180d;
}

/*
 * Suosikkipainike. Suosikit ovat vain tässä selaimessa, joten painike
 * paljastetaan vasta skriptistä.
 */
.fav-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0 0;
}

.fav-row[hidden] {
  display: none;
}

.fav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 18px;
  border: 1px solid var(--surface-line);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.fav-toggle.is-on {
  border-color: var(--tt-red);
  color: #ffd9d6;
}

.fav-toggle.is-on .fav-icon {
  fill: var(--tt-red);
  stroke: var(--tt-red);
}

.fav-link {
  color: var(--ink-dim);
  font-size: 16px;
}

/* Suosikkinäkymä. */
.favourites-intro {
  color: var(--ink-dim);
  max-width: 62ch;
}

.favourites-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.favourite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--surface-line);
  border-radius: 10px;
  background: var(--surface);
}

.favourite-link {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}

.favourite-link b {
  font-family: var(--mono);
  font-size: 22px;
  color: var(--tt-yellow);
  font-variant-numeric: tabular-nums;
}

.favourite-controls {
  display: flex;
  gap: 8px;
}

.favourite-button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--surface-line);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  cursor: pointer;
}

.favourite-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.favourite-remove {
  color: #ffc9c5;
}

.favourites-tools {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--surface-line);
}

.favourites-tools[hidden] {
  display: none;
}

.favourites-setting label {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink-dim);
}

.favourites-setting input {
  width: 20px;
  height: 20px;
}

.favourites-offline {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.favourites-status {
  color: var(--ink-dim);
  font-size: 16px;
}

.favourites-empty[hidden] {
  display: none;
}

@media (max-width: 420px) {
  .favourite {
    align-items: flex-start;
    flex-direction: column;
  }

  .favourite-controls {
    width: 100%;
  }

  .favourite-button {
    flex: 1 1 auto;
  }
}

/* Näppäimistön oma Siirry korvaa lomakkeen painikkeen, kun skripti on käytössä. */
.page-jump button[hidden] {
  display: none;
}

/*
 * Asennuspainike. Selainten oma asennusvalikko on piilossa, joten tämä nostaa
 * sen esiin. Painike on toissijainen, jotta se ei kilpaile sisällön kanssa.
 */
.install-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 18px;
  border: 1px solid var(--tt-cyan);
  border-radius: 8px;
  background: transparent;
  color: var(--tt-cyan);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.install-button[hidden] {
  display: none;
}

.install-help {
  margin: 10px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--surface-line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-dim);
  max-width: 62ch;
}

.install-help[hidden] {
  display: none;
}

.install-help p {
  margin: 0 0 12px;
}

.install-help strong {
  color: var(--ink);
}

.install-close {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--surface-line);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  cursor: pointer;
}

/*
 * Ensimmäisen käynnin opastus. Kortti on näkymän alareunassa eikä peitä koko
 * ruutua: hakutuloksesta tullut lukija näkee sisällön heti, mutta lukutavat
 * kerrotaan silti kerran. Suljettuna se on piilotettu jo ennen piirtoa.
 */
.onboarding {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 12px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.opastus-nahty .onboarding,
.onboarding[hidden] {
  display: none;
}

.onboarding-card {
  pointer-events: auto;
  width: 100%;
  max-width: 560px;
  padding: 18px 20px 16px;
  border: 1px solid var(--surface-line);
  border-radius: 14px;
  background: #0d1018;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.onboarding-title {
  margin: 0 0 12px;
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink);
}

.onboarding-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.onboarding-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.45;
}

.onboarding-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tt-cyan);
  padding-top: 2px;
}

.onboarding-icon svg {
  width: 16px;
  height: 16px;
}

.onboarding-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
}

.onboarding-more {
  color: var(--ink-dim);
  font-size: 16px;
}

/* Eleet ovat eri kosketuslaitteella ja tietokoneella, joten sanamuoto vaihtuu. */
.touch-only {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .touch-only {
    display: inline;
  }

  .pointer-only {
    display: none;
  }
}

/*
 * Matalalla puhelinnäytöllä opastus tiivistyy, jotta teksti-tv:n ruutu jää
 * selvästi näkyviin kortin yläpuolelle.
 */
@media (max-height: 680px) {
  .onboarding {
    padding: 8px;
  }

  .onboarding-card {
    padding: 14px 16px 12px;
  }

  .onboarding-title {
    margin-bottom: 10px;
    font-size: 17px;
  }

  .onboarding-list {
    gap: 10px;
    margin-bottom: 12px;
  }

  .onboarding-list li {
    font-size: 15px;
    line-height: 1.4;
  }

  .onboarding-actions .button {
    min-height: 44px;
  }
}

/*
 * Näppäimistön pikavalinnat: kolme viimeksi katsottua sivua yhdellä
 * napautuksella. Lista elää vain selaimessa, joten se paljastetaan vasta
 * skriptistä.
 */
.keypad-recent {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.keypad-recent-label {
  font-size: 13px;
  color: var(--ink-dim);
}

.keypad-recent-keys {
  display: flex;
  gap: 8px;
}

.keypad-recent-key {
  min-height: 40px;
  min-width: 56px;
  padding: 0 10px;
  border: 1px solid var(--surface-line);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 16px;
  cursor: pointer;
}

.keypad-recent-key:hover,
.keypad-recent-key:focus-visible {
  border-color: var(--tt-cyan);
  color: var(--tt-cyan);
}

/* Koti ja askelpalautin ovat kuvakkeita, joten ne keskitetään. */
.keypad-home,
.keypad-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}