/*
 * theme.css — Integration Lab JSON Tools.
 *
 * Direction: a dense, quiet developer tool — the editor is the product, like
 * VS Code's split view with Linear's restraint. Cool neutrals, one deep teal
 * brand fill, and a syntax palette (--x-syn-*) tuned to read on the editor
 * surface in both modes. Opens light; dark is its own palette, not an inverse.
 */

:root {
  color-scheme: light;

  --canvas: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eceef2;
  --border: #dde1e7;
  --border-strong: #b4bac4;
  --ink: #14171c;
  --muted: #586170;
  --accent: #0f766e;
  --accent-hover: #115e59;
  --accent-ink: #ffffff;
  --accent-text: #0d6b63;
  --accent-strong: #0a524c;
  --accent-soft: #dcf1ee;
  --accent-border: #9ed6ce;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dcfce7;
  --success-strong: #166534;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #fdf0dc;
  --warning-strong: #92400e;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #fde4e4;
  --danger-strong: #991b1b;
  --chart-1: #0f766e;
  --chart-2: #2563eb;
  --chart-3: #b45309;
  --chart-4: #9333ea;
  --chart-5: #be123c;
  --chart-6: #4d7c0f;

  --x-syn-key: #0a5f58;
  --x-syn-str: #a14a06;
  --x-syn-num: #1d4ed8;
  --x-syn-bool: #8b2fc9;
  --x-syn-null: #6b7280;
  --x-syn-punc: #586170;

  --font-display: "Space Grotesk Variable", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans Variable", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "DM Sans Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 0.5rem;
  --radius-card: 0.75rem;
  --radius-input: 0.5rem;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-raised: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
  --btn-weight: 600;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #0e1115;
  --surface: #151920;
  --surface-2: #1c2129;
  --border: #272d37;
  --border-strong: #3a424f;
  --ink: #e6e9ee;
  --muted: #97a0ad;
  --accent: #2dd4bf;
  --accent-hover: #5eead4;
  --accent-ink: #04201d;
  --accent-text: #5eead4;
  --accent-strong: #8af0de;
  --accent-soft: #0e2a28;
  --accent-border: #1d4f49;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #0f2a1b;
  --success-strong: #6ee7a0;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #33220f;
  --warning-strong: #fbbf6a;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #3a1618;
  --danger-strong: #f8a1a1;
  --chart-1: #2dd4bf;
  --chart-2: #60a5fa;
  --chart-3: #fbbf24;
  --chart-4: #c084fc;
  --chart-5: #fb7185;
  --chart-6: #a3e635;

  --x-syn-key: #5eead4;
  --x-syn-str: #f5b86b;
  --x-syn-num: #8ab4ff;
  --x-syn-bool: #d4a5ff;
  --x-syn-null: #8b95a3;
  --x-syn-punc: #97a0ad;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-raised: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
}

/*
 * app.css — the parts that make this app itself: the split editors, syntax
 * colours, trees, tables, search highlights, the tool bars, history and the
 * site chrome. Tokens only; the syntax palette is --x-syn-* in theme.css and
 * search highlights are a wash of --warning. Editor text size comes from
 * --ed-size / --ed-lh, which app.js sets from the Display settings.
 */

/* ---- Brand + small chrome ------------------------------------------------ */
.brand-mark {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: var(--accent);
  color: var(--accent-ink);
}
.brand-mark .icon { width: 1.125rem; height: 1.125rem; }

.kbd {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 0.375rem;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 0.25rem;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.tools-menu { min-width: 15rem; max-height: min(75vh, 36rem); overflow-y: auto; }
.tools-menu [aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); }
.display-menu { min-width: 18rem; padding: 0.5rem; }
.display-row { padding: 0.375rem 0.5rem; }
.shortcuts {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.25rem 0.5rem 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
}
.shortcuts dt { white-space: nowrap; }

.footer-head {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
}
.footer-list { display: grid; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.875rem; }
.footer-list a { color: var(--ink); }
.footer-list a:hover { color: var(--accent-text); }

