/* ======================================================================
   13. MODULES
   Katalog, instalacia a runtime host volitelnych modulov
   ====================================================================== */

.qwick-surface .qwick-settings-section{
  margin-top:24px;
  padding:0 2px;
  flex:0 0 auto;
}
.qwick-surface .qwick-settings-title{
  margin:0 2px 10px;
  color:var(--muted);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:1.05px;
  line-height:1;
  text-transform:uppercase;
}
.qwick-surface .tag-editor-overlay .qwick-modules-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
/* RIADOK NASTAVENIA. Text je vľavo, ovládač vpravo. Nemá okraj a je bledší
   než ostatný sheet; to je jeho jediné materiálové odlíšenie. */
.qwick-surface .qwick-setting-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:72px;
  padding:12px 12px 12px 16px;
  border:0;
  border-radius:24px;
  background:rgba(255,255,255,.10);
  box-sizing:border-box;
}
.qwick-surface .qwick-setting-card-copy{
  min-width:0;
  flex:1 1 auto;
}
.qwick-surface .qwick-setting-card-title{
  color:var(--text);
  font-size:13px;
  font-weight:850;
  line-height:1.15;
}
.qwick-surface .qwick-setting-card-description{
  margin-top:5px;
  color:var(--muted);
  font-size:10.5px;
  font-weight:650;
  line-height:1.25;
}
.qwick-surface .tag-editor-overlay .qwick-module-actions{
  display:flex;
  flex:0 0 auto;
  gap:6px;
}
.qwick-surface .tag-editor-overlay .qwick-module-button{
  min-width:76px;
  height:40px;
  padding:0 13px;
  border:1px solid currentColor;
  border-radius:999px;
  background:transparent;
  color:var(--accent2);
  font:800 11px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  appearance:none;
  -webkit-appearance:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.qwick-surface .tag-editor-overlay .qwick-module-button:disabled{opacity:.42;}

/* PREPÍNAČ ZAPNUTÉ/VYPNUTÉ JE ROLA, NIE VLASTNOSŤ EDITORA TAGOV.
   Vypnutý modul zostáva stiahnutý aj so svojimi dátami; prepínač riadi iba
   to, či jeho kód beží. */
.qwick-surface .qwick-switch{
  flex:0 0 auto;
  width:52px;
  height:32px;
  padding:0;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface3);
  appearance:none;
  -webkit-appearance:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease,border-color .2s ease;
}
.qwick-surface .qwick-switch-knob{
  display:block;
  width:24px;
  height:24px;
  margin:0 0 0 3px;
  border-radius:50%;
  background:var(--muted);
  transition:transform .2s cubic-bezier(.32,.72,.35,1),background .2s ease;
}
.qwick-surface .qwick-switch.is-on{
  border-color:var(--mint);
  background:color-mix(in srgb,var(--mint) 26%,transparent);
}
.qwick-surface .qwick-switch.is-on .qwick-switch-knob{
  transform:translateX(20px);
  background:var(--mint);
}
.qwick-surface .qwick-switch:disabled{opacity:.42;}
.qwick-surface .tag-editor-overlay .qwick-modules-empty{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:22px;
  color:var(--muted);
  background:rgba(255,255,255,.025);
  font-size:11px;
  font-weight:700;
  text-align:center;
}
.qwick-surface .tag-editor-overlay .qwick-modules-status{
  min-height:16px;
  margin:8px 2px 0;
  color:var(--muted);
  font-size:10.5px;
  font-weight:650;
  line-height:1.3;
  text-align:center;
}
.qwick-surface .tag-editor-overlay .qwick-modules-status.is-error{color:var(--danger);}

