/* ============================================================================
   Shared shell for the free developer tools (JSON Formatter, JWT Decoder, ...).
   One stylesheet so every tool has the same resizable split, panel chrome,
   status bar and code colours instead of five near-identical copies.
   ========================================================================== */

/* ---------- page header ---------- */
.tool-hero h1 { font-weight: 800; letter-spacing: -.5px; }
.tool-card { border-radius: 1rem; overflow: hidden; }

/* ---------- resizable split ----------
   Panel widths come from --lw (left width %); height from --jh. Dragging the
   gutter rewrites --lw, the bottom grip rewrites --jh, and both persist. */
.jx-split { display: flex; align-items: stretch; height: var(--jh, 62vh);
  min-height: 260px; background: var(--phoenix-body-highlight, #f6f7f9); }
.jx-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.jx-pane.left  { flex: 0 0 var(--lw, 50%); }
.jx-pane.right { flex: 1 1 auto; }

.jx-gutter { flex: 0 0 10px; cursor: col-resize; position: relative;
  background: var(--phoenix-border-color, #e3e6ed); }
.jx-gutter::after { content: ""; position: absolute; inset-block: 0; left: 3px; width: 4px;
  border-radius: 3px; background: var(--phoenix-body-tertiary-color, #a8b0bf); opacity: .35; }
.jx-gutter:hover::after, .jx-gutter.dragging::after { opacity: .9; background: #2b6cff; }

.jx-head { display: flex; align-items: center; gap: .5rem; padding: .4rem .65rem;
  background: var(--phoenix-body-emphasis, #fff);
  border-bottom: 1px solid var(--phoenix-border-color, #e3e6ed); flex: 0 0 auto; }
.jx-head .ttl { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--phoenix-body-tertiary-color, #6b7280); }
.jx-body { flex: 1 1 auto; min-height: 0; position: relative; }

.jx-in, .jx-out {
  width: 100%; height: 100%; margin: 0; border: 0; outline: none; resize: none;
  font-family: Consolas, "SFMono-Regular", Menlo, monospace; font-size: .84rem; line-height: 1.55;
  padding: .6rem .75rem; overflow: auto; tab-size: 2; white-space: pre;
  background: var(--phoenix-body-bg, #fff); color: var(--phoenix-body-color, #1e293b);
}
/* Scrollable, padded region for tools whose output is rich HTML rather than code. */
.jx-panel { height: 100%; overflow: auto; padding: .75rem;
  background: var(--phoenix-body-bg, #fff); }

.jx-grip { height: 12px; cursor: row-resize; display: flex; align-items: center; justify-content: center;
  background: var(--phoenix-body-emphasis, #fff);
  border-top: 1px solid var(--phoenix-border-color, #e3e6ed); }
.jx-grip span { width: 44px; height: 4px; border-radius: 3px;
  background: var(--phoenix-body-tertiary-color, #a8b0bf); opacity: .45; }
.jx-grip:hover span, .jx-grip.dragging span { opacity: 1; background: #2b6cff; }

/* Side-by-side is unusable on a phone, so stack and switch the gutter to row-resize. */
@media (max-width: 991.98px) {
  .jx-split { flex-direction: column; height: auto; }
  .jx-pane.left, .jx-pane.right { flex: 0 0 auto; height: 44vh; min-height: 220px; }
  .jx-gutter { flex: 0 0 10px; width: 100%; cursor: row-resize; }
  .jx-gutter::after { inset-inline: 0; inset-block: auto; top: 3px; left: 0; height: 4px; width: auto; }
}

/* ---------- status bar ---------- */
.jx-status { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem;
  padding: .45rem .75rem; font-size: .76rem;
  border-top: 1px solid var(--phoenix-border-color, #e3e6ed);
  background: var(--phoenix-body-emphasis, #fff); }
.jx-status .stat { color: var(--phoenix-body-tertiary-color, #6b7280); }
.jx-status .stat b { color: var(--phoenix-body-color, #1e293b); font-weight: 700; }

/* ---------- JSON / code colours (light + dark) ---------- */
.j-key  { color: #7a3cff; font-weight: 600; }
.j-str  { color: #0a7d33; }
.j-num  { color: #b45309; }
.j-bool { color: #2b6cff; font-weight: 600; }
.j-null { color: #94a3b8; font-style: italic; }
.j-err-line { background: rgba(220, 38, 38, .16); display: inline-block; width: 100%; }
@media (prefers-color-scheme: dark) {
  .j-key { color: #c4a5ff; } .j-str { color: #6ee7a0; } .j-num { color: #fbbf24; }
  .j-bool { color: #7ba9ff; } .j-null { color: #8a94a6; }
}
:root[data-theme="dark"] .j-key { color: #c4a5ff; }
:root[data-theme="dark"] .j-str { color: #6ee7a0; }
:root[data-theme="dark"] .j-num { color: #fbbf24; }
:root[data-theme="dark"] .j-bool { color: #7ba9ff; }
:root[data-theme="dark"] .j-null { color: #8a94a6; }

/* ---------- collapsible tree ---------- */
.jx-tree { font-family: Consolas, Menlo, monospace; font-size: .82rem; line-height: 1.6;
  padding: .6rem .75rem; height: 100%; overflow: auto; }
.jx-tree details { margin-left: .9rem; }
.jx-tree summary { cursor: pointer; list-style: none; }
.jx-tree summary::-webkit-details-marker { display: none; }
.jx-tree summary::before { content: "\25B8"; display: inline-block; width: 1em;
  color: var(--phoenix-body-tertiary-color, #8a94a6); transition: transform .12s ease; }
.jx-tree details[open] > summary::before { transform: rotate(90deg); }
.jx-tree .leaf { margin-left: 1.9rem; }
.jx-tree .cnt { color: var(--phoenix-body-tertiary-color, #8a94a6); font-size: .74rem; margin-left: .3rem; }

/* ---------- ads + misc ---------- */
.jx-ad { max-width: 970px; margin: 1rem auto 0; text-align: center; }
.jx-ad .lbl { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--phoenix-body-tertiary-color, #8a94a6); margin-bottom: .2rem; }
.kbd { font-size: .7rem; padding: .05rem .3rem; border-radius: .25rem;
  border: 1px solid var(--phoenix-border-color, #d8dee9); background: var(--phoenix-body-highlight, #f1f3f8); }