/* Стили JSON-страниц: json-formatter, json-validator, json-viewer, json5-formatter, json5-to-json.
   Подключается в {% block head %} шаблонов этих инструментов. Общие файлы сайта не меняются. */
:root {
  --j-str: #0B7A3B; --j-num: #1D4ED8; --j-bool: #7C3AED; --j-null: #5D687B; --j-key: #9A3412;
  --j-comment: #5D687B; --j-punct: #5D687B; --j-sel: #E3EBFF; --j-hit: #FFE58A; --ok: #0B7A3B;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --j-str: #7EE2A8; --j-num: #9DB7FF; --j-bool: #C9AEFF; --j-null: #A3ADBF; --j-key: #F5B98A; --j-comment: #A3ADBF; --j-punct: #A3ADBF; --j-sel: #1F2E5C; --j-hit: #6B5300; --ok: #7EE2A8; }
}
  :root[data-theme="dark"] { --j-str: #7EE2A8; --j-num: #9DB7FF; --j-bool: #C9AEFF; --j-null: #A3ADBF; --j-key: #F5B98A; --j-comment: #A3ADBF; --j-punct: #A3ADBF; --j-sel: #1F2E5C; --j-hit: #6B5300; --ok: #7EE2A8; }

/* ---------- редактор ---------- */
.tool .cm-wrap { flex: 1; min-height: 320px; height: 440px; border: 1px solid var(--border); border-radius: var(--r-ctl); overflow: hidden; background: var(--code-bg); display: flex; }
.tool .cm-wrap.readonly { background: var(--canvas); }
.tool .cm-wrap:focus-within { border-color: var(--blue); box-shadow: var(--focus); }
.tool .cm-wrap .cm-editor { flex: 1; min-width: 0; height: 100%; font: 400 14px/1.6 var(--mono); }
.tool .cm-wrap .cm-editor.cm-focused { outline: none; }
.tool .cm-wrap .cm-scroller { font-family: var(--mono); line-height: 1.6; }
.tool .cm-wrap .cm-content { caret-color: var(--ink); color: var(--ink); padding: 8px 0; }
.tool .cm-wrap .cm-gutters { background: transparent; border-right: 1px solid var(--border); color: var(--muted); }
.tool .cm-wrap .cm-activeLine { background: rgba(36, 81, 232, .05); }
.tool .cm-wrap .cm-activeLineGutter { background: rgba(36, 81, 232, .08); }
.tool .cm-wrap .cm-selectionBackground, .tool .cm-wrap .cm-focused .cm-selectionBackground { background: var(--j-sel) !important; }
.tool .cm-wrap .cm-cursor { border-left-color: var(--ink); }
.tool .cm-wrap .cm-placeholder { color: var(--muted); }
.tool .cm-wrap .cm-matchingBracket { background: rgba(24, 203, 185, .25); outline: none; }
.tool .cm-wrap .cm-fold-mark { cursor: pointer; padding: 0 3px; color: var(--muted); }
.tool .cm-wrap .cm-foldPlaceholder { background: var(--blue-tint); border: 1px solid var(--border); color: var(--blue); padding: 0 4px; border-radius: 4px; }
.cm-diag-gutter { width: 16px; }
.cm-diag-marker { display: inline-block; width: 14px; text-align: center; font-size: 11px; font-weight: 700; cursor: help; color: var(--danger); }
.cm-diag-marker.warn { color: var(--warn); }
.cm-diag-line.error { background: var(--danger-tint) !important; }
.cm-diag-line.warn { background: var(--warn-tint) !important; }
.cm-diag-mark.error { text-decoration: underline wavy var(--danger); text-decoration-skip-ink: none; text-underline-offset: 3px; }
.cm-diag-mark.warn { text-decoration: underline wavy var(--warn); text-underline-offset: 3px; }
.cm-diag-eol { display: inline-block; width: 8px; height: 1.2em; vertical-align: text-bottom; border-bottom: 2px solid var(--danger); }
.tool textarea.io { height: 440px; }

/* ---------- общие блоки ---------- */
.json-err { margin: 0 0 10px; padding: 12px 14px; border-radius: var(--r-ctl); background: var(--danger-tint); color: var(--danger); font-size: 14px; }
.json-err-title { font-weight: 700; margin-bottom: 4px; }
.json-err-title::before { content: "✕ "; }
.json-err-msg { all: unset; cursor: pointer; display: block; color: var(--danger); font-weight: 500; overflow-wrap: anywhere; }
.json-err-msg:hover { text-decoration: underline; }
.json-err-msg:focus-visible { box-shadow: var(--focus); border-radius: 4px; }
.json-snip { margin: 8px 0 4px; padding: 8px 10px; background: var(--surface); color: var(--ink); border-radius: 8px; font: 13px/1.45 var(--mono); overflow-x: auto; white-space: pre; max-width: 100%; }
.json-hint { margin: 6px 0 0; color: var(--ink); overflow-wrap: anywhere; }
.json-hint a { font-weight: 600; }
.json-more { margin: 6px 0 0; color: var(--muted); }
.json-err-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.json-loaded { margin: 0 16px 12px; padding: 8px 12px; border-radius: var(--r-ctl); background: var(--blue-tint); font-size: 14px; }
.json-notes { margin-top: 10px; font-size: 14px; }
.json-notes summary { cursor: pointer; color: var(--muted); }
.json-notes ul { margin: 6px 0 0; padding-left: 20px; }
.json-notes li { margin: 2px 0; overflow-wrap: anywhere; }
.json-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.json-busy .pane-title::after { content: " · working…"; color: var(--muted); font-weight: 400; }
.json-drop { outline: 2px dashed var(--teal); outline-offset: -6px; position: relative; }
.json-drop::after { content: attr(data-drop-label); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ok-tint) 85%, transparent); color: var(--ink); font-weight: 600; font-size: 18px; border-radius: var(--r-card); pointer-events: none; }
.json-run[hidden] { display: none; }
.options .opt-hidden { display: none !important; }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; padding: 8px 12px; border-radius: var(--r-ctl); font-size: 14px; font-weight: 600; }
.status-line.ok { background: var(--ok-tint); color: var(--ok); }
.status-line.bad { background: var(--danger-tint); color: var(--danger); }
.status-line a { font-weight: 500; }
.json-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.json-list li { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.json-list li.warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); background: var(--warn-tint); }
.json-list .where { all: unset; cursor: pointer; font-weight: 600; color: var(--danger); }
.json-list li.warn .where { color: var(--warn); }
.json-list .where:hover { text-decoration: underline; }
.json-list .where:focus-visible { box-shadow: var(--focus); border-radius: 4px; }
.json-list .msg { display: block; margin-top: 2px; font-size: 14px; overflow-wrap: anywhere; }
.json-list .json-snip { margin: 6px 0 0; font-size: 12px; }
.badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-badge); font-size: 12px; font-weight: 600; background: var(--ok-tint); color: var(--teal-dark); vertical-align: 1px; }
.json-fatal-note { margin: 8px 0 0; font-size: 14px; color: var(--muted); }