#qwickModuleHost:empty{display:none;}
.qwick-module-runtime{
  position:fixed;
  inset:0;
  z-index:1500;
  width:100%;
  /* Vyska runtime. Skusal som ju odtialto odstranit, aby `inset:0`
     urcovalo box sam a runtime mal ten isty ramec ako `body` -- malo
     to zrovnat spodnu hranu volieb modulu s volbami zakladu. Zhorsilo
     to vsak stratu rozostrenia tlacidla QWICK pri prechode, takze je
     to VRATENE. Spodna hrana volieb sa musi vyriesit inak (presunom
     pasu volieb do zdielanej vrstvy tlacidla), nie tu. */
  height:var(--app-viewport-height,100dvh);
  /* Hostitel bezi od hrany po hranu a bezpecnu zonu NEVLASTNI. Prekryvy
     modulu su v nom absolutne (`inset:0`), takze akykolvek padding tu by
     im odrezal horny pas a nechal nad sheetom viditelny prud. Bezpecnu
     zonu nesie rolovacia plocha modulu cez `.qwick-screen-pad` -- rovnaka
     rola ako v Moves. */
  box-sizing:border-box;
  overflow:auto;
  overscroll-behavior:none;
  background:var(--bg,#000);
  color:var(--text,#fff);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  opacity:0;
  filter:blur(18px) saturate(1.25);
  -webkit-filter:blur(18px) saturate(1.25);
  box-shadow:none;
  pointer-events:none;
}
/* ZATVORENY MODUL SA NEVYPINA, IBA ZHASNE.
   `display:none` bolo pricinou dvoch chyb naraz a obe mali ten isty
   koren -- prvok pri kazdom otvoreni VZNIKAL nanovo:

     1. Vznik vrstvy pod tlacidlom QWICK zhodil jeho `backdrop-filter`,
        takze rozostrenie preblikavalo -- ale IBA smerom do modulu, lebo
        spat ziadna nova vrstva nevznika. Presne tak sa to aj prejavovalo.
     2. WebKit zahodil `scrollTop` kazdej rolovacej plochy vnutri, takze
        modul sa vzdy vratil uplne hore. MOVES to nikdy nerobil -- a to je
        cela pointa: MOVES sa neskryva, len ustupi.

   `visibility:hidden` je presne to, co robi MOVES: prvok ostava v
   rozlozeni aj v kompozicii, iba sa nekresli a nechyta dotyky. Vrstva tak
   nikdy nevznika ani nezanika a poloha odrolovania sa drzi sama.

   NEVRACAJ `display:none`. Usetri to jednu vrstvu v pokoji a zaplati sa
   za to oboma chybami vyssie. */
.qwick-module-runtime[hidden]{
  visibility:hidden;
  pointer-events:none;
}
body.qwick-module-open{overflow:hidden;touch-action:pan-y;}

/* Svetla tema ma iny scrim, takze ta ista bledost je iny podiel bielej. */

@media (max-width:380px){
  .qwick-surface .qwick-setting-card{align-items:stretch;flex-direction:column;}
  .qwick-surface .tag-editor-overlay .qwick-module-actions{width:100%;}
  .qwick-surface .tag-editor-overlay .qwick-module-button{flex:1 1 auto;}
}

/* Moves a Trips su dve prekryte plochy na tom istom mieste. Gesto meni iba
   opacity a blur; neexistuje ziadna bocna poloha ani horizontalny posun. */
/* `will-change` tu ZÁMERNE nestojí. Triedu `.qwick-module-crossfade-surface`
   nasadzuje skript pri prvom ťahu a už ju neodoberá, takže trvalý
   `will-change` by po jedinom prechode držal vlastnú vrstvu navždy. Nesú ho
   preto len tie dva stavy, v ktorých sa plocha naozaj hýbe -- prelínanie
   a dosadanie -- a oba sa nasadzujú ešte pred prvým snímkom pohybu. */
/* POKOJNA PLOCHA NESMIE MAT `filter`. ANI `blur(0)`.
   Trieda sa nasadzuje pri starte a uz sa neodobera, takze cokolvek tu stoji,
   plati po cely beh aplikacie. A `filter` s inou hodnotou nez `none` robi
   z prvku OBSAHUJUCI BLOK pre svojich potomkov s `position:fixed` -- prestanu
   sa vztahovat na okno a zacnu sa vztahovat nan.

   Nesie ju aj `#overlays-index`, obycajny blok v toku dokumentu, ktory stoji
   AZ ZA obrazovkou vysokou cely displej. Vsetky sheety zakladu su jeho fixne
   deti, takze sa vykreslovali o cely displej nizsie -- otvarali sa spravne,
   len ich nebolo kde vidiet. Presne to hlasili pouzivatelia ako „sheety sa
   nezobrazuju vobec".

   Rozostrenie preto nesie iba stav, v ktorom sa plocha naozaj rozostruje.
   Ako zaciatocna hodnota prechodu netreba: pri tahu ju zapisuje skript inline
   este pred prvym snimkom a pri otvoreni modulu bez tahu ziadny prechod
   nebezi. */
.qwick-module-crossfade-surface{
  opacity:1;
}
body.qwick-module-open .qwick-module-crossfade-surface{
  opacity:0;
  filter:blur(18px) saturate(1.25);
  -webkit-filter:blur(18px) saturate(1.25);
  pointer-events:none;
}
body.qwick-module-open .qwick-module-runtime:not([hidden]){
  opacity:1;
  filter:blur(0);
  -webkit-filter:blur(0);
  pointer-events:auto;
}
body.qwick-module-settling .qwick-module-crossfade-surface,
body.qwick-module-settling .qwick-module-runtime:not([hidden]){
  transition:opacity .32s cubic-bezier(.22,1,.36,1),
             filter .32s cubic-bezier(.22,1,.36,1),
             -webkit-filter .32s cubic-bezier(.22,1,.36,1);
  will-change:opacity,filter;
}

body.qwick-module-crossfading{
  touch-action:none;
  cursor:grabbing;
}
body.qwick-module-crossfading .qwick-module-crossfade-surface,
body.qwick-module-crossfading .qwick-module-runtime:not([hidden]){
  transition:none;
  pointer-events:none;
  will-change:opacity,filter;
}
@media (prefers-reduced-motion:reduce){
  body.qwick-module-settling .qwick-module-crossfade-surface,
  body.qwick-module-settling .qwick-module-runtime:not([hidden]){
    transition-duration:.01ms;
  }
}