/* Nawigacja jest geometrią kolejnych stron tego samego tomu. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-folio {
  color: var(--notebook-muted, var(--muted));
  font: 700 .5rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --- Spis zadań i arkuszy ---------------------------------------------- */

body.student-library-page .library-page {
  max-width: 1120px;
}

.library-stage {
  position: relative;
  isolation: isolate;
  min-height: 680px;
  overflow: visible;
  border: 1px solid var(--notebook-ink, var(--ink));
  color: var(--notebook-ink, var(--ink));
}

.library-stage::before {
  left: 42px;
}

.library-page-edge {
  position: absolute;
  top: 18px;
  right: -10px;
  bottom: 24px;
  width: 10px;
  border-left: 1px solid rgba(23, 18, 24, .34);
  background: repeating-linear-gradient(0deg, var(--notebook-paper-soft, var(--paper-soft)) 0 3px, rgba(23, 18, 24, .15) 3px 4px);
  pointer-events: none;
}

.library-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: end;
  padding: clamp(44px, 6vw, 72px) clamp(38px, 6vw, 72px) 28px;
  border-bottom: 1px solid var(--notebook-rule-strong, var(--rule-strong));
}

.library-heading::before {
  position: absolute;
  top: 34px;
  left: 0;
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, var(--notebook-violet), var(--notebook-lime));
  content: "";
}

.library-heading h1 {
  max-width: 11ch;
  margin: 10px 0 0;
  font-size: clamp(3.2rem, 7vw, 6.6rem);
  line-height: .88;
}

.library-next {
  align-self: end;
}

.library-modes {
  display: flex;
  gap: 0;
  padding: 0 clamp(38px, 6vw, 72px);
  border-bottom: 1px solid var(--notebook-rule-strong, var(--rule-strong));
}

.library-modes a {
  position: relative;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  padding: 0 18px;
  color: var(--notebook-muted, var(--muted));
  font: 800 var(--pismo-mikro)/1 var(--mono);
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.library-modes a:first-child {
  margin-left: -18px;
}

.library-modes a.is-active {
  color: var(--notebook-ink, var(--ink));
}

.library-modes a.is-active::after {
  position: absolute;
  right: 18px;
  bottom: -1px;
  left: 18px;
  height: 3px;
  background: var(--notebook-violet, #7566a8);
  content: "";
}

.library-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1.55fr) repeat(3, minmax(130px, 1fr)) auto;
  gap: 13px;
  align-items: end;
  padding: 22px clamp(38px, 6vw, 72px);
  border-bottom: 1px solid var(--notebook-rule-strong, var(--rule-strong));
  background: var(--powierzchnia-2);
}

.library-filters label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.library-filters label > span {
  color: var(--notebook-muted, var(--muted));
  font: 700 var(--pismo-mikro)/1 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.library-filters input,
.library-filters select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
}

.library-filter-actions {
  display: flex;
  min-height: 40px;
  gap: 13px;
  align-items: center;
  justify-content: flex-end;
}