/* ---- How-to steps under each tool ------------------------------------------ */
.guide-steps { display: grid; gap: 0.875rem; counter-reset: step; }
.guide-steps li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.75rem;
  align-items: start;
  counter-increment: step;
}
.guide-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* ---- Tool bars ---------------------------------------------------------------- */
.toolbar {
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card, 0.75rem);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.toolbar-sep { width: 1px; height: 1.5rem; background: var(--border); }
.opts-grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  align-items: center;
  gap: 0.75rem 1.5rem;
  min-width: 0;
}
.opt { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.opt-label { color: var(--ink); font-size: 0.875rem; white-space: nowrap; }
.opt-input { flex: 1 1 auto; width: auto; min-width: 6rem; height: 2.25rem; }
.fmt-tag {
  margin-left: 0.375rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.25rem;
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
}

/* ---- Panes ---------------------------------------------------------------- */
.pane { display: flex; flex-direction: column; height: 36rem; }
@media (min-width: 64rem) {
  .pane { height: clamp(32rem, calc(100dvh - 19rem), 64rem); }
}
.pane-short { height: 26rem; }
@media (min-width: 64rem) {
  .pane-short { height: clamp(20rem, 48dvh, 40rem); }
}
.pane-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.75rem;
  height: 3rem;
  padding: 0 0.5rem 0 1rem;
  border-bottom: 1px solid var(--border);
}
.pane-title { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.pane-body { position: relative; flex: 1 1 auto; min-height: 0; }
.pane-foot {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  height: 2.5rem;
  padding: 0 0.5rem 0 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

/* Full screen: the pane takes the whole window until Esc or the button. */
.full-btn .when-full { display: none; }
.pane.is-full { position: fixed; inset: 0; z-index: 70; width: auto; max-width: none; height: auto; border-radius: 0; }
.pane.is-full .when-small { display: none; }
.pane.is-full .when-full { display: inline-flex; }
html.has-full { overflow: hidden; }

/* ---- Segmented switches and menus ----------------------------------------------- */
.seg { display: inline-flex; gap: 0.125rem; padding: 0.1875rem; border-radius: 0.5rem; background: var(--surface-2); }
.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.75rem;
  padding: 0 0.625rem;
  border-radius: 0.375rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 120ms ease, background-color 120ms ease;
}
.seg-btn .icon { width: 0.875rem; height: 0.875rem; }
.seg-btn:hover { color: var(--ink); }
.seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }

.view-dd > summary::-webkit-details-marker,
.tools-dd > summary::-webkit-details-marker,
.display-dd > summary::-webkit-details-marker,
.convert-dd > summary::-webkit-details-marker { display: none; }
.view-dd > summary .icon { width: 0.875rem; height: 0.875rem; }
.view-menu { min-width: 16rem; }
.view-desc { color: var(--muted); font-size: 0.75rem; }
.view-opt.is-active { background: var(--accent-soft); color: var(--accent-strong); }
.view-opt.is-active .view-desc { color: var(--accent-strong); }

/* ---- Search ---------------------------------------------------------------- */
.search-bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 0.5rem 0 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.search-bar:focus-within { box-shadow: inset 0 -2px 0 var(--accent); }
.search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2rem;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-size: 0.875rem;
}
.search-input::placeholder { color: var(--muted); }
.hit { border-radius: 0.125rem; background: color-mix(in srgb, var(--warning) 24%, transparent); }
.hit-cur { background: color-mix(in srgb, var(--warning) 55%, transparent); box-shadow: 0 0 0 1px var(--warning); color: var(--ink); }

