/* ==========================================================================
   JSON Formatter & Validator
   ========================================================================== */

.jf-input { min-height: 320px; font: 0.86rem/1.6 var(--font-mono); white-space: pre; tab-size: 2; }
.jf-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.jf-row .segmented[hidden] + .jf-sort { margin-left: 0; }
.jf-sort { padding-bottom: 0.45rem; }
.jf-repair { align-self: flex-start; }

.jf-status {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin: -0.4rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.jf-status .icon { flex: none; width: 18px; height: 18px; margin-top: 0.1rem; stroke-width: 2.4; }
.jf-status.is-good { border: 1px solid rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.08); color: var(--success-text); }
.jf-status.is-warn { border: 1px solid rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.08); color: var(--warn-text); }
.jf-status.is-bad { border: 1px solid rgba(251, 113, 133, 0.35); background: rgba(251, 113, 133, 0.08); color: var(--danger-text); }
.jf-status strong { color: inherit; }

.jf-code {
  max-height: 560px;
  margin: 0;
  padding: 1rem 1.1rem;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--field-bg);
  color: var(--text);
  font: 0.84rem/1.65 var(--font-mono);
  white-space: pre;
  tab-size: 2;
}
.jf-code:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; }
.jf-code code.is-error { color: var(--text-2); }
.jf-err-title { color: var(--danger-text); font-weight: 700; }
.jf-ln { display: inline-block; min-width: 3ch; margin-right: 1ch; color: var(--muted); text-align: right; user-select: none; }
.jf-caret { color: var(--danger); font-weight: 700; }
.jf-k { color: var(--code-k); }
.jf-s { color: var(--code-s); }
.jf-n { color: var(--code-f); }
.jf-b { color: #f59e0b; }
:root[data-theme="light"] .jf-b { color: #b45309; }
.jf-z { color: var(--danger); }
.jf-p { color: var(--muted); }
.jf-note { margin: 0; color: var(--text-2); font-size: 0.86rem; }

.jf-tree, .jt-list { margin: 0; padding: 0; list-style: none; font: 0.85rem/1.7 var(--font-mono); }
.jf-tree {
  max-height: 560px;
  padding: 0.9rem 1rem;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--field-bg);
}
.jt-list { margin-left: 0.55rem; padding-left: 0.9rem; border-left: 1px dashed var(--border-2); }
.jf-tree summary { cursor: pointer; list-style: none; }
.jf-tree summary::-webkit-details-marker { display: none; }
.jf-tree summary::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--muted); transition: transform 0.2s; }
.jf-tree details[open] > summary::before { transform: rotate(90deg); }
.jt-leaf { padding-left: 1.1em; overflow-wrap: anywhere; }
.jt-key { color: var(--code-k); }
.jt-colon { color: var(--muted); }
.jt-sum { color: var(--muted); }
.jt-more { padding-left: 1.1em; color: var(--muted); font-style: italic; }