/* CSV ↔ JSON: paper workbench with a visible table preview. */
#cjsonTool {
  --cj-paper:#faf6ee; --cj-wash:#f5efdf; --cj-ink:#1a1208; --cj-muted:#5a4a30;
  --cj-line:#b8a888; --cj-soft:#ddd4be; --cj-button:#ede6d4; --cj-hover:#dfd4bb;
  --cj-accent:#c44a00; --cj-primary:#a83f00; --cj-on-primary:#fffaf2;
  box-sizing:border-box; width:100%; min-width:0; padding:20px 18px 0;
  border-top:3px double var(--cj-ink); border-bottom:1px solid var(--cj-line);
  background:var(--cj-paper); color:var(--cj-ink); -webkit-font-smoothing:antialiased;
}
#cjsonTool *, #cjsonTool *::before, #cjsonTool *::after { box-sizing:border-box; }
#cjsonTool [hidden] { display:none!important; }
#cjsonTool :is(button,input,textarea) { -webkit-text-fill-color:currentColor; }
#cjsonTool :is(button,.cjson-file) {
  display:inline-flex; align-items:center; justify-content:center; min-height:42px;
  padding:10px 14px; border:1px solid var(--cj-line); border-radius:0; box-shadow:none;
  background:var(--cj-button); color:var(--cj-ink); font:900 13px/1.15 'Courier New',monospace;
  text-align:center; cursor:pointer; transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease;
}
#cjsonTool :is(button,.cjson-file):hover { background:var(--cj-hover); border-color:var(--cj-ink); }
#cjsonTool button:not(:disabled):active { translate:0 1px; }
#cjsonTool button:disabled { opacity:.5; cursor:not-allowed; }
#cjsonTool :is(button,textarea,input,.cjson-preview-scroll):focus-visible, #cjsonTool .cjson-file:focus-within { outline:2px solid var(--cj-accent); outline-offset:2px; }
#cjsonTool .cjson-topbar { display:flex; align-items:center; justify-content:space-between; gap:10px 20px; flex-wrap:wrap; margin-bottom:16px; }
#cjsonTool .cjson-topbar p { margin:0; color:var(--cj-muted); font-size:12px; line-height:1.5; }
#cjsonTool .cjson-modes { display:flex; max-width:100%; }
#cjsonTool .cjson-modes button { min-height:46px; padding-inline:20px; white-space:nowrap; }
#cjsonTool .cjson-modes button + button { margin-left:-1px; }
#cjsonTool .cjson-modes button[aria-pressed="true"] { position:relative; z-index:1; border-color:var(--cj-ink); background:var(--cj-ink); color:var(--cj-paper); -webkit-text-fill-color:var(--cj-paper); }
#cjsonTool .cjson-modes button span { margin-inline:4px; color:var(--cj-accent); -webkit-text-fill-color:var(--cj-accent); }
#cjsonTool .cjson-modes button[aria-pressed="true"] span { color:var(--cj-paper); -webkit-text-fill-color:var(--cj-paper); }
#cjsonTool .cjson-workspace { display:grid; grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr); align-items:stretch; }
#cjsonTool .cjson-pane { display:flex; flex-direction:column; min-width:0; border:1px solid var(--cj-line); background:var(--cj-paper); transition:border-color 160ms ease,background-color 160ms ease; }
#cjsonTool .cjson-pane--output { background:var(--cj-wash); }
#cjsonTool[data-state="ready"] .cjson-pane--output { border-color:var(--cj-accent); }
#cjsonTool[data-state="error"] .cjson-pane--input, #cjsonTool .cjson-pane--input[data-drag="true"] { border-color:var(--cj-accent); }
#cjsonTool .cjson-pane-head { display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:10px; padding:11px 18px; border-bottom:1px solid var(--cj-soft); }
#cjsonTool .cjson-pane-head > div { min-width:0; }
#cjsonTool .cjson-index { display:block; margin-bottom:5px; color:var(--cj-accent); font:900 11px/1.25 'Courier New',monospace; letter-spacing:.08em; }
#cjsonTool .cjson-pane-head h2, #cjsonTool .cjson-preview-head h2 { margin:0; font-size:16px; line-height:1.3; font-weight:800; }
#cjsonTool .cjson-pane-head label[for="cjsonInput"], #cjsonTool .cjson-pane-head label[for="cjsonOutput"] { cursor:text; }
#cjsonTool .cjson-file { position:relative; flex:none; overflow:hidden; white-space:nowrap; }
#cjsonTool .cjson-file input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
#cjsonTool .cjson-format { color:var(--cj-accent); font:900 16px/1 'Courier New',monospace; }
#cjsonTool .cjson-arrow { display:grid; place-items:center; color:var(--cj-accent); font:700 25px/1 Georgia,serif; }
#cjsonTool .cjson-arrow span { display:grid; place-items:center; }
#cjsonTool :is(#cjsonInput,#cjsonOutput) {
  display:block; flex:1; width:100%; min-height:286px; resize:vertical;
  border:0; border-radius:0; box-shadow:none; background:transparent; color:var(--cj-ink);
  padding:16px 18px; font:14px/1.7 ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace;
  tab-size:2; white-space:pre-wrap; overflow-x:hidden; overflow-wrap:anywhere; word-break:break-word;
}
#cjsonTool :is(#cjsonInput,#cjsonOutput)::placeholder { color:var(--cj-muted); opacity:.7; }
#cjsonTool :is(#cjsonInput,#cjsonOutput):focus-visible { outline-offset:-3px; }
#cjsonTool .cjson-pane-foot { display:flex; flex-direction:column; justify-content:space-between; gap:9px; min-height:96px; margin-top:auto; padding:12px 18px; border-top:1px solid var(--cj-soft); }
#cjsonTool .cjson-pane-foot p { margin:0; color:var(--cj-muted); font-size:12px; line-height:1.5; }
#cjsonTool .cjson-footrow { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; min-width:0; margin-top:auto; }
#cjsonTool :is(#cjsonFileHint,#cjsonOutputHint) { color:var(--cj-muted); font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
#cjsonTool .cjson-actions { display:flex; flex-wrap:wrap; gap:7px; }
#cjsonTool .cjson-actions button { white-space:nowrap; }
#cjsonTool #cjsonDownload { border-color:var(--cj-primary); background:var(--cj-primary); color:var(--cj-on-primary); -webkit-text-fill-color:var(--cj-on-primary); }
#cjsonTool #cjsonDownload:not(:disabled):hover { border-color:var(--cj-accent); background:var(--cj-accent); }
#cjsonTool .cjson-bom { display:inline-flex; align-items:center; flex-wrap:wrap; gap:7px; min-height:22px; font-size:12px; line-height:1.45; cursor:pointer; }
#cjsonTool .cjson-bom input { width:16px; height:16px; margin:0; accent-color:var(--cj-accent); }
#cjsonTool .cjson-bom span { color:var(--cj-muted); }
#cjsonTool .cjson-statusrow { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:4px 18px; padding:12px 1px; border-bottom:1px solid var(--cj-soft); }
#cjsonTool .cjson-statusrow p { margin:0; font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
#cjsonTool #cjsonStatus { flex:1 1 320px; min-height:19px; color:var(--cj-muted); }
#cjsonTool[data-state="error"] #cjsonStatus { color:var(--cj-accent); font-weight:700; }
#cjsonTool #cjsonRule { color:var(--cj-muted); }
#cjsonTool .cjson-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:16px; }
#cjsonTool .cjson-stats > div { display:flex; align-items:baseline; justify-content:space-between; min-width:0; gap:7px; padding:12px 14px; border-right:1px solid var(--cj-soft); }
#cjsonTool .cjson-stats > div:first-child { padding-left:1px; }
#cjsonTool .cjson-stats > div:last-child { padding-right:1px; border-right:0; }
#cjsonTool .cjson-stats span { color:var(--cj-muted); font-size:11px; white-space:nowrap; }
#cjsonTool .cjson-stats b { color:var(--cj-ink); font:800 13px/1.3 system-ui,sans-serif; font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; }
#cjsonTool .cjson-preview { margin:0 0 18px; border:1px solid var(--cj-line); background:var(--cj-wash); }
#cjsonTool .cjson-preview-head { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:8px 14px; padding:12px 18px; border-bottom:1px solid var(--cj-soft); }
#cjsonTool .cjson-preview-head p { margin:0; color:var(--cj-muted); font-size:12px; line-height:1.4; }
#cjsonTool .cjson-preview-scroll { max-width:100%; overflow-x:auto; padding:0 18px 12px; }
#cjsonTool .cjson-preview-scroll > p { margin:14px 0 2px; color:var(--cj-muted); font-size:13px; }
#cjsonTool .cjson-preview-scroll table { width:100%; min-width:max-content; border-collapse:collapse; border:0; margin:0; background:transparent; color:var(--cj-ink); font-size:13px; line-height:1.5; }
#cjsonTool .cjson-preview-scroll caption { padding:7px 0; text-align:left; color:var(--cj-muted); font-size:11px; }
#cjsonTool .cjson-preview-scroll :is(th,td) { min-width:110px; max-width:240px; padding:9px 12px; border:1px solid var(--cj-soft); background:transparent; color:var(--cj-ink); text-align:left; vertical-align:top; white-space:pre-wrap; overflow-wrap:anywhere; }
#cjsonTool .cjson-preview-scroll th { background:var(--cj-button); font-weight:800; }
#cjsonTool .cjson-preview-scroll tbody tr:nth-child(even) td { background:var(--cj-paper); }
body:is([data-scheme="dark"],[data-scheme="inverse"],[data-scheme="auto"][data-l="dark"],[data-scheme="auto"][data-d="dark"]) #cjsonTool,
html[data-scheme="dark"] body:not([data-scheme="light"]) #cjsonTool {
  --cj-paper:#241d12; --cj-wash:#322a1a; --cj-ink:#efe6d2; --cj-muted:#c3b492;
  --cj-line:#6f6047; --cj-soft:#574a37; --cj-button:#2c2517; --cj-hover:#3b301e;
  --cj-accent:#e8823f; --cj-primary:#6a3b1f; --cj-on-primary:#f7ead1; color-scheme:dark;
}
@media (prefers-color-scheme:dark) {
  body[data-scheme="auto"] #cjsonTool { --cj-paper:#241d12; --cj-wash:#322a1a; --cj-ink:#efe6d2; --cj-muted:#c3b492; --cj-line:#6f6047; --cj-soft:#574a37; --cj-button:#2c2517; --cj-hover:#3b301e; --cj-accent:#e8823f; --cj-primary:#6a3b1f; --cj-on-primary:#f7ead1; color-scheme:dark; }
}
body:is([data-scheme="dark"],[data-scheme="inverse"],[data-scheme="auto"][data-l="dark"],[data-scheme="auto"][data-d="dark"]) #cjsonTool .cjson-modes button[aria-pressed="true"],
html[data-scheme="dark"] body:not([data-scheme="light"]) #cjsonTool .cjson-modes button[aria-pressed="true"] { border-color:var(--cj-accent); background:var(--cj-primary); color:var(--cj-on-primary); -webkit-text-fill-color:var(--cj-on-primary); }
@media (prefers-color-scheme:dark) {
  body[data-scheme="auto"] #cjsonTool .cjson-modes button[aria-pressed="true"] { border-color:var(--cj-accent); background:var(--cj-primary); color:var(--cj-on-primary); -webkit-text-fill-color:var(--cj-on-primary); }
}
@media (max-width:780px) {
  #cjsonTool { padding:14px 12px 0; }
  #cjsonTool .cjson-topbar { gap:9px; margin-bottom:12px; }
  #cjsonTool .cjson-modes { width:100%; }
  #cjsonTool .cjson-modes button { flex:1; min-width:0; padding-inline:6px; font-size:12px; }
  #cjsonTool .cjson-workspace { grid-template-columns:minmax(0,1fr); }
  #cjsonTool .cjson-arrow { padding:4px 0; }
  #cjsonTool .cjson-arrow span { rotate:90deg; }
  #cjsonTool .cjson-pane-head { min-height:60px; padding:10px 13px; }
  #cjsonTool :is(#cjsonInput,#cjsonOutput) { min-height:194px; padding:13px; font-size:16px; line-height:1.6; }
  #cjsonTool .cjson-pane-foot { min-height:0; padding:10px 13px; }
  #cjsonTool .cjson-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #cjsonTool .cjson-stats > div { padding:10px 11px; }
  #cjsonTool .cjson-stats > div:nth-child(2) { border-right:0; }
  #cjsonTool .cjson-stats > div:nth-child(n+3) { border-top:1px solid var(--cj-soft); }
  #cjsonTool .cjson-preview-head { padding:11px 13px; }
  #cjsonTool .cjson-preview-scroll { padding-inline:13px; }
}
@media (max-width:420px) {
  #cjsonTool .cjson-footrow > span { flex-basis:100%; }
  #cjsonTool .cjson-actions { width:100%; }
  #cjsonTool .cjson-actions button { flex:1 1 auto; }
  #cjsonTool #cjsonUseResult { flex-basis:100%; }
}
@media (prefers-reduced-motion:reduce) { #cjsonTool :is(button,.cjson-pane) { transition:none; } }
.tn-cjson-page .cjson-ad { width:min(900px,100%); min-height:90px; margin-inline:auto; background:transparent; }
.tn-cjson-page .cjson-ad--top { margin-top:54px; margin-bottom:18px; }
.tn-cjson-page .cjson-ad--bottom { margin-top:16px; margin-bottom:26px; }
.tn-cjson-page .cjson-ad ins { max-width:100%; }
@media (max-width:720px) { .tn-cjson-page .cjson-ad--top { margin-top:48px; } }