/* ══════════════════════════════════════════════════════════════════════════════
   KAERIS · экран разбора — общие стили.

   Жил внутри review.html до 17.08. Вынесен, когда тот же экран понадобился на
   главной (шаг 2 пересборки, docs/composition-2026-08-16.md): страница-демо и
   боевой экран обязаны быть ОДНИМ, иначе за месяц разъедутся — это мы уже
   проходили с tokens.css, где копия «для дизайна» жила отдельно от прода.

   ⚠️ Файл НЕ подключается к index.html и подключён быть не может: здесь заняты
   имена .pill, .step, .row, .box, .search — на лендинге они значат другое.
   Поэтому демо живёт отдельной страницей (review-demo.html), а не куском разметки.
   ══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   Экран разбора. Каждое значение здесь — ступень шкалы из tokens.css.
   Ни одного «на глаз»: сторож test_design_scale_is_held.py читает эту страницу
   в строгом режиме и красит сборку, если появится 20-й отступ или 13-й цвет.
   ═══════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--n-1); color:var(--n-12);
  font-family:'Onest',system-ui,sans-serif; font-size:var(--t-3); line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;
}
.page{max-width:1500px; margin:0 auto; padding:var(--s-6)}

/* ══ КОРПУС ═══════════════════════════════════════════════════════════════
   Ровно ОДИН на экран, и ниже его уровня фактуры нет вообще. Кожух в кожухе
   возвращает ту самую машинность, ради ухода от которой всё и затевалось —
   на это стоит отдельный тест (test_exactly_one_chassis_per_screen).

   Рамка ГРАДИЕНТНАЯ, а не сплошная: сплошная светлая линия по всему периметру
   спорит с подложкой, которая книзу темнеет — сверху честно, а внизу светлый
   контур висит вокруг тёмного. Два фона (padding-box — подложка, border-box —
   кромка) дают край, темнеющий синхронно. Так выглядит фаска на металле.     */
.chassis{
  position:relative; padding:var(--s-2); border:1px solid transparent; border-radius:var(--r-3);
  background:
    linear-gradient(180deg,var(--n-4),var(--n-2) 55%,var(--n-1)) padding-box,
    linear-gradient(180deg,var(--n-8) 0%,var(--n-6) 38%,var(--n-3) 78%,var(--n-2) 100%) border-box;
  box-shadow:0 22px 44px -20px rgba(0,0,0,.9);
}
.chassis::after{
  /* Зерно мельче и отодвинуто на 2px от края: крупная частота на увеличении
     рассыпается в квадраты, а на самой кромке зерно её разъедает. */
  content:""; position:absolute; inset:var(--s-0); border-radius:10px;
  pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.2' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Внутренний радиус = внешний − рамка − отступ (12 − 1 − 6 = 5). Именно поэтому
   в шкале есть --r-inner: взять ближайший из «красивых» четырёх нельзя, из-под
   рамки полезут уголки. */
.chassis .tool{border-radius:var(--r-inner)}
.plate{display:flex; align-items:center; gap:var(--s-3); padding:var(--s-2) var(--s-4) var(--s-4)}
.plate .mark{font-size:var(--t-0); letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:var(--n-10)}
.plate .led{width:var(--s-3); height:var(--s-3); border-radius:var(--r-full); background:var(--a-9);
  box-shadow:0 0 7px 1px var(--a-9)}
.plate .stamp{margin-left:auto; font-size:var(--t-0); color:var(--n-9);
  font-family:'JetBrains Mono',monospace}

/* ══ ИНСТРУМЕНТ ═══════════════════════════════════════════════════════════ */
.tool{background:var(--n-2); border:1px solid var(--n-6); border-radius:var(--r-2); overflow:hidden}
.bar{display:flex; align-items:center; gap:var(--s-5); padding:var(--s-4) var(--s-5);
  border-bottom:1px solid var(--n-6)}
.bar .brand{font-size:var(--t-0); letter-spacing:.2em; font-weight:600; color:var(--n-10)}
.bar .file{font-family:'JetBrains Mono',monospace; font-size:var(--t-2); color:var(--n-12)}
.bar .meta{font-size:var(--t-1); color:var(--n-9)}
.spacer{flex:1}

.btn{border:1px solid var(--n-7); background:var(--n-3); color:var(--n-12); border-radius:var(--r-1);
  padding:var(--s-2) var(--s-4); font:inherit; font-size:var(--t-2); cursor:pointer;
  transition:background var(--in)}
.btn:hover{background:var(--n-4)}
.btn:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.btn[disabled]{opacity:.4; cursor:default}
.btn-primary{background:var(--a-9); color:var(--on-a); border-color:transparent; font-weight:500}
.btn-primary:hover{background:var(--a-10)}
a.btn{text-decoration:none; display:inline-block}

.langs{display:flex; align-items:center; gap:var(--s-2); padding:var(--s-3) var(--s-5);
  border-bottom:1px solid var(--n-6); flex-wrap:wrap}
.chip{border:1px solid transparent; background:transparent; color:var(--n-11); border-radius:var(--r-1);
  padding:var(--s-1) var(--s-4); font:inherit; font-size:var(--t-2); cursor:pointer}
.chip:hover{background:var(--n-3)}
.chip:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.chip.on{background:var(--a-9); color:var(--on-a); font-weight:500}
.models{font-family:'JetBrains Mono',monospace; font-size:var(--t-1); color:var(--n-9)}

.filters{display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-5);
  border-bottom:1px solid var(--n-6); flex-wrap:wrap}
