/* Страница успеваемости ученика — Medina Edu
   Префикс .up-  (uspevaemost). Тема «Медина Лакшери».

   ВЕРСИЯ МОДУЛЯ: 1.0.4
   Обязана совпадать с MEL_UP_VER в medina-uspevaemost.php.
   За совпадением следит прогон test-uspevaemost.php.

   Ни одного своего цвета: всё из палитры платформы.
   Ширина 860 — та же, что у кабинета, своей не заводится. */

.up-main{ max-width:860px; margin:0 auto; padding:16px 18px 150px }
/* 150px снизу — под плавающую панель навигации платформы. */

.up-card{ background:var(--me-surface); border:1px solid var(--me-border-soft);
  border-radius:14px; padding:18px; margin-bottom:14px }
.up-h{ font:700 16px "PT Serif",Georgia,serif; color:var(--me-text) }
.up-sub{ font:400 12px "PT Sans",sans-serif; color:var(--me-faint) }
.up-hint{ color:var(--me-faint); font-size:12.5px; margin-top:13px; text-wrap:pretty }
.up-empty{ color:var(--me-faint); font:italic 15px "PT Serif",Georgia,serif; padding:14px 0 }
.up-gap{ flex:1 }

/* ── Заголовок страницы ──────────────────────────────── */
.up-top{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; padding:0 2px 12px }
.up-top-lab{ font:700 11.5px "PT Sans",sans-serif; letter-spacing:.07em;
  text-transform:uppercase; color:var(--me-faint) }
.up-top-h{ font:700 25px "PT Serif",Georgia,serif; color:var(--me-text) }
.up-top-who{ font:400 12.5px "PT Sans",sans-serif; color:var(--me-faint) }

/* ── Блок 1. Сводка ──────────────────────────────────────
   Средний балл занимает две строки слева: пять равных плиток
   на 860px дают 165px на каждую, и 46-пиксельное число туда
   не встаёт, а мельче оно перестаёт быть главным. */
.up-tiles{ display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:10px }
.up-tile{ display:flex; flex-direction:column; gap:5px; padding:14px; border-radius:12px;
  background:var(--me-bg); border:1px solid var(--me-border-soft) }
.up-tile-lab{ font:700 11px "PT Sans",sans-serif; letter-spacing:.06em;
  text-transform:uppercase; color:var(--me-faint) }
.up-tile-num{ font:700 31px/1 "PT Serif",Georgia,serif; color:var(--me-text);
  font-variant-numeric:tabular-nums }
.up-tile-of{ font:400 14px "PT Sans",sans-serif; color:var(--me-faint) }
.up-tile-note{ font:400 12px/1.5 "PT Sans",sans-serif; color:var(--me-muted) }
.up-tile-row{ display:flex; align-items:baseline; gap:6px }

/* Главная плитка */
.up-tile-main{ grid-row:span 2; justify-content:center; gap:7px; padding:16px;
  box-shadow:inset 3px 0 0 var(--me-accent) }
.up-tile-main .up-tile-num{ font-size:46px; color:var(--me-accent) }
.up-tile-was{ display:flex; align-items:center; gap:7px; margin-top:2px;
  font:400 12px "PT Sans",sans-serif; color:var(--me-calm-line) }
.up-tile-was svg{ stroke:var(--me-calm-line) }

/* Плитка без данных. Пустое место без слов читается как поломка,
   поэтому здесь курсив и объяснение, а не пробел. */
.up-tile.is-empty{ border-style:dashed; border-color:var(--me-border) }
.up-tile.is-empty .up-tile-empty{ font:italic 15px "PT Serif",Georgia,serif;
  color:var(--me-faint); padding:6px 0 }

.up-bar{ height:5px; border-radius:999px; background:var(--me-track);
  overflow:hidden; margin-top:3px }
.up-bar i{ display:block; height:100%; border-radius:999px; background:var(--me-primary) }

/* ── Блок 2. График ──────────────────────────────────────
   SVG рисует сервер (см. mel_up_chart в PHP). Здесь только
   обёртка с прокруткой: на узком экране график не сжимается,
   иначе точки сливаются в частокол. */
.up-chart-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:4px }
.up-legend{ display:flex; gap:12px; flex-wrap:wrap }
.up-legend span{ display:flex; align-items:center; gap:6px;
  font:400 12px "PT Sans",sans-serif; color:var(--me-faint) }
.up-legend i{ width:9px; height:9px; border-radius:50%; display:block }
.up-legend .l-5{ background:var(--me-accent) }
.up-legend .l-4{ background:var(--me-primary) }
.up-legend .l-redo{ border:2px solid var(--me-urgent) }

.up-scroll{ overflow-x:auto; overflow-y:hidden; padding:6px 0 2px;
  -webkit-overflow-scrolling:touch }
.up-scroll svg{ display:block }
/* Системная полоса прокрутки в тёмной теме белеет. */
.up-scroll::-webkit-scrollbar{ height:8px }
.up-scroll::-webkit-scrollbar-track{ background:var(--me-bar); border-radius:8px }
.up-scroll::-webkit-scrollbar-thumb{ background:var(--me-border); border-radius:8px }
.up-scroll{ scrollbar-width:thin; scrollbar-color:var(--me-border) var(--me-bar) }

