/* FROZEN COPY. Do not edit.
 *
 * A snapshot taken on 2026-09-21, when the three rendition pages became
 * frozen comparison examples. They are kept so the alternatives can still be
 * shown side by side; they are not the living version.
 *
 * The living version is /ilmoitus/, which uses styles/ilmoitus.css and
 * assets/js/ilmoitus.js. Improvements go there. This file exists so that
 * changing those does not silently change the frozen pages.
 */

/* Matkustajailmoitus, shared foundation for the three renditions.
 *
 * The form itself is fixed by statute, so what varies between the three is
 * only how it is presented: a sheet to print (lomake), a form to fill before
 * arriving (ennakko), and a stepped screen for the gate (piste). Everything
 * they genuinely share lives here; each page adds its own character in a
 * style block of its own.
 *
 * Colour never appears below. Every value is a role from assets/css/teema.css,
 * so the palette switcher moves this page along with the other eight.
 *
 * Radius is zero throughout, as everywhere else on this site.
 *
 * The source document is a scanned paper form and its three language lines
 * carry OCR damage ("Tilnamn", "Artess i hemlandet", "underskrlft",
 * "Uppgiflerna", "anvSndas"). They are corrected here. The Finnish is the
 * operative text; the other languages are a courtesy line under it.
 */

/* --- page chrome ---------------------------------------------------------- */

/* These three pages carry the top bar and breadcrumb without the photographic
   hero the other sub-pages put behind them.
   Two scrims exist only to hold that photograph down, and with no photograph
   under them they had nothing to darken but the text. The one on .ylin was
   the worse of the two: .ylin is z-index 5 and so opens a stacking context,
   which left its 88% black gradient painting over the breadcrumb sitting
   outside it. Both are switched off here, and the breadcrumb makes its own
   room rather than borrowing the hero's. */

.ilmoitus .ylin::before,
.ilmoitus .murut::before,
.ilmoitus main::before { content: none; }

.ilmoitus .murut { padding-top: 1.5rem; }

/* The step heading takes focus when a step changes, so a screen reader lands
   on the new heading instead of staying where the old one was. Chrome counts
   that programmatic focus as :focus-visible and paints the ring, which on a
   pale palette is a bright box drawn around a heading nobody tabbed to. The
   ring is suppressed only for tabindex="-1", which by definition cannot be
   reached by the Tab key, so no keyboard user loses an indicator. */
.ilmoitus [tabindex="-1"]:focus,
.ilmoitus [tabindex="-1"]:focus-visible { outline: none; }

/* --- the multilingual label ---------------------------------------------- */

/* Finnish reads first and alone. Swedish, English and German sit under it at
   a size that stays legible but never competes. The paper form ran all four
   together on one line, which is why nobody reads any of them. */

.kentta { display: block; }

/* Rhythm between anything that is a question and anything that follows it.
   A single .kentta + .kentta rule misses every boundary where a two-up .pari
   sits next to a full-width field, which is most of them, and the label of
   the next question ends up sitting on the box of the last one. */
.kentta + .kentta,
.kentta + .pari,
.pari + .kentta,
.pari + .pari,
.ryhma > .apu + .kentta,
.ryhma > .apu + .pari,
.askel > .apu + .kentta,
.askel > .apu + .pari { margin-top: 1.4rem; }

.kentta > label,
.ryhma > .ryhma-otsikko,
.kentta-otsikko {
  display: block;
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--otsikko);
}

.kielet {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--teksti-3);
}

/* --- inputs --------------------------------------------------------------- */

/* Sized for a thumb and for an eye that is not twenty. The courtesy line is
   the smallest type on any of these pages, and nobody has to type into it. */

.kentta input[type="text"],
.kentta input[type="tel"],
.kentta input[type="email"],
.kentta input[type="date"],
.kentta input[type="number"],
.kentta textarea,
.kentta select {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.75rem 0.85rem;
  min-height: 3rem;
  /* --pinta, not --pohja. --pohja is the page itself, so a field filled with
     it disappears into the page on the pale palettes and leaves only a faint
     hairline to aim at, which is the wrong thing to hand somebody squinting
     at a tablet in daylight at a gate. --pinta is one step off the page in
     every palette: slightly lighter on the dark ones, slightly darker on the
     pale ones, so a field always reads as a field. */
  background: var(--pinta);
  border: 1px solid var(--viiva);
  border-radius: 0;
  color: var(--teksti);
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}

