/* =========================================================
   JSON-ИНСТРУМЕНТЫ: /tools/json-formatter и /tools/json-validator
   Палитра и переменные — из style.css.

   Композиция (референс — Reg.ru, разделение поверхностями):
   белая карточка → серое рабочее поле → белая панель редактора.
   Кнопки — три вида: primary (зелёная, одна на экран) ·
   line (белая с обводкой) · quiet (прозрачная).
   Высоты: панель инструментов 40 px, кнопки в шапке панели 32 px
   (на телефоне — 40 px).
   ========================================================= */

[hidden] { display: none !important; }

.jt-tool {
  --jt-work: #F2F4F6;
  --jt-line: #E3E7EB;
  --jt-line-strong: #D3D9DF;
  --jt-fill: #F2F4F6;
  --jt-soft: #F7F8FA;
  --jt-pane-r: 14px;
  --jt-head-h: 48px;
  --jt-ok: #0E7A45;
  --jt-ok-bg: #E3F7EC;
  --jt-err: #B42318;
  --jt-err-bg: #FDECEC;
  --jt-warn: #8A5300;
  --jt-warn-bg: #FFF3DC;
  --jt-mono: var(--font-mono);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 8px;
  padding: 24px;
  background: var(--color-surface);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(16, 20, 24, 0.04);
  container: jttool / inline-size;
}

/* ---------- Кнопки ---------- */
.jt-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-text-strong);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}
.jt-btn i { display: inline-flex; font-size: 16px; line-height: 1; }
.jt-btn:disabled { cursor: not-allowed; opacity: 0.45; }

.jt-btn--primary { background: var(--color-accent); color: #06231A; }
.jt-btn--primary:hover:not(:disabled) { background: var(--color-accent-dark); color: #fff; }
.jt-btn--primary:disabled { background: var(--jt-fill); color: var(--color-text-strong); opacity: 0.55; }

.jt-btn--line { background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--jt-line-strong); }
.jt-btn--line:hover:not(:disabled) { box-shadow: inset 0 0 0 1px #B9C1C9; background: #FBFCFD; }

.jt-btn--quiet { font-weight: 500; color: var(--color-text); }
.jt-btn--quiet:hover:not(:disabled), .jt-btn--quiet[aria-expanded="true"] { background: var(--jt-fill); color: var(--color-text-strong); }
.jt-btn--quiet[aria-pressed="true"] { background: var(--jt-fill); color: var(--color-text-strong); }

.jt-btn--sm { height: 32px; padding: 0 10px; gap: 6px; border-radius: 9px; font-size: 13px; }
.jt-btn--sm i { font-size: 14px; }
.jt-btn--icon { width: 40px; padding: 0; }
.jt-btn--sm.jt-btn--icon { width: 32px; }

.jt-btn.is-done { background: var(--jt-ok-bg); color: var(--jt-ok); box-shadow: none; }
.jt-btn--primary.is-done { background: var(--color-accent-dark); color: #fff; }

.jt-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: #0E8A4F;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(14, 138, 79, 0.35);
  text-underline-offset: 3px;
}
.jt-link:hover { text-decoration-color: currentColor; }

.jt-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
label.jt-btn:has(.jt-file-input:focus-visible) { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; }
.jt-btn:focus-visible, .jt-seg-btn:focus-visible, .jt-link:focus-visible, .jt-menu-item:focus-visible,
.jt-chip-warn:focus-visible, .jt-tn-more:focus-visible, .jt-err-row:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; }

/* ---------- Поля выбора ---------- */
.jt-select {
  height: 40px;
  min-width: 0;
  padding-block: 0;
  background-color: var(--color-surface);
  border: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--jt-line-strong);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-strong);
  text-overflow: ellipsis;
  cursor: pointer;
  outline: none;
  transition: box-shadow var(--transition-fast);
}
.jt-select:hover { box-shadow: inset 0 0 0 1px #B9C1C9; }
.jt-select:focus-visible { box-shadow: inset 0 0 0 2px var(--color-accent-dark); }
.jt-select--sm { --select-pad: 10px; height: 32px; padding-block: 0; border-radius: 9px; font-size: 13px; font-weight: 500; }

/* ---------- Сегменты (вид документа, режим проверки) ---------- */
.jt-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--jt-fill); border-radius: 12px; }
.jt-seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-text);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}
.jt-seg-btn i { display: inline-flex; font-size: 15px; }
.jt-seg-btn:hover { color: var(--color-text-strong); }
.jt-seg-btn.is-active { background: var(--color-surface); font-weight: 600; color: var(--color-text-strong); box-shadow: 0 1px 2px rgba(16, 20, 24, 0.08), 0 0 0 0.5px rgba(16, 20, 24, 0.06); }
.jt-head .jt-seg { padding: 2px; border-radius: 10px; }
.jt-head .jt-seg-btn { height: 30px; padding: 0 12px; border-radius: 8px; font-size: 13.5px; }
.jt-head .jt-seg-btn i { font-size: 14px; }

