/* ScaleQL · экраны */

/* ══ КАРКАС ═══════════════════════════════════════════════ */
.app-header{
  flex:0 0 auto; display:flex; align-items:center; gap:var(--sp-4);
  height:var(--header-h); padding:0 var(--sp-4);
  border-bottom:1px solid var(--line); background:var(--ink-900);
}
.brand{
  display:flex; align-items:center; gap:var(--sp-2);
  color:var(--tx); font-size:15px; font-weight:700; letter-spacing:-.01em;
}
.brand img{ height:22px; width:auto; display:block }
.brand i{ font-style:normal; color:var(--acc) }

.nav{ display:flex; gap:var(--sp-1) }
.nav__item{
  min-height:30px; padding:0 var(--sp-3); border-radius:var(--r);
  color:var(--tx-3); font-size:var(--fs-sm); font-weight:500;
  transition:color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nav__item:hover{ color:var(--tx); background:var(--ink-900) }
.nav__item[aria-current="page"]{ color:var(--tx); background:var(--ink-850) }

.hud{ display:flex; align-items:center; gap:var(--sp-4) }

#view{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column }
.scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain }
.tabbar{ display:none }

.page{ width:100%; max-width:var(--col); margin:0 auto; padding:var(--sp-7) var(--sp-5) var(--sp-9) }
.page--wide{ max-width:760px }

/* ══ КАРТА ════════════════════════════════════════════════ */
/* Продолжение занятий — единственное крупное действие экрана.
   Без карточки и без градиента: заголовок, строка фактов, кнопка. */
.hero{ margin-bottom:var(--sp-8) }
.hero__k{ margin-bottom:var(--sp-3) }
.hero__t{ font-size:var(--fs-display); letter-spacing:var(--track-display);
  line-height:var(--lh-tight); margin-bottom:var(--sp-2) }
.hero__s{ color:var(--tx-2); font-size:15.5px; margin-bottom:var(--sp-5); max-width:52ch }
.hero__prog{ margin-bottom:var(--sp-6); max-width:420px }
.hero__next{ margin:var(--sp-3) 0 0; color:var(--tx-3); font-size:var(--fs-sm); line-height:1.5 }
.hero__acts{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap }

.steps-list{ list-style:none; margin:0 0 var(--sp-6); padding:0; display:grid; gap:var(--sp-3) }
.steps-list li{ display:flex; gap:var(--sp-3); align-items:baseline; color:var(--tx-2); font-size:14.5px }
.steps-list b{ color:var(--tx); font-weight:600 }
.steps-list .num{ color:var(--acc); font-size:var(--fs-xs) }

/* Программа курса: нумерованный список, а не тропинка из кружков.
   Читается как оглавление учебника, а не как игровое поле.        */
.path{ list-style:none; margin:0; padding:0;
  background:var(--ink-900); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden }
.path__i + .path__i{ border-top:1px solid var(--line) }
.path__b{
  display:grid; grid-template-columns:34px 1fr 132px; align-items:center; gap:var(--sp-4);
  width:100%; padding:var(--sp-4) var(--sp-3) var(--sp-4) 0; text-align:left;
  border-left:2px solid transparent;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.path__b:hover{ background:var(--ink-800) }
.path__n{
  padding-left:var(--sp-3);
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--tx-3);
}
.path__body{ min-width:0 }
.path__t{
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:15px; font-weight:600; color:var(--tx); margin-bottom:2px;
}
.path__s{ display:block; color:var(--tx-3); font-size:var(--fs-sm) }
.path__m{ display:flex; align-items:center; gap:var(--sp-2); justify-content:flex-end }
.path__m .bar{ width:64px }
.path__m .num{ font-size:var(--fs-xs); color:var(--tx-3); min-width:34px; text-align:right }

.path__i.is-current .path__b{ border-left-color:var(--acc); background:var(--acc-soft) }
.path__i.is-current .path__n{ color:var(--acc) }
.path__i.is-done .path__n{ color:var(--ok) }
.path__i.is-locked .path__b{ cursor:not-allowed }
.path__i.is-locked .path__t,
.path__i.is-locked .path__s{ color:var(--tx-3) }
.path__i.is-locked .path__n .ic{ color:var(--tx-3) }

/* ══ УРОК ═════════════════════════════════════════════════ */
.unit{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column }