.kentta textarea { min-height: 5.5rem; resize: vertical; }

.kentta input:hover,
.kentta textarea:hover,
.kentta select:hover { border-color: var(--teksti-3); }

.kentta input:focus-visible,
.kentta textarea:focus-visible,
.kentta select:focus-visible {
  outline: 3px solid var(--korostus);
  outline-offset: 2px;
  border-color: var(--korostus);
}

/* The browser draws its own date control unless it is told the surface. */
.kentta input[type="date"] { color-scheme: dark light; }

/* --- help and error ------------------------------------------------------- */

/* Help above the box explains, error below the box corrects. Both are text;
   neither is a colour alone, because a colour alone is not a message. */

.apu {
  margin-top: 0.4rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--teksti-2);
  max-width: 62ch;
}

.virhe {
  margin-top: 0.45rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--korostus);
}
.virhe:empty { display: none; }

.kentta[data-virhe] input,
.kentta[data-virhe] textarea {
  border-color: var(--korostus);
  border-left-width: 4px;
}

/* --- groups --------------------------------------------------------------- */

/* A group is a section with a heading, not a fieldset with a legend.
   A legend keeps its slot in the fieldset's border even at display:block, so
   the border-top drawn above a section came out notched, running off to the
   right of the heading, and the gap under the heading inflated to 74px
   instead of the 24px asked for. role="group" with aria-labelledby gives the
   same accessibility tree as fieldset and legend, and lays out like the block
   element it looks like. */
.ryhma {
  border: 0;
  padding: 0;
  margin: 0;
}
.ryhma + .ryhma { margin-top: clamp(2.5rem, 6vh, 4rem); }

.ryhma > .ryhma-otsikko {
  padding: 0;
  margin-bottom: 1.5rem;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 200;
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--otsikko);
}
.ryhma > .ryhma-otsikko .kielet { font-size: 0.8125rem; margin-top: 0.4rem; }

/* Two fields that belong on one line when there is room for two. */
.pari {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.4rem;
}
.pari > .kentta + .kentta { margin-top: 0; }

