/* ============================================================
   screens.css — štýly viazané na konkrétny krok dotazníka
   (intro, fotka/kamera, načítavanie, výsledok)
   ============================================================ */

/* ---------- intro ---------- */
.intro-points{
  list-style:none;margin:0 0 18px;padding:0;
  display:flex;flex-direction:column;gap:11px;
}
.intro-points li{
  display:flex;gap:11px;align-items:center;
  font-size:12.5px;color:var(--ink);
}
/* Poradové číslo v plnom tmavom krúžku. Krúžok dvíha celý zoznam
   a opakuje tvar hviezdičky zo značky. Veľkosť je tá istá ako pri symboloch
   v pokynoch k fotke (--icon-sm) — krúžky majú naprieč krokmi jednu mierku. */
.intro-points li .ico{
  flex:none;width:var(--icon-sm);height:var(--icon-sm);border-radius:50%;
  background:var(--espresso);color:var(--on-espresso);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;letter-spacing:.04em;
}
/* Bublina s QR kódom. Od zoznamu ju delí medzera, takže je z nej samostatný
   blok, nie pokračovanie zoznamu. Vnútri je hore viac miesta než dole —
   kód nemá sedieť na hornej hrane rámika. Výšku si berie podľa obsahu
   (flex:0 0 auto): keby sa roztiahla na zvyšok kroku, vznikla by v strede
   úvodu prázdna plocha. */
.intro-qr-box{
  margin-top:20px;
  flex:0 0 auto;
  padding:30px 14px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface-panel);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
  text-align:center;
}
/* 130 px, nie 108: na úvode je QR kód hlavnou cestou na telefón, a keď sa
   krok nemusí rolovať, je na to miesto. Na užších a nižších paneloch ho
   médiá na konci súboru sťahujú späť. */
.intro-qr-code{
  width:130px;height:130px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);overflow:hidden;
}
.intro-qr-code img, .intro-qr-code canvas, .intro-qr-code table{
  display:block;width:130px !important;height:130px !important;
}
.intro-qr-text{
  font-size:11px;color:var(--ink-soft);line-height:1.55;max-width:260px;
}

/* ---------- súhlas ---------- */
/* Krok súhlasu sa má zmestiť na jednu obrazovku: potvrdenia aj tlačidlá
   musia ostať na očiach, dlhý text sa posúva vo vlastnom ráme. Zastropovanie
   widgetu na výšku okna a rolovanie v <main> už rieši layout.css pre všetky
   kroky rovnako — tu ostáva len samotný rám s textom.

   Rám berie zvyšok výšky bez pevného čísla, takže to sedí na každom telefóne
   aj po zmene dĺžky textu.

   Odstup od nadpisu je tu, nie v .q-title — ten je spoločný pre všetky kroky
   a inde má text nasledovať tesne pod nadpisom. */
.consent-text{
  color:var(--ink-soft);font-size:11.5px;line-height:1.65;margin:10px 0 14px;
  /* Dlhý text sa pri rolovaní dostane aj nad vlasy. Priamo na fotografii
     by --ink-soft mal 2,88:1; na doske s krytím 92 % má 5,04:1. */
  background:var(--surface-panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px;
  /* Rám berie zvyšok výšky kroku a text v ňom sa posúva vlastnou lištou.
     Pod 96 px už nie je čitateľný, tam radšej nechá rolovať <main>. */
  flex:1 1 auto;min-height:96px;
  overflow-y:auto;
  /* Dorolovanie textu nesmie potiahnuť stránku e-shopu pod iframe-om. */
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
}
/* Lišta v Chrome/Safari — užšia a v tóne rámika, nie systémová sivá. */
.consent-text::-webkit-scrollbar,
.camera-consent::-webkit-scrollbar{width:6px;}
.consent-text::-webkit-scrollbar-track,
.camera-consent::-webkit-scrollbar-track{background:transparent;}
.consent-text::-webkit-scrollbar-thumb,
.camera-consent::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px;}
.consent-text p{margin:0 0 10px;}
.consent-text p:last-child{margin-bottom:0;}
.consent-text strong{color:var(--ink);font-weight:600;}
.consent-subtitle{
  color:var(--ink);font-size:9px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;margin:0 0 9px;
}
/* Oznam o reCAPTCHA pod políčkami, tesne nad „Odoslať a analyzovať“ —
   podmienky Google ho žiadajú pri odosielacom tlačidle, keď je ich odznak
   schovaný. Drobný ako .mail-note, ale na doske ako text súhlasu: priamo
   na fotografii by druhotný atrament nemal dosť kontrastu. */
