/* ===== Tokeny: jeden kolor akcentowy, wysoki kontrast (WCAG AA), zero rozpraszaczy =====
   Wszystkie kolory formularza są tokenami — nie wpisuj hexów wprost w regułach.
   Plik wspólny dla wszystkich kwestionariuszy; nic tu nie jest specyficzne dla MADRS
   poza nazwami tokenów nasilenia, które i tak są ogólne (0–3). */
:root{
  /* powierzchnie i tekst */
  --bg:#eef2f7; --card:#ffffff; --ink:#141d2e; --muted:#54627a; --soft:#41506a;
  --line:#ccd6e4;                                  /* linie działowe i krawędź karty — nie są kontrolkami */
  --control-line:#78859b;                          /* obramowania kontrolek: 3,73:1 (WCAG 1.4.11 ≥3:1) */
  /* akcent */
  --accent:#1d4ed8; --accent-d:#1e3a8a; --accent-tint:#e6edfb;
  /* stany */
  --danger:#b3121f; --danger-tint:#fdecec; --danger-ink:#7f1420;
  --disabled-bg:#dde5f3; --disabled-ink:#4a5a78;   /* 5,48:1 — czytelne mimo wyłączenia */
  /* skala nasilenia — każdy kolor ≥4,5:1 z białym tekstem (WCAG AA) */
  --sev-0:#15803d;   /* brak / remisja   5,02:1 */
  --sev-1:#4d7c0f;   /* łagodna          4,99:1 */
  --sev-2:#b45309;   /* umiarkowana      5,02:1 */
  --sev-3:#b3121f;   /* ciężka           6,95:1 */
  /* drobne powierzchnie */
  --track:#dbe3ee; --num-bg:#eef2f8; --safe-bg:#e7edf6;
  --on-accent:#ffffff;                             /* tekst na powierzchni akcentowej */
  /* skala promieni — cztery stopnie, bez wartości ad hoc */
  --r-1:8px; --r-2:10px; --r-3:12px; --r-4:16px; --r-pill:999px;
  /* warstwy */
  --z-overlay:100;
}
*{box-sizing:border-box}
/* Atrybut hidden musi zawsze wygrywać z regułami display o wyższej specyficzności
   (np. #pinBox{display:flex}). Bez tego element z [hidden] pozostaje widoczny. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}
.app{max-width:760px; margin:0 auto; padding:22px 18px 40px; min-height:100%}
.screen{animation:fade .18s ease}                 /* subtelne przejście między ekranami */
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* Redukcja ruchu obejmuje WSZYSTKIE animacje i przejścia (także pasek postępu i karty). */
@media (prefers-reduced-motion:reduce){
  .screen{animation:none}
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

h1{font-size:26px; margin:0 0 10px; line-height:1.25}
p{margin:0 0 12px}
.muted{color:var(--muted)}
.lead{font-size:18px}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-4); padding:22px}
input::placeholder{color:var(--muted); opacity:1}   /* domyślny placeholder UA bywa poniżej 4,5:1 */

/* ===== Ekran startowy ===== */
.start-inner{max-width:600px; margin:6vh auto 0}

/* ===== Kod pacjenta i notatka — te same krawędzie co reszta kontrolek ===== */
.field{margin:8px 0 16px}
.field input, .field textarea{
  width:100%; font-size:17px; color:var(--ink); background:var(--card);
  border:2px solid var(--control-line); border-radius:var(--r-2); font-family:inherit;
}
.field input{min-height:52px; padding:0 14px}
.field textarea{padding:10px 14px; line-height:1.45; resize:vertical}
.field input:focus-visible, .field textarea:focus-visible{outline:3px solid var(--accent-d); outline-offset:2px}
.send-status{margin-top:12px; font-size:15px; font-weight:700; color:var(--soft)}
.send-status.ok{color:var(--sev-0)}
.send-status.err{color:var(--danger)}

/* ===== Wybór płci (tylko kwestionariusze odmieniające pytania przez rodzaj) ===== */
.sexsel{margin:8px 0 16px}
.sexlabel{font-size:15px; color:var(--soft); font-weight:700; margin:0 0 8px}
.sexbtns{display:flex; gap:12px}
.sexbtn{flex:1 1 0; min-width:0}   /* min-width:0 → oba przyciski zawsze równej szerokości */
.sexbtn.selected{border-color:var(--accent); background:var(--accent-tint); color:var(--accent-d)}

/* ===== Pasek postępu ===== */
.progress-wrap{margin:0 0 22px}
.progress-top{font-size:14px; color:var(--muted); margin-bottom:8px}
.progress-track{height:8px; background:var(--track); border-radius:var(--r-pill); overflow:hidden}
/* skalowanie zamiast animowania width — transform nie wymusza przeliczeń layoutu.
   Bez własnego promienia: skalowanie zdeformowałoby go, a i tak przycina go tor. */
