/* Пульт поставщика — вид «диспетчерский щит» (спека 2026-09-23-pult-full-design.md, раздел
   «Дизайн пульта»; макет docs/design/pult). У каждого объекта лампа, подписанная словами: одним
   цветом смысл не передаём. Цвет действий — фиолетовый, нарочно не похожий ни на одну лампу,
   чтобы кнопка не читалась как состояние. Шрифты лежат рядом (fonts/), к Google пульт не ходит. */

@font-face {
  font-family: "Geologica";
  src: url(/fonts/geologica-cyrillic.woff2) format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Geologica";
  src: url(/fonts/geologica-latin.woff2) format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(/fonts/jetbrains-mono-cyrillic.woff2) format("woff2");
  font-weight: 400 500;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(/fonts/jetbrains-mono-latin.woff2) format("woff2");
  font-weight: 400 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #f3f5f2;
  --panel: #ffffff;
  --sunk: #e8ece7;
  --rule: #d5dbd4;
  --ink: #1f2c30;
  --ink-2: #4c5b5e;
  --ink-3: #75837f;
  --act: #4a3fb0;
  --act-ink: #ffffff;
  --act-soft: #ebe9fa;
  --ok: #22875a;
  --warn: #c7890a;
  --bad: #c43d2b;
  --off: #9aa5a1;
  --ok-soft: #e2f1e8;
  --warn-soft: #faf0da;
  --bad-soft: #f8e3df;
  --r-s: 4px;
  --r-m: 10px;
  --sans: "Geologica", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #151b1d; --panel: #1c2427; --sunk: #232c30; --rule: #33403f;
    --ink: #e3ebe7; --ink-2: #b0bdb9; --ink-3: #82918d;
    --act: #a097ff; --act-ink: #17142a; --act-soft: #2a2745;
    --ok: #4cc38a; --warn: #e6b23f; --bad: #f07a68; --off: #6f7c79;
    --ok-soft: #1c3329; --warn-soft: #3a3019; --bad-soft: #3e2320;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #151b1d; --panel: #1c2427; --sunk: #232c30; --rule: #33403f;
  --ink: #e3ebe7; --ink-2: #b0bdb9; --ink-3: #82918d;
  --act: #a097ff; --act-ink: #17142a; --act-soft: #2a2745;
  --ok: #4cc38a; --warn: #e6b23f; --bad: #f07a68; --off: #6f7c79;
  --ok-soft: #1c3329; --warn-soft: #3a3019; --bad-soft: #3e2320;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--paper); color: var(--ink);
  font: 400 15px/1.5 var(--sans);
  font-feature-settings: "tnum" 1;
}
[hidden] { display: none !important; }
a { color: var(--act); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; border-radius: var(--r-s); }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 600; }
h1 { font-size: 30px; letter-spacing: -0.015em; font-weight: 650; }
h2 { font-size: 19px; margin: 32px 0 12px; }
h3 { font-size: 16px; margin: 0 0 10px; }
h4 { font-size: 15px; margin: 18px 0 8px; }
p { margin: 0 0 10px; }
.mono, code { font-family: var(--mono); font-size: 13.5px; }
.table td.mono { white-space: nowrap; }
.muted, .dim { color: var(--ink-3); }
.small { font-size: 13px; }

/* ── Каркас: меню слева, на телефоне — за кнопкой «Разделы» ── */
.shell {
  display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh;
  /* Полоса меню на всю высоту страницы: само меню липкое и ростом в окно, а длинная страница
     без этой полосы показывала бы под ним пустой фон. */
  background: linear-gradient(90deg, var(--panel) 235px, var(--rule) 235px 236px, transparent 236px);
}
.shell.signed-out { display: block; background: none; }
.side {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 22px;
  padding: 20px 14px 16px;
  background: var(--panel); border-right: 1px solid var(--rule);
}
.mark { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 650; font-size: 18px; }
.mark-lamps { display: inline-flex; gap: 3px; padding: 5px 6px; border-radius: 6px; background: var(--ink); }
.mark-lamps i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.mark-lamps i:nth-child(2) { background: var(--warn); }
.mark-lamps i:nth-child(3) { background: var(--bad); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: var(--r-s);
  color: var(--ink-2); text-decoration: none;
}
.nav a:hover { background: var(--sunk); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--act-soft); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--act); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border-top: 1px solid var(--rule); padding-top: 12px; }
.side-foot .who { font-weight: 600; margin-bottom: 4px; }
.topbar { display: none; }
.main { padding: 32px 40px 72px; max-width: 1240px; width: 100%; min-width: 0; }
.signed-out .main { max-width: none; padding: 0 16px; }