.captcha-notice{
  flex:none;margin:10px 0 0;padding:7px 10px;
  font-size:10px;line-height:1.5;color:var(--ink-soft);
  background:var(--surface-panel);border-radius:var(--radius-sm);
}
.captcha-notice a{color:var(--gold-ink);}

/* ---------- krok s fotkou ---------- */
.photo-choice-row{
  display:flex;gap:12px;margin-bottom:12px;
}
.photo-choice-tile{
  flex:1 1 0;
  border:1.5px dashed var(--line);
  border-radius:var(--radius);
  background:var(--surface-panel);
  padding:18px 11px 15px;
  text-align:center;
  cursor:pointer;
  transition:border-color var(--motion-fast) ease, background var(--motion-fast) ease, transform .1s ease;
}
.photo-choice-tile:hover{
  border-color:var(--line-strong);
  background:var(--surface-hover);
}
.photo-choice-tile:active{
  transform:scale(.98);
  border-color:var(--gold-ink);
  background:var(--surface-active);
}
.photo-choice-tile:focus-visible{outline:2px solid var(--espresso);outline-offset:2px;}
.photo-choice-tile.drag{
  border-color:var(--gold-ink);
  background:var(--wash);
}
/* Ikony sú inline SVG s stroke="currentColor" (pozri photo-screen.js), takže
   ťah berie farbu odtiaľto. --gold-ink má na --wash 4,52:1 — ikona je pritom
   dekoratívna (aria-hidden, význam nesie nápis pod ňou), takže aj s rezervou
   nad 3:1, ktoré WCAG 1.4.11 žiada od grafiky nesúcej informáciu. */
.photo-choice-icon{
  width:var(--icon-xl);height:var(--icon-xl);border-radius:50%;
  background:var(--wash);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 8px;
  color:var(--gold-ink);
}
.photo-choice-label{
  display:block;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);margin-bottom:6px;line-height:1.4;
}
.photo-choice-sub{font-size:10px;color:var(--ink-soft);line-height:1.45;}
input[type=file]{display:none;}

/* Pokyny sa nerolujú. Predtým tu bol listovací rám s vlastnou lištou: na
   telefóne z neho bolo vidieť dve rady z piatich, lišta vyzerala ako chyba
   a zvyšok pokynov nikto nenašiel. Päť hesiel v dvoch stĺpcoch je nižších
   než päť celých viet pod sebou, takže sa rám zmestí celý a ešte aj ušetrí
   pár pixelov oproti pôvodnému stavu. Chýbajúcu výšku kroku nesie odteraz
   sám blok o kamere (pozri .camera-consent nižšie). */
.photo-tips{
  background:var(--surface-panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 14px 11px;margin-bottom:12px;
  /* Rám má výšku svojho obsahu a v stiesnenom kroku sa nesmie zmenšiť —
     inak by sa heslá orezali bez toho, aby sa dali dorolovať. */
  flex:0 0 auto;
}
.photo-tips-title{
  font-size:9px;font-weight:700;margin:0 0 8px;color:var(--gold-ink);
  letter-spacing:.18em;text-transform:uppercase;line-height:1.6;
}
/* Tri stĺpce: päť hesiel zaberie dva riadky namiesto troch. Hore stoja tri
   krátke heslá, dole „Denné svetlo“ a vedľa neho najdlhšie heslo cez dva
   stĺpce, aby sa nelámalo na tri riadky. Ušetrený riadok si berú dlaždice
   a blok o kamere pod nimi.

   Na paneli užšom než 430 px sa mriežka vracia na dva stĺpce (médiá na konci
   súboru): pri troch by na heslo zvýšilo ~60 px a lámalo by sa uprostred
   slova. Meria sa šírka widgetu, nie okna — beží v iframe, ktorý býva užší
   než obrazovka. */
.photo-tips ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:7px 10px;
}
.photo-tips li{
  display:flex;align-items:center;gap:7px;
  font-size:11px;line-height:1.25;color:var(--ink);font-weight:500;
}
.photo-tips li:last-child{grid-column:span 2;}
/* Krúžok so symbolom — ten istý tvar ako pri dlaždiciach voľby, len menší,
   aby heslá a dlaždice hovorili jednou rečou. Ikony sú inline SVG so
   stroke="currentColor" (pozri photo-screen.js), takže ťah berie farbu
   odtiaľto. Symbol je dekoratívny (aria-hidden) — význam nesie heslo
   vedľa neho, preto stačí --gold-ink na --wash (4,52:1). */