.unit__bar{
  flex:0 0 auto; display:flex; align-items:center; gap:var(--sp-3);
  height:44px; padding:0 var(--sp-2) 0 var(--sp-1);
  border-bottom:1px solid var(--line); background:var(--ink-900);
}
.unit__t{ min-width:0; display:flex; align-items:baseline; gap:var(--sp-3) }
/* Название важнее счётчика: оно жмётся многоточием, счётчик уходит первым. */
.unit__t b{ flex:1 1 auto; min-width:40px; font-size:14px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.unit__t span{ flex:0 1 auto; font-family:var(--mono); font-size:var(--fs-micro);
  color:var(--tx-3); white-space:nowrap }

/* Шкала шагов: тонкие сегменты во всю ширину. Видно и сколько
   пройдено, и сколько осталось, без единой цифры.               */
.rail{ flex:0 0 auto; display:flex; gap:2px; padding:0 var(--sp-3);
  background:var(--ink-900); border-bottom:1px solid var(--line) }
.rail__s{ flex:1 1 auto; height:18px; padding:0; position:relative }
.rail__s::before{
  content:""; position:absolute; left:0; right:0; top:7px; height:3px;
  background:var(--ink-800); border-radius:var(--r-full);
  transition:background var(--dur-2) var(--ease), height var(--dur-1) var(--ease);
}
.rail__s:hover::before{ height:5px; top:6px }
.rail__s.is-current::before{ background:var(--acc); height:5px; top:6px }
.rail__s.is-done::before{ background:var(--ok) }

.unit__body{ flex:1 1 auto; min-height:0; display:grid; grid-template-columns:1fr }
.unit[data-mode="split"] .unit__body{ grid-template-columns:minmax(320px,.92fr) minmax(400px,1.08fr) }

.step-pane{ min-width:0; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  border-right:1px solid var(--line) }
.unit[data-mode="focus"] .step-pane{ border-right:0 }
.unit[data-mode="focus"] .bench{ display:none }
.unit[data-mode="focus"] .pane-switch{ display:none }

.step{ padding:var(--sp-6) var(--sp-6) var(--sp-8); animation:step-in var(--dur-3) var(--ease-out) }
.step:focus{ outline:none }
.unit[data-mode="focus"] .step{ max-width:var(--col); margin:0 auto; padding-top:var(--sp-7) }
@keyframes step-in{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

/* Строка положения: где я и что это за шаг. Одна, моноширинная. */
.step__pos{
  display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-5);
  font-family:var(--mono); font-size:var(--fs-micro); color:var(--tx-3);
}
.step__pos .ic{ color:var(--ok) }
.step__pos em{ font-style:normal; color:var(--acc) }
.step__h{ font-size:var(--fs-h1); letter-spacing:-.018em; margin-bottom:var(--sp-5) }
.step__sec{ margin-bottom:var(--sp-6) }
.step__skip{ margin-top:var(--sp-6) }

/* Пример запроса: код и две служебные кнопки под ним. */
.ex{ border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden }
.ex .code{ border:0; border-radius:0 }
.ex__foot{
  display:flex; align-items:center; gap:var(--sp-1);
  padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border-top:1px solid var(--line); background:var(--ink-850);
}
.ex__note{ flex:1; min-width:0; color:var(--tx-3); font-size:var(--fs-xs); line-height:1.5 }

/* Готовый ответ примера: таблица прямо под запросом, без нажатий. */
.ex__res{ padding:var(--sp-3); border-top:1px solid var(--line); background:var(--ink-900) }
.ex__res .tbl-wrap{ box-shadow:none; max-height:none }
.ex__cap{
  margin:0 0 var(--sp-2); color:var(--tx-3);
  font-size:var(--fs-micro); letter-spacing:.04em; text-transform:uppercase; font-weight:600;
}
.ex__out{ border-top:1px solid var(--line); padding:var(--sp-3) }

/* Плашка раздела: граница между объяснением и заданием.
   Подпись слева, пояснение мелким, дальше волосяная линия до края. */
.slab{
  display:flex; align-items:center; gap:var(--sp-3);
  margin:var(--sp-7) 0 var(--sp-5);
}
.slab:first-of-type{ margin-top:0 }
.slab::after{ content:""; flex:1; height:1px; background:var(--line) }
.slab__b{
  flex:0 0 auto; padding:4px 10px; border-radius:var(--r-full);
  font-size:var(--fs-micro); font-weight:600; letter-spacing:var(--track-caps);
  text-transform:uppercase; white-space:nowrap;
  background:var(--ink-800); border:1px solid var(--line); color:var(--tx-3);
}
.slab__n{ flex:0 0 auto; color:var(--tx-3); font-size:var(--fs-xs) }
.slab--task .slab__b, .slab--quiz .slab__b{
  background:var(--acc-fill); border-color:var(--acc-fill); color:var(--acc-ink);
}
.slab--task .slab__n, .slab--quiz .slab__n{ color:var(--acc) }

/* Условие задачи: карточка с заливкой акцента — её нельзя спутать с текстом лекции. */
.brief{
  padding:var(--sp-4) var(--sp-5);
  background:var(--acc-soft); border:1px solid var(--acc-line);
  border-left:3px solid var(--acc); border-radius:var(--r);
}
.brief__t{ font-size:16px; line-height:1.55; color:var(--tx) }
.brief__t code{
  font-family:var(--mono); font-size:.86em; color:var(--tx);
  background:var(--ink-900); border:1px solid var(--line);
  padding:1px 5px; border-radius:var(--r-xs); white-space:nowrap;
}
.brief.is-done{ background:var(--ok-soft); border-color:var(--ok-line); border-left-color:var(--ok) }

/* Форма ожидаемого ответа внутри карточки задачи. */
.expect{ margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--acc-line) }
.expect .caps{ margin:0 0 4px }
.expect__t{ margin:0; color:var(--tx-2); font-size:var(--fs-sm); line-height:1.6 }
.expect__t code{
  font-family:var(--mono); font-size:.9em; color:var(--tx);
  background:var(--ink-900); border:1px solid var(--line);
  padding:1px 5px; border-radius:var(--r-xs);
}

