/* Reissut — vierasreissujen sivukohtaiset tyylit.
 *
 * Käytössä Meiningit-sivulla (7124bd940c.html): "Seuraava reissu" -kortti,
 * otteluohjelman vierasottelurivit ja jaettu ilmoittautumismodaali (säännöt →
 * Google Forms). Erillinen Vieraissa-vierasottelunäkymä on poistettu; vanha
 * reissut.html vain ohjaa Meiningitiin.
 *
 * Sisältää VAIN reissut-spesifit luokat (.piaty-reissu-*) sekä muutaman
 * tarkennetun lisän (.piaty-sched-badge-variantit, org/time). EI määrittele
 * uudelleen jaettuja perustyylejä (.piaty-eh*, .piaty-sched* runko), koska
 * sivulla on ne jo — näin kotinäkymä ei muutu. Auki olevan reissun otsikko
 * on tarkennettu .piaty-reissu-titlewrap-alle, jottei se osu Meiningitin
 * etkot-otsikkoon. */

/* Kalenterin "Ilmoittaudu"-napit (auki olevat reissut) — kompakti, mahtuu
   vierasottelukalenterin riville. Kahdella järjestäjällä kaksi nappia. */
.piaty-sched-ilmo { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.piaty-sched-cta {
  appearance: none; cursor: pointer;
  position: relative;
  font-family: var(--font-tag); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; font-size: 9.5px; line-height: 1;
  padding: 6px 11px; white-space: nowrap;
  color: var(--piaty-black); background: var(--piaty-yellow);
  border: 1px solid var(--piaty-yellow);
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-snap), box-shadow 120ms var(--ease-snap);
}
.piaty-sched-cta:hover { transform: translateY(-1px); box-shadow: 0 2px 0 0 var(--piaty-red); }
.piaty-sched-cta:active { transform: translateY(0); box-shadow: none; }
.piaty-sched-cta:focus-visible { outline: 2px solid var(--piaty-yellow); outline-offset: 2px; }
/* Pieni nappi, täysi kosketusalue: näkymätön 44px-peite (sama kikka
   kuin headerin ⓘ-painikkeessa) — visuaali pysyy kompaktina rivillä. */
.piaty-sched-cta::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: 44px;
}

/* ============== ILMOITTAUTUMIS-POPUP (Google Forms) ==============
   Overlay + levyn perusilme jaetusta sheet-järjestelmästä (site.css);
   tässä vain kehysmitat ja pystyrakenne. */