.tip-icon{
  flex:0 0 auto;
  width:var(--icon-sm);height:var(--icon-sm);border-radius:50%;
  background:var(--wash);color:var(--gold-ink);
  display:flex;align-items:center;justify-content:center;
}
/* Poznámka nie je ďalšie heslo, preto ju od mriežky delí vláska a stíšený
   atrament. */
.photo-tips-note{
  margin:8px 0 0;padding-top:7px;border-top:1px solid var(--line);
  font-size:10.5px;line-height:1.45;color:var(--ink-soft);
}
/* Kontrola okuliarov a vlasov beží na modeli tváre — pri prvej fotke sa ešte
   sťahuje, takže to musí byť vidieť. */
.photo-checking{
  margin:14px 0 0;font-size:12px;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.photo-checking::before{
  content:"";width:13px;height:13px;flex:0 0 auto;
  border:2px solid var(--line);border-top-color:var(--espresso);border-radius:50%;
  animation:photo-checking-spin .8s linear infinite;
}
@keyframes photo-checking-spin{ to{ transform:rotate(360deg); } }
/* Chýbajúcu výšku kroku nesie tento rám sám. Pokyny sa už nezmenšujú — sú
   heslovité, takže by sa nemali z čoho zmenšovať bez orezania. Listuje tu
   preto jediný blok na obrazovke, a je to ten najdlhší.

   min-height:0 dovoľuje zmenšenie (inak je pre flex položku „auto“ = výška
   obsahu). Na nízkych paneloch ho médium na konci súboru vracia na 56 px:
   tenší prúžok sa nedá prečítať a lišta v ňom vyzerá ako chyba. Pod tou
   hranicou radšej nechá rolovať <main>, lebo orezané tlačidlo by bolo
   horšie než rolovanie. */
.camera-consent{
  background:rgba(244,234,214,.92);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;margin-top:10px;
  /* Spodná hranica je až v médiu pre nízke panely: na bežnom paneli si rám
     vezme celý zvyšok výšky kroku (~110 px na širokom paneli oproti ~60 px
     pred touto úpravou), takže ju nepotrebuje. */
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
}
.camera-consent p{
  margin:0 0 7px;font-size:11px;line-height:1.5;color:var(--ink);
}
.camera-consent p:last-child{margin-bottom:0;}
.camera-consent .privacy-line{font-weight:600;}
.camera-consent .cta-line{font-weight:600;color:var(--gold-ink);}

.preview-wrap{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface-panel);
  box-shadow:var(--shadow);
}
.preview-wrap img{
  display:block;width:100%;max-height:300px;object-fit:cover;
}
.preview-remove{
  position:absolute;top:10px;right:10px;
  background:rgba(33,26,18,.6);
  color:#fff;border:none;border-radius:50%;
  width:30px;height:30px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
}
/* Obrysové tlačidlo pod náhľadom. Vlastný riadok je flex, aby .btn so svojím
   flex:1 vyplnil celú šírku — mimo flexu by sa zmrštil na šírku textu. */
.preview-actions{
  display:flex;margin-top:12px;
}
.photo-note{
  font-size:12px;color:var(--ink);margin-top:12px;line-height:1.5;
}

