/* Laboratorium, narzędzie 5: kalkulator walut. Panel w szkle: kwota, dwie waluty, wynik. Pod nim popularne pary,
   wykres kursu i tabela wszystkich kursów. Wartości z tokenów system.css; tu tylko układ. */

.wal { display: grid; gap: var(--o-5); max-width: 62rem; }
.wal-panel { --tafla-szer: none; display: grid; gap: var(--o-5); }
.wal-kwota { max-width: 22rem; }
.wal-kwota .nz-wejscie { font-variant-numeric: tabular-nums; }

.wal-pary { display: grid; gap: var(--o-3); align-items: end; }
@media (min-width: 700px) { .wal-pary { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
.wal-obal { position: relative; }
.wal-wybor { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; text-overflow: ellipsis; }
.wal-wybor option { background: var(--noc-2); color: var(--tekst); }
.wal-obal .ikona { position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; translate: 0 -50%; color: var(--tekst-2); pointer-events: none; }
.wal-zamien { justify-self: center; min-width: 46px; min-height: 46px; padding: 0; }
.wal-zamien .ikona { width: 20px; height: 20px; rotate: 90deg; transition: rotate .35s var(--e-lagodna); }
@media (min-width: 700px) { .wal-zamien .ikona { rotate: 0deg; } }

.wal-wynik-blok { display: grid; gap: var(--o-1); }
.wal-wynik {
  display: block;
  font-size: var(--r-5);
  font-weight: var(--w-rzezba);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  color: var(--tekst);
}
.wal-kurs { margin: 0; font-size: var(--r-0-5); color: var(--tafla-tekst-2, var(--tekst-2)); }
.wal-kurs:empty { display: none; }
.wal-zrodlo { margin: 0; font-size: var(--r-0); color: var(--tafla-tekst-2, var(--tekst-2)); }
.wal-zrodlo:empty { display: none; }

.wal-popularne { display: flex; flex-wrap: wrap; gap: var(--o-2); }
.wal-chip { min-height: 40px; padding-inline: var(--o-4); font-size: var(--r-0-5); }
.wal-chip[aria-pressed="true"] { --szklo-podklad: rgb(var(--sz-t, 40 38 70) / .42); }

.wal-wykres { --tafla-szer: none; display: grid; gap: var(--o-4); margin: 0; }
.wal-wykres-glowa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--o-3) var(--o-5); }
.wal-wykres-tytul { font-size: var(--r-3); font-weight: var(--w-srodek); }
.wal-plotno { min-height: 12rem; }
.wal-plotno svg { display: block; width: 100%; height: auto; touch-action: pan-y; overflow: visible; }
.wal-plotno [hidden] { display: none; }   /* atrybut hidden nie działa na elementach SVG bez tej reguły */
.wal-os { stroke: var(--linia); stroke-width: 1; }
.wal-linia { fill: none; stroke: var(--akcent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wal-pole { fill: url(#wal-pole); }
.wal-pole-start { stop-color: var(--akcent); stop-opacity: .28; }
.wal-pole-koniec { stop-color: var(--akcent); stop-opacity: 0; }
.wal-opis-osi { fill: var(--tekst-3); font-family: var(--kroj-mono); font-size: 11px; }
.wal-punkt { fill: var(--tekst); stroke: var(--akcent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.wal-celownik { stroke: var(--tekst-3); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.wal-podpowiedz { fill: var(--tekst); font-family: var(--kroj-mono); font-size: 12px; paint-order: stroke; stroke: var(--noc); stroke-width: 4px; stroke-linejoin: round; }
.wal-wykres-opis { margin: 0; font-size: var(--r-0); color: var(--tafla-tekst-2, var(--tekst-2)); min-height: 1.4em; }

.wal-tabela { --tafla-szer: none; padding-block: var(--o-3); }
.wal-tabela summary { cursor: pointer; padding-block: var(--o-2); font-size: var(--r-0-5); color: var(--tekst); }
.wal-tabela table { width: 100%; margin-top: var(--o-3); border-collapse: collapse; font-size: var(--r-0-5); }
.wal-tabela caption { padding: 0 0 var(--o-3); text-align: left; font-size: var(--r-0); color: var(--tafla-tekst-2, var(--tekst-2)); }
.wal-tabela th, .wal-tabela td { padding: var(--o-2) var(--o-3) var(--o-2) 0; border-top: 1px solid var(--linia); text-align: left; font-weight: var(--w-tekst); }
.wal-tabela thead th { border-top: 0; font-size: var(--r-0); color: var(--tafla-tekst-2, var(--tekst-2)); }
.wal-tabela tbody th { font-family: var(--kroj-mono); font-size: var(--r-0); }
.wal-tabela td:last-child, .wal-tabela th:last-child { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }