/* Developer tools (XML/JSON converters, JSON path finder, size calculator, HTML compare).
   Loaded only by those pages via $page['head']. Uses the tokens from style.css. */
.jt{max-width:80rem;margin:0 auto}
.jt-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:960px){ .jt-grid{grid-template-columns:1fr 1fr} }
.jt-pane{display:flex;flex-direction:column;min-width:0}
.jt-bar-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}
.jt-bar-top label,.jt-label{font-weight:600;font-size:.9375rem;color:var(--gray-900)}
.jt-btns{display:flex;flex-wrap:wrap;gap:.375rem}
.jt-btns .btn{padding:.3125rem .75rem;font-size:.8125rem}
.jt-file{position:relative;overflow:hidden}
.jt-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.jt textarea{width:100%;min-height:22rem;resize:vertical;padding:.875rem 1rem;border:1px solid var(--gray-300);
  border-radius:var(--radius-xl);background:#fff;color:var(--gray-900);font:13px/1.55 var(--font-mono);tab-size:2;white-space:pre;overflow:auto}
.jt textarea:focus,.jt input[type=text]:focus,.jt select:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-100)}
.jt textarea[readonly]{background:var(--gray-50)}
.jt-opts{display:flex;flex-wrap:wrap;align-items:center;gap:.625rem 1.25rem;margin:1rem 0;padding:.875rem 1rem;
  border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--gray-50);font-size:.875rem;color:var(--gray-700)}