/* ---------- živý náhľad kamery ---------- */
.camera-view{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:#19140f;
  box-shadow:var(--shadow);
  aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  /* Krok je flex stĺpec (layout.css), takže by sa náhľad dal stlačiť. Obrys
     tváre je však na pomer 4:3 nakreslený — stlačený by ukazoval inam,
     než kam sa má zákazníčka postaviť. Radšej nech sa zmenší niečo iné. */
  flex:none;
}
.camera-view video{
  width:100%;height:100%;
  object-fit:cover;
  transform:scaleX(-1);
}
.face-guide-wrap{
  position:absolute;inset:0;
  pointer-events:none;
}
.face-guide-wrap svg{width:100%;height:100%;display:block;}
.face-guide-glow{
  fill:none;
  stroke:rgba(255,255,255,.5);
  stroke-width:3.6;
  stroke-linecap:round;
  filter:blur(3.5px);
  opacity:.6;
  transition:stroke var(--motion-base) ease, opacity var(--motion-base) ease;
}
.face-guide-glow.aligned{
  stroke:var(--success);
  opacity:.6;
}
.face-guide{
  fill:none;
  stroke:rgba(255,255,255,.92);
  stroke-width:1;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
  transition:stroke var(--motion-base) ease, filter var(--motion-base) ease, stroke-width var(--motion-base) ease;
}
/* Zarovnaný obrys je zámerne len pritlmene zelený: ostrú zelenú si necháva
   prstenec odpočtu, ktorý po ňom obieha — inak by zelená splynula so zelenou
   a odpočet by nebolo vidno. */
.face-guide.aligned{
  stroke:rgba(52,211,153,.5);
  stroke-width:1.4;
  filter:drop-shadow(0 0 4px rgba(52,211,153,.55));
}
/* Prstenec odpočtu do spúšte. stroke-dasharray/-dashoffset prepisuje
   obrazovka podľa skutočnej dĺžky obrysu (getTotalLength); hodnoty tu sú
   len poistka, aby sa pred prvým prepisom neukázal celý zelený obrys. */
.face-guide-progress{
  fill:none;
  stroke:#eafff6;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  /* Skrytý, kým odpočet nebeží: guľatý koniec ťahu by inak aj pri nulovej
     dĺžke nechal na obryse svietiaci bod. */
  opacity:0;
  filter:drop-shadow(0 0 5px rgba(52,211,153,.9));
  transition:stroke-dashoffset 90ms linear;
}
/* Blesk pri automatickom odfotení. Pri „obmedziť pohyb" ho globálne pravidlo
   v tokens.css skráti na nulu — a to je správne, blikanie nikoho neprekvapí. */
.camera-flash{
  position:absolute;inset:0;
  background:#fff;opacity:0;
  pointer-events:none;
}
.camera-flash.on{animation:camera-flash .45s ease-out forwards;}
@keyframes camera-flash{
  from{opacity:.9;}
  to{opacity:0;}
}

/* Stav jednotlivých podmienok — bez neho by samospúšť pôsobila ako
   čierna skrinka („prečo to ešte nefotí?"). */
.capture-checks{
  list-style:none;margin:12px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px;
}
.capture-check{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface-panel);
  font-size:11px;line-height:1;color:var(--ink-soft);
  transition:background var(--motion-base) ease, border-color var(--motion-base) ease,
             color var(--motion-base) ease;
}
.capture-check-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--star-off);
  transition:background var(--motion-base) ease;
}
.capture-check[data-state="ok"]{
  border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok-ink);font-weight:600;
}
.capture-check[data-state="ok"] .capture-check-dot{background:var(--success);}
.capture-check[data-state="fail"]{
  border-color:var(--error-line);background:var(--error-bg);color:var(--error-ink);
}
.capture-check[data-state="fail"] .capture-check-dot{background:var(--error-ink);}

.capture-fallback-note{
  margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink);
}

/* Len pri ?captureDebug=1 — na doladenie prahov na konkrétnej kamere. */
.capture-debug{
  position:absolute;left:8px;top:8px;margin:0;
  padding:6px 8px;border-radius:var(--radius-sm);
  background:rgba(20,17,16,.62);color:#fff;
  font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre;pointer-events:none;
}
#cameraHint.aligned{color:var(--ok-ink);font-weight:700;}

/* ---------- načítavanie ---------- */
.loading{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 10px;flex:1;
}
.loading strong{font-size:15px;margin-bottom:6px;}
.loading span{font-size:12px;color:var(--ink);}

/* ---------- výsledok ---------- */
/* Odporúčania chodia v dvoch sekciách — ranná a večerná rutina. Každá je
   jeden panel s produktmi ako riadkami pod sebou (.product-card
   v components.css), takže sa číta ako postup, nie ako zhluk výsledkov.
   Panel má rovnakú plochu a obrys ako karta vyhodnotenia nad ním. */
