/*
 * Start: indeks tomu, otwarta decyzja i realny ślad historii.
 * Ten plik posiada wyłącznie geometrię sceny Start.
 */

body.student-dashboard-page .start-page {
  --start-spine: 44px;
  --start-index-inset: clamp(26px, 3.8vw, 48px);
}

body.student-dashboard-page .start-notebook {
  position: relative;
  isolation: isolate;
}

body.student-dashboard-page .start-notebook::before {
  position: absolute;
  inset: 24px -10px -18px 10px;
  z-index: -2;
  border: 1px solid var(--linia);
  background: var(--notebook-cover);
  box-shadow: 0 26px 52px rgba(2, 1, 3, .3);
  content: "";
}

body.student-dashboard-page .start-stage {
  display: grid;
  grid-template-columns: var(--start-spine) repeat(2, minmax(0, 1fr));
  min-height: 620px;
  overflow: visible;
}

body.student-dashboard-page .start-stage::before {
  left: var(--start-spine);
  width: 1px;
  background: rgba(117, 102, 168, .28);
}

body.student-dashboard-page .start-art {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 30px 9px 20px;
  border-right: 1px solid var(--linia-mocna);
  /* Grzbiet zeszytu ma byc STALYM akcentem, nie inwersja pisma. Na
     `--notebook-ink` (dzis: kolor tekstu) odwracal sie razem z motywem i w
     ciemnym swiecil bialym pasem przez cala wysokosc sceny. */
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .06), transparent 44%),
    var(--akcent);
  color: var(--akcent-pismo);
}

body.student-dashboard-page .start-art::before {
  position: absolute;
  top: -1px;
  left: 8px;
  width: 20px;
  height: 58px;
  background: var(--notebook-violet-deep);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  content: "";
}

body.student-dashboard-page .start-art::after {
  position: absolute;
  top: 0;
  right: -1px;
  width: 3px;
  height: 64px;
  background: var(--notebook-lime);
  content: "";
  opacity: .72;
}

body.student-dashboard-page .start-art-frame {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  margin-top: 92px;
  border: 1px solid var(--powierzchnia);
}

body.student-dashboard-page .start-art-frame::before,
body.student-dashboard-page .start-art-frame::after,
body.student-dashboard-page .start-art-frame i,
body.student-dashboard-page .start-art-frame b {
  position: absolute;
  content: "";
}

body.student-dashboard-page .start-art-frame::before {
  top: 5px;
  left: 5px;
  width: 11px;
  height: 11px;
  border: 1px solid var(--powierzchnia);
}

body.student-dashboard-page .start-art-frame::after {
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  background: var(--notebook-lime);
}

body.student-dashboard-page .start-art-frame i {
  right: -11px;
  bottom: 4px;
  width: 15px;
  height: 1px;
  background: var(--notebook-violet);
}

body.student-dashboard-page .start-art-frame b {
  right: -12px;
  bottom: 1px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--notebook-paper);
  background: var(--notebook-ink);
}

body.student-dashboard-page .start-art-index {
  font: 700 var(--pismo-mikro)/1 var(--mono);
  letter-spacing: .08em;
}

body.student-dashboard-page .start-decision {
  position: relative;
  display: flex;
  min-width: 0;
  padding: clamp(56px, 7vw, 94px) clamp(34px, 6vw, 78px) 54px;
  flex-direction: column;
  align-items: flex-start;
  background:
    linear-gradient(90deg, transparent 0 58px, rgba(117, 102, 168, .15) 58px 59px, transparent 59px),
    repeating-linear-gradient(0deg, transparent 0 35px, rgba(23, 18, 24, .025) 35px 36px),
    var(--notebook-paper);
}

body.student-dashboard-page .start-decision h1 {
  max-width: 12ch;
  margin: 18px 0 8px;
  font-size: clamp(3.2rem, 7.2vw, 7rem);
  line-height: .88;
  overflow-wrap: anywhere;
}