.piaty-reissu-sheet {
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  height: min(86vh, 900px);
  overflow: hidden;
  /* Reilumpi punainen riso-offset kuin jaettu perus-sheet — iso levy
     kaipaa jämäkämmän "poster"-kehyksen, ettei offset näytä sattuman-
     varaiselta. Mobiilissa kehys nollataan (levy on koko ruudun). */
  box-shadow: var(--shadow-riso-5);
}
.piaty-reissu-head {
  padding: 16px 48px 14px 18px;
  background: var(--piaty-yellow);
  color: var(--piaty-black);
  border-bottom: 2px solid var(--piaty-black);
}
.piaty-reissu-eyebrow {
  display: block;
  font-family: var(--font-tag);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 10.5px;
  margin-bottom: 4px;
}
.piaty-reissu-title {
  margin: 0;
  font-family: var(--font-tag);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
/* Ottelupäivä otsikon perässä — hillitty, tabular-nums. */
.piaty-reissu-title-date { font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.piaty-reissu-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
.piaty-reissu-foot {
  padding: 11px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--piaty-bone);
  border-top: 2px solid var(--piaty-black);
  font-family: var(--font-body);
  font-size: 13px;
  text-align: center;
  color: var(--piaty-black);
}
.piaty-reissu-foot a {
  color: var(--piaty-red);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.piaty-reissu-external {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  margin: 0;
  padding: var(--s-7) var(--s-5) calc(var(--s-7) + env(safe-area-inset-bottom, 0px));
  background: var(--piaty-bone);
  color: var(--piaty-black);
  font-family: var(--font-body);
  text-align: center;
}
.piaty-reissu-external p { margin: 0; max-width: 34ch; }
.piaty-reissu-external .piaty-reissu-form-link {
  color: var(--piaty-black);
  text-decoration: none;
}

/* ============== SÄÄNTÖRUUTU (ilmoittautumisen 1. vaihe) ============== */
/* Vieritettävä sääntöalue head- ja foot-palkkien välissä. Tumma pohja
   yhtenäistää modaalin sivun muuhun (musta/keltainen, marker) kieleen —
   vaalea kerma tuntui irralliselta. Bone-teksti mustalla nostaa myös
   sääntötekstin kontrastia (luettavuus on tärkeintä). */
.piaty-reissu-rules {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--piaty-black);
  color: var(--piaty-bone);
  padding: clamp(20px, 3.5vw, 30px) clamp(18px, 4vw, 34px) clamp(22px, 3vw, 30px);
}

.piaty-reissu-rules:focus-visible {
  outline: 3px solid var(--piaty-yellow, #FFE701);
  outline-offset: 3px;
}
.piaty-reissu-rules-intro {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px;
  padding-bottom: clamp(20px, 3vw, 26px);
  margin-bottom: clamp(18px, 2.5vw, 24px);
}
/* Musta erotinpalkki korvattu sivuston omalla KÄSIN PIIRRETYLLÄ keltaisella
   "tussiviivalla" (sama SVG-kieli kuin masthead→sisältö-reunassa ja
   navigaation alleviivauksessa) → logon alle jää marker-henkinen aksentti. */
.piaty-reissu-rules-intro::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 11px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201180%2012'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0%2C6.0%20L24.1%2C7.8%20L48.2%2C8.0%20L72.2%2C4.8%20L96.3%2C4.6%20L120.4%2C6.0%20L144.5%2C7.7%20L168.6%2C6.4%20L192.7%2C4.2%20L216.7%2C4.9%20L240.8%2C5.8%20L264.9%2C7.2%20L289.0%2C7.9%20L313.1%2C4.9%20L337.1%2C4.7%20L361.2%2C5.0%20L385.3%2C8.2%20L409.4%2C8.0%20L433.5%2C4.9%20L457.6%2C3.4%20L481.6%2C5.4%20L505.7%2C7.3%20L529.8%2C7.8%20L553.9%2C5.8%20L578.0%2C4.5%20L602.0%2C5.6%20L626.1%2C8.6%20L650.2%2C7.8%20L674.3%2C6.0%20L698.4%2C4.4%20L722.4%2C4.9%20L746.5%2C8.0%20L770.6%2C8.4%20L794.7%2C5.6%20L818.8%2C4.5%20L842.9%2C6.0%20L866.9%2C8.4%20L891.0%2C8.5%20L915.1%2C5.6%20L939.2%2C4.5%20L963.3%2C5.4%20L987.3%2C7.0%20L1011.4%2C6.9%20L1035.5%2C5.9%20L1059.6%2C4.0%20L1083.7%2C4.8%20L1107.8%2C7.5%20L1131.8%2C7.3%20L1155.9%2C5.3%20L1180.0%2C6.0%20'%20fill%3D'none'%20stroke%3D'%23FFE701'%20stroke-width%3D'3.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
  background-size: 100% 11px;
  background-repeat: no-repeat;
}
/* Kiinteä korkeus varaa tilan ennen kuvan latausta → "luettu"-mittaus
   pysyy vakaana. Musta logo käännetään valkoiseksi tummalle pohjalle —
   sama käsittely kuin muilla tumman taustan järjestäjälogoilla. */
.piaty-reissu-rules-logo {
  height: clamp(46px, 11vw, 64px); width: auto; object-fit: contain;
  filter: invert(1) grayscale(1) brightness(1.8);
}
.piaty-reissu-rules-sec { margin-top: clamp(18px, 2.6vw, 24px); }
.piaty-reissu-rules-sec:first-of-type { margin-top: 0; }
.piaty-reissu-rules-sectitle {
  margin: 0 0 12px;
  font-family: var(--font-tag);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--piaty-yellow);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(var(--piaty-bone-rgb), .18);
}
.piaty-reissu-rules-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: clamp(11px, 1.6vw, 14px); }
.piaty-reissu-rule {
  position: relative;
  padding-left: 24px;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--piaty-bone);
}
/* Keltainen neliöleima luettelomerkkinä — sivuston stanssi-/tarrakieli
   (ei geneeristä mustaa palloa), hillitty aksentti tummaa pohjaa vasten. */
