/* Revontulet-demosivu — docs/specs/revontulet.md, ulkoasu ui-design.md 3A */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sivua katsotaan pimeällä (RT-18): tausta on musta koko sivulla, ei
   vain karttatilassa. Tokenien --color-bg on jo musta; tämä varmistaa
   sen myös silloin kun sivu on lyhyempi kuin ruutu. */
body.revontulet { background: var(--color-bg); }

.aurora {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
}

/* Kartta ja profiili rinnakkain leveällä näytöllä, allekkain kapealla.
   Profiili on kartan selitys, joten se seuraa karttaa eikä jää sivun
   loppuun. */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-3);
  position: relative;
}

@media (max-width: 720px) {
  .stage { grid-template-columns: minmax(0, 1fr); }
}

/* Myrskyn kulku (RT-74) profiilin alla oikeassa sarakkeessa, jossa tila
   oli tyhjä: kartan sarake kattaa molemmat rivit, ja ylimääräinen korkeus
   menee toiselle riville, jottei kulku irtoa profiilista. */
@media (min-width: 721px) {
  .stage { grid-template-rows: auto 1fr; }
  .map-column { grid-row: 1 / span 2; }
  .course { grid-column: 2; align-self: start; }
}

/* Kartta ja sen selitteet samassa sarakkeessa: legenda on heti kartan
   alla (RT-21). Ankkuri myös kartan päällä kelluville tiedoille. */
.map-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  min-width: 0;
}

/* Kartta on staattinen ja rajaus kiinteä (RT-17), joten asemien väli
   riippuu vain kartan korkeudesta. Alaraja pitää nimet erillään
   pienimmälläkin puhelimella (RT-19); kartta ei nappaa vieritystä, joten
   korkeus ei haittaa sivun selaamista. */
.aurora .map {
  height: min(72svh, 700px);
  min-height: 460px;
  border: 1px solid var(--color-hairline);
  border-radius: 4px;
  background: var(--color-bg);
}

/* Datan aika (RT-23) kelluu kartan päällä vasemmassa yläkulmassa ja
   varoitukset (RT-37) oikeassa. Kartan vuorovaikutus kulkee tyhjän
   kohdan läpi; vain ikoni ottaa napautukset. */
.map-overlay {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  pointer-events: none;
  z-index: 1;
}

.map-overlay-right {
  left: auto;
  right: var(--space-2);
  align-items: flex-end;
}

.clocks {
  display: flex;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: rgb(0 0 0 / 0.65);
  padding: 2px var(--space-2);
  border-radius: 3px;
  pointer-events: none;
}

.clock-data { color: var(--color-text-muted); }
.clock-data.is-stale { color: var(--color-alert); }
.clock-source { color: var(--color-alert); }

/* Profiili (RT-26) on taulukko: ruudunlukija saa nimet, leveydet ja
   lukemat, ja palkit piirtyvät samoihin soluihin (RT-30). */
.profile-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  /* Solun vaakareunus yhtenä lukuna: leveys sijoitetaan kosketus-
     kohteen sisään samalle etäisyydelle reunasta (ks. alempana). */
  --profile-pad-x: var(--space-1);
}

.profile-table caption {
  text-align: left;
  color: var(--color-text-muted);
  padding-bottom: var(--space-1);
}

.profile-table th,
.profile-table td {
  text-align: left;
  padding: 3px var(--profile-pad-x);
  border-bottom: 1px solid var(--color-hairline);
  white-space: nowrap;
}

/* Kaikkien sarakkeiden ensimmäinen tekstirivi samalle linjalle: kahden
   tunnin väli ei kellu rivin keskellä, vaan on asemanimen ja lukeman
   tasalla. */
.profile-table tbody th,
.profile-table tbody td { vertical-align: top; }

.profile-table thead th {
  color: var(--color-text-muted);
  font-weight: 400;
  /* "Häiriö 2 h" saa rivittyä, jottei sarake leveytä taulukkoa
     yli puhelimen ruudun (RT-48, RT-66). */
  white-space: normal;
  vertical-align: bottom;
}

