/* ScaleQL · компоненты.
   Плоские поверхности, волосяные линии, один радиус, ноль теней. */

/* ══ КНОПКИ ═══════════════════════════════════════════════
   Три роли и только три: главное действие янтарём, обычное
   действие обводкой, служебное — просто текстом.            */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--tap); padding:0 var(--sp-4);
  border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--ink-850); color:var(--tx); box-shadow:var(--shadow);
  font-size:14px; font-weight:600; line-height:1; white-space:nowrap;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
             transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn:hover:not(:disabled){ background:var(--ink-800); border-color:var(--tx-3) }
.btn:active:not(:disabled){ transform:translateY(1px) }
.btn:disabled{ opacity:.4; cursor:not-allowed }

.btn--primary{
  background:var(--acc-fill); border-color:var(--acc-fill); color:var(--acc-ink); font-weight:700;
}
.btn--primary:hover:not(:disabled){ background:var(--acc-fill-hi); border-color:var(--acc-fill-hi) }

.btn--ok{ background:var(--ok); border-color:var(--ok); color:var(--ink-950); font-weight:700 }
.btn--ok:hover:not(:disabled){ filter:brightness(1.08) }

.btn--quiet{
  min-height:32px; padding:0 var(--sp-2); box-shadow:none;
  background:none; border-color:transparent; color:var(--tx-3);
  font-weight:500; font-size:var(--fs-sm);
}
.btn--quiet:hover:not(:disabled){ background:none; border-color:transparent; color:var(--tx) }

.btn--sm{ min-height:32px; padding:0 var(--sp-3); font-size:var(--fs-sm) }
.btn--lg{ min-height:46px; padding:0 var(--sp-5); font-size:15px }
.btn--block{ width:100% }

