/* Whimsy look: warm paper, Bodoni headings, Manrope labels, white cards */
:root{
  --bg:#F6F4EF; --paper:#FFFFFF; --ink:#1C1B19; --muted:#7A766D; --line:#E4E0D7;
  --accent:#8C3B2A; --accent-soft:#F3E9E3; --love:#8C3B2A; --hate:#1C1B19; --hate-soft:#ECE9E2;
  --good:#3F6B4E; --warn:#8A5A12;
  --display:"Bodoni Moda", "Didot", Georgia, serif;
  --body:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Jasny motyw na stałe, jak strona główna i baza (21.10.2026: ciemny motyw quizu usunięty – punkt 7 „do decyzji”) */
:root{color-scheme:light}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:24px 56px}
.wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
h1,h2{font-family:var(--display);font-weight:400;line-height:1.12;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:2.3rem} h2{font-size:1.75rem}
p{margin:0}
.muted{color:var(--muted)}
.eyebrow{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.eyebrow .num{font-family:var(--display);font-style:italic;letter-spacing:0;text-transform:none;font-size:.95rem;color:var(--ink)}
.progress{height:1px;background:var(--line);overflow:hidden}
.progress span{display:block;height:100%;background:var(--ink);transition:width .3s}
.note{font-size:.84rem;color:var(--muted);border-left:1px solid var(--line);padding-left:12px}
.list{display:flex;flex-direction:column;gap:14px}
.scene{background:var(--paper);border:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:12px;min-width:0;transition:border-color .2s}
.scene.love{border-color:var(--love)}
.scene .row{display:flex;gap:14px;align-items:center;min-width:0}
.swatch{width:68px;height:68px;flex:none;position:relative}
.swatch .ph{position:absolute;left:6px;bottom:5px;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9);font-weight:600}
.scene .txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.scene .lbl{font-family:var(--display);font-size:1.12rem;line-height:1.2}
.scene .sub{font-size:.8rem;color:var(--muted);line-height:1.35}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;border-top:1px solid var(--line);padding-top:10px}
.scale button{font:inherit;background:transparent;border:0;padding:4px 0;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.scale .dot{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--bg)}
.scale .t{font-size:.62rem;line-height:1.1;text-align:center;letter-spacing:.02em}
.scale button[aria-checked="true"]{color:var(--ink);font-weight:700}
.scale button.spos[aria-checked="true"] .dot{background:var(--love);border-color:var(--love)}
.scale button.sneg[aria-checked="true"] .dot{background:var(--hate);border-color:var(--hate)}
.scale button.szero[aria-checked="true"] .dot{background:var(--line);border-color:var(--muted)}
.soft{display:flex;gap:8px;align-items:center;font-size:.82rem;color:var(--ink);background:var(--accent-soft);padding:8px 10px;cursor:pointer}
.soft input{width:16px;height:16px;accent-color:var(--accent);flex:none}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{font:inherit;text-align:left;background:var(--paper);border:1px solid var(--line);padding:14px 16px;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:2px}
.opt span{font-family:var(--display);font-size:1.1rem}
.opt small{color:var(--muted);font-size:.8rem}
.opt[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.nav{display:flex;gap:10px;justify-content:space-between;align-items:center}
.btn{font:inherit;font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;border-radius:0;padding:14px 24px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none;display:inline-block}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn:disabled{opacity:.35;cursor:not-allowed}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.78rem;color:var(--muted)}
.field input{font:inherit;padding:12px 14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);width:100%}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:.78rem;padding:7px 12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.sugg{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--paper)}
.sugg button{font:inherit;text-align:left;padding:10px 14px;border:0;border-top:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.sugg button:first-child{border-top:0}
.profile{display:flex;flex-direction:column;gap:10px;background:var(--paper);border:1px solid var(--line);padding:18px}
.bar{display:grid;grid-template-columns:9.5rem 1fr 2.5rem;gap:10px;align-items:center;font-size:.85rem}
.bar .track{height:2px;background:var(--line);overflow:hidden}
.bar .track span{display:block;height:100%;background:var(--ink)}
.bar .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.result{background:var(--paper);border:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:9px;scroll-margin-top:24px}
.result .top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.result h3{margin:0;font-family:var(--display);font-weight:400;font-size:1.35rem;line-height:1.15}
.result .brand{font-size:.8rem;color:var(--muted);letter-spacing:.02em}
.match{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent);white-space:nowrap;font-size:.95rem}
.tag{display:inline-block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:4px 8px;border:1px solid var(--line);color:var(--muted)}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.8rem;color:var(--muted)}
.fb{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:.8rem}
.fb button{font:inherit;font-size:.76rem;padding:6px 12px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.fb button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.sl{display:grid;grid-template-columns:5.5rem 1fr 5.5rem;gap:10px;align-items:center;font-size:.82rem}
.sl span:last-of-type{text-align:right}
.sl input{width:100%;accent-color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.shop{font-size:.82rem;font-weight:700;color:var(--accent);display:block}
textarea{width:100%;min-height:9rem;font:inherit;font-size:.78rem;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:10px}
.warn{color:var(--warn);font-size:.85rem}

/* wynik: półkole z wycinkami i podpisami po lewej */
.fan{position:relative;width:100%;aspect-ratio:1/1;container-type:inline-size;margin-top:4px}
.fan svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flab{position:absolute;width:44%;transform:translate(-100%,-50%);text-align:right;color:var(--ink);background:none;border:0;padding:4px 0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.flab:hover b,.flab:focus-visible b{text-decoration:underline;text-underline-offset:3px}
.wedge{cursor:pointer;transition:opacity .2s}
.fan:hover .wedge{opacity:.85}
.fan .wedge:hover{opacity:1}
[hidden]{display:none!important}
.sheet-back{position:fixed;inset:0;z-index:50;background:rgba(28,27,25,.22);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px));animation:fadeIn .25s ease}

:root[data-theme="dark"] .sheet-back{background:rgba(0,0,0,.4)}
.sheet-card{width:100%;max-width:520px;max-height:86vh;overflow:auto;background:var(--bg);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.18);padding:14px;display:flex;flex-direction:column;gap:12px;animation:rise .3s ease}
.sheet-card .result{border:0;box-shadow:none}
.sheet-card .result{background:transparent;border:0;box-shadow:none;padding:4px 6px 8px;gap:0;text-align:center}
.rs-tag{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:6px}
.rs-title{font-family:var(--display);font-style:italic;font-weight:400;font-size:2.1rem;line-height:1.1;margin:14px 0 6px;text-wrap:balance}
.rs-brand{font-style:italic}
.rs-sub{font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--muted)}
.rs-text{text-align:justify;hyphens:auto;font-size:.95rem;line-height:1.62;max-width:100%;margin:22px auto 0;text-align-last:left}
.rs-warn{text-align:left;margin-top:10px}
.rs-split{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center;margin:30px 0 8px}
.rs-img{aspect-ratio:3/4;position:relative;width:100%}
.rs-img span{position:absolute;left:8px;bottom:8px;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9);font-weight:600}
.rs-notes{text-align:right;display:flex;flex-direction:column;gap:2px;font-size:1rem;line-height:1.45}
.rs-notes span{display:block}
.rs-lbl{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.rs-rows{margin:18px 0 0;border-top:1px solid var(--ink);text-align:left}
.rs-rows div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.8rem}
.rs-rows dt{font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem}
.rs-rows dd{margin:0;text-align:right}
.sheet-card .shop{text-align:center;margin-top:16px}
.sheet-card .fb{justify-content:center;margin-top:14px}
.sheet-card .match{display:none}
.sheet-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sheet-top span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.sheet-close{padding:8px 14px;font-size:.66rem}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.sheet-back,.sheet-card{animation:none}}
.flab b{display:block;font-weight:500;font-size:3.1cqw;letter-spacing:.07em;text-transform:uppercase;line-height:1.25}
.flab small{display:block;font-size:2.5cqw;line-height:1.4;color:var(--muted)}
.flab small:first-of-type{color:var(--accent);font-weight:700;letter-spacing:.02em}
@media (max-width:380px){.bar{grid-template-columns:7.5rem 1fr 2.2rem}}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* ---------------------------------------------------------------------
   Dodane w wersji produkcyjnej (poza prototypem): widoczny fokus wycinka
   półkola przy obsłudze klawiaturą oraz stopka.
   --------------------------------------------------------------------- */