@media (max-width: 40rem) {
  .pari { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
}

/* --- the checkbox --------------------------------------------------------- */

/* One checkbox on the whole form, and it is the one that says do not send me
   anything. It gets a target big enough to hit without aiming. */

.valinta {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0 0.9rem;
  align-items: start;
  padding: 1rem;
  background: var(--pinta);
  border: 1px solid var(--viiva);
  cursor: pointer;
}
.valinta:hover { border-color: var(--teksti-3); }
.valinta input {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.1rem 0 0;
  accent-color: var(--korostus);
}
.valinta span { font-size: 1rem; line-height: 1.45; color: var(--teksti); }
.valinta .kielet { margin-top: 0.3rem; }

/* --- buttons -------------------------------------------------------------- */

.nappi {
  display: inline-block;
  padding: 0.95rem 1.7rem;
  min-height: 3.25rem;
  border: 2px solid var(--korostus);
  border-radius: 0;
  background: var(--korostus);
  color: var(--korostus-ink);
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.nappi:hover { background: var(--korostus-ink); color: var(--korostus); }
.nappi:active { transform: translateY(1px); }
.nappi[disabled] { opacity: 0.55; cursor: default; transform: none; }
.nappi[disabled]:hover { background: var(--korostus); color: var(--korostus-ink); }

.nappi-toinen {
  background: none;
  color: var(--otsikko);
  border-color: var(--viiva);
}
.nappi-toinen:hover { background: var(--pinta); color: var(--otsikko); border-color: var(--teksti-3); }

.napit {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* --- the state of a submission -------------------------------------------- */

/* Three states, all of them written out. A form that only draws its happy
   path is a form that has not been finished. */

.tila {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  border-left: 4px solid var(--korostus);
  background: var(--pinta);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--teksti);
  max-width: 62ch;
}
.tila strong { color: var(--otsikko); display: block; margin-bottom: 0.3rem; }
.tila p { margin-top: 0.5rem; color: var(--teksti-2); }
.tila[hidden] { display: none; }

/* Working. The bar is a shape, not a spinner, and under reduced motion it
   stops and stays visible, because a thing that communicates only by moving
   communicates nothing to somebody who has turned movement off. */
.tila-tyo::after {
  content: "";
  display: block;
  height: 3px;
  margin-top: 0.9rem;
  background-color: var(--viiva);
  background-image: linear-gradient(to right, var(--korostus), var(--korostus));
  background-repeat: no-repeat;
  background-size: 35% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .tila-tyo::after { animation: ilmoitus-tyo 1.15s ease-in-out infinite; }
}
@keyframes ilmoitus-tyo {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tila-tyo::after { background-size: 100% 100%; opacity: 0.5; }
}

/* --- the paper sheet ------------------------------------------------------ */

/* Used on screen by the lomake rendition and by every rendition's print
   output. It is a depiction of A4, framed the way this site frames a
   photograph, so it reads as an object sitting on the page rather than as
   the page suddenly changing theme halfway down. */

.arkki-kehys {
  margin-top: clamp(2rem, 5vh, 3rem);
  padding: clamp(0.5rem, 1vw, 0.85rem);
  background: var(--syva);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.10),
    0 2px 4px rgb(var(--pohja-rgb) / 0.55),
    0 22px 48px -18px rgb(var(--pohja-rgb) / 0.85);
}

.arkki {
  /* Locked to paper, never to the palette: this is what comes out of the
     printer, and the printer has one colour of paper. */
  --muste: #14161a;
  --muste-2: #4a5058;
  --viivasto: #9aa1aa;
  --paperi-pohja: #ffffff;

  background: var(--paperi-pohja);
  color: var(--muste);
  font-family: "Public Sans", system-ui, sans-serif;
  /* Screen and print are deliberately identical here. The whole claim of the
     lomake rendition is that what is on the screen is what leaves the
     printer, and that claim is only true if the two use one set of numbers.
     They are tuned so the sheet lands at about 288mm, comfortably inside
     A4's 297mm, with a party of four on it. */
  font-size: 10pt;
  line-height: 1.32;
  padding: 10mm 11mm;
}

.arkki h1 {
  font-family: "Archivo", "Public Sans", system-ui, sans-serif;
  font-size: 15pt;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--muste);
}
.arkki .arkki-kielet {
  margin-top: 0.15rem;
  font-size: 8.5pt;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muste-2);
}

.arkki-varoitus {
  margin-top: 2.5mm;
  padding: 1.5mm 2.5mm;
  border: 1pt solid var(--muste);
  font-size: 7.4pt;
  line-height: 1.25;
  color: var(--muste);
}
.arkki-varoitus b { display: block; font-size: 8pt; }
.arkki-varoitus span { display: block; margin-top: 0.8mm; color: var(--muste-2); }

.arkki-ohje {
  margin-top: 2.5mm;
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muste-2);
}

/* A block of the form: a titled band with ruled boxes under it. */
.arkki-lohko { margin-top: 3mm; border: 1pt solid var(--muste); }
.arkki-lohko > h2 {
  padding: 1.2mm 2.5mm;
  background: var(--muste);
  color: var(--paperi-pohja);
  font-size: 8pt;
  font-weight: 700;
  line-height: 1.2;
}
.arkki-lohko > h2 span {
  display: block;
  font-weight: 400;
  font-size: 7pt;
  opacity: 0.82;
}

.arkki-rivi { display: grid; grid-template-columns: repeat(12, 1fr); }
.arkki-rivi + .arkki-rivi { border-top: 1pt solid var(--viivasto); }

