/* ==========================================================
   Premium report reader (0.15.20)
   One chapter on screen at a time, with a chapter list, position
   and step controls. Mobile first.

   A saved report carries its own inline <style> block, which sits
   later in the document than this file. Overrides are therefore
   written with two classes so they win regardless of order.
   ========================================================== */
.hspe-premium-report--reader{
  --hspe-reader-plum:#38223f;
  --hspe-reader-plum-deep:#271630;
  --hspe-reader-rose:#8e4869;
  --hspe-reader-gold:#c49a3c;
  --hspe-reader-line:#e6d9c6;
  --hspe-reader-surface:#fffdf9;
  --hspe-reader-surface-soft:#fdf7ed;
  --hspe-reader-muted:#6c5f70;
}

/* An author rule can out-rank the browser's own [hidden] rule, so the
   reader states it explicitly for everything it hides. */
.hspe-premium-report--reader [hidden]{display:none!important}

.hspe-reader{
  box-sizing:border-box;
  margin:0 0 16px;
}
.hspe-reader *,
.hspe-reader *::before,
.hspe-reader *::after{box-sizing:border-box}

/* ---------- bar ---------- */
.hspe-reader__bar{
  display:grid;
  /* On the narrowest phones the chapter-list button gets a full row of its
     own, so its label never wraps onto two lines. */
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "list list"
    "progress all";
  align-items:end;
  gap:10px;
  padding:12px;
  border:1px solid var(--hspe-reader-line);
  border-radius:16px;
  background-color:var(--hspe-reader-surface);
  background-image:linear-gradient(145deg,var(--hspe-reader-surface),var(--hspe-reader-surface-soft));
  box-shadow:0 6px 20px rgba(58,38,62,.07);
}
.hspe-reader__list-toggle{grid-area:list}
.hspe-reader__progress{grid-area:progress;min-width:0}
.hspe-reader__all-toggle{grid-area:all}

.hspe-reader__list-toggle{
  display:flex;
  min-height:48px;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid var(--hspe-reader-line);
  border-radius:12px;
  background:var(--hspe-reader-surface);
  color:var(--hspe-reader-plum);
  font:inherit;
  font-weight:700;
  cursor:pointer;
}
.hspe-reader__list-icon{color:var(--hspe-reader-rose);font-size:16px}
.hspe-reader__list-toggle:hover{border-color:var(--hspe-reader-gold)}

.hspe-reader__all-toggle{
  min-height:44px;
  padding:9px 13px;
  white-space:nowrap;
  border:1px solid var(--hspe-reader-line);
  border-radius:12px;
  background:var(--hspe-reader-surface);
  color:var(--hspe-reader-plum);
  font:inherit;
  font-size:13px;
  font-weight:650;
  cursor:pointer;
}
.hspe-reader__all-toggle:hover{border-color:var(--hspe-reader-gold)}
.hspe-reader__all-toggle[aria-pressed="true"]{
  border-color:var(--hspe-reader-plum);
  background:var(--hspe-reader-plum);
  color:#fff9ef;
}

.hspe-reader__progress-text{
  margin:0 0 7px;
  color:var(--hspe-reader-plum);
  font-size:14px;
  font-weight:700;
  letter-spacing:.01em;
}
.hspe-reader__meter{
  position:relative;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:#efe3d2;
}
.hspe-reader__meter-fill{
  display:block;
  block-size:100%;
  inline-size:0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--hspe-reader-rose),var(--hspe-reader-gold));
  transition:inline-size .25s ease;
}

/* ---------- chapter list ---------- */
.hspe-reader__list{
  margin:10px 0 0;
  padding:12px;
  border:1px solid var(--hspe-reader-line);
  border-radius:16px;
  background:var(--hspe-reader-surface);
}
.hspe-reader__list-items{
  display:grid;
  /* The column count follows the width actually available, so the menu never
     forces two cramped columns into a narrow theme column, and never stretches
     two tiles across a wide one. */
  grid-template-columns:repeat(auto-fit,minmax(min(196px,100%),1fr));
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:none;
}
/* Each tile is its own container, so the layout below reacts to the tile's
   width rather than the screen's. The container has to be the list item: an
   element cannot query its own width. */
.hspe-reader__list-item{
  container-type:inline-size;
  container-name:hspe-tile;
  margin:0;
  padding:0;
  list-style:none;
}
.hspe-reader__list-item::before,
.hspe-reader__list-item::marker{content:none}

