/* narzedzia.css — kalkulatory i testy Edukacji (2026-07-17). Ladowane tylko na
   stronach narzedzi (functions.php). Tokeny v5 z theme.css. */

/* hero: tekst + abstrakcyjny panel fal (Michal 17.07 wieczor: prawa strona hero
   byla pusta; grafika abstrakcyjna, brandowe fale + ikona narzedzia) */
.phero-nrz{padding-bottom:16px}
.phero-nrz .wrap{grid-template-columns:1.08fr .92fr;align-items:center}
.phero-nrz .lead{max-width:62ch}
.nrz-art{position:relative;aspect-ratio:13/9;max-width:560px;width:100%;margin:0 auto;
  border-radius:26px 96px 26px 26px;overflow:hidden;
  background:linear-gradient(150deg,var(--wash,#eef6fb) 10%,var(--wash2,#ddeef8) 60%,#cfe7f6);
  box-shadow:0 18px 44px rgba(35,32,72,.10)}
.nrz-art > svg{position:absolute;inset:0;width:100%;height:100%}
.nrz-art-ico{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;
  width:92px;height:92px;border-radius:50%;background:#fff;color:var(--deep);
  box-shadow:0 16px 36px rgba(35,32,72,.16)}
.nrz-art-ico svg.i{width:42px;height:42px}
@media(max-width:900px){.phero-nrz .wrap{grid-template-columns:1fr}.nrz-art{display:none}}

/* sekcja z formularzem tuz pod hero (mala przerwa — uwaga Michala 17.07 wieczor) */
.nrz-sec{padding-top:20px}

/* formularze narzedzi: pelna szerokosc kontenera (bylo max-width:960px = dziura z prawej) */
.nrz-form,.quiz{background:#fff;border:1px solid var(--line,#e4e9ef);border-radius:calc(var(--r) + 6px);
  padding:clamp(22px,4vw,40px)}
.nrz-pola{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px 22px}
.pole label{display:block;font-family:Jost,sans-serif;font-weight:500;font-size:.92rem;color:var(--deep);margin-bottom:7px}
/* plec jako fieldset+legend (nazwana grupa radiowa dla czytnikow — finding Codexa 17.07) */
fieldset.pole-plec{border:0;padding:0;margin:0;min-width:0}
.pole-plec legend{font-family:Jost,sans-serif;font-weight:500;font-size:.92rem;color:var(--deep);margin-bottom:7px;padding:0}
.pole input[type=number],.pole select{width:100%;padding:12px 14px;border:1px solid var(--line,#dbe4ec);
  border-radius:12px;font-size:1rem;background-color:var(--paper,#fbfdfe);color:var(--ink)}
.pole input:focus,.pole select:focus{outline:2px solid var(--fala,#53c3e9);outline-offset:1px}
/* selecty jak reszta pol, nie natywny pasek systemowy (Michal 17.07 wieczor #2:
   "pasek wyboru odstaje od reszty") — wlasny chevron, bez appearance */
.pole select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232048' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px;padding-right:42px}
.pole-zlaczone select{padding-right:34px;background-position:right 10px center}
/* spinnery pol liczbowych zaslanialy placeholdery i gryzly sie z zaokraglonym stylem */
.pole input[type=number]{-moz-appearance:textfield;appearance:textfield}
.pole input[type=number]::-webkit-outer-spin-button,
.pole input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pole-szeroki{grid-column:1/-1}
.pole-radio{display:flex;gap:10px}
.pole-radio label{flex:1;margin:0}
.pole-radio input{position:absolute;opacity:0}
.pole-radio span{display:block;text-align:center;padding:12px 10px;border:1px solid var(--line,#dbe4ec);
  border-radius:12px;cursor:pointer;font-weight:600;color:var(--ink)}
.pole-radio input:checked + span{background:var(--deep);color:#fff;border-color:var(--deep)}
.pole-radio input:focus-visible + span{outline:2px solid var(--fala,#53c3e9);outline-offset:2px}
.pole-zlaczone{display:flex;gap:8px}
.pole-zlaczone input{flex:1}
.pole-zlaczone select{width:auto}

/* quiz */
.quiz-intro{font-size:1.05rem;color:var(--ink);margin:0 0 18px}
.quiz-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.quiz-pyt fieldset,.quiz-dodatkowe fieldset{border:0;padding:16px 0;margin:0;border-top:1px solid var(--line,#edf1f5)}
.quiz-pyt legend,.quiz-dodatkowe legend{font-weight:600;color:var(--ink);line-height:1.45;margin-bottom:10px;max-width:70ch}
.quiz-nr{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--wash,#eef6fb);color:var(--deep);font-family:Jost,sans-serif;font-size:.85rem;margin-right:6px}
.quiz-opcje{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.quiz-opcje label{position:relative}
.quiz-opcje input{position:absolute;opacity:0}
.quiz-opcje span{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;
  border:1px solid var(--line,#dbe4ec);border-radius:10px;font-size:.9rem;cursor:pointer;color:var(--ink)}
.quiz-opcje span b{opacity:.45;font-family:Jost,sans-serif}
.quiz-opcje input:checked + span{background:var(--deep);color:#fff;border-color:var(--deep)}
.quiz-opcje input:checked + span b{opacity:.8}
.quiz-opcje input:focus-visible + span{outline:2px solid var(--fala,#53c3e9);outline-offset:2px}
.quiz-dodatkowe{margin-top:6px}
.quiz-akcje{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* wynik */
.quiz-wynik{margin-top:22px;padding:20px 22px;border-radius:14px;border:1px solid var(--line,#dbe4ec)}
.quiz-wynik.wynik-ok{background:var(--wash,#eef6fb);border-color:transparent}
.quiz-wynik.wynik-uwaga{background:#fdf6ec;border-color:#f0dcbd}
.quiz-wynik.wynik-err{background:#fdefef;border-color:#f2caca}
.quiz-wynik h3{margin:.2em 0 .3em;color:var(--deep)}
.wynik-liczba{font-size:1.15rem;color:var(--deep);margin:0 0 6px}
.wynik-liczba b{font-size:1.6rem}
.wynik-sub{color:var(--muted);font-size:.92rem}
.wynik-qx{margin-top:10px;font-size:.95rem}
.wynik-lista{margin:10px 0;padding-left:20px}
.wynik-lista li{margin:4px 0}
.wynik-kafle{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:8px}
.wynik-kafle > div{background:#fff;border:1px solid var(--line,#e4e9ef);border-radius:12px;padding:14px 16px}
.wynik-kafle span{display:block;font-family:Jost,sans-serif;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.wynik-kafle b{display:block;font-size:1.35rem;color:var(--deep);margin:2px 0}
.wynik-kafle i{font-style:normal;font-size:.85rem;color:var(--muted)}

/* kryzys (PHQ-9 pyt. 9) */
.quiz-kryzys{margin-top:16px;padding:20px 22px;border-radius:14px;background:var(--deep);color:#fff}
.quiz-kryzys h3{color:#fff;margin:0 0 .3em}
.quiz-kryzys p{margin:0;color:rgba(255,255,255,.92)}
.quiz-nota{margin-top:18px;font-size:.85rem;color:var(--muted);line-height:1.55}

/* karty "pozostale narzedzia" (uzywane tez na hubie /edukacja/) */
.nrz-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media(max-width:1100px){.nrz-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.nrz-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.nrz-grid{grid-template-columns:1fr}}
.nrz-karta{display:grid;gap:6px;background:#fff;border:1px solid var(--line,#e4e9ef);
  border-radius:calc(var(--r) + 4px);padding:22px;text-decoration:none;color:var(--ink);
  transition:transform .18s,box-shadow .18s}
.nrz-karta:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(30,60,90,.1)}
.nrz-karta h3{color:var(--deep);font-size:1.06rem;margin:2px 0}
.nrz-karta p{font-size:.9rem;color:var(--muted);margin:0}
.nrz-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:var(--wash,#eef6fb);color:var(--deep)}
.nrz-ico svg.i{width:22px;height:22px}
.nrz-karta .go{margin-top:6px;font-weight:600;color:var(--deep);font-size:.9rem}

/* podpowiedź pod polem kalkulatora (np. w jakiej jednostce laboratorium podaje wynik) */
.nrz-form .pole-hint{margin:6px 0 0;font-size:.85rem;color:var(--muted);line-height:1.4}