.routine{
  background:var(--surface-panel);border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:14px;
}
.routine:last-of-type{margin-bottom:6px;}
/* Hlavička panela: slnko či mesiac v krúžku, nadpis antikvou ako ostatné
   nadpisy widgetu a počet krokov vpravo. */
.routine-head{
  display:flex;align-items:center;gap:9px;
  padding:11px 14px;border-bottom:1px solid var(--line);
}
.routine-icon{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:var(--icon-sm);height:var(--icon-sm);border-radius:50%;
  background:var(--wash);color:var(--gold-ink);
}
.routine-title{
  margin:0;flex:1;min-width:0;
  font-family:var(--font-display);font-weight:400;
  font-size:16px;line-height:1.25;
}
.routine-count{font-size:10.5px;color:var(--ink-soft);white-space:nowrap;}

.products{display:flex;flex-direction:column;}

/* ---------- hodnotenie služby (koniec dotazníka) ---------- */
.rating-card{
  background:var(--surface-panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 16px;margin-top:18px;
  text-align:center;
}
.rating-title{font-family:var(--font-display);font-weight:400;margin:0 0 8px;font-size:16px;line-height:1.25;}
.rating-sub{
  margin:0 0 14px;font-size:11.5px;color:var(--ink-soft);line-height:1.5;
}
.rating-stars{
  display:flex;justify-content:center;gap:2px;margin-bottom:6px;
}
.star{
  background:none;border:none;padding:2px 5px;cursor:pointer;
  font-size:26px;line-height:1.1;
  color:var(--star-off);
  transition:color var(--motion-fast) ease, transform .1s ease;
}
/* Zvýrazňuje sa celý rad po vybranú/prejdenú hviezdičku, nie jediná pod
   kurzorom — inak nie je vidieť, koľko hviezdičiek sa vlastne volí. */
.star.on,.star.preview{color:var(--star);}
.star.preview{transform:scale(1.06);}
.star:active{transform:scale(.9);}
.star:focus-visible{outline:2px solid var(--espresso);outline-offset:1px;border-radius:8px;}
.star:disabled{cursor:default;opacity:.6;}
/* Rezervovaná výška: popis sa mení podľa výberu a nesmie posúvať tlačidlo. */
.rating-legend{
  min-height:19px;margin-bottom:14px;
  font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);
}
.rating-send{width:100%;}
.rating-error{text-align:left;}

/* ---------- nepovinná poznámka (pod hviezdičkami) ---------- */
/* Vyzerá to ako odkaz, nie ako tlačidlo s rámom — vedľa tmavého „Odoslať
   hodnotenie“ by druhý rám súťažil o pozornosť. Terč je ale plnohodnotný:
   44 px na výšku aj s výplňou po stranách. Samotný nápis má sotva 17 px,
   čo je na palec málo — WCAG 2.5.8 žiada aspoň 24 px a 44 px je miera
   odporúčaná pre dotyk. Výplň je neviditeľná (podčiarknutý ostáva len
   nápis) a zápornými okrajmi sa odkaz vráti opticky tam, kde stál, takže
   sa karta nerozťahuje. */
.rating-note-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 16px;
  margin:-10px 0 0;
  background:none;border:none;cursor:pointer;
  font-family:var(--font-ui);font-size:11.5px;color:var(--gold-ink);
  text-decoration:underline;text-underline-offset:3px;
  /* Bez toho čaká prehliadač na telefóne ~300 ms, či nejde o dvojklik,
     a odkaz pôsobí, akoby nereagoval. */
  touch-action:manipulation;
}
.rating-note-toggle:hover{background:var(--surface-hover);border-radius:10px;}
.rating-note-toggle:focus-visible{outline:2px solid var(--espresso);outline-offset:0;border-radius:10px;}
.rating-note-toggle:disabled{cursor:default;opacity:.6;}

/* Pole pribúda pod deliacou linkou, rovnako ako formulár v karte e-mailu
   (.mail-form nižšie) — karta sa len rozvinie, hviezdičky ostanú na mieste
   a nič neposkočí. */
.rating-note-wrap{
  padding-top:14px;
  margin:14px 0;
  border-top:1px solid var(--line);
  text-align:left;            /* karta je centrovaná, formulár v nej nie */
}

