/* ═══════════════════════════════════════════════════════════════════════════
   Бассейн: объём и фирменный слой.

   ПРАВИЛО, КОТОРОЕ ЗДЕСЬ НЕЛЬЗЯ НАРУШАТЬ.
   Оформление живёт только в «раме»: экран входа, боковое меню, пустые
   состояния, вспышка удачного скана. Рабочие поверхности — списки, таблицы,
   формы, «Расписание» — остаются плоскими и тихими. Причина не во вкусе:
   этой системой пользуются два администратора, которые «еле работают с
   эксель», на мокрой стойке, между родителями. Всё, что шевелится и бликует
   поверх строки с именем ребёнка, замедляет отметку прихода.

   ПРОИЗВОДИТЕЛЬНОСТЬ. Каустика — это ОДИН растр, который браузер рисует один
   раз (feTurbulence внутри data-URI фона), а не фильтр, пересчитываемый каждый
   кадр. Ничего тяжелее на рабочих экранах нет вообще.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* вода: своя шкала глубины, от мелкого края к дну */
  --w-shallow:#7FD3DE;
  --w-mid:#2E9CB4;
  --w-deep:#0E6B7E;
  --w-abyss:#08313E;
  --w-tile:#AFE0E8;      /* кафель на дне */
  --w-grout:#8FC9D3;     /* шов между плитками */
  --w-foam:#EAF7F9;
}

/* ── ЗНАК ──────────────────────────────────────────────────────────────────
   Нарисован нами, потому что фирменных файлов клуба у нас нет. Меняется
   в одном месте: разметка знака лежит в ui.js (const MARK) и в login.html.
   Формы держатся на currentColor, поэтому знак живёт и на тёмном, и на
   светлом фоне без второй версии.                                          */
.mark{display:block;flex:0 0 auto}
.mark .drop{fill:currentColor}
.mark .wave{fill:none;stroke:currentColor;stroke-linecap:round}

/* ── ЭКРАН ВХОДА: бассейн в перспективе ────────────────────────────────── */
.pool{
  position:fixed; inset:0; overflow:hidden;
  background:linear-gradient(180deg,
    #EEF6F8 0%, #D9EDF1 33%,
    var(--w-deep) 33.2%, var(--w-mid) 56%, var(--w-shallow) 100%);
}
/* Дно — настоящая плоскость, повёрнутая в 3D. Тёмные полосы дорожек ЛЕЖАТ
   на дне и уходят вдаль вместе с ним: именно это делает картинку бассейном,
   а не абстрактной водой. Поэтому они внутри плоскости, а не поверх неё. */
.pool__floor{
  position:absolute; left:-60%; right:-60%; top:33%; bottom:-46%;
  transform-origin:50% 0;
  transform:perspective(560px) rotateX(66deg);
  background:
    /* дорожки: широкие тёмные линии по дну */
    repeating-linear-gradient(90deg,
      transparent 0 196px, rgba(9,58,72,.55) 196px 214px, transparent 214px 410px),
    /* кафель */
    repeating-linear-gradient(90deg, var(--w-grout) 0 2px, transparent 2px 58px),
    repeating-linear-gradient(0deg,  var(--w-grout) 0 2px, transparent 2px 58px),
    var(--w-tile);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.8) 26%,#000 100%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.8) 26%,#000 100%);
}
/* Толща воды. НАПРАВЛЕНИЕ ВАЖНО: низ кадра — это ближний, мелкий край, там
   кафель виден чётко. Дальний край уходит к линии воды, и воды над ним больше,
   поэтому дымка густеет ВВЕРХ, а не вниз. Сначала было наоборот — картинка
   читалась как подсвеченный снизу аквариум. */
