/* Strony typów zadań z polskiego i angielskiego (t027): statyczny przykład z odpowiedzią. Wyłącznie klasy tp-*. */
.tp { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px); padding-top: clamp(12px, 3vh, 32px); padding-bottom: 56px; }
.tp-h2 { margin: 0 0 12px; font: 600 clamp(24px, 3vw, 30px)/1.15 var(--display); color: var(--ink); letter-spacing: -.01em; }
.tp-box { max-width: 76ch; padding: clamp(16px, 3vw, 28px); border: 1px solid var(--rule); border-radius: 6px; background: var(--sheet); font: 400 clamp(17px, 2vw, 19px)/1.6 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.tp-box > * + * { margin-top: 14px; }
.tp-box p { margin: 0 0 10px; }
.tp-box p:last-child { margin-bottom: 0; }
.tp-box h3 { margin: 22px 0 8px; font: 600 19px/1.3 var(--serif); color: var(--ink); }
.tp-box ul { margin: 8px 0 0; padding-left: 1.3em; }
.tp-box li + li { margin-top: 6px; }
.tp-pol { font-weight: 600; }
.tp-note, .tp-dop { font: 400 15px/1.45 var(--sans); color: var(--ink-3); }
.tp-gap { white-space: nowrap; font: 600 .88em/1 var(--sans); color: var(--pen-2); }
.tp-lista, .tp-opts { margin: 0; padding-left: 1.8em; list-style: upper-alpha; }
.tp-stw, .tp-kroki, .tp-tematy { margin: 0; padding-left: 1.6em; }
.tp-pp, .tp-odp { margin: 0; padding: 0; list-style: none; }
.tp-pp > li, .tp-odp > li { padding: 12px 0; border-top: 1px solid var(--rule); }
.tp-pp > li:last-child, .tp-odp > li:last-child { padding-bottom: 0; }
.tp-pp > li + li, .tp-odp > li + li { margin-top: 0; }
.tp-nr { display: inline-block; min-width: 2.4em; margin-right: 6px; font: 600 15px/1.4 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tp-et { margin: 4px 0 8px; }
.tp-et p:last-child { margin-bottom: 0; }
.tp-nagr, .tp-frag { margin: 0; padding: 12px 14px; border-left: 3px solid var(--rule); background: var(--paper); font-size: .95em; }
.tp-nagr__h, .tp-frag__h { font: 600 15px/1.4 var(--sans); color: var(--ink-2); }
.tp-frag figcaption { margin-top: 8px; font: 400 14px/1.4 var(--sans); color: var(--ink-3); }
.tp-ramka span { display: inline-block; margin: 0 6px 6px 0; padding: 2px 10px; border: 1.5px solid var(--ink-3); border-radius: 3px; font: 600 15px/1.5 var(--sans); }
.tp-zrodlo { padding: 4px 14px; border: 1px solid var(--rule); border-radius: 4px; }
.tp-zrodlo summary { padding: 10px 0; cursor: pointer; font: 600 16px/1.4 var(--sans); color: var(--pen-2); }
.tp-zrodlo[open] { padding-bottom: 12px; }
.tp-wzor { padding: 12px 14px; border-left: 3px solid var(--ok); background: var(--ok-wash); }
.tp-ok { color: var(--ok); font-weight: 600; }
.tp-zle { color: var(--bad); font-weight: 600; }
.tp-why { font-size: .93em; color: var(--ink-2); }
.tp-odp ul { font-size: .93em; color: var(--ink-2); }
.tp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.tp-cta .btn { text-decoration: none; }
.tp-cta .tp-note { margin: 0; max-width: 46ch; }
.tp-links { margin: 0 0 12px; padding-left: 22px; }
.tp-links a { display: inline-block; padding: 4px 0; }
/* matematyka: strony wzorców */
.tp-rys { max-width: 360px; }
.tp-rys svg { display: block; max-width: 100%; height: auto; }
.tp-box--mat .tp-opts li + li, .tp-box--mat .tp-kroki li + li { margin-top: 12px; }
.tp-box--mat .tp-kroki { line-height: 1.9; }