/* ==========================================================================
   JSON Formatter & Validator (tool.css)
   Only styles unique to this tool. Everything else comes from ../assets/fe.css.
   Uses design tokens only: no raw colors, sizes or fonts.
   ========================================================================== */

/* Input box */
.fe-json-tool .fe-pane textarea { flex: 1 1 0; min-height: 0; white-space: pre; overflow: auto; resize: none; }
/* Laptops and up: the panels fill the space fe.js gives them (data-fe-fit).
   Phones: panels stack, so give each a fixed, thumb-friendly height. */
.fe-json-tool .fe-output, .fe-json-tool .fe-tree { flex: 1 1 0; min-height: 0; }
@media (max-width: 760px) {
  .fe-json-tool .fe-pane textarea { flex: none; height: 38vh; min-height: 200px; }
  .fe-json-tool .fe-output, .fe-json-tool .fe-tree { flex: none; height: 60vh; }
}
.fe-json-tool .fe-bigmode textarea { color: var(--fe-muted); white-space: pre-wrap; word-break: break-all; }

/* Search row above the output */
.fe-json-tool .fe-search { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--fe-border); background: var(--fe-bg); }
.fe-json-tool .fe-scount { min-width: 74px; text-align: right; font-size: var(--fe-text-xs); color: var(--fe-muted); white-space: nowrap; }

/* Code view (virtual scrolling: only visible lines are drawn) */
.fe-json-tool .fe-output {
  display: block; width: 100%; margin: 0; padding: var(--fe-s3); overflow: auto;
  background: var(--fe-bg); color: var(--fe-text);
  font-family: var(--fe-mono); font-size: var(--fe-text-sm); line-height: 1.55; tab-size: 4; white-space: pre;
}
.fe-json-tool .fe-output.fe-lines { position: relative; padding: var(--fe-s2) 0; white-space: normal; }
.fe-json-tool .fe-vspace { width: 1px; }
.fe-json-tool .fe-vwin { position: absolute; top: var(--fe-s2); left: 0; min-width: 100%; will-change: transform; }
.fe-json-tool .fe-ln { display: flex; width: max-content; min-width: 100%; height: 20px; line-height: 20px; white-space: pre; }
.fe-json-tool .fe-no { flex: none; width: 46px; padding-right: var(--fe-s2); text-align: right; color: var(--fe-muted); user-select: none; -webkit-user-select: none; }
.fe-json-tool .fe-fd { flex: none; width: 16px; text-align: center; color: var(--fe-muted); cursor: pointer; user-select: none; -webkit-user-select: none; }
.fe-json-tool .fe-fd:hover { color: var(--fe-text); }
.fe-json-tool .fe-lc { flex: 1; padding: 0 var(--fe-s3) 0 2px; }
.fe-json-tool .fe-ln.fe-p .fe-lc { cursor: pointer; }
.fe-json-tool .fe-ln.fe-p:hover .fe-lc { background: var(--fe-panel); }
.fe-json-tool .fe-ln.sel .fe-lc, .fe-json-tool .fe-ln.sel:hover .fe-lc { background: var(--fe-sel); }
.fe-json-tool .fe-key:hover { text-decoration: underline; }
.fe-json-tool .fe-sum { color: var(--fe-muted); font-size: var(--fe-text-xs); }

/* Syntax colors */
.fe-json-tool .k { color: var(--fe-syn-key); }
.fe-json-tool .s { color: var(--fe-syn-str); }
.fe-json-tool .n { color: var(--fe-syn-num); }
.fe-json-tool .b { color: var(--fe-syn-bool); font-weight: var(--fe-weight-bold); }
.fe-json-tool .z { color: var(--fe-syn-null); font-style: italic; }

/* Tree view */
.fe-json-tool .fe-tree { margin: 0; padding: var(--fe-s2) 10px; overflow: auto; background: var(--fe-bg); font-family: var(--fe-mono); font-size: var(--fe-text-sm); line-height: 1.6; }
.fe-json-tool .fe-row { display: flex; align-items: baseline; padding: 0 6px; border-radius: 4px; white-space: nowrap; cursor: pointer; }
.fe-json-tool .fe-row:hover { background: var(--fe-panel); }
.fe-json-tool .fe-row.sel { background: var(--fe-sel); }
.fe-json-tool .fe-tog { display: inline-block; width: 14px; flex: none; margin-right: var(--fe-s1); color: var(--fe-muted); text-align: center; user-select: none; transition: transform .12s; }
.fe-json-tool .fe-row.open > .fe-tog { transform: rotate(90deg); }
.fe-json-tool .fe-colon { padding-right: 6px; color: var(--fe-muted); }
.fe-json-tool .fe-count { color: var(--fe-muted); font-size: var(--fe-text-xs); }
.fe-json-tool .fe-children { margin-left: 13px; padding-left: var(--fe-s2); border-left: 1px dashed var(--fe-border); }
.fe-json-tool .fe-more { padding: 0 6px 0 var(--fe-s5); color: var(--fe-link); cursor: pointer; font-size: var(--fe-text-xs); }
.fe-json-tool .fe-more:hover { text-decoration: underline; }

/* Path bar under the output */
.fe-json-tool .fe-path { flex: 1; min-width: 0; color: var(--fe-text); font-family: var(--fe-mono); font-size: var(--fe-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Keyboard focus inside the code and tree views */
.fe-json-tool .fe-output:focus, .fe-json-tool .fe-tree:focus { outline: none; }
.fe-json-tool .fe-output:focus-visible, .fe-json-tool .fe-tree:focus-visible { outline: 2px solid var(--fe-accent); outline-offset: -2px; }
.fe-json-tool .fe-output:focus-visible .fe-ln.kb .fe-lc, .fe-json-tool .fe-tree:focus-visible .kb { box-shadow: inset 0 0 0 2px var(--fe-accent); border-radius: 3px; }

/* Search highlights */
.fe-json-tool .fe-ln.hit .fe-lc { background: var(--fe-hit); }
.fe-json-tool .fe-ln.hitcur .fe-lc, .fe-json-tool .fe-ln.hitcur:hover .fe-lc { background: var(--fe-hit-current); }
.fe-json-tool .fe-row.hitcur { background: var(--fe-hit-current); }
.fe-json-tool mark.fe-mark { background: var(--fe-mark); color: var(--fe-mark-text); padding: 0; border-radius: 2px; }

/* Phones: path on its own line above the buttons, wrapping if long (owner's choice A, Decisions log) */
@media (max-width: 600px) {
  .fe-json-tool .fe-path { flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; }
}