@font-face{
  font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("./fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("./fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ===== 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)}
/* Opisy wskazań w generatorze linku (tylko panel lekarza) — dłuższe zdania, więc
   dostają więcej powietrza niż meta „id · pytań · min”. */
.opt .opttxt small.opis{margin-top:6px; line-height:1.45; color:var(--fg)}
.opt .opttxt small.opis.kiedy{margin-top:3px; color:var(--muted)}
/* Kafelek z opisem jest wysoki, więc pole wyboru trzyma się góry, a nie środka. */
#lista .opt{align-items:flex-start}

/* ===== 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} }

/* ===== Panel pacjenta: Black & Emerald (TRYB_PANELU) =====
   `ui.js` sets data-tryb after the instrument is ready. Keeping this block
   scoped preserves the existing public, standalone and gabinet appearances. */
html[data-tryb="panel"]{
  color-scheme:dark;
  --bg:#040705; --card:#09100c; --ink:#f0fdf4; --muted:#9dc4ab; --soft:#d1fae5;
  --line:rgba(16,185,129,.16); --control-line:#49715d;
  --accent:#10b981; --accent-d:#34d399; --accent-tint:#064e3b;
  --danger:#f87171; --danger-tint:rgba(239,68,68,.12); --danger-ink:#fecaca;
  --disabled-bg:#24352b; --disabled-ink:#9dc4ab;
  --track:rgba(255,255,255,.08); --num-bg:rgba(0,0,0,.4); --safe-bg:rgba(16,185,129,.08);
  --on-accent:#040705;
}
html[data-tryb="panel"] body{
  background-color:var(--bg); color:var(--ink);
  font-family:"Plus Jakarta Sans",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background-image:radial-gradient(circle at 50% 0%,rgba(16,185,129,.12),transparent 60%),
                   radial-gradient(circle at 100% 100%,rgba(6,78,59,.15),transparent 50%);
  background-attachment:fixed;
}
html[data-tryb="panel"] .app{width:100%; max-width:680px; padding:24px 20px 40px}
@media(max-width:560px){ html[data-tryb="panel"] .app{padding:24px 16px 40px} }
html[data-tryb="panel"] h1{font-weight:800; letter-spacing:-.02em}
html[data-tryb="panel"] .card{
  background:var(--card); border-color:var(--line); border-radius:14px;
}
html[data-tryb="panel"] .q-name{color:var(--accent-d)}
html[data-tryb="panel"] .send-status.ok{color:var(--accent-d)}
html[data-tryb="panel"] .safe{background:var(--safe-bg); color:var(--muted)}
html[data-tryb="panel"] .safe::before{color:var(--accent)}
html[data-tryb="panel"] .safe a{color:var(--accent-d)}
html[data-tryb="panel"] .progress-track{background:var(--track)}
html[data-tryb="panel"] .progress-fill{background:linear-gradient(90deg,#059669,var(--accent))}

/* Duże kafelki pozostają jednym przyciskiem radiowym generowanym przez silnik. */
html[data-tryb="panel"] .opts{gap:12px}
html[data-tryb="panel"] .opt{
  min-height:64px; padding:14px 16px; background:#0f1a13; border:1px solid var(--line);
  border-radius:14px; color:var(--ink); transition:background .15s,border-color .15s,transform .15s;
}
html[data-tryb="panel"] .opt:hover{background:#16271c; border-color:rgba(16,185,129,.4)}
html[data-tryb="panel"] .opt.selected{background:var(--accent-tint); border-color:var(--accent)}
html[data-tryb="panel"] .opt .optnum{background:var(--num-bg); color:var(--accent-d); border:1px solid var(--line)}
html[data-tryb="panel"] .opt.selected .optnum{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
html[data-tryb="panel"] .opt.mid .opttxt{color:var(--muted)}
html[data-tryb="panel"] .opt .opttxt small{color:var(--muted)}
html[data-tryb="panel"] .sexbtn.selected{background:var(--accent-tint); border-color:var(--accent); color:var(--accent-d)}

html[data-tryb="panel"] .field input,
html[data-tryb="panel"] .field textarea,
html[data-tryb="panel"] #pinBox input,
html[data-tryb="panel"] .doc-grid input{
  background:var(--card); color:var(--ink); border-color:var(--control-line);
}
html[data-tryb="panel"] input::placeholder,
html[data-tryb="panel"] textarea::placeholder{color:var(--muted)}
html[data-tryb="panel"] input[aria-invalid="true"]{border-color:var(--danger); box-shadow:0 0 0 2px rgba(248,113,113,.18)}

html[data-tryb="panel"] .btn{background:var(--card); border:1px solid var(--control-line); color:var(--ink); border-radius:999px}
html[data-tryb="panel"] .btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
html[data-tryb="panel"] .btn.primary:disabled{background:var(--disabled-bg); border-color:var(--disabled-bg); color:var(--disabled-ink); box-shadow:none; transform:none}
html[data-tryb="panel"] .btn:disabled,
html[data-tryb="panel"] .opt:disabled{background:var(--disabled-bg); border-color:var(--disabled-bg); color:var(--disabled-ink); cursor:not-allowed; opacity:1; box-shadow:none; transform:none}
html[data-tryb="panel"] .btn.ghost{color:var(--accent-d)}
html[data-tryb="panel"] .btn.ghost:hover{background:var(--accent-tint)}
html[data-tryb="panel"] .btn:focus-visible,
html[data-tryb="panel"] .opt:focus-visible,
html[data-tryb="panel"] .field input:focus-visible,
html[data-tryb="panel"] .field textarea:focus-visible,
html[data-tryb="panel"] #pinBox input:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

html[data-tryb="panel"] .score-box{background:var(--accent-tint)}
html[data-tryb="panel"] .score-num{color:var(--accent-d)}
html[data-tryb="panel"] .send-status.err,
html[data-tryb="panel"] #pinErr{color:#fca5a5}
html[data-tryb="panel"] .idle-warn{background:var(--danger-tint); border-color:var(--danger); color:var(--danger-ink)}
html[data-tryb="panel"] .flag{background:var(--danger-tint); border-color:var(--danger); color:var(--danger-ink)}

@media print{
  html[data-tryb="panel"] body{background:#fff; color:#000}
  html[data-tryb="panel"] #printArea{color:#000}
}

/* ===== 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}
}