/* Конструктор шаблонов: список (pages/template-builder.js, .tb-*) и редактор (pages/template-editor.js, .tbe-*). Только токены темы. */

/* ── Список ─────────────────────────────────────────────────────────────────── */
.tb { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--page-max, 1600px); }
.tb .page-header { align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.tb-lead { margin: 6px 0 0; max-width: 78ch; color: var(--text-secondary); font-size: var(--text-base); line-height: 1.5; }
.tb-head-acts { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.tb-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.tb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tb-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--radius-full); border: 1px solid var(--border-default); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.tb-chip:hover { background: var(--bg-panel-hover); }
.tb-chip--on { background: var(--accent-surface); border-color: var(--accent-primary); color: var(--text-primary); font-weight: var(--font-semibold); }
.tb-chip__n { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: var(--font-medium); }
.tb-search .form-input { min-width: 260px; }
.tb-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tb-name { display: block; font-weight: var(--font-semibold); }
.tb-code { display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.tb-sub { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.tb-sub--warn { color: var(--status-warning); }
.tb-kit { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-full); background: var(--status-info-bg); color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--font-medium); vertical-align: 1px; }
.tb-acts { display: inline-flex; gap: 2px; }
.tb-meta { margin: 8px 0 4px; color: var(--text-secondary); font-size: var(--text-sm); }
.tb-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

/* окно «Из образца» */
.tb-drop { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; text-align: center; padding: 26px 16px; margin: 12px 0; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--bg-subtle); cursor: pointer; }
.tb-drop:hover, .tb-drop--over { border-color: var(--accent-primary); background: var(--accent-surface); }
.tb-drop--has { border-style: solid; border-color: var(--accent-primary); }
.tb-drop__t { font-weight: var(--font-medium); overflow-wrap: anywhere; }
.tb-drop__s { color: var(--text-muted); font-size: var(--text-sm); }
.tb-found { margin: 10px 0 14px; padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-secondary); }
.tb-found ul { margin: 6px 0 0; padding-left: 18px; font-size: var(--text-sm); }
.tb-warn { color: var(--status-warning); }
.tb-found .tb-code { display: inline; margin-left: 4px; }

/* ── Редактор ───────────────────────────────────────────────────────────────── */
.tbe { display: flex; flex-direction: column; gap: var(--space-3); max-width: none; }
.tbe-top { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.tbe-name { flex: 1 1 260px; min-width: 200px; max-width: 560px; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); font: inherit; font-size: var(--text-lg); font-weight: var(--font-semibold); }
.tbe-name:hover:not(:disabled), .tbe-name:focus { border-color: var(--border-default); background: var(--bg-secondary); outline: none; }
.tbe-save { color: var(--text-muted); font-size: var(--text-sm); min-width: 14ch; }
.tbe-save[data-state="error"] { color: var(--status-danger); }
.tbe-acts { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tbe-seg { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; }
.tbe-seg__b { border: 0; background: transparent; color: var(--text-secondary); padding: 6px 12px; font: inherit; font-size: var(--text-sm); cursor: pointer; }
.tbe-seg__b + .tbe-seg__b { border-left: 1px solid var(--border-default); }
.tbe-seg__b--on { background: var(--accent-surface); color: var(--text-primary); font-weight: var(--font-semibold); }
.tbe-seg__b:disabled { opacity: .45; cursor: not-allowed; }
.tbe-more { position: relative; }
.tbe-more__m { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 210px; padding: 4px; display: flex; flex-direction: column; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-elevated); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.tbe-more__m[hidden] { display: none; }
.tbe-more__m button { border: 0; background: transparent; color: inherit; font: inherit; font-size: var(--text-sm); text-align: left; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.tbe-more__m button:hover { background: var(--bg-panel-hover); }
.tbe-banner { padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--status-warning); background: var(--status-warning-bg); font-size: var(--text-sm); line-height: 1.5; }
.tbe-banner--info { border-color: var(--accent-primary); background: var(--accent-surface); }

.tbe-grid { display: grid; grid-template-columns: 320px minmax(380px, 1fr) minmax(300px, 440px); gap: var(--space-4); align-items: start; }
.tbe-side, .tbe-mid, .tbe-prev { min-width: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-card); }
.tbe-side { position: sticky; top: 12px; max-height: calc(100vh - 150px); overflow: auto; }
.tbe-prev { position: sticky; top: 12px; max-height: calc(100vh - 150px); display: flex; flex-direction: column; }
.tbe-tabs { display: flex; border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; background: var(--bg-card); z-index: 2; }
.tbe-tab { flex: 1; padding: 11px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-base); cursor: pointer; }
.tbe-tab--on { color: var(--text-primary); border-bottom-color: var(--accent-primary); font-weight: var(--font-semibold); }
.tbe-n { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--bg-subtle); font-size: var(--text-xs); }
.tbe-tabbody { padding: var(--space-3); }