.wedge:focus{outline:none}
.wedge:focus-visible{stroke:var(--accent);stroke-width:6;opacity:1}
.site-foot{max-width:560px;margin:56px auto 0;padding-top:16px}
/* Prototyp działał bez atrybutu lang, więc hyphens:auto nie dzieliło wyrazów. Po dodaniu lang="pl"
   przeglądarka zaczęłaby dzielić; zostawiamy zatwierdzony wygląd (decyzja o dzieleniu: raport, „do decyzji”). */
.rs-text{hyphens:manual}
/* Zanim skrypty zbudują pierwszy ekran, kontener ma już wysokość okna: stopka nie przeskakuje (CLS). */
#app{min-height:100vh;min-height:100svh}
/* Ekran wrażliwości: lista grup pojawia się pod pytaniem tak/nie */
.mig-more{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:16px}

/* ---------------------------------------------------------------------
   Dodane 21.10.2026: czytelniejsze półkole wyników.
   Podpowiedź pod nagłówkiem; najechanie lub fokus wysuwa i podświetla wycinek
   oraz podkreśla nazwę. Podpisy rozmieszcza layoutFanLabels (js/quiz.js).
   --------------------------------------------------------------------- */
.fan-head{display:flex;flex-direction:column;gap:6px}
.fan-hint{font-size:.84rem;color:var(--muted);line-height:1.4}
.flab b{font-size:max(11px,3.1cqw)}
.flab small{font-size:max(10px,2.5cqw)}
.wedge{transition:transform .25s cubic-bezier(.23,1,.32,1),opacity .2s}
.fan.has-hot .wedge:not(.hot){opacity:.55}
.wedge.hot{transform:translate(var(--dx),var(--dy));opacity:1}
.fan:hover .wedge.hot{opacity:1}
.flab.hot b{text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion: reduce){.wedge.hot{transform:none}}

/* Nagłówek z powrotem do strony głównej (dodany 21.10.2026), jak w /baza/ */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:-10px 0 20px}
.top .mark{font-family:'Bodoni Moda Logo','Bodoni Moda','Didot',serif;font-style:italic;font-weight:500;font-size:24px;line-height:1;color:var(--ink);text-decoration:none}
.top nav{display:flex;gap:24px;font-size:12px;font-weight:600;letter-spacing:.22em}
.top nav a{color:var(--ink);text-decoration:none}
.top nav a:hover,.top nav a[aria-current="page"]{color:var(--accent)}
@media (max-width:520px){.top nav{gap:16px;letter-spacing:.16em}}