/* ======================================================================
   QWICK -- KOMPONENT: výber tagu (.tag-grid / .tag-pick)

   JEDINÝ ZDROJ. Predtým bol tento komponent rozpísaný na 14 miestach
   v 5 súboroch (02, 08, 10, 11, 12), kde každá ďalšia vrstva prepisovala
   predchádzajúcu cez !important. Skutočný dizajn bol až posledná vrstva;
   prvé tri boli mŕtve a udržiavali sa zbytočne.

   Konkrétne, čo bolo mŕtve pred zlúčením:
     - 02: border/background/padding/border-radius/font  -> prepísané v 08
     - 08: background + border-color                     -> prepísané v 10 a 11
     - 10: background                                    -> prepísané v 11
   Zostalo len to, čo tu je zapísané raz a priamo.

   KOMPONENT MÁ DVA STAVY
   ----------------------
   1. výber (základ)          .tag-grid > .tag-pick
      Kruh s názvom tagu. Používa QWICK MOVES pri zadávaní pohybu.

   2. záznam                  .is-record-view
      Pilulka 148:70. Používa detail aj úprava záznamu --
      v MOVES aj v TRIPS. Rovnaká geometria na pixel.

      .is-readonly            v režime čítania: jediný tag, bez interakcie.

   ROLA, NIE ID
   ------------
   Plocha sa prihlási triedou .qwick-record-tag-picker. Modul nepridáva
   vlastné pravidlá -- tento súbor je jediné miesto, kde tento komponent
   existuje.

   Farbu nesie premenná --qwick-tag-color, ktorú nastavuje JS na prvku.
   ====================================================================== */

/* ---- mriežka ----------------------------------------------------------- */
.qwick-surface .tag-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  align-items:start;
}

/* ---- 1. stav VÝBER ----------------------------------------------------- */
.qwick-surface .tag-pick{
  width:100%;
  aspect-ratio:1 / 1;
  height:auto;
  min-height:0;
  box-sizing:border-box;
  border-radius:50%;
  border:1.5px solid var(--glass-edge);
  /* Rozostrenie tu NIE JE. Krúžok je matná plocha: nepriehľadná výplň
     `--card-glass-fill`, okraj a tieň. Rozostrovať 60 px pozadia pod
     nepriehľadnou výplňou bola práca navyše, ktorú nebolo vidieť, a
     `will-change` na backdrop-filter držal kvôli nej vlastnú vrstvu. */
  background:var(--card-glass-fill);
  color:var(--qwick-tag-color,var(--text));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  /* Bez ikony je celým obsahom názov, takže musí mať priestor na dva
     riadky a nesmie sa orezať na prvom dlhšom slove. */
  padding:7px 6px;
  font-size:11px;
  font-weight:750;
  line-height:1.1;
  text-align:center;
  overflow:hidden;
  word-break:break-word;
  /* `transition` je JEDNA vlastnost, takze tento zoznam je pre dlazdicu
     jediny -- prekryva aj ten z `.press-up` (03-controls.css), ktory ma
     nizsiu specificitu a nacita sa skor. Preto tu MUSI stat aj `transform`:
     bez neho dlazdica nemala prechod na posun pri preskladani poradia ani
     na stlacenie. Krivka je ta ista pruzina, aku pouziva press-feedback.
     Mierka sa pri prepnuti stavu UZ NEMENI -- do `scale()` vstupuje jedine
     stlacenie. */
  transition:transform .24s cubic-bezier(.34,1.56,.64,1),
             filter .15s ease,border-color .2s ease,background .2s ease;
}
/* Obrys patri IBA stavu VYBER (sklenene kolecko). Stav ZAZNAM ho nema --
   nie je to prepis neskorsim pravidlom, ale zuzenie tohto na svoj stav. */
.qwick-surface .tag-grid:not(.is-record-view) .tag-pick.selected{
  filter:brightness(1.08);
  outline:1px solid color-mix(in srgb,var(--qwick-tag-color,var(--accent)) 72%,white 28%);
  outline-offset:2px;
}

/* ---- 2. stav ZÁZNAM ---------------------------------------------------- */
/* Vybraný tag má obrys, ktorý nesmie byť orezaný rodičom. */
.qwick-surface .qwick-record-tag-field,
.qwick-surface .qwick-record-tag-picker.is-record-view{
  overflow:visible;
}
.qwick-surface .qwick-record-tag-picker.is-record-view .tag-pick{
  width:72px;
  max-width:72px;
  height:34.054054054px;
  min-height:34.054054054px;
  aspect-ratio:148 / 70;
  padding:0 9.243243243px;
  border-radius:999px;
  justify-self:start;
  flex-direction:row;
  gap:0;
  font-size:10px;
  line-height:1.1;
  /* Farbu, okraj a vypln nesie zdielana .qwick-tag-pill: v tomto stave je
     dlazdica TAG, nie sklenene kolecko. Recept tu uz nie je vypisany druhy
     raz -- pridava ho JS triedou pri prepnuti do stavu ZAZNAM.
     Prípadný zdvih je vlastnosť stavu, nie spoločného materiálu. */
  /* Tento stav nemá rozostrenie. Mení sa iba poloha pri preskladaní poradia,
     preto potrebuje len `will-change:transform`. */
  will-change:transform;
  /* Hĺbku čierneho skla tento stav NEPÍŠE. Je jedinou výnimkou z nej, ale
     výnimka z receptu patrí k receptu -- vlastní ju
     `styles/21-control-material.css`, inak by tú istú súkromnú premennú
     komponentu definovali dva súbory. */
}
/* Jeden snímok bez prechodu, z ktorého sa presun rozbieha. Patrí sem, lebo
   `transition` dlaždice vlastní tento súbor -- generické pravidlo v 03 by
   sa proti nemu neprebilo. Nasadzuje ho `QwickEngine.reorderTagPicker`. */
.qwick-surface .tag-pick.is-reflowing{
  transition:none;
}
/* Ktorý tag je zvolený, hovorí SVETLO, nie rám: neaktívne sú stmavené,
   aktívny svieti vlastnou farbou. Prechod medzi nimi je vo filtri, ktorý
   deklaruje základné pravidlo .tag-pick. */
.qwick-surface .qwick-record-tag-picker.is-record-view .tag-pick{
  filter:brightness(.42) saturate(.72);
}
.qwick-surface .qwick-record-tag-picker.is-record-view .tag-pick.selected{
  filter:none;
}
/* Čítanie: v mriežke je jediný tag, nedá sa ťuknúť a stojí VĽAVO -- na tom
   istom mieste, kam sa zvolený tag pri Uložiť presunie. */
.qwick-surface .qwick-record-tag-picker.is-record-view.is-readonly{
  display:flex;
  justify-content:flex-start;
}
.qwick-surface .qwick-record-tag-picker.is-record-view.is-readonly .tag-pick{
  opacity:1;
  pointer-events:none;
}

/* ---- svetlá téma ------------------------------------------------------- */
/* Patrí sem, nie do 12-themes: téma je varianta TOHTO komponentu, takže
   žije pri ňom. Stav ZÁZNAM si drží svoju farbu tagu aj v svetlej téme. */