.icon-btn{
  display:inline-grid; place-items:center; width:var(--tap); height:var(--tap);
  border-radius:var(--r); color:var(--tx-3);
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.icon-btn:hover{ background:var(--ink-850); color:var(--tx) }
.icon-btn[aria-pressed="true"]{ background:var(--acc-soft); color:var(--acc) }

/* ══ ПОВЕРХНОСТИ ══════════════════════════════════════════
   Карточка появляется только там, где рамка отделяет одно
   действие от другого. Всё остальное группируется линиями. */
.panel{
  background:var(--ink-900); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:var(--sp-5);
}

/* Поверхность-подложка для списков: на светлой теме белое поле с тенью,
   на тёмной — ступень тона. Одна и та же роль, разный материал. */
.surface{
  background:var(--ink-900); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden;
}
.panel--tight{ padding:var(--sp-4) }

/* Группа строк с волосяными разделителями вместо коробок. */
.rows{ list-style:none; margin:0; padding:0 }
.rows > li{ padding:var(--sp-3) 0 }
.rows > li + li{ border-top:1px solid var(--line) }

.rule-top{ border-top:1px solid var(--line); padding-top:var(--sp-5) }

/* ══ ЗАГОЛОВКИ РАЗДЕЛОВ ═══════════════════════════════════ */
.sec{ margin-bottom:var(--sp-7) }
.sec__h{ font-size:var(--fs-h2); margin-bottom:var(--sp-2) }
.sec__note{ color:var(--tx-3); font-size:var(--fs-sm); margin:0 0 var(--sp-4) }

/* Мелкая надпись капителью. Используется редко и по делу. */
.caps{
  font-size:var(--fs-micro); font-weight:600; letter-spacing:var(--track-caps);
  text-transform:uppercase; color:var(--tx-3);
}

/* ══ МЕТКИ ════════════════════════════════════════════════ */
.tag{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 7px; border-radius:var(--r-xs);
  background:var(--ink-850); border:1px solid var(--line);
  color:var(--tx-2); font-family:var(--mono); font-size:var(--fs-micro);
  font-weight:500; line-height:1.45; white-space:nowrap;
}
.tag--acc{ background:var(--acc-soft); border-color:var(--acc-line); color:var(--acc) }
.tag--ok { background:var(--ok-soft);  border-color:var(--ok-line);  color:var(--ok) }

.chip{
  display:inline-flex; align-items:center; min-height:30px; padding:0 8px;
  border:1px solid var(--line); border-radius:var(--r-xs);
  background:var(--ink-900); color:var(--tx-2);
  font-family:var(--mono); font-size:var(--fs-micro);
  transition:border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
button.chip:hover{ border-color:var(--acc); color:var(--acc) }

/* Счётчики в шапке: цифра моноширинная, подпись мелкая. */
.stat{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--tx-2); font-size:var(--fs-sm); line-height:1;
}
.stat b{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:500; color:var(--tx) }
.stat .ic{ color:var(--tx-3) }
.stat--streak .ic{ color:var(--acc) }
.stat.is-bumped b{ animation:bump var(--dur-3) var(--ease-out) }
@keyframes bump{ 0%{ transform:none } 45%{ transform:translateY(-3px) } 100%{ transform:none } }

/* ══ ПРОГРЕСС ═════════════════════════════════════════════ */
.bar{
  display:block; height:4px; border-radius:var(--r-full);
  background:var(--ink-800); overflow:hidden;
}
.bar > i{
  display:block; height:100%; border-radius:var(--r-full); background:var(--acc);
  transition:width var(--dur-3) var(--ease-out);
}
.bar--ok > i{ background:var(--ok) }
.bar--mute > i{ background:var(--line-strong) }
.bar--tall{ height:6px }

.meter{ display:flex; align-items:center; gap:var(--sp-3) }
.meter .bar{ flex:1 }
.meter__n{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:var(--fs-xs); color:var(--tx-2); white-space:nowrap;
}

.ring{ position:relative; display:grid; place-items:center; width:64px; height:64px; flex:0 0 auto }
.ring svg{ width:100%; height:100%; transform:rotate(-90deg) }
.ring__track{ fill:none; stroke:var(--ink-800); stroke-width:5 }
.ring__bar{ fill:none; stroke:var(--acc); stroke-width:5; stroke-linecap:butt;
  transition:stroke-dashoffset var(--dur-3) var(--ease-out) }
.ring.is-done .ring__bar{ stroke:var(--ok) }
.ring__val{
  position:absolute; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:14px; font-weight:500; line-height:1.1; text-align:center;
}
.ring__val small{ display:block; font-size:9.5px; color:var(--tx-3) }

/* ══ ПОЛЯ ═════════════════════════════════════════════════ */
.field{ display:flex; flex-direction:column; gap:6px }
.field__label{ font-size:var(--fs-sm); font-weight:600; color:var(--tx) }
.field__hint{ font-size:var(--fs-xs); color:var(--tx-3); line-height:1.5 }
.field__error{ font-size:var(--fs-xs); color:var(--bad); font-weight:600 }
.input{
  min-height:var(--tap); padding:0 var(--sp-3);
  background:var(--ink-950); border:1px solid var(--line-strong); border-radius:var(--r);
  color:var(--tx); font-family:var(--mono); font-size:14px;
  transition:border-color var(--dur-1) var(--ease);
}
.input:hover{ border-color:var(--tx-3) }
.input:focus-visible{ border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft) }
.input--num{ width:84px; text-align:center }
.input[aria-invalid="true"]{ border-color:var(--bad) }

/* ══ СООБЩЕНИЯ ════════════════════════════════════════════
   Плашка с полем слева, а не цветная коробка целиком.       */
