/* ============================================================
   static/css/glass.css   — НОВЫЙ ФАЙЛ (Этап 3, подытог «стекло везде»)
   ------------------------------------------------------------
   ПРИМИТИВЫ ЖИДКОГО СТЕКЛА для всего сайта.

   Откуда взялось. Всё, что ниже, — дословная копия разделов 1–4
   файла static/css/stats.css, с одним отличием: там токены стекла
   объявлены на .statpage (то есть живут только внутри дашборда
   ученика), а здесь — на :root, то есть доступны на любой странице.

   ПОЧЕМУ stats.css НЕ ТРОГАЕТСЯ ВООБЩЕ.
   D-85 прямо запрещает «переносить аккуратно, по смыслу»: первая
   такая попытка стоила потерянного `.donutwrap > svg` и растянутого
   на всю плитку пончика. Поэтому дашборд ученика остаётся ровно
   таким, каким был, со своими копиями этих же правил. Копии
   ИДЕНТИЧНЫ, поэтому какая из них победит — безразлично.

   ПОРЯДОК ЗАГРУЗКИ ВАЖЕН и задан в base.html:
     pico → app.css → glass.css → skin.css → {% block extra_head %}
   stats.css и schedule.css приезжают из extra_head, то есть ПОСЛЕ.
   Значит, на своих страницах они всегда сильнее при равном весе
   селектора — и это правильно: их геометрию мы не трогаем.

   Этот файл не содержит ни одного правила про раскладку. Только
   поверхности, тени и подсветки. Раскладка — в skin.css.
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   1 · ТОКЕНЫ СТЕКЛА
   Значения скопированы из stats.css §2 без единой правки.
   ══════════════════════════════════════════════════════════════ */
:root{
  --gl-fill:  linear-gradient(152deg, rgba(255,255,255,.62) 0%,
                                      rgba(255,255,255,.34) 48%,
                                      rgba(255,255,255,.44) 100%);
  --gl-edge:  rgba(255,255,255,.72);
  --gl-inner: rgba(16,24,40,.06);
  --gl-hi:    rgba(255,255,255,1);
  --gl-shadow:0 1px 1px rgba(16,24,40,.03),
              0 10px 22px -14px rgba(16,24,40,.22),
              0 26px 50px -28px rgba(16,24,40,.30);
  --gl-line:  rgba(16,24,40,.09);

  /* «плита» — второе стекло внутри первого. На дашборде это .plot
     под графиком. Здесь тем же материалом делаются таблицы, поля
     ввода, карточки файлов и всё, что лежит ВНУТРИ листа страницы. */
  --pl-fill:  linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.18));
  --pl-edge:  rgba(255,255,255,.55);
  --pl-ring:  rgba(16,24,40,.055);

  --pill-fill:rgba(255,255,255,.55);
  --pill-edge:rgba(255,255,255,.8);

  /* Сила размытия. Вынесена переменной, потому что это единственная
     крутилка производительности во всей затее: backdrop-filter
     пересчитывается при прокрутке, и на длинной странице с телефона
     это заметно. Ниже, в §6, значение уменьшается на узких экранах. */
  --gl-blur: 26px;
  --sheet-blur: 14px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]){
    --gl-fill:  linear-gradient(152deg, rgba(255,255,255,.085) 0%,
                                        rgba(255,255,255,.030) 46%,
                                        rgba(255,255,255,.055) 100%);
    --gl-edge:  rgba(255,255,255,.11);
    --gl-inner: rgba(255,255,255,.045);
    --gl-hi:    rgba(255,255,255,.60);
    --gl-shadow:0 12px 28px -16px rgba(0,0,0,.8),
                0 34px 60px -30px rgba(0,0,0,.9);
    --gl-line:  rgba(255,255,255,.085);
    --pl-fill:  linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
    --pl-edge:  rgba(255,255,255,.08);
    --pl-ring:  rgba(255,255,255,.055);
    --pill-fill:rgba(255,255,255,.07);
    --pill-edge:rgba(255,255,255,.12);
  }
}
/* Ручное переключение темы (Pico, data-theme). Второй блок нужен
   потому, что медиазапрос про системную тему при ручном выборе
   просто не срабатывает. */
