/* Szybkie czytanie (strona /speed-reading, <body class="kind-app app-speed">): tylko to, czego nie ma w app.css - tokeny, karty,
   kpis, chips i quiz-* sa wspolne z nauka jezykow (ten sam wyglad platformy). Dolaczany przez layout/main.php, gdy plik istnieje. */
.speed-how { margin: .2rem 0 .8rem; padding-left: 1.3rem; }
.speed-how li { margin: .3rem 0; }
.speed-text { max-width: 44rem; }
.speed-text [data-body] p { font-size: 1.14rem; line-height: 1.75; margin: 0 0 1rem; }
.speed-done { margin-top: 1.4rem; }
.app-speed .quiz-q + .quiz-q { margin-top: 1.1rem; }
.speed-last .kpis { margin: .4rem 0; }
/* przewijanie do kroku testu (tekst, pytania, wynik) pod przyklejonym naglowkiem .top */
.app-speed [data-step] { scroll-margin-top: 5.5rem; }
/* etap 3: ustawienia tempa, wskaznik tempa (grupa slow .chunk), slowo po slowie (.rsvp-box z litera skupienia), postep, tablice Schultego */
.speed-settings { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; margin: .6rem 0; }
.speed-settings label { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.speed-settings input[type="range"] { width: min(16rem, 70vw); accent-color: var(--accent); }
.speed-settings output { font-weight: 700; color: var(--accent); min-width: 3ch; text-align: right; }
.speed-text .chunk { border-radius: 4px; padding: .05em 0; transition: background-color .08s, opacity .25s; }
.speed-text .chunk.on { background: var(--mark); color: var(--mark-fg); box-shadow: 0 0 0 2px var(--mark); }
.speed-text .chunk.gone { opacity: .14; }
.speed-text.paused .chunk.on { background: none; box-shadow: 0 0 0 2px var(--accent); }
.rsvp-box { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 7rem; margin: 1rem 0; font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 600; letter-spacing: .01em; border-block: 1px solid var(--line); position: relative; }
.rsvp-box::before, .rsvp-box::after { content: ""; position: absolute; left: 50%; width: 2px; height: .9rem; background: var(--line); }
.rsvp-box::before { top: 0; }
.rsvp-box::after { bottom: 0; }
.rsvp-l { text-align: right; white-space: pre; }
.rsvp-r { text-align: left; white-space: pre; }
.rsvp-orp { color: var(--err); }
.rsvp-multi { grid-column: 1 / -1; text-align: center; }
.speed-text.paused .rsvp-box { opacity: .5; }
.speed-progress { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin: .8rem 0 .2rem; }
.speed-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.speed-controls { margin-top: .6rem; }
.speed-find { font-weight: 600; }
.schulte { position: relative; display: grid; gap: 4px; width: min(100%, 26rem); aspect-ratio: 1; margin: .8rem 0; }
.schulte-3 { grid-template-columns: repeat(3, 1fr); }
.schulte-4 { grid-template-columns: repeat(4, 1fr); }
.schulte-5 { grid-template-columns: repeat(5, 1fr); }
.schulte-6 { grid-template-columns: repeat(6, 1fr); }
.schulte-7 { grid-template-columns: repeat(7, 1fr); }
.schulte-cell { font: inherit; font-size: clamp(1.1rem, 4vw, 1.6rem); font-weight: 600; color: var(--fg); background: var(--card); border: 1px solid var(--line);
  border-radius: 6px; cursor: pointer; touch-action: manipulation; }
.schulte-cell.hit { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, var(--card)); }
.schulte-cell.miss { border-color: var(--err); background: color-mix(in srgb, var(--err) 14%, var(--card)); }
/* liczba do znalezienia na srodku tablicy (wzrok zostaje w srodku): pole srodkowe (rozmiar nieparzysty) albo nakladka na przecieciu (parzysty) */
.schulte-target { display: grid; place-items: center; font-size: clamp(1.1rem, 4vw, 1.6rem); font-weight: 800; color: var(--err);
  border: 2px solid var(--err); border-radius: 6px; background: color-mix(in srgb, var(--err) 7%, var(--card)); pointer-events: none; }
.schulte-target.overlay { position: absolute; left: 50%; top: 50%; width: 2.6rem; height: 2.6rem; transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--card); box-shadow: 0 0 0 4px var(--card); z-index: 2; }
/* etap 4: plan dnia (kroki z oznaczeniem zrobionych i nastepnego), lekcje teorii */
.speed-steps { list-style: none; margin: .4rem 0 0; padding: 0; counter-reset: step; }
.speed-steps li { counter-increment: step; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .55rem .2rem; border-top: 1px solid var(--line); }
.speed-steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--line);
  font-weight: 700; font-size: .85rem; color: var(--muted); }
.speed-steps li.done::before { content: "✓"; border-color: var(--ok); background: var(--ok); color: var(--ok-fg); }
.speed-steps li.done .speed-step-name { color: var(--muted); }
.speed-steps li.next::before { border-color: var(--accent); color: var(--accent); }
.speed-steps li.next .speed-step-name { font-weight: 600; }
.speed-steps .btn { margin-left: auto; }
.speed-lessons li { margin: .35rem 0; }
.speed-tip { border-left: 3px solid var(--accent); padding: .3rem .8rem; background: var(--accent-soft); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
/* etap 5: postep - legenda serii wykresu (kolory jak .chart-line.s1/s2/s3 w app.css) */
.speed-keys { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 .3rem; color: var(--muted); }
.speed-key::before { content: ""; display: inline-block; width: .9rem; height: .2rem; border-radius: 2px; margin-right: .35rem; vertical-align: middle; }
.speed-key.s1::before { background: var(--accent); }
.speed-key.s2::before { background: var(--chart-2); }
.speed-key.s3::before { background: var(--leaf); }
/* etap 6: krotkie cwiczenia oka - scena z punktem na srodku (blysk, piramida), lista par slow */
.drill { position: relative; display: grid; place-items: center; min-height: 7rem; margin: .8rem 0; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); overflow: hidden; font-size: clamp(1.2rem, 4.5vw, 1.8rem); }
.drill-fix { color: var(--err); font-weight: 800; }
.drill-word { font-weight: 600; white-space: nowrap; }
.drill-flash .drill-word, .drill-flash .drill-mask { white-space: normal; overflow-wrap: anywhere; text-align: center; padding: 0 .6rem; }
.drill-mask { color: var(--muted); letter-spacing: .05em; }
.drill-pyramid { font-size: clamp(1rem, 4vw, 1.6rem); }
.drill-pyramid .drill-word { position: absolute; top: 50%; transform: translateY(-50%); }
.drill-options { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.drill-options p { flex-basis: 100%; margin: 0; }
.drill-option { font-size: 1.05rem; }
.speed-find.ok { color: var(--ok); }
.speed-find.err { color: var(--err); }
.drill-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .4rem; place-items: stretch; padding: .5rem; font-size: 1.15rem; }
.drill-pair { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: .6rem; padding: .45rem .6rem; font: inherit; color: var(--fg);
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; text-align: left; touch-action: manipulation; }
.drill-pair .chip { visibility: hidden; }
.drill-pair[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.drill-pair[aria-pressed="true"] .chip { visibility: visible; }
.drill-pair.hit { border-color: var(--ok); }
.drill-pair.miss { border-color: var(--err); background: color-mix(in srgb, var(--err) 12%, var(--card)); }
.speed-score { font-weight: 600; }