.piaty-reissu-rule::before {
  content: "";
  position: absolute; left: 0; top: .52em;
  width: 8px; height: 8px;
  background: var(--piaty-yellow);
}
.piaty-reissu-rule.is-sub { padding-left: 42px; color: rgba(var(--piaty-bone-rgb), .72); }
.piaty-reissu-rule.is-sub::before { left: 22px; width: 6px; height: 6px; background: transparent; border: 1.5px solid var(--piaty-yellow); }
.piaty-reissu-rules-outro {
  margin: clamp(20px, 3vw, 28px) 0 0;
  font-family: var(--font-tag);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--piaty-black);
  padding: 13px 16px;
  background: var(--piaty-yellow);
  border: 2px solid var(--piaty-black);
}

/* Foot säännöt-vaiheessa: hyväksy-nappi + vihje pinottuna. Tumma "ledge"
   sääntöalueen alla (jaettu foot on kerma, mutta se jää form-vaiheeseen
   valkoisen lomakkeen alle) → keltainen nappi nousee ensisijaisena.
   Perusilme jaetusta .piaty-btn-luokasta; tässä vain pohja/mitat/disabled. */
.piaty-reissu-rules-foot {
  display: flex; flex-direction: column; align-items: stretch; gap: 9px;
  background: var(--piaty-black);
  border-top: 2px solid var(--piaty-line);
}
.piaty-reissu-accept {
  width: 100%;
  letter-spacing: .1em;
  padding: 15px 20px;
  transition: transform 120ms var(--ease-snap), box-shadow 120ms var(--ease-snap), background 120ms var(--ease-snap), color 120ms var(--ease-snap);
}
/* Lukossa (sääntöjä ei vielä luettu): selvästi passiivinen tummalla
   pohjalla — ei kermaa joka lukisi aktiivisena vaaleana nappina. */
.piaty-reissu-accept:disabled {
  cursor: not-allowed;
  background: var(--piaty-black-soft);
  color: rgba(var(--piaty-bone-rgb), .38);
  border-color: var(--piaty-line);
  box-shadow: none;
}
.piaty-reissu-rules-hint {
  font-family: var(--font-tag);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--piaty-yellow);
  text-align: center;
}

/* ============== MOBILE ============== */
@media (max-width: 720px) {
  .piaty-reissu-overlay { padding: 0; }
  /* 100dvh seuraa iOS:n työkalupalkin korkeutta — 100% jätti raon
     kun Safarin palkki supistui. */
  .piaty-reissu-sheet { width: 100%; height: 100dvh; border: 0; box-shadow: none; }
}

/* Ikärajaleima — kortti näyttää ylläpidetyn arvon (K18 tai S) oikeassa
   yläkulmassaan; puuttuvasta arvosta ei päätellä oletusta. Käytössä sekä kevyellä
   reissukortilla (.piaty-reissu-card) että "Ilmoittaudu"-herolla (.piaty-eh). */
.piaty-eh { position: relative; }
.piaty-reissu-k18 {
  position: absolute;
  /* Pikselintarkka asemointi: sama inset kuin kortin sisällön pehmuste
     (.piaty-mein-two > .piaty-eh = var(--s-4) ylä, var(--s-4_5) sivut), joten
     leima linjautuu tismalleen kortin sisältölaatikon oikeaan yläkulmaan
     eikä valu vh/vw-yksiköiden mukana näyttöleveyden muuttuessa. */
  top: var(--s-4);
  right: var(--s-4_5);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--piaty-red);
  color: var(--piaty-red);
  background: rgba(var(--piaty-red-rgb), .08);
  font-family: var(--font-tag);
  font-weight: 700;
  letter-spacing: .03em;
  font-size: 12.5px;
  line-height: 1;
  transform: rotate(-5deg);
  pointer-events: none;
}
/* Varaa tilaa leimalle, ettei kortin eyebrow-/otsikkorivi mene sen alle. */
.piaty-mein-reissu > .piaty-eh-context,
.piaty-reissu-hero-main > .piaty-eh-context { padding-right: 54px; }

/* ============== MEININGIT — kaksi rinnakkaista korttia (etkot + reissu) ==============
   Designin Meiningit-näkymä: Piädyn Etkot + Seuraava reissu RINNAKKAIN
   ("punk mutta siisti" -posterikortit, punainen riso-varjo). auto-fit →
   kaksi saraketta leveällä, yksi kapealla TAI kun vain toinen kortti on. */
.piaty-mein-two {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
  align-items: stretch;
  padding: clamp(var(--s-2), 2vh, var(--s-4)) var(--space-inline) clamp(var(--s-4), 3vh, var(--s-5_5));
}
/* Korttiverho: tumma posterilevy, terävä musta reuna ja punainen riso-offset
   — sama painojälki kuin muissa korteissa. Yliajaa .piaty-eh--light-ohuen
   yläviivan ja kapean max-widthin, jotta kortti täyttää sarakkeensa. */
.piaty-mein-two > .piaty-eh {
  max-width: none;
  margin: 0;
  padding: var(--s-4) var(--s-4_5) var(--s-4_5);
  border: 2px solid var(--piaty-black);
  background: #141209;
  box-shadow: var(--shadow-riso-3);
}
/* Kapeassa kortissa label PINOTAAN arvon päälle (leveä 2-sarakerivi
   rivittäisi pitkät arvot kuten "Jukurit · Mikkeli" sanoittain). */
.piaty-mein-two .piaty-eh-row {
  grid-template-columns: 1fr;
  gap: var(--s-1);
  padding: var(--s-3) 0;
}
/* CTA (Ilmoittaudu) — peri .piaty-btn, mutta ilman alleviivausta ja omalla
   yläväljällä. Venytetään kortin sisältölaatikon täyteen: napin vasen reuna
   linjautuu kenttäsarakkeen kanssa ja oikea reuna posterin/K18:n kanssa →
   nappi on mitoitettu laatikkoon, ei köykäisen kapea eikä yli reunojen.
   Isolla näytöllä kohtuullinen max-width pitää napin ryhdikkäänä. */
.piaty-mein-reissu-cta {
  margin-top: var(--s-4_5);
  align-self: stretch;
  width: 100%;
  max-width: 420px;
  text-decoration: none;
}

/* "Lisää kalenteriin" — pieni sekundäärinen toiminto CTA:n alla (tai kentän
   alla kun CTA:ta ei ole). Hillitty: savunharmaa teksti + punainen kalenteri-
   ikoni (sama punainen kuin riso-offset/K18) → löydettävä muttei räikeä; hover
   nostaa keltaiseksi napin kieltä mukaillen. Keskitetty CTA:n alle. */
.piaty-mein-reissu-cal {
  position: relative;
  align-self: center;
  margin-top: var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2);
  color: var(--piaty-smoke);
  font-family: var(--font-tag);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-tag);
  font-size: 11px;
  line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 120ms var(--ease-snap);
}
/* Kosketusalue 44px korkeaksi näkyvää kompaktia tekstiä muuttamatta
   (läpinäkyvä laajennin, sama kuvio kuin .piaty-notice-close::before). Jää
   CTA:n väliin (7px < 12px) eikä mene päällekkäin sen kanssa. */
