/* ---- tokens -------------------------------------------------------- */
:root {
  --bg:        #0d1117;
  --bg-raised: #161c24;
  --bg-sunken: #090d13;
  --border:    #30394a;
  --border-soft:#222a37;
  --fg:        #f0f6fc;
  --fg-muted:  #a9b6c6;
  --fg-faint:  #7d8998;
  --accent:    #58a6ff;
  --accent-fg: #06101f;
  --ok:        #56d4aa;
  --warn:      #e3b341;
  --err:       #ff7b72;

  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 9px;

  /* Type scale. Overridden per size below; the editor value is unitless
     because Monaco is configured in JS from the same setting. */
  --fs-ui:     16px;
  --fs-mono:   14.5px;
  --fs-label:  11.5px;
  --fs-small:  13px;
  --sidebar:   286px;
  --row-pad:   9px;
}

:root[data-size="m"] {
  --fs-ui: 14.5px; --fs-mono: 13px; --fs-label: 10.5px; --fs-small: 12px;
  --sidebar: 258px; --row-pad: 7px;
}
:root[data-size="xl"] {
  --fs-ui: 18.5px; --fs-mono: 17px; --fs-label: 13px; --fs-small: 15px;
  --sidebar: 320px; --row-pad: 12px;
}

:root[data-theme="light"] {
  --bg:        #ffffff;
  --bg-raised: #f5f7fa;
  --bg-sunken: #eaeef3;
  --border:    #c8d1dc;
  --border-soft:#dde3ea;
  --fg:        #0d1117;
  --fg-muted:  #4a5563;
  --fg-faint:  #6e7a89;
  --accent:    #0860ca;
  --accent-fg: #ffffff;
  --ok:        #10775c;
  --warn:      #8a5f00;
  --err:       #c1121c;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-ui);
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---- topbar -------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 11px 18px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand h1 {
  font-size: calc(var(--fs-ui) * 1.05);
  font-weight: 650;
  margin: 0;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--fg-faint);
  flex: none;
  transition: background .3s, box-shadow .3s;
}
.dot.ready { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
.dot.busy  { background: var(--warn); animation: pulse 1s ease-in-out infinite; }
.dot.error { background: var(--err); }
@keyframes pulse { 50% { opacity: .3; } }

.engines { display: flex; gap: 4px; margin-right: auto; }
.engine {
  display: flex; align-items: baseline; gap: 7px;
  padding: 8px 15px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--fg-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.engine small { color: var(--fg-faint); font-size: var(--fs-small); font-weight: 400; }
.engine:hover { background: var(--bg-sunken); color: var(--fg); }
.engine.is-active {
  background: var(--bg-sunken);
  border-color: var(--border);
  color: var(--fg);
}
.engine.is-active small { color: var(--fg-muted); }

.actions { display: flex; align-items: center; gap: 9px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--fg-faint); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.12); }
.btn-icon { padding: 8px 11px; line-height: 1; }
a.btn { text-decoration: none; }
.btn .ext { margin-left: 5px; font-size: var(--fs-small); color: var(--fg-faint); }

kbd {
  padding: 2px 6px;
  background: color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: calc(var(--fs-small) * 0.88);
  opacity: .85;
}

/* ---- layout -------------------------------------------------------- */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  height: calc(100% - 1px);
  min-height: 0;
  flex: 1;
}
body { display: flex; flex-direction: column; }