.search{flex:0 1 300px; background:var(--n-1); border:1px solid var(--n-6); border-radius:var(--r-1);
  padding:var(--s-2) var(--s-3); color:var(--n-12); font-size:var(--t-2);
  font-family:'JetBrains Mono',monospace}
.search::placeholder{color:var(--n-10)}
.search:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.pill{background:transparent; border:1px solid transparent; color:var(--n-10); font:inherit;
  font-size:var(--t-2); padding:var(--s-1) var(--s-3); border-radius:var(--r-1); cursor:pointer}
.pill:hover{background:var(--n-3); color:var(--n-12)}
.pill:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.pill.on{background:var(--n-3); color:var(--n-12)}
.pill.warn{color:var(--warn-11)}
.sel-count{font-size:var(--t-1); color:var(--n-10)}

.split{display:grid; grid-template-columns:460px 1fr; min-height:430px}
.list{border-right:1px solid var(--n-6); display:flex; flex-direction:column; min-width:0}
.list .scroll{overflow-y:auto; max-height:520px}
.list table{border-collapse:collapse; width:100%; font-size:var(--t-2)}
.list th{text-align:left; font-weight:500; color:var(--n-10); font-size:var(--t-0);
  letter-spacing:.08em; text-transform:uppercase; padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--n-6); position:sticky; top:0; background:var(--n-2)}