/* ── Блок 3. Части работы ────────────────────────────────
   Список строк, а не сетка клеток: число частей задаётся
   курсом и у каждого урока своё. Жёстких клеток нет нигде. */
.up-parts{ display:flex; flex-direction:column; gap:9px }
.up-part{ display:grid; grid-template-columns:1fr 42px; gap:10px 12px; align-items:center }
.up-part-name{ font:400 14px "PT Sans",sans-serif; color:var(--me-text) }
.up-part-mark{ font:700 15px "PT Sans",sans-serif; text-align:right;
  font-variant-numeric:tabular-nums }
.up-part-bar{ grid-column:1 / -1; height:6px; border-radius:999px;
  background:var(--me-track); overflow:hidden }
.up-part-bar i{ display:block; height:100%; border-radius:999px }

/* Цвет по баллу. Единственное место, где цвет назначается классом. */
.m-5{ color:var(--me-accent) }      .b-5{ background:var(--me-accent) }
.m-4{ color:var(--me-primary) }     .b-4{ background:var(--me-primary) }
.m-3{ color:var(--me-muted) }       .b-3{ background:var(--me-primary-dim) }
.m-2{ color:var(--me-urgent) }      .b-2{ background:var(--me-urgent) }

/* ── Блок 4. Журнал ─────────────────────────────────────── */
.up-log{ display:flex; flex-direction:column; gap:8px }
.up-item{ border-radius:12px; border:1px solid var(--me-border-soft); overflow:hidden }
.up-item.is-open{ background:var(--me-bg) }
/* Урок на доработке — то, что ждут от человека сейчас.
   Терракота здесь «внимание», не «двойка»: рядом стоит слово. */
.up-item.st-now{ border-color:var(--me-urgent); background:var(--me-urgent-soft) }

.up-row{ width:100%; box-sizing:border-box; display:flex; align-items:center; gap:11px;
  padding:12px 14px; border:0; background:transparent; cursor:pointer; text-align:left }
.up-row:hover{ background:var(--me-row-hover) }
.up-row:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px var(--me-accent) }
.up-num{ flex:none; width:34px; font:700 13px "PT Sans",sans-serif;
  color:var(--me-faint); font-variant-numeric:tabular-nums }