.sidebar {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--bg-raised);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.panel { padding: 6px 0 18px; }
.panel h2 {
  margin: 0 0 10px;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.muted { color: var(--fg-muted); margin: 0; }
.muted a { color: var(--accent); text-decoration: none; }
.muted a:hover { text-decoration: underline; }
.tiny  { font-size: var(--fs-small); line-height: 1.5; }

/* ---- schema tree --------------------------------------------------- */
.schema details {
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  margin-bottom: 6px;
  background: var(--bg-sunken);
}
.schema summary {
  padding: 9px 11px;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.schema summary::-webkit-details-marker { display: none; }
.schema summary::before { content: "▸"; color: var(--fg-faint); }
.schema details[open] summary::before { content: "▾"; }
.schema summary > span:first-of-type { margin-right: auto; }
.schema summary .n { color: var(--fg-faint); font-size: var(--fs-small); }
.schema .cols { padding: 0 11px 10px 28px; }
.schema .col {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 3px 0;
  font-family: var(--mono);
  font-size: calc(var(--fs-mono) * 0.93);
}
.schema .col b { font-weight: 500; }
.schema .col span { color: var(--fg-faint); }

/* ---- dropzone ------------------------------------------------------ */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 20px 12px;
  background: var(--bg-sunken);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
}
.dropzone:hover, .dropzone.over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-sunken));
}
.dropzone strong { font-weight: 650; }
.dropzone span { font-size: var(--fs-small); color: var(--fg-faint); }

/* ---- snippets ------------------------------------------------------ */
.snippets { display: flex; flex-direction: column; gap: 3px; }
.snippet {
  padding: 9px 11px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--fg-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.snippet:hover { background: var(--bg-sunken); border-color: var(--border-soft); color: var(--fg); }

/* ---- workspace ----------------------------------------------------- */
.workspace {
  display: grid;
  grid-template-rows: minmax(140px, 46%) minmax(0, 1fr);
  min-width: 0;
}
.editor { border-bottom: 1px solid var(--border); min-height: 0; }

.results { display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.results-head {
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px;
  min-height: 42px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-raised);
}
.tabstrip { display: flex; gap: 3px; margin-right: auto; }
.tab {
  padding: 6px 13px;
  background: none; border: none; border-radius: 6px;
  color: var(--fg-faint);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.tab:hover { color: var(--fg); }
.tab.is-active { background: var(--bg-sunken); color: var(--fg); }
.tab[hidden] { display: none; }

.status {
  font-family: var(--mono);
  font-size: var(--fs-small);
  color: var(--fg-muted);
  white-space: nowrap;
}
.status.error { color: var(--err); }
.status.ok    { color: var(--ok); }

.results-body { position: relative; flex: 1; min-height: 0; }
.out { display: none; position: absolute; inset: 0; overflow: auto; }
.out.is-active { display: block; }
.log {
  margin: 0; padding: 15px;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
  color: var(--fg-muted);
}
.log .err { color: var(--err); }
.log .ok  { color: var(--ok); }

/* ---- result grid --------------------------------------------------- */
table.grid {
  border-collapse: separate; border-spacing: 0;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  width: max-content; min-width: 100%;
}
table.grid th, table.grid td {
  padding: var(--row-pad) 16px;
  border-bottom: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
  text-align: left;
  white-space: nowrap;
  max-width: 460px;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.grid thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-raised);
  border-bottom: 2px solid var(--border);
  font-weight: 700;
  color: var(--fg);
}
table.grid thead th .t {
  display: block;
  margin-top: 2px;
  font-size: calc(var(--fs-small) * 0.9);
  font-weight: 400;
  color: var(--fg-faint);
}
table.grid tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--fg) 3%, transparent); }
table.grid tbody tr:hover td { background: color-mix(in srgb, var(--accent) 12%, transparent); }
table.grid td.num  { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td.null { color: var(--fg-faint); font-style: italic; }
.rowno {
  width: 1%;
  padding-right: 12px !important;
  color: var(--fg-faint);
  text-align: right;
  user-select: none;
}
table.grid th:last-child, table.grid td:last-child { border-right: none; }

.empty { padding: 34px 18px; color: var(--fg-faint); text-align: center; }

/* ---- responsive ---------------------------------------------------- */
@media (max-width: 900px) {
  body { overflow: auto; }
  .shell { grid-template-columns: 1fr; height: auto; }
  .sidebar { border-right: none; border-bottom: 1px solid var(--border); }
  .workspace { height: 78vh; }
  .topbar { flex-wrap: wrap; gap: 12px; }
  .engine small { display: none; }
  .engines { margin-right: 0; }
}