:root {
  color-scheme: light;
  --background: #eef2f7;
  --surface: #fff;
  --grid: #3d4f64;
  --grid-strong: #0a1624;
  --muted: #3b4d62;
  --text: #000;
  --today-day: #0a5cb8;
  --today-row: #e3f1ff;
  --highlight-current: #7ff0b9;
  --current-edge: #7ff0b9;
  --cell-font: 20px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--background);
  color: var(--text);
  font-family: "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-synthesis: none;
}

.screen {
  display: flex;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  flex-direction: column;
  gap: .4vh;
  padding: .5vh .8vw;
}

.top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  min-height: 0;
  align-items: center;
  gap: 1vw;
  padding: 0 .4vw;
}

.school {
  min-width: 0;
  color: #1f3550;
  overflow: hidden;
  font-size: .85vw;
  font-size: round(nearest, .85vw, 1px);
  font-weight: 700;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title {
  min-width: 0;
  overflow: hidden;
  color: #000;
  font-size: 1.4vw;
  font-size: round(nearest, 1.4vw, 1px);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.year {
  color: var(--muted);
  font-size: .9vw;
  font-size: round(nearest, .9vw, 1px);
  font-weight: 600;
}

.status {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-direction: row;
  justify-content: flex-end;
  gap: 1vw;
  white-space: nowrap;
}

.clock {
  font-size: 1.8vw;
  font-size: round(nearest, 1.8vw, 1px);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
}

.date-line {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: .85vw;
  font-size: round(nearest, .85vw, 1px);
  font-weight: 600;
  text-overflow: ellipsis;
}

.badge {
  min-width: 0;
  overflow: hidden;
  padding: .25em .65em;
  border-radius: 99px;
  background: #0b6b44;
  color: #fff;
  font-size: .85vw;
  font-size: round(nearest, .85vw, 1px);
  font-weight: 600;
  text-overflow: ellipsis;
}

.view-toggle {
  flex: 0 0 auto;
  padding: .3em .65em;
  border: 1px solid #53677d;
  border-radius: 6px;
  color: #1f3550;
  font-size: .85vw;
  font-size: round(nearest, .85vw, 1px);
  font-weight: 700;
  text-decoration: none;
}

.view-toggle:hover,
.view-toggle:focus-visible {
  background: #dce8f5;
}

.viewport {
  position: relative;
  width: 100%;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  border: 3px solid var(--grid-strong);
  border-radius: 10px;
  background: var(--surface);
}

/* Table is sized by font-size (see schedule.js), never by transform, so text stays sharp. */
.table-frame {
  position: absolute;
  inset: 0;
}

.schedule {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: var(--cell-font);
  line-height: 1.1;
}

.schedule th,
.schedule td {
  padding: .12em .3em;
  border: 2px solid var(--grid);
  vertical-align: middle;
}

.schedule thead th {
  height: 1.6em;
  background: #0a1624;
  color: #fff;
  font-size: 2em;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.1;
  text-align: center;
}

.schedule thead th:nth-child(1) {
  width: 2.4em;
}

.room-header,
.room-cell {
  width: 1%;
  min-width: 3.2ch;
  overflow-wrap: normal;
  word-break: normal;
}

.room-header {
  white-space: nowrap;
}

.day-label {
  position: relative;
  width: 2.6em;
  padding: 0 !important;
  border-top: 4px solid var(--grid-strong) !important;
  border-right: 3px solid var(--grid-strong) !important;
  background: #d3dce8;
  color: #000;
  text-align: center;
}

.day-label span {
  display: block;
  margin: 0 auto;
  font-size: 1.8em;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.day-label.today {
  background: var(--today-day);
  color: #fff;
}

.day-label.today span {
  font-size: 1.9em;
}

/* Heavy line at the top of every day block */
.lesson.first-lesson td:not(.day-label) {
  border-top: 4px solid var(--grid-strong);
}

.period {
  color: #000;
  font-size: 1em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: center;
}

.period strong,
.period span {
  display: block;
}

.period strong {
  font-size: 1.2em;
}

.period span {
  margin-top: .1em;
  color: #000;
  font-size: 1em;
  font-weight: 600;
  white-space: nowrap;
}

.subject {
  overflow-wrap: break-word;
  word-break: normal;
  font-size: 1.5em;
  color: #000;
  font-weight: 600;
  text-align: center;
  white-space: pre-line;
}

.room {
  color: #000;
  font-size: 1em;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.empty {
  color: #64748b;
  font-weight: 600;
}

.lesson.today td:not(.day-label) {
  background-color: var(--today-row);
}

.lesson.today:nth-child(even) td:not(.day-label) {
  background-color: #d3e8fb;
}

.lesson.today td.day-label.today {
  border-right-color: var(--today-day) !important;
}

.lesson.today .subject,
.lesson.today .period {
  color: #000;
}

.lesson.current td:not(.day-label) {
  background: var(--highlight-current);
}

.lesson.today.current td:not(.day-label) {
  background-color: var(--highlight-current);
}

.lesson.current .period {
  color: #064a2e;
}

.lesson.current .period span {
  color: #064a2e;
}

.lesson.current .subject,
.lesson.current .room {
  color: #02170d;
}

.lesson.current td.period {
  box-shadow: inset 10px 0 var(--current-edge);
}

.class-viewport .table-frame {
  overflow: hidden;
}

.class-schedule {
  table-layout: fixed;
}

.class-schedule thead th:nth-child(1) {
  width: 5%;
}

.class-schedule thead th:nth-child(2) {
  width: 8%;
}

.class-schedule thead th:nth-child(n + 3) {
  width: 17.4%;
}

.class-schedule .class-name {
  background: #d3dce8;
  border-right: 3px solid var(--grid-strong);
  font-size: 1.4em;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.class-schedule .class-name span {
  display: block;
  margin: 0 auto;
  font-size: 2.6em;
  font-weight: 600;
  -webkit-text-stroke: 0;
  letter-spacing: .06em;
  line-height: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.class-schedule .class-subject {
  padding: 0;
  overflow-wrap: anywhere;
  font-size: 1em;
  font-weight: 600;
  text-align: center;
  white-space: pre-line;
}

.class-schedule .subject-parts {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr;
}

.class-schedule .subject-parts.parts-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.class-schedule .subject-parts.parts-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.class-schedule .subject-parts.parts-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.class-schedule .subject-part {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: .12em .3em;
}

.class-schedule .parts-2 .subject-part + .subject-part,
.class-schedule .parts-3 .subject-part + .subject-part,
.class-schedule .parts-4 .subject-part:nth-child(even) {
  border-left: 1px solid #8796a8;
}

.class-schedule .parts-4 .subject-part:nth-child(n + 3) {
  border-top: 1px solid #8796a8;
}

.class-schedule td.empty {
  padding: .12em .3em;
}

.class-schedule tbody[hidden] {
  display: none;
}

.class-schedule tbody + tbody tr:first-child td {
  border-top: 4px solid var(--grid-strong);
}

.class-schedule th.today {
  background: var(--today-day);
}

.class-schedule .class-subject.today {
  background-color: var(--today-row);
}

/* Lighter, thinner lines between lessons of the same day */
.class-schedule tr:not(:first-child) td:not(.class-name) {
  border-top: 1px solid #8796a8;
}

.class-schedule tr:not(:last-child) td:not(.class-name) {
  border-bottom: 1px solid #8796a8;
}

/* Every second lesson period (by number) is slightly darker, across all classes */
.class-schedule tr.period-even td:not(.class-name):not(.today):not(.current) {
  background-color: #e1e8ef;
}

.class-schedule tr.period-even td.today:not(.current) {
  background-color: #cde1f5;
}

.class-schedule .class-subject.current {
  background: var(--highlight-current);
  color: #02170d;
}

/* Scrollable page showing every class */
html:has(body.scroll-page) {
  height: auto;
  overflow: auto;
}

body.scroll-page {
  height: auto;
  overflow: visible;
}

.scroll-page .screen {
  width: 100%;
  height: auto;
  min-height: 100vh;
}

.scroll-page .viewport {
  overflow: visible;
}

.scroll-page .class-viewport .table-frame {
  position: static;
  overflow: visible;
}

.scroll-page .class-schedule {
  height: auto;
  font-size: .8vw;
}

.scroll-page .class-schedule thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  font-size: 1.2em;
}

.scroll-page .class-schedule .class-name span {
  font-size: 2.2em;
}

.next-classes {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 1em;
  padding: .15em 0;
  color: #3b4d62;
  font-size: .8vw;
  font-size: round(nearest, .8vw, 1px);
  font-weight: 600;
  line-height: 1.1;
}

.next-classes > span {
  color: #000;
}

.next-classes small {
  display: inline-block;
  font-size: .8em;
  font-weight: 500;
}

.next-classes strong {
  font-variant-numeric: tabular-nums;
}

.next-classes small strong {
  display: inline-block;
  min-width: 1.4em;
}

@media (max-width: 1100px) {
  .top {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  }

  .status {
    gap: 4px;
  }

  .school,
  .date-line,
  .badge,
  .view-toggle {
    font-size: 11px;
  }

  .title {
    font-size: 16px;
  }

  .clock {
    font-size: 16px;
  }

  .next-classes {
    font-size: 11px;
  }

  .badge {
    max-width: 40%;
  }
}