[data-theme=dark]{
  --gl-fill:  linear-gradient(152deg, rgba(255,255,255,.085) 0%,
                                      rgba(255,255,255,.030) 46%,
                                      rgba(255,255,255,.055) 100%);
  --gl-edge:  rgba(255,255,255,.11);
  --gl-inner: rgba(255,255,255,.045);
  --gl-hi:    rgba(255,255,255,.60);
  --gl-shadow:0 12px 28px -16px rgba(0,0,0,.8),
              0 34px 60px -30px rgba(0,0,0,.9);
  --gl-line:  rgba(255,255,255,.085);
  --pl-fill:  linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  --pl-edge:  rgba(255,255,255,.08);
  --pl-ring:  rgba(255,255,255,.055);
  --pill-fill:rgba(255,255,255,.07);
  --pill-edge:rgba(255,255,255,.12);
}


/* ══════════════════════════════════════════════════════════════
   2 · ФОН СТРАНИЦЫ
   Дословно из stats.css §1. Рисуется отдельным <div class="dashbg">
   в base.html, а не фоном body: body у Pico свой background-color,
   и градиент на нём пришлось бы объявлять дважды.

   z-index:-2 работает, потому что фон body всплывает на холст
   документа и красится ПЕРВЫМ, а элемент с отрицательным z-index —
   уже поверх него, но под содержимым.
   ══════════════════════════════════════════════════════════════ */
.dashbg{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1000px 620px at 4% -12%,  rgba(5,148,148,.34),  transparent 60%),
    radial-gradient(880px 520px at 100% -4%,  rgba(224,146,32,.30),  transparent 58%),
    radial-gradient(760px 760px at 46% 118%,  rgba(5,148,148,.20),  transparent 62%),
    radial-gradient(520px 420px at 82% 62%,   rgba(190,90,140,.14), transparent 62%),
    linear-gradient(180deg,#f2f6f8 0%,#e7edef 55%,#e2e9ec 100%);
}
.dashbg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(255,255,255,.35));
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]) .dashbg{
    background:
      radial-gradient(1000px 620px at 4% -12%, rgba(10,177,177,.30), transparent 60%),
      radial-gradient(880px 520px at 100% -4%, rgba(226,140,30,.38), transparent 56%),
      radial-gradient(760px 760px at 46% 118%, rgba(10,177,177,.16), transparent 62%),
      radial-gradient(520px 420px at 82% 62%,  rgba(190,70,130,.18), transparent 62%),
      linear-gradient(180deg,#0c0f12 0%,#080a0c 60%,#050607 100%);
  }
  :root:not([data-theme=light]) .dashbg::after{
    background:radial-gradient(120% 90% at 50% 35%, transparent 42%, rgba(0,0,0,.45));
  }
}
[data-theme=dark] .dashbg{
  background:
    radial-gradient(1000px 620px at 4% -12%, rgba(10,177,177,.30), transparent 60%),
    radial-gradient(880px 520px at 100% -4%, rgba(226,140,30,.38), transparent 56%),
    radial-gradient(760px 760px at 46% 118%, rgba(10,177,177,.16), transparent 62%),
    radial-gradient(520px 420px at 82% 62%,  rgba(190,70,130,.18), transparent 62%),
    linear-gradient(180deg,#0c0f12 0%,#080a0c 60%,#050607 100%);
}
[data-theme=dark] .dashbg::after{
  background:radial-gradient(120% 90% at 50% 35%, transparent 42%, rgba(0,0,0,.45));
}

/* Страница рисовалки пометок стекла НЕ получает — см. skin.css §11.
   Градиент под холстом мешал бы оценивать красные пометки. */
body.no-glass .dashbg{
  background:var(--pico-background-color, #f2f6f8);
}
body.no-glass .dashbg::after{content:none}


/* ══════════════════════════════════════════════════════════════
   3 · СТЕКЛО
   Дословно из stats.css §2.
   ══════════════════════════════════════════════════════════════ */
.gl{
  position:relative;border-radius:18px;
  background:var(--gl-fill);
  -webkit-backdrop-filter:blur(var(--gl-blur)) saturate(180%);
  backdrop-filter:blur(var(--gl-blur)) saturate(180%);
  border:1px solid var(--gl-edge);
  box-shadow:var(--gl-shadow);
  isolation:isolate;
}
/* Внутренняя грань — она даёт краю толщину, без неё стекло выглядит
   наклейкой. z-index:5, чтобы лежать поверх содержимого карточки. */
.gl::before{content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid var(--gl-inner);pointer-events:none;z-index:5}
/* Блик по верхнему краю. */
.gl::after{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gl-hi),transparent);
  pointer-events:none;z-index:5;opacity:.9}

