/**
 * JWW Developer Tools — shared stylesheet for all tool pages.
 * Scoped under .jwwdt so it cannot leak into theme styles.
 * Light/dark via CSS variables + prefers-color-scheme.
 * Fixed min-heights on the panels prevent layout shift (CLS).
 */
.jwwdt {
  --jwwdt-bg: #ffffff;
  --jwwdt-panel: #f7f8fa;
  --jwwdt-border: #d7dbe0;
  --jwwdt-text: #1c2733;
  --jwwdt-muted: #5b6774;
  --jwwdt-accent: #0f62d5;
  --jwwdt-accent-text: #ffffff;
  --jwwdt-ok: #0a7d33;
  --jwwdt-bad: #c22f2f;
  --jwwdt-warn-bg: #fff7e0;
  --jwwdt-warn-border: #e5c565;
  --jwwdt-err-bg: #fdecec;
  color: var(--jwwdt-text);
  margin: 0 0 1.5em;
}
@media (prefers-color-scheme: dark) {
  .jwwdt {
    --jwwdt-bg: #161b22;
    --jwwdt-panel: #1e242c;
    --jwwdt-border: #3a4350;
    --jwwdt-text: #e8edf2;
    --jwwdt-muted: #9aa7b4;
    --jwwdt-accent: #4f8ff0;
    --jwwdt-accent-text: #0b1420;
    --jwwdt-ok: #4ec27b;
    --jwwdt-bad: #ff7b7b;
    --jwwdt-warn-bg: #33301e;
    --jwwdt-warn-border: #6b5d2a;
    --jwwdt-err-bg: #3a2225;
  }
}

.jwwdt * { box-sizing: border-box; }

.jwwdt-quick-answer {
  font-size: 1.05em;
  margin: 0 0 1em;
}

.jwwdt-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 782px) {
  .jwwdt-panels { grid-template-columns: 1fr 1fr; }
  .jwwdt-panels.has-two-inputs { grid-template-columns: 1fr 1fr; }
}

.jwwdt-panel { min-width: 0; }

.jwwdt-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
}
.jwwdt-label {
  font-weight: 700;
  font-size: .95em;
}
.jwwdt-stats {
  color: var(--jwwdt-muted);
  font-size: .8em;
  min-height: 1.2em; /* reserved: no CLS when stats appear */
}

.jwwdt textarea {
  width: 100%;
  min-height: 300px;
  padding: .75rem;
  border: 1px solid var(--jwwdt-border);
  border-radius: 8px;
  background: var(--jwwdt-panel);
  color: var(--jwwdt-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .875em;
  line-height: 1.5;
  resize: vertical;
  tab-size: 2;
}
.jwwdt textarea:focus-visible {
  outline: 2px solid var(--jwwdt-accent);
  outline-offset: 1px;
}

.jwwdt-live { font-size: .8em; min-height: 1.2em; display: inline-block; }
.jwwdt-live.is-ok { color: var(--jwwdt-ok); }
.jwwdt-live.is-bad { color: var(--jwwdt-bad); }

.jwwdt-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0;
  min-height: 2.5rem; /* reserved */
}
.jwwdt button {
  appearance: none;
  border: 1px solid var(--jwwdt-border);
  border-radius: 8px;
  background: var(--jwwdt-panel);
  color: var(--jwwdt-text);
  font: inherit;
  font-size: .9em;
  padding: .5rem .9rem;
  cursor: pointer;
}
.jwwdt button:hover { border-color: var(--jwwdt-accent); }
.jwwdt button:focus-visible {
  outline: 2px solid var(--jwwdt-accent);
  outline-offset: 1px;
}
.jwwdt button:disabled { opacity: .45; cursor: not-allowed; }
.jwwdt .jwwdt-btn-run {
  background: var(--jwwdt-accent);
  border-color: var(--jwwdt-accent);
  color: var(--jwwdt-accent-text);
  font-weight: 700;
}

