/* =========================================================================
   QuickDeveloperTools — shared tool-page component library
   Every dedicated tool page (JSON, XML, JWT, Base64, URL, GUID, String
   Tools, ...) is built from these classes so buttons, type, spacing and
   color read as one consistent, professional product instead of one-off
   pages. Extends the tokens defined in site.css.
   ========================================================================= */

.tool-page{color:var(--text);margin:0 auto 32px;max-width:none;width:min(calc(100% - 36px),var(--qdt-shell))}

/* ---------- hero ---------- */
.tool-hero{
  align-items:center;background:
    radial-gradient(circle at 10% 15%,rgba(14,140,127,.14),transparent 30%),
    radial-gradient(circle at 92% 12%,rgba(185,121,31,.18),transparent 32%),
    linear-gradient(120deg,var(--surface) 0%,var(--surface-soft) 100%);
  border:1px solid var(--line);border-radius:var(--radius);display:grid;
  gap:18px;grid-template-columns:auto 1fr auto;min-height:130px;overflow:hidden;
  padding:16px 30px;position:relative
}
.tool-hero::before{
  background-image:radial-gradient(rgba(14,140,127,.35) 1px,transparent 1px);background-size:18px 18px;
  content:"";inset:0;opacity:.35;position:absolute
}
.tool-hero>*{position:relative}
.tool-hero-icon{
  align-items:center;background:linear-gradient(135deg,var(--accent),var(--primary));border-radius:16px;
  box-shadow:0 12px 26px rgba(185,121,31,.28);color:#fff;display:flex;font:800 30px/1 var(--font-mono);
  height:76px;justify-content:center;width:76px
}
.tool-hero-icon.is-secondary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));font-size:24px}
.tool-hero-copy{max-width:720px}
.tool-badge{
  background:var(--accent-tint);border:1px solid var(--accent-line);border-radius:999px;color:var(--accent-dark);
  display:inline-block;font:700 10.5px var(--font-mono);letter-spacing:.08em;margin-bottom:10px;padding:5px 12px;text-transform:uppercase
}
.tool-hero h1{font-family:var(--font-display);font-size:clamp(24px,2.6vw,32px);letter-spacing:-.5px;line-height:1.16;margin:0 0 6px}
.tool-hero p{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0;max-width:640px}

/* ---------- workbench shell ---------- */
.tool-workbench{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-top:14px;overflow:hidden;position:relative}

