/*
 * shared/ido-kerek.css , a pörgethető érték-kerék megjelenése.
 * A viselkedés és a döntések magyarázata: shared/ido-kerek.js
 */

.ido-kerek {
  /* EGY HELYEN A SOR-MAGASSÁG. A JS a valódi, MÉRT magasságból számol (nagyítás és a
     felhasználó betűméret-beállítása is módosíthatja), de a rajzolás innen indul, és a felső
     meg alsó üres helynek pontosan ennyinek kell lennie. */
  --kerek-sor: 42px;
  /* ÖT SOR LÁTSZIK: a kiválasztott, fölötte és alatta kettő-kettő (PO-kérés, 2026-09-09: „ilyen
     nézetűre, mint amit küldtem a képen"). Háromnál a kerék még inkább tűnt gombnak, mint
     tárcsának; öt sornál a halványodó szélek elmondják, hogy ez egy hosszú lista, amiben
     pörgetni lehet. Hétnél a panel már két kerékkel (kezdés és vége) nem férne a telefonra. */
  --kerek-sorok: 5;

  position: relative;
  width: 84px;
  height: calc(var(--kerek-sor) * var(--kerek-sorok));
  border-radius: 12px;
}

/*
 * KÉT KERÉK EGY SÁVBAN. A pár a teljes rendelkezésre álló szélességet elfoglalja, és a két kerék
 * elfelezi , ettől lesz a FOGHATÓ terület a szélig érő, miközben a szám középen marad.
 * A `flex: 1` a lényeg: a kerék saját 84 képpontos szélessége csak akkor érvényes, ha egyedül áll.
 */
.ido-kerek-par {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.ido-kerek-par > .ido-kerek {
  flex: 1;
  width: auto;
}

/* A PÁRBAN A KÖZÖS SÁV JELÖL, tehát a kerekek sajátját elrejtjük , különben két doboz látszana
   egy sor helyett, közöttük a kettőspont egy résben. */
.ido-kerek-par > .ido-kerek > .ido-kerek-sav {
  display: none;
}

.ido-kerek-par-sav {
  position: absolute;
  top: calc(var(--kerek-sor, 42px) * 2);
  right: 0;
  left: 0;
  height: var(--kerek-sor, 42px);
  border-radius: 12px;
  background: var(--bg-subtle, rgba(0, 0, 0, 0.05));
  pointer-events: none;
}

/* A SZÁMOK EGYMÁS MELLÉ HÚZÓDNAK, a fogható terület viszont marad a teljes fél. A bal kerék
   száma jobbra igazodik, a jobbé balra, tehát a kettő a kettőspont két oldalán áll , pont úgy,
   ahogy a telefon saját óra-beállítójában. Ezt csak a SZÁM helye jelenti: a görgető doboz
   továbbra is a fél teljes szélessége, tehát a képernyő szélén is meg lehet fogni. */
.ido-kerek--bal .ido-kerek-elem {
  justify-content: flex-end;
  padding-right: 10px;
}
.ido-kerek--jobb .ido-kerek-elem {
  justify-content: flex-start;
  padding-left: 10px;
}

.ido-kerek-par-ket {
  padding-bottom: 3px;
  color: var(--text-strong);
  font-size: 26px;
  font-weight: 700;
  /* A KETTŐSPONT NEM FOG UTAT: aki rá húz, az is a kereket mozgatja, nem egy holt pontot talál. */
  pointer-events: none;
}

.ido-kerek:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* A KIEMELŐ SÁV. Nem keret, hanem halk kitöltés: a keret egy „mezőt" ígérne, amibe írni lehet,
   ez viszont egy választott érték helye. A ház sarok-sugarát követi. */
.ido-kerek-sav {
  position: absolute;
  top: calc(var(--kerek-sor) * 2);
  right: 0;
  left: 0;
  height: var(--kerek-sor);
  border-radius: 10px;
  background: var(--bg-subtle, rgba(0, 0, 0, 0.05));
  pointer-events: none;
}

.ido-kerek-lista {
  position: relative;
  height: 100%;
  overflow-y: auto;

  /* EZ A KOMPONENS LELKE. A böngésző maga áll meg pontosan egy soron, a lendület, a lassulás és
     a gumizás az övé , tehát az érzés natív, és minden rendszeren az, amit a felhasználó keze
     megszokott. A `mandatory` azt mondja, hogy KÖTELEZŐ egy soron megállni: két érték között
     nem maradhat félúton. */
  scroll-snap-type: y mandatory;

  /* A GÖRGETÉS NE SZIVÁROGJON A LAPRA. Enélkül a kerék végére érve a mozdulat a mögötte lévő
     lapot kezdené görgetni, és a felhasználó elveszítené a panelt maga alól. */
  overscroll-behavior: contain;

  /* A GÖRGETŐSÁV ELREJTVE. Itt nem információ: három sor van, és a kiemelő sáv úgyis megmondja,
     hol állunk , a csík csak elvenné a szám helyét ezen a keskeny elemen. */
  scrollbar-width: none;

  /* A SZÉLEK HALVÁNYODNAK. Ettől lesz „kerék" a listából: a felső és alsó sor félig eltűnik,
     ahogy egy fizikai tárcsa is elfordul. Pusztán díszítés, a működést nem érinti. */
  /* A SZÉLEK HALVÁNYODNAK, öt sornál erősebben: a két szélső sor szinte teljesen elfogy, a
     belső kettő félig , így lesz belőle forgó tárcsa, nem hasáb. */
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.35) 14%,
    #000 40%,
    #000 60%,
    rgba(0, 0, 0, 0.35) 86%,
    transparent 100%
  );
}