.piaty-mein-reissu-cal::before {
  content: "";
  position: absolute;
  inset: -7px 0;
}
.piaty-mein-reissu-cal-ico { color: var(--piaty-red); flex-shrink: 0; }
.piaty-mein-reissu-cal:hover,
.piaty-mein-reissu-cal:hover .piaty-mein-reissu-cal-ico { color: var(--piaty-yellow); }
.piaty-mein-reissu-cal:focus-visible {
  outline: 3px solid var(--piaty-yellow);
  outline-offset: 2px;
}

/* ============== SEURAAVA REISSU — kentät + pieni A4-posteri ==============
   Kortin runko on kaksisarakkeinen: kentät (KOHDE/LÄHTÖ/HINTA) vasemmalle,
   kompakti A4-pystyposteri (1 / 1.414) oikealle kenttien rinnalle. Posterin
   OIKEA reuna on kortin sisältölaatikon oikeassa reunassa → linjautuu
   pikselilleen K18-leiman ja kortin sisennyksen kanssa. Posterin voi
   napauttaa isoksi (PosterLightbox). Ilman posteria samankokoinen "POSTERI
   TULOSSA" -placeholder → ei layout-hyppyä kun oikea posteri lisätään. */
.piaty-mein-reissu-body {
  display: grid;
  /* Posterisarake AUTO: sen leveys johdetaan posterin korkeudesta (A4-suhde),
     ja posteri venytetään tietosarakkeen korkeuteen (align-items: stretch).
     Näin posterin YLÄ- JA ALAREUNA linjautuvat pikselilleen tietosarakkeen
     ensimmäisen ja viimeisen lohkon kanssa — ja A4-muoto säilyy tarkkana
     (aiemmin kiinteä leveys jätti posterin alareunan ~11 px lyhyeksi). */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-4_5);
  align-items: stretch;
}
/* Vasemman sarakkeen kentät venyvät sarakkeensa täyteen; erotinviivat
   (.piaty-eh-row border-bottom) rajautuvat siististi kenttäsarakkeeseen. */
.piaty-mein-reissu-body > .piaty-eh-list { min-width: 0; }

/* Posteri = grid-sarakkeen levyinen A4-pystylaatikko. Kehys/varjo asuu
   sisällä (.piaty-mein-poster-open / -ph), jotta klikattava tila voi
   nostaa varjon hoverissa napin tapaan. */
.piaty-mein-poster {
  position: relative;
  /* Korkeus = grid-rivin (tietosarakkeen) korkeus (align-items: stretch);
     leveys johdetaan siitä A4-suhteella → alareuna linjaan sarakkeen kanssa,
     muoto pysyy A4:na eikä vääristy. */
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1.414;      /* A4 pysty — ei venytä/vääristä */
  margin: 0;
  container-type: inline-size;   /* placeholderin typografia skaalautuu leveyteen */
}
/* Jaettu kehyskieli klikattavalle posterille JA placeholderille: sama koko,
   terävä musta reuna + punainen riso-offset. Lepovarjo = var(--shadow-riso-2)
   = TÄSMÄLLEEN sama kuin CTA-napilla (.piaty-btn) → offsetin syvyys ja punainen
   ovat johdonmukaiset napin kanssa; molemmilla tiloilla (posteri/placeholder)
   sama varjo, joten reunat ja offset täsmäävät eikä tilanvaihto hypi. */
.piaty-mein-poster-open,
.piaty-mein-poster-ph {
  position: absolute;
  inset: 0;
  border: 2px solid var(--piaty-black);
  background-color: #100E08;
  box-shadow: var(--shadow-riso-2);
  overflow: hidden;
}
/* Klikattava pikkukuva — hover/aktiivi nostaa varjoa TÄSMÄLLEEN kuten
   .piaty-btn (lepo riso-2 → hover riso-3 → active riso-1, sama siirtymä). */