/* Вопрос теста — та же карточка, что и условие задачи. */
.ask{
  padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-4);
  background:var(--acc-soft); border:1px solid var(--acc-line);
  border-left:3px solid var(--acc); border-radius:var(--r);
  font-size:16px; line-height:1.55; color:var(--tx);
}
.ask code{
  font-family:var(--mono); font-size:.86em; color:var(--tx);
  background:var(--ink-900); border:1px solid var(--line);
  padding:1px 5px; border-radius:var(--r-xs); white-space:nowrap;
}
.ask.is-done{ background:var(--ok-soft); border-color:var(--ok-line); border-left-color:var(--ok) }

/* В верстаке условие остаётся без заливки: там оно подпись, а не главный объект. */
.bench__brief .brief{ padding:0; background:none; border:0 }

.solved{
  margin:0; padding:var(--sp-3) var(--sp-4);
  background:var(--code-bg); border:1px solid var(--line);
  border-left:2px solid var(--ok); border-radius:var(--r);
  font-family:var(--mono); font-size:var(--fs-code); line-height:1.65;
  color:var(--tx-2); white-space:pre-wrap; overflow-x:auto;
}

/* ══ ВЕРСТАК ══════════════════════════════════════════════ */
.bench{ display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--ink-900) }
.bench__head{
  flex:0 0 auto; display:flex; align-items:center; gap:var(--sp-2);
  height:36px; padding:0 var(--sp-2) 0 var(--sp-4);
  border-bottom:1px solid var(--line);
}
.bench__head .caps{ letter-spacing:.06em }
.bench__brief{ display:none }

.editor{
  position:relative; flex:0 0 auto; height:clamp(150px, 34%, 320px);
  background:var(--code-bg); border-bottom:1px solid var(--line);
}
.editor__hl,.editor__ta{
  position:absolute; inset:0; margin:0; padding:var(--sp-4);
  font-family:var(--mono); font-size:13.6px; line-height:1.7;
  white-space:pre-wrap; word-break:break-word; overflow:auto; border:0; tab-size:2;
}
.editor__hl{ pointer-events:none; color:var(--tx) }
.editor__ta{ background:transparent; color:transparent; caret-color:var(--acc); resize:none }
.editor__ta::placeholder{ color:var(--tx-3) }
.editor__ta:focus-visible{ box-shadow:inset 2px 0 0 var(--acc); border-radius:0 }

.bench__out{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:var(--sp-4) }
.bench__out > * + *{ margin-top:var(--sp-3) }

.schema{ flex:0 0 auto; display:flex; flex-direction:column; max-height:34%;
  padding:0 var(--sp-4); background:var(--ink-900) }
.schema .disc__body{ overflow-y:auto }
.schema__t{ margin-bottom:var(--sp-3) }
.schema__n{
  display:inline-flex; align-items:center; min-height:26px;
  color:var(--tx); font-family:var(--mono); font-size:var(--fs-xs); font-weight:500;
}
.schema__n:hover{ color:var(--acc) }
.schema__rows{ margin-left:6px; color:var(--tx-3); font-family:var(--mono); font-size:var(--fs-micro) }
.schema__c{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px }

