/* ============================================================================
   ToolBench — json-diff.css
   JSON Diff only. Loaded via the registry's 'css' key alongside json.css,
   which already supplies .split/.pane/.code/.gutter/.edit/.jerr/.jstat/.tree
   — none of that is redeclared here, only what's specific to comparing two
   documents: the summary strip, the filter/search bar, and the three result
   views (side-by-side, unified, tree).

   Tokens come from site.css; .card/.btn/.panel/.chips/.tabs/.drop/.opts come
   from tools.css. All CSS for this site lives in assets/css/ — no <style>
   blocks, no style="" attributes.
   ============================================================================ */

/* json.css doesn't define single-line inputs — this tool needs them for the
   ignore-keys/ignore-paths fields and the search box. Same shape as the
   hashing tools' .inp. */
.inp{
  display:block;width:100%;padding:11px 12px;
  background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--radius);
  color:var(--ink);
  font:400 16px/1.5 var(--mono);   /* >=16px: stops iOS Safari zooming on focus */
}
.inp:focus{outline:0;border-color:var(--blueprint);box-shadow:0 0 0 3px rgba(44,110,142,.14)}
.inp-sm{padding:8px 10px;font-size:14px}
.jd-pathlist{resize:vertical;min-height:2.4em}

/* --------------------------------------------------------------- summary --- */
.jd-summary{
  display:grid;gap:8px;grid-template-columns:repeat(2,1fr);
  margin:18px 0 0;
}
@media (min-width:576px){.jd-summary{grid-template-columns:repeat(3,1fr)}}
@media (min-width:992px){.jd-summary{grid-template-columns:repeat(6,1fr)}}
.jd-stat{
  padding:12px;text-align:center;
  background:#fff;border:1px solid var(--paper-line);border-radius:var(--radius);
}
.jd-stat b{display:block;font:600 22px/1 var(--display);color:var(--ink)}
.jd-stat span{display:block;margin-top:4px;font:500 11px/1.3 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate-light)}
.jd-stat.jd-added b{color:var(--success-ink)}
.jd-stat.jd-removed b{color:var(--danger-ink)}
.jd-stat.jd-changed b,.jd-stat.jd-typeChanged b{color:#8A5A05}
.jd-stat.jd-total{background:var(--ink);border-color:var(--ink)}
.jd-stat.jd-total b,.jd-stat.jd-total span{color:#fff}

/* ----------------------------------------------------------------- filters -- */
.jd-filterbar{margin-top:14px}

/* ---------------------------------------------------- shared diff-type look -- */
/* Every view uses the same border + symbol colour per difference type, so
   switching views doesn't retrain the eye. Symbols carry the meaning too
   (§29) — colour is never the only signal. */
.jd-sym{display:inline-block;width:1.1em;font:600 13px/1 var(--mono);text-align:center}

.jd-added .jd-sym{color:var(--success-ink)}
.jd-removed .jd-sym{color:var(--danger-ink)}
.jd-changed .jd-sym,.jd-mixed .jd-sym{color:#8A5A05}
.jd-typeChanged .jd-sym{color:var(--blueprint)}
.jd-unchanged .jd-sym{color:var(--slate-light)}

.jd-badge{
  margin-left:8px;padding:2px 7px;border-radius:2px;
  font:500 11px/1.5 var(--mono);letter-spacing:.04em;
  background:var(--paper);color:var(--slate-light);
}
.jd-added .jd-badge{background:rgba(76,175,125,.1);color:var(--success-ink)}
.jd-removed .jd-badge{background:var(--danger-bg);color:var(--danger-ink)}
.jd-changed .jd-badge,.jd-mixed .jd-badge{background:rgba(245,166,35,.14);color:#8A5A05}
.jd-typeChanged .jd-badge{background:rgba(44,110,142,.1);color:var(--blueprint)}

/* ------------------------------------------------------------ result rows -- */
.jd-results{margin:14px 0 0}
.jd-row{
  margin:0 0 8px;padding:10px 12px;
  background:#fff;border:1px solid var(--paper-line);border-left:3px solid var(--paper-line);
  border-radius:0 var(--radius) var(--radius) 0;
}
.jd-row.jd-added{border-left-color:var(--success)}
.jd-row.jd-removed{border-left-color:var(--danger)}
.jd-row.jd-changed,.jd-row.jd-mixed{border-left-color:var(--amber)}
.jd-row.jd-typeChanged{border-left-color:var(--blueprint)}
.jd-path{
  margin:0 0 6px;font:500 12.5px/1.4 var(--mono);color:var(--ink);
  word-break:break-word;overflow-wrap:anywhere;
}
.jd-cols{display:grid;gap:8px;grid-template-columns:1fr}
@media (min-width:576px){.jd-cols{grid-template-columns:1fr 1fr}}
.jd-col{min-width:0}
.jd-collbl{
  display:block;margin:0 0 2px;font:500 10px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate-light);
}
.jd-col code{
  display:block;padding:6px 8px;overflow-wrap:anywhere;
  background:var(--paper);border-radius:2px;
  font:400 13px/1.5 var(--mono);color:var(--ink);
}

/* --------------------------------------------------------------- unified --- */
.jd-udiff{margin:0;padding:8px 10px;background:var(--ink);border-radius:2px;font:400 13px/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.jd-line{display:block}
.jd-del{color:#F3A9A0}
.jd-ins{color:#9FE0AE}
.jd-eq{color:#8B98AA}

/* ------------------------------------------------------------------ tree --- */
/* .jd-tree extends json.css's .tree with per-row status colour + a value
   column that behaves for a diff row the way json-formatter's .tval does for
   a plain value. */
.jd-tree .tnode{gap:6px}
.jd-tree .tnode.jd-added .jd-sym{color:#7FD08A}
.jd-tree .tnode.jd-removed .jd-sym{color:#F3A9A0}
.jd-tree .tnode.jd-changed .jd-sym,.jd-tree .tnode.jd-mixed .jd-sym{color:var(--amber-hi)}
.jd-tree .tnode.jd-typeChanged .jd-sym{color:var(--blueprint-light)}
.jd-tree .tnode.jd-unchanged .jd-sym{color:#6B7889}
.jd-tree .tnode .tval{color:#CFE6EE;font-size:12.5px}

/* ------------------------------------------------------------- ignore note -- */
.jd-ignorenote{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0}

.jd-empty{margin:18px 0 0;text-align:center}