/* ======================================================================
   QWICK -- KOMPONENT: tag (pilulka)
   styles/20-components/tag-pill.css

   Tag je JEDEN prvok. Kreslí sa na piatich miestach v piatich veľkostiach,
   ale je to stále ten istý tag, nie päť podobných.

   ČO TU BOLO PREDTÝM
   ------------------
   Recept -- rovnaká farba, rovnaký gradient, rovnaký okraj, rovnaký tvar --
   bol vypísaný päťkrát v dvoch súboroch:

     .tag-editor-pill          styles/09-tag-editor.css
     .tag-editor-chain-pill    styles/09-tag-editor.css
     .tag-editor-preview-pill  styles/09-tag-editor.css
     .move-tag                 styles/11-sheets-and-settings.css
     .tag-summary-tag          styles/11-sheets-and-settings.css

   Päť kópií znamená, že zmena farby tagu je päť zmien a pri štyroch z nich
   sa na piatu zabudne. Presne to je dôvod, prečo sa tag na karte pohybu
   a tag na ploche tagov dali rozladiť.

   AKO TO JE TERAZ
   ---------------
   `.qwick-tag-pill` nesie recept. Trieda vedľa neho nesie IBA veľkosť
   a umiestnenie:

     <div class="qwick-tag-pill move-tag">              karta pohybu
     <div class="qwick-tag-pill tag-summary-tag">       súhrn podľa tagov
     <button class="qwick-tag-pill tag-editor-pill">    plocha tagov, TRIPS
     <button class="qwick-tag-pill tag-editor-chain-pill">  pás mimo plochy
     <div class="qwick-tag-pill tag-editor-preview-pill">   náhľad pri úprave

   Farba tagu prichádza z dát cez `--qwick-tag-color` na prvku. Recept
   ju iba spotrebuje.

   `border-radius:999px` je tu správne: každá z týchto veľkostí je pilulka,
   teda polomer je vždy polovica kratšej strany. Panelom sa taká hodnota
   neodovzdáva -- tam by z 999 vznikol roh cez 150px.
   ====================================================================== */

/* ======================================================================
   RECEPT
   ====================================================================== */
.qwick-surface .qwick-tag-pill{
  /* Atrament tagu. Bez farby z dát padá na text plochy; náhľad pri úprave
     si spodok prepíše na červenú, lebo tam je farba predmetom úpravy. */
  --qwick-tag-ink:var(--qwick-tag-color,var(--text));
  /* Materiál sa tu nekopíruje. Výplň a okraj dodáva spoločný zdroj
     `styles/21-control-material.css`; viditeľná horná hrana ani odlesk
     neexistujú. Zrušený farebný token `--qwick-tag-edge` sa nevracia. */
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:999px;
  font-weight:800;

  /* Výplň nesie zdieľaný materiál ovládacieho prvku
     (`styles/21-control-material.css`). Tint si berie z `currentColor`,
     teda presne z atramentu nastaveného o riadok vyššie -- tag preto
     nemusí odovzdávať svoju farbu cez hranicu súboru. */
  color:var(--qwick-tag-ink);
  -webkit-tap-highlight-color:transparent;
}

/* Meno tagu žije vnútri pilulky a nikdy z nej nevytečie. Zalomenie sa líši
   podľa toho, koľko riadkov sa do danej veľkosti zmestí. */
.qwick-surface .qwick-tag-pill > span{
  min-width:0;
  overflow:hidden;
  line-height:1.1;
  text-align:center;
}

/* ======================================================================
   PLOCHA TAGOV A PRAVIDLÁ TRIPS -- 148 x 70
   ====================================================================== */
.qwick-surface .tag-editor-pill{
  width:148px;
  height:70px;
  padding:0 19px;
  font-size:18px;
  /* Dlaždica leží v ploche, preto nemá vlastný zdvih ani odlesk. */
}
.qwick-surface .tag-editor-pill.tag-editor-center-slot{grid-column:1 / span 2;justify-self:center;}
.qwick-surface .qwick-tag-pill .tag-editor-pill-name{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  text-overflow:ellipsis;
  word-break:break-word;
}
.qwick-surface .tag-editor-pill.tag-editor-source-hidden{opacity:0;pointer-events:none;}
.qwick-surface .tag-editor.tag-editor-page-entering .tag-editor-pill{
  animation:tag-editor-page-in .28s cubic-bezier(.32,.72,.35,1) both;
  animation-delay:var(--tag-editor-pill-delay,0ms);
  will-change:transform,opacity;
}