.progress-fill{height:100%; width:100%; background:var(--accent);
               transform:scaleX(0); transform-origin:left center; transition:transform .25s ease}

/* ===== Pytanie ===== */
.q-name{font-size:15px; font-weight:700; color:var(--accent-d); margin:0 0 8px}
.q-text{font-size:clamp(20px,2.6vw,26px); font-weight:700; line-height:1.3; margin:0 0 6px}
.q-hint{color:var(--muted); font-size:15px; margin:0 0 18px}

/* Strefa informacyjna, nie karta w karcie: samo tło + ikona wiodąca, bez ramki. */
.safe{position:relative; background:var(--safe-bg); border-radius:var(--r-2);
      padding:14px 16px 14px 48px; font-size:15px; color:var(--soft); margin:0 0 18px}
.safe::before{content:"ℹ"; position:absolute; left:16px; top:12px;
              font-size:20px; line-height:1.2; color:var(--accent-d)}
.safe b{color:var(--ink)}
/* Domyślny niebieski link przeglądarki na tle .safe schodzi poniżej AA — wymuszamy token. */
.safe a{color:var(--accent-d); text-underline-offset:2px}
.safe a:focus-visible{outline:3px solid var(--accent-d); outline-offset:2px}

/* ===== Karty odpowiedzi ===== */
.opts{display:flex; flex-direction:column; gap:10px}
.opt{
  display:flex; align-items:center; gap:14px; width:100%; min-height:60px;
  text-align:left; padding:12px 16px; font-size:18px; color:var(--ink);
  background:var(--card); border:2px solid var(--control-line); border-radius:var(--r-3);
  cursor:pointer; transition:border-color .12s, background .12s; font-family:inherit;
}
.opt:hover{border-color:var(--accent)}
.opt .optnum{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-weight:800; font-size:17px;
  background:var(--num-bg); color:var(--soft);
}
.opt .opttxt{font-weight:500; line-height:1.35}
.opt.mid .opttxt{font-style:italic; color:var(--soft)}
.opt.selected{border-color:var(--accent); background:var(--accent-tint)}
.opt.selected .optnum{background:var(--accent); color:var(--on-accent)}
.opt:focus-visible{outline:3px solid var(--accent-d); outline-offset:2px}
/* Kafelek na stronie baterii to odnośnik, a nie przycisk — reszta wyglądu bez zmian. */
a.opt{text-decoration:none}
.opt .opttxt small{display:block; margin-top:2px; font-size:14px; font-weight:400; color:var(--muted)}

/* ===== Nawigacja ===== */
.nav{display:flex; gap:12px; margin-top:22px}
.keyhint{margin-top:16px; font-size:13px; color:var(--muted)}
.keyhint kbd{background:var(--card);border:1px solid var(--line);border-radius:var(--r-1);padding:1px 6px;font-size:12px}

button{font-family:inherit}
/* Jeden komponent przycisku, trzy rozmiary i trzy wagi — bez stylów inline. */
.btn{
  min-height:56px; padding:0 22px; font-size:18px; font-weight:700; border-radius:var(--r-3);
  border:2px solid var(--control-line); background:var(--card); color:var(--ink); cursor:pointer;
}
.btn.md{min-height:52px; font-size:17px; padding:0 18px}
.btn.sm{min-height:44px; font-size:16px; padding:0 14px}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent); flex:1}
.btn.primary:disabled{background:var(--disabled-bg); border-color:var(--disabled-bg);
                      color:var(--disabled-ink); cursor:not-allowed}
/* Akcja trzeciorzędna — bez ramki i wypełnienia, żeby NIE wyglądała jak .btn na białej karcie. */
.btn.ghost{background:transparent; border-color:transparent; color:var(--accent-d);
           text-decoration:underline; text-underline-offset:3px}
.btn.ghost:hover{background:var(--accent-tint); text-decoration:none}
.btn:focus-visible{outline:3px solid var(--accent-d); outline-offset:2px}
.btn.big{width:100%}

/* Ostrzeżenie o bezczynności — jedyna warstwa nakładkowa w formularzu. */
.idle-warn{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-overlay);
  display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap;
  background:var(--danger-tint); border-top:3px solid var(--danger); color:var(--danger-ink);
  padding:14px 18px; font-size:16px; font-weight:600;
}
.idle-warn b{color:var(--danger); font-variant-numeric:tabular-nums}

