.archive-stage {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(250px, 310px);
  min-height: 390px;
  border: 1px solid var(--linia-mocna);
  background: var(--paper);
}
.archive-mark {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 24px 12px;
  border-right: 1px solid var(--linia-mocna);
  background: var(--ground-dark);
}
.archive-mark span {
  font: 400 1.2rem/1 var(--serif);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.archive-mark i {
  width: 21px;
  height: 21px;
  border: 2px solid var(--ink);
  box-shadow: inset 6px -5px 0 var(--blue);
}
.archive-title {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(42px, 6vw, 78px);
  background:
    linear-gradient(90deg, transparent 0 64px, rgba(212, 67, 47, .13) 64px 65px, transparent 65px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(23, 23, 22, .045) 31px 32px),
    var(--paper);
}
.archive-title h1 {
  margin: 20px 0 16px;
  font: 400 clamp(2.4rem, 5vw, 4.8rem)/.96 var(--serif);
  letter-spacing: -.06em;
}
.archive-title > p:not(.scene-kicker) { max-width: 44ch; margin: 0; color: var(--muted); }
.archive-score { border-left: 1px solid var(--linia-mocna); }
.archive-score > span { margin-top: 28px; }
.archive-metrics { margin-top: 22px; }

.attempt-ledger { margin: 0; padding: 0; list-style: none; }
.attempt-entry {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) minmax(120px, auto);
  gap: 18px;
  align-items: center;
  min-height: 76px;
  padding: 14px 32px 14px 29px;
  border-top: 1px solid var(--rule);
  border-left: 3px solid transparent;
}
.attempt-entry:first-child { border-top: 0; }
.attempt-entry:has(.is-good) { border-left-color: var(--good); }
.attempt-entry:has(.is-partial) { border-left-color: var(--amber); }
.attempt-entry:has(.is-bad) { border-left-color: var(--red); }
.attempt-entry time {
  display: grid;
  gap: 3px;
  font: 700 .66rem/1.2 var(--mono);
}
.attempt-entry time small { color: var(--muted); font-weight: 400; }
.attempt-main { display: grid; gap: 4px; min-width: 0; }
.attempt-main strong { font: 400 1rem/1.25 var(--serif); }
.attempt-main span {
  overflow: hidden;
  color: var(--muted);
  font: var(--pismo-mikro)/1.4 var(--mono);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.attempt-result {
  justify-self: end;
  padding: 6px 14px;
  border-radius: 999px;
  font: 700 var(--pismo-mikro)/1.3 var(--mono);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.attempt-result.is-good { color: var(--good); background: var(--good-soft); }
.attempt-result.is-partial { color: var(--amber); background: var(--amber-soft); }
.attempt-result.is-bad { color: var(--red); background: var(--red-soft); }
.attempt-entry-empty { grid-template-columns: 1fr; color: var(--muted); }

.archive-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: 28px;
  padding: 26px 32px;
  border: 1px solid var(--linia-mocna);
  background: var(--paper-soft);
}
.archive-next h2 {
  margin: 8px 0 6px;
  font: 400 clamp(1.4rem, 3vw, 2.3rem)/1.1 var(--serif);
  letter-spacing: -.035em;
}
.archive-next p:not(.scene-kicker) { margin: 0; color: var(--muted); font-size: .8rem; }
.archive-group-head > p {
  margin: 0;
  color: var(--muted);
  font: var(--pismo-mikro)/1.4 var(--mono);
  text-transform: uppercase;
}
.archive-row-main { display: grid; gap: 4px; min-width: 0; }
.archive-row-main strong { font: 400 1rem/1.25 var(--serif); }
.archive-row-main small {
  overflow: hidden;
  color: var(--muted);
  font: var(--pismo-mikro)/1.4 var(--mono);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.archive-empty { margin-top: 30px; }

.tablice-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tablica-slad { padding: 22px; border-right: 1px solid var(--rule); border-top: 1px solid var(--rule); }
.tablica-slad a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--linia-mocna);
  background: var(--paper-soft);
}
.tablica-slad img { display: block; width: 100%; height: 160px; object-fit: cover; object-position: top left; }
.tablica-slad p { display: grid; gap: 3px; margin: 10px 0 0; }
.tablica-slad strong { font: 400 .95rem/1.25 var(--serif); }
.tablica-slad small { color: var(--muted); font: var(--pismo-mikro)/1.4 var(--mono); }

.auth-page { width: min(1040px, calc(100% - 36px)); }
.auth-stage {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(300px, 390px);
  min-height: 600px;
  border: 1px solid var(--linia-mocna);
  background: var(--paper);
}
.auth-art {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 24px 12px;
  border-right: 1px solid var(--linia-mocna);
  background: var(--ground-dark);
}
.auth-art > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 2px solid var(--ink);
}
.auth-art i {
  width: 8px;
  height: 8px;
  background: var(--blue);
  transform: translate(3px, -2px);
}
.auth-art b {
  font: 400 var(--pismo-mikro)/1 var(--mono);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.auth-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(42px, 6vw, 78px);
  background:
    linear-gradient(90deg, transparent 0 64px, rgba(212, 67, 47, .13) 64px 65px, transparent 65px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(23, 23, 22, .045) 31px 32px),
    var(--paper);
}
.auth-intro h1 {
  max-width: 13ch;
  margin: 22px 0 16px;
  font: 400 clamp(2.2rem, 5vw, 4.5rem)/.98 var(--serif);
  letter-spacing: -.055em;
}
.auth-intro > p:not(.scene-kicker) { max-width: 38ch; color: var(--muted); }
.auth-card { padding: 48px 30px; border-left: 1px solid var(--linia-mocna); background: var(--paper-soft); }
.auth-card h2 { margin: 8px 0 0; font: 400 2rem/1.1 var(--serif); }
.auth-form { display: grid; gap: 18px; margin-top: 36px; }
.form-field { display: grid; gap: 6px; }
.form-error { margin: 22px 0 0; padding: 12px; border-left: 3px solid var(--red); background: var(--red-soft); font-size: .82rem; }
.auth-footnote { margin: 22px 0 0; color: var(--muted); font: var(--pismo-mikro)/1.5 var(--mono); }

/* Tablica JEST produktem tej strony (patrz komentarz przy .tablica-pasek
   w szablonie) - dziedziczyla szerokosc stron tekstowych (--volume-width:
   1230px w notebook-tabs.css, `.page-shell` wewnatrz to tylko `width:100%`
   tego kontenera), wiec na monitorze 1920 px zostawal pusty pas po obu
   stronach. `body.student-board-page` podbija szczegolowosc ponad samo
   `.volume-stage` (notebook-tabs.css), niezaleznie od kolejnosci ladowania. */
body.student-board-page .volume-stage { width: min(1680px, calc(100% - 48px)); }
.tablica-scena { padding: 24px; border: 1px solid var(--linia-mocna); background: var(--paper); }
.tablica-kadr { border: 1px solid var(--linia-mocna); border-radius: 0; }
.tablica-kursor-znak { border: 2px solid #fff; background: var(--ink); }
.tablica-kursor.is-kadra .tablica-kursor-znak { background: var(--blue); }
.tablica-kursor-imie { padding: 2px 6px; background: rgba(23, 23, 22, .8); color: #fff; font: var(--pismo-mikro)/1.3 var(--mono); }
.tablica-status,
.tablica-obecni { display: block; color: var(--muted); font: .6rem/1.4 var(--mono); }
.tablica-status.is-zywo { color: var(--good); }
.tablica-status.is-zapas { color: var(--amber); }
.tablica-zamknij { color: var(--red) !important; }
.inline-form { display: inline; }