.list td{padding:0 var(--s-4); height:var(--row-h); vertical-align:middle;
  border-bottom:1px solid var(--n-3); max-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.list tr{cursor:pointer}
.list tr:hover td{background:var(--n-3)}
.list tr.on td{background:var(--n-3)}
.list tr.on td:first-child{box-shadow:inset 2px 0 0 var(--a-9)}
.list tr:focus-visible{outline:none}
.list tr:focus-visible td{box-shadow:inset 0 0 0 2px var(--a-10)}
.k{font-family:'JetBrains Mono',monospace; font-size:var(--t-1); color:var(--n-11)}
/* font:inherit обязателен: браузер даёт кнопке свой шрифт 13.3333px Arial, и он
   тут же становится девятым кеглем на странице, где их восемь. */
.box{width:var(--s-4); height:var(--s-4); border:1px solid var(--n-7); border-radius:var(--r-1);
  display:inline-block; vertical-align:middle; background:transparent; padding:0; cursor:pointer;
  font:inherit}
.box.on{background:var(--a-9); border-color:var(--a-9)}
.box:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.num{font-variant-numeric:tabular-nums; text-align:right; color:var(--n-11)}
.same{color:var(--n-9)}
.diverged{color:var(--a-11)}
.accepted{color:var(--ok-11)}
.untranslated{color:var(--warn-11); border:1px dashed var(--warn-9); border-radius:var(--r-1);
  padding:var(--s-0) var(--s-2); font-size:var(--t-1)}
.list .foot{margin-top:auto; padding:var(--s-3) var(--s-4); border-top:1px solid var(--n-6);
  font-size:var(--t-1); color:var(--n-10); display:flex; gap:var(--s-4); flex-wrap:wrap}
.list .foot b{color:var(--a-11); font-weight:400}

.detail{padding:var(--s-5) var(--s-6); display:flex; flex-direction:column; min-width:0}
.detail .top{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap}
.detail .key{font-family:'JetBrains Mono',monospace; font-size:var(--t-3); color:var(--n-12)}
.badge{font-size:var(--t-0); letter-spacing:.08em; text-transform:uppercase; color:var(--a-11);
  border:1px solid var(--a-9); border-radius:var(--r-1); padding:var(--s-0) var(--s-2)}
.badge.ok{color:var(--ok-11); border-color:var(--ok-9)}
.detail .pos{margin-left:auto; font-size:var(--t-1); color:var(--n-10)}
.step{display:grid; grid-template-columns:118px 1fr; align-items:baseline; gap:var(--s-5);
  padding:var(--s-4) 0; border-bottom:1px solid var(--n-3)}
.step .lbl{font-size:var(--t-0); letter-spacing:.1em; text-transform:uppercase; color:var(--n-9)}
.step .val{font-size:var(--t-5); line-height:var(--lh-tight); word-break:break-word}
.step .val.tr{font-family:'JetBrains Mono',monospace; font-size:var(--t-4); color:var(--n-10)}
.step .val.tr[contenteditable="true"]{color:var(--n-12); border-radius:var(--r-1)}
.step .val.tr[contenteditable="true"]:hover{background:var(--n-3)}
.step .val.tr:focus-visible{outline:none; box-shadow:var(--focus-ring); background:var(--n-3)}
.hl{background:var(--a-3); color:var(--a-11); padding:0 var(--s-2); border-radius:var(--r-1)}

.panes{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-7); padding:var(--s-5) 0}
.pane h3{margin:0 0 var(--s-3); font-size:var(--t-0); letter-spacing:.1em; text-transform:uppercase;
  color:var(--n-9); font-weight:500}
.row{display:flex; align-items:center; gap:var(--s-4); padding:var(--s-2) 0;
  border-bottom:1px solid var(--n-3); font-size:var(--t-2)}
.row > span:first-child{color:var(--n-11)}
.row .v{margin-left:auto; color:var(--n-12); font-variant-numeric:tabular-nums;
  font-family:'JetBrains Mono',monospace; font-size:var(--t-1)}
.row .v.fired{color:var(--a-11)}
.row .v.ok{color:var(--ok-11)}
.row .v.bad{color:var(--bad-11)}
.meter{width:110px; height:4px; border-radius:var(--r-full); background:var(--n-4);
  position:relative; margin-left:auto}
.meter b{position:absolute; top:0; bottom:0; left:0; background:var(--a-9); border-radius:var(--r-full)}

.actions{display:flex; align-items:center; gap:var(--s-3); padding-top:var(--s-5);
  border-top:1px solid var(--n-6); margin-top:auto; flex-wrap:wrap}
.keys{margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:var(--t-1); color:var(--n-9)}

.quota{display:flex; align-items:center; gap:var(--s-6); padding:var(--s-3) var(--s-5);
  border-top:1px solid var(--n-6); font-family:'JetBrains Mono',monospace; font-size:var(--t-1);
  color:var(--n-10); flex-wrap:wrap}
.quota .done{margin-left:auto; color:var(--ok-11)}

.note{padding:var(--s-8) var(--s-6); text-align:center; color:var(--n-11); font-size:var(--t-3)}
.note b{display:block; color:var(--n-12); font-weight:500; margin-bottom:var(--s-3)}
.note .btn{margin-top:var(--s-5)}
.banner{padding:var(--s-3) var(--s-5); border-bottom:1px solid var(--n-6); font-size:var(--t-2);
  color:var(--n-11); background:var(--n-3)}
.hidden{display:none}

@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .list{border-right:0; border-bottom:1px solid var(--n-6)}
  .panes{grid-template-columns:1fr; gap:var(--s-5)}
}