.up-title{ flex:1; min-width:0; font:400 14.5px "PT Sans",sans-serif; color:var(--me-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.up-chip{ flex:none; padding:2px 9px; border-radius:20px; font:700 12px "PT Sans",sans-serif;
  font-variant-numeric:tabular-nums }
.up-chip-redo{ color:var(--me-urgent); background:var(--me-urgent-soft);
  border:1px solid var(--me-urgent) }
.up-chev{ flex:none; stroke:var(--me-faint) }
.up-item.is-open .up-chev{ transform:rotate(180deg) }

.up-pill{ flex:none; display:inline-block; padding:2px 11px; border-radius:20px;
  font:700 12px "PT Sans",sans-serif; background:var(--me-track); color:var(--me-faint);
  border:1px solid var(--me-border-soft) }
.up-pill-ok{ background:var(--me-calm-soft); color:var(--me-primary); border-color:var(--me-primary) }
.up-pill-now{ background:var(--me-urgent-soft); color:var(--me-urgent); border-color:var(--me-urgent) }

.up-thread{ display:none; padding:2px 14px 14px; flex-direction:column; gap:13px }
.up-item.is-open .up-thread{ display:flex }
.up-hr{ height:1px; background:var(--me-border-soft) }

/* Лента событий */
.up-ev{ display:grid; grid-template-columns:96px 18px 1fr; gap:10px; align-items:start; padding:5px 0 }
.up-ev-when{ font:400 12.5px "PT Sans",sans-serif; color:var(--me-faint);
  font-variant-numeric:tabular-nums }
.up-ev-dot{ display:flex; justify-content:center; padding-top:5px }
.up-ev-dot i{ width:8px; height:8px; border-radius:50%; display:block;
  background:var(--me-border); box-shadow:0 0 0 3px var(--me-surface) }
.up-ev-text{ font:400 13.5px "PT Sans",sans-serif; color:var(--me-muted); line-height:1.5;
  text-wrap:pretty }
/* Ключевые события выделены жирным и цветом; остальные — фон ленты. */
.up-ev.e-ok    i{ background:var(--me-primary) }
.up-ev.e-ok    .up-ev-text{ color:var(--me-text); font-weight:700 }
.up-ev.e-redo  i{ background:var(--me-urgent) }
.up-ev.e-redo  .up-ev-text{ color:var(--me-text); font-weight:700 }
.up-ev.e-wait  i{ background:var(--me-accent) }
.up-ev.e-wait  .up-ev-text{ color:var(--me-accent); font-weight:700 }
.up-ev.e-next  i{ background:var(--me-primary-dim) }
.up-ev.e-next  .up-ev-text{ color:var(--me-faint); font-size:13px }

.up-marks{ display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-radius:11px;
  background:var(--me-bg); border:1px solid var(--me-border-soft) }
.up-marks-lab{ font:700 11px "PT Sans",sans-serif; letter-spacing:.06em;
  text-transform:uppercase; color:var(--me-faint) }
.up-marks-row{ display:flex; gap:8px; flex-wrap:wrap }
.up-mark{ display:flex; align-items:center; gap:7px; padding:4px 11px; border-radius:20px;
  background:var(--me-chip); border:1px solid var(--me-border-soft) }
.up-mark span{ font:400 12.5px "PT Sans",sans-serif; color:var(--me-chip-ink) }
.up-mark b{ font:700 13px "PT Sans",sans-serif; font-variant-numeric:tabular-nums }

.up-note{ display:flex; gap:11px; align-items:flex-start; padding:12px 14px; border-radius:11px;
  background:var(--me-bg); border:1px solid var(--me-border-soft) }
.up-note svg{ flex:none; margin-top:2px; stroke:var(--me-calm-line) }
.up-note b{ font:700 12px "PT Sans",sans-serif; color:var(--me-calm-line) }
.up-note p{ margin:0; font:400 13.5px/1.6 "PT Sans",sans-serif; color:var(--me-text);
  text-wrap:pretty }
.up-item.st-now .up-note{ background:var(--me-urgent-soft); border-color:var(--me-urgent) }
.up-item.st-now .up-note svg{ stroke:var(--me-urgent) }
.up-item.st-now .up-note b{ color:var(--me-urgent) }

/* Журнал пуст */
.up-log-empty{ padding:18px; border-radius:12px; border:1px dashed var(--me-border);
  display:flex; flex-direction:column; gap:7px; align-items:center; text-align:center }
.up-log-empty b{ font:italic 15px "PT Serif",Georgia,serif; color:var(--me-faint); font-weight:400 }
.up-log-empty p{ margin:0; max-width:520px; font:400 13px/1.65 "PT Sans",sans-serif;
  color:var(--me-muted); text-wrap:pretty }

/* ── Блок 5. Возврат. Не золотая: возвращает, а не уводит. ── */
.up-back{ display:inline-flex; align-items:center; gap:10px; padding:12px 17px; border-radius:11px;
  background:var(--me-track); border:1px solid var(--me-border-soft); color:var(--me-text);
  font:700 14px "PT Sans",sans-serif }
.up-back:hover{ border-color:var(--me-primary); color:var(--me-text) }
.up-back svg{ stroke:var(--me-calm-line) }

/* ── Плашка входа в кабинете ─────────────────────────────
   По образцу .k-go-b платформы, состояние is-main. */
.up-go{ display:flex; align-items:center; gap:14px; background:var(--me-calm-soft);
  border:1px solid var(--me-primary); border-radius:12px; padding:15px 16px;
  color:var(--me-text); transition:.14s }
.up-go:hover{ border-color:var(--me-calm-bright) }
.up-go div{ flex:1; display:flex; flex-direction:column; gap:4px }
.up-go b{ font:700 15px "PT Serif",Georgia,serif; color:var(--me-on-calm) }
.up-go span{ font:400 12px "PT Sans",sans-serif; color:var(--me-on-calm-dim) }
.up-go svg{ flex:none; stroke:var(--me-on-calm) }

/* ── Телефон, 390px — главный экран ─────────────────────── */
@media (max-width:560px){
  .up-main{ padding:12px 14px 150px }
  .up-card{ padding:14px }
  .up-top-h{ font-size:21px }

  /* Средний балл во всю ширину и в одну строку с подписью:
     он должен попасть в первый экран целиком. */
  .up-tiles{ grid-template-columns:1fr 1fr }
  .up-tile-main{ grid-column:1 / -1; grid-row:auto; flex-direction:row; align-items:center; gap:14px }
  .up-tile-main .up-tile-num{ font-size:40px }
  .up-tile-main .up-tile-lab,
  .up-tile-main .up-tile-note{ order:2 }
  /* «Ритм» во всю ширину: у него подпись длиннее прочих
     и станет ещё длиннее, когда журнал накопит историю. */
  .up-tile-ritm{ grid-column:1 / -1 }
  .up-tile-num{ font-size:26px }

  /* График открывается на последних уроках: свежее нужнее давнего.
     direction:rtl прокручивает контейнер в конец без единой строки JS,
     внутренний блок возвращает ltr, иначе перевернётся сам график. */
  .up-scroll{ direction:rtl }
  .up-scroll > *{ direction:ltr }

  /* Свёрнутая строка журнала: оценка и пилюля уходят во вторую
     строку. Обрезать их многоточием нельзя — это и есть ответ
     на вопрос, с которым страницу открыли. */
  .up-row{ flex-wrap:wrap; padding:11px 12px }
  .up-title{ flex:1 1 100%; white-space:normal; order:1 }
  .up-num{ order:0 }
  .up-chip, .up-pill{ order:2 }
  .up-chev{ order:2; margin-left:auto }

  .up-ev{ grid-template-columns:82px 16px 1fr; gap:8px }
  .up-back{ width:100%; justify-content:center; height:46px; box-sizing:border-box }
}