/* Pisanie bezwzrokowe (aplikacja platformy, kod typing): ekran lekcji, klawiatura ekranowa (SVG), dlonie, lista lekcji.
   Tokeny kolorow z app.css (jasny i ciemny motyw). Strefy palcow: maly = sky, serdeczny = leaf, srodkowy = sun, wskazujacy = coral,
   kciuki = muted - kolor nigdy nie jest jedyna informacja (podpowiedz tekstem z nazwa palca, podswietlony palec na dloni). */

/* kolory palcow - te same na klawiszach i na dloniach (zgloszenie uzytkownika 2026-10-23: kolor palca = kolor jego klawiszy) */
.app-typing { --f5: #5b7fd6; --f4: #3f9a62; --f3: #e0a91f; --f2: #e0645a; --ft: #9aa3a7; }
.kbd .k.f-L5, .kbd .k.f-R5, .hands .f-L5, .hands .f-R5 { --fc: var(--f5); }
.kbd .k.f-L4, .kbd .k.f-R4, .hands .f-L4, .hands .f-R4 { --fc: var(--f4); }
.kbd .k.f-L3, .kbd .k.f-R3, .hands .f-L3, .hands .f-R3 { --fc: var(--f3); }
.kbd .k.f-L2, .kbd .k.f-R2, .hands .f-L2, .hands .f-R2 { --fc: var(--f2); }
.kbd .k.f-LT, .kbd .k.f-RT, .hands .f-LT, .hands .f-RT { --fc: var(--ft); }

.typing-guest { background: var(--accent-soft); border-radius: var(--radius-s); padding: .6rem .9rem; margin: 0 0 1rem; }
.typing-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.typing-stages, .typing-method { margin-top: 1rem; }
.typing-num { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--accent); color: var(--accent-fg); font-size: .95rem; margin-right: .3rem; }

/* lista lekcji */
.typing-layout-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1rem; }
.typing-stage { margin-bottom: 1rem; }
.typing-lesson-list { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .5rem; }
.typing-lesson-list li a { display: flex; gap: .6rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--card); color: var(--fg); text-decoration: none; }
.typing-lesson-list li a:hover, .typing-lesson-list li a:focus-visible { border-color: var(--accent); }
.typing-lesson-list li.is-off a { opacity: .55; }
.typing-lesson-id { font-weight: 600; color: var(--accent); min-width: 2.2rem; }
.typing-keys { display: inline-flex; flex-wrap: wrap; gap: .25rem; vertical-align: middle; }
.typing-keys kbd, .typing-head kbd { font: 600 .95rem ui-monospace, "Cascadia Mono", Consolas, monospace; min-width: 1.6rem; text-align: center; padding: .1rem .35rem; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 6px; background: var(--bg-2); color: var(--fg); }

/* ekran lekcji */
.typing-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .5rem 1.5rem; margin-bottom: .5rem; }
.typing-head h1 { margin: .1rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.typing-head h1 small { font-size: .55em; color: var(--muted); }
.typing-board { position: relative; cursor: text; }
.typing-stats { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; color: var(--muted); font-size: .95rem; }
.typing-stats b { color: var(--fg); font-size: 1.2rem; }
.typing-progress { flex: 1 1 8rem; height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.typing-progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .15s; }
.typing-text { font: 1.65rem/1.75 ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; letter-spacing: .02em; margin: 1rem 0 .4rem; white-space: pre-wrap; word-break: break-word; color: var(--fg); }
.typing-text.is-live span { border-radius: 3px; }
.typing-text span.ok { color: var(--muted); }
.typing-text span.fixed { color: var(--warn); }
.typing-text span.err { background: color-mix(in srgb, var(--err) 25%, transparent); color: var(--err); }
.typing-text span.cur { background: var(--mark); color: var(--mark-fg); box-shadow: inset 0 -3px 0 var(--accent); }
.typing-text span.sp.cur { box-shadow: inset 0 -4px 0 var(--accent); }
.typing-text span.cur.err { background: color-mix(in srgb, var(--err) 28%, transparent); color: var(--err); box-shadow: inset 0 -3px 0 var(--err); }
.is-paused .typing-text { opacity: .55; }
.typing-hint { font-size: 1.15rem; font-weight: 600; min-height: 1.6em; margin: .2rem 0 .8rem; }
.is-paused .typing-hint { color: var(--warn); }
.typing-input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; }
.typing-tip { margin: .6rem 0 0; }
.typing-board.is-done .typing-kbd, .typing-board.is-done .typing-hands { opacity: .45; }
.typing-result h2 { display: flex; align-items: center; gap: .6rem; }
.typing-stars { color: var(--sun); font-size: 1.6rem; letter-spacing: .1em; }
.typing-pager { display: flex; justify-content: space-between; margin-top: 1rem; }

