/* Event Horizon — the query page, and the whole application. Shares its palette
 * with the derivation ladder in the schema panel, so the two read as one thing;
 * everything is scoped under .hz-root.
 *
 * The palette is RelationalAI's own, lifted from their published design tokens
 * rather than eyeballed: --base-color-primary--50…950 for the neutrals, the
 * accent indigo scale, and #131333 for text, which is the exact colour their
 * logo is drawn in. Taking the real values is what makes the page sit next to
 * relational.ai rather than merely near it. */
.hz-root {
  --bg: #f8f7fc; --panel: #ffffff; --panel-2: #f5f5fa; --border: #e0e0eb;
  --txt: #131333; --txt-dim: #5a5a87; --txt-faint: #8181ac; --accent: #4e50b3;
  --ok: #256a33; --warn: #b2371b; --bad: #6b0005;
  /* Their stack, with a system fallback — the webfont is theirs to serve. */
  font-family: "Generalsans Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light; color: var(--txt); background: var(--bg);
  /* min-height, not height: the schema panel below can be taller than the
     viewport, and with a fixed height it had nowhere to go — the ladder was
     squeezed into whatever was left rather than pushing the page down. */
  min-height: 100vh; display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 20px;
}
.hz-root * { box-sizing: border-box; }
.hz-root * { scrollbar-width: thin; scrollbar-color: #cacadd transparent; }
.hz-root ::-webkit-scrollbar { width: 8px; height: 8px; }
.hz-root ::-webkit-scrollbar-track { background: transparent; }
.hz-root ::-webkit-scrollbar-thumb { background: #cacadd; border-radius: 8px; }
.hz-root ::-webkit-scrollbar-thumb:hover { background: #8181ac; }
.hz-root code, .hz-root pre, .hz-editor { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }

/* ---- header ---- */
.hz-head { display: flex; align-items: center; gap: 18px; flex: none; }
/* The RelationalAI lockup, vendored to web/ because the page ships
   img-src 'self' and will not load it from their CDN. */
.hz-brand { display: flex; align-items: center; flex: none; }
.hz-brand img { display: block; height: 26px; width: auto; }


.hz-fallback { flex: none; margin: 0; padding: 9px 12px; border-radius: 9px; white-space: pre-wrap;
  background: #fff4ef; border: 1px solid #f2ad9d;
  color: var(--warn); font-size: 11.5px; line-height: 1.55; }

/* ---- ask ---- */
.hz-ask { display: flex; gap: 9px; flex: none; }
.hz-question { flex: 1; padding: 13px 15px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--panel); color: var(--txt); font: inherit; font-size: 14.5px; outline: none; }
.hz-question:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #e3e4f3; }
.hz-question:disabled { opacity: .5; }
.hz-btn { padding: 10px 16px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--panel); color: var(--txt); font: inherit; font-size: 13px; cursor: pointer;
  transition: background .15s, border-color .15s; }
.hz-btn:hover:not(:disabled) { background: #f5f5fa; border-color: #cacadd; }
.hz-btn:disabled { opacity: .45; cursor: default; }
.hz-btn-primary { background: #db573d; border-color: #db573d; color: #fff; padding: 10px 22px; font-weight: 600; }

/* Run PyRel matches Ask. Both are primary actions in RelationalAI's orange
   (--base-color-orange--orange500); they sit in different panels, so they need
   to stand out from what is around them rather than from each other. */
.hz-btn-run { background: #db573d; border-color: #db573d; color: #fff; font-weight: 600; }
.hz-btn-run:hover:not(:disabled) { background: #b2371b; border-color: #b2371b; }
.hz-btn-run:disabled { background: #f2ad9d; border-color: #f2ad9d; color: #fff; opacity: 1; }
.hz-btn-primary:hover:not(:disabled) { background: #b2371b; border-color: #b2371b; }

.hz-history { display: flex; gap: 6px; flex-wrap: wrap; flex: none; min-height: 0; }
.hz-past { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--txt-faint); font: inherit; font-size: 11px; cursor: pointer;
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-past:hover { color: var(--txt); border-color: #cacadd; }

/* ---- panels ---- */
/* max-height, and it is load-bearing. The root is min-height:100vh so the
   schema panel can push the page down; that makes the root content-sized, and a
   flex:1 child in a content-sized column grows to fit its own content. The
   results table then sized the panel that was supposed to be sizing it — grow
   the window and the page count went up, shrink it and nothing came back,
   because the measurement had become circular. A viewport-relative ceiling
   breaks the loop. */
.hz-main { flex: 1; min-height: 340px; max-height: 68vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  /* minmax(0,1fr), not the implicit auto: a grid row sized by its content
     ignores the max-height above and lets the table push the panel open again,
     which is the same circularity one level down. */
  grid-template-rows: minmax(0, 1fr); gap: 12px; }
.hz-panel { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.hz-panel-head { display: flex; align-items: baseline; gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid var(--border); flex: none; }
.hz-panel-head h2 { margin: 0; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; color: var(--txt-faint); }
.hz-panel-note { font-size: 11px; color: var(--txt-faint); margin-left: auto; }
.hz-panel-foot { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-top: 1px solid var(--border); flex: none; }
.hz-hint { font-size: 10.5px; color: var(--txt-faint); }

/* The generated query sits above the editable box rather than inside it: what
   the model wrote stays visible and unedited while you experiment below. */
.hz-generated { flex: none; max-height: 42%; overflow: auto; border-bottom: 1px solid var(--border);
  background: #f8f7fc; }
.hz-generated pre { margin: 0; padding: 12px 14px; font-size: 12px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; color: var(--txt); }
.hz-editor { flex: 1; min-height: 0; resize: none; padding: 12px 14px; border: 0; outline: none;
  background: transparent; color: var(--txt-dim); font-size: 12px; line-height: 1.6; }
.hz-editor:focus { color: var(--txt); }

/* ---- results ---- */
.hz-status { font-size: 11px; margin-left: auto; }
/* Background rule loading. Dimmer than the status line beside it, because it
   reports something the page is doing rather than something you asked for. */
.hz-tier { font-size: 11px; margin-left: 10px; color: var(--txt-dim); opacity: .75; }
.hz-status-ok { color: #b2371b; }
.hz-status-busy { color: var(--accent); }
.hz-status-error, .hz-status-down { color: var(--bad); }
.hz-status-booting { color: var(--txt-faint); }
.hz-busy .hz-status-busy::after { content: '…'; }

.hz-rows { flex: 1; min-height: 0; overflow: auto; padding: 2px; }
.hz-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.hz-table th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 8px 12px;
  background: var(--panel); border-bottom: 1px solid var(--border);
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--txt-faint); }
.hz-table td { padding: 7px 12px; border-bottom: 1px solid #ececf3; vertical-align: top; }
.hz-table tbody tr:hover { background: #f8f7fc; }
.hz-num { text-align: right; font-variant-numeric: tabular-nums; }
.hz-null { color: var(--txt-faint); }

.hz-note { padding: 10px 14px; font-size: 11.5px; color: var(--txt-faint); }
.hz-error { margin: 12px; padding: 11px 13px; border-radius: 9px; font-size: 12px; line-height: 1.6;
  background: #ffeeeb; border: 1px solid #fad1c8; color: var(--bad); }
.hz-error-detail { margin: 0 12px 12px; padding: 10px 13px; border-radius: 9px; font-size: 11px;
  line-height: 1.6; white-space: pre-wrap; background: #f5f5fa; color: var(--txt-dim); }

.hz-touched { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 0 12px; max-height: 76px; overflow: auto; }
.hz-touched:not(:empty) { padding: 10px 12px; border-top: 1px solid var(--border); }
.hz-touched .hz-note { padding: 0; }
.hz-chip { padding: 3px 9px; border-radius: 999px; font-size: 11px; text-decoration: none;
  color: var(--accent); background: #f2f2f9; border: 1px solid #d1d2eb;
  /* These are <button>s now — they used to be links into the Galaxy view, and
     now re-root the ladder in the panel below. Without the reset they inherit
     the platform button font and sit a pixel off from everything around them. */
  font: inherit; font-size: 11px; cursor: pointer; }
.hz-chip:hover { background: #e3e4f3; color: #232452; }

/* ---- schema ---- */
.hz-schema { flex: none; padding-bottom: 14px; }
.hz-schema-toggle { width: 100%; text-align: left; padding: 9px 12px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--txt-dim);
  font: inherit; font-size: 11.5px; cursor: pointer; }
.hz-schema-toggle:hover { color: var(--txt); }
.hz-schema-toggle span { color: var(--txt-faint); margin-left: 6px; }
/* The panel holds two views of the same schema: the derivation ladder, and the
   literal text sent to the model. The container carries the frame; each view
   styles its own inside. */
.hz-schema-body { margin: 8px 0 0; border-radius: 9px; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--border); }
.hz-schema-tabs { display: flex; align-items: center; gap: 2px; padding: 6px 6px 0;
  border-bottom: 1px solid var(--border); }
.hz-schema-tab { padding: 6px 11px; border: none; border-radius: 7px 7px 0 0; background: transparent;
  color: var(--txt-faint); font: inherit; font-size: 11px; cursor: pointer; }
.hz-schema-tab:hover { color: var(--txt-dim); }
.hz-schema-tab.is-on { background: var(--panel); color: var(--txt); }

/* A definite height, because .lad-root is height:100% and would collapse to
   nothing in an auto-height parent. Tall enough for both trees to show a few
   levels — the whole point is seeing a derivation, and three rows is not one.
   Capped against the viewport as well: .hz-root is height:100% with no page
   scroll, so a fixed 480px panel eats the results table on a laptop screen
   instead of pushing it down. */
/* No height: the ladder inside sizes to its trace and pushes the page down.
   A fixed height here is what forced the inner scroller. */
.hz-schema-ladder { min-height: 420px; }
.hz-schema-ladder[hidden] { display: none; }
.hz-schema-ladder-failed { height: auto; padding: 12px 14px; font-size: 11.5px; color: var(--txt-faint); }

.hz-schema-text { margin: 0; padding: 12px 14px; max-height: 320px; overflow: auto;
  font-size: 11px; line-height: 1.6; color: var(--txt-dim); white-space: pre-wrap; }

@media (max-width: 900px) {
  .hz-main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .hz-head { flex-wrap: wrap; gap: 10px; }
  }

/* Offer to load the browser dataset. Only the wasm engine shows this — it boots
   with Swan and an empty database, so without it the page is a working engine
   with nothing to ask about. */
/* Any author `display` beats the UA rule behind the `hidden` attribute, so
   .hz-boot stayed on screen after the dataset loaded — a "Load it" button
   offering to do the thing that had just been done. */
.hz-boot[hidden] { display: none; }
.hz-boot { flex: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: 10px; background: #f0faf2; border: 1px solid #b7e4c4;
  font-size: 12.5px; color: var(--txt-dim); }
.hz-boot span { flex: 1; }

/* The two ways out of the cached database, shown once something is loaded.
   Deliberately quieter than .hz-boot: that panel is an invitation and goes away
   once taken, these sit there for the whole session and are rarely the right
   thing to press. */
/* Sits between the logo and the reload controls, which claim margin-left:auto
   and so stay hard right whether or not this is present. */
.hz-nav { flex: none; display: flex; gap: 16px; margin-left: 4px; }
.hz-nav a { color: var(--txt-dim); text-decoration: none; font-size: 13px; }
.hz-nav a:hover { color: var(--accent); text-decoration: underline; }

.hz-reload[hidden] { display: none; }   /* same UA-rule trap as .hz-boot above */
.hz-reload { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto;
  font-size: 11.5px; color: var(--txt-faint); }
/* Was `flex: 1` to push the buttons right across a full-width row. In the
   header the row is the header, so the note sizes to its text and the
   whole group is pushed right by margin-left on the parent. */
.hz-reload span { flex: none; }
.hz-reload .hz-btn { padding: 5px 10px; font-size: 11.5px; }
/* The placeholder shown before a dataset exists — prose, not a schema dump. */
.hz-schema-text-empty { white-space: normal; font-style: italic; color: var(--txt-faint); max-width: 62ch; }

/* ---- example questions ---- */
/* Above the panels, below the box: questions verified against the gold set, so
   a first visit has somewhere to start other than an empty field. */
.hz-examples { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: none; }
.hz-examples .hz-note { padding: 0; }
.hz-example { padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--txt-dim);
  font: inherit; font-size: 11px; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; transition: border-color .15s, color .15s; }
.hz-example:hover { color: var(--txt); border-color: #cacadd; background: #f5f5fa; }
/* Rule-tier questions are the point of the app — they are answered from
   properties that exist in no table — so they carry the rules layer's colour. */
.hz-example-rule { color: var(--accent); border-color: #d1d2eb; background: #f8f7fc; }
.hz-example-rule:hover { color: #323374; border-color: #a7a8d9; background: #f2f2f9; }

/* ---- results pager ---- */
/* Sticks to the bottom of the scroller so it stays reachable, and reads
   "1–10 of 913" rather than "page 1 of 92" — the count is the answer's shape,
   which is usually what you wanted from the query in the first place. */
.hz-pager { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 8px 12px; background: var(--panel-2); border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--txt-dim); }
.hz-pagebtn { width: 26px; height: 24px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--panel); color: var(--txt-dim); font: inherit; font-size: 13px; line-height: 1;
  cursor: pointer; }
.hz-pagebtn:hover:not(:disabled) { background: #f5f5fa; color: var(--txt); border-color: #cacadd; }
.hz-pagebtn:disabled { opacity: .35; cursor: default; }