/* ВНИМАНИЕ. Свечение обязано остаться position:absolute.
   На дашборде уже был случай, когда правило `.wgt > *{position:relative}`
   перебило его при одинаковой специфичности (шло ниже по файлу),
   блок встал в поток и высотой 120% выдавил содержимое карточки вниз.
   Именно отсюда взялось «много места сверху». */
.glow{position:absolute;inset:-30% -20% auto -20%;height:120%;z-index:0;
  pointer-events:none;filter:blur(34px);opacity:.55}
.glow--cyan {background:radial-gradient(46% 46% at 22% 8%, rgba(var(--aa-accent-rgb),.55), transparent 70%)}
.glow--warm {background:radial-gradient(48% 48% at 82% 4%, rgba(228,150,40,.45), transparent 70%)}
.glow--green{background:radial-gradient(44% 44% at 76% 96%, rgba(2,151,100,.40), transparent 70%)}
.glow--rose {background:radial-gradient(46% 46% at 18% 96%, rgba(217,53,38,.32), transparent 70%)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]) .glow{opacity:.42;filter:blur(40px)}
}
[data-theme=dark] .glow{opacity:.42;filter:blur(40px)}


/* ══════════════════════════════════════════════════════════════
   4 · ПЛИТА — второе стекло внутри первого
   На дашборде это .plot под графиком. Класс .plate — тот же
   материал под общим именем, чтобы им можно было пользоваться
   вне дашборда. Правила .plot оставлены синонимом: они уже стоят
   в шаблоне статистики, и дублировать разметку не надо.
   ══════════════════════════════════════════════════════════════ */
.plate{
  position:relative;border-radius:12px;
  background:var(--pl-fill);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  backdrop-filter:blur(10px) saturate(140%);
  box-shadow:inset 0 0 0 1px var(--pl-ring), inset 0 1px 0 var(--pl-edge);
}


/* ══════════════════════════════════════════════════════════════
   5 · ТАБЛЕТКА
   Дословно из stats.css §4. Мелкая метка со счётчиком.
   ══════════════════════════════════════════════════════════════ */
.pill{
  font-size:.68rem;line-height:1;padding:.24rem .5rem;
  border-radius:999px;background:var(--pill-fill);border:1px solid var(--pill-edge);
  color:var(--pico-muted-color);font-variant-numeric:tabular-nums;white-space:nowrap;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.pill--ok{color:var(--aa-ok)} .pill--bad{color:var(--aa-bad)}
.pill--wait{color:var(--aa-wait)}
.pill--gold{color:#b8860b}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]) .pill--gold{color:#e6bf5e}
}
[data-theme=dark] .pill--gold{color:#e6bf5e}


/* ══════════════════════════════════════════════════════════════
   6 · ПОСЛАБЛЕНИЯ
   ══════════════════════════════════════════════════════════════ */

/* Телефон. backdrop-filter пересчитывается при прокрутке, и на
   длинной странице это единственное место, где затея может начать
   тормозить. Размытие уменьшаем, а потерю читаемости компенсируем
   более плотной заливкой — визуально разница почти незаметна,
   потому что за стеклом всё равно плавный градиент, а не картинка. */
@media (max-width: 640px){
  :root{ --gl-blur: 16px; --sheet-blur: 0px; }
}

/* Системная настройка «уменьшить прозрачность» (macOS/iOS/Windows).
   Люди её включают не от нечего делать, а потому что полупрозрачный
   текст им тяжело читать. Уважаем: стекло становится матовым. */
@media (prefers-reduced-transparency: reduce){
  :root{
    --gl-blur: 0px; --sheet-blur: 0px;
    --gl-fill: rgba(255,255,255,.93);
    --pl-fill: rgba(255,255,255,.75);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme=light]){
      --gl-fill: rgba(22,26,31,.95);
      --pl-fill: rgba(255,255,255,.05);
    }
  }
  [data-theme=dark]{
    --gl-fill: rgba(22,26,31,.95);
    --pl-fill: rgba(255,255,255,.05);
  }
  .dashbg::after{content:none}
}

/* Печать. Стекло на бумаге — это серый прямоугольник и потраченный
   тонер. Печатается белый лист с чёрным текстом. */
@media print{
  .dashbg{display:none}
  .gl,.plate{
    background:#fff !important;box-shadow:none !important;
    border:1px solid #ccc !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  }
  .gl::before,.gl::after,.glow{display:none}
}