/* Herodicus - prezentacja cwiczenia (etap 2). Prefiks hx-, zeby nie kolidowac z klasami aplikacji. */
.hx-cwiczenie { background: #fff; border: 1px solid #dce4df; border-radius: 16px; padding: 16px; color: #173e43;
                font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; max-width: 980px; box-sizing: border-box; min-width: 0; }
.hx-cwiczenie *, .hx-cwiczenie *::before, .hx-cwiczenie *::after { box-sizing: border-box; }
.hx-nazwa { margin: 0 0 8px; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.hx-wariant { margin: 0 0 10px; font-size: 13.5px; color: #4d6367; overflow-wrap: anywhere; }
.hx-kolumny { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.hx-kolumna { margin: 0; min-width: 0; background: #fbfbf8; border: 1px solid #edf0ec; border-radius: 12px; padding: 8px; text-align: center; }
.hx-kolumna-tytul { font-weight: 650; color: #173e43 !important; margin: 4px 0 8px !important; }
.hx-obraz { display: block; width: 100%; height: auto; max-width: 100%; max-height: 420px; object-fit: contain; background: #fff; border-radius: 8px; }
.hx-kolumna figcaption { font-size: 12.5px; color: #617476; margin-top: 6px; }
.hx-kolumna .hx-partie { margin-top: 4px; text-align: left; }
.hx-wybor { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 8px; font-size: 13px; color: #617476; }
.hx-przycisk { border: 1px solid #c6d4cf; background: #fff; color: #137c79; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.hx-przycisk:focus-visible { outline: 3px solid #137c79; outline-offset: 2px; }
.hx-pasek-zamkniecia { position: sticky; top: 8px; z-index: 4; display: flex; justify-content: flex-end; margin: 0 0 10px; pointer-events: none; }
.hx-zamknij { min-height: 44px; background: #edf7f4; color: #075f59; border-color: #99c5b9; font-weight: 700; pointer-events: auto; box-shadow: 0 2px 6px #173e431a; }
.hx-cwiczenie > .hx-zamknij { margin-top: 16px; width: 100%; }
.hx-brak { font-size: 13px; color: #778988; margin: 24px 6px; }
.hx-partie { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.hx-partie-grupa { background: #f4f7f5; border-radius: 10px; padding: 10px 12px; min-width: 0; }
.hx-partie-tytul { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #5d787e; margin-bottom: 4px; }
.hx-partie-lista { margin: 0; padding-left: 18px; overflow-wrap: anywhere; }
.hx-partie-brak { color: #8a9a99; font-size: 13px; }
.hx-notka { font-size: 12px; color: #778988; margin: 10px 0 0; }
.hx-sprzet { margin: 10px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.hx-komunikaty { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.hx-uwaga { background: #fff8e6; border-left: 3px solid #e8a72a; padding: 8px 10px; border-radius: 6px; font-size: 13.5px; overflow-wrap: anywhere; }
.hx-instruktaz { margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf0ec; }
.hx-instruktaz h3 { margin: 0 0 6px; font-size: 16px; }
.hx-instruktaz h4 { margin: 10px 0 4px; font-size: 14px; }
.hx-instruktaz p { margin: 4px 0; overflow-wrap: anywhere; }
.hx-kroki, .hx-bledy { margin: 6px 0; padding-left: 20px; }
.hx-kroki li, .hx-bledy li { margin-bottom: 4px; overflow-wrap: anywhere; }
.hx-diag { margin-top: 12px; font-size: 12px; color: #617476; }
.hx-diag pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f4f7f5; padding: 8px; border-radius: 8px; max-height: 260px; overflow: auto; }
@media (max-width: 640px) {
  .hx-cwiczenie { padding: 12px; border-radius: 12px; }
  .hx-kolumny { grid-template-columns: 1fr; }
  .hx-partie { grid-template-columns: 1fr; }
  .hx-obraz { max-height: none; }
}