.profile-table tbody th { font-weight: 400; }

/* Leveys asemanimen ja taso lukeman alla omalla rivillään: kaksi
   saraketta vähemmän (RT-67). */
.profile-sub {
  position: relative;
  display: block;
  color: var(--color-text-muted);
}

/* Palkki ja lukema samassa solussa: palkki on tausta, luku sen päällä. */
.profile-bar-cell {
  position: relative;
  width: 45%;
  min-width: 0;
}

.profile-bar {
  position: absolute;
  inset: 3px auto 3px 0;
  border-radius: 2px;
  opacity: 0.55;
}

.profile-value {
  position: relative;
  font-family: var(--font-mono);
}

/* Heikkojen kynnys (RT-27): palkki on suhteessa aseman omaan kynnykseen,
   joten viiva on kaikilla riveillä samassa kohdassa. */
.profile-threshold {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-left: 1px dashed var(--color-text-muted);
  opacity: 0.6;
}

.profile-bar-cell.is-unknown { color: var(--color-text-muted); font-style: italic; }

/* Kahden tunnin pienin–suurin (RT-66). Väli saa rivittyä viivan
   jälkeen: rivit ovat kosketuskohteiden takia jo kahden tekstirivin
   korkuisia, ja sarake ei saa leventää taulukkoa yli puhelimen
   ruudun (RT-48). */
.profile-table td.profile-range { font-family: var(--font-mono); white-space: normal; }
.profile-range-max { white-space: nowrap; }
.profile-range.is-unknown { color: var(--color-text-muted); font-style: italic; font-family: inherit; }

/* Eteläraja korostuu rivinä, ei värinä: väri on varattu häiriötasolle
   (RT-20). */
.profile-table tr.is-boundary td,
.profile-table tr.is-boundary th {
  border-bottom: 1px solid var(--color-accent);
}

.profile-note {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Varoitukset kartan päällä (RT-37). Ei uhkaa = ei ikonia, joten tyhjä
   alue ei peitä karttaa. */
.threats {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.threats:empty { display: none; }

/* Ikonilla ei ole kehystä; väri on myrskyn luokka NOAA:n asteikolla
   (RT-58) ja asetetaan skriptistä noaa-scale.js:n arvoista. Tausta on
   sama puoliläpinäkyvä musta kuin datan ajalla, jotta keltainen erottuu
   myös vaalealla karttapinnalla. */
.threat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: rgb(0 0 0 / 0.65);
  border: none;
  border-radius: 3px;
  color: var(--color-text);
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 2px var(--space-2) 2px 2px;
  pointer-events: auto;
}

.threat-glyph {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  color: var(--color-text-muted);
}

.threat-glyph svg { width: 100%; height: 100%; }

/* "G2 · 35 min": erotin on esitystä, ei osa luokan tekstiä. */
.threat-scale + .threat-time::before { content: "· "; }

.threat-stale {
  margin: 0;
  background: rgb(0 0 0 / 0.65);
  padding: 2px var(--space-2);
  border-radius: 3px;
  color: var(--color-alert);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Näkyvyyskortti (RT-31) */
.visibility {
  border: 1px solid var(--color-hairline);
  border-radius: 4px;
  padding: var(--space-3);
}

.visibility h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  font-weight: 400;
}

.verdict {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  color: var(--color-text-strong);
}

.conditions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.conditions > li {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-2);
}

@media (max-width: 480px) {
  .conditions > li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

.condition-label { color: var(--color-text-muted); }
.conditions li.is-blocked .condition-value { color: var(--color-text-muted); }

/* Pilviennusteen tuntinauha (RT-72). Ruutu on taivas: selkeä pimeä
   tunti on täysin musta ja tähtien täyttämä, ja pilvisyyden kasvaessa
   tähdet vähenevät (visibility.js) ja ruutu harmaantuu, kunnes 8/8 on
   tasainen vaalea pilvikatto ilman tähtiä. Ei amberia eikä magentaa:
   ne ovat revontulien tasojen värit (RT-20). Teksti on vaalea tummilla
   ruuduilla (0–5) ja musta vaaleilla (6–8), kontrasti ≥ 4,5:1. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Työpöydällä yhteenveto on nauhan vieressä, jossa tila oli tyhjä;
   kapeassa kortissa se rivittyy nauhan alle. */
.forecast {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-1) var(--space-3);
}

