/* ════════════════════════════════════════════════════════════════════════════
   SzK — Panel dostępności v3.1
   Tab: ikona + napis pionowy | Panel: jasny, przełączniki + steppery
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Kontener — poziomo przypięty do dołu ekranu, po lewej ──────────────── */
#szk-a11y {
  position: fixed;
  left: 0;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 9000;
  display: flex;
  flex-direction: column; /* panel (order:1) na górze, tab (order:2) na dole */
  align-items: flex-start;
  font-family: 'Inter', system-ui, sans-serif;
}

/* ── Tab (poziomy przycisk u dołu ekranu) ────────────────────────────────── */
#szk-a11y-tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 120px;
  height: 36px;
  min-height: 0;
  align-self: auto;
  order: 2; /* tab zawsze na dole kontenera */
  background: var(--color-primary, #1a56db);
  color: #fff;
  border: none;
  border-radius: 0 12px 12px 0;
  cursor: pointer;
  padding: 0 16px;
  transition: background .2s, border-radius .15s;
  user-select: none;
  box-shadow: 2px -3px 16px rgba(0,0,0,.2);
}

#szk-a11y-tab:hover { background: var(--color-primary-dark, #1241b0); }

#szk-a11y-tab:focus-visible {
  background: var(--color-primary-dark, #1241b0);
  outline: 3px solid var(--color-accent, #f97316);
  outline-offset: -3px;
}

/* Napis poziomy */
#szk-a11y-tab span {
  writing-mode: horizontal-tb;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(255,255,255,.9);
}

/* Gdy panel otwarty: tab traci border-radius → scala się z panelem */
#szk-a11y.is-open #szk-a11y-tab {
  border-radius: 0;
  box-shadow: none;
}

/* ── Panel (otwiera się w górę, order:1 = nad tabem) ────────────────────── */
#szk-a11y-panel {
  background: #fff;
  color: #1e293b;
  width: 292px;
  border-radius: 0 16px 16px 0;
  box-shadow: 4px -4px 32px rgba(0,0,0,.18);
  overflow: hidden;
  order: 1; /* panel nad tabem */
}

#szk-a11y-panel[hidden] { display: none; }

/* ── Header panelu ───────────────────────────────────────────────────────── */
.a11y-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  background: var(--color-primary, #1a56db);
  color: #fff;
}

.a11y-panel__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
}

#szk-a11y-close {
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
}

#szk-a11y-close:hover { background: rgba(255,255,255,.28); }

#szk-a11y-close:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 2px;
}

/* ── Body panelu ─────────────────────────────────────────────────────────── */
.a11y-panel__body {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Rząd (label + kontrolka) ────────────────────────────────────────────── */
.a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  transition: background .12s;
}

.a11y-row:hover { background: #f8fafc; }

.a11y-row__label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  flex: 1;
}

/* ── Stepper (3 przyciski) ───────────────────────────────────────────────── */
.a11y-stepper {
  display: flex;
  gap: 3px;
  background: #f1f5f9;
  border-radius: 9px;
  padding: 3px;
  flex-shrink: 0;
}

.a11y-stepper button {
  background: transparent;
  border: none;
  border-radius: 6px;
  width: 34px;
  height: 30px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  transition: background .12s, color .12s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1;
}