/* ---- Editors and code views -------------------------------------------------- */
.editor,
.code-view {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  font-family: var(--font-mono);
  font-size: var(--ed-size, 0.8125rem);
  line-height: var(--ed-lh, 1.25rem);
}
.gutter {
  min-width: 3rem;
  overflow: hidden;
  padding: 0.75rem 0.625rem 0.75rem 0.75rem;
  border-right: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.gutter-inner { white-space: pre; will-change: transform; }
.editor-main { position: relative; min-width: 0; }
.code-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  outline: none;
  resize: none;
  overflow: auto;
  background: transparent;
  color: var(--ink);
  caret-color: var(--accent-text);
  font: inherit;
  line-height: inherit;
  white-space: pre;
  tab-size: 2;
}
.code-input::placeholder { color: var(--muted); }
.err-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--ed-lh, 1.25rem);
  border-left: 2px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  pointer-events: none;
}
.code-out {
  margin: 0;
  padding: 0.75rem 1rem;
  overflow: auto;
  outline: none;
  color: var(--x-syn-punc);
  white-space: pre;
  tab-size: 2;
}
.code-out.is-plain { color: var(--ink); }
.code-note {
  display: block;
  max-width: 60ch;
  color: var(--muted);
  font-family: var(--font-body);
  font-style: italic;
  white-space: normal;
}
.j-k { color: var(--x-syn-key); }
.j-s { color: var(--x-syn-str); }
.j-n { color: var(--x-syn-num); }
.j-b { color: var(--x-syn-bool); font-weight: 500; }
.j-z { color: var(--x-syn-null); font-style: italic; }

/* Wrap long lines (Display settings): line numbers can't follow wrapped lines, so they step aside. */
html.wrap-on .code-input,
html.wrap-on .code-out { white-space: pre-wrap; overflow-wrap: anywhere; }
html.wrap-on .editor,
html.wrap-on .code-view { grid-template-columns: minmax(0, 1fr); }
html.wrap-on .gutter,
html.wrap-on .err-line { display: none !important; }

/* ---- Error panels under the editors ----------------------------------------- */
.err-panel {
  flex-shrink: 0;
  max-height: 45%;
  overflow: auto;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  background: var(--danger-soft);
  color: var(--danger-strong);
}
.err-compact { padding: 0.5rem 0.75rem; }
.err-snippet {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  overflow-x: auto;
  border-radius: 0.375rem;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.125rem;
  white-space: pre;
}

/* ---- Drag a file onto an editor -------------------------------------------- */
.drop-hint {
  position: absolute;
  inset: 0.5rem;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 2px dashed var(--accent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--accent-soft) 90%, transparent);
  color: var(--accent-strong);
  font-weight: 600;
  pointer-events: none;
}
.pane.is-drop .drop-hint { display: flex; }

/* ---- Output states -------------------------------------------------------- */
.out-state { position: absolute; inset: 0; display: grid; place-items: center; overflow: auto; padding: 1.5rem; }
.empty-art-danger { background: var(--danger-soft); color: var(--danger-strong); }

/* ---- Tree (Form, Tree, View) ------------------------------------------------ */
.tree {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 0.5rem 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--ed-size, 0.8125rem);
  line-height: calc(var(--ed-lh, 1.25rem) + 0.25rem);
}
.tn-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: max-content;
  min-width: 100%;
  padding: 0 0.375rem;
  border-radius: 0.25rem;
  white-space: nowrap;
  cursor: pointer;
}
.tn-row:hover { background: var(--surface-2); }
.tn-row.is-hit { background: color-mix(in srgb, var(--warning) 14%, transparent); }
.tn-row.is-sel { background: var(--accent-soft); }
.tn-row.is-cur { box-shadow: inset 0 0 0 1px var(--warning); }
.tn-tog,
.tn-tog-sp {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  color: var(--muted);
}
.tn-tog { transition: transform 120ms ease; }
.tn-tog .icon { width: 0.875rem; height: 0.875rem; }
.tn[aria-expanded="true"] > .tn-row > .tn-tog { transform: rotate(90deg); }
.tn-key { color: var(--x-syn-key); }
.tn-idx { color: var(--muted); }
.tn-colon { margin-left: -0.375rem; color: var(--x-syn-punc); }
.tn-brace { color: var(--x-syn-punc); }
.tn-count { color: var(--muted); font-family: var(--font-body); font-size: 0.75rem; }
.tn-val { max-width: 70ch; overflow: hidden; text-overflow: ellipsis; }
.tn-kids { margin-left: 0.875rem; padding-left: 0.5rem; border-left: 1px dashed var(--border-strong); }
.tn-more {
  margin: 0.125rem 0 0.25rem 1.375rem;
  color: var(--accent-text);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
}
.tn-more:hover { text-decoration: underline; }

