/* Közös felületelemek: fül, lenyíló, legördülő.

   A minta a weblapról (helloenergiaWEB2) jön, a kódja nem: ott beírt hexek és
   vásárlói lépték áll (52 px-es gomb, 16 px-es betű, sötét mód nélkül). Itt
   csak tokenek vannak és a konzol sűrűsége, tehát a sötét mód külön szabály
   nélkül követi a theme.css-t. Az akcentus a navigáció jele (a kijelölt fül
   alja, a választott elem pöttye) - adatterületre nem lép.

   Minden osztály `ui-` előtagú: lapnyi elrendezés nem kaphat általános nevet,
   különben egy másik lap szabálya ráreszel (lásd a `.channel-grid` esetét). */

/* ---------------------------------------------------------------- fülek --- */
/* <div class="ui-fulek" role="tablist"> + <button class="ui-ful" role="tab">.
   A váltást az ui-elemek.js végzi, delegáltan: az újrarajzolt lap is működik,
   újrakötés nélkül. */
.ui-fulek{display:flex;gap:2px;margin:0;padding:0;border-bottom:1px solid var(--hairline);
  overflow-x:auto;scrollbar-width:none}
.ui-fulek::-webkit-scrollbar{display:none}
.ui-ful{position:relative;display:inline-flex;align-items:center;gap:7px;flex:none;margin:0;
  padding:11px 12px 12px;border:0;border-radius:0;background:none;box-shadow:none;
  color:var(--ink-3);font:600 13px/1 Inter,system-ui,sans-serif;white-space:nowrap;cursor:pointer;
  transition:color .15s}
.ui-ful::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;
  border-radius:2px 2px 0 0;background:transparent;transition:background .15s}
.ui-ful:hover,.ui-ful[aria-selected="true"]{color:var(--ink)}
.ui-ful[aria-selected="true"]::after{background:var(--accent)}
.ui-ful:focus-visible{outline:2px solid var(--accent-ring);outline-offset:-3px;border-radius:7px}
.ui-ful-db,.ui-lenyilo-db{display:inline-block;min-width:18px;padding:2px 6px;border-radius:999px;
  background:var(--surface-3);color:var(--ink-2);font:700 11px/1.2 Inter,system-ui,sans-serif;
  text-align:center;font-variant-numeric:tabular-nums}
.ui-ful[aria-selected="true"] .ui-ful-db{background:var(--accent-tint);color:var(--accent-ink)}
.ui-ful-panel[hidden],.ui-ful[hidden]{display:none}
/* Egy egész lap fülsora (a lap eszköztára alatt): levegő fent és lent. */
.ui-fulek-lap{margin:6px 0 4px}

/* -------------------------------------------------------------- lenyíló --- */
/* <details class="ui-lenyilo"><summary>…</summary>…</details>. Natív elem:
   JavaScript nélkül is nyílik, a billentyűzet és a képernyőolvasó ismeri. */
.ui-lenyilo{border-top:1px solid var(--hairline-2)}
.ui-lenyilo>summary{display:flex;align-items:center;gap:9px;min-height:40px;list-style:none;cursor:pointer;
  font:600 12.5px Inter,system-ui,sans-serif;color:var(--ink-2)}
.ui-lenyilo>summary::-webkit-details-marker{display:none}
.ui-lenyilo>summary::after{content:"";flex:none;width:7px;height:7px;margin:0 4px 0 auto;
  border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:translateY(-2px) rotate(45deg);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.ui-lenyilo[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.ui-lenyilo>summary:hover{color:var(--ink)}
.ui-lenyilo>summary:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px;border-radius:6px}
/* A nyitás magassága animál, ahol a böngésző tudja; máshol azonnal nyílik. */
@supports (interpolate-size:allow-keywords){
  .ui-lenyilo{interpolate-size:allow-keywords}
  .ui-lenyilo::details-content{height:0;overflow:clip;
    transition:height .32s cubic-bezier(.22,1,.36,1),content-visibility .32s allow-discrete}
  .ui-lenyilo[open]::details-content{height:auto}
}

/* ----------------------------------------------------------- legördülő --- */
/* A valódi <select> alatta marad, láthatatlanul: az űrlap, a mentés és a
   `change` esemény változatlan. A lista egy opció alá magyarázatot is tud írni
   (`<option data-leiras>`) - a natív választó erre képtelen, pedig a
   választáshoz épp a különbség kell, nem csak a név. */
.ui-legordulo{position:relative;display:block;max-width:100%}
.ui-legordulo>select{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
/* A gomb a szomszéd mezők mását viseli (app.css: `input,select`): örökölt
   betű, 10 px belső margó. Ahol egy lap a választóját szűkebbre veszi, ott a
   gombot is ugyanúgy kell (lásd `.dlb-limit-grid`). */
.ui-legordulo-gomb{position:relative;display:flex;align-items:center;width:100%;margin:0;
  padding:10px 30px 10px 10px;border:1px solid var(--hairline);border-radius:6px;background:var(--surface);
  box-shadow:none;color:var(--ink);font:inherit;line-height:normal;text-align:left;cursor:pointer;
  transition:border-color .15s,box-shadow .15s}
.ui-legordulo-gomb>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-legordulo-gomb::after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;margin-top:-5px;
  border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg);
  transition:transform .25s cubic-bezier(.22,1,.36,1),margin .25s}
.ui-legordulo-gomb:hover,.ui-legordulo.is-open .ui-legordulo-gomb{border-color:var(--ink-3)}
.ui-legordulo.is-open .ui-legordulo-gomb::after{transform:rotate(-135deg);margin-top:-1px}
.ui-legordulo-gomb:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
/* Fix pozíció: a kártyák `overflow:hidden`-je levágná a lista alját. A helyét
   nyitáskor a gombhoz számoljuk (ui-elemek.js), görgetésre bezárul. */
.ui-legordulo-lista{position:fixed;z-index:60;margin:0;padding:5px;list-style:none;
  max-height:min(340px,60vh);overflow-y:auto;border:1px solid var(--hairline);border-radius:11px;
  background:var(--surface);box-shadow:var(--pop-shadow);outline:none}
.ui-legordulo-lista[hidden]{display:none}
.ui-legordulo-lista [role="option"]{position:relative;display:grid;gap:3px;padding:8px 12px 8px 25px;border-radius:7px;
  color:var(--ink-2);font:500 12.5px/1.35 Inter,system-ui,sans-serif;cursor:pointer}
.ui-legordulo-lista [role="option"]::before{content:"";position:absolute;left:11px;top:14px;width:5px;height:5px;
  border-radius:50%;background:var(--ink);opacity:0;transform:scale(.4);transition:opacity .15s,transform .25s}
.ui-legordulo-lista [role="option"][hidden]{display:none}
.ui-legordulo-lista [role="option"][aria-disabled="true"]{opacity:.45;cursor:default}
.ui-legordulo-lista [role="option"].is-on{background:var(--surface-3);color:var(--ink)}
.ui-legordulo-lista [role="option"].is-on::before{opacity:.5;transform:none}
.ui-legordulo-lista [role="option"][aria-selected="true"]{color:var(--ink);font-weight:650}
.ui-legordulo-lista [role="option"][aria-selected="true"]::before{opacity:1;transform:none;background:var(--accent)}
.ui-legordulo-lista small{font-weight:400;font-size:11.5px;line-height:1.45;color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){
  .ui-lenyilo::details-content,.ui-lenyilo>summary::after,.ui-legordulo-gomb::after,
  .ui-legordulo-lista [role="option"]::before,.ui-ful,.ui-ful::after{transition:none}
}