.arkki-ruutu {
  grid-column: span 12;
  padding: 1.2mm 2.5mm 0;
  min-height: 10mm;
}
.arkki-ruutu + .arkki-ruutu { border-left: 1pt solid var(--viivasto); }
.arkki-ruutu-3 { grid-column: span 3; }
.arkki-ruutu-4 { grid-column: span 4; }
.arkki-ruutu-6 { grid-column: span 6; }
.arkki-ruutu-8 { grid-column: span 8; }
.arkki-ruutu-9 { grid-column: span 9; }

.arkki-ruutu > .nimike {
  display: block;
  font-size: 6.4pt;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muste);
}
.arkki-ruutu > .nimike span {
  display: block;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 6pt;
  color: var(--muste-2);
}

/* What the guest writes into, and what a filled value prints into. The
   minimum is the writing line: 5.5mm of clear height under a label that sits
   above it rather than beside it, which is what a ruled form gives you. */
.arkki-ruutu > .arvo {
  display: block;
  min-height: 5mm;
  padding-top: 0.7mm;
  font-size: 10.5pt;
  line-height: 1.2;
  color: var(--muste);
  word-break: break-word;
}

.arkki-korkea { min-height: 13mm; }
.arkki-korkea > .arvo { min-height: 9mm; }

/* A signature drawn with a finger on the tablet at the gate, printed into
   the box where a pen would otherwise have gone. */
.arkki-nimikirjoitus {
  display: block;
  height: 13mm;
  width: auto;
  max-width: 100%;
  margin-top: -1mm;
}
.arkki-nimikirjoitus[hidden] { display: none; }

/* The one checkbox, as it appears on paper: a square somebody puts a cross
   in. Drawn rather than an input, because this half of the sheet is filled
   with a pen even when the rest of it was typed. */
.arkki-valinta {
  display: grid;
  grid-template-columns: 4.5mm minmax(0, 1fr);
  gap: 0 2.5mm;
  align-items: start;
  padding: 2mm 2.5mm;
  border: 1pt solid var(--muste);
  margin-top: 3mm;
  font-size: 7.4pt;
  line-height: 1.25;
}
/* A real element rather than a pseudo one, because the filled renditions put
   a cross in it when the guest ticked the box on screen. */
.arkki-ruksi {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5mm;
  height: 4.5mm;
  border: 1pt solid var(--muste);
  font-size: 9pt;
  font-weight: 700;
  line-height: 1;
  color: var(--muste);
}
.arkki-valinta > p span { display: block; margin-top: 0.8mm; color: var(--muste-2); }

.arkki-alaviite {
  margin-top: 2.5mm;
  font-size: 7pt;
  line-height: 1.35;
  color: var(--muste-2);
}

/* Ennakko and piste both carry this same sheet hidden in their markup and
   fill it from the form before printing, so what comes out of the printer is
   the real document rather than a picture of a web page. */
.vain-paperille { display: none; }

/* --- print ---------------------------------------------------------------- */

/* Everything that is screen goes; the sheet becomes the page. Margins are the
   sheet's own padding, so the preview on screen and the paper agree. */

@page { size: A4 portrait; margin: 0; }

@media print {
  html, body {
    background: #ffffff !important;
    color: #14161a !important;
  }

  .ei-paperille,
  .ylin, .murut, .kansi, .jalka, .vaihtaja,
  .taustausva, .taivas-kangas { display: none !important; }

  .arkki-kehys {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    /* The lomake page shrinks the sheet to fit a phone screen. Paper is
       already A4, so the accommodation comes off again here. */
    transform: none !important;
  }
  .arkki-vaaka { height: auto !important; overflow: visible !important; }

  .arkki {
    width: 210mm;
    min-height: 297mm;
    padding: 12mm 11mm;
    font-size: 10pt;
    box-shadow: none;
  }

  .vain-paperille { display: block !important; }

  .arkki-lohko { break-inside: avoid; }
  .arkki-sivunvaihto { break-before: page; }

  /* Ink is expensive on a home printer and a solid black band is the most
     expensive thing on this sheet, so the headings invert to a rule. */
  .arkki-lohko > h2 {
    background: none !important;
    color: #14161a !important;
    border-bottom: 1pt solid #14161a;
  }
  .arkki-lohko > h2 span { opacity: 1; color: #4a5058 !important; }
}