/*
 * Editor styles that sit on top of Nocturne.
 *
 * These are the hover states the design expressed with Claude Design's
 * `style-hover` attribute, which has no plain-DOM equivalent, plus the page
 * frame. Everything else stays inline, as the design has it.
 */

html, body { height: 100%; overflow: hidden; }

:root { --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

a { color: var(--color-accent-300); text-decoration: none; }
a:hover { color: var(--color-accent-200); }

.sb-logout:hover { color: var(--color-neutral-300); }

.sb-item:hover { background: color-mix(in srgb, var(--color-neutral-100) 6%, transparent) !important; }

.sb-mini:hover { background: color-mix(in srgb, var(--color-neutral-100) 10%, transparent); }

.sb-trash:hover { opacity: 1 !important; color: var(--color-accent-300) !important; }

.sb-diaghead:hover { background: color-mix(in srgb, var(--color-neutral-100) 3%, transparent); }

.sb-diagrow:hover { background: color-mix(in srgb, var(--color-neutral-100) 4%, transparent); }

.sb-dismiss:hover { color: var(--color-neutral-200) !important; }

/* The editor fills its box; CodeMirror manages its own scrolling. */
.cm-editor { height: 100%; }

/*
 * ── Reference panel ──
 *
 * A drawer beside the editor rather than a modal over it: the reason to open
 * the reference is to write the next line, so covering the script you are
 * writing would be exactly wrong. Below 900px there is no room for both and
 * it takes the whole width.
 */

.ref-panel {
  flex: none;
  width: 340px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--color-divider);
  background: var(--color-bg);
  min-height: 0;
}

@media (max-width: 900px) {
  .ref-panel { position: absolute; inset: 42px 0 0; width: auto; z-index: 40; }
}

.ref-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.ref-tab {
  font-family: inherit;
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-neutral-400);
  cursor: pointer;
}

.ref-tab:hover { color: var(--color-neutral-200); }

.ref-tab.is-active {
  color: var(--color-neutral-100);
  border-color: var(--color-divider);
  background: color-mix(in srgb, var(--color-neutral-100) 6%, transparent);
}

.ref-body {
  flex: 1;
  /* Both zeroes are load-bearing: without them a wide code block in the guide
     stretches the panel instead of scrolling inside it. */
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  padding: 0 var(--space-4) var(--space-5);
}

.ref-section + .ref-section { margin-top: var(--space-5); }
.ref-section h3 { margin: 0 0 var(--space-2); }

.ref-entry { padding: var(--space-2) 0; border-top: 1px solid var(--color-divider); }
.ref-entry:first-of-type { border-top: none; }

.ref-entry-head { display: flex; align-items: center; gap: var(--space-2); }

/* The signature is a button because clicking it inserts the call. */
.ref-syntax {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--color-accent-300);
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.ref-syntax:hover { color: var(--color-accent-200); text-decoration: underline; }

.ref-node { font-size: 9.5px; padding: 1px 5px; }

.ref-summary {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-neutral-300);
}

.ref-detail {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--color-neutral-500);
}

/* ── Rendered Markdown ── */

.md { font-size: 12.5px; line-height: 1.55; color: var(--color-neutral-300); }
.md .md-h {
  font-family: var(--font-heading);
  color: var(--color-neutral-100);
  margin: var(--space-5) 0 var(--space-2);
  font-size: 13.5px;
  font-weight: 500;
}
.md .md-h:first-child { margin-top: var(--space-3); }
.md .md-p { margin: 0 0 var(--space-3); }
.md .md-ul { margin: 0 0 var(--space-3); padding-left: 1.1em; }
.md code {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--color-accent-300);
}
.md .md-pre {
  margin: 0 0 var(--space-3);
  max-width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-divider);
  border-radius: 5px;
  overflow-x: auto;
}
.md .md-pre code { color: var(--color-neutral-200); white-space: pre; }
.md .md-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-3); }
.md .md-table td, .md .md-table th {
  padding: 3px 8px 3px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-divider);
}
.md .md-table th { color: var(--color-neutral-400); font-weight: 500; }

/*
 * ── Script Console ──
 *
 * Under the quota bar in the sidebar. The bottom strip already belongs to
 * Diagnostics, and a console there would either stack with it or take the
 * editor's height; the sidebar's lower half is otherwise dead space.
 */

.con-toggle {
  width: 100%;
  font-family: inherit;
  font-size: 11.5px;
  text-align: left;
  padding: 4px 8px;
  border: none;
  border-top: 1px solid var(--color-divider);
  background: transparent;
  color: var(--color-neutral-500);
  cursor: pointer;
}

.con-toggle:hover { color: var(--color-neutral-200); }
.con-toggle.is-active { color: var(--color-neutral-100); }

.con-panel {
  flex: none;
  display: flex;
  flex-direction: column;
  height: 45%;
  min-height: 160px;
  border-top: 1px solid var(--color-divider);
}

.con-head {
  flex: none;
  display: flex;
  align-items: center;
  padding: 2px var(--space-3) 0;
}

.con-clear:hover { color: var(--color-neutral-300) !important; }

.con-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-3) var(--space-3);
  gap: var(--space-2);
}

.con-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
}

/* Output is arbitrary text from a script; it must not stretch the sidebar. */
.con-line { white-space: pre-wrap; overflow-wrap: anywhere; }

.con-input {
  flex: none;
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 5px 7px;
  resize: none;
  width: 100%;
}