* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1a1a1a;
  background: #ffffff;
}

.page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* Inline code */

code {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 0.9em;
  background: #f3f3f3;
  padding: 1px 5px;
  border-radius: 3px;
}

/* Intro */

.intro {
  max-width: 760px;
  margin-bottom: 48px;
}

.kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888;
  margin: 0 0 12px;
}

.intro h1 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 18px;
}

.intro .lede {
  font-size: 19px;
  line-height: 1.5;
  color: #333;
  margin: 0 0 16px;
}

.intro p {
  margin: 0 0 12px;
  color: #444;
}

/* Page footer — small muted strip at the bottom of the page for
   the CDN-pin line and the source link. Separated from the workspace
   by a thin warm-gray divider. */

.page-footer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid #e0dcc8;
  font-size: 12px;
  color: #888;
}

.page-footer p {
  margin: 0;
}

.page-footer code {
  background: #f0ece0;
  font-size: 11px;
}

.page-footer a {
  color: #5b8d5b;
  text-decoration: none;
}

.page-footer a:hover {
  text-decoration: underline;
}

/* Example buttons */

.example-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.example-label {
  font-size: 14px;
  color: #666;
}

.example-button {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 12px;
  color: #1a1a1a;
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.example-button:hover {
  background: #ddd;
  border-color: #aaa;
}

.example-button:active {
  background: #ccc;
}

/* Lexicon panel removed in the Thread 2 restructure (v0.4.0+ sandbox);
   the always-visible panel was replaced by the hints card pointing at
   SHOW LEXICON / SHOW SCHEMA / UNREGISTER. Rules deleted here to keep
   the stylesheet honest about what the page renders. */

/* REPL panels */

.repl-panel {
  background: #f4f0e0;
  border: 1px solid #c8c0a0;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
}

.repl-label {
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5a5230;
  padding: 8px 12px 0;
}

.repl-output {
  height: 300px;
  overflow-y: auto;
  padding: 8px 12px;
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}

/* Bottom-anchor trick: a flexible spacer at the top expands to push
   content to the bottom while there's room, then collapses to zero
   once content overflows — at which point overflow-y: auto takes over
   and the wheel scrolls normally. */
.repl-output::before {
  content: "";
  margin-top: auto;
}

.repl-input-line {
  display: flex;
  align-items: center;
  padding: 4px 12px 8px;
  border-top: 1px solid #d8d0b0;
}

.repl-prompt {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 13px;
  color: #7a7355;
  white-space: pre;
  user-select: none;
}

.repl-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #1f4d1f;
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 13px;
  caret-color: #1f4d1f;
}

.repl-submit-btn {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 11px;
  color: #5a5230;
  background: #ece5cc;
  border: 1px solid #b8b090;
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
  margin-left: 8px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.repl-submit-btn:hover {
  color: #2a2618;
  background: #e0d8b8;
  border-color: #8a805a;
}

/* Output lines */

.repl-line {
  margin: 0;
  padding: 0;
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.5;
  color: #1f4d1f;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.repl-echo {
  color: #8a7a55;
}

.repl-error {
  color: #c92a2a;
}

.repl-sql {
  color: #8a7a40;
  font-style: italic;
}

.repl-table {
  color: #1f4d1f;
}

.repl-success {
  color: #2e7d2e;
}

.repl-register {
  color: #2e7d2e;
}

.repl-check {
  color: #5e5e8a;
}

.repl-reconciliation {
  color: #a86b00;
  margin-top: 6px;
}

.repl-warn-cell {
  color: #a86b00;
}

/* v0.3.0 boundary additions: red for rows whose own interval straddles
   a boundary cut (the value mixes regimes); informational footer for
   queries that fall entirely behind a boundary. */

.repl-error-cell {
  color: #c92a2a;
  font-weight: 600;
}

.repl-historical {
  color: #5e5e8a;
  background: #f3f3f8;
  border-left: 3px solid #b0b0c0;
  padding: 6px 10px;
  margin-top: 6px;
  border-radius: 0 3px 3px 0;
}

/* Removed: replaced by shared .regime / .regime-tag rules at the end. */

/* Connector between panels */

.repl-connector {
  display: flex;
  justify-content: center;
  gap: 64px;
  padding: 16px 0;
}

.connector-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.connector-arrow {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 14px;
  font-weight: 700;
  color: #555;
  transition: color 0.15s ease, text-shadow 0.15s ease;
  user-select: none;
  line-height: 1.4;
}

.connector-arrow.active {
  color: #2e7d2e;
  text-shadow: 0 0 12px rgba(46, 125, 46, 0.7), 0 0 24px rgba(46, 125, 46, 0.3);
}

/* Reference sections */

.reference {
  max-width: 760px;
  margin-top: 64px;
  border-top: 1px solid #e0e0e0;
  padding-top: 40px;
}

.reference h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 32px 0 14px;
}

