/* ══════════════════════════════════════════════════════════════
   Дом ученика. Стили только для этого экрана; токены и оболочка общие.

   Правила, которые здесь соблюдаются намеренно:
   - радиусы разные у разных ролей: карточка 20, чип 999, полоса 3;
   - у каждой тени два слоя: внутренний свет и внешняя мягкая;
   - hover поднимает карточку на 2px, картинку внутри до 1.04 за 400 мс,
     сама карточка НЕ растёт, иначе едет сетка;
   - transition перечисляет свойства поимённо, никогда not `all`;
   - скелетон появляется только если ждать дольше 500 мс.
   ══════════════════════════════════════════════════════════════ */

.hub-wrap{
  position:relative; z-index:1;
  width:100%; max-width:920px; margin:0 auto;
  padding:16px 16px 96px;
  display:flex; flex-direction:column; gap:26px;
}

/* ── шапка состояния ───────────────────────────────────────── */
.hub-head{
  display:grid; gap:14px;
  grid-template-columns:1fr; align-items:end;
  padding:22px 22px 18px; border-radius:22px;
  background:var(--glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px var(--line), 0 22px 50px -34px rgba(0,0,0,.6);
}
.hh-eyebrow{
  margin:0 0 6px; font-size:10px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-ink);
}
.hh-big{margin:0; display:flex; align-items:baseline; gap:10px; font-family:var(--font-d)}
.hh-big b{font-size:3.25rem; line-height:.95; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.hh-big span{font-size:1rem; font-weight:500; color:var(--ink-dim)}
.hh-bar{margin-top:12px; height:3px; border-radius:2px; background:var(--line-strong); overflow:hidden}
.hh-bar i{display:block; height:100%; border-radius:2px; background:var(--gold); transition:width .8s cubic-bezier(.22,.9,.28,1)}
.hh-side{display:flex; flex-wrap:wrap; gap:8px}
.hh-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:999px;
  background:var(--gold-soft); box-shadow:inset 0 0 0 1px var(--line);
  font-size:.8125rem; color:var(--ink-dim);
}
.hh-chip b{color:var(--ink); font-variant-numeric:tabular-nums}
.hh-chip svg{width:15px; height:15px; flex:none; opacity:.75}
.hh-streak{margin:0; grid-column:1/-1; font-size:.8125rem; color:var(--ink-faint); line-height:1.5}
@media (min-width:720px){
  .hub-head{grid-template-columns:minmax(0,1fr) auto}
  .hh-side{justify-content:flex-end}
}

/* ── план на сегодня ───────────────────────────────────────── */
.hub-plan{
  padding:22px; border-radius:22px;
  background:var(--bg-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--line), 0 26px 60px -38px rgba(0,0,0,.62);
}
.hp-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.hp-head h2{margin:0; font-family:var(--font-d); font-size:1.375rem; font-weight:600; color:var(--ink)}
.hp-total{display:inline-flex; align-items:center; gap:7px; font-size:.8125rem; color:var(--ink-dim); font-variant-numeric:tabular-nums}
.hp-total svg{width:15px; height:15px; opacity:.7}
.hp-honest{
  margin:0 0 14px; padding:12px 14px; border-radius:14px;
  background:var(--gold-soft); box-shadow:inset 0 0 0 1px var(--line-strong);
  font-size:.875rem; line-height:1.5; color:var(--ink-dim);
}
.hp-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.hp-item{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start;
  padding:14px 15px; border-radius:18px;
  background:var(--glass); box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .4s cubic-bezier(.22,.9,.28,1), box-shadow .4s cubic-bezier(.22,.9,.28,1);
}
.hp-item:hover{transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--line-strong), 0 14px 30px -20px rgba(0,0,0,.5)}
/* Раньше здесь стояла opacity на всю карточку, и текст пункта переставал
   читаться: 12 нарушений контраста. Гасим адресно и только то, что не текст. */