.jwwdt-options {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  padding: .75rem;
  margin: 0 0 1rem;
  border: 1px solid var(--jwwdt-border);
  border-radius: 8px;
  background: var(--jwwdt-panel);
}
.jwwdt-options[hidden] { display: none; }
.jwwdt-opt { font-size: .875em; display: inline-flex; align-items: center; gap: .35rem; }
.jwwdt-opt select, .jwwdt-opt input[type="text"] {
  border: 1px solid var(--jwwdt-border);
  border-radius: 6px;
  background: var(--jwwdt-bg);
  color: var(--jwwdt-text);
  padding: .25rem .4rem;
  font: inherit;
  font-size: .95em;
}

.jwwdt-error {
  background: var(--jwwdt-err-bg);
  border: 1px solid var(--jwwdt-bad);
  border-radius: 8px;
  color: var(--jwwdt-text);
  padding: .7rem .9rem;
  margin: 0 0 1rem;
  font-size: .9em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.jwwdt-warnings {
  background: var(--jwwdt-warn-bg);
  border: 1px solid var(--jwwdt-warn-border);
  border-radius: 8px;
  padding: .5rem .9rem;
  margin: 0 0 1rem;
  font-size: .875em;
}
.jwwdt-warnings p { margin: .3rem 0; }
.jwwdt-error[hidden], .jwwdt-warnings[hidden] { display: none; }

.jwwdt-status {
  color: var(--jwwdt-muted);
  font-size: .82em;
  min-height: 1.3em; /* reserved */
  margin: .25rem 0 0;
}

.jwwdt-privacy {
  color: var(--jwwdt-muted);
  font-size: .85em;
  margin: .75rem 0 0;
}
.jwwdt-privacy::before { content: "🔒 "; }

/* Interactive path tree (JSONPath Finder) */
.jwwdt-tree { margin-top: 1rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; }
.jwwdt-tree:empty { display: none; }
.jwwdt-tree details { padding-left: 1rem; }
.jwwdt-tree summary { cursor: pointer; }
.jwwdt-tree .jwwdt-node {
  cursor: pointer;
  border-radius: 4px;
  padding: 0 .25rem;
}
.jwwdt-tree .jwwdt-node:hover,
.jwwdt-tree .jwwdt-node:focus-visible { background: var(--jwwdt-panel); outline: 1px solid var(--jwwdt-accent); }
.jwwdt-tree .jwwdt-node .t { color: var(--jwwdt-muted); }

/* How-to + FAQ sections (registry-driven; schema mirrors these) */
.jwwdt-howto ol { padding-left: 1.4em; }
.jwwdt-howto li { margin: .4em 0; }
.jwwdt-faq {
  border: 1px solid #d7dbe0;
  border-radius: 10px;
  margin: .6em 0;
  padding: .1em .9em;
  background: #f7f8fa;
}
@media (prefers-color-scheme: dark) {
  .jwwdt-faq { border-color: #3a4350; background: #1e242c; }
}
.jwwdt-faq summary { cursor: pointer; font-weight: 700; padding: .6em 0; }
.jwwdt-faq summary:focus-visible { outline: 2px solid #0f62d5; outline-offset: 1px; }
.jwwdt-faq p { margin: 0 0 .8em; }

/* ---------------- Generator layout (controls + preview + code) ---------------- */
.jwwdt-gen-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 781px) {
  .jwwdt-gen-layout { grid-template-columns: 1fr; }
}
.jwwdt-gen-controls {
  border: 1px solid var(--jwwdt-border);
  border-radius: 10px;
  background: var(--jwwdt-panel);
  padding: .9rem;
  display: grid;
  gap: .8rem;
  min-height: 200px; /* reserved */
  margin: 0;
}
.jwwdt-gen-controls legend { padding: 0 .3rem; }
.jwwdt-gc { display: grid; gap: .3rem; font-size: .875em; }
.jwwdt-gc-label { font-weight: 600; }
.jwwdt-gc input[type="range"] { width: 100%; accent-color: var(--jwwdt-accent); }
.jwwdt-gc-val { color: var(--jwwdt-muted); font-size: .85em; }
.jwwdt-gc-color { grid-template-columns: auto 1fr; align-items: center; }
.jwwdt-gc-color .jwwdt-gc-label { grid-column: 1 / -1; }
.jwwdt-gc input[type="color"] {
  width: 48px; height: 34px; padding: 2px;
  border: 1px solid var(--jwwdt-border); border-radius: 6px;
  background: var(--jwwdt-bg); cursor: pointer;
}
.jwwdt-gc-hex {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  width: 6.5em;
}
.jwwdt-gc select, .jwwdt-gc input[type="text"], .jwwdt-gc input[type="number"], .jwwdt-gc-hex {
  border: 1px solid var(--jwwdt-border); border-radius: 6px;
  background: var(--jwwdt-bg); color: var(--jwwdt-text);
  padding: .3rem .45rem; font: inherit; font-size: .95em;
}
.jwwdt-gc-checkbox { grid-template-columns: auto 1fr; align-items: center; gap: .5rem; }
.jwwdt-gen-main { display: grid; gap: 1rem; min-width: 0; }
.jwwdt-preview-wrap { min-width: 0; }
.jwwdt-stage {
  min-height: 260px; /* reserved: no CLS */
  border: 1px solid var(--jwwdt-border);
  border-radius: 10px;
  background: #f4f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;
  padding: 1.25rem;
  overflow: auto;
  transition: background .2s;
}
.jwwdt-preview-wrap.is-dark .jwwdt-stage { background: #10151c; }
.jwwdt-btn-pvtheme { font-size: .8em !important; padding: .3rem .6rem !important; }
.jwwdt-output-gen { min-height: 180px; }
.jwwdt-gen-presets {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: 1rem 0 0;
}
.jwwdt-gen-presets[hidden] { display: none; }
.jwwdt-gen-presets button {
  font-size: .82em; padding: .35rem .7rem;
}
.jwwdt-gen-formatwrap select {
  border: 1px solid var(--jwwdt-border); border-radius: 6px;
  background: var(--jwwdt-bg); color: var(--jwwdt-text);
  padding: .25rem .4rem; font: inherit; font-size: .85em;
}
.jwwdt-gen-formatwrap[hidden] { display: none; }
/* swatch helpers used by color-tool previews */
.jwwdt-swatchrow { display: flex; width: 100%; border-radius: 8px; overflow: hidden; }
.jwwdt-swatch { flex: 1; min-width: 0; height: 64px; position: relative; }
.jwwdt-swatch span {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 10px; text-align: center; padding: 2px 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* Related tools + workflow */
.jwwdt-related { margin: 2em 0; }
.jwwdt-related h2 { margin-bottom: .5em; }
.jwwdt-related ul { margin: 0; padding-left: 1.2em; }
.jwwdt-related li { margin: .3em 0; }

/* Hub grid */
.jwwdt-hub-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: 1.5em 0;
  padding: 0;
  list-style: none;
}
.jwwdt-hub-grid li {
  border: 1px solid var(--jwwdt-border);
  border-radius: 10px;
  padding: 1rem;
  background: var(--jwwdt-panel);
  margin: 0;
}
.jwwdt-hub-grid a { font-weight: 700; text-decoration: none; }
.jwwdt-hub-grid p { margin: .4rem 0 0; font-size: .875em; color: var(--jwwdt-muted); }

@media (max-width: 480px) {
  .jwwdt textarea { min-height: 220px; font-size: .85em; }
  .jwwdt-controls { position: sticky; bottom: 0; background: var(--jwwdt-bg); padding: .5rem 0; z-index: 2; }
}

/* Calculation steps (number-system cluster; populated by core.js) */
.jwwdt-steps { margin: 0.75rem 0; border: 1px solid #d7dce2; border-radius: 8px; padding: 0.35rem 0.85rem; }
.jwwdt-steps > summary { cursor: pointer; font-weight: 600; padding: 0.35rem 0; }
.jwwdt-steps-body { margin: 0.35rem 0 0.6rem 1.1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; line-height: 1.55; overflow-x: auto; }
.jwwdt-steps-body li { margin: 0.18rem 0; white-space: pre-wrap; }
@media (prefers-color-scheme: dark) { .jwwdt-steps { border-color: #3a4250; } }