.ido-kerek-lista::-webkit-scrollbar {
  display: none;
}

/* A LISTA ELEJÉN ÉS VÉGÉN ÜRES HELY, hogy az első és az utolsó érték is KÖZÉPRE tudjon állni. */
/* A LISTA ELEJÉN ÉS VÉGÉN annyi üres hely, hogy az első és az utolsó érték is KÖZÉPRE tudjon
   állni , öt sornál ez két sornyi, nem egy. */
.ido-kerek-ures {
  height: calc(var(--kerek-sor) * 2);
}

.ido-kerek-elem {
  display: flex;
  width: 100%;
  height: var(--kerek-sor);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-tertiary);
  font-family: var(--font-family);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  cursor: pointer;
  scroll-snap-align: center;
  /* `normal`, ÉS NEM `always` (mérve, 2026-09-09). Az `always` azt jelenti, hogy a görgetés
     KÖTELEZŐEN megáll MINDEN megállító pontnál , vagyis egyetlen mozdulattal legfeljebb EGY
     értéket lehet lépni, bármekkora is a lendület. Pont ezt vette észre a PO: „nem olyan sokat
     tudok görgetni egy húzásra". Mérve, ugyanazzal a 600 képpontos lökéssel: `always` mellett
     1 érték, `normal` mellett 14. A megállás pontossága nem vész el: a görgetés a VÉGÉN
     ugyanúgy egy értékre áll rá, csak közben átfuthat a többin. */
  scroll-snap-stop: normal;
  transition:
    color 0.15s ease,
    font-size 0.15s ease;
}

/* A KIVÁLASZTOTT ÉRTÉK NAGYOBB ÉS SÖTÉTEBB. Három rétegben jelöljük: a HELYE (középen), a
   MÉRETE, és a színe , a szín tehát itt sem áll egyedül. */
.ido-kerek-elem.is-valasztott {
  color: var(--text-strong);
  font-size: 26px;
  font-weight: 700;
}

/* MOZGÁS-ÉRZÉKENYSÉG. Aki kikapcsolta a mozgást, annál a méret-váltás se ugráljon. A görgetés
   maga marad, mert az a felhasználó saját mozdulata, nem a felület animációja. */
@media (prefers-reduced-motion: reduce) {
  .ido-kerek-elem {
    transition: none;
  }
}

/* HÚZÁS KÖZBEN a kurzor mondja meg, hogy ez megfogható , és a szöveg-kijelölés kikapcsol,
   különben az egér a számokat jelölné ki a görgetés helyett. */
.ido-kerek-lista {
  cursor: grab;
}
.ido-kerek.is-huzas .ido-kerek-lista {
  cursor: grabbing;
  user-select: none;
}
.ido-kerek.is-huzas .ido-kerek-elem {
  transition: none;
}