/* ===== Ekran końcowy pacjenta ===== */
/* Tonowana strefa wyróżnienia, nie druga karta w karcie (bez własnej ramki). */
.score-box{background:var(--accent-tint); border-radius:var(--r-4); padding:24px; text-align:center; margin:18px 0}
.score-num{font-size:44px; font-weight:800; color:var(--accent-d); line-height:1}
.score-num small{font-size:20px; color:var(--muted); font-weight:700}
.done-actions{margin-top:26px; border-top:1px solid var(--line); padding-top:18px}
#pinBox{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
#pinBox input{min-height:52px; font-size:18px; padding:0 14px; border:2px solid var(--control-line); border-radius:var(--r-2); width:140px; letter-spacing:.3em}
#pinErr{color:var(--danger); font-weight:700; font-size:14px}

/* ===== Panel lekarza ===== */
.doc-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.doc-head h1{margin:0}
.doc-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px}
.doc-grid label{display:block; font-size:13px; color:var(--muted); margin-bottom:5px}
.doc-grid input{width:100%; min-height:48px; font-size:16px; padding:0 12px; border:2px solid var(--control-line); border-radius:var(--r-2)}
.doc-grid .ro{min-height:48px; display:flex; align-items:center; font-size:16px; font-weight:600}
.doc-grid .span2{grid-column:1 / -1}

/* Etykieta sekcji zwykłą wielkością liter — uppercase z rozstrzeleniem to ten sam wzorzec,
   który usunęliśmy jako .kicker. */
.sec-title{font-size:15px; font-weight:800; color:var(--ink); margin:24px 0 10px}
.opts.compact .opt{min-height:52px; font-size:16px; padding:10px 14px}
.opts.compact .opt .optnum{width:30px;height:30px;font-size:15px}

table.res{width:100%; border-collapse:collapse; font-size:15px}
table.res th, table.res td{border-bottom:1px solid var(--line); padding:9px 8px; text-align:left; vertical-align:top}
table.res th{font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
table.res td.c{text-align:center; font-weight:700; width:64px}
table.res tr.rowflag td{background:var(--danger-tint); color:var(--danger); font-weight:700}
.tag{display:inline-block; font-size:11px; font-weight:700; color:var(--accent-d); background:var(--accent-tint); border-radius:var(--r-1); padding:1px 7px; margin-left:6px; vertical-align:middle}

/* Grupa oddzielona linią zamiast zagnieżdżonego pudełka. */
.totals{margin-top:18px; border-top:2px solid var(--line); padding-top:14px}
.tline{display:flex; justify-content:space-between; align-items:baseline; padding:4px 0}
.tline.big b{font-size:26px}
.tline.muted b{color:var(--muted); font-weight:600; font-size:15px}
.interp{margin-top:8px; padding:8px 12px; border-radius:var(--r-2); font-weight:800; text-align:center; color:var(--on-accent)}
.interp.i0{background:var(--sev-0)} .interp.i1{background:var(--sev-1)}
.interp.i2{background:var(--sev-2)} .interp.i3{background:var(--sev-3)}

/* Jedyne celowe pudełko w panelu — alert bezpieczeństwa ma się wyróżniać. */
.flag{background:var(--danger-tint); border:2px solid var(--danger); color:var(--danger-ink); border-radius:var(--r-3); padding:14px 16px; margin-top:16px; font-size:15px}
.flag b{color:var(--danger)}

.copyr{margin-top:20px; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--muted)}
/* Drobiazgi, które wcześniej były stylami inline. */
.score-label{font-size:15px; margin-bottom:6px}
#pinBox label{font-size:14px; color:var(--muted)}
#item1Desc{font-size:14.5px}
#screen-doctor .nav{margin-top:20px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden;
         clip:rect(0 0 0 0); white-space:nowrap}

@media(max-width:560px){ .doc-grid{grid-template-columns:1fr} .nav{flex-direction:column-reverse} }

/* ===== Arkusz wydruku (czarno-biały, zwarty, 1× A4) ===== */
#printArea{display:none}
@media print{
  body{background:#fff}
  .app{display:none !important}
  #printArea{display:block !important; color:#000; font-size:12px; line-height:1.45}
  #printArea h2{font-size:15px; margin:0 0 10px}
  .pmeta{display:flex; flex-wrap:wrap; gap:10px 28px; margin:2px 0 8px}
  .pflag{border:2px solid #000; padding:6px 8px; font-weight:bold; margin:6px 0}
  table.ptab{width:100%; border-collapse:collapse; margin:6px 0}
  table.ptab th, table.ptab td{border:1px solid #000; padding:4px 7px; text-align:left}
  table.ptab td.c, table.ptab th.c{text-align:center}
  .ptot{margin-top:8px; line-height:1.7}
  .pnote{margin-top:12px; font-size:10px; color:#000}
  @page{size:A4; margin:14mm}
}