.piaty-mein-poster-open {
  appearance: none;
  display: block;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-snap), box-shadow 120ms var(--ease-snap);
}
.piaty-mein-poster-open:hover  { transform: translate(-2px, -2px); box-shadow: var(--shadow-riso-3); }
.piaty-mein-poster-open:active { transform: translate(1px, 1px);   box-shadow: var(--shadow-riso-1); }
.piaty-mein-poster-open:focus-visible { outline: 3px solid var(--piaty-yellow); outline-offset: 2px; }
.piaty-mein-poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* A4-posteri täyttää A4-kehyksen; ei vääristymää */
  display: block;
}
/* "Suurenna" -vihje: pieni keltainen suurennuslasilaatta oikeaan alanurkkaan
   (sama keltamusta kieli kuin CTA), kertoo että posterin voi avata isoksi. */
.piaty-mein-poster-zoom {
  position: absolute;
  right: var(--s-1);
  bottom: var(--s-1);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--piaty-black);
  background: var(--piaty-yellow);
  border: 1.5px solid var(--piaty-black);
  pointer-events: none;
}
/* Placeholder — huoliteltu tyhjä tila: valokopiorae + inset-keyline (print-
   posterin henki), keskitetty kaksirivinen otsikko (skaalautuu leveyteen). */
.piaty-mein-poster-ph {
  display: grid;
  place-content: center;
  justify-items: center;
  padding: var(--s-3);
  text-align: center;
  background-image:
    repeating-linear-gradient(135deg,
      rgba(var(--piaty-bone-rgb), .03) 0 2px,
      transparent 2px 6px);
}
.piaty-mein-poster-ph::before {
  content: "";
  position: absolute;
  inset: var(--s-2);
  border: 1.5px dashed rgba(var(--piaty-bone-rgb), .16);
  pointer-events: none;
}
.piaty-mein-poster-ph-title {
  position: relative;
  font-family: var(--font-tag);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: .9;
  font-size: clamp(14px, 17cqw, 26px);
  /* Himmeä harmaa — "tulossa"-placeholder pysyy hillittynä eikä kilpaile
     kenttien/CTA:n kanssa (sama subdued-henki kuin Meiningitin himmeydet). */
  color: var(--piaty-smoke);
}

/* ============== REISSUN TÄYTTÖASTE (kvalitatiivinen, portaittainen palkki) ====
   Ilmoittautumisen "meininki" ilman lukua: murresävyinen tilaviesti + terävä
   täyttöpalkki, jonka leveys porrastuu tilaan. EI näytä paikkalukua eikä tyhjää
   (pohja-arvo 22 %); yksikin ilmoittautunut = "väkeä lähdössä". Leveys EI ole
   suoraan verrannollinen kapasiteettiin → ei luettavissa lukumääräksi. Sävyt:
   base=kutsuva, go/warn=keltainen, hot=punainen huuto (palkki yhä keltaa),
   full=punainen loppuunmyyty. Sijaitsee kenttä-/posterirungon ja CTA:n välissä.
   (Meiningit.jsx: FillGauge.) */
