/* ============================================================================
   ToolBench — data-tools.css
   CSV<->JSON, YAML<->JSON and Word/Character Counter: preview table,
   output panes, ambiguous-scalar/anchor annotations, readability panel.
   Loaded alongside tools.css/json.css, which already supply
   .card/.tabs/.panel/.prow/.seg/.opt/.split/.pane/.code/.edit/.jerr/.warn —
   none of that is redeclared here.
   ============================================================================ */

.dc-output{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.dc-scroll{overflow-x:auto;margin:14px 0 0}
.dc-table{width:100%;border-collapse:collapse;font-size:13.5px}
.dc-table th,.dc-table td{padding:7px 9px;text-align:left;border-bottom:1px solid var(--paper-line);white-space:nowrap}
.dc-table th{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--slate-light);border-bottom:2px solid var(--paper-line);background:var(--paper)}

/* ------------------------------------------------------------- YAML tool --- */
.yc-warnlist{margin:12px 0 0;padding:0;list-style:none}
.yc-warnlist li{
  display:flex;gap:8px;padding:8px 10px;margin:0 0 5px;border-radius:var(--radius);
  background:var(--warn-bg);color:var(--warn-ink);font-size:13.5px;border-left:3px solid var(--amber);
}

/* ---------------------------------------------------- readability panel --- */
.wc-grid{display:grid;gap:8px;grid-template-columns:repeat(2,1fr);margin:14px 0 0}
@media (min-width:768px){.wc-grid{grid-template-columns:repeat(4,1fr)}}
.wc-stat{padding:12px;background:#fff;border:1px solid var(--paper-line);border-radius:var(--radius);text-align:center}
.wc-stat b{display:block;font:600 22px/1 var(--display);color:var(--ink)}
.wc-stat span{display:block;margin-top:4px;font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--slate-light)}

.wc-scores{display:grid;gap:10px;grid-template-columns:1fr;margin:16px 0 0}
@media (min-width:768px){.wc-scores{grid-template-columns:repeat(3,1fr)}}
.wc-score{padding:14px;background:#fff;border:1px solid var(--paper-line);border-radius:var(--radius)}
.wc-score h3{margin:0 0 4px;font:500 12px/1.3 var(--mono);letter-spacing:.04em;color:var(--blueprint)}
.wc-score b{display:block;font:600 24px/1.2 var(--display);color:var(--ink)}
.wc-score p{margin:6px 0 0;font-size:12.5px;color:var(--slate-light)}

.wc-freqtable{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0 0}
.wc-freqtable th,.wc-freqtable td{padding:7px 9px;text-align:left;border-bottom:1px solid var(--paper-line)}
.wc-freqtable td:nth-child(2),.wc-freqtable td:nth-child(3),.wc-freqtable th:nth-child(2),.wc-freqtable th:nth-child(3){text-align:right}
.wc-freqbar{display:inline-block;height:6px;background:var(--blueprint-light);border-radius:2px;vertical-align:middle;margin-left:8px}

.wc-platform{margin:0 0 10px}
.wc-platform-head{display:flex;justify-content:space-between;font:500 13px/1.4 var(--sans);margin:0 0 5px}
.wc-platform-bar{height:8px;background:var(--paper);border-radius:99px;overflow:hidden}
.wc-platform-fill{height:100%;background:var(--blueprint-light);border-radius:99px}
.wc-platform-fill.is-over{background:var(--danger)}