* { box-sizing: border-box; }

/* KOLORU tu nie ma: --paper/--ink/--blue... definiuje most w motyw.css,
   ktory laduje sie ostatni. Kopie stad i tak nigdy nie wygrywaly, ale
   zmylaly - zmiana --blue w tym pliku nie robila NIC i nie bylo widac
   dlaczego. Zostaja tokeny, ktorych motyw nie dotyka: --sans/--mono.
   --serif i --page-width tez byly przegrane z notebook-tabs.css (laduje sie
   pozniej, inne wartosci wygrywaly zawsze) - usuniete (EZ-23, F-04). */
:root {
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

html { min-width: 320px; min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
img, canvas { max-width: 100%; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 9px 12px;
  border: 1px solid var(--linia-mocna);
  background: var(--paper);
  font: 700 .68rem/1 var(--mono);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  min-height: 56px;
  padding: 9px max(18px, calc((100vw - var(--page-width)) / 2));
  border-bottom: 1px solid var(--linia-mocna);
  background: var(--powierzchnia);
  backdrop-filter: blur(14px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: -.025em;
  text-decoration: none;
}
.brand-mark {
  display: inline-grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 2px solid var(--ink);
}
.brand-mark i {
  width: 6px;
  height: 6px;
  background: var(--blue);
  transform: translate(2px, -1px);
}
.site-nav { display: flex; justify-content: center; gap: clamp(18px, 3vw, 38px); }
.site-nav a,
.text-action,
.staff-link {
  border: 0;
  background: transparent;
  font: 700 var(--pismo-mikro)/1 var(--mono);
  letter-spacing: .055em;
  text-decoration: none;
  text-transform: uppercase;
}
.site-nav a {
  position: relative;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  color: var(--muted);
}
.site-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 2px;
}
.site-nav a:hover,
.site-nav a.is-active { color: var(--ink); }
.site-nav a.is-active::after { background: var(--blue); }
.logout-form { margin: 0; }
.text-action { min-height: 36px; padding: 0; color: var(--ink); }
.text-action span { color: var(--muted); font-weight: 400; text-transform: none; }

.page-shell {
  width: min(var(--page-width), calc(100% - 36px));
  margin: 34px auto 80px;
}
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: min(var(--page-width), calc(100% - 36px));
  margin: 0 auto;
  padding: 18px 0 28px;
  border-top: 1px solid var(--rule-strong);
  color: var(--muted);
  font: var(--pismo-mikro)/1.4 var(--mono);
  letter-spacing: .055em;
  text-transform: uppercase;
}

.scene-kicker,
.field-label,
.workspace-state,
.problem-state {
  margin: 0;
  color: var(--muted);
  font: 700 var(--pismo-mikro)/1.45 var(--mono);
  letter-spacing: .055em;
  text-transform: uppercase;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin: 0 0 18px;
  color: var(--muted);
  font: var(--pismo-mikro)/1.4 var(--mono);
  letter-spacing: .025em;
  text-transform: uppercase;
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb strong { color: var(--ink); }

.primary-action,
.secondary-action,
.register-link,
.material-group-action {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--linia-mocna);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 700 var(--pismo-mikro)/1 var(--mono);
  letter-spacing: .045em;
  text-decoration: none;
  text-transform: uppercase;
}
.primary-action { border-color: var(--blue); background: var(--blue); color: #fff; }
.primary-action:hover,
.primary-action:focus-visible { filter: brightness(.94); }
.secondary-action:hover,
.register-link:hover,
.material-group-action:hover { border-color: var(--blue); color: var(--blue); }
.full-width { width: 100%; }

/* Selektor `input` bez wyjatkow rozdymal TAKZE pola wyboru: kazdy checkbox
   dostawal 100% szerokosci i 42 px wysokosci, wiec listy uczestnikow
   (Tablica) wygladaly jak rzad niebieskich plyt z podpisem odepchnietym na
   drugi koniec wiersza. notebook-aura.css mial juz wersje z wyjatkami - te
   dwie starsze reguly nie, a to one ustawialy szerokosc. */
select,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  min-height: 42px;
  border: 1px solid var(--linia-mocna);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
}
select { padding: 8px 34px 8px 10px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { width: 100%; padding: 9px 10px; }

.trace-meter {
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 12px;
  border: 0;
  background: var(--rule);
}
.trace-meter::-webkit-meter-bar { background: var(--rule); }
.trace-meter::-webkit-meter-optimum-value,
.trace-meter::-webkit-meter-suboptimum-value,
.trace-meter::-webkit-meter-even-less-good-value { background: var(--blue); }
.trace-meter::-moz-meter-bar { background: var(--blue); }
.trace-meter-empty { display: block; height: 3px; margin-top: 12px; background: var(--rule); }
.is-good { color: var(--good); }
.is-risk,
.is-bad { color: var(--red); }
.is-partial { color: var(--amber); }

.empty-state {
  max-width: 760px;
  padding: clamp(32px, 6vw, 72px);
  border: 1px solid var(--linia-mocna);
  background: var(--paper);
}
.empty-state h1,
.empty-state h2 {
  margin: 16px 0;
  font: 400 clamp(1.8rem, 5vw, 3.2rem)/1.05 var(--serif);
  letter-spacing: -.035em;
}
.empty-state p:not(.scene-kicker) { color: var(--muted); }

.start-stage {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(240px, 300px);
  min-height: 520px;
  border: 1px solid var(--linia-mocna);
  background: var(--paper);
}
.start-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);
}
.start-art-frame {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 2px solid var(--ink);
}
.start-art-frame i {
  width: 8px;
  height: 8px;
  background: var(--blue);
  transform: translate(3px, -2px);
}
.start-art-index {
  font: var(--pismo-mikro)/1 var(--mono);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.start-decision {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(44px, 7vw, 88px);
  background:
    linear-gradient(90deg, transparent 0 64px, rgba(212, 67, 47, .14) 64px 65px, transparent 65px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(23, 23, 22, .045) 31px 32px),
    var(--paper);
}
.start-decision h1 {
  max-width: 18ch;
  margin: 24px 0 12px;
  font: 400 clamp(2rem, 5.4vw, 4.6rem)/.98 var(--serif);
  letter-spacing: -.055em;
}
.start-context {
  margin: 0;
  color: var(--blue);
  font: 700 .72rem/1.4 var(--mono);
  letter-spacing: .035em;
  text-transform: uppercase;
}
.start-verdict {
  max-width: 48ch;
  margin: 20px 0 30px;
  color: var(--muted);
  font-family: var(--serif);
}
.start-action { align-self: flex-start; }

.start-register,
.chapter-register,
.archive-score {
  min-width: 0;
  padding: 30px 22px;
  background: var(--paper-soft);
}
.start-register { border-left: 1px solid var(--linia-mocna); }
.start-register > header,
.chapter-register > header,
.archive-score > header {
  display: grid;
  gap: 7px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--linia-mocna);
}
.start-register > header strong,
.chapter-register > header strong,
.archive-score > header strong {
  font: 400 1.05rem/1.25 var(--serif);
}
.register-score { padding: 28px 0 22px; border-bottom: 1px solid var(--rule-strong); }
.register-score > span,
.archive-score > span {
  display: block;
  font: 400 clamp(3rem, 5vw, 4.8rem)/.9 var(--serif);
  letter-spacing: -.07em;
}
.register-score small,
.archive-score small { font: .8rem/1 var(--mono); }
.register-score p,
.archive-score > p {
  margin: 8px 0 0;
  color: var(--muted);
  font: var(--pismo-mikro)/1.4 var(--mono);
  text-transform: uppercase;
}
.register-metrics,
.archive-metrics { margin: 0; }
.register-metrics div,
.archive-metrics div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
.register-metrics dt,
.archive-metrics dt {
  color: var(--muted);
  font: var(--pismo-mikro)/1.4 var(--mono);
  text-transform: uppercase;
}
.register-metrics dd,
.archive-metrics dd { margin: 0; font: 700 .72rem/1.4 var(--mono); }
.profile-switcher { margin-top: 24px; }
.profile-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 7px; }
.register-link { width: 100%; margin-top: 18px; }