/* Rozmery a rám si pole berie z .field (components.css), aby pôsobilo ako to
   isté ovládanie ako pole pre e-mail. Navyše len výška a ťahanie za spodnú
   hranu — do troch riadkov sa zmestí bežná poznámka a kto chce napísať viac,
   pole si roztiahne. Zástupný text je dvojriadkový, preto je pole od začiatku
   dosť vysoké na to, aby sa celý zmestil. */
.rating-note{
  display:block;
  min-height:86px;
  max-height:190px;
  resize:vertical;
  line-height:1.55;
}

/* Zameranie hlási prstenec, nie zhrubnutý rám.

   Zdedené .field:focus stmaví naraz rámik aj pridá 2 px obrys s odsadením,
   takže okolo poľa vznikne asi 4 px široký tmavý pás. Pri povinnom poli pre
   e-mail to dáva zmysel — bez adresy sa ďalej nedá. Pri nepovinnej poznámke
   to ale vyzerá ako výstraha, že je niečo zle, hoci zákazníčka len klikla do
   poľa. Rám preto ostáva v tej istej hrúbke a zameranie ukáže len mäkký zlatý
   prstenec. Zmiznúť celkom nesmie: bez neho by sa pri prechádzaní tabulátorom
   nedalo zistiť, kde človek stojí (WCAG 2.4.7).

   Toto pravidlo musí stáť až za .field:focus — špecificita je rovnaká,
   rozhoduje poradie. screens.css sa načítava po components.css. */
.rating-note:focus{
  /* Priehľadný obrys namiesto outline:none — vo Windows High Contrast Mode
     sa tieň zahodí a toto ostane jediná viditeľná stopa. */
  outline:2px solid transparent;
  outline-offset:0;
  border-color:var(--gold-ink);
  box-shadow:0 0 0 3px rgba(169,129,47,.22);
  background:var(--surface);
}

/* Riadok pod poľom: vľavo že je nepovinné, vpravo koľko znakov je minutých. */
.rating-note-foot{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-top:6px;
  font-size:10.5px;line-height:1.5;color:var(--ink-soft);
}
.rating-note-count{font-variant-numeric:tabular-nums;}
/* Blízko limitu sa počítadlo ozve zlatým — nie červeným. Nie je to chyba,
   len koniec miesta. */
.rating-note-count.near{color:var(--gold-ink);font-weight:600;}

/* ---------- poďakovanie po odoslaní ---------- */
.rating-done-icon{
  width:var(--icon-lg);height:var(--icon-lg);border-radius:50%;
  background:var(--ok-bg);color:var(--ok-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;margin:0 auto 10px;
}
.rating-done-stars{
  font-size:20px;color:var(--star);letter-spacing:3px;margin-bottom:8px;
}
.rating-card-done .rating-sub{margin-bottom:0;}
/* Odoslaná poznámka sa vráti pod hviezdičkami — zákazníčka vidí, že text
   naozaj odišiel, a nie je to len prázdne „ďakujeme“. Úvodzovky kreslí
   prehliadač podľa <q> a jazyka dokumentu (main.js nastavuje
   document.documentElement.lang), takže v nemčine sú iné než v angličtine. */
.rating-done-note{
  margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink-soft);line-height:1.55;font-style:italic;
}

/* ---------- rutina e-mailom (pod rutinou, nad hodnotením) ---------- */
/* Zbalená je to jeden riadok: ponuka, nie ďalší krok dotazníka. Rozbalená
   ostáva tou istou doskou — obsah pribudne pod deliacou linkou, karta nikam
   neposkočí. */
.mail-card{
  background:var(--surface-panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  margin-top:18px;
}
/* Celý riadok je terč, nie len nápis — na telefóne je to jediná plocha,
   ktorú sa dá spoľahlivo trafiť palcom. */
.mail-toggle{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:0;
  background:none;border:none;cursor:pointer;
  font-family:var(--font-ui);color:var(--ink);text-align:left;
}
.mail-toggle:focus-visible{outline:2px solid var(--espresso);outline-offset:4px;border-radius:8px;}
/* Krúžok s obálkou kopíruje ikonové krúžky z ostatných kariet: zlatý glyf
   na --wash, teda grafika na 4,52:1 — nad hranicou 3:1. */
.mail-icon{
  flex:none;width:var(--icon-md);height:var(--icon-md);border-radius:50%;
  background:var(--wash);color:var(--gold-ink);
  display:flex;align-items:center;justify-content:center;
}
.mail-texts{flex:1;min-width:0;}
.mail-label{
  display:block;
  font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);
}
.mail-sub{
  display:block;
  font-size:11.5px;color:var(--ink-soft);line-height:1.5;margin-top:4px;
}
.mail-chev{
  flex:none;font-size:9px;color:var(--ink-soft);line-height:1;
  transition:transform var(--motion-fast) ease;
}
.mail-toggle[aria-expanded="true"] .mail-chev{transform:rotate(180deg);}

