/* Тақырыптық талдау.

   Страницу читают глазами, а не цифрами: завуч ищет, где красно. Поэтому
   цвет работает один раз и только на смысл — насколько группа отстала от
   плана, — а всё остальное тихое: ни рамок у карточек, ни теней, воздух и
   мелкие серые подписи. Заливка светлая, текст на ней тёмный: клетку
   нужно и увидеть издалека, и прочитать вблизи.

   «Жоспардан тыс» и «тақырып жоқ» — не хорошо и не плохо, это «не можем
   сказать». У них нет цвета вовсе: пунктир и штриховка, чтобы их не
   спутали ни с зелёным, ни с красным. */

.tp-page {
  --tp-ahead: rgba(74, 111, 181, .13);  --tp-ahead-ink: #3b5c9a;
  --tp-on: rgba(44, 157, 98, .15);      --tp-on-ink: var(--green-dark);
  --tp-w1: rgba(214, 168, 40, .22);     --tp-w1-ink: #8a6a10;
  --tp-w2: rgba(226, 124, 44, .20);     --tp-w2-ink: #9b4f14;
  --tp-w4: rgba(192, 57, 47, .17);      --tp-w4-ink: var(--low);
  --tq-ex: rgba(224, 53, 107, .09);     --tq-ex-ink: #b4275a;
}

/* Таблица темы года — сотня столбцов, и на широком экране каждый лишний
   пиксель ширины — ещё несколько недель без прокрутки. Общий потолок
   страниц здесь снимаем, как у конструктора расписания. */
main.tp-page { max-width: none; }

.tp-scope { margin: -12px 0 20px; font-size: 13px; color: var(--ink-3); }

/* ── итоги ── */
.tp-tiles { display: flex; flex-wrap: wrap; gap: 10px 40px; margin: 0 0 24px; }
.tp-tile { min-width: 112px; }
.tp-tile span { display: block; font-size: 12px; color: var(--ink-3); }
.tp-tile b {
  display: inline-block; margin-top: 4px;
  font-size: 32px; font-weight: 600; line-height: 1.05; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.tp-tile small { margin-left: 6px; font-size: 13px; color: var(--ink-3); }
.tp-tile.t-ok b { color: var(--tp-on-ink); }
.tp-tile.t-w1 b { color: var(--tp-w1-ink); }
.tp-tile.t-w2 b { color: var(--tp-w4-ink); }
.tp-tile.t-off b, .tp-tile.t-empty b { color: var(--ink-2); }
.tp-tiles-note { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--ink-3); }

/* ── отборы ── */
.tp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.tp-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.tp-seg button {
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  padding: 6px 13px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-2);
}
.tp-seg button.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 22, 19, .08); }
.tp-seg button:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.tp-sel, .tp-search {
  font: inherit; font-size: 13px; padding: 7px 11px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink);
}
.tp-search { min-width: 160px; }
.tp-sel:focus, .tp-search:focus { outline: 0; border-color: var(--green); }

.tp-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 22px; font-size: 12px; color: var(--ink-3); }
.tp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tp-sw { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }

/* ── сетка ── */
.tp-branch { margin: 34px 0 12px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.tp-grade { padding: 0; margin-bottom: 16px; overflow: hidden; }
.tp-grade-h { display: flex; align-items: baseline; gap: 12px; padding: 16px 20px 6px; }
.tp-grade-h h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.tp-grade-h span { font-size: 12px; color: var(--ink-3); }
.tp-grade-h b { font-weight: 600; color: var(--tp-w4-ink); }

.tp-scroll { overflow-x: auto; }
.tp-matrix { border-collapse: separate; border-spacing: 6px; padding: 0 14px 14px; }
.tp-matrix thead th {
  padding: 8px 4px 2px; text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3);
}
/* Код группы стоит у левого края и не уезжает при прокрутке вбок:
   без него длинная строка клеток теряет, чья она. */
.tp-g {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  padding: 0 10px 0 4px; text-align: left; white-space: nowrap;
  font-size: 13px; font-weight: 600;
}
.tp-matrix thead .tp-g { font-size: 11px; color: var(--ink-3); }
.tp-td { padding: 0; vertical-align: top; }
.tp-none { min-width: 176px; }