.reference h2:first-child {
  margin-top: 0;
}

.reference h2 .kw {
  color: #005cc5;
}

.reference h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 24px 0 8px;
}

.reference h2 + p,
.reference h3 + p {
  color: #444;
  margin: 0 0 12px;
}

.trigger-matrix {
  border-collapse: collapse;
  margin: 12px 0 16px;
  font-size: 14px;
  color: #2a2a2a;
}

.trigger-matrix th,
.trigger-matrix td {
  border: 1px solid #d0d0d0;
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}

.trigger-matrix th {
  background: #ececec;
  font-weight: 600;
}

pre.code-hl {
  background: #ececec;
  color: #2a2a2a;
  border: 1px solid #c8c8c8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.5;
  padding: 14px 16px;
  border-radius: 4px;
  margin: 12px 0 24px;
  white-space: pre;
  overflow-x: auto;
}

pre.code-hl .kw { color: #005cc5; }
pre.code-hl .str { color: #22863a; }
pre.code-hl .cmt { color: #999; font-style: italic; }

/* Loading state */

.loading {
  color: #888;
  font-style: italic;
  padding: 12px;
  text-align: center;
}

/* Notebook surface (v0.3.0 sandbox) — replaces the dual-REPL +
   connector + DB console. Cells stack vertically; each carries the
   input source, structured output, and a collapsible SQL inspector. */

/* The notebook is a vertical column of free-standing cards: one card
   per executed cell, then the live-input card at the bottom. The old
   single bordered container was dissolved (each card now carries its
   own border) so cell boundaries read at a glance. */
.notebook {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.notebook-cells {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.notebook-cells:empty {
  display: none;
}

/* Live-input card — matches the executed-cell card chrome (border,
   radius) on the warmer paper tone, so the place you type reads as a
   sibling of the cells above it. No `overflow: hidden` so the
   autocomplete dropdown can escape the card's clipping rect; the
   dropdown is positioned relative to .notebook-editor below. */
/* Live-input "incipient cell" — same warm fill and border as a real
   cell, so it reads as a blank cell waiting to be run. */
.notebook-input {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: #ece6d8;
  border: 1px solid #d2ccba;
  border-radius: 6px;
}

.notebook-prompt {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 13px;
  color: #777;
  padding-top: 6px;
  user-select: none;
}

/* The editor wraps the textarea so the autocomplete dropdown can
   be absolutely positioned beneath the input without breaking the
   notebook-input row's flex layout. */

.notebook-editor {
  flex: 1;
  position: relative;
}

.notebook-input-field {
  display: block;
  width: 100%;
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 13px;
  color: #1a1a1a;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 5px 8px;
  resize: none;
  outline: none;
  line-height: 1.5;
  min-height: 28px;
}

.notebook-input-field:focus {
  border-color: #c8c4b3;
  background: #fff;
}

/* Autocomplete dropdown — floats just below the input. Compact
   rows showing the candidate text, its kind, and an optional hint.
   The currently-highlighted candidate (during Tab-cycling) gets a
   soft warm-gray background. */

.notebook-completions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #c8c4b3;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  max-height: 240px;
  overflow-y: auto;
  z-index: 20;
}

.notebook-completion {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 10px;
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
}

.notebook-completion + .notebook-completion {
  border-top: 1px solid #f0ece0;
}

.notebook-completion-active {
  background: #f0ece0;
}

.notebook-completion-clickable {
  cursor: pointer;
}

.notebook-completion-clickable:hover {
  background: #f8f6ed;
}

.notebook-completion-clickable.notebook-completion-active:hover {
  background: #e8e2d0;
}

.notebook-completion-text {
  color: #1a1a1a;
  font-weight: 600;
  flex-shrink: 0;
}

.notebook-completion-hint-text {
  font-style: italic;
  color: #777;
  font-weight: 400;
}

.notebook-completion-kind {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  flex-shrink: 0;
}

.notebook-completion-hint {
  color: #666;
  font-style: italic;
  font-family: Arial, sans-serif;
  font-size: 12px;
  flex: 1;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notebook-completions-empty {
  padding: 6px 10px;
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 12px;
  color: #888;
  font-style: italic;
}

.notebook-run-btn {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  color: #1f4d1f;
  background: #e8f5e8;
  border: 1px solid #b8d8b8;
  border-radius: 3px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.notebook-run-btn:hover {
  background: #d8eed8;
}

/* Cells — each executed statement is a free-standing card: an input
   header band (the command you ran) over an output body (what the
   runtime returned). overflow:hidden clips the header band's top
   corners to the card radius. */

/* Warm body fill (not white) so each card stands off the white page
   gaps and reads as its own filled entity. */
.nb-cell {
  background: #ece6d8;
  border: 1px solid #d2ccba;
  border-radius: 6px;
  overflow: hidden;
}

/* Input header band: a step darker than the warm body, so it reads as
   the cell's own header. Distinctly darker than the (white-with-light-
   header) tables in the body below, so cell-chrome and table-chrome
   never look the same. */
.nb-cell-input {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 14px;
  background: #e3dac3;
  border-bottom: 1px solid #d2ccba;
}

.nb-cell-label {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #998f73;
  user-select: none;
}

.nb-cell-source {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 13px;
  color: #1a1a1a;
  margin: 0;
  white-space: pre-wrap;
  overflow-x: auto;
  line-height: 1.45;
}

.nb-cell-output {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

/* Result tables */

.nb-result-table-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Result tables (COMPUTE cells) share .data-table styling; this class
   is just a hook for any compute-result-specific overrides. */

.nb-result-table {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
}

/* Severity on result rows: colored text only (no background tint).
   Amber = warn (region overlap, or a boundary cleanly on one side);
   red = error (the row's bucket straddles a boundary cut). */

.nb-row-warn .nb-cell-value,
.nb-row-warn .nb-cell-note {
  color: #a86b00;
}

.nb-row-error .nb-cell-value,
.nb-row-error .nb-cell-note {
  color: #c92a2a;
  font-weight: 600;
}

.nb-cell-note {
  max-width: 360px;
  white-space: pre-wrap;
}

.nb-result-caption {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 11px;
  color: #888;
  padding: 0 2px;
}

/* Block headers for reconciliation / check / historical — plain text
   above their table or prose. No container chrome around either. */

.nb-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nb-block-header {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #555;
}

/* Per-cell utility classes used by the new table-based reconciliation,
   SHOW LEXICON detail, and SHOW SCHEMA blocks. .nb-cell-mono renders
   plain monospace; .nb-cell-muted desaturates. */

.nb-cell-mono {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 12px;
}

.nb-cell-muted {
  color: #777;
}

/* Detail-view (SHOW LEXICON <name>, REGISTER cell) — plain prose,
   no card chrome. Header is kind tag + name; meta + desc + foot are
   plain text lines. */

.nb-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nb-detail-header {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.nb-detail-name {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
}

.nb-detail-meta {
  margin: 0;
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 12px;
  color: #555;
}

.nb-detail-desc {
  margin: 0;
  font-size: 13px;
  color: #444;
  line-height: 1.5;
}

.nb-detail-foot {
  margin: 0;
  font-size: 12px;
  color: #6b4500;
  font-style: italic;
}

/* Regime line — used by reconciliation rows, the historical block,
   REGISTER boundary confirmations, and SHOW LEXICON detail. Plain
   prose: bold side word, then the label in quotes, em-dash, then
   the description text. No pill chrome. */

.nb-regime-line {
  margin: 0;
  font-size: 13px;
  color: #444;
  line-height: 1.5;
}

.nb-regime-line strong {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b4500;
  margin-right: 6px;
}

/* Historical-context block — same prose-only shape, color-tuned for
   "informational" rather than "warn". */

.nb-historical .nb-block-header {
  color: #4a4a78;
}

.nb-historical-lead,
.nb-historical-foot {
  margin: 0;
  font-size: 13px;
  color: #444;
  line-height: 1.5;
}

/* SHOW SCHEMA per-metric section — plain header + optional
   description + plain dimensions table. No container chrome. */

.nb-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nb-metric + .nb-metric {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e8e4d4;
}

.nb-metric-header {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}

.nb-metric-name {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
}

/* SQL details */

.nb-sql {
  background: #f5f3e8;
  border: 1px solid #ddd6c0;
  border-radius: 3px;
  padding: 4px 10px;
}

.nb-sql summary {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  color: #777;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}

.nb-sql summary:hover {
  color: #555;
}

.nb-sql-source {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 12px;
  color: #5b6770;
  margin: 4px 0 6px;
  white-space: pre-wrap;
  line-height: 1.45;
}

/* Register cell — banner is the only register-specific affordance;
   everything underneath (impacts table, regime lines, meta line)
   uses the shared .data-table / .nb-detail-* / .nb-regime-line
   primitives. */

.nb-register-banner {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.nb-register-msg {
  font-size: 14px;
  font-weight: 600;
  color: #1f4d1f;
}

/* Error cell — tint the input header band red so a failed statement
   is obvious at the card level. */

.nb-cell-error .nb-cell-input {
  background: #fdecec;
  border-bottom-color: #f0b0b0;
}

.nb-error {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 12px;
  color: #c92a2a;
  background: #fdecec;
  border: 1px solid #f0b0b0;
  border-radius: 3px;
  padding: 8px 10px;
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.45;
}

/* Sticky in-page navigation (v0.3.0 sandbox) — three sections:
   Try it / Learn it / Inspect it. The nav pins to the top of the
   viewport once the user scrolls past the intro; the active link is
   driven by an IntersectionObserver in sandbox.html. */

.section-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 6px;
  background: #f8f6ed;
  border-bottom: 1px solid #d8d4c5;
  padding: 8px 0;
  margin: 24px 0 0;
}

.section-nav a {
  font-size: 13px;
  font-weight: 600;
  color: #5e5e5e;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.section-nav a:hover {
  color: #1a1a1a;
  background: #ece8d8;
}

.section-nav a.active {
  color: #1a1a1a;
  background: #ece8d8;
  border-color: #c8c4b3;
}

/* Page-section containers — shared spacing and scroll offset so that
   anchor jumps land below the sticky nav, not behind it. */

.page-section {
  scroll-margin-top: 52px;
  padding-top: 32px;
}

/* Bumped specificity (`.page-section .section-heading`) to win over the
   pre-existing `.reference h2` rule, which would otherwise downsize
   the section title to 22px. */
.page-section .section-heading {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: #1a1a1a;
}

.section-lede {
  font-size: 15px;
  color: #555;
  margin: 0 0 24px;
  max-width: 760px;
  line-height: 1.5;
}

/* Override the existing .reference top-spacing now that sections own
   their own padding. The two reference sections (Learn it / Inspect
   it) share the .reference class for typography but don't need the
   big top-margin or border anymore. */

.page-section.reference {
  max-width: 760px;
  margin-top: 0;
  border-top: none;
  padding-top: 32px;
}

.page-section.reference + .page-section.reference {
  margin-top: 48px;
}

/* Shared visual conventions — used across the lexicon panel,
   notebook cells, and any other surface that surfaces an entry kind
   or a regime description. Defining these once instead of per-panel
   keeps the visual language consistent: a "boundary" tag in the
   lexicon panel looks identical to one in a reconciliation block. */

.kind-tag {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 3px;
  color: #fff;
  white-space: nowrap;
}

.kind-region {
  background: #5b8d5b;
}

.kind-boundary {
  background: #8a6d3b;
}

/* (.regime / .regimes / .regime-tag / .regime-desc removed in
   Thread 3; the pill-and-row chrome was replaced by plain prose
   via .nb-regime-line. .kind-tag is still used everywhere.) */

/* Responsive */

@media (max-width: 640px) {
  .page {
    padding: 20px 16px 48px;
  }

  .repl-output {
    height: 240px;
  }

  .nb-cell-note {
    max-width: 240px;
  }
}

/* ==========================================================================
   tutorial.html — language introduction + tutorial
   ==========================================================================
   Reuses the notebook cell chrome (.nb-cell / .nb-cell-input /
   .nb-cell-output / .data-table) for both frozen and interactive cells.
   The tut-* rules add the section/concept prose rhythm, the canned-input
   menu, and the editable input + controls for interactive cells. */

.tutorial-mount {
  margin: 0 0 16px;
}

/* Section + concept rhythm. Sections are the two top-level parts
   (Core concepts / Language features); concepts are the labeled
   sub-blocks within. */
.tut-section {
  margin: 40px 0 4px;
}
.tut-section:first-child {
  margin-top: 8px;
}
.tut-section h2 {
  font-size: 24px;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid #d2ccba;
}
.tut-section > p {
  max-width: 760px;
  color: #3a3a3a;
}

.tut-concept {
  margin: 28px 0 12px;
  max-width: 760px;
}
.tut-concept h3 {
  font-size: 17px;
  margin: 0 0 6px;
  color: #1a1a1a;
}
.tut-concept p {
  margin: 0;
  color: #3a3a3a;
}

.tut-closing {
  margin-top: 48px;
}

/* Cells: frozen and interactive both reuse .nb-cell. Give them the
   vertical spacing the notebook used to provide via its flex gap. */
.nb-cell.tut-frozen,
.nb-cell.tut-cell {
  margin: 0 0 16px;
}

/* ----- Canned-input menu (interactive cells) ----- */
.tut-canned {
  padding: 12px 14px;
  background: #f3eee2;
  border-bottom: 1px solid #d2ccba;
}
.tut-canned-label {
  margin: 0 0 8px;
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #998f73;
}
.tut-canned-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "code  buttons"
    "desc  buttons";
  gap: 2px 12px;
  align-items: start;
  padding: 8px 0;
}
.tut-canned-item + .tut-canned-item {
  border-top: 1px solid #e2dcca;
}
.tut-canned-code {
  grid-area: code;
  margin: 0;
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 12.5px;
  color: #1a1a1a;
  white-space: pre-wrap;
  line-height: 1.45;
}
.tut-canned-desc {
  grid-area: desc;
  margin: 0;
  font-size: 13px;
  color: #6a6353;
}
.tut-canned-btns {
  grid-area: buttons;
  display: flex;
  gap: 6px;
  align-self: center;
}

/* ----- Editable input band (interactive cells) ----- */
.tut-cell-editor {
  display: block;
  width: 100%;
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 13px;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid #cdc6b2;
  border-radius: 4px;
  padding: 7px 9px;
  resize: none;
  outline: none;
  line-height: 1.5;
  min-height: 30px;
}
.tut-cell-editor:focus {
  border-color: #b6ad93;
}
.tut-cell-controls {
  display: flex;
  gap: 8px;
}

/* ----- Buttons ----- */
.tut-btn {
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.tut-btn-run {
  color: #1f4d1f;
  background: #e8f5e8;
  border: 1px solid #b8d8b8;
}
.tut-btn-run:hover {
  background: #d8eed8;
}
.tut-btn-copy,
.tut-btn-reset {
  color: #5a5444;
  background: #efeadd;
  border: 1px solid #cdc6b2;
}
.tut-btn-copy:hover,
.tut-btn-reset:hover {
  background: #e4dcc8;
}

@media (max-width: 640px) {
  .tut-canned-item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "code"
      "desc"
      "buttons";
  }
  .tut-canned-btns {
    align-self: start;
  }
}

/* ==========================================================================
   reference.html — language reference page
   ==========================================================================
   All selectors are scoped under .ref-page (or have a .ref-/ref- prefix) so
   they don't collide with the sandbox/notebook rules above. The page is a
   sticky-TOC left column + scrolling content right column on desktop; on
   narrower viewports the TOC collapses behind a button at the top.
*/

.ref-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px 96px;
}

.ref-header {
  max-width: 880px;
  margin: 0 0 28px;
}

.ref-header .kicker {
  margin: 0 0 12px;
}

.ref-title {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 12px;
}

.ref-sub {
  font-size: 16px;
  color: #555;
  line-height: 1.5;
  margin: 0;
}

.ref-sub code {
  font-size: 0.9em;
}

/* Mobile-only TOC toggle. Hidden on desktop via the media query below. */

.ref-toc-toggle {
  display: none;
  margin: 0 0 16px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  background: #ece8d8;
  border: 1px solid #c8c4b3;
  border-radius: 3px;
  padding: 8px 14px;
  cursor: pointer;
}

.ref-toc-toggle:hover {
  background: #ddd9c4;
}

/* Layout: TOC + content. CSS grid keeps the columns aligned without
   having to play with absolute positioning, and lets the right column
   own its own scrolling. */

.ref-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.ref-toc {
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.45;
  border-right: 1px solid #e0dcc8;
  padding-right: 12px;
}

.ref-toc-list,
.ref-toc-list ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ref-toc-list > li {
  margin: 0 0 10px;
}

.ref-toc-list ol {
  padding-left: 12px;
  margin: 4px 0 0;
  border-left: 1px solid #ece8d8;
}

.ref-toc-list ol > li {
  margin: 2px 0;
}

.ref-toc a {
  display: block;
  padding: 3px 8px;
  border-radius: 3px;
  color: #555;
  text-decoration: none;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ref-toc-list > li > a {
  font-weight: 700;
  color: #1a1a1a;
}

.ref-toc a:hover {
  background: #f4f0e0;
  color: #1a1a1a;
}

.ref-toc a.active {
  background: #ece8d8;
  color: #1a1a1a;
  border-color: #c8c4b3;
}

/* Content column. min-width: 0 on the grid item prevents <pre> blocks
   from blowing out the column width when they overflow horizontally. */

.ref-content {
  min-width: 0;
  max-width: 800px;
}

.ref-content section {
  margin: 0 0 36px;
  scroll-margin-top: 24px;
}

.ref-content section section {
  margin: 24px 0 0;
}

.ref-content h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 8px 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e8e4d4;
  color: #1a1a1a;
}

.ref-content h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 28px 0 10px;
  color: #1a1a1a;
}

.ref-content h4 {
  font-size: 15px;
  font-weight: 700;
  margin: 20px 0 8px;
  color: #333;
  text-transform: none;
  letter-spacing: 0;
}

.ref-content p {
  margin: 0 0 12px;
  color: #2a2a2a;
}

.ref-content ul {
  margin: 0 0 12px;
  padding-left: 22px;
}

.ref-content ul li {
  margin: 4px 0;
}

.ref-content a {
  color: #005cc5;
  text-decoration: none;
}

.ref-content a:hover {
  text-decoration: underline;
}

/* Bottom-margin on code blocks inside the reference content — slightly
   tighter than the global pre.code-hl above. */
.ref-content pre.code-hl {
  margin: 10px 0 16px;
}

/* Reference tables — slightly denser than the trigger-matrix in the
   sandbox, used for the time-mini-language and error-codes grids. */

.ref-grid {
  border-collapse: collapse;
  margin: 12px 0 18px;
  font-size: 14px;
  color: #2a2a2a;
  width: 100%;
}

.ref-grid th,
.ref-grid td {
  border: 1px solid #d8d4c5;
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}

.ref-grid th {
  background: #ece8d8;
  font-weight: 600;
  color: #444;
}

.ref-grid td code {
  background: #f0ece0;
}

/* Informational aside — used to flag the schema-vs-illustrative-names
   caveat at the top of Statements, and any future "you should know this
   before reading on" note. Distinct from .ref-grid; visually softer. */

.ref-note {
  background: #f3f3f8;
  border-left: 3px solid #b0b0c0;
  border-radius: 0 4px 4px 0;
  padding: 10px 14px;
  margin: 0 0 20px;
  font-size: 14px;
  color: #4a4a78;
  line-height: 1.5;
}

.ref-note code {
  background: #e6e6ee;
}

/* Search bar + dropdown. Positioned at the top of the content column. */

.ref-search {
  position: relative;
  margin: 0 0 28px;
}

.ref-search-input {
  width: 100%;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #1a1a1a;
  background: #fdfcf6;
  border: 1px solid #c8c4b3;
  border-radius: 4px;
  padding: 9px 14px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ref-search-input:focus {
  border-color: #8a805a;
  background: #fff;
}

.ref-search-input::placeholder {
  color: #888;
}

.ref-search-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #c8c4b3;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  max-height: 60vh;
  overflow-y: auto;
}

.ref-search-hit {
  display: block;
  padding: 9px 14px;
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid #f0ece0;
  transition: background 0.1s ease;
}

.ref-search-hit:last-child {
  border-bottom: none;
}

.ref-search-hit:hover {
  background: #f8f6ed;
}

.ref-search-hit-heading {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}

.ref-search-hit-kw {
  display: block;
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

.ref-search-empty {
  padding: 12px 14px;
  font-size: 13px;
  color: #888;
  font-style: italic;
}

/* The .search-keywords blob is hidden by the [hidden] attribute already;
   reinforce here in case a downstream stylesheet ever overrides it. */
.search-keywords[hidden] {
  display: none !important;
}

/* Responsive: collapse the TOC behind a button below 900px wide. */

@media (max-width: 900px) {
  .ref-page {
    padding: 20px 16px 64px;
  }

  .ref-toc-toggle {
    display: inline-block;
  }

  .ref-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .ref-toc {
    position: static;
    max-height: none;
    overflow: visible;
    border-right: none;
    border: 1px solid #e0dcc8;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 0 0 28px;
    background: #fdfcf6;
    display: none;
  }

  .ref-toc.ref-toc-open {
    display: block;
  }

  .ref-content {
    max-width: none;
  }
}

/* ===========================================================================
   New Sandbox (v0.3.0 page restructure) — data-context section + search-
   based sample library that lives below the notebook.

   The lexicon panel and notebook keep their existing styles; only the
   page chrome and search panel are new here.
   =========================================================================== */

/* (Thread 2 cleanup: .sandbox-context and .sandbox-context-grid were
   the always-visible data-context tables on the sandbox page, retired
   along with the lexicon panel. The .data-table class below is still
   used — by SHOW SCHEMA's per-metric dimension tables and by SHOW
   LEXICON's list view in the notebook.) */

/* Shared data-table style: used by SHOW SCHEMA dimension tables in
   notebook cells and (originally) by any tabular display in the
   sandbox. Same visual language as the reference page's .ref-grid. */

.data-table {
  border-collapse: collapse;
  font-size: 13px;
  width: 100%;
  color: #2a2a2a;
  /* White inset against the warm cell body — table cells inherit this;
     the header (.data-table th) keeps its own faint tint. */
  background: #fff;
}

.data-table caption {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
  text-align: left;
  margin-bottom: 6px;
}

.data-table th,
.data-table td {
  /* Lighter than the cell-card border (#d2ccba) so the card's edge
     stays the dominant boundary and the table reads as nested. */
  border: 1px solid #e6e1d3;
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}

.data-table th {
  /* Much lighter than the cell input band (#ece3cd) — the table is
     inside the card, so its header is the lightest chrome level. */
  background: #f6f2e8;
  font-weight: 600;
  color: #444;
}

.data-table td code {
  background: #f0ece0;
  font-size: 12px;
}

/* Workspace container — the demo mount point. The notebook is
   injected by main.ts. No backdrop fill: the cells (and the live
   "incipient cell" input at the bottom) are distinct cards floating
   directly on the page, with the page white showing through the 16px
   gaps between them. Each card reads as its own entity via its border
   and tinted header band, not via a contrasting surface. */

.sandbox-workspace {
  margin: 0 0 16px;
}

/* (Sample library + search panel removed in the v0.5.0 sandbox pass;
   .search-panel*, .search-result*, .sandbox-hints* rules deleted.
   Discoverability now comes from Tab autocomplete in the notebook
   input — see .notebook-completions* near the top of the file.) */

/* ===========================================================================
   v0.4.0 SHOW / UNREGISTER cell content. These complement the existing
   notebook cell chrome (nb-cell-input / nb-cell-output) with renderers
   for the new runtime statements. SHOW LEXICON has both a compact list
   table and a detail view; SHOW SCHEMA renders per-metric blocks; the
   UNREGISTER cell reuses the existing nb-register-banner style and adds
   a soft-note variant for the not-found case.
   =========================================================================== */

/* Shared soft-info note — used by SHOW LEXICON not-found, SHOW LEXICON
   empty-lexicon, UNREGISTER not-found, etc. Plain, ungaudy. */

.nb-soft-note {
  margin: 0;
  font-family: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 12px;
  color: #888;
  font-style: italic;
}

/* (.nb-show-*, .nb-metric-block, .nb-metric-primary, .nb-metric-desc,
   .nb-metric-dims removed in Thread 3. SHOW LEXICON list uses
   .data-table directly; SHOW LEXICON <name> detail uses .nb-detail-*;
   SHOW SCHEMA metric blocks use .nb-metric + .nb-metric-header /
   .nb-metric-name defined earlier alongside the other notebook-cell
   primitives.) */

/* (.sandbox-hints* rules removed alongside the hints-card HTML —
   see the note above the .search-panel removal block.) */