/* ---------- toolbar / action bar ---------- */
.tool-toolbar{align-items:center;border-bottom:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:8px;padding:13px}
.tool-toolbar-spacer{flex:1}
.tool-btn{
  align-items:center;background:var(--surface-soft);border:1px solid var(--line);border-radius:7px;color:var(--text);
  cursor:pointer;display:inline-flex;font:600 12.5px var(--font-body);gap:7px;justify-content:center;
  min-height:38px;padding:8px 13px;transition:.15s ease;white-space:nowrap
}
.tool-btn:hover:not(:disabled){border-color:var(--accent-line);color:var(--accent-dark);transform:translateY(-1px)}
.tool-btn:disabled{cursor:not-allowed;opacity:.45;transform:none}
.tool-btn b{font-family:var(--font-mono);font-size:13px;font-weight:700}
.tool-btn.is-primary{background:var(--primary);border-color:var(--primary);color:#FFF8EC}
.tool-btn.is-primary:hover:not(:disabled){background:var(--primary-dark);border-color:var(--primary-dark);color:#FFF8EC}
.tool-btn.is-accent{background:var(--accent);border-color:var(--accent);color:#F4FFFC}
.tool-btn.is-accent:hover:not(:disabled){background:var(--accent-dark);border-color:var(--accent-dark);color:#F4FFFC}
.tool-btn.is-success{background:#EAF8EF;border-color:#9BDDB1;color:#0C7133}
.tool-btn.is-success:hover:not(:disabled){background:#DBF2E3;color:#0C7133}
.tool-btn.is-danger{color:var(--danger)}
.tool-btn.is-danger:hover:not(:disabled){background:rgba(193,59,50,.08);border-color:rgba(193,59,50,.35);color:var(--danger)}
.tool-btn.is-file{cursor:pointer;position:relative}
.tool-btn.is-file input{cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}
.tool-check{align-items:center;color:var(--muted);display:inline-flex;font-size:12px;gap:6px}
.tool-select{background:var(--surface);border:1px solid var(--line);border-radius:6px;color:var(--text);padding:7px 8px}

/* ---------- status banner ---------- */
.tool-status-slot{min-height:40px;padding:0 13px}

.tool-privacy{
  align-items:center;background:#EFFBF3;border:1px solid #9DDDB1;border-radius:6px;color:#185C32;
  display:flex;gap:12px;margin:11px 13px 0;padding:10px 13px
}
.tool-privacy p{font-size:11.5px;margin:0}
.tool-privacy strong{margin-left:auto}

/* ---------- content padding wrapper ---------- */
.tool-body{padding:13px}

/* ---------- split editor grid (input / output) ---------- */
.tool-split{display:grid;gap:0;grid-template-columns:1fr 1fr;height:clamp(360px,62vh,580px);position:relative}
.tool-split.has-handle{grid-template-columns:minmax(0,var(--split,50%)) 8px minmax(0,1fr)}
.tool-editor-panel{border:1px solid var(--line);display:flex;flex-direction:column;min-height:0;min-width:0}
.tool-editor-panel+.tool-editor-panel{border-left:0}
.tool-editor-panel>header{align-items:center;background:var(--surface-soft);display:flex;flex:0 0 auto;justify-content:space-between;min-height:44px;padding:8px 12px}
.tool-editor-panel h2{align-items:center;display:flex;font-family:var(--font-display);font-size:13.5px;gap:8px;margin:0}
.tool-editor-panel>header>span{color:var(--muted);font-size:10.5px}
.tool-panel-icon{
  align-items:center;background:var(--accent);border-radius:5px;color:#fff;display:inline-flex;
  font:700 11px/1 var(--font-mono);height:26px;justify-content:center;width:28px
}
.tool-panel-icon.is-primary{background:var(--primary)}
.tool-editor-shell{display:flex;flex:1;min-height:0;overflow:hidden}
.tool-editor-shell textarea{
  background:var(--surface);border:0;color:var(--text);flex:1;font:13px/1.6 var(--font-mono);
  min-height:0;outline:0;overflow:auto;padding:13px;resize:none;width:100%
}
.tool-editor-shell textarea::placeholder{color:var(--faint)}
.tool-line-numbers{
  background:var(--surface-soft);border-right:1px solid var(--line-soft);color:var(--faint);
  flex:0 0 auto;font:11.5px/1.75 var(--font-mono);margin:0;min-width:42px;overflow:hidden;padding:13px 8px;text-align:right
}
.tool-editor-panel>footer{
  background:var(--surface-soft);border-top:1px solid var(--line);color:var(--faint);display:flex;
  flex:0 0 auto;font-size:10px;justify-content:space-between;min-height:24px;padding:5px 10px
}
.tool-split-handle{
  align-self:center;background:var(--primary);border:0;border-radius:50%;box-shadow:0 4px 12px rgba(185,121,31,.3);
  color:#fff;cursor:col-resize;font-size:15px;height:30px;margin-inline:-12px;position:relative;width:30px;z-index:5
}
@media(max-width:860px){
  .tool-split,.tool-split.has-handle{display:block;height:auto}
  .tool-editor-panel{height:360px;margin-bottom:10px}
  .tool-editor-panel+.tool-editor-panel{border-left:1px solid var(--line)}
  .tool-split-handle{display:none}
}

/* ---------- simple two-column field layout (encoders, calculators) ---------- */
.tool-fields{display:grid;gap:14px;grid-template-columns:1fr 1fr;padding:13px}
.tool-fields label{display:grid;gap:7px}
.tool-fields label>span{font-size:12px;font-weight:700}
.tool-fields textarea,.tool-output-box{
  background:var(--surface-soft);border:1px solid var(--line);border-radius:7px;color:var(--text);
  font:13px/1.6 var(--font-mono);min-height:230px;padding:12px;resize:vertical;width:100%
}
.tool-fields textarea:focus{border-color:var(--accent);outline:0}
@media(max-width:760px){.tool-fields{grid-template-columns:1fr}}
.tool-fields.is-single{grid-template-columns:1fr}
.tool-fields.is-single textarea{min-height:120px}
.tool-code-columns{display:grid;gap:0;grid-template-columns:1fr 1fr;margin:0 13px 13px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tool-code-columns>div{border-left:1px solid var(--line)}
.tool-code-columns>div:first-child{border-left:0}
.tool-code-columns h3{align-items:center;background:var(--surface-soft);border-bottom:1px solid var(--line);display:flex;font-family:var(--font-display);font-size:12.5px;gap:8px;margin:0;min-height:38px;padding:0 12px}
.tool-code-columns .tool-code-block{border:0;border-radius:0;margin:0;max-height:280px}
@media(max-width:760px){.tool-code-columns{grid-template-columns:1fr}.tool-code-columns>div+div{border-left:0;border-top:1px solid var(--line)}}

/* ---------- search row (key/value style search used by JSON + XML) ---------- */
.tool-search-row{
  align-items:end;border-block:1px solid var(--line);display:grid;gap:10px;
  grid-template-columns:minmax(170px,.7fr) minmax(240px,1.3fr) minmax(380px,1.6fr);padding:12px
}
.tool-search-row .tool-field{display:grid;gap:5px}
.tool-search-row .tool-field>span{font-size:11.5px;font-weight:700}
.tool-search-row input,.tool-search-row select{
  background:var(--surface-soft);border:1px solid var(--line);border-radius:6px;color:var(--text);
  height:36px;padding:6px 10px;width:100%
}
.tool-search-row small{color:var(--faint);font-size:10px}
.tool-search-actions{align-items:center;display:grid;gap:6px;grid-template-columns:auto 1fr auto}
.tool-search-actions>div{display:flex;gap:7px}
.tool-search-actions output{background:var(--surface-soft);border:1px solid var(--line);border-radius:6px;font-size:11px;min-width:96px;padding:9px}
@media(max-width:1080px){.tool-search-row{grid-template-columns:1fr 1fr}.tool-search-actions{grid-column:1/-1}}
@media(max-width:620px){.tool-search-row{grid-template-columns:1fr}.tool-search-actions{grid-template-columns:1fr}.tool-search-actions>div{display:grid;grid-template-columns:1fr 1fr}}

/* ---------- tree view (JSON / XML) ---------- */
.tool-tree-host{background:var(--surface);flex:1;font:12.5px/1.65 var(--font-mono);min-height:0;overflow:auto;padding:11px}
.tool-empty{color:var(--muted);padding:10px}
.tool-node{margin-left:15px}
.tool-node:first-child{margin-left:0}
.tool-node-row{align-items:flex-start;display:flex;gap:5px;min-height:22px;padding:1px 4px}
.tool-node-row.is-match{background:#FFF2AE;border-radius:3px}
.tool-node-toggle{
  background:var(--surface-raised);border:1px solid var(--line);color:var(--text);cursor:pointer;
  font:11px/1 monospace;height:17px;margin-top:2px;padding:0;width:17px
}
.tool-node-toggle.is-leaf{background:transparent;border-color:transparent;cursor:default}
.tool-key{color:#C23F5A;font-weight:700}
.tool-attr{color:var(--accent-dark)}
.tool-string{color:#0E8C58}
.tool-number{color:#1557D6}
.tool-boolean{color:#7B34D4}
.tool-null{color:var(--primary);font-weight:700}
.tool-meta{color:var(--muted)}

/* ---------- view toggle (tree/text) ---------- */
.tool-view-actions{display:flex}
.tool-view-btn{background:var(--surface-soft);border:1px solid var(--line);color:var(--text);cursor:pointer;font-size:11px;min-height:30px;padding:6px 10px}
.tool-view-btn:first-child{border-radius:6px 0 0 6px}
.tool-view-btn:last-child{border-radius:0 6px 6px 0}
.tool-view-btn.is-active{background:#EAF8EF;border-color:#8BD3A1;color:#087C35}

/* ---------- chip-style option toggles (GUID generator etc.) ---------- */
.tool-options{display:flex;flex-wrap:wrap;gap:10px;padding:13px}
.tool-option-chip{
  align-items:center;background:var(--surface-soft);border:1px solid var(--line);border-radius:999px;
  color:var(--muted);cursor:pointer;display:inline-flex;font-size:12px;font-weight:600;gap:7px;padding:8px 13px
}
.tool-option-chip input{accent-color:var(--primary)}
.tool-option-chip:has(input:checked){background:var(--primary-tint);border-color:var(--primary-line);color:var(--primary-dark)}
.tool-count-field{align-items:center;display:inline-flex;gap:8px}
.tool-count-field input{
  background:var(--surface);border:1px solid var(--line);border-radius:6px;color:var(--text);
  font:600 13px var(--font-mono);height:38px;padding:0 10px;width:88px
}

/* ---------- generated-list output (GUID, hash, etc.) ---------- */
.tool-result-list{border-top:1px solid var(--line);max-height:360px;overflow:auto}
.tool-result-row{
  align-items:center;border-bottom:1px solid var(--line-soft);display:flex;font:13px/1.5 var(--font-mono);
  gap:10px;justify-content:space-between;padding:9px 14px
}
.tool-result-row:hover{background:var(--surface-soft)}
.tool-result-row button{
  background:transparent;border:1px solid var(--line);border-radius:5px;color:var(--muted);cursor:pointer;
  flex:0 0 auto;font:600 10.5px var(--font-body);padding:5px 9px
}
.tool-result-row button:hover{border-color:var(--accent-line);color:var(--accent-dark)}

/* ---------- claims / summary key-value grid (JWT) ---------- */
.tool-summary-grid{display:grid;gap:1px;background:var(--line-soft);grid-template-columns:repeat(3,1fr);margin:0 13px 13px;border:1px solid var(--line-soft);border-radius:8px;overflow:hidden}
.tool-summary-cell{background:var(--surface);padding:12px 14px}
.tool-summary-cell b{color:var(--faint);display:block;font:700 9.5px var(--font-mono);letter-spacing:.08em;margin-bottom:5px;text-transform:uppercase}
.tool-summary-cell span{color:var(--text);font-size:13px;font-weight:600;word-break:break-word}
.tool-summary-cell.is-active span{color:var(--success)}
.tool-summary-cell.is-expired span{color:var(--danger)}
@media(max-width:760px){.tool-summary-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.tool-summary-grid{grid-template-columns:1fr}}

.tool-code-block{
  background:var(--surface-soft);border:1px solid var(--line);border-radius:7px;color:var(--text);
  font:12.5px/1.6 var(--font-mono);margin:0 13px 13px;max-height:320px;overflow:auto;padding:13px;white-space:pre-wrap;word-break:break-word
}
.tool-code-block .tool-key{color:#C23F5A}
.tool-code-block .tool-string{color:#0E8C58}
.tool-code-block .tool-number{color:#1557D6}
.tool-code-block .tool-boolean{color:#7B34D4}
.tool-code-block .tool-null{color:var(--primary)}
.tool-code-muted{color:var(--faint)}

/* ---------- character/word counter stat strip (String Tools) ---------- */
.tool-stat-strip{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:8px;grid-template-columns:repeat(5,1fr);margin:0 13px 13px;overflow:hidden}
.tool-stat{background:var(--surface);padding:13px 10px;text-align:center}
.tool-stat b{color:var(--primary);display:block;font:700 20px var(--font-display)}
.tool-stat span{color:var(--muted);font-size:10px;letter-spacing:.03em;text-transform:uppercase}
@media(max-width:760px){.tool-stat-strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.tool-stat-strip{grid-template-columns:repeat(2,1fr)}}

/* ---------- content sections beneath the workbench (feature grid / guide / faq) ---------- */
.tool-content-section,.tool-guide,.tool-faq{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-top:16px;padding:26px}
.tool-kicker{color:var(--accent-dark);font:700 10.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.tool-content-section h2,.tool-guide h2,.tool-faq h2{font-family:var(--font-display);font-size:22px;margin:7px 0 8px}
.tool-content-section>div:first-child>p{color:var(--muted);line-height:1.7;max-width:900px}
.tool-feature-grid{display:grid;gap:12px;grid-template-columns:repeat(4,1fr);margin-top:18px}
.tool-feature-grid article{border:1px solid var(--line);border-radius:9px;padding:15px}
.tool-feature-grid b{color:var(--accent);font-size:22px}
.tool-feature-grid h3{font-family:var(--font-display);font-size:14px;margin:8px 0 3px}
.tool-feature-grid p{color:var(--muted);font-size:12px;margin:0}
.tool-guide-grid{display:grid;gap:13px;grid-template-columns:repeat(3,1fr);margin-top:16px}
.tool-guide-grid article{background:var(--surface-soft);border-left:3px solid var(--primary);padding:16px}
.tool-guide-grid span{align-items:center;background:var(--primary);border-radius:50%;color:#fff;display:flex;font-weight:700;height:26px;justify-content:center;width:26px}
.tool-guide-grid h3{font-family:var(--font-display);font-size:14px;margin:10px 0 4px}
.tool-guide-grid p{color:var(--muted);font-size:12px;line-height:1.6;margin:0}
.tool-related{color:var(--muted);font-size:12px;line-height:1.7;margin:10px 0 0}
.tool-related a{color:var(--primary);font-weight:700}
.tool-related a:hover{color:var(--primary-dark)}
.tool-code-snippet{background:var(--surface-soft);border:1px solid var(--line);border-radius:7px;color:var(--text);font:12px/1.6 var(--font-mono);margin-top:10px;padding:13px;white-space:pre-wrap}
.tool-faq-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:16px}
.tool-faq-grid details{background:var(--surface-soft);border:1px solid var(--line);border-radius:7px;padding:13px}
.tool-faq-grid summary{cursor:pointer;font-family:var(--font-display);font-size:13px;font-weight:700}
.tool-faq-grid p{color:var(--muted);font-size:12px;line-height:1.65;margin:10px 0 0}

@media(max-width:1080px){.tool-feature-grid{grid-template-columns:1fr 1fr}}
@media(max-width:820px){
  .tool-page{width:min(calc(100% - 24px),var(--qdt-shell))}
  .tool-hero{grid-template-columns:1fr;padding:20px;text-align:center}
  .tool-hero-icon{margin:0 auto}
  .tool-guide-grid,.tool-faq-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .tool-toolbar-spacer{display:none}
  .tool-btn{flex:1}
  .tool-toolbar label.tool-btn{flex:1}
  .tool-feature-grid{grid-template-columns:1fr}
  .tool-content-section,.tool-guide,.tool-faq{padding:18px}
}

html[data-theme="paper"] .tool-hero{background:linear-gradient(120deg,#FFFAF0,#FFF 58%,#F5EAD3)}
html[data-theme="contrast"] .tool-workbench,html[data-theme="contrast"] .tool-content-section,
html[data-theme="contrast"] .tool-guide,html[data-theme="contrast"] .tool-faq{border-color:#5D5D5D}
html[data-theme="contrast"] .tool-hero{background:#101010;border-color:#777}
html[data-theme="contrast"] .tool-feature-grid article,html[data-theme="contrast"] .tool-faq-grid details{background:#181818}