.jt-opts label{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer}
.jt-opts input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--primary-700)}
.jt-opts input[type=text],.jt-opts select,.jt input.jt-text{padding:.375rem .625rem;border:1px solid var(--gray-300);border-radius:var(--radius-md);
  background:#fff;font:inherit;color:var(--gray-900)}
.jt-opts input[type=text]{width:6.5rem;font-family:var(--font-mono)}
.jt-opts input[name=prefix]{width:3.25rem;text-align:center}
.jt-run{display:flex;flex-wrap:wrap;align-items:center;gap:.625rem;margin-left:auto}
.jt-status{font-size:.8125rem;color:var(--gray-500);margin-top:.5rem;min-height:1.2em}
.jt-err{margin-top:1rem;padding:1rem 1.25rem;border:1px solid #fecaca;border-left:4px solid #b91c1c;border-radius:var(--radius-xl);
  background:#fef2f2;color:#7f1d1d;font-size:.9375rem;overflow-wrap:anywhere}
.jt-valid{margin-top:1rem;padding:.875rem 1.25rem;border:1px solid var(--green-100);border-left:4px solid var(--green-600);
  border-radius:var(--radius-xl);background:var(--green-50);color:var(--green-800);font-size:.9375rem}
.jt-snip{margin:.625rem 0 0;padding:.625rem .75rem;background:#fff;border:1px solid #fecaca;border-radius:var(--radius-md);
  font:12.5px/1.5 var(--font-mono);color:var(--gray-900);overflow-x:auto;white-space:pre}
.jt-private{display:flex;gap:.5rem;align-items:flex-start;margin-top:1rem;font-size:.8125rem;color:var(--gray-500)}
.jt-private svg{flex:none;margin-top:.1rem;color:var(--green-600)}
.jt-note-sm{font-size:.8125rem;color:var(--gray-500);margin-top:.5rem}
.jt-h3{font-size:1.125rem;margin:2rem 0 .75rem}
.jt-meta{font-family:var(--font-sans);font-size:.75rem;color:var(--gray-500);font-weight:400;margin-left:.375rem}
.jt code,.jt-prose code,.hero .lead code,.faq code,.why-card code{font-family:var(--font-mono);font-size:.875em;background:var(--gray-100);padding:.0625rem .3125rem;border-radius:var(--radius-sm)}

/* size calculator */
.jt-stats{display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1.25rem}
@media(min-width:768px){ .jt-stats{grid-template-columns:repeat(4,minmax(0,1fr))} }
.jt-stat{border:1px solid var(--line);border-radius:var(--radius-xl);padding:1rem;background:#fff;min-width:0}
.jt-stat span{display:block;font-size:.8125rem;color:var(--gray-500)}
.jt-stat b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.5rem;margin-top:.25rem;color:var(--gray-900)}
.jt-stat small{display:block;font-size:.75rem;color:var(--gray-500);margin-top:.25rem;overflow-wrap:anywhere}
.jt-stat:first-child{border-color:var(--primary-200);background:var(--primary-50)}
.jt-table td{vertical-align:middle;overflow-wrap:anywhere}
.jt-bar{display:inline-block;width:5rem;height:.5rem;border-radius:999px;background:var(--gray-100);vertical-align:middle;overflow:hidden}
.jt-bar i{display:block;height:100%;background:var(--primary-600);border-radius:999px}

/* path finder */
.jt-tree{min-height:22rem;max-height:36rem;overflow:auto;padding:.75rem 1rem;border:1px solid var(--gray-300);border-radius:var(--radius-xl);
  background:#fff;font:13px/1.7 var(--font-mono)}
.jt-tree:empty::before{content:"Paste JSON on the left and press Show tree. The tree appears here.";color:var(--gray-400);font-family:var(--font-sans)}
.jt-tree ul{list-style:none;margin:0;padding-left:1.125rem;border-left:1px dashed var(--gray-200)}
.jt-tree ul.jt-tree-root{padding-left:0;border-left:0}
.jt-tree summary{cursor:pointer;list-style:none;white-space:nowrap}
.jt-tree summary::-webkit-details-marker{display:none}
.jt-tree summary::before{content:"▸";display:inline-block;width:1rem;color:var(--gray-400);transition:transform var(--t)}
.jt-tree details[open]>summary::before{transform:rotate(90deg)}
.jt-tree .jt-leaf{padding-left:1rem;white-space:nowrap}
.jt-node{cursor:pointer;border-radius:var(--radius-sm);padding:0 .25rem}
.jt-node:hover,.jt-node:focus{background:var(--primary-50);outline:none}
.jt-node.hit{background:#fef9c3}
.jt-node.on{background:var(--primary-100);box-shadow:0 0 0 1px var(--primary-300)}
.jt-key{color:var(--primary-800)}
.jt-idx{color:var(--gray-500)}
.jt-rootk{color:var(--gray-900);font-weight:700}
.jt-colon{color:var(--gray-400)}
.jt-string{color:#166534}.jt-number{color:#9a3412}.jt-boolean{color:#7c3aed}.jt-null{color:var(--gray-500);font-style:italic}
.jt-sel{margin-top:1rem;padding:1rem 1.25rem;border:1px solid var(--primary-200);border-radius:var(--radius-xl);background:var(--primary-50)}
.jt-prow{display:grid;grid-template-columns:9.5rem minmax(0,1fr) auto;gap:.5rem;align-items:center;margin-top:.5rem}
.jt-prow:first-of-type{margin-top:0}
.jt-prow span{font-size:.8125rem;color:var(--gray-600)}
.jt-prow input{width:100%;min-width:0;padding:.375rem .625rem;border:1px solid var(--gray-300);border-radius:var(--radius-md);background:#fff;font:13px var(--font-mono)}
.jt-prow .btn{padding:.3125rem .75rem;font-size:.8125rem}
.jt-pval{margin:.75rem 0 0;max-height:12rem;overflow:auto;padding:.625rem .75rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);font:12.5px/1.5 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:560px){ .jt-prow{grid-template-columns:1fr auto} .jt-prow span{grid-column:1/-1} }
.jt-query{margin-top:1.5rem;padding:1.25rem;border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--gray-50)}
.jt-qrow{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.jt-qrow input{flex:1 1 16rem;min-width:0;padding:.625rem .875rem;border:1px solid var(--gray-300);border-radius:var(--radius-lg);background:#fff;font:14px var(--font-mono)}
.jt-qex{margin-top:.625rem;font-size:.8125rem;color:var(--gray-500);display:flex;flex-wrap:wrap;gap:.375rem;align-items:center}
.jt-q-ex{font:12px var(--font-mono);padding:.1875rem .5rem;border:1px solid var(--gray-300);border-radius:999px;background:#fff;color:var(--gray-700);cursor:pointer}
.jt-q-ex:hover{border-color:var(--primary-400);color:var(--primary-800)}
.jt-hits{margin:.5rem 0 0;padding-left:1.5rem;font-size:.8125rem;max-height:20rem;overflow:auto}
.jt-hits li{margin-top:.25rem;overflow-wrap:anywhere}
.jt-hit{border:0;background:none;padding:0;cursor:pointer;color:var(--primary-700)}
.jt-hit:hover code{background:var(--primary-100)}
.jt-hits .jt-v{color:var(--gray-600);font-family:var(--font-mono)}

/* compare */
.jt-sum{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1.25rem;font-size:.9375rem}
.jt-pill{display:inline-flex;padding:.1875rem .625rem;border-radius:999px;font-size:.8125rem;font-weight:600}
.jt-pill-add{background:#dcfce7;color:#166534}.jt-pill-del{background:#fee2e2;color:#991b1b}.jt-pill-chg{background:#fef3c7;color:#92400e}
.jt-diff{margin-top:.75rem;border:1px solid var(--gray-300);border-radius:var(--radius-xl);overflow:auto;max-height:40rem;background:#fff}
.jt-difftab{width:100%;border-collapse:collapse;table-layout:fixed;font:12.5px/1.55 var(--font-mono)}
.jt-difftab col.n{width:3rem}
.jt-difftab td{padding:0 .5rem;vertical-align:top;white-space:pre-wrap;overflow-wrap:anywhere}
.jt-difftab td.n{color:var(--gray-400);text-align:right;background:var(--gray-50);user-select:none;border-right:1px solid var(--line)}
.jt-difftab td.c+td.n{border-left:1px solid var(--gray-300)}
.jt-difftab td.del{background:#fef2f2}.jt-difftab td.add{background:#f0fdf4}.jt-difftab td.empty{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 4px,#f3f4f6 4px,#f3f4f6 8px)}
.jt-difftab del{background:#fecaca;text-decoration:none;border-radius:2px}
.jt-difftab ins{background:#bbf7d0;text-decoration:none;border-radius:2px}
.jt-difftab tr.gap td{text-align:center;color:var(--gray-400);background:var(--gray-50)}
.jt textarea.jt-short{min-height:16rem}

/* prose + related */
.jt-prose{max-width:48rem}
.jt-prose h3{font-size:1.25rem;margin-top:2rem}
.jt-prose p,.jt-prose li{color:var(--gray-600);line-height:1.7}
.jt-prose p{margin-top:.75rem}
.jt-prose ul{margin-top:.75rem;padding-left:1.25rem}
.jt-prose pre{margin-top:.75rem;padding:.875rem 1rem;background:var(--gray-50);border:1px solid var(--line);border-radius:var(--radius-lg);font:12.5px/1.55 var(--font-mono);overflow-x:auto}
.jt-related{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));margin-top:1.5rem}
.jt-related a{display:block;padding:1rem 1.125rem;border:1px solid var(--line);border-radius:var(--radius-xl);background:#fff;transition:border-color var(--t),box-shadow var(--t)}
.jt-related a:hover{border-color:var(--primary-300);box-shadow:var(--shadow-sm)}
.jt-related b{display:block;font-weight:600;color:var(--gray-900)}
.jt-related span{display:block;font-size:.8125rem;color:var(--gray-500);margin-top:.25rem}
.jt-related a.on{border-color:var(--primary-300);background:var(--primary-50)}