/* ---------- JSON Validator ---------- */
.jv-results { display: flex; flex-direction: column; gap: 10px; min-height: 320px; }
.jv-empty { color: var(--muted); font-size: 15px; padding: 24px 4px; }
.jv-banner { padding: 12px 14px; border-radius: var(--r-ctl); font-weight: 700; font-size: 16px; }
.jv-banner.ok { background: var(--ok-tint); color: var(--ok); }
.jv-banner.ok::before { content: "✓ "; }
.jv-banner.bad { background: var(--danger-tint); color: var(--danger); }
.jv-banner.bad::before { content: "✕ "; }
.jv-facts { font-size: 14px; color: var(--muted); margin-top: 4px; font-weight: 500; }
.jv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.jv-repaired { padding: 10px 14px; border-radius: var(--r-ctl); background: var(--blue-tint); font-size: 14px; }
.jv-repaired b { display: block; margin-bottom: 4px; }
.jv-repaired ul { margin: 4px 0 8px; padding-left: 18px; }
.jv-scroll { max-height: 520px; overflow: auto; padding-right: 2px; }
.jv-more { font-size: 14px; color: var(--muted); }
.jv-sticky { position: sticky; top: 0; z-index: 2; }

/* ---------- JSON Viewer ---------- */
.vw-pane { min-height: 480px; }
.vw-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.vw-bar .segmented { font-size: 14px; }
.vw-bar .segmented label { padding: 6px 12px; cursor: pointer; display: inline-flex; }
.vw-bar .segmented label:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.vw-search { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 200px; }
.vw-search input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; font: 400 14px var(--font); color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.vw-search input:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }
.vw-count { font-size: 13px; color: var(--muted); white-space: nowrap; min-width: 64px; }
.vw-path { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 6px 8px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--canvas); }
.vw-crumbs { display: flex; flex-wrap: nowrap; gap: 2px; align-items: center; overflow-x: auto; flex: 1; min-width: 0; font: 13px var(--mono); white-space: nowrap; scrollbar-width: thin; }
.vw-crumbs button { all: unset; cursor: pointer; padding: 2px 4px; border-radius: 4px; color: var(--blue); }
.vw-crumbs button:hover { background: var(--blue-tint); }
.vw-crumbs button:focus-visible { box-shadow: var(--focus); }
.vw-crumbs span.sep { color: var(--muted); }
.vw-path-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.vw-path-actions .btn { height: 32px; padding: 0 10px; font-size: 13px; }
.vw-tree { position: relative; height: 480px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--code-bg); font: 13.5px/1 var(--mono); outline: none; }
.vw-tree:focus-visible { box-shadow: var(--focus); border-color: var(--blue); }
.vw-tree .vw-sizer { position: relative; width: 100%; }
.vw-row { position: absolute; left: 0; right: 0; height: 28px; display: flex; align-items: center; gap: 6px; padding-right: 8px; white-space: nowrap; cursor: default; color: var(--ink); }
.vw-row:hover { background: rgba(36, 81, 232, .05); }
.vw-row.sel { background: var(--j-sel); }
.vw-row.focus { box-shadow: inset 2px 0 0 var(--blue); }
.vw-tog { all: unset; width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; border-radius: 4px; font-size: 12px; }
.vw-tog:hover { background: var(--blue-tint); color: var(--blue); }
.vw-tog.none { visibility: hidden; }
.vw-k { color: var(--j-key); }
.vw-k.idx { color: var(--muted); }
.vw-c { color: var(--muted); }
.vw-v { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vw-v.string { color: var(--j-str); }
.vw-v.number { color: var(--j-num); }
.vw-v.boolean { color: var(--j-bool); }
.vw-v.null { color: var(--j-null); }
.vw-v a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.vw-more { all: unset; cursor: pointer; color: var(--blue); padding: 0 2px; }
.vw-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--border); margin-right: 4px; vertical-align: -1px; }
.vw-dup { color: var(--warn); cursor: help; }
.vw-row mark { background: var(--j-hit); color: inherit; border-radius: 2px; }
.vw-hover { margin-left: auto; display: none; gap: 2px; }
.vw-row:hover .vw-hover, .vw-row.sel .vw-hover { display: inline-flex; }
.vw-hover button { all: unset; cursor: pointer; font: 600 11px var(--font); color: var(--muted); padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); }
.vw-hover button:hover { color: var(--blue); border-color: var(--blue); }
.vw-group { color: var(--muted); }
.vw-msg { padding: 24px 12px; color: var(--muted); font: 15px/1.5 var(--font); white-space: normal; }
.vw-table-wrap { height: 480px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--code-bg); }
.vw-table { border-collapse: separate; border-spacing: 0; font: 13px/1.4 var(--mono); min-width: 100%; }
.vw-table th { position: sticky; top: 0; z-index: 1; background: var(--canvas); text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font: 600 13px var(--font); white-space: nowrap; cursor: pointer; user-select: none; }
.vw-table th[aria-sort="ascending"]::after { content: " ▲"; color: var(--blue); }
.vw-table th[aria-sort="descending"]::after { content: " ▼"; color: var(--blue); }
.vw-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.vw-table td.idx { color: var(--muted); }
.vw-table td.missing { background: var(--canvas); background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--border) 60%, transparent) 6px 7px); }
.vw-table td button { all: unset; cursor: pointer; color: var(--blue); text-decoration: underline; }
.vw-table-note { font-size: 13px; color: var(--muted); margin: 6px 0; }
.vw-table-foot { margin-top: 8px; font-size: 14px; }
.vw-code .cm-wrap { height: 480px; }
.vw-tabs { display: none; }
.tool-grid.vw-treeonly { grid-template-columns: minmax(0, 1fr); }
.tool-grid.vw-treeonly > .pane:first-child { display: none; }
.tool-grid.vw-treeonly > .pane + .pane { border-left: 0; }