.head { margin-bottom: 8px; }
.head.row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.why { max-width: 70ch; color: var(--ink-2); margin: 8px 0 0; }
.crumbs, .back { display: inline-block; margin: 0 0 10px; color: var(--ink-3); font-size: 13.5px; }
.back { color: var(--act); }

/* ── Кнопки и поля. Кнопка без класса — главное действие. ── */
button {
  font: inherit; font-weight: 550; cursor: pointer;
  padding: 8px 14px; border-radius: var(--r-s); border: 0;
  background: var(--act); color: var(--act-ink);
}
button:hover { filter: brightness(1.08); }
button:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.quiet-button, .secondary {
  background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); font-weight: 500;
}
.quiet-button:not(:disabled):hover, .secondary:hover { box-shadow: inset 0 0 0 1px var(--ink-3); filter: none; }
button.quiet { background: none; color: var(--ink-2); padding: 4px 0; font-weight: 450; }
button.quiet:hover { color: var(--ink); filter: none; }
button.link { background: none; color: var(--act); padding: 0; font-weight: 450; text-decoration: underline; text-underline-offset: 3px; }
.button-link {
  display: inline-block; padding: 8px 14px; border-radius: var(--r-s);
  background: var(--act); color: var(--act-ink); text-decoration: none; font-weight: 550;
}
.danger-button { background: var(--bad); color: #fff; }
.actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

label { display: block; margin: 0 0 14px; font-size: 13.5px; color: var(--ink-2); }
input, select, textarea {
  display: block; width: 100%; margin-top: 4px;
  padding: 8px 10px; font: inherit; color: var(--ink);
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-s);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--act); outline-offset: 0; border-color: transparent; }
input.code { font-family: var(--mono); font-size: 22px; letter-spacing: 0.3em; text-align: center; }
label.check { display: flex; align-items: center; gap: 8px; color: var(--ink); }
label.check input { width: auto; margin: 0; }
.error { color: var(--bad); font-size: 14px; margin: 0 0 10px; }
.error:empty { display: none; }
.done { color: var(--ok); font-weight: 500; }
.advice { color: var(--ink-2); font-size: 14px; }