.is-editable { padding: 0 0.125rem; border-radius: 0.25rem; cursor: text; }
.is-editable:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: 0 0 0 1px var(--accent-border); }
.tn-edit {
  height: var(--ed-lh, 1.25rem);
  min-width: 3rem;
  padding: 0 0.25rem;
  border: 1px solid var(--accent);
  border-radius: 0.25rem;
  outline: none;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.tn-acts { display: inline-flex; gap: 0.125rem; margin-left: 0.75rem; visibility: hidden; }
.tn-row:hover > .tn-acts,
.tn-row.is-sel > .tn-acts,
.tn-row:focus-within > .tn-acts { visibility: visible; }
.tn-act {
  display: inline-grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 0.25rem;
  color: var(--muted);
}
.tn-act .icon { width: 0.875rem; height: 0.875rem; }
.tn-act:hover { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--border-strong); }
.tn-act[data-tn="remove"]:hover { color: var(--danger-strong); }

/* ---- Tables (Table view, CSV preview, Compare) ---------------------------------- */
.table-view { position: absolute; inset: 0; display: flex; flex-direction: column; }
.table-bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
}
.table-src { width: auto; max-width: 55%; height: 2rem; font-family: var(--font-mono); }
.grid-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.data-grid {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-mono);
  font-size: var(--ed-size, 0.8125rem);
}
.data-grid th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.data-grid th.sortable { cursor: pointer; user-select: none; }
.data-grid th.sortable:hover { color: var(--ink); }
.data-grid th[aria-sort="ascending"],
.data-grid th[aria-sort="descending"] { color: var(--accent-text); }
.data-grid td {
  max-width: 28rem;
  overflow: hidden;
  padding: 0.375rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}
.data-grid tbody tr:hover td { background: var(--surface-2); }
.data-grid .rn { color: var(--muted); text-align: right; }
.data-grid .cell-empty { color: var(--muted); }
.grid-note { padding: 0.75rem 1rem; color: var(--muted); font-family: var(--font-body); font-size: 0.75rem; }

.cmp-wrap { max-height: 40rem; overflow: auto; }
.cmp-grid td { max-width: 26rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmp-path { color: var(--ink); }
.cmp-old { background: color-mix(in srgb, var(--danger) 9%, transparent); }
.cmp-new { background: color-mix(in srgb, var(--success) 10%, transparent); }

/* ---- History sheet ------------------------------------------------------------ */
.hist-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.hist-list { display: grid; gap: 0.375rem; }
.hist-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.25rem 0.25rem 0.25rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
}
.hist-item:hover { border-color: var(--border-strong); }
.hist-open { flex: 1 1 auto; min-width: 0; padding: 0.375rem 0; text-align: left; }
.hist-label {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hist-meta { display: block; color: var(--muted); font-size: 0.75rem; }
.hist-empty { padding: 0.5rem 0 0.75rem; color: var(--muted); font-size: 0.875rem; }

/* ---- The one moment that moves: fresh output settles in -------------------- */
@keyframes out-settle {
  from { opacity: 0.4; transform: translateY(0.25rem); }
  to { opacity: 1; transform: none; }
}
.out-flash { animation: out-settle 220ms cubic-bezier(0.2, 0.7, 0.2, 1); }
html.reduced-motion .out-flash { animation: none; }
html.reduced-motion .tn-tog { transition: none; }