.library-filter-actions button,
.sheet-choice-footer button {
  min-height: 38px;
  border: 1px solid var(--notebook-ink, var(--ink));
  border-radius: 0;
  background: var(--notebook-ink, var(--ink));
  color: var(--notebook-paper, var(--paper));
  padding: 8px 17px;
  box-shadow: inset 0 -3px 0 var(--notebook-lime);
  font: 800 var(--pismo-mikro)/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.library-filter-actions a {
  color: var(--notebook-muted, var(--muted));
  font: 700 var(--pismo-mikro)/1 var(--mono);
  text-decoration: none;
  text-transform: uppercase;
}

.library-filter-more {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(23, 18, 24, .18);
  padding-top: 10px;
}

.library-filter-more summary {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  color: var(--notebook-violet-deep, #4d416d);
  cursor: pointer;
  font: 800 var(--pismo-mikro)/1 var(--mono);
  letter-spacing: .06em;
  list-style: none;
  text-transform: uppercase;
}

.library-filter-more summary::-webkit-details-marker {
  display: none;
}

.library-filter-more summary::after {
  margin-left: 8px;
  color: var(--notebook-violet, #7566a8);
  content: "+";
  font-size: .9rem;
}

.library-filter-more[open] summary::after {
  content: "−";
}

.library-filter-more-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  padding-top: 9px;
}

.taxonomy-path {
  display: flex;
  min-height: 42px;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding: 8px clamp(38px, 6vw, 72px);
  border-bottom: 1px solid rgba(23, 18, 24, .2);
  background: rgba(117, 102, 168, .05);
  font: var(--pismo-mikro)/1.35 var(--mono);
}

.taxonomy-path > span:first-child {
  color: var(--notebook-violet, #7566a8);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.library-list,
.sheet-list {
  padding: 10px clamp(38px, 6vw, 72px) 58px;
}

.task-browser-row,
.sheet-browser-row {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 76px;
  border-bottom: 1px solid rgba(23, 18, 24, .2);
  color: var(--notebook-ink, var(--ink));
  text-decoration: none;
}

.task-browser-row {
  grid-template-columns: 50px minmax(0, 1fr) auto 22px;
  gap: 16px;
}

.task-browser-row::before,
.sheet-browser-row::before {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: -18px;
  width: 2px;
  background: var(--notebook-violet, #7566a8);
  content: "";
  opacity: 0;
  transform: scaleY(.2);
  transition: opacity 140ms ease, transform 140ms ease;
}

.task-browser-row:hover::before,
.task-browser-row:focus-visible::before,
.sheet-browser-row:hover::before,
.sheet-browser-row:focus-visible::before {
  opacity: .72;
  transform: scaleY(1);
}

/* Karty zadan (biblioteka.css) zastapily wiersz z numerem/strzalka -
   selektory .task-browser-* zostaly tylko tam, gdzie dziela regule z
   arkuszami (.sheet-*), ktore wciaz renderuja wiersze. */
.sheet-year {
  font: 800 .7rem/1 var(--mono);
  letter-spacing: .03em;
}

.sheet-browser-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.sheet-browser-copy strong {
  overflow-wrap: anywhere;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 560;
  line-height: 1.15;
}

.sheet-browser-copy small,
.sheet-open-copy {
  color: var(--notebook-muted, var(--muted));
  font: var(--pismo-mikro)/1.35 var(--mono);
  letter-spacing: .025em;
}

.sheet-open-copy {
  white-space: nowrap;
  text-transform: uppercase;
}

.sheet-browser-arrow {
  color: var(--notebook-violet, #7566a8);
  font-size: 1.1rem;
}

.sheet-browser-row {
  grid-template-columns: 78px minmax(0, 1fr) auto 22px;
  gap: 17px;
  min-height: 88px;
}

.sheet-year {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 560;
}

.library-empty {
  padding: 58px 0;
}

.library-empty h2 {
  max-width: 18ch;
  margin: 8px 0 24px;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.library-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  padding: 18px clamp(38px, 6vw, 72px) 36px;
  border-top: 1px solid var(--notebook-rule-strong, var(--rule-strong));
  font: 700 var(--pismo-mikro)/1 var(--mono);
  text-transform: uppercase;
}

.library-pagination a {
  text-decoration: none;
}

.library-pagination a:last-child {
  justify-self: end;
}

.library-pagination strong {
  color: var(--notebook-muted, var(--muted));
}

.library-folio {
  position: absolute;
  right: 24px;
  bottom: 16px;
}

/* --- Rozkładówka arkusza ----------------------------------------------- */

body.student-sheet-page .sheet-page {
  width: min(1240px, 100%);
}

.sheet-breadcrumb {
  margin-bottom: 14px;
}

.sheet-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 720px;
  color: var(--notebook-ink, var(--ink));
  filter: drop-shadow(14px 20px 28px rgba(0, 0, 0, .32));
}

.sheet-stage::before,
.sheet-stage::after {
  position: absolute;
  z-index: -2;
  border: 1px solid rgba(23, 18, 24, .25);
  background: var(--notebook-paper-soft, var(--paper-soft));
  content: "";
}

.sheet-stage::before {
  inset: 6px -5px -7px 5px;
}

.sheet-stage::after {
  inset: 11px -9px -12px 10px;
  z-index: -3;
  opacity: .5;
}

.sheet-leaf {
  position: relative;
  min-width: 0;
  border: 1px solid var(--notebook-ink, var(--ink));
  background-color: var(--notebook-paper, var(--paper));
}

.sheet-leaf--summary {
  display: flex;
  flex-direction: column;
  padding: clamp(42px, 5vw, 64px) clamp(34px, 4vw, 54px) 38px;
  border-right: 0;
  background-image:
    linear-gradient(90deg, transparent 0 42px, rgba(117, 102, 168, .16) 42px 43px, transparent 43px),
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(23, 18, 24, .026) 35px 36px);
}

.sheet-leaf--tasks {
  display: flex;
  flex-direction: column;
  padding: clamp(38px, 4vw, 54px) clamp(32px, 4vw, 52px) 38px;
  background-image:
    linear-gradient(90deg, transparent 0 50px, rgba(117, 102, 168, .12) 50px 51px, transparent 51px),
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(23, 18, 24, .026) 35px 36px);
}

.sheet-gutter {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 50%;
  z-index: 3;
  width: 20px;
  pointer-events: none;
  transform: translateX(-10px);
  background: linear-gradient(90deg, var(--linia-mocna), var(--polysk) 48%, var(--linia-mocna));
  opacity: .55;
}

.sheet-page-edge {
  position: absolute;
  right: -10px;
  bottom: 24px;
  z-index: 1;
  width: 10px;
  height: calc(100% - 48px);
  border-left: 1px solid rgba(23, 18, 24, .32);
  background: repeating-linear-gradient(0deg, var(--notebook-paper-soft, var(--paper-soft)) 0 3px, rgba(23, 18, 24, .15) 3px 4px);
}

.sheet-heading h1 {
  max-width: 9ch;
  margin: 12px 0 6px;
  font-size: clamp(3.3rem, 7vw, 6.4rem);
  line-height: .86;
}

.sheet-type {
  margin: 0;
  color: var(--notebook-muted, var(--muted));
  font: 700 var(--pismo-mikro)/1.4 var(--mono);
  text-transform: uppercase;
}

.sheet-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 38px 0 0;
  border-block: 1px solid rgba(23, 18, 24, .34);
}

.sheet-metrics div {
  display: grid;
  gap: 7px;
  padding: 15px 10px;
  border-right: 1px solid rgba(23, 18, 24, .18);
}

.sheet-metrics div:first-child {
  padding-left: 0;
}

.sheet-metrics div:last-child {
  padding-right: 0;
  border-right: 0;
}

.sheet-metrics dt {
  grid-row: 2;
  color: var(--notebook-muted, var(--muted));
  font: 700 var(--pismo-mikro)/1 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.sheet-metrics dd {
  grid-row: 1;
  margin: 0;
  font: 700 .8rem/1.25 var(--mono);
}

.sheet-taxonomy {
  margin-top: 38px;
}

.sheet-taxonomy h2 {
  margin: 9px 0 17px;
  font: 560 clamp(1.6rem, 2.7vw, 2.3rem)/1 var(--serif);
  letter-spacing: -.04em;
}

.sheet-taxonomy ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sheet-taxonomy li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(23, 18, 24, .18);
  font: 700 var(--pismo-mikro)/1.35 var(--mono);
}

.sheet-taxonomy li small {
  color: var(--notebook-violet, #7566a8);
}

.sheet-summary-actions {
  display: grid;
  gap: 17px;
  justify-items: start;
  margin-top: auto;
  padding-top: 38px;
}

.sheet-back-link {
  color: var(--notebook-muted, var(--muted));
  font: 700 var(--pismo-mikro)/1 var(--mono);
  text-decoration: none;
  text-transform: uppercase;
}

.sheet-choice-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--notebook-ink, var(--ink));
}

.sheet-choice-heading h2 {
  margin: 8px 0 0;
  font: 560 clamp(2.4rem, 4.3vw, 4.6rem)/.9 var(--serif);
  letter-spacing: -.06em;
}

.sheet-choice-heading > span {
  color: var(--notebook-muted, var(--muted));
  font: 700 var(--pismo-mikro)/1 var(--mono);
}

.sheet-choice-error {
  margin: 15px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--red, #d4432f);
  background: rgba(212, 67, 47, .07);
  font-size: .76rem;
}

.sheet-task-list {
  margin-top: 10px;
}

.sheet-task-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid rgba(23, 18, 24, .19);
}