.tbe-fl { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tbe-f { padding: 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-secondary); }
.tbe-f--bad { border-color: var(--status-danger); }
.tbe-f__head { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 6px; }
.tbe-f__bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.tbe-f__req { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-secondary); }
.tbe-f__acts { display: inline-flex; gap: 2px; flex-wrap: wrap; }
.tbe-f__prob { margin: 6px 0 0; color: var(--status-danger); font-size: var(--text-sm); }
.tbe-f__hint { margin: 6px 0 0; color: var(--text-muted); font-size: var(--text-xs); }
.tbe-f__more { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-subtle); font-size: var(--text-sm); color: var(--text-secondary); }
.tbe-f__more label { display: flex; flex-direction: column; gap: 4px; }
.tbe-empty { padding: 14px; color: var(--text-muted); font-size: var(--text-sm); text-align: center; }
.tbe-add { width: 100%; }
/* настройки в узкой колонке: поля друг под другом, кроме четырёх полей страницы */
.tbe-set .tbe-2 { display: grid; gap: 0; grid-template-columns: 1fr; }
.tbe-set .tbe-4 { display: grid; gap: var(--space-2); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tbe-set label { font-size: var(--text-sm); color: var(--text-secondary); display: flex; flex-direction: column; gap: 4px; }
.tbe-fs { margin: 0 0 var(--space-3); padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.tbe-fs legend { padding: 0 6px; font-size: var(--text-sm); color: var(--text-muted); }
.tbe-rad { flex-direction: row !important; align-items: center; gap: 8px !important; margin: 4px 0; color: var(--text-primary) !important; font-size: var(--text-base) !important; }

.tbe-midbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); }
.tbe-ins { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; }
.tbe-ins .form-input { min-width: 180px; max-width: 260px; }
.tbe-hintline { color: var(--text-muted); font-size: var(--text-xs); }
.tbe-hintline code { font-family: var(--font-mono); }
.tbe-rich { padding: 12px; }
.tbe-rich .lr__area { min-height: 420px; max-height: calc(100vh - 330px); overflow: auto; }
.tbe-rich--ro .lr__area { opacity: .85; }
.tbe-problems { list-style: none; margin: 0; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.tbe-prob { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--status-warning-bg); font-size: var(--text-sm); }
.tbe-prob--bad { background: var(--status-danger-bg); color: var(--status-danger); }
.tbe-pl { margin: 6px 0 0; padding-left: 18px; font-size: var(--text-sm); }
.tbe-pl--bad { color: var(--status-danger); }

.tbe-prevh { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-muted); }
.tbe-sheet { flex: 1; min-height: 360px; overflow: auto; padding: 18px; background: color-mix(in srgb, var(--surface-primary) 70%, #000); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.tbe-frame { margin: 0 auto 14px; background: #fff; box-shadow: 0 10px 34px rgba(0,0,0,.45); overflow: hidden; }
.tbe-if { border: 0; background: #fff; transform-origin: 0 0; display: block; }
.tbe-msg { padding: 60px 24px; text-align: center; color: var(--text-muted); font-size: var(--text-base); }
.tbe-sheetmeta { text-align: center; font-size: var(--text-xs); color: var(--text-muted); }
.tbe-pw { margin: 8px 0 0; padding-left: 18px; font-size: var(--text-xs); color: var(--status-warning); }

/* ширина окна минус боковое меню (248 px): три колонки — от 1280 px окна, две — от 1000 px */
@media (max-width: 1279px) { .tbe-grid { grid-template-columns: 330px minmax(0, 1fr); } .tbe-prev { grid-column: 1 / -1; position: static; max-height: none; } }
@media (max-width: 999px) { .tbe-grid { grid-template-columns: 1fr; } .tbe-side { position: static; max-height: none; } }

/* столбцы таблицы в блоке «Ещё» поля */
.tbe-cols { display: flex; flex-direction: column; gap: 6px; }
.tbe-cols__t { color: var(--text-secondary); font-size: var(--text-sm); }
.tbe-col { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto; gap: 6px; align-items: center; }
.tbe-col .form-input { min-width: 0; }

.tbe-bad { border-color: var(--status-danger) !important; box-shadow: 0 0 0 3px var(--status-danger-bg); }