/* JSON Formatter — tool-specific styles. Most styling comes from toolkit.css.
   All selectors scoped under #trp-tool-root / prefixed .trp-jf- so nothing
   collides with Astra / Elementor / other tools. Uses shared tokens and a
   system monospace stack (no external fonts).
   Responsive: two panels side-by-side on desktop, stacked on tablet/mobile. */

#trp-tool-root .trp-jf-indent{max-width:220px;margin-bottom:16px;}
#trp-tool-root .trp-jf-sel{appearance:auto;min-height:46px;cursor:pointer;}

#trp-tool-root .trp-jf-panels{display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:820px){#trp-tool-root .trp-jf-panels{grid-template-columns:1fr 1fr;}}

#trp-tool-root .trp-jf-panel{display:flex;flex-direction:column;min-width:0;}
#trp-tool-root .trp-jf-panel-h{font-weight:700;margin-bottom:6px;}

#trp-tool-root .trp-jf-editor{
  font-family:var(--trp-font-mono);font-size:13px;line-height:1.55;
  min-height:280px;resize:vertical;white-space:pre;overflow:auto;tab-size:2;
}
#trp-tool-root .trp-jf-hint{margin:6px 0 0;font-size:12.5px;color:var(--trp-muted);}

#trp-tool-root .trp-jf-out{
  margin:0;padding:14px;min-height:280px;max-height:520px;overflow:auto;max-width:100%;
  background:var(--trp-surface-2);border:1px solid var(--trp-border);border-radius:var(--trp-r-md);
}
#trp-tool-root .trp-jf-out:focus-visible{outline:2px solid var(--trp-accent);outline-offset:2px;}
#trp-tool-root .trp-jf-code{
  display:block;white-space:pre;font-family:var(--trp-font-mono);
  font-size:13px;line-height:1.55;color:var(--trp-ink);tab-size:2;
}
#trp-tool-root .trp-jf-empty{
  margin:0;padding:24px 14px;min-height:280px;display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--trp-muted);font-size:14px;
  background:var(--trp-surface-2);border:1px dashed var(--trp-border);border-radius:var(--trp-r-md);
}

#trp-tool-root .trp-jf-actions{margin-top:16px;flex-wrap:wrap;}

#trp-tool-root .trp-jf-error{
  margin:14px 0 0;padding:11px 14px;border-radius:var(--trp-r-md);
  background:var(--trp-error-bg);color:var(--trp-error);font-size:14px;font-weight:500;
}
#trp-tool-root .trp-jf-status{margin:12px 0 0;font-size:14px;font-weight:600;color:var(--trp-ink-2);}
#trp-tool-root .trp-jf-status:empty{display:none;}

#trp-tool-root .trp-jf-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;}
#trp-tool-root .trp-jf-stat{
  background:var(--trp-surface);border:1px solid var(--trp-border);border-radius:var(--trp-r-md);
  padding:9px 14px;min-width:100px;
}
#trp-tool-root .trp-jf-stat-v{display:block;font-size:17px;font-weight:800;color:var(--trp-ink);font-variant-numeric:tabular-nums;}
#trp-tool-root .trp-jf-stat-l{display:block;font-size:12px;color:var(--trp-muted);margin-top:2px;}

@media(max-width:480px){
  #trp-tool-root .trp-jf-actions .trpk-btn{flex:1 1 auto;}
  #trp-tool-root .trp-jf-editor,#trp-tool-root .trp-jf-out,#trp-tool-root .trp-jf-empty{min-height:200px;}
}

/* example/error lists in the content section (outside the widget root) */
.trp-jf-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.trp-jf-list li{
  background:var(--trp-surface);border:1px solid var(--trp-border);
  border-radius:var(--trp-r-md);padding:11px 14px;font-size:14px;color:var(--trp-ink-2);
}
.trp-jf-list li strong{color:var(--trp-ink);}
.trp-jf-list code{font-family:var(--trp-font-mono);font-size:.9em;background:var(--trp-accent-soft);color:var(--trp-ink);padding:1px 6px;border-radius:5px;}