.piaty-reissu-fill {
  margin-top: var(--s-4_5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.piaty-reissu-fill-msg {
  font-family: var(--font-tag);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-tag);
  /* Sama koko kuin kortin KOHDE/LÄHTÖ/HINTA-labelit (.piaty-eh-row dt) →
     yhtenäinen tag-typografia. */
  font-size: 10.5px;
  line-height: 1.05;
  color: var(--piaty-yellow);
}
/* Viestin sävyt. base = kutsuva luonnonvalkoinen (ei harmaa/kuollut),
   hot/full = KalPa-punainen. */
.piaty-reissu-fill[data-tone="base"] .piaty-reissu-fill-msg { color: var(--piaty-bone); }
.piaty-reissu-fill[data-tone="hot"]  .piaty-reissu-fill-msg,
.piaty-reissu-fill[data-tone="full"] .piaty-reissu-fill-msg { color: var(--piaty-red); }

/* Segmentoitu mittari: 10 kiinteää ruutua tasavälein, ohut rako (--s-0_5)
   välissä. Terävät kulmat (ei border-radiusia). Ruudut täyttävät radan koko
   leveydeltä → ulkoreunat linjassa viestin/CTA:n kanssa (pixel-perfect). */
.piaty-reissu-bar-track {
  display: grid;
  grid-template-columns: repeat(10, 1fr);   /* = FILL_SEGMENTS (Meiningit.jsx) */
  gap: var(--s-0_5);
}
/* Ruudun SÄVY skaalautuu täyttötilan mukaan (data-tone kortilta): keltainen →
   oranssi → oranssinpunainen → punainen kun reissu lähestyy täyttä. Himmeä =
   sama sävy 50 % peittävyydellä (opacity), kirkas = täysi → selkeä kontrasti,
   ja syttyminen on pehmeä peittävyyden nosto samalla sävyllä. Palkki ei näytä
   tyhjältä edes 0:ssa (himmeät aina näkyvissä). */
.piaty-reissu-bar { --seg: var(--piaty-yellow); }
.piaty-reissu-bar[data-tone="warn"] { --seg: #FF9E1B; }          /* kiire — lämpenee */
.piaty-reissu-bar[data-tone="hot"]  { --seg: #FF4D1F; }          /* loppusuora — oranssinpunainen */
.piaty-reissu-bar[data-tone="full"] { --seg: var(--piaty-red); } /* täynnä — punainen */
.piaty-reissu-seg {
  height: 13px;
  background: var(--seg);
  opacity: .5;
  transition: opacity 380ms var(--ease-snap), background-color 380ms var(--ease-snap);
}
.piaty-reissu-seg.is-on { opacity: 1; }
/* "Hohka" lähellä täyttä: kirkkaat ruudut saavat lämpimän hehkun. */
.piaty-reissu-bar[data-tone="hot"]  .piaty-reissu-seg.is-on,
.piaty-reissu-bar[data-tone="full"] .piaty-reissu-seg.is-on {
  box-shadow: 0 0 6px 0 var(--seg);
}

/* Skeleton kunnes lähtijämäärä latautuu — sama rakenne/korkeus kuin mittari,
   pulssaava placeholder. Reduced-motion (site.css) nollaa pulssin → staattinen. */
.piaty-reissu-skel-msg {
  width: 44%;
  height: 11px;
  background: rgba(var(--piaty-bone-rgb), .18);
}
.piaty-reissu-skeleton .piaty-reissu-skel-msg,
.piaty-reissu-skeleton .piaty-reissu-seg {
  animation: piaty-skel-pulse 1.25s var(--ease-snap) infinite;
}
@keyframes piaty-skel-pulse {
  0%, 100% { opacity: .5; }
  50%      { opacity: .22; }
}

/* "Päivitetty automaattisesti klo xx.xx" — tosi pieni, himmeä lisätieto palkin
   alle. Ei laatikkoa eikä korostusta; jää selvästi tilaviestin, palkin ja napin
   taakse. Ohut kursiivi (sama resepti kuin .piaty-eh-tba-inline) viestii
   fontilla itsellään "järjestelmän elävästi tuottama" -tuntua, joten ei enää
   versaalia/harvennusta — ne lukisivat kenttäotsikkona. Irrotettu palkista
   omaan väljäänsä (flex-gap 8 px + 6 px = ~14 px), jottei se tunnu tarttuvan
   palkkiin. */
.piaty-reissu-updated {
  margin-top: var(--s-1_5);   /* ~14 px palkin alle (irti barista) */
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.2;
  color: var(--piaty-smoke);
  opacity: .7;
}

@media (max-width: 600px) {
  .piaty-mein-two { grid-template-columns: 1fr; }
}