/* Mapa salonu: marmur, różowe złoto, platyna. Kierunek wizualny z sarzai.pl (Manrope, ciepła biel,
   przyciski w różowym złocie ze złotą poświatą, platynowe akcenty jak w logo). Układ: mapa wiedzy + panel (Kursograf). */

@font-face { font-family: "Manrope"; src: local("Manrope"), url("/fonty/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --tlo: #fbf8f4;
  --papier: rgba(255, 253, 250, .86);
  --tekst: #211e1e;
  --tekst-2: #6f6461;
  --linia: #e8dfd8;
  --rz: #c69f90;                 /* różowe złoto */
  --rz-ciemne: #8a5a4b;          /* tekst w różowym złocie: kontrast 5,4:1 na tle (WCAG AA) */
  --rz-jasne: #f4e3db;
  --rz-gradient: linear-gradient(135deg, #f1d3c6 0%, #d4ad9d 38%, #c69f90 62%, #b48573 100%);
  --rz-przycisk: linear-gradient(135deg, #9a6a59 0%, #8a5a4b 55%, #7a4d40 100%); /* biały tekst ≥ 4,5:1 na każdym kolorze gradientu (bramka 02.11) */
  --przycisk-tekst: #fff;
  --ramka-pola: #8f8284;          /* granica pól i cichych przycisków: ≥ 3:1 (WCAG 1.4.11) */
  --papier-2: #fffdfa;            /* pola tekstowe */
  --zloto-blask: rgba(212, 175, 55, .25);
  --pl: #b8babf;                 /* platyna */
  --pl-jasna: #eef0f2;
  --pl-gradient: linear-gradient(135deg, #fafafb 0%, #dcdde1 45%, #b8babf 70%, #e9eaed 100%);
  --uwaga: #85601b; --uwaga-tlo: #fbf1d9;
  --zdrowie: #7a2e2e; --zdrowie-tlo: #f8e6e3;
  --ok: #3d6b55; --ok-tlo: #e8f1ec;
  --cien: 0 1px 2px rgba(33, 30, 30, .04), 0 10px 30px rgba(156, 111, 94, .10);
  --promien: 18px;
  --czcionka: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  /* marmur: delikatne żyłki z szumu SVG na ciepłej bieli */
  --marmur: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.0035 0.011' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.50  0 0 0 0 0.49  0 0 0 -2.6 1.45'/></filter><rect width='100%' height='100%' filter='url(%23m)' opacity='0.22'/></svg>");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0; color: var(--tekst); font: 16px/1.55 var(--czcionka);
  background:
    radial-gradient(1100px 520px at 0% -10%, rgba(241, 211, 198, .55), transparent 60%),
    radial-gradient(900px 520px at 110% 10%, rgba(220, 221, 225, .55), transparent 60%),
    var(--marmur), var(--tlo);
  background-attachment: fixed;
}
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--rz); outline-offset: 3px; border-radius: 6px; }

/* Pasek */
.pasek { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 24px; background: color-mix(in srgb, var(--tlo) 80%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linia); }
.marka { display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; text-align: left; min-height: 44px; padding: 0; }
.marka__znak { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--rz-gradient);
  color: #fff; box-shadow: 0 6px 18px var(--zloto-blask), inset 0 1px 0 rgba(255,255,255,.5); }
.marka__tekst { display: flex; flex-direction: column; line-height: 1.2; font-weight: 700; max-width: 52vw; }
.marka__tekst > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marka__tekst small { font-weight: 500; font-size: 14px; color: var(--tekst-2); letter-spacing: .02em; }
.pasek__menu { display: flex; gap: 4px; }
.pasek__link { background: none; border: 1px solid transparent; padding: 8px 12px; min-height: 44px; border-radius: 999px; cursor: pointer;
  color: var(--tekst-2); font-weight: 600; white-space: nowrap; }
.pasek__link[aria-current="true"] { border-color: var(--rz); color: var(--rz-ciemne); background: var(--rz-jasne); }
.znaczek { display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 11px; background: var(--rz-gradient); color: #fff; font-size: 12px; font-weight: 700; text-align: center; } /* bramka: wyjątek, liczba w kółku licznika obok podpisu */

/* Układ: mapa + panel */
.uklad { display: grid; grid-template-columns: minmax(0, 1fr) 430px; min-height: calc(100vh - 65px); }
.obszar { padding: 28px 32px 20px; min-width: 0; }
.panel { border-left: 1px solid var(--linia); background: var(--papier); backdrop-filter: blur(6px); padding: 28px 26px 60px;
  position: sticky; top: 65px; height: calc(100vh - 65px); overflow-y: auto; outline: none; }
@media (max-width: 900px) {
  .uklad { display: block; }
  .obszar { padding: 18px 16px; }
  .panel { position: fixed; inset: 65px 0 0 0; height: auto; border-left: 0; z-index: 15; transform: translateY(102%);
    transition: transform .28s ease; box-shadow: 0 -10px 40px rgba(33, 30, 30, .15); border-radius: 22px 22px 0 0; padding: 22px 18px 80px;
    background: color-mix(in srgb, var(--tlo) 96%, transparent); }
  .panel.otwarty { transform: translateY(0); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .panel { transition: none; } }

/* Typografia */
.nadtytul { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; margin: 0; color: var(--rz-ciemne); }
h1 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; font-weight: 500; letter-spacing: -.02em; margin: 8px 0 8px; }
h2 { font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; margin: 6px 0 10px; }
h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
@media (min-width: 901px) { .wstep h1 { font-size: 28px; } .obszar { padding-top: 18px; } }
.male { font-size: 14px; color: var(--tekst-2); }
.stopka { font-size: 14px; color: var(--tekst-2); margin-top: 12px; }
.tylko-telefon { display: none; }
@media (max-width: 600px) { .tylko-telefon { display: inline-block; } }

/* Na dziś: na telefonie jeden następny krok nad mapą; na komputerze ten krok jest w panelu */
.dzis { display: none; }
@media (max-width: 900px) {
  .dzis:not(:empty) { display: block; margin: 4px 0 18px; padding: 16px; border-radius: var(--promien);
    background: linear-gradient(135deg, rgba(241,211,198,.55), rgba(255,253,250,.92)); border: 1px solid rgba(198,159,144,.45); box-shadow: var(--cien); }
  .dzis h2 { font-size: 18px; margin: 4px 0 2px; }
  .dzis .male { margin: 0; }
  .dzis__rzad { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
  .dzis .dzis__przycisk { width: auto; flex: none; padding: 10px 20px; }
}

/* Szukaj */
.szukaj { display: flex; align-items: center; gap: 10px; background: var(--papier); border: 1px solid var(--ramka-pola); border-radius: 999px;
  padding: 6px 8px 6px 18px; box-shadow: var(--cien); }
.szukaj span { font-size: 22px; color: var(--rz-ciemne); }
.szukaj input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 0; min-height: 44px; outline: none; }
.szukaj button { border: 0; background: none; font-size: 22px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; color: var(--tekst-2); }
.pasek-mapy { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0 8px; }
.przelacznik { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--pl-gradient); box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.przelacznik button { border: 0; background: none; padding: 8px 16px; min-height: 40px; border-radius: 999px; cursor: pointer; font-weight: 600; color: #4a4c52; }
.przelacznik button[aria-pressed="true"] { background: #fff; color: var(--tekst); box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* Mapa */
.plotno { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid var(--linia);
  background: radial-gradient(circle at 50% 46%, rgba(255,255,255,.75), rgba(255,255,255,.25) 60%), var(--marmur); box-shadow: var(--cien); }
#mapa { display: block; width: 100%; height: auto; max-height: calc(100vh - 250px); min-height: 340px; touch-action: none; user-select: none; }
.krawedz { stroke: #cdbfb8; stroke-width: 1.4; fill: none; }
.krawedz--korzysta { stroke: #b8babf; stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .6; }
.krawedz.aktywna { stroke: var(--rz); stroke-width: 2.6; stroke-dasharray: none; opacity: 1; }
.krawedz.przygaszona { opacity: .25; }
.wezel { cursor: pointer; }
.wezel .kolo { fill: #fffdfa; stroke: url(#platyna); stroke-width: 2.5; }
.wezel.probuje .kolo { fill: var(--rz-jasne); stroke: url(#rozoweZloto); stroke-width: 3; }
.wezel.uzywam .kolo { fill: url(#rozoweZloto); stroke: url(#rozoweZloto); stroke-width: 3; }
.wezel.interesuje .kolo { stroke: var(--rz); stroke-dasharray: 3 4; }
.wezel.odlozone { opacity: .45; }
.wezel.wybrany .kolo { filter: url(#poswiata); stroke: var(--rz-ciemne); stroke-width: 4; }
.wezel.trafiony .kolo { filter: url(#poswiata); stroke: var(--rz); stroke-width: 4; }
.wezel.przygaszony { opacity: .22; }
.wezel .ikona, .wezel .numer { text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.wezel .ikona { font-size: 17px; }
.wezel .numer { font-size: 14px; font-weight: 700; letter-spacing: .04em; fill: var(--rz-ciemne); }
.wezel.uzywam .numer { fill: #fff; }
.wezel .cel { fill: transparent; }
.wezel .podpis { font-size: 16px; font-weight: 600; fill: var(--tekst); text-anchor: middle; paint-order: stroke; stroke: rgba(251, 248, 244, .92); stroke-width: 5px; stroke-linejoin: round; }
.wezel--salon .kolo { fill: url(#rozoweZloto); stroke: #fff; stroke-width: 4; filter: url(#poswiata); }
.wezel--salon .podpis { font-size: 16px; font-weight: 700; }
.obszar-nazwa { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; fill: var(--rz-ciemne); cursor: pointer; paint-order: stroke; stroke: rgba(251,248,244,.9); stroke-width: 5px; }
.narzedzia-mapy { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; }
.narzedzia-mapy button, .legenda { background: rgba(255,255,255,.85); border: 1px solid var(--linia); border-radius: 999px; }
.narzedzia-mapy button { min-width: 40px; min-height: 40px; padding: 0 12px; cursor: pointer; font-weight: 600; color: var(--tekst); }
.legenda { position: absolute; left: 12px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 12px; font-size: 14px; color: var(--tekst-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.l-nowa { background: #fff; border: 2px solid var(--pl); }
.l-probuje { background: var(--rz-jasne); border: 2px solid var(--rz); }
.l-uzywam { background: var(--rz-gradient); }

/* Lista (równoważny widok mapy) */
.lista { display: grid; gap: 18px; margin-top: 8px; }
.lista section h3 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--rz-ciemne); }
.wiersz { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; margin: 6px 0; min-height: 56px;
  border: 1px solid var(--linia); border-radius: 14px; background: var(--papier); cursor: pointer; }
.wiersz .kropka { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--pl); background: #fff; flex: none; }
.wiersz .kropka.probuje { border-color: var(--rz); background: var(--rz-jasne); }
.wiersz .kropka.uzywam { border-color: transparent; background: var(--rz-gradient); }
.wiersz small { margin-left: auto; color: var(--tekst-2); white-space: nowrap; }
.wiersz.przygaszony { opacity: .4; }

/* Panel */
.zamknij { float: right; border: 0; background: none; font-size: 26px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; color: var(--tekst-2); margin: -8px -8px 0 0; }
.etykieta-karty { display: inline-flex; gap: 6px; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--pl-gradient); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4a4c52; }
.sytuacja { color: var(--tekst-2); }
.statusy { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.czip { padding: 7px 14px; min-height: 40px; border-radius: 999px; border: 1px solid var(--linia); background: var(--papier); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--tekst-2); }
.czip--puste { border-style: dashed; background: transparent; }
.czip[aria-pressed="true"] { border-color: var(--rz); background: var(--rz-jasne); color: var(--rz-ciemne); }
.sekcja { border-top: 1px solid var(--linia); padding: 14px 0; }
.sekcja > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 36px; }
.sekcja > summary::-webkit-details-marker { display: none; }
.sekcja > summary::after { content: "+"; color: var(--rz-ciemne); font-size: 20px; }
.sekcja[open] > summary::after { content: "−"; }
.sekcja p { margin: 8px 0; }
.sprobuj { background: var(--papier); border: 1px solid var(--linia); border-radius: var(--promien); padding: 16px; box-shadow: var(--cien); margin: 14px 0; }
label.etykieta, p.etykieta { display: block; font-weight: 700; margin: 10px 0 6px; font-size: 14px; }
textarea { width: 100%; min-height: 96px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ramka-pola); background: var(--papier-2); resize: vertical; }
textarea:focus { border-color: var(--rz); outline: none; box-shadow: 0 0 0 3px var(--rz-jasne); }
.podpowiedz { font-size: 14px; color: var(--tekst-2); margin: 6px 0 0; }

/* Przyciski: różowe złoto (główne), platyna (drugie) */
.przycisk { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 12px 22px;
  border-radius: 999px; border: 1px solid rgba(255, 225, 190, .55); cursor: pointer; text-decoration: none; font-weight: 600; color: var(--przycisk-tekst);
  letter-spacing: .01em; background: var(--rz-przycisk);
  box-shadow: 0 6px 20px rgba(185, 132, 115, .22), inset 0 1px 0 rgba(255,255,255,.45); }
.przycisk--platyna { background: var(--pl-gradient); color: #2f3034; text-shadow: none; border-color: rgba(255,255,255,.8);
  box-shadow: 0 6px 18px rgba(120, 122, 128, .18), inset 0 1px 0 rgba(255,255,255,.9); }
.przycisk--cichy { background: transparent; color: var(--tekst-2); border: 1px solid var(--ramka-pola); box-shadow: none; text-shadow: none; font-weight: 600; }
.przycisk:disabled { opacity: .55; cursor: default; }
.rzad { display: grid; gap: 8px; grid-template-columns: 1fr; margin: 10px 0; }
.rzad--2 { grid-template-columns: 1fr 1fr; }
.rzad--3 { grid-template-columns: 1fr 1fr 1fr; }
.rzad--3 .przycisk, .rzad--2 .przycisk { padding: 10px 8px; font-size: 14px; }

/* Komunikaty */
.ramka { border-radius: 14px; padding: 12px 14px; margin: 10px 0; }
.ramka--uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }
.ramka--zdrowie { background: var(--zdrowie-tlo); color: var(--zdrowie); }
.ramka--ok { background: var(--ok-tlo); color: var(--ok); }
.ramka--zloto { background: linear-gradient(135deg, rgba(241,211,198,.6), rgba(255,253,250,.9)); border: 1px solid rgba(198,159,144,.5); }
.ramka ul { margin: 6px 0 0; padding-left: 18px; }
.sprawdz label { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; font-size: 15px; }
.sprawdz input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--rz); flex: none; }
.powiazania { display: grid; gap: 6px; }
.powiazania button { display: flex; justify-content: space-between; gap: 8px; text-align: left; padding: 10px 12px; min-height: 48px; border-radius: 12px;
  border: 1px solid var(--linia); background: var(--papier); cursor: pointer; }
.powiazania small { color: var(--tekst-2); white-space: nowrap; }

/* Drabina */
.drabina { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: s; }
.drabina li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--linia); background: var(--papier); font-size: 14px; }
.drabina li::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--pl-gradient); color: #4a4c52; font-size: 12px; font-weight: 700; } /* bramka: wyjątek, numer szczebla w kółku */
.drabina li.zdobyty { border-color: var(--rz); }
.drabina li.zdobyty::before { background: var(--rz-gradient); color: #fff; content: "✓"; }

/* Gotowce */
.gotowiec { background: var(--papier); border: 1px solid var(--linia); border-radius: var(--promien); padding: 14px; margin: 10px 0; box-shadow: var(--cien); }
.gotowiec pre { white-space: pre-wrap; font: inherit; margin: 8px 0; }
.gotowiec__meta { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--tekst-2); }

.dymek { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; background: #2b2425; color: #fbf8f4;
  padding: 12px 20px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.2); max-width: calc(100% - 32px); font-weight: 600; }
.ladowanie { color: var(--tekst-2); }
.panel a:not(.przycisk), .ramka a:not(.przycisk) { color: var(--rz-ciemne); font-weight: 700; text-decoration-color: var(--rz); text-underline-offset: 3px; }

/* Telefon: mapa wypełnia wysokość (przycięte boki, przesuwanie palcem), większe podpisy, legenda pod mapą */
@media (max-width: 600px) {
  .pasek { padding: 8px 12px; }
  .marka__tekst small { display: none; }
  .marka__tekst { max-width: 34vw; font-size: 14px; }
  .marka__znak { width: 32px; height: 32px; }
  .pasek__menu { gap: 0; }
  .pasek__link { padding: 6px 6px; font-size: 14px; }
  .wstep h1 { font-size: 22px; margin-bottom: 12px; }
  #mapa { max-height: none; }
  .wezel .podpis { font-size: 21px; }
  .wezel .numer { font-size: 17px; }
  .wezel--salon .podpis { font-size: 22px; }
  .obszar-nazwa { font-size: 17px; }
  .narzedzia-mapy { position: static; justify-content: flex-end; padding: 10px 10px 0; }
  .narzedzia-mapy button { min-width: 44px; min-height: 44px; }
  /* dolny pasek w zasięgu kciuka (Wroblewski, HIG); na górze tylko marka */
  .pasek__menu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: space-around; gap: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--tlo);
    backdrop-filter: blur(12px); border-top: 1px solid var(--linia); }
  .pasek__link { flex: 1; padding: 6px 2px; font-size: 14px; min-height: 48px; border-radius: 14px; }
  .marka__tekst { max-width: 70vw; font-size: 16px; }
  body { padding-bottom: 76px; }
  .pasek { backdrop-filter: none; background: var(--tlo); } /* backdrop-filter przypinałby dolny pasek do nagłówka */
  .panel { bottom: 0; padding-bottom: 110px; transform: translateY(calc(100% + 90px)); background: var(--tlo); backdrop-filter: none; }
  .legenda { position: static; border-radius: 0; border: 0; border-top: 1px solid var(--linia); justify-content: center; }
}

/* Kolekcja kart umiejętności (wzór: karty questowe AIPH, w stylu marmur / różowe złoto / platyna) */
.kolekcja { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin-top: 10px; }
.karta-umiej { aspect-ratio: 4 / 5; border-radius: 16px; padding: 10px; display: flex; flex-direction: column; justify-content: space-between;
  text-align: left; cursor: pointer; border: 2px solid transparent; font-size: 14px; position: relative; overflow: hidden; }
.karta-umiej--zdobyta { background: var(--marmur), linear-gradient(160deg, #fffaf6, #f4e3db); border-image: var(--rz-przycisk) 1; border-radius: 0;
  box-shadow: 0 8px 22px var(--zloto-blask); }
.karta-umiej--zablokowana { background: repeating-linear-gradient(135deg, var(--pl-jasna) 0 6px, transparent 6px 12px), var(--papier);
  border: 2px dashed var(--pl); color: var(--tekst-2); cursor: default; }
.karta-umiej__szczebel { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--rz-ciemne); }
.karta-umiej__nazwa { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--tekst); }
.karta-umiej--zablokowana .karta-umiej__nazwa { color: var(--tekst-2); }
.karta-umiej__umiem { font-size: 14px; line-height: 1.3; color: var(--tekst-2); }
.karta-duza { max-width: 320px; margin: 10px auto; aspect-ratio: 4 / 5; padding: 20px; font-size: 14px; cursor: default; }
.karta-duza .karta-umiej__nazwa { font-size: 24px; }
.karta-duza .karta-umiej__umiem { font-size: 14px; }

/* Przygotuj (wzór: "Czego potrzebujesz" w zadaniach AIPH) */
.przygotuj { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; padding: 10px 12px; border-radius: 12px; background: var(--pl-jasna); color: var(--tekst); margin: 10px 0; }
.przygotuj strong { white-space: nowrap; }

/* Oprowadź mnie */
.link-cichy { background: none; border: 0; padding: 0; font: inherit; color: var(--rz-ciemne); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wycieczka { position: fixed; inset: auto 0 0 0; z-index: 60; display: flex; justify-content: center; padding: 16px; pointer-events: none; }
.wycieczka__okno { pointer-events: auto; }
.wycieczka__okno { max-width: 420px; width: 100%; background: var(--tlo); background-image: var(--marmur); border-radius: 22px; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.25); border: 1px solid var(--linia); }
.podswietlony { position: relative; z-index: 55; box-shadow: 0 0 0 4px var(--rz), 0 0 0 9999px rgba(33,30,30,.35) !important; border-radius: 18px; }

/* Ty: personalizacja (docs/MODULY.md) */
.ty { background: var(--papier); border: 1px solid var(--linia); border-radius: var(--promien); padding: 16px; margin: 10px 0 18px; box-shadow: var(--cien); }
.ty__gora { display: flex; gap: 14px; align-items: center; margin: 10px 0 4px; }
.ty__zdjecie { flex: none; width: 84px; height: 104px; border-radius: 42px 42px 14px 14px; overflow: hidden; cursor: pointer;
  display: grid; place-items: center; background: linear-gradient(180deg, var(--rz-jasne), var(--pl-jasna)); border: 1px solid var(--rz); }
.ty__zdjecie img { width: 100%; height: 100%; object-fit: cover; }
.ty__zdjecie span { display: grid; place-items: center; color: var(--rz-ciemne); font-size: 22px; text-align: center; }
.ty__zdjecie small { font-size: 14px; line-height: 1.2; margin-top: 4px; }
.ukryty { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pole { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--ramka-pola); background: var(--papier-2); }
.pole:focus { border-color: var(--rz); outline: none; box-shadow: 0 0 0 3px var(--rz-jasne); }
.style { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.styl { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--linia);
  background: var(--papier); cursor: pointer; font-weight: 500; text-align: left; }
.styl i { width: 22px; height: 22px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--b), var(--a)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.styl[aria-pressed="true"] { border-color: var(--rz); background: var(--rz-jasne); }
.podglad { margin-top: 14px; text-align: center; }
.podglad img { width: min(220px, 70%); border-radius: 14px; box-shadow: 0 10px 30px rgba(185, 132, 115, .2); }

/* Odznaki i certyfikat */
.nagroda { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 8px 0; border-radius: 16px;
  border: 1px dashed var(--pl); background: transparent; color: var(--tekst-2); }
.nagroda strong { color: var(--tekst); font-weight: 600; }
.nagroda p { margin: 2px 0 0; }
.nagroda > div { flex: 1; min-width: 0; }
.nagroda__znak { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--pl-jasna); color: var(--pl); font-size: 18px; }
.nagroda--zdobyta { border: 1px solid rgba(198,159,144,.55); background: linear-gradient(135deg, rgba(241,211,198,.45), rgba(255,253,250,.9)); }
.nagroda--zdobyta .nagroda__znak { background: var(--rz-gradient); color: #fff; }
.nagroda--certyfikat .nagroda__znak { border-radius: 12px; }
.nagroda__przycisk { width: auto; min-height: 42px; padding: 8px 16px; font-size: 14px; }

/* Zagadki wizualne: wiadomości jak w telefonie */
.zagadka-sekcja { margin: 14px 0; padding: 16px; border-radius: var(--promien); border: 1px solid rgba(198,159,144,.45);
  background: linear-gradient(160deg, rgba(241,211,198,.35), rgba(255,253,250,.9)); }
.zagadka-sekcja h3 { font-size: 17px; font-weight: 600; margin: 4px 0 0; }
.zagadka__naglowek { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--rz-ciemne); }
.zagadka__wskazowka { font-size: 14px; font-weight: 600; color: var(--rz-ciemne); margin: 4px 0 8px !important; }
.czat--wybor .dymek-wiad { position: relative; padding-left: 50px; min-height: 52px; width: 100%; max-width: 100%; }
.czat--wybor .dymek-wiad::before { content: attr(data-litera); position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700;
  border: 1.5px solid var(--rz); color: var(--rz-ciemne); background: var(--tlo); }
.czat--wybor .dymek-wiad.dobra::before { content: "✓"; background: var(--rz-gradient); color: #fff; border-color: transparent; }
.czat--wybor .dymek-wiad.zla::before { content: "↺"; border-color: var(--pl); color: var(--tekst-2); }
.zagadka p { margin: 8px 0; }
.czat { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: linear-gradient(180deg, var(--pl-jasna), transparent); }
.dymek-wiad { justify-self: start; max-width: 92%; text-align: left; padding: 10px 14px; border-radius: 18px 18px 18px 6px; border: 1px solid var(--linia);
  background: #fff; color: var(--tekst); font-size: 15px; line-height: 1.45; cursor: pointer; box-shadow: 0 2px 8px rgba(120, 90, 80, .06); transition: transform .15s, border-color .15s; }
.dymek-wiad:hover { transform: translateY(-1px); border-color: var(--rz); }
.dymek-wiad.dobra { border-color: var(--rz); background: var(--rz-jasne); }
.dymek-wiad.zla { border-style: dashed; } /* wskazówka zamiast oceny: bez przekreślenia i przygaszenia (audyt 30.10) */
.dymek-wiad--cala { cursor: default; max-width: 100%; }
.dymek-wiad--cala:hover { transform: none; border-color: var(--linia); }
.fragment { display: inline; padding: 1px 2px; margin: 0; border: 0; border-radius: 6px; background: none; font: inherit; color: inherit; cursor: pointer;
  text-align: left; text-decoration: underline dotted var(--pl); text-underline-offset: 4px; }
.fragment.dobra { background: var(--rz-jasne); text-decoration: line-through; text-decoration-color: var(--rz-ciemne); }
.fragment.zla { background: var(--pl-jasna); }
.zagadka__dlaczego { min-height: 1em; color: var(--rz-ciemne); }
@media (prefers-reduced-motion: reduce) { .dymek-wiad { transition: none; } }
.podglad--relacja img { width: min(260px, 72%); }

/* Powtórka: lekki drugi krok pod "Na dziś" */
.powtorka { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 10px 12px; border-radius: 14px;
  border: 1px dashed var(--rz); background: transparent; cursor: pointer; text-align: left; min-height: 52px; }
.powtorka strong { display: block; font-size: 14px; color: var(--rz-ciemne); }
.powtorka small { display: block; font-size: 14px; color: var(--tekst-2); }
.powtorka__znak { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--rz-jasne); color: var(--rz-ciemne); font-size: 18px; }

.powtorka--nowe { border-style: solid; background: var(--rz-jasne); }
.case > summary { cursor: pointer; list-style: none; display: grid; gap: 2px; }
.case > summary::-webkit-details-marker { display: none; }
.case > summary small { color: var(--tekst-2); font-size: 14px; }

.pytania-case { margin: 8px 0 12px; padding-left: 22px; color: var(--rz-ciemne); font-weight: 600; }
.pytania-case li { margin: 4px 0; }
.nagraj { font-size: 17px; }
.nagraj.nagrywa { background: linear-gradient(135deg, #8f5563, #7a4452); } /* bez pulsowania (audyt 30.10); napis "Zakończ" mówi, że nagrywa */

/* Plan tygodnia */
.plan__lista { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.plan__lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.plan__lista li span { flex: none; width: 22px; color: var(--pl); font-weight: 700; }
.plan__lista li.zrobione span { color: var(--rz-ciemne); }
.plan__lista li.zrobione { color: var(--tekst); }
.plan__lista li:not(.zrobione) { color: var(--tekst-2); }

/* ===== Palety 30.10 (decyzja Ani) =====
   Jasna: różowe złoto + chmury przed wschodem słońca + tafla Morza Śródziemnego (zamiast marmuru).
   Ciemna "eko": prawie czarne tło (na ekranach OLED, czyli w większości telefonów, ciemne piksele nie świecą,
   więc ekran zużywa mniej energii), jedwabne brązy i satynowe akcenty, bez faktur i poświat.
   Kontrasty tekstu sprawdzone: wszystkie ≥ 4,5:1 (WCAG AA). */
:root {
  --tlo: #fbf6f4;                        /* perła o świcie */
  --papier: rgba(255, 252, 250, .9);
  --tekst: #23202a;                      /* atrament z odrobiną fioletu przedświtu: 14,9:1 */
  --tekst-2: #675e66;                    /* 5,8:1 */
  --linia: #eadfe2;
  --rz-jasne: #f6e4dd;
  --pl-jasna: #e6f2f1;                   /* piana morska zamiast szarej platyny w ramkach */
  --morze: #2a7178;                      /* tafla morza: tekst i ikony, ≥ 4,5:1 */
  --morze-jasne: #d9eeed;
  --swit: linear-gradient(180deg, #e6ddef 0%, #f3dfe6 30%, #fae6dd 58%, #fbf1ec 80%, #eaf4f3 100%);
  --chmury: radial-gradient(760px 220px at 18% 6%, rgba(255, 255, 255, .85), transparent 70%),
            radial-gradient(640px 200px at 82% 14%, rgba(255, 244, 240, .9), transparent 70%),
            radial-gradient(900px 260px at 50% 0%, rgba(226, 204, 234, .7), transparent 75%),
            radial-gradient(520px 160px at 70% 22%, rgba(250, 214, 196, .55), transparent 70%);
  --tafla: radial-gradient(1200px 380px at 50% 110%, rgba(110, 190, 196, .5), transparent 70%),
           radial-gradient(700px 220px at 25% 102%, rgba(160, 216, 220, .45), transparent 70%),
           radial-gradient(500px 120px at 75% 100%, rgba(255, 255, 255, .5), transparent 70%);
}
body { background: var(--chmury), var(--tafla), var(--swit); background-attachment: fixed; }
.plotno { background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .35) 65%), var(--tafla), #fdf8f6; }
.przygotuj { background: var(--pl-jasna); }
.powtorka__znak { background: var(--morze-jasne); color: var(--morze); }


/* Twoje daily (02.11): trzy kroki jak rutyna pielęgnacji, w kolorach istniejących tokenów */
.daily { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.daily__krok { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 14px;
  border: 1px solid var(--linia); background: var(--papier); color: inherit; text-align: left; font: inherit; cursor: pointer; }
.daily__krok strong { display: block; font-size: 14px; color: var(--rz-ciemne); }
.daily__krok small { display: block; font-size: 14px; color: var(--tekst-2); }
.daily__znak { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--morze-jasne); color: var(--morze); font-size: 15px; font-weight: 600; }
.daily__krok.zrobione .daily__znak { background: var(--morze); color: var(--tlo); }
.daily__krok.zrobione strong { color: var(--tekst-2); }
.daily__krok:disabled { cursor: default; opacity: .7; }
.daily__stopka { margin-top: 10px !important; }

/* ===== Tryb wieczorny (decyzja Ani 02.11) =====
   Włącza go osoba w Mój salon → Ty (data-tryb na <html>), nie system. Ciepła, przygaszona szarość zamiast czerni;
   warstwy jaśniejsze im wyżej (tło → karta → pole); tekst w złamanej bieli; jedwab w akcentach, nie w tle;
   przycisk ciemniejszy niż tekst, bez blasku. Progi pilnuje narzedzia/sprawdz_kontrast.py. */
:root[data-tryb="wieczorny"] {
  color-scheme: dark;
  --tlo: #211d1b;
  --papier: #322d2a;
  --papier-2: #423c38;
  --tekst: #ece3dc;
  --tekst-2: #d0c3ba;
  --linia: #4a423e;
  --ramka-pola: #8b7f78;
  --rz: #c9a08c;
  --rz-ciemne: #e0bba9;
  --rz-jasne: #4a3a33;
  --rz-gradient: linear-gradient(135deg, #b98f7c 0%, #a07a69 100%);
  --rz-przycisk: linear-gradient(135deg, #85604f 0%, #7a5647 100%);
  --przycisk-tekst: #fbf2ec;
  --zloto-blask: transparent;
  --pl: #8d8580;
  --pl-jasna: #3a3431;
  --pl-gradient: linear-gradient(135deg, #423c38 0%, #3a3431 100%);
  --morze: #93cbcb; --morze-jasne: #25393a;
  --uwaga: #f1cf7c; --uwaga-tlo: #3d3424; --zdrowie: #f3b3aa; --zdrowie-tlo: #43302d; --ok: #a8d8bd; --ok-tlo: #2b3a32;
  --cien: 0 1px 2px rgba(0, 0, 0, .25);
}
:root[data-tryb="wieczorny"] body { background: var(--tlo); }
:root[data-tryb="wieczorny"] .pasek, :root[data-tryb="wieczorny"] .pasek__menu { background: var(--tlo); }
:root[data-tryb="wieczorny"] .panel { background: var(--tlo); box-shadow: none; }
:root[data-tryb="wieczorny"] .plotno { background: var(--papier); }
:root[data-tryb="wieczorny"] .dzis:not(:empty), :root[data-tryb="wieczorny"] .ramka--zloto,
:root[data-tryb="wieczorny"] .nagroda--zdobyta, :root[data-tryb="wieczorny"] .zagadka-sekcja { background: var(--papier); border-color: var(--linia); }
:root[data-tryb="wieczorny"] .daily__krok, :root[data-tryb="wieczorny"] .wiersz, :root[data-tryb="wieczorny"] .sprobuj,
:root[data-tryb="wieczorny"] .gotowiec, :root[data-tryb="wieczorny"] .ty, :root[data-tryb="wieczorny"] .powiazania button,
:root[data-tryb="wieczorny"] .drabina li, :root[data-tryb="wieczorny"] .czip, :root[data-tryb="wieczorny"] .styl { background: var(--papier-2); }
:root[data-tryb="wieczorny"] .przycisk { box-shadow: none; text-shadow: none; border-color: transparent; }
:root[data-tryb="wieczorny"] .przycisk--platyna { background: var(--papier-2); color: var(--tekst); border-color: var(--ramka-pola); }
:root[data-tryb="wieczorny"] .marka__znak { box-shadow: none; color: var(--tlo); }
:root[data-tryb="wieczorny"] .znaczek { color: var(--tlo); }
:root[data-tryb="wieczorny"] .przelacznik button { color: var(--tekst-2); }
:root[data-tryb="wieczorny"] .przelacznik button[aria-pressed="true"] { background: var(--papier-2); color: var(--tekst); box-shadow: none; }
:root[data-tryb="wieczorny"] .etykieta-karty, :root[data-tryb="wieczorny"] .drabina li::before { color: var(--tekst); }
:root[data-tryb="wieczorny"] .wezel .kolo { fill: var(--papier-2); }
:root[data-tryb="wieczorny"] .wezel .podpis, :root[data-tryb="wieczorny"] .obszar-nazwa { stroke: rgba(50, 45, 42, .92); }
:root[data-tryb="wieczorny"] .wezel .numer, :root[data-tryb="wieczorny"] .obszar-nazwa { fill: var(--rz-ciemne); }
:root[data-tryb="wieczorny"] .wezel.uzywam .numer { fill: var(--tlo); }
:root[data-tryb="wieczorny"] .krawedz { stroke: #6a5f59; }
:root[data-tryb="wieczorny"] .narzedzia-mapy button, :root[data-tryb="wieczorny"] .legenda { background: var(--papier-2); color: var(--tekst); }
:root[data-tryb="wieczorny"] .l-nowa, :root[data-tryb="wieczorny"] .wiersz .kropka { background: var(--papier-2); }
:root[data-tryb="wieczorny"] textarea, :root[data-tryb="wieczorny"] .pole { background: var(--papier-2); }
:root[data-tryb="wieczorny"] .dymek-wiad { background: var(--papier-2); box-shadow: none; }
:root[data-tryb="wieczorny"] .czat { background: var(--papier); }
:root[data-tryb="wieczorny"] .karta-umiej--zdobyta { background: linear-gradient(160deg, #4a3a33, #3a3431); box-shadow: none; }
:root[data-tryb="wieczorny"] .wycieczka__okno { background: var(--papier); background-image: none; }
:root[data-tryb="wieczorny"] .dymek { background: var(--papier-2); color: var(--tekst); border: 1px solid var(--ramka-pola); }
:root[data-tryb="wieczorny"] .czat--wybor .dymek-wiad::before { background: var(--papier); }

/* Komunikat: zostaje, aż go zamkniesz */
.dymek { display: flex; align-items: center; gap: 10px; padding-right: 8px; }
.dymek[hidden] { display: none; }
.dymek__zamknij { border: 0; background: none; color: inherit; font-size: 22px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; flex: none; }
@media (max-width: 600px) { .dymek { bottom: calc(84px + env(safe-area-inset-bottom)); } } /* nad dolnym paskiem */

/* Mniej ruchu: wybór osoby w Mój salon → Ty, niezależnie od ustawienia systemu */
:root[data-ruch="mniej"] *, :root[data-ruch="mniej"] *::before, :root[data-ruch="mniej"] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }

/* Przełącznik Dzień | Wieczór w górnym pasku: łatwo dostępny i widoczny (Ania 02.11) */
.pasek__menu { margin-left: auto; }
.tryb { display: inline-flex; flex: none; padding: 3px; border-radius: 999px; border: 1px solid var(--ramka-pola); background: var(--papier); }
.tryb button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 999px;
  background: none; color: var(--tekst-2); font-size: 14px; font-weight: 600; cursor: pointer; }
.tryb button[aria-pressed="true"] { background: var(--rz-jasne); color: var(--rz-ciemne); }
.tryb svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .tryb button { justify-content: center; min-width: 44px; min-height: 44px; padding: 0; } .tryb__napis { display: none; } .tryb svg { width: 20px; height: 20px; } .marka { flex: 1; min-width: 0; } .marka__tekst { min-width: 0; max-width: none; } }

/* Logowanie (strona/logowanie.html): jedna karta na środku, duże pola i przyciski, działa w trybie dziennym i wieczornym */
.logowanie { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; gap: 14px; }
.logowanie__karta { width: 100%; max-width: 420px; background: var(--papier); border: 1px solid var(--linia); border-radius: var(--promien); padding: 26px 22px; box-shadow: var(--cien); }
.logowanie__marka { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 14px; }
.logowanie h1 { font-size: 26px; margin: 0 0 4px; }
.logowanie .pole { font-size: 17px; min-height: 52px; }
.logowanie .przycisk { margin-top: 12px; }
.logowanie__google { gap: 10px; }
.logowanie__kod { letter-spacing: .4em; font-size: 24px !important; text-align: center; font-variant-numeric: tabular-nums; }
.logowanie__albo { display: flex; align-items: center; gap: 10px; color: var(--tekst-2); font-size: 14px; margin: 18px 0 4px; }
.logowanie__albo::before, .logowanie__albo::after { content: ""; flex: 1; height: 1px; background: var(--linia); }
.logowanie__linki { text-align: center; font-size: 14px; color: var(--tekst-2); margin-top: 14px; }
.logowanie__salony { display: grid; gap: 4px; }
.logowanie__stopka { text-align: center; }

/* Role: karta spoza roli na mapie to opcja, nie standard (decyzja Ani 02.11) */
.wezel.opcja .kolo { stroke-dasharray: 3 4; }