/* ============================================================================
   ToolBench — schema.css
   Avro Schema Viewer + Protobuf Schema Viewer (one Vue app, two pages).

   Loaded alongside json.css, which already supplies .split / .pane /
   .payload / the .tk-* token colours — none of that is redeclared here.
   .card/.tabs/.drop/.orline/.limits/.field-top/.lbl/.ta/.count/.actions/
   .status/.err/.capnote come from tools.css. Tokens come from site.css.
   ============================================================================ */

.schema-in{font-size:13px;white-space:pre;overflow-x:auto}
.schema-empty{margin:18px 0;padding:16px;text-align:center;
  background:var(--paper);border:1px dashed var(--paper-line);border-radius:var(--radius);
  font-size:14px;color:var(--slate-light)}
.schema-body{margin:14px 0 0}

/* --------------------------------------------------- validation banner ---- */
.verify{display:flex;align-items:flex-start;gap:12px;margin:14px 0 0;padding:12px 14px;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-warn{background:var(--warn-bg);border:1px solid rgba(245,166,35,.5);border-left:3px solid var(--amber)}
.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:28px;height:28px;border-radius:50%;color:#fff;font-size:14px}
.verify.is-ok .vmark{background:var(--success)}
.verify.is-warn .vmark{background:var(--amber);color:var(--ink)}
.verify.is-bad .vmark{background:var(--danger)}
.verify .vbody{min-width:0}
.verify .vbody h3{margin:0 0 3px;font:600 15px/1.3 var(--display)}
.verify.is-ok .vbody h3{color:var(--success-ink)}
.verify.is-warn .vbody h3{color:var(--warn-ink)}
.verify.is-bad .vbody h3{color:var(--danger-ink)}
.verify .vbody p{margin:0;font-size:13.5px;color:var(--slate)}

/* ---------------------------------------------------------- diagnostics --- */
.diaglist{margin:10px 0 0;padding:0;list-style:none}
.diaglist li{display:flex;gap:8px;align-items:flex-start;padding:7px 10px;margin:0 0 4px;
  border-radius:var(--radius);font-size:13px}
.diaglist li.is-error{background:var(--danger-bg);color:var(--danger-ink)}
.diaglist li.is-warning{background:var(--warn-bg);color:var(--warn-ink)}
.diaglist .dsev{flex:none;font-weight:600}
.diaglist .dloc,.diaglist .dpath{font-family:var(--mono);font-size:12px;opacity:.85}

/* ----------------------------------------------------------------- tree --- */
.stree{margin:0;padding:0;list-style:none;font:400 13px/1.7 var(--mono)}
.stree li{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;padding:2px 0;border-bottom:1px solid rgba(0,0,0,.04)}
.stree .d1{padding-left:18px}
.stree .d2{padding-left:36px}
.stree .d3{padding-left:54px}
.stree .d4{padding-left:72px}
.stree .d5{padding-left:90px}
.stree .d6{padding-left:108px}
.stree .tk-key{color:var(--ink);font-weight:500}
.stree .tk-type{color:var(--blueprint)}

.stag{padding:1px 6px;border-radius:2px;background:rgba(44,110,142,.1);
  font:500 11px/1.5 var(--mono);color:var(--blueprint);white-space:nowrap}
.sdoc{font:400 12px/1.5 var(--sans);color:var(--slate-light)}
.sdoc.block{margin:0 0 8px}

/* ---------------------------------------------------------------- lists --- */
.stitle{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:22px 0 6px;
  font:600 14px/1.3 var(--mono);color:var(--ink);word-break:break-all}
.skind{padding:1px 6px;border-radius:2px;background:var(--paper);border:1px solid var(--paper-line);
  font:500 10.5px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--slate-light)}
.skind.is-unres{background:var(--danger-bg);border-color:rgba(192,57,43,.35);color:var(--danger-ink)}
.slist{margin:8px 0 0;padding:0;list-style:none}
.slist li{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--paper-line)}
.slist code{font:400 12.5px/1.5 var(--mono);color:var(--ink)}

/* --------------------------------------------------------------- tables --- */
.stable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--paper-line);border-radius:var(--radius)}
.stable{width:100%;border-collapse:collapse;font:400 12.5px/1.5 var(--mono);background:#fff}
.stable th,.stable td{padding:7px 10px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--paper-line)}
.stable th{position:sticky;top:0;background:var(--paper);
  font:500 10.5px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blueprint)}
.stable tbody tr:last-child td{border-bottom:0}
.stable td .sdoc{white-space:normal}

/* ============================ schema lab (3 tools) ======================== */
/* Compatibility verdict cards, the wire-decoder tree and the sample output.
   Loaded on the same pages as the rest of this file. */

.verdicts{display:grid;gap:10px;grid-template-columns:1fr;margin:16px 0 0}
@media (min-width:768px){.verdicts{grid-template-columns:repeat(3,1fr)}}
.verdict-card{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--radius)}
.verdict-card.is-ok{background:rgba(76,175,125,.08);border:1px solid rgba(76,175,125,.45);border-left:3px solid var(--success)}
.verdict-card.is-bad{background:var(--danger-bg);border:1px solid rgba(192,57,43,.35);border-left:3px solid var(--danger)}
.verdict-card .vmark{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;font-size:13px}
.verdict-card.is-ok .vmark{background:var(--success)}
.verdict-card.is-bad .vmark{background:var(--danger)}
.verdict-card h3{margin:0 0 2px;font:600 13.5px/1.3 var(--display)}
.verdict-card.is-ok h3{color:var(--success-ink)}
.verdict-card.is-bad h3{color:var(--danger-ink)}

/* info-severity diagnostics: not a problem, just something to know */
.diaglist li.is-info{background:rgba(44,110,142,.06);color:var(--slate)}

/* -------------------------------------------------------- wire decoder --- */
.wirelist{margin:14px 0 0;padding:0;list-style:none}
.wirelist > li{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  padding:8px 0;border-bottom:1px solid var(--paper-line)}
.wirelist .d1{padding-left:20px}
.wirelist .d2{padding-left:40px}
.wirelist .d3{padding-left:60px}
.wirelist .d4{padding-left:80px}
.wirelist .d5{padding-left:100px}
.wirelist .d6{padding-left:120px}
.wnum{flex:none;display:grid;place-items:center;min-width:24px;height:20px;padding:0 5px;
  background:var(--ink);color:#fff;border-radius:2px;font:500 11px/1 var(--mono)}
.wreadings{flex:1 1 100%;margin:6px 0 0;padding:0;list-style:none}
.wreadings li{display:flex;flex-wrap:wrap;gap:8px;padding:3px 0 3px 8px;
  border-left:2px solid var(--paper-line);font:400 12.5px/1.5 var(--mono)}
.wreadings li.is-likely{border-left-color:var(--success);background:rgba(76,175,125,.06)}
.was{min-width:180px;color:var(--slate-light)}
.wval{color:var(--ink);word-break:break-all}

/* ------------------------------------------------------- sample output --- */
.sample-out{max-height:none;min-height:12em}