.note{
  display:flex; gap:var(--sp-3); align-items:flex-start;
  padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--line); border-left-width:2px; border-radius:var(--r);
  background:var(--ink-900); color:var(--tx-2);
  font-size:14.2px; line-height:1.55;
}
.note .ic{ margin-top:1px; color:var(--tx-3) }
.note__b{ min-width:0; flex:1 }
.note__t{ display:block; color:var(--tx); font-weight:600; margin-bottom:2px }
.note--ok  { border-left-color:var(--ok);  background:var(--ok-soft) }
.note--ok .ic{ color:var(--ok) }
.note--bad { border-left-color:var(--bad); background:var(--bad-soft) }
.note--bad .ic{ color:var(--bad) }
.note--acc { border-left-color:var(--acc); background:var(--acc-soft) }
.note--acc .ic{ color:var(--acc) }
.note details{ margin-top:var(--sp-2) }
.note summary{ cursor:pointer; font-size:var(--fs-xs); color:var(--tx-3) }
.note summary:hover{ color:var(--tx-2) }
.note pre{
  margin:var(--sp-2) 0 0; padding:var(--sp-2) var(--sp-3);
  background:var(--code-bg); border-radius:var(--r-xs);
  font-family:var(--mono); font-size:var(--fs-micro); line-height:1.5;
  color:var(--tx-2); white-space:pre-wrap; word-break:break-word;
}

.hint{
  display:flex; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--line); border-left:2px solid var(--acc); border-radius:var(--r);
  background:var(--acc-soft); color:var(--tx); font-size:14.2px; line-height:1.55;
  animation:enter var(--dur-2) var(--ease-out);
}
.hint .ic{ color:var(--acc); margin-top:1px }
@keyframes enter{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }

/* ══ ВАРИАНТЫ ОТВЕТА ══════════════════════════════════════ */
.options{ display:flex; flex-direction:column; gap:var(--sp-2); margin:0 0 var(--sp-5) }
.option{
  display:flex; align-items:flex-start; gap:var(--sp-3);
  width:100%; min-height:var(--tap); padding:var(--sp-3) var(--sp-4);
  text-align:left; background:var(--ink-900);
  border:1px solid var(--line); border-radius:var(--r);
  color:var(--tx); font-size:14.5px; font-weight:500; line-height:1.5;
  transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.option{ box-shadow:var(--shadow) }
.option:hover:not(:disabled){ border-color:var(--acc-line); background:var(--ink-850) }
.option:active:not(:disabled){ transform:translateY(1px) }
.option:disabled{ cursor:default }
.option__k{
  flex:0 0 auto; width:18px; margin-top:1px;
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--tx-3);
}
.option__t{ flex:1; min-width:0 }
.option__m{ flex:0 0 auto; margin-top:2px; opacity:0 }
.option.is-right{ border-color:var(--ok-line); background:var(--ok-soft) }
.option.is-right .option__k{ color:var(--ok) }
.option.is-right .option__m{ opacity:1; color:var(--ok) }
.option.is-wrong{ border-color:var(--bad-line); background:var(--bad-soft) }
.option.is-wrong .option__k{ color:var(--bad) }
.option.is-wrong .option__m{ opacity:1; color:var(--bad) }

/* ══ КОД И ТАБЛИЦЫ ════════════════════════════════════════ */
.code{
  margin:0; padding:var(--sp-4); overflow-x:auto;
  background:var(--code-bg); border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--mono); font-size:var(--fs-code); line-height:1.7; color:var(--tx);
}
.code .k,.editor__hl .k{ color:var(--syn-kw); font-weight:700 }
.code .s,.editor__hl .s{ color:var(--syn-str) }
.code .n,.editor__hl .n{ color:var(--syn-num) }
.code .f,.editor__hl .f{ color:var(--syn-fn) }
.code .c,.editor__hl .c{ color:var(--syn-com); font-style:italic }

.tbl-wrap{ overflow:auto; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); max-height:42vh }
.tbl{ border-collapse:collapse; width:100%; font-family:var(--mono); font-size:var(--fs-xs) }
.tbl th{
  position:sticky; top:0; z-index:1; text-align:left; white-space:nowrap;
  padding:var(--sp-2) var(--sp-3); background:var(--ink-850); color:var(--tx-2);
  border-bottom:1px solid var(--line); font-weight:500;
}
.tbl td{
  padding:6px var(--sp-3); white-space:nowrap; color:var(--tx);
  font-variant-numeric:tabular-nums;
}
.tbl tr + tr td{ border-top:1px solid var(--line) }
.tbl tbody tr:hover td{ background:var(--ink-900) }
.tbl .null{ color:var(--tx-3) }
.tbl-note{ margin-top:var(--sp-2); color:var(--tx-3); font-size:var(--fs-xs) }

