/* SymPRM UI - wspolna warstwa wygladu dla modulow (triage, leki, dawki, przypadki, pals, als, rko).
   Ladowana jako OSTATNI arkusz; nie zmienia logiki ani klas - tylko wyglad.
   Kierunek: karta medyczna / oznakowanie sprzetu ratunkowego. Cieply grafit zamiast granatu,
   waskie naglowki (Barlow Condensed), liczby w monospace, plaska hierarchia zamiast ramek w ramkach. */

@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/BarlowCondensed-500-latin-ext.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/BarlowCondensed-500-latin.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;}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/BarlowCondensed-600-latin-ext.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/BarlowCondensed-600-latin.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;}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/BarlowCondensed-700-latin-ext.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/BarlowCondensed-700-latin.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 ---------- */
:root{
  color-scheme: light;
  --bg:#f2f0eb; --page:#f2f0eb; --surface:#fffefb; --surface-2:#f7f5f0;
  --ink:#16181b; --ink-2:#43484f; --muted:#666b72;
  --border:rgba(22,24,27,.12); --border-strong:rgba(22,24,27,.30);
  --good:#1d7a3e; --good-wash:rgba(29,122,62,.10); --bad:#b42318; --bad-wash:rgba(180,35,24,.08);
  --warn:#a35207; --warn-wash:rgba(163,82,7,.10);
  --shadow:none;
  --r:6px; --r-lg:8px;
  --display:"Barlow Condensed","IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --on-bad:#ffffff; --on-good:#ffffff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#111315; --page:#111315; --surface:#181b1e; --surface-2:#1e2225;
    --ink:#ecebe6; --ink-2:#bdbcb6; --muted:#8c8b86;
    --border:rgba(236,235,230,.10); --border-strong:rgba(236,235,230,.24);
    --good:#5ccf7e; --good-wash:rgba(92,207,126,.12); --bad:#f8776c; --bad-wash:rgba(248,119,108,.12);
    --warn:#f0a548; --warn-wash:rgba(240,165,72,.12);
    --on-bad:#2a0705; --on-good:#06210f;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#111315; --page:#111315; --surface:#181b1e; --surface-2:#1e2225;
  --ink:#ecebe6; --ink-2:#bdbcb6; --muted:#8c8b86;
  --border:rgba(236,235,230,.10); --border-strong:rgba(236,235,230,.24);
  --good:#5ccf7e; --good-wash:rgba(92,207,126,.12); --bad:#f8776c; --bad-wash:rgba(248,119,108,.12);
  --warn:#f0a548; --warn-wash:rgba(240,165,72,.12);
  --on-bad:#2a0705; --on-good:#06210f;
}

