/* Radar — ćwiczenia (bez oceny). Samodzielny arkusz: działa bez sieci (service worker). */
/* v7: osobne podzbiory latin + latin-ext (wcześniej plik latin-ext bez liter a–z był pierwszy → tekst w czcionce zastępczej) */
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/atkinson-hyperlegible-latin-ext-400.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/atkinson-hyperlegible-latin-400.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: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/atkinson-hyperlegible-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/atkinson-hyperlegible-latin-700.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; }
:root {
  --bg: #fcf8f2; --surface: #fff; --surface-subtle: #fbf5ed; --ink: #18120c; --ink-body: #261c14; --ink-muted: #4e3c2c;
  --accent: #ff6200; --accent-dark: #b83e00; --accent-soft: #fff3ec; --focus: #004fb0; --card-border: #e2d2be;
  --risk: #b42318; --risk-bg: #fef2f2; --risk-border: #fca5a5; --warn: #8a4500; --warn-bg: #fffbeb; --warn-border: #fcd34d;
  --ok: #0f6b33; --ok-bg: #f0fdf4; --ok-border: #86efac; --radius: 18px; --base: 118.75%; /* v5: % — szanuje systemowy rozmiar tekstu */
}
html { font-size: var(--base); -webkit-text-size-adjust: 100%; }
html[data-font-size="large"] { --base: 137.5%; }
html[data-font-size="xlarge"] { --base: 156.25%; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink-body); font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
a { color: #8a3200; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { font-family: 'Atkinson Hyperlegible', sans-serif; color: var(--ink); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.1rem; }
p { margin: 0 0 .8em; }
.cw-header { background: #fff; border-bottom: 1px solid var(--card-border); position: sticky; top: 0; z-index: 10; }
.cw-header-in { max-width: 860px; margin: 0 auto; padding: 6px 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cw-brand { font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-weight: 700; color: #c24a00; text-decoration: none; font-size: 1.15rem; display: inline-flex; align-items: center; min-height: 48px; }
.cw-brand small { color: var(--ink-muted); font-family: 'Atkinson Hyperlegible', sans-serif; font-weight: 700; margin-left: 6px; font-size: .85rem; }
.cw-sizes { margin-left: auto; display: flex; gap: 4px; }
.cw-sizes button { font: inherit; font-weight: 700; min-width: 48px; min-height: 48px; border: 2px solid var(--card-border); background: #fff; border-radius: 10px; color: var(--ink); cursor: pointer; }
.cw-sizes button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.cw-main { max-width: 860px; margin: 0 auto; padding: 16px 12px 24px; }
.card { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 18px 16px; margin: 0 0 16px; box-shadow: 0 2px 4px rgba(43,33,23,.04), 0 10px 24px rgba(43,33,23,.07); }
.lead { font-size: 1.08rem; }
.note { background: var(--warn-bg); border: 2px solid var(--warn-border); border-radius: 12px; padding: 10px 14px; font-weight: 700; color: #5c2e00; }
.note-ok { background: var(--ok-bg); border-color: var(--ok-border); color: #0b4d25; }
.btn { font: inherit; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 10px 20px; border-radius: 14px; border: 2px solid var(--ink); background: #fff; color: var(--ink); text-decoration: none; cursor: pointer; text-align: center; line-height: 1.25; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-block { display: flex; width: 100%; }
.btn[hidden] { display: none !important; }
.stack { display: grid; gap: 12px; }
.hub-btn { display: grid; grid-template-columns: 56px 1fr; gap: 4px 14px; align-items: center; text-align: left; padding: 14px 16px; min-height: 84px; border-radius: 16px; border: 2px solid var(--card-border); background: #fff; color: var(--ink); text-decoration: none; }
.hub-btn:hover { border-color: var(--accent); }
.hub-btn .ico { grid-row: span 2; font-size: 2rem; width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); }
.hub-btn strong { font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-size: 1.1rem; }
.hub-btn span.d { color: var(--ink-muted); font-weight: 600; }
.tag { display: inline-block; font-weight: 800; letter-spacing: .03em; font-size: max(.85rem, 18px); padding: 2px 10px; border-radius: 8px; background: #6b2f00; color: #fff; margin: 0 0 8px; }
.tag-ok { background: var(--ok); }
.progress { font-weight: 800; color: var(--ink-muted); margin: 0 0 6px; }
/* Makiety */
.mock { border: 2px solid #d8c7b2; border-radius: 22px; background: #fff; padding: 12px; margin: 0 0 14px; position: relative; }
.mock-phone { max-width: 420px; margin-left: auto; margin-right: auto; background: #f4f1ec; }
.mock-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.mock-av { width: 44px; height: 44px; border-radius: 50%; background: #c9b8a3; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex: 0 0 44px; }
.mock-from { font-weight: 800; color: var(--ink); }
.mock-sub { color: var(--ink-muted); font-size: max(.85rem, 18px); }
.bubble { background: #fff; border-radius: 16px 16px 16px 4px; padding: 10px 14px; border: 1px solid #e3d8ca; font-size: max(1rem, 19px); }
.bubble + .bubble { margin-top: 8px; }
.mock-link { color: #0b57d0; text-decoration: underline; word-break: break-all; }
.mock-mail-row { border-bottom: 1px solid #eee; padding: 4px 0; }
.mock-mail-row b { color: var(--ink-muted); }
.mock-web-bar { background: #eee; border-radius: 10px; padding: 6px 10px; font-family: monospace; font-size: max(.9rem, 17px); margin: 0 0 10px; word-break: break-all; }
.mock-price { font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-size: 1.6rem; color: var(--risk); }
.mock-old { text-decoration: line-through; color: var(--ink-muted); }
.mock-cta { display: inline-block; background: #0f7a3f; color: #fff; font-weight: 800; border-radius: 10px; padding: 6px 14px; margin-top: 6px; }
.mock-call { background: #1d1a17; color: #fff; text-align: center; }
.mock-call .mock-from { color: #fff; font-size: 1.2rem; }
.mock-call .mock-sub { color: #e7dccd; }
.mock-call .bubble { background: #2c2824; color: #fff; border-color: #4a433c; text-align: left; border-radius: 14px; }
.mock-meter { background: #2b5f8a; color: #fff; border-radius: 16px; padding: 14px; text-align: center; }
.mock-meter .screen { background: #b9d3c4; color: #10241a; font-family: monospace; border-radius: 8px; padding: 8px; margin: 0 0 10px; }
.mock-sticker { display: inline-block; background: #fff; color: var(--ink); border-radius: 8px; padding: 8px 12px; transform: rotate(-4deg); box-shadow: 2px 2px 0 rgba(0,0,0,.3); font-weight: 800; }
.qr-fake { width: 96px; height: 96px; margin: 6px auto 0; background:
  linear-gradient(90deg, #000 25%, transparent 25% 50%, #000 50% 62%, transparent 62%) 0 0/24px 24px,
  linear-gradient(#000 30%, transparent 30% 60%, #000 60% 75%, transparent 75%) 0 0/24px 24px; border: 6px solid #fff; outline: 2px solid #000; }
.mock-push { background: #f2f4f7; border-radius: 16px; padding: 10px 12px; border: 1px solid #d0d5dd; }
.mock-context { font-weight: 700; color: var(--ink-muted); margin: 0 0 10px; }
/* Sygnały (pokazywane po odpowiedzi) */
.flag { border-radius: 4px; transition: background .2s; }
.revealed .flag { background: #ffe1d1; outline: 2px solid var(--risk); outline-offset: 1px; }
.revealed .flag.good { background: #d9f7e4; outline-color: var(--ok); }
.revealed .flag::after { content: attr(data-n); display: inline-flex; align-items: center; justify-content: center; min-width: 1.4em; height: 1.4em; margin-left: 4px; border-radius: 50%; background: var(--risk); color: #fff; font-size: .8em; font-weight: 800; vertical-align: .1em; }
.revealed .flag.good::after { background: var(--ok); }
.q { font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-size: 1.25rem; color: var(--ink); margin: 0 0 10px; }
.opts { display: grid; gap: 10px; }
.opt { font: inherit; font-weight: 700; text-align: left; min-height: 60px; padding: 12px 16px; border-radius: 14px; border: 2px solid var(--card-border); background: #fff; color: var(--ink); cursor: pointer; display: flex; gap: 12px; align-items: center; }
.opt .m { flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.opt:hover:not([disabled]) { border-color: var(--accent); }
.opt[disabled] { cursor: default; opacity: 1; }
.opt.is-chosen { border-width: 3px; border-color: var(--ink); }
.opt.is-best { background: var(--ok-bg); border-color: var(--ok); }
.opt.is-bad.is-chosen { background: var(--risk-bg); border-color: var(--risk); }
.fb { margin-top: 14px; border-radius: 16px; padding: 14px 16px; border: 2px solid var(--card-border); background: var(--surface-subtle); }
.fb[hidden] { display: none; }
.fb.is-good { border-color: var(--ok); background: var(--ok-bg); }
.fb.is-try { border-color: var(--warn-border); background: var(--warn-bg); }
.fb h3 { margin: 0 0 6px; }
.fb .verdict { display: inline-block; font-weight: 800; padding: 2px 10px; border-radius: 8px; color: #fff; background: var(--risk); margin: 0 0 8px; }
.fb .verdict.safe { background: var(--ok); }
.fb .verdict.warn { background: var(--warn); }
.fb ol, .fb ul { margin: 0 0 8px; padding-left: 1.4em; }
.fb li { margin: 0 0 4px; }
.nav-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.nav-row .btn { flex: 1 1 200px; }
/* Sprawdź wiadomość */
.yn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.yn .btn { min-height: 72px; font-size: 1.15rem; }
@media (max-width: 420px) { .yn { grid-template-columns: 1fr 1fr; } .yn .btn:last-child { grid-column: 1 / -1; } }
.light { display: flex; gap: 14px; align-items: center; border-radius: 18px; padding: 16px; border: 3px solid; margin: 0 0 14px; }
.light .dot { flex: 0 0 64px; height: 64px; border-radius: 50%; }
.light.red { border-color: var(--risk); background: var(--risk-bg); } .light.red .dot { background: #d92d20; }
.light.amber { border-color: #d97706; background: var(--warn-bg); } .light.amber .dot { background: #f59e0b; }
.light.green { border-color: var(--ok); background: var(--ok-bg); } .light.green .dot { background: #16a34a; }
.light h2 { margin: 0; }
.steps { padding-left: 1.4em; } .steps li { margin: 0 0 8px; }
.tel { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 16px; border-radius: 12px; background: var(--ink); color: #fff !important; text-decoration: none; font-weight: 800; font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-size: 1.1rem; margin: 2px 0; }
.tel.alt { background: #fff; color: var(--ink) !important; border: 2px solid var(--ink); }
details.case { border: 2px solid var(--card-border); border-radius: 16px; background: #fff; margin: 0 0 12px; }
details.case > summary { cursor: pointer; min-height: 64px; padding: 12px 16px; font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; list-style: none; }
details.case > summary::-webkit-details-marker { display: none; }
details.case > summary::after { content: "▾"; margin-left: auto; font-size: 1.3rem; }
details.case[open] > summary::after { content: "▴"; }
details.case > div { padding: 0 16px 14px; }
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.num-box { border: 2px solid var(--ink); border-radius: 14px; padding: 10px 12px; background: #fff; }
.num-box p { margin: 6px 0 0; }
/* Hasła */
.tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.tile { font: inherit; font-weight: 700; min-height: 52px; min-width: 48px; padding: 6px 14px; border-radius: 12px; border: 2px solid var(--card-border); background: #fff; color: var(--ink); cursor: pointer; }
.tile[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.phrase { font-family: monospace; font-size: 1.3rem; background: #fff; border: 2px dashed var(--ink); border-radius: 12px; padding: 12px; min-height: 60px; word-break: break-all; margin: 10px 0; }
.meter { height: 22px; border-radius: 11px; background: #ebdccb; overflow: hidden; }
.meter > span { display: block; height: 100%; width: 0; background: #d92d20; transition: width .3s, background .3s; }
.meter-txt { font-weight: 800; margin: 6px 0 0; }
.check-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.check-row label { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 700; padding: 0 12px; border: 2px solid var(--card-border); border-radius: 12px; background: #fff; }
.check-row input { width: 24px; height: 24px; accent-color: var(--accent); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .pair { grid-template-columns: 1fr; } }
.pair .opt { font-family: monospace; justify-content: center; text-align: center; word-break: break-all; }
/* Stopka */
.cw-foot { max-width: 900px; margin: 10px auto 30px; padding: 0 12px; text-align: center; color: var(--ink-muted); font-weight: 600; }
.cw-foot img { display: block; width: 100%; height: auto; background: #fff; border-radius: 6px; }
.cw-foot a.niw { display: block; }
.cw-foot p { margin: 8px 0 0; }
.cw-foot .links a { display: inline-flex; min-height: 48px; align-items: center; padding: 0 6px; }
.offline-badge { display: none; background: #18120c; color: #fff; text-align: center; padding: 6px; font-weight: 700; }
html.is-offline .offline-badge { display: block; }
.only-print { display: none; }
@media print {
  .cw-header, .no-print, .cw-foot .links, .offline-badge { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .card { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  details.case { break-inside: avoid; }
  details.case > summary::after { content: none; }
  .tel { background: none !important; color: #000 !important; border: 1px solid #000; min-height: 0; padding: 0 6px; }
  .only-print { display: block; }
  .cw-foot img { width: 176mm; margin: 0 auto; }
}

/* ===== v5: „Wróć do początku” (do startu Radaru), responsywność, kontrast ===== */
.cw-header { padding-top: env(safe-area-inset-top); }
.cw-header-in { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
.cw-home { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px 0 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 800; text-decoration: none; white-space: nowrap; }
.cw-home:hover { background: var(--accent-soft); border-color: var(--accent-dark); color: var(--accent-dark); }
.cw-home:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cw-home-short { display: none; }
@media (max-width: 560px) {
  .cw-brand small { display: none; }
  .cw-home { padding: 0 12px 0 8px; }
  .cw-home-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .cw-home-short { display: inline; }
}
@media (max-width: 360px) { .cw-sizes { gap: 2px; } .cw-header-in { gap: 6px; } }
@media (orientation: landscape) and (max-height: 520px) { .cw-header-in { padding-top: 2px; padding-bottom: 2px; } }
.mock-av { background: #7a6650; }          /* było 1,9:1 */
.links a { display: inline-flex; align-items: center; min-height: 44px; }
main a[href^="http"] { padding: 10px 0; }  /* linki zewnętrzne w tekście — większy obszar dotyku */
@media print { .cw-home { display: none !important; } }
.cw-main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
/* v7 — nagłówek i przyciski A/A+/A++: wyraźne ramki ≥3:1, focus */
.cw-header { border-bottom: 2px solid #8c7358; }
.cw-brand { color: #b83e00; }
.cw-sizes button { border-color: #8c7358; }
.cw-sizes button:hover { border-color: #b83e00; }
.cw-sizes button:focus-visible, .cw-home:focus-visible, .cw-brand:focus-visible { outline: 4px solid #004fb0; outline-offset: 2px; }
.cw-sizes button[aria-pressed="true"] { background: #14284b; border-color: #14284b; }
@media (min-width: 1600px) and (min-height: 950px) {
  html { --base: 131.25%; } html[data-font-size="large"] { --base: 150%; } html[data-font-size="xlarge"] { --base: 168.75%; }
  .cw-main, .cw-header-in { max-width: 1240px; }
}
/* v8: skala +20% (A 23px · A+ 26px · A++ 30px) */
html { --base: 143.75%; } html[data-font-size="large"] { --base: 162.5%; } html[data-font-size="xlarge"] { --base: 187.5%; }
@media (min-width: 1600px) and (min-height: 950px) { html { --base: 156.25%; } html[data-font-size="large"] { --base: 175%; } html[data-font-size="xlarge"] { --base: 200%; } }
.cw-main h1 { font-size: 1.55rem; }
body[data-page="hub"] .cw-header { border-bottom: 6px solid #1e7b3f; }
body[data-page="hub"] .cw-main h1 { color: #14532d; }