/* ---------- JSON5 / JSON5 to JSON ---------- */
.j5-report { margin-top: 10px; font-size: 14px; }
.j5-report summary { cursor: pointer; font-weight: 600; }
.j5-report ul { margin: 6px 0 0; padding-left: 20px; }
.j5-report li.warn { color: var(--warn); }
.j5-report li a { font-weight: 500; }
.j5-report .rep-actions { margin-top: 8px; }
.j5-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-ctl); background: var(--blue-tint); font-size: 14px; display: flex; gap: 12px; align-items: flex-start; }
.j5-banner ul { margin: 4px 0 0; padding-left: 18px; }
.j5-banner button { margin-left: auto; }
.j5-mobile-only { display: none; }

.content table.json-ref { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0; }
.content table.json-ref th, .content table.json-ref td { border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
.content table.json-ref code { font-size: 13px; }
.content .table-scroll { overflow-x: auto; }

@media (max-width: 900px) {
  .tool .cm-wrap { height: 40vh; min-height: 220px; }
  .tool textarea.io { height: 40vh; }
  .jv-results { min-height: 0; }
}
@media (max-width: 768px) {
  .vw-tabs { display: flex; margin: 0 12px 0; padding-top: 12px; }
  .vw-tabs .segmented { width: 100%; }
  .vw-tabs .segmented label { flex: 1; justify-content: center; min-height: 44px; display: inline-flex; align-items: center; }
  .tool-grid.vw-mobile-input > .pane + .pane { display: none; }
  .tool-grid.vw-mobile-viewer > .pane:first-child { display: none; }
  .tool-grid.vw-mobile-viewer > .pane + .pane { border-top: 0; }
  .vw-row { height: 44px; }
  .vw-hover { display: none !important; }
  .vw-tree, .vw-table-wrap, .vw-code .cm-wrap { height: 60vh; }
  .vw-path { position: sticky; bottom: 0; z-index: 5; margin: 0; order: 10; box-shadow: 0 -2px 8px rgba(0,0,0,.08); }
  .vw-crumbs { flex-basis: 100%; }
  .vw-path-actions .btn { height: 40px; }
  .vw-search { min-width: 0; flex-basis: 100%; }
  .jv-validator .cm-wrap { height: 45vh; }
  .jv-actions .btn { flex: 1; }
  .j5-mobile-only { display: block; }
  .options.collapsible:not(.open) .opt-extra { display: none !important; }
  .json-err-links .btn { width: 100%; }
}

/* мобильный порядок: Input → Options → Run → Output (SITEWIDE_TOOL_UX §3) */
@media (max-width: 900px) {
  .tool:has(> .jt-order) { display: flex; flex-direction: column; }
  .tool > .jt-order { display: contents; }
  .tool > .jt-order > .pane-in { order: 1; }
  .tool:has(> .jt-order) > .options { order: 2; border-bottom: 1px solid var(--border); }
  .tool > .jt-order > .pane-out { order: 3; border-top: 0; }
  .tool:has(> .jt-order) > .notice { order: 4; }
  .tool:has(> .jt-order) > .json-loaded { order: 0; margin-top: 12px; }
  .tool:has(> .jt-order) > .j5-banner { order: 0; margin: 12px 12px 0; }
  .tool:has(> .jt-order) > .tool-foot { order: 9; }
}
.options .json-run { margin-left: auto; }
.tool .cm-wrap .cm-placeholder { white-space: normal; display: inline-block; vertical-align: top; max-width: min(100%, 520px); font-family: var(--font); }
.vw-form { display: block; }
.vw-pane .pane-head .segmented label { cursor: pointer; }
.vw-pane .pane-head .segmented label.disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 768px) { .vw-layout { display: none !important; } }
.vw-tabbar button { all: unset; flex: 1; text-align: center; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; border-left: 1px solid var(--border); }
.vw-tabbar button:first-child { border-left: 0; }
.vw-tabbar button[aria-selected="true"] { background: var(--blue-tint); color: var(--blue); font-weight: 600; }
.vw-tabbar button:focus-visible { box-shadow: inset var(--focus); }
.vw-c.colon { margin-left: -6px; }
.vw-crumbs { flex: 1 1 260px; }