/* akcent kazdego modulu (jasny / ciemny) */
html[data-app="triage"]{--accent:#2b4fa6; --accent-ink:#fff; --accent-wash:rgba(43,79,166,.09);}
html[data-app="przypadki"]{--accent:#2b4fa6; --accent-ink:#fff; --accent-wash:rgba(43,79,166,.09);}
html[data-app="als"]{--accent:#1f4c9e; --accent-ink:#fff; --accent-wash:rgba(31,76,158,.09);}
html[data-app="pals"]{--accent:#b42318; --accent-ink:#fff; --accent-wash:rgba(180,35,24,.08);}
html[data-app="leki"]{--accent:#0c6b63; --accent-ink:#fff; --accent-wash:rgba(12,107,99,.09);}
html[data-app="dawki"]{--accent:#0e6a75; --accent-ink:#fff; --accent-wash:rgba(14,106,117,.09);}
html[data-app="rko"]{--accent:#0d6e57; --accent-ink:#fff; --accent-wash:rgba(13,110,87,.09);}
@media (prefers-color-scheme: dark){
  html[data-app="triage"]:not([data-theme="light"]), html[data-app="przypadki"]:not([data-theme="light"]){--accent:#8aa6f2; --accent-ink:#0d1526; --accent-wash:rgba(138,166,242,.13);}
  html[data-app="als"]:not([data-theme="light"]){--accent:#86a7f0; --accent-ink:#0b1426; --accent-wash:rgba(134,167,240,.13);}
  html[data-app="pals"]:not([data-theme="light"]){--accent:#f8776c; --accent-ink:#2a0805; --accent-wash:rgba(248,119,108,.13);}
  html[data-app="leki"]:not([data-theme="light"]){--accent:#3fcab9; --accent-ink:#04201c; --accent-wash:rgba(63,202,185,.13);}
  html[data-app="dawki"]:not([data-theme="light"]){--accent:#4cc6d4; --accent-ink:#04191c; --accent-wash:rgba(76,198,212,.13);}
  html[data-app="rko"]:not([data-theme="light"]){--accent:#43c99f; --accent-ink:#03201a; --accent-wash:rgba(67,201,159,.13);}
}

/* ---------- baza ---------- */
body{background:var(--bg); color:var(--ink); font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
#app{max-width:980px; padding-top:0;}
h1,h2,h3,.stencil{font-family:var(--display); font-weight:700; letter-spacing:.005em;}
h4{letter-spacing:0;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
::selection{background:var(--accent); color:var(--accent-ink);}
.tabular,.mono{font-variant-numeric:tabular-nums;}

/* ---------- pasek gorny: bez karty, z paskiem "oznakowania" ---------- */
.topbar{
  background:transparent; border:0; border-radius:0; box-shadow:none;
  padding:16px 0 14px; margin:0 0 22px; position:relative;
  border-bottom:1px solid var(--border-strong);
}

.brand{gap:12px;}
.brand-badge, .brand img{width:38px; height:38px; border-radius:var(--r); box-shadow:none;}
.brand-badge{background:transparent; padding:0;}
.brand-text h1, .brand-text b{font-family:var(--display); font-size:24px; font-weight:700; line-height:1; letter-spacing:.01em; text-transform:uppercase;}
.brand-text p, .brand-text small{font-size:12px; color:var(--muted); margin-top:3px; letter-spacing:.01em;}
.topbar-actions, .top-actions{gap:6px;}

/* ---------- przyciski ---------- */
.btn{border-radius:var(--r); min-height:40px; padding:9px 16px; font-weight:600; font-size:14px; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); box-shadow:none; transition:background .12s,border-color .12s;}
.btn:hover{border-color:var(--ink-2); background:var(--surface-2);}
.btn-primary, .btn.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.btn-primary:hover{filter:none; background:var(--accent); opacity:.92;}
.btn-ghost{background:transparent;}
.btn-sm{min-height:34px; padding:6px 12px; font-size:13px;}
.btn-support{border-radius:var(--r);}

/* ---------- panele: plaskie, bez cienia ---------- */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:none; padding:20px 22px;}
.panel .panel{border:0; padding:0; background:transparent;}
.stack{gap:18px;}

/* ---------- wprowadzenie (hero) - bez karty i bez sloganu nad naglowkiem ---------- */
.hero, .panel.hero{background:transparent; border:0; box-shadow:none; padding:4px 0 6px; gap:8px;}
.hero .eyebrow{display:none;}
.hero h2{font-size:clamp(28px,4vw,38px); line-height:1.05; text-transform:none; letter-spacing:0; font-weight:700;}
.lede{font-size:15.5px; line-height:1.55; color:var(--ink-2); max-width:64ch;}
.eyebrow{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}

/* ---------- etykiety sekcji: numerowane jak w karcie ---------- */
.panel{counter-reset:sec;}
.field-label{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.07em; color:var(--muted); display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.field-label::after{content:""; flex:1; height:1px; background:var(--border);}
.panel .field-label{counter-increment:sec;}
.panel .field-label::before{content:counter(sec,decimal-leading-zero); color:var(--accent); font-weight:700;}
.calc-field .field-label{counter-increment:none; display:block; font-family:var(--mono);}
.calc-field .field-label::before, .calc-field .field-label::after{content:none; display:none;}

/* ---------- wybor opcji: zwarte pozycje z widocznym zaznaczeniem ---------- */
.option-grid{gap:8px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.option-card, .mode{
  position:relative; border:1px solid var(--border-strong); border-radius:var(--r); background:var(--surface);
  padding:12px 14px 12px 40px; gap:3px; box-shadow:none; transition:border-color .12s, background .12s;
}
.option-card::before{
  content:""; position:absolute; left:14px; top:15px; width:14px; height:14px; border-radius:50%;
  border:1.5px solid var(--border-strong); background:var(--surface); box-sizing:border-box;
}
.option-card:hover, .mode:hover{border-color:var(--ink-2); background:var(--surface-2); transform:none;}
.option-card[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-wash); box-shadow:inset 3px 0 0 var(--accent);}
.option-card[aria-pressed="true"]::before{border:4px solid var(--accent); background:var(--surface);}
.option-card h4{font-size:15px; font-weight:650;}
.option-card p, .mode p{font-size:12.5px; color:var(--muted); line-height:1.4;}
/* karty-odnosniki bez stanu wyboru (np. lista algorytmow) */
.option-card.alg-card{padding-left:14px;}
.option-card.alg-card::before{display:none;}

/* ---------- zakladki: podkreslenie zamiast pigulek ---------- */
.tabs{gap:0; border-bottom:1px solid var(--border-strong); flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab-btn{border:0; border-radius:0; background:transparent; color:var(--muted); padding:11px 14px; font-weight:600; font-size:14px; border-bottom:3px solid transparent; margin-bottom:-1px; white-space:nowrap;}
.tab-btn:hover{color:var(--ink);}
.tab-btn[aria-selected="true"]{background:transparent; color:var(--ink); border-bottom-color:var(--accent);}
.main-tabs .tab-btn{flex:0 0 auto; min-height:44px;}

/* ---------- pasek postepu / gra ---------- */
.incident-bar, .gamebar{background:transparent; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:6px 0 10px; box-shadow:none;}
.progress-track{height:4px; border-radius:0; background:var(--border);}
.progress-fill{border-radius:0;}
.tag-card{border-radius:var(--r-lg); box-shadow:none; border:1px solid var(--border-strong);}
.tag-strip{height:3px; opacity:1; background:var(--accent);}

/* ---------- liczby i kafle wynikow ---------- */
.stat-tile, .stat, .box{border-radius:var(--r); box-shadow:none; background:var(--surface-2); border:1px solid var(--border);}
.stat-tile .value, .stat .v, .box b{font-family:var(--mono); font-weight:600;}
.stat-tile .label, .stat .l, .box span{font-family:var(--mono); letter-spacing:.06em;}

/* ---------- odpowiedzi, kafle, chipy ---------- */
.answer-btn, .tile, .ans{border-radius:var(--r); border-width:1px;}
.answer-btn:hover:not(:disabled), .tile:hover:not(:disabled){background:var(--surface-2); border-color:var(--ink-2);}
.chip{border-radius:var(--r); font-family:var(--mono); font-size:12px; letter-spacing:.02em; background:var(--surface); color:var(--ink-2); border:1px solid var(--border-strong); padding:6px 10px;}
.chip[aria-pressed="true"]{background:var(--accent-wash); color:var(--ink); border-color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent);}
.reveal{border-radius:var(--r-lg); border-width:1px; border-left-width:4px;}
.case-result, .q-result, .hist-item, .chg, .calc-card, .fb-box, .fb-dec, .prompt{border-radius:var(--r);}

/* ---------- moje moduly (pals / als / rko) ---------- */
.calc-card{box-shadow:none; border:1px solid var(--border); border-top-width:1px !important; border-left:4px solid var(--border-strong);}
.calc-card.c-shock{border-left-color:var(--bad);} .calc-card.c-drug{border-left-color:var(--accent);} .calc-card.c-air{border-left-color:var(--good);} .calc-card.c-other{border-left-color:var(--warn);}
.calc-card .val{font-size:26px;}
.calc-section{font-family:var(--mono); font-size:11.5px; letter-spacing:.07em; color:var(--muted); display:flex; align-items:center; gap:10px; margin-top:14px;}
.calc-section::after{content:""; flex:1; height:1px; background:var(--border);}
.calc-field select, .calc-field input, .search, .num{border-radius:var(--r); border-width:1px; background:var(--surface);}
.fb-box{border-width:1px; border-left-width:4px;}
.flow > .fb:not(:last-child)::after{background:var(--border-strong);}
#alg-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
#alg-list .alg-card h4{font-family:var(--display); font-size:19px; font-weight:600; text-transform:uppercase; letter-spacing:.01em;}
.timer-head, .run-head{border-radius:var(--r-lg); box-shadow:none;}
.t-huge, .t-big{letter-spacing:-.01em;}
.mega{border-radius:var(--r-lg); font-family:var(--display); font-size:26px; letter-spacing:.04em; text-transform:uppercase;}
.mega small{font-family:"IBM Plex Sans",sans-serif; text-transform:none; letter-spacing:0;}
.prompt{border-width:1px; border-left-width:4px;}
.mega-shock, .t-shock, .pause-bar{background:var(--bad); border-color:var(--bad); color:var(--on-bad);}
.mega-resume, .pause-bar.ok{background:var(--good); border-color:var(--good); color:var(--on-good);}
.mega-inline-shock{color:var(--bad); border-color:var(--bad);}
.t-rosc{color:var(--good); border-color:var(--good);}

/* ---------- przypadki / triage ---------- */
.vitals > div{border-radius:var(--r);}
.vitals dt{font-family:var(--mono);}
.drug-opt{border-radius:var(--r); border-width:1px;}

/* ---------- leki / dawki ---------- */
.modes{gap:8px;}
.mode{padding:14px 16px;}
.mode .ic{border-radius:var(--r);}
.mode h3{font-family:var(--display); font-size:20px; text-transform:uppercase; letter-spacing:.01em;}
.flash{border-radius:var(--r-lg); box-shadow:none;}
.modal{border-radius:var(--r-lg);}
.pop-panel, .updates-panel{border-radius:var(--r-lg); box-shadow:0 12px 32px -12px rgba(0,0,0,.35);}

/* ---------- blok wsparcia i inne aplikacje: spokojniej ---------- */
.suite{margin-top:34px;}
.suite-support{border-radius:var(--r-lg); box-shadow:none; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--support,#be123c);}
.suite-cta{border-radius:var(--r);}
.suite-title{font-family:var(--mono); font-size:11.5px; letter-spacing:.07em; color:var(--muted);}
.suite-app{border-radius:var(--r); box-shadow:none;}
.promo-symprm{border-radius:var(--r-lg); box-shadow:none; background:var(--surface); border:1px solid var(--border);}
.promo-symprm::before{display:none;}

/* ---------- stopka: krotsza, spokojna ---------- */
footer.note{font-size:12px; line-height:1.7; color:var(--muted); border-top:1px solid var(--border); margin-top:40px; padding-top:18px;}
.credit-kg{border:0; background:transparent; padding:0; margin-top:6px; box-shadow:none; font-size:12px;}
.credit-kg .credit-sub{display:none;}

/* ---------- strony prawne ---------- */
.legal h1, .legal h2{text-transform:none; font-family:"IBM Plex Sans",sans-serif; font-weight:700;}

@media (max-width:560px){
  body{padding-inline:14px;}
  .topbar{padding:12px 0 12px; margin-bottom:16px;}
  .brand-text h1, .brand-text b{font-size:21px;}
  .panel{padding:16px;}
  .hero h2{font-size:27px;}
  .option-grid{grid-template-columns:1fr;}
  .mega{font-size:22px;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important;} }