/* A tile, not a row: drawn icon above the chapter name. The drawing comes
   from the shared <symbol> sprite the plugin prints in the footer, so this
   tile and the mark in the chapter heading are the same picture. */
.hspe-reader__list-link{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:center;
  justify-items:center;
  gap:7px;
  min-height:104px;
  padding:13px 9px;
  border:1px solid var(--hspe-reader-line);
  border-radius:15px;
  background-color:var(--hspe-reader-surface);
  background-image:linear-gradient(150deg,#fffdfa,#fff6e9);
  color:var(--hspe-reader-plum);
  font-size:13px;
  font-weight:600;
  text-align:center;
  text-decoration:none;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.hspe-reader__list-link:hover{
  border-color:var(--hspe-reader-gold);
  color:var(--hspe-reader-plum);
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:0 9px 20px rgba(66,42,77,.1);
}
.hspe-reader__list-art{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:42px;
  height:42px;
  border:1px solid #e8dcc6;
  border-radius:13px;
  background-color:#fff6e7;
  background-image:linear-gradient(150deg,#fff9ef,#f6ecd6);
  color:#6d4a85;
}
.hspe-chapter-icon{
  display:block;
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hspe-reader__list-art .hspe-chapter-icon{width:23px;height:23px}
.hspe-reader__list-text{display:grid;justify-items:center;gap:1px;min-width:0}
.hspe-reader__list-number{
  color:#a4772b;
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.hspe-reader__list-label{
  min-width:0;
  font-size:13px;
  font-weight:650;
  line-height:1.3;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;
}

/* Wide enough for a row: icon beside the name, text left-aligned. Below this
   the tile stays a small square with the name underneath. */
@container hspe-tile (min-width:170px){
  .hspe-reader__list-link{
    grid-template-columns:auto minmax(0,1fr);
    justify-items:start;
    align-items:center;
    gap:11px;
    min-height:62px;
    padding:10px 12px;
    text-align:start;
  }
  .hspe-reader__list-text{justify-items:start;gap:0}
  .hspe-reader__list-label{font-size:14.5px}
}
@container hspe-tile (min-width:230px){
  .hspe-reader__list-link{min-height:66px;padding:11px 14px}
  .hspe-reader__list-art{width:44px;height:44px}
  .hspe-reader__list-art .hspe-chapter-icon{width:24px;height:24px}
  .hspe-reader__list-label{font-size:15px}
}

.hspe-reader__list-item.is-current .hspe-reader__list-link{
  border-color:var(--hspe-reader-plum);
  background-color:var(--hspe-reader-plum-deep);
  background-image:linear-gradient(135deg,var(--hspe-reader-plum-deep),var(--hspe-reader-plum) 70%,#4d2b50);
  color:#fff9ef;
}
/* The icon line follows the text colour; the accent is repainted through the
   inherited custom property, because a class selector would not reach inside
   the <use> shadow tree in every browser. */
.hspe-reader__list-item.is-current .hspe-reader__list-art{
  border-color:#5e3c66;
  background-color:#4a3252;
  background-image:none;
  color:#f6e7c4;
  --hspe-ico-accent:#f2d99c;
}
.hspe-reader__list-item.is-current .hspe-reader__list-number{color:#f2d99c}

/* ---------- previous / next ---------- */
.hspe-reader__footer{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(165px,100%),1fr));
  gap:10px;
  margin:18px 0 8px;
}
.hspe-reader__step{
  display:flex;
  min-height:62px;
  align-items:center;
  gap:11px;
  padding:11px 13px;
  border:1px solid var(--hspe-reader-line);
  border-radius:14px;
  background:var(--hspe-reader-surface);
  color:var(--hspe-reader-plum);
  font:inherit;
  text-align:start;
  cursor:pointer;
}
.hspe-reader__step--next{flex-direction:row-reverse;text-align:end}
.hspe-reader__step:hover:not(:disabled){border-color:var(--hspe-reader-gold);background:var(--hspe-reader-surface-soft)}
.hspe-reader__step:disabled{opacity:.42;cursor:default}
.hspe-reader__step-arrow{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:32px;height:32px;
  border-radius:10px;
  background:var(--hspe-reader-surface-soft);
  color:var(--hspe-reader-rose);
  font-size:16px;
}
.hspe-reader__step-text{min-width:0;display:block}
.hspe-reader__step-text small{
  display:block;
  color:var(--hspe-reader-muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.hspe-reader__step-text strong{
  display:block;
  margin-top:2px;
  overflow:hidden;
  font-size:15px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---------- focus ---------- */
.hspe-reader__list-toggle:focus-visible,
.hspe-reader__all-toggle:focus-visible,
.hspe-reader__step:focus-visible,
.hspe-reader__list-link:focus-visible{
  outline:3px solid var(--hspe-reader-rose);
  outline-offset:2px;
}
.hspe-premium-report--reader .hspe-premium-report__chapter h2:focus-visible{
  outline:3px solid var(--hspe-reader-rose);
  outline-offset:4px;
  border-radius:4px;
}

/* ---------- the open chapter ---------- */
.hspe-premium-report.hspe-premium-report--reader .hspe-premium-report__chapter{
  scroll-margin-top:14px;
}

/* ==========================================================
   Trzy klasy urządzeń

   telefon  ≤599   pasek w dwóch rzędach, spis w treści strony,
                   „Poprzedni/Następny” obok siebie (poniżej 380
                   jeden pod drugim)
   tablet   600–1023  pasek w jednym rzędzie, spis w dwóch
                   kolumnach, nadal w treści strony
   desktop  ≥1024  spis jako przyklejona kolumna obok rozdziału
   ========================================================== */

/* ---------- mały telefon ---------- */
@media (max-width:379px){
  .hspe-reader__bar{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"list" "progress" "all";
    align-items:stretch;
    padding:11px;
  }
  .hspe-reader__all-toggle{width:100%}
  /* Dwa przyciski obok siebie zostawiały na nazwę rozdziału
     mniej niż 60 px, więc na najwęższych ekranach idą w słupek. */
  .hspe-reader__footer{grid-template-columns:minmax(0,1fr);gap:8px}
  .hspe-reader__step--next{flex-direction:row;text-align:start}
  .hspe-reader__step{min-height:58px}
  .hspe-reader__list{padding:10px}
  .hspe-reader__list-items{gap:7px}
}

/* ==========================================================
   Szerokość, którą czytnik naprawdę ma

   Motyw potrafi dać stronie Premium kolumnę treści szerokości
   535 px nawet przy oknie 1440 px. Zapytanie o szerokość okna
   tego nie widzi i wciskało wtedy kolumnę spisu obok rozdziału
   albo trzy kolumny listy w miejsce, w którym się nie mieszczą.
   Dlatego układ czytnika zależy od zapytań kontenerowych,
   a zapytania o okno zostają tylko jako zapas dla przeglądarek
   bez obsługi @container.
   ========================================================== */
/* Kontener nie może odpytywać samego siebie, dlatego nosi go opakowanie
   dodawane przez czytnik, a raport pyta o szerokość tego opakowania. */
.hspe-report-shell{
  container-type:inline-size;
  container-name:hspe-report;
}

/* ---------- pasek i lista: od ~560 px dostępnej szerokości ---------- */
@container hspe-report (min-width:560px){
  .hspe-reader__bar{
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"list progress all";
    align-items:center;
    gap:14px;
    padding:13px 15px;
  }
  .hspe-reader__footer{gap:12px}
  .hspe-reader__step{min-height:66px}
}

/* ---------- spis obok rozdziału: dopiero gdy jest na to miejsce ---------- */
@container hspe-report (min-width:900px){
  .hspe-premium-report.hspe-premium-report--reader{
    display:grid;
    grid-template-columns:minmax(238px,268px) minmax(0,1fr);
    column-gap:26px;
    align-items:start;
  }
  .hspe-premium-report.hspe-premium-report--reader > .hspe-premium-report__hero,
  .hspe-premium-report.hspe-premium-report--reader > details,
  .hspe-premium-report.hspe-premium-report--reader > .hspe-premium-report__technical{
    grid-column:1 / -1;
  }
  .hspe-premium-report.hspe-premium-report--reader > .hspe-reader{
    position:sticky;
    top:14px;
    grid-column:1;
    margin-bottom:0;
    /* Spis dwunastu rozdziałów bywa wyższy niż okno; własne
       przewijanie trzyma ostatnie pozycje w zasięgu. */
    max-height:calc(100vh - 28px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-inline-end:4px;
  }
  .hspe-premium-report.hspe-premium-report--reader > .hspe-premium-report__chapter,
  .hspe-premium-report.hspe-premium-report--reader > .hspe-reader__footer{
    grid-column:2;
  }
  .hspe-reader__bar{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"progress" "all";
    align-items:stretch;
    gap:11px;
  }
    /* Kolumna obok rozdziału jest wąska, więc mieści jeden kafelek w rzędzie;
     o tym, że kafelek układa się poziomo, decyduje jego własna szerokość. */
  .hspe-reader__list-items{grid-template-columns:minmax(0,1fr);gap:6px}
  .hspe-reader__list{margin-top:11px;max-height:none}
  .hspe-reader__all-toggle{width:100%}
  .hspe-reader__footer{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@container hspe-report (min-width:1150px){
  .hspe-premium-report.hspe-premium-report--reader{
    grid-template-columns:minmax(255px,290px) minmax(0,1fr);
    column-gap:30px;
  }
  .hspe-reader__list{padding:13px}
}

/* ---------- zapas dla przeglądarek bez @container ---------- */
@supports not (container-type:inline-size){
  /* Bez zapytań o kontener kafelek nie zna swojej szerokości, więc układ
     poziomy włącza tu szerokość okna. Przybliżenie, ale lepsze niż zostawienie
     wszystkiego w wariancie pionowym. */
  @media (min-width:600px){
    .hspe-reader__list-link{
      grid-template-columns:auto minmax(0,1fr);
      justify-items:start;
      align-items:center;
      gap:11px;
      min-height:62px;
      padding:10px 12px;
      text-align:start;
    }
    .hspe-reader__list-text{justify-items:start;gap:0}
    .hspe-reader__list-label{font-size:14.5px}
  }
  @media (min-width:600px){
    .hspe-reader__bar{
      grid-template-columns:auto minmax(0,1fr) auto;
      grid-template-areas:"list progress all";
      align-items:center;
      gap:14px;
      padding:13px 15px;
    }
      .hspe-reader__footer{gap:12px}
    .hspe-reader__step{min-height:66px}
  }
  @media (min-width:1024px){
    .hspe-premium-report.hspe-premium-report--reader{
      display:grid;
      grid-template-columns:minmax(238px,268px) minmax(0,1fr);
      column-gap:26px;
      align-items:start;
    }
    .hspe-premium-report.hspe-premium-report--reader > .hspe-premium-report__hero,
    .hspe-premium-report.hspe-premium-report--reader > details,
    .hspe-premium-report.hspe-premium-report--reader > .hspe-premium-report__technical{
      grid-column:1 / -1;
    }
    .hspe-premium-report.hspe-premium-report--reader > .hspe-reader{
      position:sticky;
      top:14px;
      grid-column:1;
      margin-bottom:0;
      max-height:calc(100vh - 28px);
      overflow-y:auto;
      overscroll-behavior:contain;
      padding-inline-end:4px;
    }
    .hspe-premium-report.hspe-premium-report--reader > .hspe-premium-report__chapter,
    .hspe-premium-report.hspe-premium-report--reader > .hspe-reader__footer{
      grid-column:2;
    }
    .hspe-reader__bar{
      grid-template-columns:minmax(0,1fr);
      grid-template-areas:"progress" "all";
      align-items:stretch;
      gap:11px;
    }
    /* Kolumna obok rozdziału jest wąska, więc mieści jeden kafelek w rzędzie;
       o tym, że kafelek układa się poziomo, decyduje jego własna szerokość. */
    .hspe-reader__list-items{grid-template-columns:minmax(0,1fr);gap:6px}
    .hspe-reader__list{margin-top:11px;max-height:none}
    .hspe-reader__all-toggle{width:100%}
    .hspe-reader__footer{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  }
}

/* ---------- print: the whole report ---------- */
@media print{
  .hspe-reader,
  .hspe-reader__footer{display:none!important}
  .hspe-premium-report--reader .hspe-premium-report__chapter[hidden]{display:block!important}
  .hspe-premium-report--reader .hspe-premium-report__nav[hidden]{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  .hspe-reader__meter-fill{transition:none}
}
@media (prefers-contrast:more){
  .hspe-reader__list-link{border-color:var(--hspe-reader-line)}
  .hspe-reader__step-text small{color:#4c4150}
}

/* 0.18.44 — grouped chapter list */
.hspe-reader__list-group{list-style:none;margin:12px 4px 4px;padding:0;color:#a4772b;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hspe-reader__list-group:first-child{margin-top:2px}
.hspe-reader__list-item.is-pending .hspe-reader__list-link{opacity:.62}