/* ============================================================================
   ToolBench — codefmt.css
   The four minifier/beautifier pages (one Vue app, one shared engine — the
   same arrangement hash.css covers for the hashing pages).

   .card/.modes/.panel/.prow/.plbl/.seg/.opt/.field-top/.lbl/.ta/.ta-out/
   .count/.actions/.status/.err/.warn/.drop/.orline/.limits all already exist
   in tools.css — reused as-is, not redeclared here. Tokens come from site.css.

   .split/.pane are duplicated from json.css rather than pulling that whole
   stylesheet in for two rules, matching the convention image-compressor.css
   and aes.css already follow for small shared blocks.
   ============================================================================ */

/* ---------------------------------------------------------- two panes ----- */
.split{display:grid;gap:14px;grid-template-columns:1fr;margin:18px 0 0}
@media (min-width:992px){.split{grid-template-columns:1fr 1fr;gap:16px}}
.pane{display:flex;flex-direction:column;min-width:0}
.pane .ta{
  /* a long minified line must scroll inside the box, not stretch the page */
  white-space:pre;overflow-x:auto;font-size:13px;
}
.pane .count{margin:0;text-align:right}

/* ------------------------------------------------------------- the note --- */
.note{
  display:flex;gap:10px;align-items:flex-start;
  margin:18px 0 0;padding:10px 12px;border-radius:var(--radius);
  background:rgba(44,110,142,.06);border-left:3px solid var(--blueprint);
  font-size:13.5px;color:var(--slate);
}
.note b{color:var(--ink)}
.note code{font:400 12.5px/1.4 var(--mono);background:rgba(0,0,0,.06);padding:1px 4px;border-radius:2px}

/* -------------------------------------------------- verification banner --- */
.verify{display:flex;align-items:flex-start;gap:14px;margin:16px 0 0;padding:14px 16px;border-radius:var(--radius)}
.verify.is-ok{background:rgba(76,175,125,.08);border:1px solid rgba(76,175,125,.45);border-left:3px solid var(--success)}
.verify.is-bad{background:var(--danger-bg);border:1px solid rgba(192,57,43,.35);border-left:3px solid var(--danger)}
.verify .vmark{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#fff;font-size:15px}
.verify.is-ok .vmark{background:var(--success)}
.verify.is-bad .vmark{background:var(--danger)}
.verify .vbody{min-width:0}
.verify .vbody h3{margin:0 0 4px;font:600 15px/1.3 var(--display)}
.verify.is-ok .vbody h3{color:var(--success-ink)}
.verify.is-bad .vbody h3{color:var(--danger-ink)}
.verify .vbody p{margin:0;font-size:13.5px;color:var(--slate)}