.a11y-stepper button:hover { color: var(--color-primary, #1a56db); background: color-mix(in srgb,var(--color-primary,#1a56db) 8%,transparent); }

.a11y-stepper button[aria-pressed="true"] {
  background: #fff;
  color: var(--color-primary, #1a56db);
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

.a11y-stepper button:focus-visible { outline: 2px solid var(--color-accent, #f97316); outline-offset: 1px; }

/* ── Przełącznik ─────────────────────────────────────────────────────────── */
.a11y-toggle {
  position: relative;
  width: 44px;
  height: 26px;
  background: #cbd5e1;
  border: none;
  border-radius: 13px;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
  padding: 0;
}

.a11y-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  pointer-events: none;
}

.a11y-toggle[aria-pressed="true"] { background: var(--color-primary, #1a56db); }

.a11y-toggle[aria-pressed="true"] .a11y-toggle__thumb { transform: translateX(18px); }

.a11y-toggle:focus-visible { outline: 2px solid var(--color-accent, #f97316); outline-offset: 2px; }

/* ── Separator ───────────────────────────────────────────────────────────── */
.a11y-divider { height: 1px; background: #e2e8f0; margin: 4px 10px; }

/* ── Resetuj ─────────────────────────────────────────────────────────────── */
.a11y-reset-btn {
  width: 100%;
  padding: 9px 12px;
  margin-top: 4px;
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-family: 'Inter', system-ui, sans-serif;
  text-align: center;
}

.a11y-reset-btn:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
.a11y-reset-btn:focus-visible { outline: 2px solid var(--color-accent, #f97316); outline-offset: 2px; }

/* ── Deklaracja dostępności ──────────────────────────────────────────────── */
.a11y-declaration-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  color: #64748b;
  text-decoration: none;
  transition: color .15s, background .15s;
  margin-top: 2px;
}

.a11y-declaration-link:hover { color: var(--color-primary, #1a56db); background: #f1f5f9; text-decoration: underline; }
.a11y-declaration-link:focus-visible { outline: 2px solid var(--color-accent, #f97316); outline-offset: 2px; border-radius: 8px; }

/* ════════════════════════════════════════════════════════════════════════════
   Klasy aplikowane na <html> przez JS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Rozmiar tekstu ──────────────────────────────────────────────────────── */
html.szk-a11y-font-sm { font-size: 87.5% !important; }   /* 0.875 * 100% base */
html.szk-a11y-font-lg { font-size: 118.75% !important; } /* 1.1875 * 100% base */

/* ── Interlinia ──────────────────────────────────────────────────────────── */
html.szk-a11y-lh-sm *  { line-height: 1.2 !important; }
html.szk-a11y-lh-lg *  { line-height: 2.0 !important; }
html.szk-a11y-lh-sm #szk-a11y *,
html.szk-a11y-lh-lg #szk-a11y * { line-height: normal !important; }
/* Dekoracyjny cudzysłów w sekcji cytat — nie zmienia interlinii */
html.szk-a11y-lh-sm .quote-mark,
html.szk-a11y-lh-lg .quote-mark { line-height: .5 !important; }

/* ── Wysoki kontrast — czarne tło, biały tekst, żółte linki ─────────────── */
html.szk-a11y-contrast body { background: #000 !important; }
html.szk-a11y-contrast body *:not(#szk-a11y):not(#szk-a11y *) {
  background-color: #000 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
}
html.szk-a11y-contrast a:not(#szk-a11y a) { color: #ffff00 !important; }
html.szk-a11y-contrast img:not(#szk-a11y img) { filter: contrast(120%) brightness(0.88); }

/* Przywróć style widgetu w trybie kontrastu
   UWAGA: globalna reguła ma specyficzność (1,1,2) przez #szk-a11y w :not() —
   restore reguły muszą mieć min. (1,1,2) i stać DALEJ w pliku (remis → wygrywa późniejszy).
   Dodajemy body do selektora: html.cls body #id = (1,1,2) i wygrywamy remis. */
html.szk-a11y-contrast body #szk-a11y-tab                        { background: #111 !important; color: #fff !important; border-radius: 0 12px 12px 0; }
html.szk-a11y-contrast body #szk-a11y-panel                      { background: #fff !important; color: #1e293b !important; }
html.szk-a11y-contrast body #szk-a11y-panel .a11y-panel__header  { background: #111 !important; color: #fff !important; }
html.szk-a11y-contrast body #szk-a11y-panel .a11y-panel__title   { color: #fff !important; }
html.szk-a11y-contrast body #szk-a11y-close                      { background: rgba(255,255,255,.15) !important; color: #fff !important; }
html.szk-a11y-contrast body #szk-a11y-panel .a11y-row            { background: transparent !important; }
html.szk-a11y-contrast body #szk-a11y-panel .a11y-row__label     { color: #334155 !important; }
html.szk-a11y-contrast body #szk-a11y-panel .a11y-stepper        { background: #f1f5f9 !important; }
html.szk-a11y-contrast body #szk-a11y-panel .a11y-stepper button { color: #64748b !important; background: transparent !important; }
html.szk-a11y-contrast body #szk-a11y-panel .a11y-stepper button[aria-pressed="true"] { background: #fff !important; color: #1a56db !important; }
html.szk-a11y-contrast body #szk-a11y-panel .a11y-toggle         { background: #cbd5e1 !important; }
html.szk-a11y-contrast body #szk-a11y-panel .a11y-toggle[aria-pressed="true"] { background: #1a56db !important; }
html.szk-a11y-contrast body #szk-a11y-panel .a11y-toggle__thumb  { background: #fff !important; }
html.szk-a11y-contrast body #szk-a11y-panel .a11y-reset-btn      { background: #f1f5f9 !important; color: #475569 !important; border-color: #e2e8f0 !important; }
html.szk-a11y-contrast body #szk-a11y-panel .a11y-declaration-link { color: #1a56db !important; }
html.szk-a11y-contrast body #szk-a11y-panel .a11y-divider        { background: #e2e8f0 !important; }
html.szk-a11y-contrast body #szk-a11y-panel .a11y-panel__body    { background: #fff !important; }

/* ── Tryb szarości ───────────────────────────────────────────────────────── */
html.szk-a11y-grayscale { filter: grayscale(1); }
html.szk-a11y-grayscale.szk-a11y-contrast { filter: grayscale(1); }

/* ── Podkreślenie linków ─────────────────────────────────────────────────── */
html.szk-a11y-underline a { text-decoration: underline !important; }

/* ── Desktop: tab pionowy po lewej, panel otwiera się w prawo ───────────── */
@media (min-width: 1100px) {
  /* Kontener poziomy — tab po lewej, panel po prawej; align:center = tab nie skacze */
  #szk-a11y                        { flex-direction: row; align-items: center; }
  #szk-a11y-tab                    { order: 1; flex-direction: column; width: 36px; height: auto; min-width: 0; min-height: 0; padding: 10px 0; gap: 5px; }
  #szk-a11y-panel                  { order: 2; }
  /* Gdy panel otwarty — tab rozciąga się na pełną wysokość panelu, narożniki zerowe */
  #szk-a11y.is-open #szk-a11y-tab { border-radius: 0; box-shadow: none; align-self: stretch; }
  #szk-a11y-tab span               { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; letter-spacing: .12em; }
}

/* ── Mobile: poniżej 1100px → dół ekranu ──────────────────────────────── */
@media (max-width: 1099px) {
  #szk-a11y        { top: auto; bottom: 0; transform: none; }
  #szk-a11y-tab    { border-radius: 0 12px 0 0; }
}

/* ── Małe ekrany: węższy panel ───────────────────────────────────────── */
@media (max-width: 500px) {
  #szk-a11y-panel { width: 252px; }
  .a11y-stepper button { width: 30px; }
}

@media print {
  #szk-a11y { display: none !important; }
}