/* ── Лампы ── */
.lamp {
  display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 2px; vertical-align: 0; background: var(--off);
}
.lamp.ok { background: var(--ok); }
.lamp.warn { background: var(--warn); }
.lamp.bad { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.lamp.off { background: transparent; box-shadow: inset 0 0 0 2px var(--off); }

/* ── Карточки, таблицы, факты ── */
.card {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-m);
  padding: 20px 22px; overflow-x: auto;
}
.card + .card { margin-top: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 16px; }
.grid2 .card + .card { margin-top: 0; }
.table, .facts-table { width: 100%; border-collapse: collapse; }
.table th, .facts-table th {
  text-align: left; font-weight: 500; font-size: 13px; color: var(--ink-3);
  padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top;
}
.table td, .facts-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; overflow-wrap: anywhere; }
.facts-table th { width: 45%; border-bottom: 0; border-top: 1px solid var(--rule); font-size: 14px; }
.facts-table td { border-bottom: 0; border-top: 1px solid var(--rule); font-size: 14px; }
.facts-table tr.bad th, .facts-table tr.bad td, .table tr.bad td { color: var(--bad); font-weight: 600; }
.facts-table tr.warn th, .facts-table tr.warn td { font-weight: 600; }
.facts-table tr.warn th { box-shadow: inset 3px 0 0 var(--warn); padding-left: 8px; }
.journal th { width: auto; border-top: 0; border-bottom: 1px solid var(--rule); }
.journal td { border-top: 0; border-bottom: 1px solid var(--rule); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 16px; font-size: 14px; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
ul.plain { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; font-size: 14px; }
ul.plain li { display: flex; align-items: baseline; gap: 8px; }
.lead { font-weight: 600; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 11px; font-size: 12.5px; background: var(--sunk); color: var(--ink-2); }
.tag.warn { background: var(--warn-soft); color: var(--ink); }
.tag.bad { background: var(--bad-soft); color: var(--ink); }

/* ── Вход ── */
.entry { max-width: 400px; margin: 12vh auto 0; }
.entry h1 { font-size: 24px; margin: 14px 0 6px; }
.entry .hint { margin: 0 0 20px; color: var(--ink-2); font-size: 14px; }

/* ── Сводка ── */
.attention { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.attention li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 14px 4px; border-bottom: 1px solid var(--rule);
}
.attention .lamp { margin-top: 6px; }
.attention .what { margin: 0; font-weight: 550; }
.attention .more { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; }
.attention.empty li { grid-template-columns: 18px 1fr; }
.box-health.bad { border-color: var(--bad); }
.box-health summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.box-health[open] summary { margin-bottom: 10px; }

/* ── Клиенты ── */
.new-client { max-width: 480px; margin-bottom: 16px; }
.client-list { display: grid; padding: 4px 8px; }
.client-tile {
  display: grid; grid-template-columns: minmax(180px, 1fr) 120px minmax(200px, 2fr); gap: 4px 16px; align-items: baseline;
  padding: 12px 10px; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none;
}
.client-tile:first-child { border-top: 0; }
.client-tile:hover { background: var(--sunk); }
.client-tile .name { display: flex; align-items: center; gap: 10px; }
.client-tile b { font-weight: 600; color: var(--act); }
.client-tile .risk-text { grid-column: 1 / -1; padding-left: 20px; color: var(--ink-2); font-size: 14px; }
.client-tile.frozen b { color: var(--ink-3); }

/* ── Карточка выбранного сбоку ── */
.side-card { position: sticky; top: 20px; }
.side-card h3 { margin: 4px 0 12px; font-size: 19px; overflow-wrap: anywhere; }
.side-card h4 { margin: 18px 0 8px; font-size: 15px; }
.side-card .kind, .bpanel .kind { margin: 0; color: var(--ink-3); font-size: 13px; }
/* Риск ящика — жёлтый, не красный: он о настройке, Гостей он сейчас не задевает (правило ламп). */
.risks { margin: 0 0 16px; padding-left: 20px; }
ul.card.risks { padding: 12px 12px 12px 32px; border-color: var(--warn); background: var(--warn-soft); }
ul.card.risks li::marker { color: var(--warn); }
.add { margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 10px; }
.add form { margin-top: 10px; }
.own-limits-box { margin-top: 16px; }
.own-limits-box summary { cursor: pointer; font-weight: 600; }
.own-limits-box[open] summary { margin-bottom: 10px; }
.own-limit { margin-bottom: 8px; }
.own-limit label { margin-bottom: 4px; }

/* ── Схема устройства (модель v2): юрлица → базы с организациями и точками → вывески → сайты.
   Все связи идут слева направо; наведение подсвечивает связи объекта, остальное гаснет. ── */
.dgm { position: relative; }
.dedges { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 1; }
/* Слои (27.09.2026: «схемы оборванные»): линии — над серыми плашками базы и организаций, но под
   карточками. Раньше весь столбец лежал над линиями, и плашки базы обрывали их на своём краю. */
.dcols { position: relative; display: grid; grid-template-columns: 1fr 1.45fr 0.9fr 1.05fr; gap: 44px; align-items: start; }
.dcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dcol-title { margin: 0 0 2px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.dn {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  font: inherit; color: var(--ink); text-decoration: none;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-s); padding: 8px 10px;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
button.dn { cursor: pointer; }
button.dn:hover { border-color: var(--ink-3); filter: none; }
.dn-name { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.dn-name.domain { font-family: var(--mono); font-weight: 500; font-size: 13px; }
.dn-sub { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; }
.dn-empty { margin: 0; font-size: 13px; color: var(--ink-3); }
.dn-new, .dn-todo { align-self: flex-start; margin-top: 3px; padding: 0 7px; border-radius: 9px; font-size: 11.5px; font-weight: 600; }
.dn-new { background: var(--act-soft); color: var(--act); }
.dn-todo { background: var(--warn-soft); color: var(--ink); }
.dn.todo { border-style: dashed; border-color: var(--warn); }
.dn.todo .dn-name { color: var(--ink-2); }
.dn.new { border-color: var(--act); }
.dn.warn { box-shadow: inset 3px 0 0 var(--warn); }
.dn.selected { border-color: var(--act); box-shadow: 0 0 0 2px var(--act); }
.dn.legal { border-left-width: 3px; border-left-color: var(--ink-2); }
.dbase { border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--sunk); padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.dn.base-head { background: transparent; border: 0; padding: 4px 4px 2px; }
.dn.base-head .dn-name { font-size: 15px; }
.dorg { border: 1px dashed var(--rule); border-radius: var(--r-s); padding: 6px 7px 7px; background: var(--paper); display: flex; flex-direction: column; gap: 6px; }
.dorg-name { margin: 0; font-size: 12.5px; color: var(--ink-2); display: flex; gap: 6px; align-items: baseline; }
.dn-head { font-size: 11.5px; color: var(--ink-3); }
/* Касса iiko, не заведённая точкой (25.09.2026): сведения, а не объект схемы — без рамки. */
.dreg { margin: 0; padding: 2px 4px; font-size: 12px; color: var(--ink-3); border-left: 2px dotted var(--rule); }
.legend-base { flex-basis: 100%; margin: 0 0 6px; font-size: 13px; color: var(--ink-2); max-width: 78ch; }

/* ── «Что в iiko» на странице клиента (25.09.2026) ── */
.iiko-panel { margin-top: 16px; }
.iiko-panel h3 { margin: 0; }
.iiko-org { border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 14px; }
.iiko-org p { margin: 2px 0; }
.iiko-org.outside h4 { color: var(--ink-2); }
.iiko-org-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.iiko-org-head h4 { margin: 0; font-size: 16px; }
.iiko-org .table { margin-top: 8px; }
.tag.quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
.note-warn { padding: 6px 10px; border-radius: var(--r-s); background: var(--warn-soft); }
.block { display: block; }
.legend-iiko { margin-top: 14px; }
/* ── «Привязка к iiko» на странице клиента (границы клиентов, часть 4а) ── */
.iiko-binding { margin-top: 16px; }
.iiko-binding h3 { margin: 0; }
.binding-base { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 12px; }
.binding-org { margin: 12px 0 0; padding-left: 10px; border-left: 2px solid var(--rule); }
.binding-org h5 { margin: 0 0 6px; font-size: 15px; display: flex; gap: 8px; align-items: baseline; }
.binding-hooks li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
label.check.inline { display: inline-flex; margin: 0; }
.binding-pending { margin: 12px 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--sunk); }
.binding-pending h4 { margin: 0 0 6px; }
/* Заголовок карточки с лампой («Платформа»): лампа — рядом со словами, а не над ними. */
.lamp-title { display: flex; align-items: center; gap: 8px; margin-top: 0; }
.registers { table-layout: fixed; }
.registers th:nth-child(1) { width: 36%; }
.registers th:nth-child(2) { width: 26%; }
.registers td { overflow-wrap: normal; word-break: normal; }
/* Телефон: строка кассы — карточкой, иначе имя кассы рвётся посередине слова. */
@media (max-width: 560px) {
  .registers thead { display: none; }
  .registers tr { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
  .registers td { border: 0; padding: 0; }
  .registers td:first-child { grid-column: 1 / -1; }
}
.edge { fill: none; stroke: var(--rule); stroke-width: 1.5; transition: opacity 0.15s ease, stroke 0.15s ease; }
.edge.operator { stroke: var(--ink-2); stroke-width: 2.2; }
.edge.recipient { stroke: var(--ink-3); stroke-dasharray: 5 4; }
.edge.nocontract { stroke: var(--warn); }
.edge.site { stroke: var(--act); opacity: 0.45; }
.dgm.focus .dn:not(.lit) { opacity: 0.32; }
.dgm.focus .dbase:not(:has(.lit)) { opacity: 0.55; }
.dgm.focus .edge:not(.lit) { opacity: 0.12; }
.dgm.focus .edge.lit { stroke-width: 2.4; opacity: 1; }
.dgm.compact .dcols { gap: 22px; }
.dgm.compact .dcol-title { font-size: 12px; }
.dgm.compact .dn { padding: 5px 7px; }
.dgm.compact .dn-name { font-size: 12.5px; }
.dgm.compact .dn-name.domain { font-size: 11.5px; }
.dgm.compact .dn-sub, .dgm.compact .dorg-name { font-size: 11px; }
.dgm.types .dn-sub { font-size: 13px; color: var(--ink-2); }
.lines-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; font-size: 13.5px; color: var(--ink-2); }
.lines-legend span { display: inline-flex; align-items: center; gap: 8px; }
.ln { display: inline-block; width: 30px; height: 0; border-top: 1.5px solid var(--rule); }
.ln.operator { border-top: 2.2px solid var(--ink-2); }
.ln.recipient { border-top: 1.5px dashed var(--ink-3); }
.ln.site { border-top: 1.5px solid var(--act); opacity: 0.6; }
.rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 32px; }
.rules li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--rule); }
.rules b { font-weight: 600; }
.rules span { color: var(--ink-2); font-size: 14px; }