/* ══ СОСТОЯНИЯ ════════════════════════════════════════════ */
.state{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3);
  padding:var(--sp-7) 0; color:var(--tx-3);
}
.state .ic{ color:var(--tx-3) }
.state__t{ font-size:var(--fs-h3); font-weight:600; color:var(--tx) }
.state__x{ max-width:46ch; font-size:var(--fs-sm); line-height:1.6 }

.skel{ background:var(--ink-900); border-radius:var(--r-xs); animation:pulse 1.4s ease-in-out infinite }
.skel--line{ height:11px; margin-bottom:var(--sp-2) }
.skel--head{ height:26px; width:44%; margin-bottom:var(--sp-5) }
.skel--row{ height:52px; margin-bottom:1px; border-radius:0 }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
@media (prefers-reduced-motion: reduce){ .skel{ animation:none } }

.spin{
  display:inline-block; width:13px; height:13px; vertical-align:-1px;
  border:2px solid var(--line-strong); border-top-color:var(--acc);
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .spin{ animation-duration:2.4s } }

/* ══ ТОСТ ═════════════════════════════════════════════════ */
.toasts{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--sp-5) + var(--safe-b)); z-index:60;
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
  pointer-events:none;
}
body.is-unit .toasts{ bottom:calc(88px + var(--safe-b)) }
.toast{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r);
  background:var(--ink-850); border:1px solid var(--line-strong); color:var(--tx);
  font-size:var(--fs-sm); font-weight:600;
  animation:toast-in var(--dur-3) var(--ease-out);
}
.toast .num{ color:var(--acc) }
.toast--ok{ border-color:var(--ok-line) } .toast--ok .ic{ color:var(--ok) }
.toast--bad{ border-color:var(--bad-line) } .toast--bad .ic{ color:var(--bad) }
.toast.is-out{ animation:toast-out var(--dur-2) var(--ease) forwards }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@keyframes toast-out{ to{ opacity:0 } }

/* ══ ДИАЛОГ ═══════════════════════════════════════════════ */
.dialog{
  padding:0; width:min(500px, calc(100vw - 32px));
  border:1px solid var(--line-strong); border-radius:var(--r);
  background:var(--ink-900); color:var(--tx); box-shadow:var(--shadow-lift);
}
.dialog::backdrop{ background:rgba(10,14,24,.55) }
.dialog__head{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line);
}
.dialog__title{ flex:1; font-size:var(--fs-h3); font-weight:700 }
.dialog__body{ padding:var(--sp-5); max-height:70vh; overflow:auto }
.dialog__foot{
  display:flex; gap:var(--sp-2); justify-content:flex-end;
  padding:var(--sp-3) var(--sp-5); border-top:1px solid var(--line);
}
.dialog[open]{ animation:enter var(--dur-2) var(--ease-out) }

/* ══ РАСКРЫВАЮЩИЙСЯ БЛОК ══════════════════════════════════ */
.disc{ border-top:1px solid var(--line) }
.disc__btn{
  display:flex; align-items:center; gap:var(--sp-2); width:100%; min-height:38px;
  color:var(--tx-3); font-size:var(--fs-xs); font-weight:500; text-align:left;
}
.disc__btn:hover{ color:var(--tx) }
.disc__c{ transition:transform var(--dur-2) var(--ease) }
.disc[data-open="true"] .disc__c{ transform:rotate(90deg) }
.disc__body{ display:none; padding-bottom:var(--sp-3) }
.disc[data-open="true"] .disc__body{ display:block }

/* ══ РАСКЛАДКА ════════════════════════════════════════════ */
.stack{ display:flex; flex-direction:column; gap:var(--sp-4) }
.stack--sm{ gap:var(--sp-2) }
.stack--lg{ gap:var(--sp-6) }
.row{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap }
.spacer{ flex:1 1 auto }