body.student-dashboard-page .start-context {
  margin: 0 0 8px;
  color: var(--notebook-violet-deep);
  font: 800 var(--pismo-mikro)/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.student-dashboard-page .start-verdict {
  max-width: 42ch;
  margin: 0 0 30px;
  color: var(--notebook-muted);
  font-family: var(--serif);
  font-size: 1rem;
}

/* Akcja idzie ZARAZ ZA werdyktem, nie na dno kolumny. `margin-top: auto`
   przyklejalo ja do dolu sceny rozciagnietej do wysokosci prawego rejestru
   (620 px), przez co jedyna glowna akcja Startu ladowala na y=743 przy
   ekranie 768 px - czyli pod zgieciem tabletu, ktory jest tu urzadzeniem
   podstawowym. Dolna kotwica byla dekoracja; dosiegalnosc nie jest. */
body.student-dashboard-page .start-action {
  margin-top: 4px;
}

body.student-dashboard-page .start-decision-mark {
  position: absolute;
  right: 32px;
  bottom: 31px;
  width: 58px;
  height: 12px;
}

body.student-dashboard-page .start-decision-mark::before,
body.student-dashboard-page .start-decision-mark::after {
  position: absolute;
  content: "";
}

body.student-dashboard-page .start-decision-mark::before {
  top: 6px;
  right: 0;
  width: 58px;
  height: 1px;
  background: linear-gradient(90deg, var(--notebook-lime) 0 9px, var(--notebook-ink) 9px 44px, transparent 44px);
  opacity: .62;
}

body.student-dashboard-page .start-decision-mark::after {
  top: 1px;
  right: 0;
  width: 9px;
  height: 9px;
  border: 1px solid var(--linia-mocna);
  background: var(--notebook-paper);
}

body.student-dashboard-page .start-register {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 48px 34px 34px;
  flex-direction: column;
  border-left: 1px solid rgba(23, 18, 24, .35);
  background:
    linear-gradient(90deg, rgba(117, 102, 168, .085), transparent 18%),
    var(--notebook-paper-soft);
}

body.student-dashboard-page .start-register::before {
  position: absolute;
  top: 26px;
  right: -18px;
  width: 18px;
  height: 74px;
  border: 1px solid var(--linia-mocna);
  border-left: 0;
  background: var(--notebook-ink);
  box-shadow: inset 0 4px 0 var(--notebook-lime);
  content: "";
}

body.student-dashboard-page .start-register header {
  display: grid;
  gap: 7px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(23, 18, 24, .24);
}

body.student-dashboard-page .start-register header strong {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 560;
}

body.student-dashboard-page .register-score {
  padding: 30px 0 22px;
}

body.student-dashboard-page .register-score > span:first-child {
  display: block;
  font-family: var(--serif);
  font-size: clamp(3.2rem, 5vw, 5rem);
  line-height: .82;
  letter-spacing: -.06em;
}

body.student-dashboard-page .register-score small {
  font-size: .35em;
}

body.student-dashboard-page .register-score p {
  margin: 9px 0 0;
  color: var(--notebook-muted);
  font: 700 var(--pismo-mikro)/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.student-dashboard-page .register-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid rgba(23, 18, 24, .22);
}

body.student-dashboard-page .register-metrics div {
  padding: 14px 8px 13px 0;
}

body.student-dashboard-page .register-metrics div + div {
  padding-left: 12px;
  border-left: 1px solid rgba(23, 18, 24, .18);
}

body.student-dashboard-page .register-metrics dt {
  color: var(--notebook-muted);
  font: 700 var(--pismo-mikro)/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.student-dashboard-page .register-metrics dd {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-size: 1.2rem;
}

body.student-dashboard-page .profile-switcher-compact {
  margin-top: auto;
  padding-top: 26px;
}

body.student-dashboard-page .profile-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 7px;
}

body.student-dashboard-page .register-link {
  width: auto;
  margin-top: 15px;
  align-self: flex-start;
}

body.student-dashboard-page .start-folio {
  position: absolute;
  right: 22px;
  bottom: 16px;
}

body.student-dashboard-page .start-notebook > .material-index {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  padding-bottom: 52px;
  box-shadow: var(--page-depth-small);
}

body.student-dashboard-page .start-notebook > .material-index::before {
  left: 30px;
}

body.student-dashboard-page .start-notebook > .material-index::after {
  position: absolute;
  top: -11px;
  left: var(--start-spine);
  width: 32px;
  height: 11px;
  border-left: 1px solid var(--notebook-violet);
  border-top: 1px solid var(--notebook-lime);
  content: "";
  opacity: .64;
}

body.student-dashboard-page .material-folio {
  position: absolute;
  right: 24px;
  bottom: 18px;
}

body.student-dashboard-page .material-row[aria-current="page"] {
  position: relative;
  background: rgba(117, 102, 168, .045);
}

body.student-dashboard-page .material-row-current-mark {
  position: absolute;
  top: 50%;
  left: calc(var(--start-spine) - var(--start-index-inset));
  display: block;
  width: 34px;
  height: 12px;
  margin: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

body.student-dashboard-page .material-row-current-mark::before {
  position: absolute;
  top: 6px;
  left: 0;
  width: 29px;
  height: 1px;
  background: linear-gradient(90deg, var(--notebook-violet) 0 15px, var(--notebook-lime) 15px 20px, var(--notebook-violet) 20px 29px);
  content: "";
  opacity: .76;
}

body.student-dashboard-page .material-row-current-mark::after {
  position: absolute;
  top: 2px;
  right: 0;
  width: 7px;
  height: 7px;
  border: 1px solid var(--linia-mocna);
  border-left-color: var(--notebook-lime);
  background: var(--notebook-paper);
  content: "";
  transform: rotate(7deg);
}

body.student-dashboard-page .presence-being--kwadrat {
  width: 48px;
  height: 54px;
}

body.student-dashboard-page .presence-being--kwadrat .presence-kwadrat {
  width: 38px;
  height: 40px;
  margin: 4px;
}

body.student-dashboard-page .presence-being--kwadrat .presence-vertex {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--linia-mocna);
  background: var(--notebook-lime);
  transform: rotate(5deg);
  transform-origin: center;
  transition: transform 220ms var(--presence-ease);
}

body.student-dashboard-page .presence-being--kwadrat[data-state="observe"] .presence-vertex {
  transform: translate(2px, -2px) rotate(9deg);
}

@media (max-width: 920px) {
  body.student-dashboard-page .start-page {
    --start-spine: 32px;
  }

  body.student-dashboard-page .start-stage {
    grid-template-columns: var(--start-spine) repeat(2, minmax(0, 1fr));
  }

  body.student-dashboard-page .start-decision {
    padding-inline: 42px;
  }

  body.student-dashboard-page .start-register {
    padding-inline: 26px;
  }
}

@media (max-width: 720px) {
  body.student-dashboard-page .start-page {
    --start-spine: 14px;
    --start-index-inset: 28px;
  }

  body.student-dashboard-page .start-stage {
    grid-template-columns: 14px minmax(0, 1fr);
    min-height: 0;
  }

  body.student-dashboard-page .start-art {
    grid-row: 1 / 3;
    padding: 18px 2px;
  }

  body.student-dashboard-page .start-art::before {
    left: 2px;
    width: 9px;
    height: 42px;
  }

  body.student-dashboard-page .start-art::after {
    right: 0;
    width: 2px;
    height: 46px;
  }

  body.student-dashboard-page .start-art-frame,
  body.student-dashboard-page .start-art-index {
    display: none;
  }

  body.student-dashboard-page .start-decision {
    grid-column: 2;
    min-height: 470px;
    padding: 48px 26px 36px 34px;
  }

  body.student-dashboard-page .start-decision h1 {
    margin-top: 14px;
    font-size: clamp(3rem, 16vw, 5rem);
  }

  body.student-dashboard-page .start-register {
    grid-column: 2;
    padding: 34px 26px 32px 34px;
    border-top: 1px solid rgba(23, 18, 24, .34);
    border-left: 0;
  }

  body.student-dashboard-page .start-register::before {
    top: 22px;
    right: -10px;
    width: 10px;
    height: 58px;
  }

  body.student-dashboard-page .start-folio {
    right: 16px;
    bottom: auto;
    top: 438px;
  }

  body.student-dashboard-page .presence-slot--start-current {
    top: 30px;
    right: auto;
    left: 0;
  }

  body.student-dashboard-page .start-notebook > .material-index {
    margin-top: 16px;
  }

  body.student-dashboard-page .material-row-current-mark {
    width: 30px;
  }
}

@media (max-width: 430px) {
  body.student-dashboard-page .start-decision {
    padding-right: 20px;
  }

  body.student-dashboard-page .start-register {
    padding-right: 20px;
  }

  body.student-dashboard-page .register-metrics {
    grid-template-columns: 1fr;
  }

  body.student-dashboard-page .register-metrics div + div {
    padding-left: 0;
    border-top: 1px solid rgba(23, 18, 24, .16);
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.student-dashboard-page .presence-being--kwadrat .presence-vertex {
    transition: none;
  }
}