/* ── Схемы: «сейчас» и «позже» — строкой: широкая картинка слева, пояснение справа ── */
.variants { display: grid; gap: 18px; margin-top: 18px; }
.variant { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 28px; align-items: start; }
.variant h2 { grid-column: 1 / -1; margin: 0; font-size: 19px; }
.variant h2 .tag { margin-left: 10px; vertical-align: 2px; }
.variant > .muted { grid-column: 1 / -1; margin: 2px 0 12px; }
.variant .dgm { grid-column: 1; grid-row: 3 / span 2; padding: 14px; border-radius: var(--r-s); background: var(--paper); }
.variant .facts { grid-column: 2; margin: 0; display: block; }
.variant .facts div { display: grid; gap: 1px; margin-bottom: 10px; }
.variant .facts dd { margin: 0; font-size: 14px; }
.variant .actions { grid-column: 2; }
.variant.now { border-color: var(--ok); box-shadow: inset 4px 0 0 var(--ok); }
.variant.later .dgm { opacity: 0.85; }
.tag.ok-tag { background: var(--ok-soft); color: var(--ink); }

/* ── Конструктор и страница клиента: схема слева, карточка и проверки справа ── */
.builder { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; margin-top: 14px; }
.bcanvas { padding: 18px; overflow-x: auto; }
.bcanvas .dgm { min-width: 700px; }
.bcanvas h3 { margin: 22px 0 8px; }
.bcanvas .hint { margin: 16px 0 0; }
.bpanel { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 20px; }
.bpanel .card { padding: 16px 18px; }
.bpanel .card + .card { margin-top: 0; }
.bpanel h3 { margin: 0 0 8px; }
.bpanel .field { margin-top: 10px; }
.add-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.change + .change { border-top: 1px solid var(--rule); margin-top: 12px; padding-top: 12px; }
.change-what { margin: 0 0 6px; font-weight: 600; }
.change .plain li, .checks li { font-size: 14px; margin-bottom: 4px; }
.inline-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.inline-form .field { flex: 1; margin: 0; }
.found { border: 1px solid var(--rule); border-radius: var(--r-s); padding: 12px 14px; margin: 10px 0 0; }
.found h4 { margin: 0 0 6px; }
.attention.compact li { padding: 6px 0; }
.new-client { max-width: 520px; }