.tp-c {
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
  width: 176px; min-height: 72px; padding: 9px 11px;
  border: 0; border-radius: 12px; text-align: left;
  font: inherit; color: var(--ink); cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.tp-c:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 22, 19, .08); }
.tp-c:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.tp-c.tp-dim { opacity: .28; }
.tp-topic {
  font-size: 13px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tp-topic i { font-style: normal; color: var(--ink-3); }
.tp-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 11px; }
.tp-meta b { font-weight: 600; }
.tp-meta em { font-style: normal; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tp-meta em.tp-old { color: var(--tp-w4-ink); }
.tp-offdot {
  display: inline-block; width: 6px; height: 6px; margin-right: 6px; vertical-align: 2px;
  border-radius: 4px; background: var(--ink-3);
}

/* Состояние — одна шкала на клетку, образец в легенде и плашку в карточке. */
.st-ahead { background: var(--tp-ahead); }
.st-on, .st-notstarted { background: var(--tp-on); }
.st-w1 { background: var(--tp-w1); }
.st-w2 { background: var(--tp-w2); }
.st-w4 { background: var(--tp-w4); }
.st-off { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.st-noplan { background: var(--surface-2); }
/* Не по порядку плана: темы из далёкой части года. Тот же синий, что у
   «алда», но только контуром — похоже на опережение, а верить ему нельзя. */
.st-order { background: rgba(74, 111, 181, .05); box-shadow: inset 0 0 0 1px rgba(74, 111, 181, .32); }
.st-empty, .st-nolessons {
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--surface) 6px 12px);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.tp-c.st-ahead .tp-meta b, .tp-pill.st-ahead,
.tp-c.st-order .tp-meta b, .tp-pill.st-order { color: var(--tp-ahead-ink); }
.tp-c.st-on .tp-meta b, .tp-pill.st-on, .tp-pill.st-notstarted { color: var(--tp-on-ink); }
.tp-c.st-w1 .tp-meta b, .tp-pill.st-w1 { color: var(--tp-w1-ink); }
.tp-c.st-w2 .tp-meta b, .tp-pill.st-w2 { color: var(--tp-w2-ink); }
.tp-c.st-w4 .tp-meta b, .tp-pill.st-w4 { color: var(--tp-w4-ink); }
.tp-c.st-off .tp-meta b, .tp-c.st-noplan .tp-meta b,
.tp-pill.st-off, .tp-pill.st-noplan, .tp-pill.st-empty, .tp-pill.st-nolessons { color: var(--ink-2); }

/* ── карточка пары ── */
.tp-sheet {
  width: min(560px, calc(100vw - 24px)); max-height: min(86vh, 820px);
  padding: 0; border: 0; border-radius: 20px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 30px 80px rgba(16, 22, 19, .22);
}
.tp-sheet::backdrop { background: rgba(16, 22, 19, .28); backdrop-filter: blur(6px); }
#tpSheetBody { padding: 22px 24px 24px; }
.tp-sh-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tp-sh-h h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.tp-sh-h p { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.tp-x {
  flex: none; width: 32px; height: 32px; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--surface-2); color: var(--ink-2); font-size: 14px;
}
.tp-x:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.tp-pill { display: inline-block; margin: 14px 0 2px; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.tp-blk { margin-top: 20px; }
.tp-blk h4 {
  margin: 0 0 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.tp-blk p { margin: 0; font-size: 15px; line-height: 1.4; }
.tp-blk small { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.tp-muted { color: var(--ink-3); }
.tp-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px; vertical-align: 2px;
  border-radius: 8px; font-size: 11px; background: var(--surface-2); color: var(--ink-2);
}
.tp-exp { margin: 0; padding: 0; list-style: none; }
.tp-exp li { padding: 3px 0; font-size: 14px; line-height: 1.35; }

/* Год одной полосой: неделя — черточка. Прошедшие по плану темнее, эта
   неделя обведена, неделя группы залита цветом её состояния. */
.tp-track { display: flex; gap: 2px; margin-top: 8px; }
.tp-w { flex: 1; min-width: 3px; height: 16px; border-radius: 4px; background: var(--line-2); }
.tp-w.tp-passed { background: var(--line); }
.tp-w.tp-now { box-shadow: inset 0 0 0 2px var(--ink); }
.tp-w.tp-here.st-ahead { background: var(--tp-ahead-ink); }
.tp-w.tp-here.st-on, .tp-w.tp-here.st-notstarted { background: var(--green); }
.tp-w.tp-here.st-w1 { background: #d6a828; }
.tp-w.tp-here.st-w2 { background: #e27c2c; }
.tp-w.tp-here.st-w4 { background: var(--low); }
.tp-track-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.tp-track-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tp-track-legend .tp-w { flex: none; width: 14px; height: 10px; }

.tp-lessons { margin: 0; padding: 0; list-style: none; }
.tp-lessons li {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--line-2); font-size: 13px;
}
.tp-lessons li:first-child { border-top: 0; }
.tp-lessons time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tp-lessons .tp-no { color: var(--ink-3); }
.tp-lessons .tp-mk { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.tp-lessons .tp-mk.tp-in { color: var(--tp-on-ink); }
/* Неделя с экзаменом по плану — розовой чертой снизу, тем же цветом, что
   столбец экзамена в таблице. */
.tp-w.tp-wex { box-shadow: inset 0 -4px 0 #e0356b; }
.tp-w.tp-now.tp-wex { box-shadow: inset 0 0 0 2px var(--ink), inset 0 -4px 0 #e0356b; }

/* ── вид «Пән бойынша» ──

   Одна линейка тем на весь план, группы под ней строками. Слои клетки
   разведены, чтобы не спорить: пройденное — цветом фона, неделя «сейчас» —
   полупрозрачной полосой поверх, экзамен — розовой подложкой тенью, метка
   группы — содержимым. Любые два из них видны одновременно. */
.tq-card .tp-grade-h { flex-wrap: wrap; }
.tq-next { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--tq-ex-ink); }
.tq-scroll { overflow-x: auto; padding-bottom: 12px; }
.tq-table { border-collapse: separate; border-spacing: 0; }
.tq-table th, .tq-table td { padding: 0; }

/* Код группы не уезжает при прокрутке вбок: в сотне столбцов строка без
   подписи — ничья. */
.tq-g {
  position: sticky; left: 0; z-index: 2;
  width: 184px; min-width: 184px; max-width: 184px;
  background: var(--surface); text-align: left;
  box-shadow: inset -1px 0 0 var(--line-2);
}
.tq-corner { z-index: 3; vertical-align: bottom; padding: 0 12px 10px 20px; }
.tq-corner span { display: block; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.tq-corner small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--ink-3); }

.tq-wk {
  height: 22px; font-size: 11px; font-weight: 500; text-align: center;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
  box-shadow: inset 1px 0 0 var(--line-2);
}
.tq-wk.tq-nw { color: var(--surface); background: var(--ink); border-radius: 8px 8px 0 0; box-shadow: none; }

.tq-t { width: 22px; min-width: 22px; max-width: 22px; height: 156px; vertical-align: bottom; }
.tq-t span {
  display: block; margin: 0 auto 8px; max-height: 146px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 11px; font-weight: 400; line-height: 22px; color: var(--ink-2);
}
.tq-t.tq-ex span { font-weight: 600; color: var(--tq-ex-ink); }
.tq-t.tq-br span { color: var(--ink-3); }

.tq-r td {
  height: 44px; text-align: center; vertical-align: middle;
  box-shadow: inset 0 -1px 0 var(--line-2);
}
.tq-table .tq-nw { background-image: linear-gradient(rgba(16, 22, 19, .06), rgba(16, 22, 19, .06)); }
.tq-table .tq-br { background-image: repeating-linear-gradient(135deg, var(--line-2) 0 2px, transparent 2px 6px); }
.tq-t.tq-ex { box-shadow: inset 0 0 0 99px var(--tq-ex); }
.tq-r td.tq-ex { box-shadow: inset 0 -1px 0 var(--line-2), inset 0 0 0 99px var(--tq-ex); }

.tq-rb {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; min-height: 44px; padding: 5px 12px 5px 20px;
  border: 0; background: transparent; text-align: left;
  font: inherit; color: var(--ink); cursor: pointer;
}
.tq-rb:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.tq-r:hover .tq-g { background: var(--surface-2); }
.tq-code { font-size: 13px; font-weight: 600; }
.tq-st { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.tq-rb small {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; color: var(--ink-3);
}
.r-ahead .tq-st, .r-order .tq-st { color: var(--tp-ahead-ink); }
.r-on .tq-st, .r-notstarted .tq-st { color: var(--tp-on-ink); }
.r-w1 .tq-st { color: var(--tp-w1-ink); }
.r-w2 .tq-st { color: var(--tp-w2-ink); }
.r-w4 .tq-st { color: var(--tp-w4-ink); }
.tq-r.tp-dim { opacity: .3; }

/* Пройдено по плану — до метки группы, цветом её отставания. */
.r-on .tq-p, .r-notstarted .tq-p { background-color: var(--tp-on); }
.r-ahead .tq-p { background-color: var(--tp-ahead); }
.r-w1 .tq-p { background-color: var(--tp-w1); }
.r-w2 .tq-p { background-color: var(--tp-w2); }
.r-w4 .tq-p { background-color: var(--tp-w4); }
.r-order .tq-p { background-color: rgba(74, 111, 181, .06); }

.tq-d { display: inline-block; width: 6px; height: 6px; border-radius: 4px; background: var(--ink-2); vertical-align: middle; }
.tq-pin {
  display: inline-block; width: 14px; height: 14px; border-radius: 8px;
  vertical-align: middle; cursor: pointer; background: var(--ink);
  box-shadow: 0 0 0 3px var(--surface), 0 1px 4px rgba(16, 22, 19, .25);
}
.r-on .tq-pin, .r-notstarted .tq-pin { background: var(--green); }
.r-ahead .tq-pin { background: var(--tp-ahead-ink); }
.r-w1 .tq-pin { background: #d6a828; }
.r-w2 .tq-pin { background: #e27c2c; }
.r-w4 .tq-pin { background: var(--low); }
.r-order .tq-pin { background: var(--surface); box-shadow: inset 0 0 0 2px var(--tp-ahead-ink), 0 0 0 3px var(--surface); }

.tq-noplan { margin: 4px 0 20px; font-size: 12px; color: var(--ink-3); }

/* Образцы легенды этого вида. */
.tq-lg { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.tq-lg.tq-lg-pin { border-radius: 8px; background: var(--green); }
.tq-lg.tq-lg-p { background: var(--tp-on); }
.tq-lg.tq-lg-d { width: 6px; height: 6px; background: var(--ink-2); }
.tq-lg.tq-lg-nw { background: rgba(16, 22, 19, .1); }
.tq-lg.tq-lg-ex { background: var(--tq-ex); box-shadow: inset 0 0 0 1px rgba(224, 53, 107, .35); }
.tq-lg.tq-lg-br { background: repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 5px); }

@media (max-width: 720px) {
  .tp-tiles { gap: 8px 24px; }
  .tp-tile b { font-size: 24px; }
  .tp-search { flex: 1 1 140px; min-width: 0; }
  /* Кнопки отбора — в одну строку и прокручиваются вбок: «Жоспардан
     тыс» в два этажа читается как две разные кнопки. */
  .tp-seg { max-width: 100%; overflow-x: auto; }
  .tp-seg button { white-space: nowrap; }
  .tp-grade-h { padding: 14px 14px 4px; }
  .tp-matrix { padding: 0 8px 10px; border-spacing: 4px; }
  .tp-c { width: 150px; min-height: 66px; }
  .tp-none { min-width: 150px; }
  .tq-g { width: 128px; min-width: 128px; max-width: 128px; }
  .tq-rb, .tq-corner { padding-left: 12px; }
  .tq-rb small { display: none; }
  .tq-next { margin-left: 0; }
  #tpSheetBody { padding: 18px 18px 20px; }
}