/* JSON tree viewer. Needs /assets/css/modern-tool-cards.css (tokens + .cat-code accent). */
.jt, .jt *, .jt *::before, .jt *::after { box-sizing: border-box; }
.jt { display: grid; gap: 1.1rem; }
.jt [hidden] { display: none !important; }
.jt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.jt-note { margin: 0; font-size: .85rem; font-weight: 600; color: #dc2626; }

.jt-panel { min-width: 0; background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 20px; box-shadow: var(--tc-shadow); overflow: hidden; }
.jt-head { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .85rem 1.25rem; background: var(--tc-surface); border-bottom: 1px solid var(--tc-border); }
.jt-head > i { color: var(--accent); font-size: 1.1rem; }
.jt-head h3 { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tc-muted); }
.jt-head .jt-btn:first-of-type { margin-left: auto; }
.jt-body { display: grid; gap: 1rem; padding: 1rem 1.25rem; }

.jt-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 2.2rem; padding: 0 1rem; font: inherit; font-size: .82rem; font-weight: 600; color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 12px; cursor: pointer; }
.jt-btn:hover { border-color: var(--accent); color: var(--accent); }
.jt-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jt-btn--main { color: #fff; background: var(--accent); border-color: var(--accent); }
.jt-btn--main:hover { color: #fff; filter: brightness(1.08); }
.jt-actions { display: flex; flex-wrap: wrap; gap: .5rem; }


.jt-result { padding: .9rem 1.1rem; border-radius: 14px; border: 1px solid var(--tc-border); background: var(--tc-surface); }
.jt-result__head { display: flex; align-items: center; gap: .55rem; font-size: 1rem; }
.jt-result__head i { font-size: 1.3rem; }
.jt-result--idle { color: var(--tc-muted); }
.jt-result--ok { color: #166534; background: rgba(22, 163, 74, .12); border-color: rgba(22, 163, 74, .35); }
.jt-result--error { background: rgba(220, 38, 38, .07); border-color: rgba(220, 38, 38, .35); }
.jt-result--error .jt-result__head { color: #dc2626; }
.jt-detail { display: grid; gap: .6rem; margin-top: .6rem; justify-items: start; max-width: 100%; }
.jt-p { margin: 0; font-size: .9rem; color: var(--tc-text); }
.jt-where { font-weight: 700; }
.jt-list { margin: 0; padding-left: 1.2rem; font-size: .9rem; color: var(--tc-text); }
.jt-snippet { width: 100%; white-space: pre !important; margin: 0; padding: .7rem .9rem; overflow: auto; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 10px; }

.jt-foot { margin: 0; display: flex; gap: .5rem; font-size: .84rem; color: var(--tc-muted); }
.jt-foot i { color: var(--accent); margin-top: .15rem; }
@media (max-width: 600px) {
  .jt-body { padding: .9rem; }
  .jt-editor { height: 18rem; }
  .jt-head .jt-btn span { display: none; }
}
.jt-hint { color: var(--tc-muted); }


/* input box */
.jt-in { display: block; width: 100%; height: 13rem; min-height: 6rem; resize: vertical; padding: 12px; font: 13.5px/22px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; line-height: 22px !important; tab-size: 2; white-space: pre; overflow: auto; color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 12px; outline: 0; }
.jt-in:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.jt-in-wrap.is-bad .jt-in { border-color: #dc2626; }

/* tabs and toolbar */
.jt-tabs { display: flex; gap: .25rem; margin-left: .4rem; }
.jt-tab { height: 2rem; padding: 0 .9rem; font: inherit; font-size: .82rem; font-weight: 600; color: var(--tc-muted); background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; }
.jt-tab[aria-selected="true"] { color: var(--accent); background: var(--tc-bg); border-color: var(--tc-border); }
.jt-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.jt-find { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; padding: .7rem; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: 12px; }
.jt-field { height: 2.2rem; padding: 0 .75rem; font: inherit; font-size: .85rem; color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 10px; }
.jt-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
input.jt-field { flex: 1 1 12rem; min-width: 0; }
.jt-types { display: flex; flex-wrap: wrap; gap: .3rem 1rem; flex: 1 1 100%; font-size: .82rem; color: var(--tc-muted); }
.jt-types label, .jt-chk { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; color: var(--tc-text); }
.jt-types input, .jt-chk input { accent-color: var(--accent); width: 1rem; height: 1rem; cursor: pointer; }
.jt-count { font-size: .82rem; font-weight: 600; color: var(--tc-muted); }
.jt-btn--sq { width: 2.2rem; padding: 0; }
.jt-btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.jt-btn--sm { height: 1.9rem; padding: 0 .75rem; font-size: .78rem; border-radius: 10px; }

/* the tree */
.jt-tree { max-height: 30rem; min-height: 8rem; overflow: auto; padding: .6rem .4rem .6rem .6rem; font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 12px; --t-key: #1d4ed8; --t-str: #15803d; --t-num: #b45309; --t-bool: #7e22ce; --t-null: #64748b; --t-mark: rgba(250, 204, 21, .32); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jt-tree { --t-key: #93c5fd; --t-str: #86efac; --t-num: #fcd34d; --t-bool: #d8b4fe; --t-null: #94a3b8; --t-mark: rgba(250, 204, 21, .22); } }
:root[data-theme="dark"] .jt-tree { --t-key: #93c5fd; --t-str: #86efac; --t-num: #fcd34d; --t-bool: #d8b4fe; --t-null: #94a3b8; --t-mark: rgba(250, 204, 21, .22); }
.jt-tree.is-stale { opacity: .55; }
.jt-empty { margin: .4rem; color: var(--tc-muted); font: inherit; }
.jt-kids { list-style: none; margin: 0; padding: 0 0 0 1.15rem; }
.jt-kids--root { padding-left: 0; }
.jt-kids[hidden] { display: none; }
.jt-node { margin: 0; padding: 0; list-style: none; }
.jt-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .3rem; padding: 1px .4rem 1px 0; border-radius: 6px; cursor: default; color: var(--tc-text); }
.jt-row[aria-expanded] { cursor: pointer; }
.jt-row:hover { background: rgba(var(--accent-rgb), .07); }
.jt-row:focus { outline: none; }
.jt-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.jt-row.is-selected { background: rgba(var(--accent-rgb), .14); }
.jt-row.is-marked { background: var(--t-mark); }
.jt-row.is-marked.is-selected { box-shadow: inset 0 0 0 1px var(--accent); }
.jt-caret { display: inline-flex; align-items: center; justify-content: center; width: 1rem; flex: none; color: var(--tc-muted); font-size: .8rem; }
.jt-caret i { transition: transform .15s ease; }
.jt-row.is-open > .jt-caret i { transform: rotate(90deg); }
.jt-k { color: var(--t-key); font-weight: 600; word-break: break-all; }
.jt-k--idx { color: var(--tc-muted); font-weight: 400; }
.jt-colon { color: var(--tc-muted); }
.jt-sum { color: var(--tc-muted); font-size: .85em; }
.jt-v { word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap; }
.jt-v--string { color: var(--t-str); }
.jt-v--number { color: var(--t-num); }
.jt-v--boolean { color: var(--t-bool); }
.jt-v--null { color: var(--t-null); font-style: italic; }
.jt-more, .jt-showmore { font: inherit; font-size: .8rem; color: var(--accent); background: none; border: 0; padding: 0 .3rem; cursor: pointer; text-decoration: underline; }
.jt-showmore { padding: .25rem .2rem .25rem 1.4rem; }
.jt-more:focus-visible, .jt-showmore:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* the node bar and source box */
.jt-pathbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .6rem .8rem; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: 12px; }
.jt-pathbar[hidden] { display: none; }
.jt-path { flex: 1 1 14rem; min-width: 0; font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--tc-text); word-break: break-all; }
.jt-type { font-size: .78rem; color: var(--tc-muted); }
.jt-pathbtns { display: flex; flex-wrap: wrap; gap: .4rem; }
.jt-src { display: block; width: 100%; height: 26rem; resize: vertical; padding: 12px; font: 13.5px/22px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; line-height: 22px !important; white-space: pre; overflow: auto; color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 12px; outline: 0; }
.jt-src:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.jt-warnli { color: #b45309; }
.jt-keys { margin: 0; font-size: .82rem; color: var(--tc-muted); }
.jt-keys kbd { padding: 1px 6px; font: inherit; font-size: .78rem; color: var(--tc-text); background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: 6px; }
@media (max-width: 600px) {
  .jt-in { height: 11rem; }
  .jt-tree { max-height: 24rem; }
  .jt-bar .jt-btn span.jt-lbl { display: none; }
}