/* Formulár pribúda pod linkou — zbalený riadok tak ostáva na mieste
   a zákazníčka vidí, že sa len rozvinul, nie že sa obrazovka vymenila. */
.mail-form{
  display:flex;flex-direction:column;gap:10px;
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);
}
.mail-send{width:100%;}
/* Poznámka o nakladaní s adresou. Drobná, ale stále čitateľná — je to
   informácia o údajoch, nie ozdoba. Odkaz mieri na tú istú adresu ako súhlas
   na začiatku dotazníka (config.consent.privacyUrl, meniteľná cez
   ?privacyUrl=) a nesie aj rovnaký názov — dve rôzne pomenovania tej istej
   stránky by vyzerali ako dva rôzne dokumenty. */
.mail-note{font-size:10.5px;color:var(--ink-soft);line-height:1.55;margin:0;}
.mail-note a{color:var(--gold-ink);}

/* ---------- potvrdenie odoslania ---------- */
/* Rovnaká kompozícia ako poďakovanie po hodnotení (.rating-done-icon vyššie),
   aby dve potvrdenia na jednej obrazovke nehovorili dvoma jazykmi. */
.mail-card-done{text-align:center;padding:18px 18px 16px;}
.mail-done-icon{
  width:var(--icon-lg);height:var(--icon-lg);border-radius:50%;
  background:var(--ok-bg);color:var(--ok-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;margin:0 auto 10px;
}
.mail-done-title{
  font-family:var(--font-display);font-weight:400;
  margin:0 0 6px;font-size:16px;line-height:1.25;
}
.mail-done-sub{margin:0;font-size:11.5px;color:var(--ink-soft);line-height:1.55;}
.mail-done-sub strong{color:var(--ink);font-weight:600;}

/* ============================================================
   medze podľa veľkosti panela
   ------------------------------------------------------------
   Widget nebeží v okne prehliadača, ale v paneli, ktorý má na veľkom
   monitore 480 × 700, na notebooku 360 × 700 a na telefóne celú obrazovku
   (pozri embed.js). Rozdiel medzi nimi je taký veľký, že jedna mierka pre
   všetky znamená buď rolovanie na malom paneli, alebo prázdnu plochu na
   veľkom. Preto sa škála na dvoch miestach stiahne — inak sa nemení nič,
   žiadny prvok nepribúda ani nemizne.

   Merané na skutočnom dotazníku v paneloch 480 × 700, 375 × 667, 360 × 700
   a 360 × 600: pri týchto hodnotách sa nerolujú ani úvod, ani fotka, ani
   súhlas, ani otázky do deviatich možností. Otázka s dvanástimi možnosťami
   sa doroluje — riadok voľby sa kvôli nej nezmenšuje (pozri components.css).
   ============================================================ */

/* ---------- úzky panel: telefón a úzke vloženie do e-shopu ---------- */
/* Stĺpec textu je tu o tretinu užší než na veľkom paneli, takže nadpis sa
   zalomí tak či tak — dvom riadkom sa vyhnúť nedá a nemá zmysel sa oň
   pokúšať. Ide preto o stupeň nižšie a miesto sa šetrí na bubline a
   dlaždiciach. */
@media (max-width:430px){
  h1.intro-title{font-size:25px;margin-bottom:15px;}
  h2.q-title{font-size:21px;}

  .intro-qr-box{margin-top:12px;padding:21px 12px 13px;gap:9px;}
  .intro-qr-code{width:96px;height:96px;}
  .intro-qr-code svg,
  .intro-qr-code img,
  .intro-qr-code canvas,
  .intro-qr-code table{width:96px !important;height:96px !important;}

  /* Pri troch stĺpcoch by na heslo zvýšilo ~60 px a lámalo by sa uprostred
     slova. Mriežka sa preto vracia na dva stĺpce a najdlhšie heslo si berie
     celý riadok — päť hesiel tak má tri riadky a dlaždice sú o stupeň
     menšie, inak by na blok o kamere nezvýšila výška. */
  .photo-tips ul{grid-template-columns:repeat(2,1fr);}
  .photo-tips li{font-size:10.5px;}
  .photo-tips li:last-child{grid-column:1 / -1;}
  .tip-icon{width:22px;height:22px;}
  .photo-choice-tile{padding:13px 9px 11px;}
  .photo-choice-icon{width:40px;height:40px;margin-bottom:7px;}
  .photo-choice-label{font-size:10px;margin-bottom:5px;}
}

/* Úzky a zároveň nie vysoký panel (360 × 700 na notebooku) je najtesnejší
   prípad úvodu — štvorriadkový nadpis a pod ním celá bublina. Menší kód tam
   necháva rezervu na dlhšie preklady. */
@media (max-width:430px) and (max-height:710px){
  .intro-qr-code{width:88px;height:88px;}
  .intro-qr-code svg,
  .intro-qr-code img,
  .intro-qr-code canvas,
  .intro-qr-code table{width:88px !important;height:88px !important;}
}

/* ---------- nízky panel: notebook a bežný telefón ---------- */
/* Hranica je 680 px, nie 660: panel telefónu s obrazovkou 667 px (iPhone SE
   a spol.) je najčastejší prípad, ktorý tesne nevychádzal. */
@media (max-height:680px){
  h1.intro-title{font-size:24px;margin-bottom:14px;}
  h2.q-title{font-size:20px;margin-bottom:9px;}
  p.intro-text{margin-bottom:14px;}
  p.q-hint{margin-bottom:13px;}

  .options{gap:5px;}
  .option{padding:10px 12px;}

  .intro-points{gap:9px;margin-bottom:14px;}
  .intro-qr-box{margin-top:14px;padding:24px 14px 14px;gap:10px;}

  footer{padding-bottom:14px;}
  .btn{padding:12px 16px;}
}
/* Veľkosť kódu si nízky panel určuje len vtedy, keď je zároveň široký —
   na úzkom paneli ju už stanovili médiá vyššie a tie sú v súbore skôr,
   takže by ich toto pravidlo prebilo väčšou hodnotou. */
@media (min-width:431px) and (max-height:680px){
  .intro-qr-code{width:104px;height:104px;}
  .intro-qr-code svg,
  .intro-qr-code img,
  .intro-qr-code canvas,
  .intro-qr-code table{width:104px !important;height:104px !important;}
}

@media (max-height:600px){
  h1.intro-title{font-size:22px;margin-bottom:12px;}
  h2.q-title{font-size:19px;margin-bottom:8px;}
  p.intro-text{font-size:12px;line-height:1.6;margin-bottom:12px;}
  p.q-hint{font-size:11.5px;margin-bottom:10px;}

  .intro-points{gap:8px;margin-bottom:12px;}
  .intro-points li{font-size:12px;}
  .intro-qr-box{margin-top:10px;padding:17px 12px 11px;gap:8px;}
  .intro-qr-code{width:72px;height:72px;}
  .intro-qr-code svg,
  .intro-qr-code img,
  .intro-qr-code canvas,
  .intro-qr-code table{width:72px !important;height:72px !important;}
  .intro-qr-text{font-size:10px;}

  .photo-tips{padding:9px 12px 10px;margin-bottom:8px;}
  .photo-tips-title{margin-bottom:6px;}
  .photo-tips ul{gap:5px 10px;}
  .photo-tips li{font-size:10px;}
  .tip-icon{width:20px;height:20px;}
  .photo-tips-note{font-size:10px;margin-top:7px;padding-top:6px;}
  .photo-choice-row{margin-bottom:9px;}
  .photo-choice-tile{padding:10px 8px 9px;}
  .photo-choice-icon{width:32px;height:32px;margin-bottom:5px;}
  .photo-choice-label{font-size:9.5px;margin-bottom:4px;}
  .photo-choice-sub{font-size:9.5px;line-height:1.35;}

  /* Poistka, aby z bloku o kamere neostal prúžok — pod ~56 px sa už nedá
     prečítať ani jeden celý riadok. */
  .camera-consent{margin-top:8px;padding:10px 12px;min-height:56px;}
  .camera-consent p{font-size:10.5px;line-height:1.45;margin-bottom:5px;}
}