.sheet-task-check {
  position: relative;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.sheet-task-check input {
  position: absolute;
  opacity: 0;
}

.sheet-task-check > span[aria-hidden="true"] {
  width: 15px;
  height: 15px;
  border: 1px solid var(--notebook-ink, var(--ink));
  background: var(--notebook-paper, var(--paper));
}

.sheet-task-check input:checked + span[aria-hidden="true"] {
  box-shadow: inset 0 0 0 4px var(--notebook-paper, var(--paper));
  background: var(--notebook-violet, #7566a8);
}

.sheet-task-check input:focus-visible + span[aria-hidden="true"] {
  outline: 2px solid var(--notebook-lime, #c9f227);
  outline-offset: 3px;
}

.sheet-task-link {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 18px;
  gap: 12px;
  align-items: center;
  min-height: 70px;
  color: var(--notebook-ink, var(--ink));
  text-decoration: none;
}

.sheet-task-number {
  font: 800 .66rem/1 var(--mono);
}

.sheet-task-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.sheet-task-copy strong {
  overflow-wrap: anywhere;
  font: 560 .98rem/1.12 var(--serif);
}

.sheet-task-copy small,
.sheet-task-state {
  color: var(--notebook-muted, var(--muted));
  font: var(--pismo-mikro)/1.35 var(--mono);
}

.sheet-task-state {
  white-space: nowrap;
  text-transform: uppercase;
}

.sheet-choice-footer {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 26px;
  border-top: 1px solid var(--notebook-ink, var(--ink));
}

.sheet-choice-footer > span {
  max-width: 28ch;
  color: var(--notebook-muted, var(--muted));
  font: var(--pismo-mikro)/1.4 var(--mono);
}

.sheet-leaf .page-folio {
  position: absolute;
  right: 24px;
  bottom: 15px;
}

/* --- Przewracanie stron w Solverze ------------------------------------- */

.problem-stage > .task-sequence {
  grid-column: 1 / -1;
}

.task-sequence {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto minmax(110px, 1fr);
  gap: 0;
  align-items: stretch;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--notebook-ink, var(--ink));
  background: var(--powierzchnia);
  box-shadow: none;
}

.task-sequence > a,
.task-sequence > span {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  padding: 8px 16px;
  color: var(--notebook-ink, var(--ink));
  font: 700 var(--pismo-mikro)/1 var(--mono);
  letter-spacing: .045em;
  text-decoration: none;
  text-transform: uppercase;
}

.task-sequence > a:first-child,
.task-sequence > span:first-child {
  border-right: 1px solid rgba(23, 18, 24, .2);
}

.task-sequence > a:last-child,
.task-sequence > span:last-child {
  justify-content: flex-end;
  border-left: 1px solid rgba(23, 18, 24, .2);
}

.task-sequence > a:hover,
.task-sequence > a:focus-visible {
  background: rgba(117, 102, 168, .07);
}

.task-sequence > span[aria-disabled="true"] {
  color: var(--notebook-muted, var(--muted));
  opacity: .52;
}

.task-sequence > .task-sequence-center {
  display: grid;
  min-width: 136px;
  gap: 3px;
  place-content: center;
  padding: 7px 20px;
  text-align: center;
}

.task-sequence-center a {
  color: var(--notebook-ink, var(--ink));
  font: 800 var(--pismo-mikro)/1.2 var(--mono);
  letter-spacing: .065em;
  text-decoration: none;
  text-transform: uppercase;
}

.task-sequence-center small {
  color: var(--notebook-muted, var(--muted));
  font: .5rem/1.2 var(--mono);
}

@media (max-width: 980px) {
  .library-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .library-search,
  .library-filter-more {
    grid-column: 1 / -1;
  }

  .library-filter-actions {
    justify-content: flex-start;
  }

  .sheet-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .sheet-stage {
    grid-template-columns: 1fr;
    filter: drop-shadow(8px 12px 20px rgba(0, 0, 0, .28));
  }

  .sheet-leaf--summary {
    border-right: 1px solid var(--notebook-ink, var(--ink));
    border-bottom: 0;
  }

  .sheet-gutter {
    top: auto;
    right: 1px;
    bottom: auto;
    left: 1px;
    width: auto;
    height: 18px;
    transform: translateY(-9px);
    background: linear-gradient(180deg, var(--linia-mocna), var(--polysk) 48%, var(--linia-mocna));
  }
}

@media (max-width: 620px) {
  body.student-library-page .library-page,
  body.student-sheet-page .sheet-page {
    width: 100%;
  }

  .library-stage {
    min-height: 0;
  }

  .library-stage::before {
    left: 14px;
  }

  .library-heading {
    grid-template-columns: 1fr;
    padding: 34px 22px 22px 32px;
  }

  .library-heading h1 {
    font-size: clamp(3rem, 15vw, 4.8rem);
  }

  .library-next {
    justify-self: start;
  }

  .library-modes {
    padding-inline: 32px 18px;
  }

  .library-filters {
    grid-template-columns: 1fr;
    padding: 20px 18px 22px 32px;
  }

  .library-search,
  .library-filter-more {
    grid-column: auto;
  }

  .library-filter-actions {
    justify-content: space-between;
  }

  .library-filter-more-fields {
    grid-template-columns: 1fr;
  }

  .taxonomy-path {
    padding-inline: 32px 18px;
  }

  .library-list,
  .sheet-list {
    padding: 6px 18px 44px 32px;
  }

  .task-browser-row {
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    gap: 10px;
    min-height: 82px;
  }

  .sheet-browser-row {
    grid-template-columns: 54px minmax(0, 1fr) 18px;
    gap: 10px;
  }

  .sheet-open-copy {
    display: none;
  }

  .sheet-browser-copy strong {
    font-size: 1rem;
  }

  .library-pagination {
    padding-inline: 32px 18px;
  }

  .sheet-leaf--summary,
  .sheet-leaf--tasks {
    padding: 34px 22px 34px 32px;
  }

  .sheet-heading h1 {
    font-size: clamp(3.2rem, 16vw, 5rem);
  }

  .sheet-choice-heading {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .sheet-task-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .sheet-task-link {
    grid-template-columns: 30px minmax(0, 1fr) 15px;
    gap: 9px;
    min-height: 78px;
  }

  .sheet-task-state {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin-top: -5px;
  }

  .sheet-task-link > span:last-child {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .sheet-choice-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .sheet-choice-footer > span {
    max-width: none;
  }

  .task-sequence {
    grid-template-columns: 1fr auto 1fr;
  }

  .task-sequence > a,
  .task-sequence > span {
    min-height: 46px;
    padding-inline: 9px;
    font-size: .5rem;
  }

  .task-sequence > .task-sequence-center {
    min-width: 92px;
    padding-inline: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .task-browser-row::before,
  .sheet-browser-row::before,
  .task-browser-row,
  .sheet-browser-row,
  .sheet-task-row {
    transition: none;
  }
}