.forecast-strip { flex: 0 1 26rem; min-width: 0; display: grid; gap: 2px; }

.forecast-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
}

.forecast-tile {
  --tile-bg: #000;
  --tile-fg: var(--color-text);
  --cover: none;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: var(--space-2) 2px;
  border-radius: 4px;
  /* Pilvikerros tähtien päällä, pohjaväri alimpana. Reunaviiva erottaa
     mustan ruudun mustasta sivusta. */
  background-color: var(--tile-bg);
  background-image: var(--cover), var(--stars, none);
  box-shadow: inset 0 0 0 1px #333;
  color: var(--tile-fg);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  line-height: 1.2;
}

.forecast-sky { display: grid; justify-items: center; gap: 2px; }

.forecast-tile svg { width: 28px; height: 28px; }

.forecast-tile[data-oktas="1"] { --tile-bg: #16181a; }
.forecast-tile[data-oktas="2"] { --tile-bg: #25282b; }
.forecast-tile[data-oktas="3"] { --tile-bg: #36393d; }
.forecast-tile[data-oktas="4"] { --tile-bg: #484b50; }
.forecast-tile[data-oktas="5"] { --tile-bg: #5b5f64; }
.forecast-tile[data-oktas="6"] { --tile-bg: #777b80; --tile-fg: #000; }
.forecast-tile[data-oktas="7"] { --tile-bg: #8a8e93; --tile-fg: #000; }
.forecast-tile[data-oktas="8"] { --tile-bg: #a0a4a9; --tile-fg: #000; }

/* Valoisa tunti ei ole ehdolla, joten se on tyhjä kehys eikä kanna
   pilvisyyden väriä (oktat näkyvät silti). */
.forecast-tile.is-valoisa {
  --tile-bg: transparent;
  --tile-fg: var(--color-text-muted);
  --cover: none;
  box-shadow: inset 0 0 0 1px var(--color-hairline);
  outline: 1px dashed #444;
  outline-offset: -1px;
}

.forecast-brackets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
}

.forecast-brackets span {
  grid-row: 1;
  height: var(--space-2);
  border: 1px solid var(--color-text);
  border-top: none;
  border-radius: 0 0 3px 3px;
}

.forecast-summary { flex: 1 1 12rem; margin: 0; }

/* Kapealla näytöllä ruudussa on kaksi riviä (tunti; ikoni ja oktat), ja
   väljyys on karsittu: nauha on noin puolet matalampi. */
@media (max-width: 480px) {
  .forecast-tile { padding: var(--space-1) 2px; }
  .forecast-sky { display: flex; align-items: center; gap: 2px; }
  .forecast-tile svg { width: 18px; height: 18px; flex: none; }
  .forecast-brackets span { height: var(--space-1); }
}

.locate {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--color-hairline);
  border-radius: 3px;
  color: var(--color-text);
  font: inherit;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

.locate:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Varoituskortti legendan alla (RT-39). Otsikon väri on luokan väri
   (RT-58) ja asetetaan skriptistä. */
.storm {
  border: 1px solid var(--color-hairline);
  border-radius: 4px;
  padding: var(--space-3);
}

.storm[hidden] { display: none; }

.storm h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
}

.storm .detail-rows { margin: 0; }

/* Myrskyn kulku (RT-74). Työpöydällä oma kuvaaja, kapealla näytöllä
   Kp-nauha varoituskortin Alkoi-rivin tyhjässä tilassa. Kp:n värit ovat
   NOAA:n luokan värit (RT-58) ja asetetaan skriptistä; muu kuvaaja on
   neutraali, paitsi eteläraja Heikkoja-portaan värillä (RT-20). */
.course {
  border: 1px solid var(--color-hairline);
  border-radius: 4px;
  padding: var(--space-3);
}

.course[hidden] { display: none; }

.course h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
}

.course-chart { display: block; width: 100%; height: auto; }

.course-label { fill: var(--color-text-muted); font-size: 13px; }
.course-tick { fill: var(--color-text-muted); font-size: 12px; font-family: var(--font-mono); }
.course-tick.is-now { fill: var(--color-text); }
.course-grid { stroke: var(--color-hairline); stroke-width: 1; }
.course-grid.is-limit { stroke: var(--color-text-muted); stroke-dasharray: 3 3; }
.course-base { stroke: #3a3a3a; stroke-width: 1; }
.course-ey { fill: var(--color-text); opacity: 0.75; }
.course-chart .is-future,
.course-strip .is-future { opacity: 0.35; }
.course-chart .course-ey.is-future { opacity: 0.25; }
.course-onset { stroke: var(--color-text-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.course-now { stroke: var(--color-text); stroke-width: 1; vector-effect: non-scaling-stroke; }

.course-key {
  margin: var(--space-2) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.course .course-facts { margin: 0; }

.storm dd:has(.course-strip) {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.course-strip {
  display: block;
  flex: 1 1 auto;
  min-width: 4rem;
  max-width: 9rem;
  height: 1.25rem;
}

/* Työpöydällä kulku on oma kuvaajansa, joten nauhaa ei toisteta; kapealla
   näytöllä kuvaaja jää pois ja nauha pitää näkymän tiiviinä. */
@media (min-width: 721px) {
  .course-strip { display: none; }
}

@media (max-width: 720px) {
  .course { display: none; }
}

/* Edelliset varoitukset (RT-59). Vain luokan koodeilla on NOAA-väri, joka
   asetetaan skriptistä; muu rivin teksti on sivun vaaleaa tekstiä.
   Koodin tumma teksti erottuu G0…G4:n taustoista (kontrasti ≥ 5:1);
   G5:n #C80000 vaatii vaalean (6:1). */
.storms {
  border: 1px solid var(--color-hairline);
  border-radius: 4px;
  padding: var(--space-3);
}

.storms h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
}

.storms-empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.storms-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.storms-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: 4px;
  border: 1px solid var(--color-hairline);
  color: var(--color-text);
}

.storms-g {
  padding: 0 var(--space-1);
  border-radius: 4px;
  color: #000;
  font-weight: 600;
}

.storms-g[data-g="5"] { color: #fff; }

.storms-codes {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.storms-time { font-family: var(--font-mono); margin-right: auto; }

/* Asemapaneeli (RT-25) */
.detail {
  position: absolute;
  top: var(--space-5);
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 28rem;
  background: rgb(0 0 0 / 0.94);
  border: 1px solid var(--color-hairline);
  border-radius: 4px;
  padding: var(--space-3);
  z-index: 2;
}

.detail[hidden] { display: none; }

.detail h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
}

.detail-close {
  position: absolute;
  top: var(--space-1);
  right: var(--space-2);
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  cursor: pointer;
  line-height: 1;
}

.detail-rows {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px var(--space-3);
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}

.detail-rows dt { color: var(--color-text-muted); }
.detail-rows dd { margin: 0; font-family: var(--font-mono); }

/* Legenda (RT-21) */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.legend-item { display: inline-flex; align-items: center; gap: var(--space-1); }

.legend-swatch {
  width: 1.25rem;
  height: 0.6rem;
  border-radius: 2px;
  display: inline-block;
}

/* Taivastieto (RT-63, RT-64): kartan alueen aurinko ja magneettinen keskiyö. */
.sky-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.attribution {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.attribution a { color: var(--color-text-muted); }

.help summary {
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.help p,
.help ul {
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  max-width: 62ch;
}

/* Asemien kynnykset ohjeessa (RT-21) */
.help-table {
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.help-table caption { text-align: left; padding-block-end: var(--space-1); }

.help-table th,
.help-table td { padding: 2px var(--space-3) 2px 0; text-align: left; }

.help-table td { font-family: var(--font-mono); }

/* Aseman sarja detaljipaneelissa (RT-25). Kuvaaja on lisä, ei ainoa
   esitys: samat lukemat ovat yllä listassa ja sarjan muoto kerrotaan
   saavutettavassa nimessä. */
.sparkline {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: var(--space-2);
}

/* Kynnysviivat kuten FMI:n kaaviossa (RT-25): tason värit, katkoviiva,
   jottei niitä sekoita sarjaan. */
.sparkline-threshold {
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.sparkline-threshold.is-weak { stroke: #FFB000; }
.sparkline-threshold.is-bright { stroke: #D14FA8; }

.sparkline path {
  fill: none;
  /* Ei amberia: se on heikkojen portaan väri (RT-20). */
  stroke: var(--color-text);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* Aseman nimi profiilissa on painike (RT-25): se avaa saman paneelin
   kuin karttamerkki, mutta on myös näppäimistöllä saavutettavissa. */
.profile-name {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--color-hairline);
  text-underline-offset: 3px;
}

.profile-name:hover,
.profile-name:focus-visible { color: var(--color-accent); }

/* ── Puhelin (RT-65, ui-design.md 4.3) ──────────────────────────────
   Sisältö ei osu ruudun sivureunaan eikä kotipalkin alle (reunus sama kuin
   sivuston yläpalkilla ja muilla sivuilla), ja jokainen
   kosketettava kohde on vähintään 44 × 44 pt. */
main.aurora {
  padding: 0 max(var(--space-4), env(safe-area-inset-right))
           calc(var(--space-5) + env(safe-area-inset-bottom))
           max(var(--space-4), env(safe-area-inset-left));
}

/* Ylälaidassa ei ole reunusta (ui-design.md 4.13 kohta 7): selaimessa
   ruudun yläreuna on selaimen omaa aluetta. Kotivalikosta avattuna
   tilarivi on läpikuultava (black-translucent), joten sisältö alkaa sen
   alta. */
@media (display-mode: standalone) {
  body.revontulet { padding-top: env(safe-area-inset-top); }
}

body.revontulet { -webkit-tap-highlight-color: transparent; }

.locate:active,
.detail-close:active,
.profile-name:active,
.threat:active,
.help summary:active { opacity: 0.55; }

@media (pointer: coarse) {
  /* Taulukko mahtuu puhelimen leveyteen vain kapeammin solureunuksin
     (RT-48, RT-67). */
  .profile-table { --profile-pad-x: 2px; }
  .locate,
  .threat { min-height: 44px; }
  .detail-close { width: 44px; height: 44px; top: 0; right: 0; }
  /* Kosketuskohde on 44 pt (RT-65), ja leveys asettuu sen sisään
     nimen alle: rivin korkeus on kosketuskohde eikä nimen ja leveyden
     summa. */
  .profile-table tbody th { position: relative; }
  .profile-name {
    display: flex;
    align-items: flex-start;
    min-height: 44px;
  }
  .profile-table tbody th > .profile-sub {
    position: absolute;
    left: var(--profile-sub-left, var(--profile-pad-x));
    bottom: 3px;
    pointer-events: none;
  }
  /* Pystypehmuste eikä flex: flex piilottaisi avausnuolen. */
  .help summary { padding-block: 12px; }
}

/* Asemapaneeli on kapealla näytöllä alareunan arkki (RT-25, RT-65):
   se avautuu profiilista, joka on kartan alla, joten sivun yläosaan
   sijoitettu paneeli jäisi ruudun ulkopuolelle. Arkki on peukalon
   ulottuvilla ja kunnioittaa kotipalkin turva-aluetta. */
@media (max-width: 720px) {
  .detail {
    position: fixed;
    top: auto;
    bottom: 0;
    max-width: none;
    max-height: 80svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 12px 12px 0 0;
    border-width: 1px 0 0;
    padding: var(--space-4) max(var(--space-3), env(safe-area-inset-right))
             calc(var(--space-3) + env(safe-area-inset-bottom))
             max(var(--space-3), env(safe-area-inset-left));
    z-index: 10;
    animation: sheet-in var(--dur-base) var(--ease-out);
  }
}

@keyframes sheet-in {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .detail { animation: none; }
}