/* json-format: line numbers beside the editor and the result, the result's colours, its tree, and the error's place (Jack's
   register T36-04, queue row 115). Family styles in ../text-tools.css; colours from the theme's tokens, so dark mode follows. */
.json-lines { display: flex; align-items: stretch; min-width: 0; }
.json-lines > textarea, .json-lines > .json-view { flex: 1 1 auto; min-width: 0; }
.json-gutter { flex: none; box-sizing: border-box; overflow: hidden; padding-right: 8px; text-align: right; color: var(--matrix-muted); font-family: var(--matrix-font-mono); font-size: var(--matrix-type-caption); font-variant-numeric: tabular-nums; user-select: none; }
.json-gutter-rows > div { white-space: nowrap; padding-left: 4px; }
.json-gutter .is-error { color: var(--matrix-danger); background: var(--matrix-danger-background); font-weight: 700; border-radius: 4px 0 0 4px; }

/* the result's text view: the box keeps its text, drawn transparent under a coloured copy of the lines in view */
.json-view { position: relative; }
.json-view > textarea { display: block; }
.json-paint { position: absolute; box-sizing: border-box; margin: 0; overflow: hidden; pointer-events: none; white-space: pre; color: var(--matrix-text); background: transparent; border: 0; }
.json-paint code { display: block; font: inherit; }
.text-output.is-painted { color: transparent; caret-color: var(--matrix-text); }
.json-key { color: var(--matrix-selected-text); }
.json-str { color: var(--matrix-success); }
.json-num { color: var(--matrix-warning); }
.json-lit { color: var(--matrix-brand); }
.json-punct, .json-index { color: var(--matrix-muted); }
@media (forced-colors: active) {
  .json-paint { display: none; }
  .text-output.is-painted { color: CanvasText; }
}

/* the text view while the tree shows: kept laid out where the browser can (content-visibility), else out of the page */
.json-text-view.is-away { display: none; }
@supports (content-visibility: hidden) { .json-text-view.is-away { display: block; content-visibility: hidden; } }

.json-views { margin: var(--matrix-space-12) 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--matrix-space-8) var(--matrix-space-24); }
.json-views legend { float: left; width: 100%; padding: 0; margin-bottom: var(--matrix-space-4, 4px); } /* the radios in one row under it */

/* the tree */
.json-tree-actions { display: flex; flex-wrap: wrap; gap: var(--matrix-space-8); margin-bottom: var(--matrix-space-8); }
.json-tree-body { max-height: 32rem; overflow: auto; box-sizing: border-box; padding: var(--matrix-space-8) var(--matrix-space-12); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); color: var(--matrix-text); font-family: var(--matrix-font-mono); font-size: var(--matrix-type-code); line-height: var(--matrix-leading-code); }
.json-node > summary { cursor: pointer; overflow-wrap: anywhere; }
.json-kids { margin-left: 0.35rem; padding-left: 1rem; border-left: 1px solid var(--matrix-border); }
.json-leaf { padding-left: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
/* a deep level keeps room for its text: the box scrolls across instead of squeezing it to a letter a line */
.json-kids > * { min-width: 14rem; }
.json-count, .json-cut { color: var(--matrix-muted); font-family: var(--matrix-font); }
.json-more { margin: var(--matrix-space-8) 0; }

/* the error's place, under its message */
.json-place { margin-top: var(--matrix-space-8); }
.json-place-label { margin: 0 0 var(--matrix-space-4, 4px); font-size: var(--matrix-type-caption); color: var(--matrix-text); }
.json-place-lines { margin: 0; padding: var(--matrix-space-8) var(--matrix-space-12); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); color: var(--matrix-text); font-family: var(--matrix-font-mono); font-size: var(--matrix-type-code); line-height: var(--matrix-leading-code); white-space: pre-wrap; overflow-wrap: anywhere; }
.json-place-no { display: inline-block; min-width: 3ch; margin-right: 1ch; text-align: right; color: var(--matrix-muted); user-select: none; }
.json-place-row.is-error .json-place-no { color: var(--matrix-danger); font-weight: 700; }
.json-place mark { padding: 0 1px; border-radius: 3px; background: var(--matrix-danger-background); color: var(--matrix-danger); outline: 1px solid var(--matrix-danger); }
.json-place .json-place-sign { font-family: var(--matrix-font); font-size: var(--matrix-type-caption); padding: 0 4px; }