.hp-item.is-soon{background:transparent}
.hp-item.is-soon .hp-tick{opacity:.4}
.hp-item.is-soon .hp-title{color:var(--ink-dim)}
.hp-item.is-soon:hover{transform:none; box-shadow:inset 0 0 0 1px var(--line)}
.hp-tick{
  width:26px; height:26px; flex:none; display:grid; place-items:center;
  border-radius:50%; box-shadow:inset 0 0 0 1px var(--line-strong); color:transparent;
  transition:color .3s ease, background-color .3s ease;
}
.hp-tick svg{width:15px; height:15px}
.hp-item.is-done .hp-tick{color:var(--bg-0); background:var(--mint)}
.hp-item.is-done .hp-title{text-decoration:line-through; text-decoration-thickness:1px; color:var(--ink-dim)}
.hp-title{margin:0 0 3px; font-weight:600; font-size:1rem; color:var(--ink); line-height:1.3}
.hp-line{margin:0; font-size:.8438rem; color:var(--ink-dim); line-height:1.5}
.hp-side{grid-column:2; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px}
.hp-min{font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.hp-go,.hp-done,.hp-soon{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 16px; border-radius:12px; border:0;
  font:inherit; font-size:.875rem; font-weight:600; cursor:pointer; text-decoration:none;
  transition:background-color .3s ease, color .3s ease, transform .3s cubic-bezier(.22,.9,.28,1);
}
.hp-go{background:var(--gold); color:var(--bg-0)}
.hp-go:hover{transform:translateY(-1px)}
.hp-done{background:transparent; color:var(--ink-dim); box-shadow:inset 0 0 0 1px var(--line-strong)}
.hp-done:hover{color:var(--ink)}
.hp-soon{background:transparent; color:var(--ink-faint); box-shadow:inset 0 0 0 1px var(--line); cursor:default}
.hp-foot{margin:16px 0 0; font-size:.8125rem; color:var(--ink-faint)}
/* ссылка внутри абзаца отличается не только цветом */
.hp-foot a{color:var(--gold-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}

/* ── шесть разделов ────────────────────────────────────────── */
.hub-sections{display:grid; gap:12px; grid-template-columns:1fr}
@media (min-width:560px){ .hub-sections{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .hub-sections{grid-template-columns:repeat(3,1fr)} }
.hs-card{
  position:relative; display:flex; flex-direction:column; gap:6px;
  padding:18px 18px 20px; border-radius:20px; text-decoration:none;
  background:var(--bg-2); color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px var(--line), 0 18px 40px -30px rgba(0,0,0,.55);
  transition:transform .4s cubic-bezier(.22,.9,.28,1), box-shadow .4s cubic-bezier(.22,.9,.28,1);
  overflow:hidden;
}
.hs-card:hover{transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px var(--line-strong), 0 26px 54px -30px rgba(0,0,0,.62)}
.hs-card:hover .hs-icon{transform:scale(1.04)}
.hs-card:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.hs-card:active{transform:translateY(0)}
.hs-card.is-locked{opacity:.6; cursor:default}
.hs-card.is-locked:hover{transform:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px var(--line)}
.hs-icon{
  width:38px; height:38px; display:grid; place-items:center; border-radius:12px;
  background:var(--gold-soft); color:var(--gold-ink); margin-bottom:4px;
  transition:transform .4s cubic-bezier(.22,.9,.28,1);
}
.hs-icon svg{width:20px; height:20px}
.hs-title{font-family:var(--font-d); font-size:1.0625rem; font-weight:600}
.hs-line{font-size:.8438rem; color:var(--ink-dim); line-height:1.45}
.hs-live{margin-top:2px; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint)}
.hs-bar{display:block; height:3px; margin-top:10px; border-radius:2px; background:var(--line-strong); overflow:hidden}
.hs-bar i{display:block; height:100%; background:var(--gold); border-radius:2px}

/* ── скоро ─────────────────────────────────────────────────── */
.hub-soon h2{margin:0 0 6px; font-family:var(--font-d); font-size:1.25rem; font-weight:600; color:var(--ink)}
.hx-note{margin:0 0 14px; font-size:.8438rem; color:var(--ink-dim); line-height:1.5; max-width:62ch}
.hx-grid{display:grid; gap:10px; grid-template-columns:1fr}
@media (min-width:560px){ .hx-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .hx-grid{grid-template-columns:repeat(3,1fr)} }
/* курсор обычный: карточка не притворяется кликабельной */
.hx-card{
  display:flex; flex-direction:column; gap:5px; cursor:default;
  padding:15px 16px 16px; border-radius:18px;
  background:transparent; box-shadow:inset 0 0 0 1px var(--line);
}
.hx-month{font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink)}
.hx-title{font-family:var(--font-d); font-size:1rem; font-weight:600; color:var(--ink-dim)}
.hx-line{font-size:.8125rem; color:var(--ink-faint); line-height:1.45}
.hx-notify{
  align-self:flex-start; margin-top:8px; min-height:44px; padding:0 14px;
  border:0; border-radius:11px; cursor:pointer; font:inherit; font-size:.8125rem; font-weight:600;
  background:transparent; color:var(--ink-dim); box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:color .3s ease, box-shadow .3s ease;
}
.hx-notify:hover:not(:disabled){color:var(--ink); box-shadow:inset 0 0 0 1px var(--gold)}
.hx-notify:disabled{color:var(--mint); cursor:default; box-shadow:inset 0 0 0 1px var(--line)}

/* ── плашка сети ───────────────────────────────────────────── */
.hub-net{
  padding:12px 15px; border-radius:14px; font-size:.875rem; line-height:1.45;
  background:var(--gold-soft); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-strong);
}