.pool__depth{
  position:absolute; left:0; right:0; top:33%; bottom:0; pointer-events:none;
  background:linear-gradient(0deg,
    rgba(46,156,180,.06) 0%, rgba(24,132,156,.34) 26%,
    rgba(14,100,124,.62) 58%, rgba(10,74,94,.82) 100%);
}
/* линия воды: светлая кромка там, где кафель уходит под воду */
.pool__line{
  position:absolute; left:0; right:0; top:33%; height:3px;
  background:linear-gradient(90deg,transparent 4%,var(--w-foam) 30%,var(--w-foam) 70%,transparent 96%);
  box-shadow:0 6px 18px -6px rgba(234,247,249,.7);
}
/* каустика: ОДИН растр, браузер рисует его однажды. Не фильтр на каждый кадр. */
.pool__caustics{
  position:absolute; left:0; right:0; top:33%; bottom:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='460' height='460'>\
<filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.010 0.022' numOctaves='2' seed='11'/>\
<feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  2.4 0 0 0 -1.05'/></filter>\
<rect width='460' height='460' filter='url(%23c)'/></svg>");
  background-size:460px 460px;
  mix-blend-mode:screen; opacity:.30;
  /* блики живут у поверхности: глубже они только вымывают цвет */
  -webkit-mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.5) 46%,transparent 88%);
          mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.5) 46%,transparent 88%);
}
/* затемнение по краям — взгляд идёт в центр, к форме входа */
.pool__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%, transparent 40%, rgba(8,49,62,.34) 100%);
}

@media (prefers-reduced-motion:no-preference){
  .pool__caustics{animation:drift 30s linear infinite}
  @keyframes drift{
    from{background-position:0 0}
    to{background-position:460px 230px}
  }
}

/* карточка входа: лежит НАД водой, поэтому у неё настоящая тень и край */
.dive{
  position:relative; z-index:2; width:100%; max-width:380px;
  background:var(--surface,#fff); padding:32px 32px 34px;
  border:1px solid rgba(13,28,32,.10);
  box-shadow:0 28px 60px -28px rgba(6,42,52,.55), 0 2px 0 rgba(255,255,255,.7) inset;
}
.dive__brand{display:flex; align-items:center; gap:12px; margin-bottom:22px; color:var(--w-deep)}
.dive__brand .t b{display:block; font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--ink,#0D1C20)}
.dive__brand .t span{font-size:12.5px; color:var(--muted,#4E6469)}

/* ── БОКОВОЕ МЕНЮ: глубина, а не плоская заливка ──────────────────────── */
.side{
  background:linear-gradient(180deg,#123A46 0%,var(--dark,#0D1C20) 42%,#071A20 100%);
  position:relative;
}
/* блик воды по верхней кромке — там, где меню «выходит» на поверхность */
.side::before{
  content:''; position:absolute; left:0; right:0; top:0; height:120px; pointer-events:none;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(127,211,222,.20), transparent 70%),
    linear-gradient(180deg, rgba(127,211,222,.10), transparent);
}
.side .logo{display:flex; align-items:center; gap:11px; color:var(--w-shallow)}
.side .logo .t{min-width:0}
/* Верх градиента светлее прежней плоской заливки, и прежний #7D979D дал на нём
   3.95:1 вместо 4.5. Меряли по самой светлой опорной точке градиента. */
.side .logo .t span{color:#8FA9AE}
.side .me{color:#8FA9AE}
.side .me .lnk{color:#9AB4B9}

/* ── ВСПЫШКА СКАНА: круги по воде ─────────────────────────────────────── */
/* Появляется ровно в момент, когда карта прочиталась. Единственная анимация
   на рабочем экране — и она сама гаснет за 600 мс. */
.flash{position:relative; overflow:hidden}
.flash .ripple{
  position:absolute; left:34px; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
  border-radius:50%; border:2px solid var(--ok,#215E40); pointer-events:none;
}
.flash.bad .ripple{border-color:var(--alert,#8F3126)}
@media (prefers-reduced-motion:no-preference){
  .flash .ripple{animation:ripple .62s ease-out forwards}
  .flash .ripple.r2{animation-delay:.13s}
  .flash .ripple.r3{animation-delay:.26s}
  @keyframes ripple{
    from{transform:scale(1); opacity:.55}
    to{transform:scale(11); opacity:0}
  }
}
@media (prefers-reduced-motion:reduce){ .flash .ripple{display:none} }

/* ── ПУСТЫЕ СОСТОЯНИЯ: тихая вода вместо серой строки ─────────────────── */
.empty{position:relative}
.empty .pooltile{
  display:block; margin:0 auto 12px; color:var(--w-mid); opacity:.5;
}
.empty b{display:block; font-size:15px; font-weight:600; color:var(--ink,#0D1C20); margin-bottom:2px}