/* ══ ПАНЕЛЬ ДЕЙСТВИЙ ══════════════════════════════════════ */
.acts{
  flex:0 0 auto; display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-b));
  border-top:1px solid var(--line); background:var(--ink-900);
}
.acts__i{ min-width:0; display:flex; flex-direction:column; gap:2px }
.acts__i b{ font-size:var(--fs-sm); font-weight:600 }
.acts__i span{ font-size:var(--fs-xs); color:var(--tx-3) }
.acts__b{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-2) }

.pane-switch{ display:none; gap:2px; padding:2px;
  border:1px solid var(--line); border-radius:var(--r) }
.pane-switch button{
  min-height:26px; padding:0 var(--sp-3); border-radius:var(--r-xs);
  color:var(--tx-3); font-size:var(--fs-xs); font-weight:500;
}
.pane-switch button[aria-pressed="true"]{ background:var(--ink-850); color:var(--tx) }
.pane-switch .mark{ display:inline-block; width:4px; height:4px; border-radius:50%;
  background:var(--acc); margin-left:5px; vertical-align:2px }

/* ══ ИТОГ ЮНИТА ═══════════════════════════════════════════ */
.finish{ display:flex; align-items:center; min-height:100%; padding:var(--sp-7) var(--sp-5) }
.finish__in{ width:100%; max-width:520px; margin:0 auto;
  animation:step-in var(--dur-3) var(--ease-out) }
.finish__k{ display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-4);
  color:var(--ok) }
.finish__k .caps{ color:inherit }
.finish--part .finish__k{ color:var(--acc) }
.finish__t{ font-size:var(--fs-display); letter-spacing:var(--track-display);
  line-height:var(--lh-tight); margin-bottom:var(--sp-3) }
.finish__s{ color:var(--tx-2); margin-bottom:var(--sp-6); max-width:48ch }
.finish__n{
  display:flex; gap:var(--sp-6); margin-bottom:var(--sp-7);
  padding:var(--sp-4) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.finish__n div{ display:flex; flex-direction:column; gap:2px }
.finish__n b{ font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:21px; font-weight:500; letter-spacing:-.01em }
.finish__n span{ font-size:var(--fs-xs); color:var(--tx-3) }
.finish__a{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2) }
.finish__a .btn{ width:100% }
.finish__a .btn--quiet{ width:auto }

/* Салют: короткий, только на закрытие юнита, гасится настройкой ОС. */
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:70; overflow:hidden }
.confetti i{ position:absolute; top:36%; width:6px; height:6px;
  animation:fly var(--fly,1000ms) var(--ease-out) forwards }
@keyframes fly{ from{ transform:none; opacity:1 }
                to{ transform:translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity:0 } }
@media (prefers-reduced-motion: reduce){ .confetti{ display:none } }

/* ══ ПРОГРЕСС ═════════════════════════════════════════════ */
.kpis{
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--ink-900); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow);
  margin-bottom:var(--sp-7);
}
.kpi{ padding:var(--sp-4) }
.kpi + .kpi{ border-left:1px solid var(--line) }
.kpi b{
  display:block; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:22px; font-weight:500; letter-spacing:-.015em; line-height:1.2;
}
.kpi b small{ font-size:.62em; color:var(--tx-3) }
.kpi span{ display:block; margin-top:4px; color:var(--tx-3); font-size:var(--fs-xs) }

.goal{ display:flex; align-items:center; gap:var(--sp-5) }
.goal__b{ flex:1 1 auto; min-width:0 }

.chart{ display:flex; gap:3px; align-items:flex-end; height:104px;
  border-bottom:1px solid var(--line) }
.chart__c{ flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; gap:4px; height:100% }
.chart__v{ font-family:var(--mono); font-size:10px; color:var(--tx-3) }
.chart__b{ display:block; width:100%; min-height:2px; background:var(--acc);
  transition:height var(--dur-3) var(--ease-out) }
.chart__c.is-empty .chart__b{ background:var(--ink-800) }
.chart__c.is-today .chart__b{ background:var(--acc-hi) }
.chart__x{ display:flex; gap:3px; margin-top:6px }
.chart__x span{ flex:1; text-align:center; font-family:var(--mono);
  font-size:10px; color:var(--tx-3) }
.chart__x span.is-today{ color:var(--acc) }

.mastery{ list-style:none; margin:0; padding:0 var(--sp-4);
  background:var(--ink-900); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow) }