/* ── Линейка готовности сайта: пять ламп подписанными шагами (этап 3) ── */
.rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.rail li { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-s); background: var(--sunk); }
.rail li b { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.rail li .lamp { margin-right: 0; }
.rail li { position: relative; }
.rail-words { font-size: 13.5px; color: var(--ink-2); }
.rail li.bad { box-shadow: inset 3px 0 0 var(--bad); }
.rail li.warn { box-shadow: inset 3px 0 0 var(--warn); }
.rail.compact { display: flex; gap: 6px; }
.rail.compact li { flex-direction: row; align-items: center; padding: 0; background: none; box-shadow: none; }
.rail.compact li b { display: none; }
#missing { margin: 10px 0 0; }
.profile-form { max-width: 640px; }
.profile-form textarea { font: inherit; }

/* ── iiko: пределы строками ── */
.limits .limit { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 6px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); }
.limits .limit:first-of-type { border-top: 0; }
.limits .limit .what p { margin: 2px 0 0; }
.limits .limit input { margin: 0; }
.limits .limit .error, .limits .limit .advice { grid-column: 1 / -1; margin: 0; }
.limits .limit .advice:empty { display: none; }

/* ── Сервер и опасные действия ── */
.danger { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 12px; }
.danger:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.danger-zone { border: 1px solid var(--bad-soft); background: color-mix(in srgb, var(--bad-soft) 45%, var(--panel)); border-radius: var(--r-s); padding: 12px; }
.danger-dialog {
  max-width: 460px; width: calc(100% - 32px);
  border: 1px solid var(--rule); border-radius: var(--r-m); padding: 20px;
  background: var(--panel); color: var(--ink);
}
.danger-dialog::backdrop { background: rgba(10, 14, 16, 0.45); }
.danger-dialog h3 { margin: 0 0 8px; overflow-wrap: anywhere; }
.danger-dialog ul { margin: 0 0 14px; padding-left: 20px; }
.danger-dialog .actions { justify-content: flex-end; }