/* ---------- Панель инструментов ---------- */
.jt-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.jt-bar-main, .jt-bar-side, .jt-acts { display: flex; align-items: center; gap: 8px; min-width: 0; }
.jt-bar-main .jt-select { min-width: 196px; }

/* ---------- Всплывающие меню ---------- */
.jt-pop { position: relative; display: inline-flex; }
.jt-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 248px;
  padding: 6px;
  background: var(--color-surface);
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(16, 20, 24, 0.07), 0 12px 32px -12px rgba(16, 20, 24, 0.28);
  animation: jt-pop 140ms ease-out;
}
@keyframes jt-pop { from { opacity: 0; transform: translateY(-4px); } }
.jt-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-strong);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.jt-menu-item i { display: inline-flex; width: 18px; justify-content: center; font-size: 15px; color: #6B7780; }
.jt-menu-item:hover:not(:disabled) { background: var(--jt-fill); }
.jt-menu-item:disabled { opacity: 0.4; cursor: not-allowed; }
.jt-menu-item--danger, .jt-menu-item--danger i { color: #C23B3B; }
.jt-menu-item--compact { display: none; }
.jt-menu-sep { height: 1px; margin: 6px 4px; background: var(--jt-line); }

/* ---------- Рабочее поле и панель редактора ---------- */
.jt-work { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px; background: var(--jt-work); border-radius: 20px; }
.jt-pane { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--color-surface); border-radius: var(--jt-pane-r); }
.jt-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: var(--jt-head-h);
  padding: 0 8px 0 8px;
  border-radius: var(--jt-pane-r) var(--jt-pane-r) 0 0;
  box-shadow: inset 0 -1px 0 #EDF0F3;
  container: jthead / inline-size;
}
.jt-head--title { padding-left: 16px; }
.jt-head-title { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 14.5px; font-weight: 600; line-height: 20px; color: var(--color-text-strong); white-space: nowrap; }
.jt-head-meta { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 20px; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jt-head-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: auto; }

.jt-body {
  position: relative;
  isolation: isolate;   /* слои Monaco не перекрывают обводку панели */
  height: clamp(420px, 64vh, 660px);
  border-radius: 0 0 var(--jt-pane-r) var(--jt-pane-r);
  overflow: hidden;
}
.jt-editor { position: absolute; inset: 0; }

/* Обводка панели: при наведении на пустое поле — тонкая, при вводе — зелёная */
.jt-ring {
  position: absolute;
  z-index: 6;
  border-radius: var(--jt-pane-r);
  pointer-events: none;
  transition: box-shadow var(--transition-fast);
}
.jt-ring.is-hover { box-shadow: inset 0 0 0 1px #C9D0D7; }
.jt-ring.is-focus { box-shadow: inset 0 0 0 2px var(--color-accent-dark); }

/* Заглушки: загрузка, ошибка загрузки, перетаскивание */
.jt-loading, .jt-fail {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: var(--color-surface);
  font-size: 14px;
  color: var(--color-muted);
  text-align: center;
}
.jt-loading i { font-size: 20px; animation: jt-spin 0.9s linear infinite; }
@keyframes jt-spin { to { transform: rotate(360deg); } }
.jt-fail strong { font-size: 16px; color: var(--color-text-strong); }
.jt-fail span { max-width: 420px; line-height: 1.55; }
.jt-drop { position: absolute; inset: 0; z-index: 7; display: none; padding: 10px; pointer-events: none; }
.jt-body.is-drag .jt-drop { display: flex; }
.jt-drop span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 2px dashed var(--color-accent-dark); border-radius: 12px; background: rgba(255, 255, 255, 0.97); font-size: 14px; font-weight: 600; color: var(--color-text-strong); }
.jt-drop i { font-size: 24px; }

/* ---------- Вид «Дерево» и «Таблица» ---------- */
.jt-view { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--color-surface); }
.jt-view-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 8px 8px 16px;
  box-shadow: inset 0 -1px 0 #EDF0F3;
  container: jtviewbar / inline-size;
}
.jt-path { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jt-path-label { flex-shrink: 0; font-size: 13px; color: var(--color-muted); }
.jt-path code { min-width: 0; padding: 4px 8px; border-radius: 7px; background: var(--jt-soft); font-family: var(--jt-mono); font-size: 12.5px; line-height: 18px; color: var(--color-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jt-path code.is-placeholder { background: none; padding-left: 0; font-family: var(--font-body); font-size: 13px; color: #93A0A8; }
.jt-path .jt-select { max-width: 320px; }
.jt-view-count { font-size: 13px; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jt-view-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.jt-view-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }

.jt-empty-view {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background: var(--color-surface);
  text-align: center;
}
.jt-empty-view > i { display: inline-flex; margin-bottom: 4px; font-size: 26px; color: #A3AEB4; }
.jt-empty-view strong { font-size: 16px; color: var(--color-text-strong); }
.jt-empty-view span { max-width: 440px; font-size: 14px; line-height: 1.55; color: var(--color-muted); overflow-wrap: anywhere; }
.jt-empty-view .jt-btn { margin-top: 8px; }

/* Дерево */
#jfTreeScroll, .jt-tree { padding: 8px 0 16px; font-family: var(--jt-mono); font-size: 13px; line-height: 20px; }
.jt-tn-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding-right: 16px;
  white-space: nowrap;
  cursor: default;
  outline: none;
}
.jt-tn-row:hover { background: var(--jt-soft); }
.jt-tn-row.is-selected { background: #EAF0F6; }
.jt-tn-row.is-selected:focus-visible { box-shadow: inset 2px 0 0 var(--color-accent-dark); }
.jt-tn-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 5px; color: #6B7780; cursor: pointer; }
.jt-tn-toggle:empty { cursor: default; }
.jt-tn-toggle:not(:empty):hover { background: #E3E7EB; color: var(--color-text-strong); }
.jt-tn-toggle i { display: inline-flex; font-size: 11px; transition: transform var(--transition-fast); }
.jt-tn.is-open > .jt-tn-row .jt-tn-toggle i { transform: rotate(90deg); }
.jt-tn-key { color: #1F4E8C; font-weight: 500; }
.jt-tn-index { color: #6B7780; }
.jt-tn-colon { margin: 0 4px 0 -4px; color: #93A0A8; }
.jt-tn-brace { color: #6B7780; }
.jt-tn-count { margin-left: 6px; font-family: var(--font-body); font-size: 12.5px; color: #93A0A8; }
.jt-tn-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.jt-v-string { color: #0E7A45; }
.jt-v-number { color: #B35C00; }
.jt-v-true, .jt-v-false, .jt-v-boolean { color: #7A3DB8; }
.jt-v-null { color: #7A3DB8; font-style: italic; }
.jt-tn-more { display: inline-flex; align-items: center; height: 28px; margin: 2px 0; padding: 0 10px; border: 0; border-radius: 8px; background: var(--jt-fill); font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--color-text-strong); cursor: pointer; }
.jt-tn-more:hover { background: #E3E7EB; }

/* Таблица */
.jt-table { min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.jt-table th, .jt-table td { max-width: 320px; padding: 8px 14px; border-bottom: 1px solid #EDF0F3; text-align: left; vertical-align: top; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jt-table th + th, .jt-table td + td { border-left: 1px solid #F2F4F6; }
.jt-table thead th { position: sticky; top: 0; z-index: 1; background: var(--jt-soft); font-weight: 600; color: var(--color-text-strong); box-shadow: inset 0 -1px 0 #E3E7EB; border-bottom: 0; }
.jt-table tbody tr:hover td { background: var(--jt-soft); }
.jt-table .jt-td-num { width: 1%; padding-right: 12px; color: #93A0A8; text-align: right; }
.jt-table thead .jt-td-num { color: #93A0A8; font-weight: 500; }
.jt-td-number { color: #B35C00; text-align: right !important; font-family: var(--jt-mono); font-size: 12.5px; }
.jt-td-true, .jt-td-false, .jt-td-boolean { color: #7A3DB8; font-family: var(--jt-mono); font-size: 12.5px; }
.jt-td-null { color: #93A0A8; font-style: italic; font-family: var(--jt-mono); font-size: 12.5px; }
.jt-td-object, .jt-td-array { color: #6B7780; font-family: var(--jt-mono); font-size: 12px; }
.jt-td-none { background: #FAFBFC; }

/* ---------- Список исправлений ---------- */
.jt-fixes { padding: 14px 16px 16px; background: var(--jt-soft); border-radius: 16px; box-shadow: inset 0 0 0 1px #EDF0F3; animation: jt-pop 160ms ease-out; }
.jt-fixes-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.jt-fixes-head strong { font-size: 14.5px; color: var(--color-text-strong); }
.jt-fixes-actions { display: flex; gap: 2px; }
.jt-fixes-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 24px; margin: 0; padding: 0; list-style: none; }
.jt-fixes-list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.5; color: var(--color-text); }
.jt-fixes-list li::before { content: "\eb7b"; position: absolute; left: 0; top: 1px; font-family: "remixicon"; font-size: 15px; line-height: 1.4; color: var(--jt-ok); }

/* ---------- Низ: итог проверки и результат ---------- */
.jt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; min-height: 40px; }
.jt-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--color-text); }
.jt-status-hint { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; color: var(--color-muted); }
.jt-status-text { min-width: 0; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.jt-status-text b { font-weight: 600; color: var(--color-text-strong); }
.jt-status-hint-inline { display: block; margin-top: 2px; color: var(--color-muted); }
.jt-status-actions { display: inline-flex; gap: 6px; }
.jt-badge { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; height: 30px; padding: 0 12px 0 10px; border-radius: 9px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.jt-badge i { display: inline-flex; font-size: 15px; }
.jt-badge--ok { background: var(--jt-ok-bg); color: var(--jt-ok); }
.jt-badge--err { background: var(--jt-err-bg); color: var(--jt-err); }
.jt-badge--warn { background: var(--jt-warn-bg); color: var(--jt-warn); }
.jt-chip-warn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: var(--jt-warn-bg); font: inherit; font-size: 13px; font-weight: 600; color: var(--jt-warn); cursor: pointer; }
.jt-chip-warn:hover { background: #FCE8C2; }
.jt-foot-actions { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; align-self: flex-start; }
.jt-status:has(.jt-badge--err) { align-items: flex-start; }
.jt-status:has(.jt-badge--err) .jt-status-text { flex: 1 1 320px; padding-top: 5px; }

.jt-note { display: flex; align-items: center; gap: 8px; margin: -4px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-muted); }
.jt-note i { display: inline-flex; color: var(--color-accent-dark); }

/* ---------- Во весь экран ---------- */
.jt-tool.is-full { position: fixed; inset: 0; z-index: 2000; margin: 0; border-radius: 0; padding: 16px 20px; box-shadow: none; overflow: auto; }
.jt-tool.is-full .jt-work { flex: 1 1 auto; min-height: 0; }
.jt-tool.is-full .jt-pane { flex: 1 1 auto; min-height: 0; }
.jt-tool.is-full .jt-body { height: auto; flex: 1 1 auto; min-height: 240px; }
.jt-tool.is-full .jt-note { display: none; }
html.jt-lock, html.jt-lock body { overflow: hidden; }

/* ---------- Уведомление ---------- */
.jt-msg {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 2100;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 14px;
  background: #191B1E;
  box-shadow: 0 10px 30px -10px rgba(16, 20, 24, 0.45);
  font-size: 14px;
  line-height: 1.45;
  color: #fff;
  transform: translateX(-50%);
  animation: jt-toast 180ms ease-out;
}
.jt-msg > i { display: inline-flex; font-size: 16px; color: var(--color-accent); flex-shrink: 0; }
.jt-msg--error > i { color: #FF8F8F; }
.jt-msg-action { flex-shrink: 0; margin-left: 6px; padding: 6px 10px; border: 0; border-radius: 8px; background: #2B2F35; font: inherit; font-weight: 600; color: var(--color-accent); cursor: pointer; }
.jt-msg-action:hover { background: #353A41; }
@keyframes jt-toast { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (min-width: 1024px) { .jt-msg { left: calc(50% + var(--sidebar-width, 332px) / 2); } .jt-tool.is-full .jt-msg { left: 50%; } }

/* ---------- Monaco под стиль сайта ---------- */
.jt-editor .monaco-editor { --vscode-focusBorder: transparent; }
.jt-editor .monaco-editor, .jt-editor .overflow-guard { border-radius: 0 0 var(--jt-pane-r) var(--jt-pane-r); }
.jt-editor .editorPlaceholder { color: #93A0A8 !important; font-family: var(--font-body) !important; font-size: 14px !important; font-style: normal !important; }
.monaco-hover .hover-contents, .monaco-hover .markdown-hover { font-family: var(--font-body); font-size: 13px; line-height: 1.5; }

/* ---------- Адаптив ---------- */
@container jthead (max-width: 560px) {
  .jt-head-actions .jt-label { display: none; }
  .jt-head-actions .jt-btn--sm { width: 32px; padding: 0; }
}
@container jthead (max-width: 440px) {
  .jt-head-meta { display: none; }
  .jt-head .jt-seg-btn i { display: none; }
}
@container jtviewbar (max-width: 620px) {
  .jt-view-actions .jt-label { display: none; }
  .jt-view-actions .jt-btn--sm { width: 32px; padding: 0; }
}
@container jtviewbar (max-width: 400px) {
  .jt-path-label, .jt-view-count { display: none; }
}
/* узкое дерево: путь — на всю строку, кнопки под ним */
@container jttool (max-width: 520px) {
  #jfTree .jt-view-bar { flex-wrap: wrap; row-gap: 4px; }
  #jfTree .jt-path { flex: 1 1 100%; }
  #jfTree .jt-view-actions { margin-left: auto; }
}
@container jttool (max-width: 900px) {
  .jt-bar-side .jt-label { display: none; }
  .jt-bar-side .jt-btn { width: 40px; padding: 0; }
  .jt-bar-main .jt-select { min-width: 0; width: 176px; }
}
@container jttool (max-width: 720px) {
  /* две строки: три действия поровну; ниже отступ, отмена, во весь экран */
  .jt-bar { display: grid; grid-template-columns: minmax(0, 1fr) 40px 40px; grid-template-areas: "acts acts acts" "sel undo full"; gap: 8px; }
  .jt-bar-main, .jt-bar-side { display: contents; }
  .jt-acts { grid-area: acts; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .jt-acts .jt-btn { min-width: 0; padding: 0 8px; }
  .jt-bar-main .jt-select { grid-area: sel; width: 100%; }
  .jt-bar-side > :first-child { grid-area: undo; }
  .jt-bar-side > :last-child { grid-area: full; }
  .jt-foot { flex-direction: column; align-items: stretch; }
  .jt-foot-actions { margin-left: 0; align-self: stretch; }
  .jt-foot-actions > .jt-btn { flex: 1 1 0; }
  .jt-menu-item--compact { display: flex; }
  .jt-menu-item { height: 44px; }
  .jt-head { height: 56px; }
  .jt-head .jt-btn--sm { width: 40px; height: 40px; }
  .jt-head .jt-seg-btn { height: 36px; }
  .jt-head-actions #jfPaste { display: none; }
  .jt-view-bar .jt-btn--sm { width: 40px; height: 40px; }
  .jt-body { height: clamp(380px, 62vh, 560px); }
  .jt-status:has(.jt-badge--err) .jt-status-text { flex-basis: 100%; padding-top: 0; }
}
/* узкий телефон: у трёх действий только подписи, «Форматировать» шире остальных */
@container jttool (max-width: 440px) {
  .jt-acts { grid-template-columns: 1.35fr 1fr 1fr; }
  .jt-acts .jt-btn i { display: none; }
}
/* Экран до ~411 px: вкладки «Текст / Дерево / Таблица» (214 px) и две кнопки
   справа (82 px) в одну строку требуют шапку шире 324 px, а у телефона она
   240–330 px. Кнопка «⋯» вылезала за белую панель (360–390 px), а на 320–340 px
   у всей страницы появлялась горизонтальная прокрутка. Вкладки занимают первую
   строку на всю ширину, кнопки — вторую, справа. Только шапка с вкладками:
   у валидатора вкладок нет, там всё и так помещается */
@container jttool (max-width: 339px) {
  .jt-head:has(> .jt-seg) { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; height: auto; padding: 8px; }
  .jt-head > .jt-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jt-head > .jt-seg .jt-seg-btn { padding: 0 4px; }
  .jt-head > .jt-head-actions { justify-self: end; margin-left: 0; }
}
@media (max-width: 480px) {
  .jt-tool { padding: 16px; border-radius: 20px; }
  .jt-work { padding: 4px; border-radius: 18px; }
}

/* =========================================================
   SEO-БЛОКИ — белые панели со строками
   ========================================================= */
.jt-seo { container-type: inline-size; container-name: jtseo; }
.jt-seo-panel { padding: 8px 32px; background: var(--color-surface); border: 1px solid rgba(43, 47, 51, 0.07); border-radius: var(--radius-lg); }
.jt-srow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; align-items: start; padding: 24px 0; border-top: 1px solid rgba(43, 47, 51, 0.08); }
.jt-srow:first-child { border-top: none; }
.jt-srow-mark { font-family: var(--font-display); font-weight: 700; font-size: 14.5px; line-height: 1.5; letter-spacing: -0.01em; color: var(--color-accent-dark); }
.jt-srow h3 { font-size: 17px; line-height: 1.35; margin: 0 0 8px; color: var(--color-text-strong); }
.jt-srow p { font-size: 14.5px; line-height: 1.75; color: var(--color-muted); margin: 0 0 10px; }
.jt-srow p:last-child { margin-bottom: 0; }
.jt-srow strong { color: var(--color-text-strong); font-weight: 600; }

.jt-seo-panel pre { margin: 10px 0 0; padding: 12px 14px; border-radius: 10px; background: #F7F8FA; border: 1px solid rgba(43, 47, 51, 0.08); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; color: var(--color-text-strong); white-space: pre; overflow-x: auto; }
.jt-srow p + pre { margin-top: 12px; }
@container jtseo (max-width: 700px) {
  .jt-seo-panel { padding: 4px 20px; }
  .jt-srow { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px 0; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 952px) { .jt-srow { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px 0; } }
}

/* =========================================================
   JSON-ВАЛИДАТОР: две панели (JSON и схема), отчёт об ошибках
   ========================================================= */
.jt-work--split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.is-schema .jt-work--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Обводка панели: зелёная, пока в её редакторе курсор; тонкая — при наведении на пустую */
.jt-work--split .jt-pane::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: var(--jt-pane-r);
  pointer-events: none;
  transition: box-shadow var(--transition-fast);
}
.jt-work--split .jt-pane.is-empty:hover::after { box-shadow: inset 0 0 0 1px #C9D0D7; }
.jt-work--split .jt-pane:has(.monaco-editor.focused)::after { box-shadow: inset 0 0 0 2px var(--color-accent-dark); }
.jt-bar-main .jt-seg--mode .jt-seg-btn { height: 34px; }
.jt-badge--wait { background: var(--jt-fill); color: var(--color-text); }
.jt-badge--wait i { animation: jt-spin 0.9s linear infinite; }

.jt-report { margin-top: -4px; padding: 6px; background: var(--jt-soft); border-radius: 16px; box-shadow: inset 0 0 0 1px #EDF0F3; }
.jt-errs { display: flex; flex-direction: column; gap: 2px; max-height: 336px; margin: 0; padding: 0; overflow: auto; list-style: none; overscroll-behavior: contain; }
.jt-err-row {
  display: grid;
  grid-template-columns: 96px minmax(0, max-content) minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 14px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
}
.jt-err-row:hover { background: var(--color-surface); box-shadow: 0 1px 2px rgba(16, 20, 24, 0.06); }
.jt-err-line { font-size: 13px; color: var(--color-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.jt-err-path { justify-self: start; max-width: 280px; padding: 1px 6px; border-radius: 6px; background: #EEF1F4; font-family: var(--jt-mono); font-size: 12.5px; color: var(--color-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jt-err-msg { min-width: 0; color: var(--color-text-strong); }
.jt-errs-more { margin: 6px 12px 4px; font-size: 13px; color: var(--color-muted); }
.jt-wide { display: inline; }

@container jttool (max-width: 900px) {
  .is-schema .jt-work--split { grid-template-columns: minmax(0, 1fr); }
  .is-schema .jt-work--split .jt-body { height: clamp(260px, 42vh, 420px); }
  .jt-wide { display: none; }
}
@container jttool (max-width: 720px) {
  /* валидатор: режим на всю ширину, ниже версия схемы, отмена и экран */
  .jt-bar:has(.jt-seg--mode) { grid-template-areas: "acts acts acts" "sel undo full"; }
  .jt-seg--mode { grid-area: acts; display: flex; }
  .jt-seg--mode .jt-seg-btn { flex: 1 1 0; }
  .jt-bar:has(.jt-seg--mode) .jt-select { grid-area: sel; width: 100%; }
  .jt-bar:has(.jt-seg--mode .jt-seg-btn:first-child.is-active) { grid-template-areas: "acts undo full"; }
  .jt-err-row { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
  .jt-err-msg { grid-column: 1 / -1; }
  .jt-head-actions #jvPaste { display: none; }
}

/* Таблица в SEO-блоке */
.jt-seo-panel--table { padding: 8px 20px; }
.jt-seo-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.6; }
.jt-seo-table th { padding: 14px 12px 10px; font-size: 13px; font-weight: 600; text-align: left; color: var(--color-muted); }
.jt-seo-table td { padding: 14px 12px; border-top: 1px solid rgba(43, 47, 51, 0.08); vertical-align: top; color: var(--color-muted); }
.jt-seo-table td:first-child { width: 38%; font-weight: 600; color: var(--color-text-strong); }
@container jtseo (max-width: 700px) {
  .jt-seo-panel--table { padding: 4px 16px; }
  .jt-seo-table thead { display: none; }
  .jt-seo-table tr { display: block; padding: 14px 0; border-top: 1px solid rgba(43, 47, 51, 0.08); }
  .jt-seo-table tr:first-child { border-top: 0; }
  .jt-seo-table td { display: block; width: auto !important; padding: 0; border: 0; }
  .jt-seo-table td + td { margin-top: 4px; }
}

/* Пока редактор не загрузился (или не загрузился совсем) — действия недоступны */
.jt-tool:not(.is-ready) :is(.jt-bar, .jt-head-actions, .jt-head .jt-seg, .jt-foot-actions) { opacity: 0.45; pointer-events: none; }