.mastery li{ display:grid; grid-template-columns:26px 1fr 64px 46px; align-items:center;
  gap:var(--sp-3); padding:var(--sp-3) 0 }
.mastery li + li{ border-top:1px solid var(--line) }
.mastery__n{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--tx-3) }
.mastery li.is-done .mastery__n{ color:var(--ok) }
.mastery__t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-align:left; color:var(--tx); font-size:14px; font-weight:500 }
.mastery__t:hover:not(:disabled){ color:var(--acc) }
.mastery__t:disabled{ color:var(--tx-3); cursor:default }
.mastery__c{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--tx-3); text-align:right }

/* ══ ПЕРВАЯ ЗАГРУЗКА (версия с базой в браузере) ══════════ */
.boot{ position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  background:var(--ink-950); padding:var(--sp-5) }
.boot[hidden]{ display:none }
.boot__in{ width:min(360px,100%) }
.boot__logo{ height:34px; width:auto; margin-bottom:var(--sp-3) }
.boot__b{ display:block; font-size:16px; font-weight:700; margin-bottom:var(--sp-2) }
.boot__b i{ font-style:normal; color:var(--acc) }
.boot__m{ color:var(--tx-3); font-size:var(--fs-sm); line-height:1.55; margin-bottom:var(--sp-4) }

/* ══ АДАПТИВ ══════════════════════════════════════════════ */
@media (max-width:900px){
  .unit[data-mode="split"] .unit__body{ grid-template-columns:1fr }
  .unit[data-mode="split"] .step-pane{ border-right:0 }
  .unit[data-mode="split"] .pane-switch{ display:inline-flex }
  .unit[data-mode="split"][data-pane="bench"] .step-pane{ display:none }
  .unit[data-mode="split"][data-pane="lesson"] .bench{ display:none }
  .step{ padding:var(--sp-5) var(--sp-4) var(--sp-7) }
  .bench__brief{
    display:block; flex:0 0 auto; padding:var(--sp-3) var(--sp-4);
    border-bottom:1px solid var(--line); border-left:2px solid var(--acc);
  }
  .bench__brief .brief__t{ font-size:14.5px; margin-top:4px }
  .editor{ height:clamp(130px, 26%, 260px) }
}
@media (max-width:780px){
  .nav{ display:none }
  .tabbar{
    flex:0 0 auto; display:flex; align-items:stretch;
    height:calc(var(--tabbar-h) + var(--safe-b)); padding-bottom:var(--safe-b);
    border-top:1px solid var(--line); background:var(--ink-900);
  }
  .tabbar__item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; color:var(--tx-3); font-size:10.5px; font-weight:500;
  }
  .tabbar__item[aria-current="page"]{ color:var(--acc) }
  body.is-unit .tabbar{ display:none }

  .page{ padding:var(--sp-6) var(--sp-4) var(--sp-8) }
  .brand span{ display:none }
  .hud{ gap:var(--sp-3) }

  .kpis{ grid-template-columns:repeat(2,1fr) }
  .kpi:nth-child(odd){ border-left:0 }
  .kpi:nth-child(n+3){ border-top:1px solid var(--line) }

  .path__b{ grid-template-columns:30px 1fr auto; gap:var(--sp-3) }
  .path__m .bar{ display:none }

  .hero__grid{ gap:var(--sp-4) }
  .finish__n{ gap:var(--sp-5) }

  .acts{ flex-direction:column; align-items:stretch; gap:var(--sp-2);
    padding-left:var(--sp-3); padding-right:var(--sp-3) }
  .acts__i{ display:none }
  .acts.is-bare{ flex-direction:row }
  .acts.is-bare .acts__i{ display:flex }
  .acts__b{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2);
    width:100%; margin-left:0 }
  .acts__b:has(> :only-child){ grid-template-columns:1fr }
  .acts__b .btn--primary,.acts__b .btn--ok{ grid-column:1 / -1 }
  .acts .btn{ width:100% }
  .tbl-wrap{ max-height:none }
}
@media (max-width:560px){
  .unit__t span{ display:none }
  .prose figure.dia{ overflow-x:auto }
  .prose figure.dia svg{ min-width:420px }
}
@media (min-width:1500px){
  .unit[data-mode="split"] .unit__body{ grid-template-columns:minmax(420px,1fr) minmax(520px,1fr) }
  .step{ max-width:720px; margin:0 auto }
}

/* утилиты отступов вместо inline-стилей */
.u-mb-7{ margin-bottom:var(--sp-7) }