.material-index,
.range-index,
.archive-index,
.attempt-section,
.tablice-archiwum {
  margin-top: 46px;
  border: 1px solid var(--linia-mocna);
  background: var(--paper);
}
.index-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
  gap: 28px;
  align-items: end;
  padding: 28px 32px 24px;
  border-bottom: 1px solid var(--linia-mocna);
}
.index-heading h2 {
  margin: 8px 0 0;
  font: 400 clamp(2rem, 4vw, 3.6rem)/1 var(--serif);
  letter-spacing: -.045em;
}
.index-heading > p { margin: 0; color: var(--muted); font-size: .84rem; }
.material-group + .material-group,
.archive-group + .archive-group { border-top: 1px solid var(--linia-mocna); }
.material-group-head,
.archive-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding: 24px 32px 18px;
}
.material-group-head > div:first-child,
.archive-group-head > div:first-child { display: flex; gap: 16px; align-items: baseline; }
.material-group-number,
.archive-group-head > div > span { color: var(--blue); font: 700 var(--pismo-mikro)/1 var(--mono); }
.material-group h3,
.archive-group h3 {
  margin: 0;
  font: 400 clamp(1.35rem, 2.5vw, 2.1rem)/1.1 var(--serif);
  letter-spacing: -.025em;
}
.material-group-tools { display: grid; justify-items: end; gap: 10px; }
.material-group-meta {
  display: flex;
  gap: 14px;
  color: var(--muted);
  font: var(--pismo-mikro)/1.4 var(--mono);
  text-transform: uppercase;
}
.material-group-action {
  min-height: 34px;
  padding-block: 7px;
  border: 0;
  border-bottom: 1px solid currentColor;
}
.material-row,
.range-row,
.archive-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(150px, auto) 64px;
  gap: 16px;
  align-items: center;
  min-height: 58px;
  padding: 12px 32px;
  border-top: 1px solid var(--rule);
  text-decoration: none;
}
.material-row:hover,
.range-row:hover,
.archive-row:hover { background: var(--blue-soft); }
.material-row-index,
.range-row-index,
.archive-row-index,
.material-row-score,
.range-row-score,
.archive-row-score {
  font: 700 var(--pismo-mikro)/1.4 var(--mono);
  text-transform: uppercase;
}
.material-row-title,
.range-row-title { font-family: var(--serif); }
.material-row-meta,
.range-row-meta {
  color: var(--muted);
  font: var(--pismo-mikro)/1.4 var(--mono);
  text-align: right;
  text-transform: uppercase;
}
/* Pasek POKRYCIA: ile tresci dzialu uczen w ogole tknal. Szerokosc idzie
   inline (--pokrycie), bo to dana, nie dekoracja - kubelkowanie na klasy
   zaokraglaloby ja w sposob, ktorego liczba obok juz nie potwierdza. */
.material-row-meta { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.material-row-pokrycie {
  flex: 0 0 44px;
  height: 3px;
  background: var(--rule);
  border-radius: 2px;
}
.material-row-pokrycie::before {
  content: "";
  display: block;
  width: var(--pokrycie, 0%);
  height: 100%;
  background: var(--blue);
  border-radius: inherit;
}
.material-row-score,
.range-row-score,
.archive-row-score { text-align: right; }
/* Stan "za malo prob na ocene": ta sama komorka co procent, ale wyraznie
   slabszym glosem - to nie werdykt, tylko licznik do werdyktu. */
.material-row-score.is-niepewny,
.range-row-score.is-niepewny,
.archive-row-score.is-niepewny { color: var(--muted); }
.material-row-score b { font: inherit; }
.material-row-score small {
  display: block;
  font-size: .82em;
  font-weight: 400;
  opacity: .75;
}