/* klawiatura ekranowa */
.typing-kbd svg.kbd { display: block; width: 100%; max-width: 860px; height: auto; margin: 0 auto; }
.kbd .k .kb { fill: color-mix(in srgb, var(--fc, var(--card)) 40%, var(--card)); stroke: var(--line); stroke-width: 1.5; }
.kbd .k.home .kb { stroke-width: 2.2; }
/* klawisz do nacisniecia: kolor jego palca mocniej + gruba ciemna ramka (kolor zostaje - widac, ktory palec) */
.kbd .k.on .kb { fill: color-mix(in srgb, var(--fc, var(--accent)) 85%, var(--card)); stroke: var(--fg); stroke-width: 4; }
.kbd .k.on text { fill: var(--fg); font-weight: 700; }
.kbd .k.bad .kb { fill: var(--err); }
.kbd .k.bad text { fill: #fff; }
.kbd text { text-anchor: middle; fill: var(--fg); font-family: var(--font); pointer-events: none; }
.kbd .kl { font-size: 21px; font-weight: 600; }
.kbd .kl.ks { font-size: 16px; font-weight: 500; }
.kbd .ka { font-size: 13px; text-anchor: end; fill: var(--accent); }
.kbd .kn { font-size: 12px; fill: var(--muted); }
.kbd .bump { stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; }
.kbd .k.on .bump { stroke: var(--fg); }

/* dlonie */
.typing-hands svg.hands { display: block; width: 100%; max-width: 330px; height: auto; margin: .6rem auto 0; }
.hands .palm { fill: var(--bg-2); stroke: var(--line); }
.hands .finger rect { fill: color-mix(in srgb, var(--fc) 40%, var(--card)); stroke: var(--line); stroke-width: 1.5; }
.hands .finger.on rect { fill: color-mix(in srgb, var(--fc) 85%, var(--card)); stroke: var(--fg); stroke-width: 4; }

@media (prefers-reduced-motion: reduce) {
  .typing-progress span { transition: none; }
}
@media (max-width: 600px) {
  .typing-text { font-size: 1.25rem; }
}

/* postep: liczby, wykresy, mapa opanowania klawiszy (0 brak danych, 1 do cwiczenia, 2 coraz lepiej, 3 opanowany) + legenda */
.typing-totals { margin-bottom: 1rem; }
.typing-totals .card p { margin: .2rem 0; }
.typing-big { font-size: 1.6rem; font-weight: 700; }
.typing-big small { font-size: .55em; font-weight: 500; color: var(--muted); }
.typing-chart { margin: .5rem 0 1rem; }
.typing-mastery .kbd .k .kb { fill: var(--card); }
.typing-mastery .kbd .k.mastery-1 .kb, .day-legend i.mastery-1 { fill: color-mix(in srgb, var(--err) 30%, var(--card)); background: color-mix(in srgb, var(--err) 30%, var(--card)); }
.typing-mastery .kbd .k.mastery-2 .kb, .day-legend i.mastery-2 { fill: color-mix(in srgb, var(--sun) 45%, var(--card)); background: color-mix(in srgb, var(--sun) 45%, var(--card)); }
.typing-mastery .kbd .k.mastery-3 .kb, .day-legend i.mastery-3 { fill: color-mix(in srgb, var(--ok) 45%, var(--card)); background: color-mix(in srgb, var(--ok) 45%, var(--card)); }
.day-legend i.mastery-0 { background: var(--card); }
/* lista lekcji: gwiazdki i zalecana lekcja */
.typing-lesson-stars { margin-left: auto; color: var(--sun); letter-spacing: .05em; }
.typing-lesson-list li.is-next a { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.typing-next-badge { font-size: .75rem; color: var(--accent); }
.typing-saved { margin: .3rem 0; }
.typing-today { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; }
.typing-mode { display: inline-flex; gap: .4rem; align-items: center; margin-top: .4rem; color: var(--muted); }

/* gry (Lapacz liter): plotno 2D, ustawienia gry */
.game-canvas { display: block; width: 100%; max-width: 900px; height: auto; margin: .6rem auto; background: var(--bg-2); border-radius: var(--radius-s); }
.game-controls { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; margin: .4rem 0 0; }
.typing-games .is-soon { opacity: .7; }

/* lekcje kodu (etap 6): wiersze z wcieciem, Enter = ↵, Tab = ⇥, ramka z przewijaniem przy dlugim kodzie */
.typing-text.is-code { position: relative; font-size: 1.2rem; line-height: 1.6; white-space: pre; word-break: normal; overflow: auto; max-height: 15em; padding: .3rem .5rem; background: var(--bg-2); border-radius: var(--radius-s); }
.typing-text .ind { display: inline-block; }
.typing-text span.nl:not(.ok):not(.fixed):not(.err):not(.cur), .typing-text span.tab:not(.ok):not(.fixed):not(.err):not(.cur) { color: var(--muted); }
.typing-text span.tab { display: inline-block; width: 4ch; }

/* plan dnia na starcie: kroki po kolei, zaliczony przekreslony lagodnie */
.typing-plan-steps { margin: .4rem 0 0; padding-left: 1.4rem; }
.typing-plan-steps li { margin: .25rem 0; }
.typing-plan-steps li.is-done a { color: var(--muted); }

/* certyfikat etapu: ramka jak dyplom; wydruk tylko certyfikatu (bez menu, stopki i pola imienia), A4 poziomo */
.typing-cert { text-align: center; padding: 2.5rem 1.5rem; margin: 1rem 0; border: 3px double var(--accent); border-radius: var(--radius); background: var(--card); }
.typing-cert h1 { margin: .4rem 0 1rem; font-size: 2rem; }
.typing-cert-kicker { color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; }
.typing-cert-name { font-size: 1.8rem; font-weight: 700; border-bottom: 1px solid var(--line); display: inline-block; min-width: 60%; min-height: 1.5em; padding: 0 1rem .2rem; margin: .5rem 0 1rem; }
.typing-cert-name:empty::before { content: attr(data-empty); color: var(--muted); font-weight: 400; }
.typing-cert-stage { font-size: 1.3rem; font-weight: 600; color: var(--accent); }
.typing-cert-stats { margin-top: 1.2rem; }
.typing-cert-tools input { width: 100%; max-width: 28rem; }
@media print {
  @page { size: A4 landscape; margin: 15mm; }
  .app-typing header.top, .app-typing footer.foot, .app-typing .typing-cert-tools { display: none !important; }
  /* papier zawsze jasny - stale kolory niezaleznie od motywu (ciemny motyw dalby blady szary i turkus na bialym) */
  .app-typing .typing-cert { border-color: #146c7a; background: #fff; color: #000; margin: 0; }
  .app-typing .typing-cert-kicker { color: #5f6b70; }
  .app-typing .typing-cert-stage { color: #146c7a; }
  .app-typing .typing-cert-name { border-bottom-color: #000; }
  .app-typing .typing-cert-name:empty::before { content: none; }
}