/* ── Телефон ── */
@media (max-width: 1080px) {
  .builder { grid-template-columns: minmax(0, 1fr); }
  .bpanel, .side-card { position: static; }
  .variant { grid-template-columns: 1fr; }
  .variant .dgm, .variant .facts, .variant .actions { grid-column: 1; grid-row: auto; }
  .variant .facts { margin-top: 14px; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); background: none; }
  .side {
    position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 20; height: 100%;
    transform: translateX(-100%); visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }
  /* Закрытое меню и невидимо: иначе Tab уводил бы фокус в разделы за краем экрана. */
  .side.open { transform: none; visibility: visible; transition: transform 0.2s ease; box-shadow: 0 0 0 100vmax rgba(10, 14, 16, 0.35); }
  .topbar {
    display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 10;
    padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--rule);
  }
  .main { padding: 20px 16px 56px; }
  h1 { font-size: 25px; }
  .attention li { grid-template-columns: 18px minmax(0, 1fr); }
  .attention li > :last-child:not(div) { grid-column: 2; justify-self: start; }
  .client-tile { grid-template-columns: 1fr; }
  .client-tile .risk-text { padding-left: 0; }
  .limits .limit { grid-template-columns: minmax(0, 1fr) 100px; }
  .limits .limit button { grid-column: 1 / -1; }
  .dcols { gap: 26px; }
  .rail { grid-template-columns: minmax(0, 1fr); }
  .variant .dgm { overflow-x: auto; }
  .variant .dgm .dcols { min-width: 560px; }
  .entry { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .side, .dn, .edge { transition: none; }
}

/* Глазик у скрытых полей (27.09.2026): кнопка внутри поля справа; держите — видно введённое. */
.secret { position: relative; display: block; }
.secret > input { width: 100%; padding-right: 42px; box-sizing: border-box; }
.secret > button.eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; margin: 0; padding: 5px; border: none; border-radius: 8px;
  background: none; box-shadow: none; color: var(--ink-3); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.secret > button.eye:hover, .secret > button.eye[aria-pressed="true"] { color: var(--ink); background: var(--sunk); }
.secret > button.eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Итог действия в своей карточке сайта («Проверить сейчас», почта, бот) — 27.09.2026. */
.card-said { margin: 10px 0 0; font-size: 14px; color: var(--ok); }
.card-said:empty { display: none; }
.card-said.error { color: var(--bad); }