/* ── онбординг первого входа ───────────────────────────────── */
.hub-onboard{
  position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:24px;
  background:rgba(5,6,8,.74); backdrop-filter:blur(8px);
}
:is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .hub-onboard{background:rgba(28,26,20,.44)}
.ob-card{
  width:min(440px,100%); padding:26px 24px 22px; border-radius:22px;
  background:var(--bg-1); color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 34px 80px -34px rgba(0,0,0,.72);
}
.ob-card h2{margin:0 0 10px; font-family:var(--font-d); font-size:1.375rem; font-weight:600}
.ob-card p{margin:0 0 12px; font-size:.9375rem; line-height:1.55; color:var(--ink-dim)}
.ob-btns{display:flex; flex-direction:column; gap:10px; margin-top:18px}
.ob-btns button{
  min-height:48px; border:0; border-radius:13px; cursor:pointer; font:inherit; font-weight:600; font-size:.9375rem;
  transition:transform .3s cubic-bezier(.22,.9,.28,1), background-color .3s ease;
}
#obGo{background:var(--gold); color:var(--bg-0)}
#obGo:hover{transform:translateY(-1px)}
#obSkip{background:transparent; color:var(--ink-dim); box-shadow:inset 0 0 0 1px var(--line-strong)}

/* ── командная палитра ─────────────────────────────────────── */
body.cmdk-open{overflow:hidden}
.cmdk{position:fixed; inset:0; z-index:90; display:grid; place-items:start center; padding:12vh 16px 16px}
.cmdk[hidden]{display:none}
.cmdk-scrim{position:absolute; inset:0; background:rgba(5,6,8,.62); backdrop-filter:blur(6px)}
:is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]) .cmdk-scrim{background:rgba(28,26,20,.38)}
.cmdk-box{
  position:relative; width:min(640px,100%); border-radius:18px; overflow:hidden;
  background:var(--bg-1);
  box-shadow:inset 0 0 0 1px var(--line-strong), 0 40px 90px -36px rgba(0,0,0,.75);
}
.cmdk-input{
  width:100%; padding:18px 20px; border:0; background:transparent; color:var(--ink);
  font:inherit; font-size:1.0625rem; outline:none;
  box-shadow:inset 0 -1px 0 var(--line);
}
.cmdk-list{list-style:none; margin:0; padding:6px; max-height:46vh; overflow-y:auto}
.cmdk-list li{
  display:flex; flex-direction:column; gap:2px; padding:11px 14px; border-radius:11px; cursor:pointer;
  transition:background-color .18s ease;
}
.cmdk-list li.on{background:var(--gold-soft)}
.cmdk-list li b{font-size:.9375rem; font-weight:600; color:var(--ink)}
.cmdk-list li span{font-size:.8125rem; color:var(--ink-dim)}
.cmdk-empty{cursor:default; color:var(--ink-faint); font-size:.875rem}
.cmdk-foot{margin:0; padding:10px 16px; font-size:.75rem; color:var(--ink-faint); box-shadow:inset 0 1px 0 var(--line)}

/* ── скелетон: геометрия один в один с содержимым ────────────
   Перелив, а не мигание. Три решения держат разницу:
   1. кривая linear. В петле любое ускорение читается как пульс, а пульс
      требует внимания, а тратить его на ожидание нечестно;
   2. блик гаснет к обоим краям прохода. Без этого он уезжал за границу на
      полной яркости и в следующий кадр возникал с другой стороны: глаз
      ловил это как щелчок, хотя двигалась одна и та же полоса;
   3. в покое блик прозрачный. Когда движение сокращено, полоса просто не
      появляется, и на скелетоне не остаётся застывшего яркого пятна. */
.sk{position:relative; overflow:hidden; border-radius:12px; background:var(--line)}
.sk::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  transform:translateX(-100%); opacity:0;
}
@media (prefers-reduced-motion: no-preference){
  .sk::after{animation:sk 1.6s linear infinite}
  @keyframes sk{
    0%{transform:translateX(-100%); opacity:0}
    14%{opacity:1}
    86%{opacity:1}
    100%{transform:translateX(100%); opacity:0}
  }
}
/* последняя строка абзаца короче: так текст не выглядит блоком */
.sk-line{height:12px; margin-bottom:8px}
.sk-line:last-child{width:60%}

/* Сокращённое движение. Длительности гасит player.css на всю платформу, и
   дублировать эту строку тут незачем. Здесь остаётся своё: карточка и пункт
   плана не приподнимаются, картинка внутри не подрастает. */
@media (prefers-reduced-motion: reduce){
  .hs-card:hover,.hp-item:hover,.hp-go:hover,.hs-card:hover .hs-icon{transform:none}
  #obGo:hover{transform:none}
}