/* ======================================================================
   PÁS TAGOV MIMO PLOCHY
   ====================================================================== */
.qwick-surface .tag-editor-chain-pill{
  flex:0 0 auto;
  scroll-snap-align:center;
  height:var(--tag-editor-chain-h);
  max-width:min(58vw,220px);
  padding:0 16px;
  font-size:14px;
  /* Pás je plochý: pilulky v ňom nemajú tieň ani horný odlesk. */
  transition:var(--qwick-fade-in),transform .24s cubic-bezier(.22,1,.36,1);
}
.qwick-surface .qwick-tag-pill .tag-editor-chain-pill-name{
  max-width:100%;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  text-overflow:ellipsis;
  word-break:break-word;
}
.qwick-surface .tag-editor-chain-pill.tag-editor-source-hidden{display:none;}
.qwick-surface .tag-editor-chain-pill.tag-editor-arrival-hidden,
.qwick-surface .tag-editor-chain-pill.tag-editor-pill-entering{
  opacity:0;
  transition:var(--qwick-fade-out),transform .24s cubic-bezier(.22,1,.36,1);
}
.qwick-surface .tag-editor-chain-pill.tag-editor-pill-entering{transform:scale(.82);}

/* ======================================================================
   NÁHĽAD PRI ÚPRAVE TAGU -- 222 x 105
   ====================================================================== */
.qwick-surface .tag-editor-preview-pill{
  /* Bez zvolenej farby ukazuje náhľad červenú: farba je tu predmetom
     úpravy, nie prevzatou hodnotou. */
  --qwick-tag-ink:var(--qwick-tag-color,var(--danger));
  width:222px;
  height:105px;
  padding:0 28px;
  font-size:27px;
  transition:color .22s ease,background .22s ease;
}
.qwick-surface .qwick-tag-pill .tag-editor-preview-name{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  text-overflow:ellipsis;
  word-break:break-word;
}

/* ======================================================================
   NESENÁ KÓPIA A JEJ DOLETY
   ====================================================================== */
/* Pri presúvaní tagu letí nad plochou jedna kópia. Je to ten istý tag, len
   zdvihnutý -- geometriu a dráhu vlastní editor tagov (`09-tag-editor.css`),
   materiál a jeho zdvih patria sem, aby sa recept nerozdvojil. */
.qwick-surface .tag-editor-ghost{
}
.qwick-surface .tag-editor-exchange-flight{
}
.qwick-surface .tag-editor-create-flight{
}

/* ======================================================================
   KARTA POHYBU -- pilulka na ľavej hrane karty
   ====================================================================== */
/* Rozmer nesie karta cez --move-tag-*, aby si výplň karty a šírka tagu
   nemohli utiecť. */
.qwick-surface .move-tag{
  position:absolute;
  left:var(--move-tag-edge-inset);
  top:var(--move-tag-edge-inset);
  bottom:var(--move-tag-edge-inset);
  width:var(--move-tag-width);
  min-width:var(--move-tag-width);
  height:auto;
  min-height:0;
  margin:0;
  padding:0 13px;
  font-size:14px;
  /* Karta pohybu stojí v obale `overflow:hidden`; vlastný tieň ani horný
     odlesk preto nekreslí. */
}
.qwick-surface .qwick-tag-pill .move-tag-name{
  max-width:100%;
  display:block;
  max-height:2.2em;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ======================================================================
   SÚHRN PODĽA TAGOV -- zmenšenina v pomere 148:70
   ====================================================================== */
.qwick-surface .tag-summary-tag{
  width:72px;
  max-width:72px;
  height:34.054054054px;
  min-height:34.054054054px;
  aspect-ratio:148 / 70;
  padding:0 9.243243243px;
  font-size:10px;
  line-height:1.1;
  text-align:center;
  transition:transform .16s cubic-bezier(.22,1,.36,1),filter .16s ease,box-shadow .16s ease;
}
.qwick-surface .qwick-tag-pill .tag-summary-tag-name{
  max-width:100%;
  display:block;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* Vybraný riadok súhrnu: tag sa zdvihne a obkreslí vlastnou farbou. */
.qwick-surface .tag-summary-row.active .tag-summary-tag{
  transform:scale(1.045);
  filter:brightness(1.18) saturate(1.12);
}