/* korkizmatmy.online/pomoc/tablica/: „Co potrafi tablica” (projekt D, 19.10). Dokłada się do glowna.css (te same kolory, przyciski,
   sekcje). Telefon najpierw (390 px), potem 640, 900, 1200. Bez stylów w linii (CSP style-src 'self'). */

.ft-przyciski{justify-content:center}

/* ---------- animacje ---------- */
.ft-sterowanie{display:flex;justify-content:flex-end;margin:-1rem 0 1rem}
.ft-sterowanie .przycisk[hidden]{display:none}
.ft-animacje{display:grid;gap:1.25rem}
.ft-karta{display:flex;flex-direction:column;min-width:0;border-radius:var(--r);background:#fff;border:1px solid var(--linia);box-shadow:var(--cien);overflow:hidden;
  scroll-margin-top:calc(var(--naglowek) + 16px)}
.ft-karta:target{border-color:var(--niebieski);box-shadow:0 0 0 3px rgba(0,126,211,.25),var(--cien)}
.ft-karta__tytul{font-size:1.25rem;margin:1.15rem 1.25rem .4rem}
.ft-karta__opis{margin:0 1.25rem .75rem;color:var(--tekst-2);font-size:.9375rem;line-height:1.55}
.ft-karta__dol{margin:auto 1.25rem 1.2rem}
.ft-animacja{order:-1;position:relative;margin:0;background:#F4F7FB;border-bottom:1px solid var(--linia)}
.ft-animacja img{display:block;width:100%;height:auto}
.ft-animacja__przycisk{position:absolute;top:.6rem;right:.6rem;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:var(--granat);color:#fff;cursor:pointer;box-shadow:none}
.ft-animacja__przycisk[hidden]{display:none}
.ft-animacja__przycisk .ikona{width:20px;height:20px;fill:currentColor;stroke:none}
.ft-ikona-start{display:none}
.ft-animacja--stoi .ft-ikona-start,.ft-wszystkie--stoi .ft-ikona-start{display:block}
.ft-animacja--stoi .ft-ikona-pauza,.ft-wszystkie--stoi .ft-ikona-pauza{display:none}
/* ikona w kółku przycisku (design.md 4.1): rozmiar z .przycisk>.ikona; dawne 16 px przy wewnętrznym marginesie kółka dawało pustą kropkę */
.ft-sterowanie .ikona{fill:currentColor;stroke:none}
/* zmiana „Zatrzymaj / Odtwórz animacje”: napis z tłem zwija się pod kółko i rozwija nowy (funkcje-tablicy.js przelaczGladko) */
.ft-sterowanie .przycisk.ft-anim{overflow:hidden;justify-content:flex-end;transition:width .45s ease-in-out,padding-left .45s ease-in-out,gap .45s ease-in-out}
.ft-sterowanie .przycisk.ft-anim>span{min-width:0;overflow:hidden;white-space:nowrap;transition:opacity .45s ease-in-out}
.ft-sterowanie .przycisk.ft-zwiniety{padding-left:1px;gap:0}
.ft-sterowanie .przycisk.ft-zwiniety>span{opacity:0}
@media (min-width:900px){.ft-animacje{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}}

/* ---------- wszystkie funkcje ---------- */
.ft-grupa{margin:0 0 2.75rem;scroll-margin-top:calc(var(--naglowek) + 16px)}
.ft-grupa:last-child{margin-bottom:0}
.ft-grupa__naglowek{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 .35rem;cursor:pointer;list-style:none;border-radius:10px}
.ft-grupa__naglowek::-webkit-details-marker{display:none}
.ft-grupa__tytul{display:flex;align-items:center;gap:.6rem;font-size:1.5rem;margin:0}
.ft-grupa__strzalka{width:24px;height:24px;color:var(--granat);transition:transform .45s ease-in-out}
.ft-grupa:not([open]) .ft-grupa__strzalka{transform:rotate(-90deg)}
.ft-grupa:not([open]){margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--linia)}
.ft-grupa__liczba{display:inline-grid;place-items:center;min-width:2rem;height:2rem;padding:0 .5rem;border-radius:999px;background:#DFEBFB;
  color:var(--granat);font:600 .875rem/1 var(--font);letter-spacing:0}
.ft-grupa__wstep{margin:0 0 1.1rem;color:var(--tekst-2)}
.ft-lista{display:grid;gap:.75rem}
.ft-pozycja{display:flex;flex-direction:column;min-width:0;padding:1rem 1.1rem 1.05rem;border-radius:var(--r);background:#fff;box-shadow:var(--cien)}
.ft-pozycja__nazwa{margin:0 0 .35rem;font:700 1.0625rem/1.3 var(--font-n);color:var(--granat);letter-spacing:-.005em;overflow-wrap:anywhere}
.ft-pozycja__opis{margin:0 0 .5rem;color:var(--tekst-2);font-size:.9375rem;line-height:1.55}
.ft-pozycja__gdzie{margin:0 0 .65rem;color:var(--tekst-3);font-size:.8125rem;line-height:1.5}
.ft-pozycja__dol{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;margin:auto 0 0}
/* „Zobacz animację”: link ze strzałką jak „Wypróbuj” w kartach (design.md 4.4: granat, pomarańczowa strzałka, bez podkreślenia; sieć 22.10) */
.ft-pozycja__link{font-size:.875rem}
.ft-pozycja__link .ikona{width:16px;height:16px}
.ft-znacznik{display:inline-flex;align-items:center;padding:.14rem .6rem;border-radius:999px;background:#E1F4EE;color:#11743A;font:600 .75rem/1.4 var(--font);white-space:nowrap}
.ft-znacznik--lekcja{background:#DFEBFB;color:var(--granat)} /* pastele i kolory tekstu z palety (design.md 2), sieć 22.10 */
.ft-kbd{display:inline-block;padding:.05rem .45rem;border:1px solid var(--linia);border-bottom-width:2px;border-radius:6px;background:#fff;
  color:var(--granat);font:600 .8125rem/1.5 var(--font);letter-spacing:0;white-space:nowrap;vertical-align:.1em}
@media (min-width:640px){.ft-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ft-lista{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- skróty klawiszowe ---------- */
.ft-skroty{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--linia);border-radius:var(--r);overflow:hidden;background:#fff;font-size:.9375rem}
.ft-skroty td{padding:.7rem 1rem;border-top:1px solid var(--linia);vertical-align:top;color:var(--tekst-2)}
.ft-skroty tr:first-child td{border-top:0}
.ft-skroty td:first-child{width:42%}
.ft-skroty .ft-kbd{white-space:normal;overflow-wrap:anywhere}
@media (min-width:640px){.ft-skroty td:first-child{width:38%}}

/* ---------- zapis na końcu ---------- */
.ft-zapis__drobne{margin:1.25rem 0 0;color:rgba(235,243,255,.78);font-size:.9375rem}
.ft-zapis__drobne a{color:#fff}

@media print{.ft-animacja__przycisk,.ft-sterowanie{display:none}}