/* Layout: karta ratownika. Alarmowy pasek z numerami na górze, przełącznik pory roku steruje całą treścią i kolorem akcentu. */
:root {
  --bg: #F4F6F4;
  --card: #FFFFFF;
  --fg: #15201D;
  --muted: #53605C;
  --line: #D3DAD5;
  --accent-s: #C93F0C;
  --accent-w: #1B5AA6;
  --on-accent: #FFFFFF;
  --alarm: #B3261E;
  --on-alarm: #FFFFFF;
  --ok: #1E7A45;
  --bad: #B3261E;
  --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1614; --card: #162220; --fg: #E7EEEB; --muted: #9AA8A3; --line: #2A3935;
    --accent-s: #FF8650; --accent-w: #72B4F5; --on-accent: #0E1614;
    --alarm: #FF6F63; --on-alarm: #1A0907; --ok: #5FD08D; --bad: #FF7B70;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1614; --card: #162220; --fg: #E7EEEB; --muted: #9AA8A3; --line: #2A3935;
  --accent-s: #FF8650; --accent-w: #72B4F5; --on-accent: #0E1614;
  --alarm: #FF6F63; --on-alarm: #1A0907; --ok: #5FD08D; --bad: #FF7B70;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  padding-block: 0 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.app { --accent: var(--accent-s); --soft: color-mix(in srgb, var(--accent) 11%, var(--bg)); }
.app[data-season="winter"] { --accent: var(--accent-w); }
.wrap { max-width: 1040px; margin: 0 auto; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; line-height: 1.08; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Season-specific visibility */
.app[data-season="winter"] [data-only="summer"],
.app[data-season="summer"] [data-only="winter"] { display: none; }

/* Header */
.top { padding-block: 40px 8px; display: grid; gap: 22px; }
.eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
h1 { font-size: clamp(2.4rem, 7.5vw, 4.6rem); font-weight: 800; letter-spacing: -.02em; max-width: 14ch; }
h1 span.on { color: var(--accent); }
.lead { max-width: 58ch; color: var(--muted); font-size: 1.08rem; }

.switch { display: flex; gap: 8px; flex-wrap: wrap; }
.switch button {
  font: 700 1rem/1 var(--font-display);
  padding: 14px 20px; min-height: 48px;
  border-radius: 10px; border: 2px solid var(--accent);
  background: transparent; color: var(--accent); cursor: pointer;
}
.switch button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* Emergency strip */
.sos { margin-top: 28px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.sos .main {
  grid-column: 1 / -1;
  background: var(--alarm); color: var(--on-alarm);
  border-radius: 14px; padding: 18px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.sos .main .num { font: 800 clamp(3.2rem, 12vw, 5rem)/1 var(--font-display); letter-spacing: -.02em; }
.sos .main p { max-width: 46ch; font-weight: 600; }
.sos .main small { display: block; font-weight: 400; opacity: .92; }
.num-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.num-card b { display: block; font: 600 1.35rem/1.2 var(--font-mono); }
.num-card span { color: var(--muted); font-size: .92rem; }

/* Sections */
section { margin-top: 56px; }
.sec-head { display: grid; gap: 8px; margin-bottom: 20px; }
.sec-head h2 { font-size: clamp(1.7rem, 4.6vw, 2.5rem); font-weight: 800; letter-spacing: -.01em; }
.sec-head p { color: var(--muted); max-width: 62ch; }

.three { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.q { background: var(--soft); border-radius: 14px; padding: 20px; }
.q h3 { font-size: 1.5rem; color: var(--accent); }
.q p { margin-top: 6px; }

.risks { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.risk { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; min-width: 0; }
.risk h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; }
.risk h3::before { content: ""; display: inline-block; width: 12px; height: 12px; background: var(--accent); border-radius: 2px; margin-right: 10px; transform: rotate(45deg); }
.risk ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.risk li::marker { color: var(--accent); }
.risk .if { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: .98rem; }
.risk .if b { color: var(--accent); }

/* 112 script */
.script { display: grid; gap: 10px; counter-reset: s; list-style: none; padding: 0; margin: 0; }
.script li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.script li::before { content: counter(s); font: 800 1.5rem/1 var(--font-display); color: var(--on-accent); background: var(--accent); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.script b { font-family: var(--font-display); font-size: 1.1rem; }
.script span { display: block; color: var(--muted); }

/* Checklist */
.check { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.check label { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; min-height: 48px; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.check input:checked + span { color: var(--muted); text-decoration: line-through; }
.progress { margin-top: 14px; font-family: var(--font-mono); font-size: .95rem; color: var(--muted); }

/* Quiz */
.quiz { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; max-width: 720px; }
.quiz .count { font-family: var(--font-mono); font-size: .9rem; color: var(--muted); }
.quiz h3 { font-size: 1.4rem; margin: 6px 0 16px; }
.opts { display: grid; gap: 8px; }
.opts button {
  text-align: left; font: 600 1rem/1.35 var(--font-body); color: var(--fg);
  background: var(--bg); border: 2px solid var(--line); border-radius: 10px; padding: 12px 14px; min-height: 48px; cursor: pointer;
}
.opts button:hover:not(:disabled) { border-color: var(--accent); }
.opts button.good { border-color: var(--ok); }
.opts button.bad { border-color: var(--bad); }
.opts button:disabled { cursor: default; opacity: 1; }
.fb { margin-top: 14px; min-height: 3em; }
.fb b.good { color: var(--ok); } .fb b.bad { color: var(--bad); }
.next { margin-top: 12px; font: 700 1rem/1 var(--font-display); padding: 13px 20px; min-height: 48px; border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); cursor: pointer; }

footer { margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem; max-width: 70ch; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }