/* ─────────────────────────────────────────────────────────
   KADR — основа рабочего места.

   Пришла на место styles.css. Тот был написан под тёмный лендинг,
   который заменён витриной ещё 26.08: две трети его правил не были
   ни к чему привязаны, а оставшаяся треть жила на янтаре и Onest,
   то есть в другой дизайн-системе, чем витрина и документы.

   Здесь — только то, чем пользуется app.html, и целиком на токенах
   из токены.css. Поэтому рабочее место теперь умеет обе темы.

   Подключать после токены.css и перед app.css.
   ───────────────────────────────────────────────────────── */

*,*::before,*::after{ box-sizing:border-box; }
figure,figcaption,h1,h2,h3,p,blockquote,dl,dd,ul,li{ margin:0; }
ul{ padding:0; list-style:none; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:1.0625rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ margin:0; font-family:var(--disp); font-weight:800; letter-spacing:-.03em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--acc);
  outline-offset:3px;
}

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }

/* Техническая метка. Та же, что .lab на витрине: разрядка разрешена
   только здесь — это подпись, а не надзаголовок (пункт 9 чек-листа). */
.mono{
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dim);
  font-weight:500;
  font-variant-numeric:tabular-nums;
}
/* Цифры выравниваются табличными знаками, а не третьей гарнитурой. */
.циф{ font-variant-numeric:tabular-nums; }
.acc{ color:var(--acc); }
.dim{ color:var(--dim); }

/* ─────────── зерно ───────────
   Тот же слой, что на витрине: убирает плоскость больших заливок. */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
:root[data-theme="dark"] .grain{ opacity:.7; mix-blend-mode:soft-light; }

/* ─────────── кнопки ───────────
   Геометрия витрины: прямые углы, высота 46, подъём на 1px при наведении. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:46px; padding:0 var(--s5);
  border:1px solid transparent; border-radius:0;
  font:inherit; font-weight:600; font-size:.9375rem;
  cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed; transform:none;
}
.btn-primary{ background:var(--acc); color:var(--on-acc); }
.btn-primary:hover{ background:var(--acc-hi); }
.btn-ghost{ border-color:var(--line-2); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--ink); }

/* ─────────── шапка ───────────
   Один в один с .top витрины: 62px, липкая, с размытием под собой.
   Подложка берётся от текущего фона, поэтому годится в обеих темах. */
.head{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.head-in{ display:flex; align-items:center; gap:var(--s6); height:62px; }

/* Логотип: тот же знак, что на витрине — засечка кадра акцентом. */
.mark{
  font-family:var(--disp); font-weight:800; font-size:1.1875rem;
  letter-spacing:-.03em; display:flex; align-items:center; gap:9px;
  flex:none;
}
.mark i{ width:9px; height:16px; background:var(--acc); display:block; }

/* ─────────── переключатель темы ───────────
   Тот же, что на витрине, и выбор у них общий: localStorage kadr-theme. */
.theme{
  width:36px; height:36px; flex:none;
  display:grid; place-items:center; cursor:pointer;
  background:none; border:1px solid var(--line-2); color:var(--ink); font:inherit;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.theme:hover{ border-color:var(--ink); }
.theme svg{ width:16px; height:16px; }
.theme .луна{ display:none; }
:root[data-theme="dark"] .theme .солнце{ display:none; }
:root[data-theme="dark"] .theme .луна{ display:block; }

/* Кнопки и поля не наследуют гарнитуру сами — браузер ставит им свою.
   Без этой строки приёмка видела на странице Arial третьей гарнитурой. */
button,input,textarea,select{ font:inherit; }

/* ─────────── поля ───────────
   Прямые углы, граница из токена, фокус акцентом — как на витрине. */
input[type=text],input[type=number],textarea,select{
  font:inherit; color:var(--ink);
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:0;
  padding:10px var(--s3);
}
input[type=text]::placeholder,textarea::placeholder{ color:var(--dim); }

/* Дорожка рисуется фоном, а сам элемент высокий.
   Раньше height был 2px — то есть попасть по дорожке мимо бегунка можно
   было только в двухпиксельную полосу, а пальцем на телефоне нельзя было
   вовсе. Полоса осталась двухпиксельной на вид, но нажимается вся высота. */
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:24px; cursor:pointer;
  background:transparent; border-radius:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:2px; border-radius:2px;
  background:linear-gradient(to right,
    var(--acc) 0 var(--доля,10%), var(--line-2) var(--доля,10%) 100%);
}
input[type=range]::-moz-range-track{
  height:2px; border-radius:2px;
  background:linear-gradient(to right,
    var(--acc) 0 var(--доля,10%), var(--line-2) var(--доля,10%) 100%);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:var(--acc); border:3px solid var(--paper); cursor:grab;
  /* (22 − 2) / 2 = 10: бегунок садится по центру двухпиксельной дорожки. */
  margin-top:-10px;
}
input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:var(--acc); border:3px solid var(--paper); cursor:grab;
}
.ticks{
  display:flex; justify-content:space-between; margin-top:var(--s3);
  font-variant-numeric:tabular-nums;
}

/* галочка */
.box{
  width:20px; height:20px; flex:none;
  border:1px solid var(--line-2); border-radius:0;
  display:grid; place-items:center;
  color:var(--on-acc);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.box svg{ opacity:0; transition:opacity .2s var(--ease); }
:where(label):has(input:checked) .box{ background:var(--acc); border-color:var(--acc); }
:where(label):has(input:checked) .box svg{ opacity:1; }

/* ─────────── раскрывающиеся блоки ─────────── */
details{ border-bottom:1px solid var(--line); }
summary{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s4);
  padding-block:var(--s5);
  font-weight:600; font-size:1.0625rem;
  cursor:pointer; list-style:none;
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:''; flex:none; width:11px; height:11px;
  border-right:1.5px solid var(--dim); border-bottom:1.5px solid var(--dim);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .26s var(--ease), border-color .26s var(--ease);
}
details[open] summary::after{ transform:rotate(-135deg); border-color:var(--acc); }
details p{ padding-bottom:var(--s5); color:var(--dim); max-width:68ch; }

/* ─────────── подвал ─────────── */
.foot{
  margin-top:var(--s9);
  padding-block:var(--s6);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5);
  align-items:center;
  font-size:.875rem; color:var(--dim);
}
.foot a{ transition:color .2s var(--ease); }
.foot a:hover{ color:var(--ink); }

/* ─────────── появление при прокрутке ───────────
   Прячем только при живом JS: без него содержимое обязано быть видно. */
.js .rise{ opacity:0; transform:translateY(16px); }
.js .rise.in{
  opacity:1; transform:none;
  transition:opacity .42s var(--ease), transform .42s var(--ease);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none!important; transition:none!important; }
  .rise{ opacity:1; transform:none; }
  .btn:hover{ transform:none; }
}

/* Атрибут hidden обязан побеждать любой display из правил ниже:
   26.08 счётчик очереди с display:inline-flex показывал «0» вместо
   того, чтобы спрятаться. */
[hidden]{ display:none!important; }