/* editorial.css — layout primitives, nav, buttons, cards, code, glass,
 * Mermaid theming, SRML renderer cards. Replaces v1's bohr.css + rough.css.
 *
 * All colors reference tokens from base.css. No hand-drawn strokes, no
 * rough borders — everything is hairline + solid.
 */

/* ---------------------------- layout --------------------------- */

.container {
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.narrow {
  max-inline-size: 760px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-sm {
  padding-block: var(--space-sm);
}
.section-md {
  padding-block: var(--space-md);
}
.section-lg {
  padding-block: var(--space-lg);
}

body.route-shell-ready #main,
body.route-shell-ready .site-footer {
  transition-property: opacity, transform;
  transition-duration: 180ms;
  transition-timing-function: var(--ease-out);
}

body.is-route-transitioning #main,
body.is-route-transitioning .site-footer {
  opacity: 0;
  transform: translateY(4px);
}

@media (prefers-reduced-motion: reduce) {
  body.route-shell-ready #main,
  body.route-shell-ready .site-footer {
    transition-duration: 1ms;
    transform: none;
  }

  body.is-route-transitioning #main,
  body.is-route-transitioning .site-footer {
    opacity: 1;
    transform: none;
  }
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.lede {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-inline-size: 640px;
}

.hairline {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

.hairline-grow {
  height: 1px;
  background: var(--rule);
  border: 0;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 800ms cubic-bezier(0.2, 0.6, 0.1, 1);
}

.hairline-grow.is-shown {
  transform: scaleX(1);
}

/* ---------------------------- header --------------------------- */

.site-header {
  --site-header-brand-width: 222px;
  --site-header-nav-width: 476px;
  --site-header-cta-width: 172px;
  position: sticky;
  top: 0;
  z-index: 40;
  isolation: isolate;
  max-inline-size: var(--container);
  min-block-size: 68px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px var(--gutter);
  background: transparent;
  border-bottom: 0;
}

.site-header::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: -1;
  inline-size: 100vw;
  transform: translateX(-50%);
  background: var(--surface);
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}

.site-header.is-scrolled::before {
  border-bottom-color: var(--rule);
}

.site-header .brand {
  flex: 0 0 var(--site-header-brand-width);
  display: inline-flex;
  align-items: center;
  inline-size: var(--site-header-brand-width);
  min-block-size: 40px;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
}

.brand-wordmark {
  display: inline-block;
  flex: 0 0 auto;
  inline-size: auto;
  block-size: 40px;
  line-height: 40px;
  color: #071c1a;
  contain: layout paint style;
  transform: translateY(2px);
}

.brand-wordmark-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.brand-wordmark-text {
  font-size: 28px;
}

.brand-wordmark-text::after {
  content: ".__";
}

.brand-wordmark-dot,
.brand-wordmark-rule {
  display: none;
}

.site-header nav {
  flex: 0 0 var(--site-header-nav-width);
  inline-size: var(--site-header-nav-width);
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.site-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  inline-size: 100%;
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  min-height: 40px;
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition-property: color, background-color;
  transition-duration: 150ms;
  transition-timing-function: var(--ease-out);
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--ink);
  background: rgba(10, 10, 10, 0.04);
  outline: none;
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.site-header .header-cta {
  flex: 0 0 var(--site-header-cta-width);
  inline-size: var(--site-header-cta-width);
  margin-left: 8px;
}

/* ---------------------------- mobile nav toggle --------------- */

.nav-toggle {
  display: none;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-left: 4px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--ink);
  cursor: pointer;
  transition: background 150ms ease;
}

.nav-toggle:hover {
  background: rgba(10, 10, 10, 0.05);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.nav-toggle-lines {
  position: relative;
  display: block;
  width: 20px;
  height: 12px;
}

.nav-toggle-lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.75px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: 50% 50%;
  transition: transform 200ms var(--ease-out), top 180ms var(--ease-out),
              bottom 180ms var(--ease-out);
}

.nav-toggle-lines span:nth-child(1) { top: 0; }
.nav-toggle-lines span:nth-child(2) { bottom: 0; }

/* Morph into an X when the menu is open. */
.site-header[data-menu-open="true"] .nav-toggle-lines span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.site-header[data-menu-open="true"] .nav-toggle-lines span:nth-child(2) {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* Drawer card inside the mobile nav panel. Holds a mini preview of the
 * playground (editor + AST columns) above a call-to-action row. */
.nav-drawer-card {
  display: none;
}

/* Persistent mobile CTA ("Explore the spec") — hidden on desktop,
 * pushes itself and the hamburger to the top-right on mobile. */
.site-header .mobile-spec-cta {
  display: none;
  flex: 0 0 auto;
}

@media (max-width: 960px) {
  .site-header {
    --site-header-brand-width: 184px;
  }

  .brand-wordmark-text {
    font-size: 23px;
  }
}

@media (max-width: 860px) {
  .site-header {
    gap: 12px;
    /* position:relative already not set; header is sticky which gives it
     * a containing block we can hang the panel off. */
  }

  /* Pin the "Explore the spec" pill + hamburger to the top-right. */
  .site-header .mobile-spec-cta {
    display: inline-flex;
    inline-size: 128px;
    margin-left: auto;
    padding: 8px 14px;
    min-height: 36px;
    font-size: 12px;
  }

  .nav-toggle {
    display: inline-flex;
    margin-left: 0;
  }

  /* Hide the desktop "Try the playground" CTA — surfaced inside the
   * nav panel instead so the mobile header stays uncluttered. */
  .site-header .header-cta {
    display: none;
  }

  /* Nav wrapper becomes a dropdown panel pinned under the header. */
  .site-header nav[aria-label="Primary"] {
    position: absolute;
    flex: none;
    inline-size: auto;
    flex-direction: column;
    align-items: stretch;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    padding: 8px var(--gutter) 16px;
    background: rgba(250, 250, 249, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rule);
    transform: translateY(-4px);
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms var(--ease-out), opacity 160ms ease;
    z-index: 35;
  }

  .site-header[data-menu-open="true"] nav[aria-label="Primary"] {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    inline-size: auto;
  }

  .site-nav li {
    list-style: none;
    width: 100%;
  }

  .site-nav a {
    display: block;
    width: 100%;
    padding: 14px 6px;
    min-height: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--rule);
    font-size: 16px;
  }

  .site-nav li:last-child a {
    border-bottom: none;
  }

  /* Playground teaser card — pinned at the bottom of the mobile panel. */
  .nav-drawer-card {
    display: block;
    margin-top: 20px;
    padding: 12px;
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    box-shadow: var(--shadow-border);
    transition: box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out);
  }

  .nav-drawer-card:hover {
    box-shadow: var(--shadow-border-hover);
  }

  .nav-drawer-card:active {
    transform: scale(0.99);
  }

  .nav-drawer-preview {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 6px;
    padding: 10px;
    background: #f5f4f1;
    border-radius: 10px;
    border: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.55;
    overflow: hidden;
  }

  .mpg {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  /* Editor column — gutter + code */
  .mpg-editor {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 6px;
  }

  .mpg-gutter {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--ink-muted);
    text-align: right;
    font-size: 9px;
    opacity: 0.6;
    padding-top: 1px;
  }

  .mpg-code {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .mpg-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink-muted);
  }

  .mpg-indent {
    padding-left: 8px;
  }

  .mpg-br   { color: var(--ink-muted); }
  .mpg-tag  { color: var(--ink); font-weight: 500; }
  .mpg-attr { color: var(--ink-muted); font-style: italic; }
  .mpg-str  { color: var(--ink-soft); }
  .mpg-op   { color: #2f6b86; font-weight: 600; }
  .mpg-id   { color: var(--ink-soft); }

  /* AST column */
  .mpg-ast {
    border-left: 1px dashed var(--rule);
    padding-left: 8px;
    gap: 4px;
  }

  .mpg-ast-label {
    font-size: 8px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 2px;
  }

  .mpg-node {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .mpg-ast-indent {
    padding-left: 8px;
  }

  .mpg-dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--ink);
    flex: none;
  }

  .mpg-dot--reason   { background: var(--cat-reasoning); }
  .mpg-dot--evidence { background: var(--cat-evidence); }

  .mpg-bar {
    flex: 1;
    height: 4px;
    background: var(--rule);
    border-radius: 2px;
  }

  .mpg-bar--short {
    max-width: 60%;
  }

  .nav-drawer-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 6px 6px;
  }

  .nav-drawer-card-body strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
  }

  .nav-drawer-card-body span {
    font-size: 12px;
    color: var(--ink-muted);
  }
}

@media (max-width: 420px) {
  .site-header .mobile-spec-cta {
    display: none;
  }

  .site-header .nav-toggle {
    margin-left: auto;
  }
}

/* ---------------------------- buttons -------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px 11px 22px; /* optical: 2px less on right for trailing arrow weight */
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1;
  border: 1px solid transparent;
  transition-property: background-color, color, border-color, scale, box-shadow;
  transition-duration: 180ms;
  transition-timing-function: var(--ease-out);
  white-space: nowrap;
  min-height: 40px;
}

.btn:active {
  scale: 0.96;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn-primary:hover {
  background: #222222;
}

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: transparent;
  box-shadow: var(--shadow-border);
}

.btn-secondary:hover {
  box-shadow: var(--shadow-border-hover);
}

.btn-ghost {
  padding: 10px 4px;
  color: var(--ink);
  background: transparent;
  border-color: transparent;
  min-height: 40px;
}

.btn-ghost::after {
  content: " →";
  display: inline-block;
  transition-property: translate;
  transition-duration: 180ms;
  transition-timing-function: var(--ease-out);
}

.btn-ghost:hover::after {
  translate: 3px 0;
}

.btn-ghost:hover {
  text-decoration: underline;
  text-decoration-color: var(--ink);
}

/* ---------------------------- pill badges ---------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
  background: var(--surface-raised);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}

.pill strong {
  color: var(--ink);
}

.pill-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--mesh-4);
}

/* ---------------------------- surfaces ------------------------- */

.glass-surface {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-border);
  transition-property: box-shadow;
  transition-duration: 180ms;
  transition-timing-function: var(--ease-out);
}

.card {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: var(--shadow-border);
  transition-property: box-shadow, scale;
  transition-duration: 180ms;
  transition-timing-function: var(--ease-out);
}

.card:hover {
  box-shadow: var(--shadow-border-hover);
}

/* Concentric inner surface inside cards: radius = outer − (padding of parent is 28px)
   When padding is > 24px, the concentric rule treats layers as separate surfaces.
   Use --radius-card-inner (8px) for inner nested surfaces with small padding. */
.card > .inner-surface,
.glass-surface > .inner-surface {
  border-radius: var(--radius-card-inner);
}

/* .conic-backdrop retained as a no-op shim so existing class references don't break. */
.conic-backdrop {
  position: relative;
}

/* ---------------------------- code ----------------------------- */

:root {
  --srml-fg: #1f2328;
  --srml-bg: #ffffff;
  --srml-muted: #57606a;
  --srml-code-border: #d0d7de;
  --srml-tag-atom: #6f42c1;
  --srml-tag-primitive: #0550ae;
  --srml-tag-punct: #57606a;
  --srml-attr: #953800;
  --srml-string: #0a3069;
  --srml-op: #cf222e;
  --srml-id: #1a7f37;
  --srml-number: #0550ae;
  --srml-comment: #6e7781;
  --srml-evidence-supports-bar: #d4f4d6;
  --srml-evidence-supports-text: #1a7f37;
  --srml-evidence-refutes-bar: #ffd9d9;
  --srml-evidence-refutes-text: #cf222e;
  --srml-evidence-neutral-bar: #eaeef2;
  --srml-evidence-neutral-text: #57606a;
  --srml-evidence-default-bar: #f6f8fa;
  --srml-contradiction-bar: #fff8c5;
  --srml-contradiction-text: #9a6700;
  --srml-retract-bar: #f6f8fa;
  --srml-retract-strike: #cf222e;
  --srml-confidence-bg: #eafff1;
  --srml-confidence-text: #1a7f37;
  --srml-uncertainty-bg: #fff8c5;
  --srml-uncertainty-text: #9a6700;
  --srml-structural-border: #d0d7de;
  --srml-id-flash: #fff8c5;
  --gh-shell-command: #8250df;
  --gh-shell-option: #953800;
  --gh-shell-string: #0a3069;
  --gh-shell-variable: #953800;
  --gh-shell-target: #1a7f37;
  --gh-shell-comment: #6e7781;
  --gh-shell-punct: #57606a;
}

pre,
.code-block {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  background: var(--srml-bg);
  color: var(--srml-fg);
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--srml-code-border);
  overflow-x: auto;
  margin: 0;
}

pre code {
  font-size: inherit;
  background: transparent;
  padding: 0;
}

code {
  background: rgba(10, 10, 10, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}

pre code {
  background: none;
}

/* ---------------------------- SRML syntax highlighting ----------
 * GitHub Primer palette from the portable SRML highlighter.
 * Applied by assets/js/srml-highlight.js on SRML-looking <pre><code> blocks.
 */
pre code.hl,
pre.hl {
  color: var(--srml-fg);
}

pre code .hl-tag-atom,
pre.hl .hl-tag-atom {
  color: var(--srml-tag-atom);
  font-weight: 600;
}

pre code .hl-tag-primitive,
pre.hl .hl-tag-primitive {
  color: var(--srml-tag-primitive);
}

pre code .hl-tag-punct,
pre.hl .hl-tag-punct {
  color: var(--srml-tag-punct);
}

pre code .hl-attr,
pre.hl .hl-attr {
  color: var(--srml-attr);
}

pre code .hl-string,
pre.hl .hl-string {
  color: var(--srml-string);
}

pre code .hl-op,
pre.hl .hl-op {
  color: var(--srml-op);
  font-weight: 600;
}

pre code .hl-id,
pre.hl .hl-id {
  color: var(--srml-id);
}

pre code .hl-number,
pre.hl .hl-number {
  color: var(--srml-number);
}

pre code .hl-comment,
pre.hl .hl-comment {
  color: var(--srml-comment);
  font-style: italic;
}

pre code .hl-refer,
pre.hl .hl-refer {
  color: var(--srml-op);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 0.16em;
}

pre code .hl-refer:hover,
pre.hl .hl-refer:hover {
  text-decoration-style: solid;
}

pre code .hl-id-target,
pre code .hl-target-id,
pre.hl .hl-id-target,
pre.hl .hl-target-id {
  border-radius: 2px;
}

pre code .hl-bl,
pre.hl .hl-bl {
  display: inline;
  border-radius: 3px;
  padding: 0 0.15em;
}

pre code .hl-bl-evidence-supports,
pre.hl .hl-bl-evidence-supports {
  background: var(--srml-evidence-supports-bar);
  border-left: 3px solid var(--srml-evidence-supports-text);
  padding-left: 0.5em;
}

pre code .hl-bl-evidence-refutes,
pre.hl .hl-bl-evidence-refutes {
  background: var(--srml-evidence-refutes-bar);
  border-left: 3px solid var(--srml-evidence-refutes-text);
  padding-left: 0.5em;
}

pre code .hl-bl-evidence-neutral,
pre.hl .hl-bl-evidence-neutral {
  background: var(--srml-evidence-neutral-bar);
  border-left: 3px solid var(--srml-evidence-neutral-text);
  padding-left: 0.5em;
}

pre code .hl-bl-evidence,
pre.hl .hl-bl-evidence {
  background: var(--srml-evidence-default-bar);
  padding-left: 0.5em;
}

pre code .hl-bl-contradiction,
pre.hl .hl-bl-contradiction {
  background: var(--srml-contradiction-bar);
  color: var(--srml-contradiction-text);
}

pre code .hl-bl-retract,
pre.hl .hl-bl-retract {
  background: var(--srml-retract-bar);
}

pre code .hl-bl-retract .hl-target-id,
pre.hl .hl-bl-retract .hl-target-id {
  text-decoration: line-through;
  text-decoration-color: var(--srml-retract-strike);
}

pre code .hl-bl-confidence,
pre.hl .hl-bl-confidence {
  background: var(--srml-confidence-bg);
  color: var(--srml-confidence-text);
  border-radius: 999px;
  padding: 0 0.5em;
}

pre code .hl-bl-uncertainty,
pre.hl .hl-bl-uncertainty {
  background: var(--srml-uncertainty-bg);
  color: var(--srml-uncertainty-text);
  border-radius: 999px;
  padding: 0 0.5em;
}

pre code .hl-bl-structural,
pre.hl .hl-bl-structural {
  border-radius: 0;
  box-shadow: inset 2px 0 0 var(--srml-structural-border);
  padding: 0;
}

pre code .hl-id-flash,
pre.hl .hl-id-flash {
  animation: srml-id-flash 1.4s ease-out;
}

@keyframes srml-id-flash {
  0% { background: var(--srml-id-flash); }
  100% { background: transparent; }
}

/* Shell syntax highlighting. Uses the same GitHub Primer light palette as the
 * SRML renderer so install snippets read like default GitHub code blocks. */
pre code.hl-shell,
pre.shell-host {
  color: var(--srml-fg);
}

pre code .hl-shell-command,
pre.shell-host .hl-shell-command {
  color: var(--gh-shell-command);
  font-weight: 600;
}

pre code .hl-shell-option,
pre.shell-host .hl-shell-option {
  color: var(--gh-shell-option);
}

pre code .hl-shell-string,
pre.shell-host .hl-shell-string {
  color: var(--gh-shell-string);
}

pre code .hl-shell-variable,
pre.shell-host .hl-shell-variable {
  color: var(--gh-shell-variable);
}

pre code .hl-shell-target,
pre.shell-host .hl-shell-target {
  color: var(--gh-shell-target);
}

pre code .hl-shell-comment,
pre.shell-host .hl-shell-comment {
  color: var(--gh-shell-comment);
  font-style: italic;
}

pre code .hl-shell-punct,
pre.shell-host .hl-shell-punct {
  color: var(--gh-shell-punct);
}

/* Inline <code> chips in prose — same paper-chip treatment so markup
 * like <Thinking> sits in a box inline with running text. */
p code,
li code,
td code,
dd code {
  background: rgba(10, 10, 10, 0.05);
  border: 1px solid var(--rule);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--ink);
  white-space: nowrap;
}

/* SRML-highlighted tokens. */
.code-block .t { color: #c07dff; }
.code-block .k { color: #6ac9f2; }
.code-block .s { color: #0a0a0a; }
.code-block .c { color: var(--ink-muted); font-style: italic; }

/* Annotated code with margin labels (spec 2 + 6). */
.code-annotated {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

@media (min-width: 900px) {
  .code-annotated {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 32px;
  }
}

.code-annotated .annotations {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.code-annotated .annotations li {
  padding-left: 18px;
  position: relative;
  list-style: none;
}

.code-annotated .annotations li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 1px;
  background: var(--rule);
}

/* ---------------------------- atom chips ----------------------- */

.atom-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 10, 0.04);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}

.num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

/* ---------------------------- atom cards ----------------------- */

.atom-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* min-width: 0 lets the card shrink inside a minmax(0,1fr) grid track;
   * without it, a long <pre> inside forces the card wider than the track. */
  min-width: 0;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-card);
  padding: 24px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-border);
  transition-property: box-shadow, scale;
  transition-duration: 180ms;
  transition-timing-function: var(--ease-out);
}

.atom-card:hover {
  box-shadow: var(--shadow-border-hover);
}

/* Category signaled by a small 5px dot beside the eyebrow — chrome-free. */
.atom-card[data-cat] .category-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.atom-card[data-cat] .category-tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ink);
  flex: none;
}

.atom-card[data-cat="reasoning"] .category-tag::before { background: var(--cat-reasoning); }
.atom-card[data-cat="evidence"] .category-tag::before { background: var(--cat-evidence); }
.atom-card[data-cat="control"] .category-tag::before { background: var(--cat-control); }
.atom-card[data-cat="reference"] .category-tag::before { background: var(--cat-reference); }
.atom-card[data-cat="social"] .category-tag::before { background: var(--cat-social); }
.atom-card[data-cat="meta"] .category-tag::before { background: var(--cat-meta); }

.atom-card .tag {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}

.atom-card .summary {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.atom-card pre {
  font-size: 12px;
  padding: 12px;
  border-radius: 10px;
  max-width: 100%;
  overflow-x: auto;
  /* Preserve indentation — scroll rather than wrap, so XML-like samples
   * keep their structure. */
  white-space: pre;
}

.atom-card pre code {
  display: block;
  /* Let the <pre> be the scrolling container; code shouldn't add its own. */
  white-space: inherit;
}

.atom-card .category-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-family: var(--font-body);
}

.atom-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.card-grid-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  max-inline-size: 800px;
}

.card-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 720px) {
  .card-grid-2x2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------- category sections ---------------- */

.atom-category {
  margin-block-end: var(--space-sm);
}

.atom-category h2 {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block-end: 16px;
  margin-block-end: 24px;
  padding-top: 20px;
  font-size: clamp(24px, 3.5vw, 36px);
  border-top: 1px solid var(--rule);
}

/* Category signaled by a small dot at the left of the hairline — not a 3px bar. */
.atom-category[data-cat] h2::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ink);
}
.atom-category[data-cat="reasoning"] h2::before { background: var(--cat-reasoning); }
.atom-category[data-cat="evidence"] h2::before { background: var(--cat-evidence); }
.atom-category[data-cat="control"] h2::before { background: var(--cat-control); }
.atom-category[data-cat="reference"] h2::before { background: var(--cat-reference); }
.atom-category[data-cat="social"] h2::before { background: var(--cat-social); }
.atom-category[data-cat="meta"] h2::before { background: var(--cat-meta); }

.atom-category h2 small {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------------------------- hero ----------------------------- */

.hero {
  position: relative;
  padding: clamp(72px, 12vw, 140px) var(--gutter) clamp(64px, 10vw, 120px);
  overflow: hidden;
  isolation: isolate;
  /* No solid background — inherits the body paper grain so the hero and
     the sections below share one continuous surface (no seam). */
  background: transparent;
}

/* Faint radial wash, feathered at top and bottom so nothing creates a line. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 500px at 80% 25%, rgba(10, 10, 10, 0.035), transparent 60%),
    radial-gradient(900px 400px at 10% 70%, rgba(10, 10, 10, 0.025), transparent 60%);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 18%,
    #000 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 18%,
    #000 72%,
    transparent 100%
  );
  z-index: 0;
  pointer-events: none;
}

.hero-overlay {
  position: relative;
  z-index: 2;
  max-inline-size: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

@media (min-width: 960px) {
  .hero-overlay {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 64px;
  }
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  min-width: 0;
}

.hero-text h1 {
  font-size: clamp(44px, 7.5vw, 88px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-inline-size: 12ch;
}

.hero-text .lede {
  max-inline-size: 560px;
}

.hero-text .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.hero-illustration {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 720px) {
  .hero-illustration {
    min-height: 280px;
  }
}

.hero-sketch {
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0.92;
  display: block;
}

/* ---------------------------- numeral ---------------------------- */

.numeral {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 72px);
  color: var(--ink-muted);
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "lnum";
  font-variant-numeric: tabular-nums lining-nums;
}

.numeral-huge {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(120px, 18vw, 220px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
}

/* ---------------------------- sticky sub-nav ------------------- */

.subnav {
  position: sticky;
  /* Sit flush under the sticky site-header. Header is ~64px tall with
   * 14px vertical padding + CTA pill (~36px). */
  top: 64px;
  z-index: 20;
  background: rgba(250, 250, 249, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  padding: 8px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}

.subnav::-webkit-scrollbar {
  display: none;
}

.subnav ul {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-inline-size: var(--container);
  margin-inline: auto;
}

.subnav a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease, background 150ms ease;
}

/* Leading section number rendered as a tabular-nums chip —
 * visually distinct from the label, consistent column widths. */
.subnav a::before {
  content: attr(data-num);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  letter-spacing: 0;
}

.subnav a:hover,
.subnav a.is-active {
  color: var(--ink);
  background: rgba(10, 10, 10, 0.06);
}

.subnav a:hover::before,
.subnav a.is-active::before {
  color: var(--ink);
}

/* Hairline separator between the site-header and the subnav so the
 * two sticky bars read as distinct editorial rules. */
.site-header::before {
  border-bottom-color: var(--rule);
}

/* Give anchored sections a scroll margin so deep-linking lands below
 * the stacked sticky header + subnav instead of under them. */
:is(section, article)[id] {
  scroll-margin-top: calc(64px + 48px + 8px);
}

/* ---------------------------- tables --------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table th,
.table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.table th {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.table code {
  background: rgba(10, 10, 10, 0.04);
}

/* Spec tables (operators, primitives, prior-art) need horizontal scroll
 * on narrow viewports — their example cells contain code that should NOT
 * wrap. The host container scrolls; the <table> claims its natural width. */
#operator-table,
#primitives-table,
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#operator-table .table,
#primitives-table .table,
.table-scroll .table {
  min-width: 560px;
}

.enhancements-table th:nth-child(3),
.enhancements-table td:nth-child(3) {
  min-width: 88px;
  white-space: nowrap;
  overflow-wrap: normal;
}

.kind-logical { color: var(--op-logical); font-weight: 500; }
.kind-quantifier { color: var(--op-quantifier); font-weight: 500; }
.kind-temporal { color: var(--op-temporal); font-weight: 500; }
.kind-reference { color: var(--op-reference); font-weight: 500; }
.kind-identity { color: var(--op-identity); font-weight: 500; }
.kind-decorative { color: var(--ink-muted); font-weight: 500; }

/* ---------------------------- tabs ----------------------------- */

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  width: fit-content;
  background: var(--surface);
}

.tabs button {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}

.tabs button:hover {
  color: var(--ink);
}

.tabs button[aria-selected="true"] {
  color: var(--paper);
  background: var(--ink);
}

.tab-panel[hidden] {
  display: none;
}

/* ---------------------------- split-text scramble -------------- */

.word {
  display: inline-block;
  white-space: nowrap;
}

.char {
  display: inline-block;
  will-change: transform, opacity;
}

.char.char-em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

/* Reveal defaults: visible. The page modules add `.js-ready` to <html>
 * as their first statement; if ES-module imports fail (e.g. file:// CORS
 * on Chrome/Safari), that line never runs, `.js-ready` never lands, and
 * these rules leave every [data-reveal] element visible. When JS boots,
 * `.js-ready` gates the hidden state so the scroll-triggered animation
 * still plays. Do NOT flip this default back — it is the whole reason
 * content shows up when index.html is opened directly from the filesystem. */
[data-reveal] {
  opacity: 1;
  transform: none;
}

.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
}

.js-ready [data-reveal].is-shown {
  opacity: 1;
  transform: none;
  transition: opacity 700ms cubic-bezier(0.2, 0.6, 0.1, 1),
    transform 700ms cubic-bezier(0.2, 0.6, 0.1, 1);
}

/* Reduced-motion safety net — always show content, no animation. */
@media (prefers-reduced-motion: reduce) {
  .js-ready [data-reveal],
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------- mermaid theming ------------------ */

.mermaid-host svg {
  max-width: 100%;
  height: auto;
  background: transparent;
}

.mermaid-host .node rect,
.mermaid-host .node polygon,
.mermaid-host .node path {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 1.2;
  rx: 8;
}

.mermaid-host .edgePath path,
.mermaid-host .flowchart-link {
  stroke: var(--ink);
  stroke-width: 1.2;
  fill: none;
}

.mermaid-host .arrowheadPath {
  fill: var(--ink);
  stroke: var(--ink);
}

.mermaid-host .nodeLabel,
.mermaid-host .label,
.mermaid-host .edgeLabel {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  fill: var(--ink);
}

.mermaid-host .edgeLabel {
  background: var(--surface);
  padding: 2px 6px;
}

/* Per-category accent via data-cat rendered by mermaid-theme.js. */
.mermaid-host .node[data-cat="reasoning"] rect { stroke: var(--cat-reasoning); stroke-width: 2.4; }
.mermaid-host .node[data-cat="evidence"] rect { stroke: var(--cat-evidence); stroke-width: 2.4; }
.mermaid-host .node[data-cat="control"] rect { stroke: var(--cat-control); stroke-width: 2.4; }
.mermaid-host .node[data-cat="reference"] rect { stroke: var(--cat-reference); stroke-width: 2.4; }
.mermaid-host .node[data-cat="social"] rect { stroke: var(--cat-social); stroke-width: 2.4; }
.mermaid-host .node[data-cat="meta"] rect { stroke: var(--cat-meta); stroke-width: 2.4; }

/* ---------------------------- SRML renderer cards -------------- */

.srml-tree {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.srml-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.srml-step-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.srml-step-header .step-name {
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 15px;
}

.srml-node {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  transition: background 150ms ease;
}

.srml-node-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.srml-node-kind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

/* Category indicator: a small dot before the kind label.
 * Replaces the colored left border — same information, less chrome. */
.srml-node[data-cat] .srml-node-kind::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ink);
  flex: none;
}
.srml-node[data-cat="reasoning"] .srml-node-kind::before { background: var(--cat-reasoning); }
.srml-node[data-cat="evidence"]  .srml-node-kind::before { background: var(--cat-evidence); }
.srml-node[data-cat="control"]   .srml-node-kind::before { background: var(--cat-control); }
.srml-node[data-cat="reference"] .srml-node-kind::before { background: var(--cat-reference); }
.srml-node[data-cat="social"]    .srml-node-kind::before { background: var(--cat-social); }
.srml-node[data-cat="meta"]      .srml-node-kind::before { background: var(--cat-meta); }

.srml-node-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}

/* v0.6 — content-addressable canonical_id chip in the AST node header.
 * Hairline, monospace, muted; pushed to the right of the header. The
 * mismatch state borrows the error ink to mirror the validator's
 * canonical_id_well_formed hard-fail. */
.srml-node-cid {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-muted);
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid var(--hairline, rgba(0, 0, 0, 0.12));
  border-radius: 4px;
  white-space: nowrap;
}

.srml-node-cid.is-cid-mismatch {
  color: #d23f3f;
  border-color: #d23f3f;
}

/* v0.6 lazy-prelude preview output in the playground. Monospace, scrollable,
 * wraps long inline-mode XML so the panel never blows out the layout. */
.pg-prelude-output {
  max-block-size: 360px;
  overflow: auto;
}
.pg-prelude-output code {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.55;
}

.srml-node-summary {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Tree connectors for the AST: a solid trunk on the left of the children
 * container, and a short horizontal tick (elbow) from the trunk to each
 * child node. Depth is communicated by a grey ramp — full ink at the
 * top-level, progressively lighter the deeper we nest. */
.srml-node-children {
  --tree-line: var(--ink);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding-left: 22px;
  border-left: 1px solid var(--tree-line);
}

.srml-node-children > .srml-node {
  position: relative;
}

.srml-node-children > .srml-node::before {
  content: "";
  position: absolute;
  left: -23px;
  top: 20px;
  width: 14px;
  height: 1px;
  background: var(--tree-line);
}

/* Greys ramp — each nested level lightens the tree line. */
.srml-node-children .srml-node-children            { --tree-line: #4a4a4a; }
.srml-node-children .srml-node-children .srml-node-children { --tree-line: #7a7a7a; }
.srml-node-children .srml-node-children .srml-node-children .srml-node-children { --tree-line: #a8a8a8; }

.srml-node.is-pulsing {
  animation: srml-pulse 600ms ease;
}

@keyframes srml-pulse {
  0%, 100% { background: var(--surface); }
  30% { background: #fff1b8; border-color: var(--mesh-1); }
}

/* ---------------------------- validator drawer ----------------- */

.validator-drawer {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: 18px 20px;
}

.validator-drawer summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}

.validator-drawer summary::-webkit-details-marker {
  display: none;
}

.validator-drawer summary::before {
  content: "›";
  display: inline-block;
  font-size: 16px;
  color: var(--ink-muted);
  transition: transform 150ms ease;
}

.validator-drawer[open] summary::before {
  transform: rotate(90deg);
}

/* Current-spec features detected — surfaced next to the validator drawer summary
   when the parsed trace uses constructs such as Concluding, Goal criticality,
   Finding.for_hyp, or structural primitives. */
.v04-badge {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: rgba(106, 201, 242, 0.14);
  border: 1px solid rgba(106, 201, 242, 0.55);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* On narrow viewports the summary row crams the caret, bold "Validator",
   the long phrase, and the version badge onto one line — the badge
   visually overlaps the title. Stack to a two-line block: title row, then
   badge left-aligned underneath. Desktop layout (≥720px) is unchanged. */
@media (max-width: 720px) {
  .validator-drawer summary {
    flex-direction: column;
    align-items: flex-start;
  }
  .validator-drawer .v04-badge {
    margin-left: 0;
    margin-top: 8px;
    max-width: max-content;
  }
}

/* Gallery version chip. The chip sits in the trace card header so a visitor can
   glance at the gallery and tell which examples exercise current grammar. */
.version-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  margin-left: 8px;
  vertical-align: middle;
}

.version-chip[data-version="v0.6"] {
  background: rgba(106, 201, 242, 0.14);
  border-color: rgba(106, 201, 242, 0.55);
  color: var(--ink);
}

/* "Try in playground" deep-link rendered as a quiet anchor button. */
.try-in-playground {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  align-self: flex-start;
}

.try-in-playground:hover {
  color: var(--mesh-1);
  border-color: var(--mesh-1);
}

.validator-rules {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.validator-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-size: 13px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.validator-rule:hover {
  border-color: var(--ink);
}

.validator-rule .status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--paper);
  flex: 0 0 auto;
}

.validator-rule.is-ok .status {
  background: #1fa463;
}

.validator-rule.is-fail .status {
  background: #d23f3f;
}

.validator-rule.is-warning .status {
  background: #c77d00;
}

.validator-rule .rule-title {
  font-weight: 500;
  color: var(--ink);
}

.validator-rule .rule-msg {
  color: var(--ink-muted);
  font-size: 12px;
}

/* ---------------------------- playground ----------------------- */

.pg-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 920px) {
  .pg-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
  }
}

.pg-editor {
  position: relative;
  display: flex;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #fbfbf9;
  min-height: 460px;
}

.pg-editor-code-wrap {
  position: relative;
  display: grid;
  flex: 1;
  min-width: 0;
  min-height: 460px;
}

.pg-editor .gutter {
  padding: 16px 10px 16px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  text-align: right;
  user-select: none;
  border-right: 1px solid var(--rule);
  min-width: 44px;
  white-space: pre;
  line-height: 1.6;
}

.pg-editor-highlight,
.pg-editor textarea {
  grid-area: 1 / 1;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 460px;
  padding: 16px;
  margin: 0;
  border: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0;
  tab-size: 2;
  white-space: pre;
}

.pg-editor-highlight {
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  pointer-events: none;
  z-index: 0;
}

.pg-editor-highlight code {
  display: block;
  min-height: 100%;
  background: transparent;
  padding: 0;
  white-space: pre;
}

.pg-editor-highlight .hl-bl {
  background: transparent;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  padding: 0;
}

.pg-editor-highlight .hl-refer {
  cursor: text;
  text-decoration: none;
}

.pg-editor textarea {
  resize: none;
  outline: none;
  overflow: auto;
  background: transparent;
  color: transparent;
  caret-color: var(--ink);
  -webkit-text-fill-color: transparent;
  z-index: 1;
}

.pg-editor textarea::selection {
  background: rgba(9, 105, 218, 0.18);
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.pg-editor textarea:focus {
  outline: 0;
}

.pg-tree {
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 18px;
  min-height: 460px;
  overflow: auto;
}

.pg-tree.is-stale {
  opacity: 0.55;
}

.pg-error {
  border: 1px solid #e8c5c5;
  background: #fff3f3;
  color: #a02020;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  margin-bottom: 12px;
}

.pg-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.pg-disclaimer {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-muted);
  font-size: 13px;
  margin-top: 16px;
}

/* Select styled as a pill. */
.pill-select {
  display: inline-flex;
  align-items: center;
  padding: 8px 28px 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* ---------------------------- gallery side-nav ----------------- */

.gallery-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 980px) {
  .gallery-layout {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
}

.gallery-sidenav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 80px;
}

@media (max-width: 979px) {
  .gallery-sidenav {
    flex-direction: row;
    overflow-x: auto;
    position: static;
    padding-block: 8px;
    scrollbar-width: none;
  }
  .gallery-sidenav::-webkit-scrollbar {
    display: none;
  }
}

.gallery-sidenav a {
  display: inline-flex;
  align-items: flex-start;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  text-wrap: pretty;
  line-height: 1.35;
  transition: color 150ms ease, background 150ms ease;
}

/* On mobile the sidenav is a horizontal scroll-strip of pill chips, so
 * each item must stay on one line. On desktop it's a 200px vertical
 * column, where long trace names (e.g. "Risk-aware change routing with
 * Effect, Meta, and test_owner") need to wrap inside the rail rather
 * than overflow into the main content. */
@media (max-width: 979px) {
  .gallery-sidenav a {
    white-space: nowrap;
    align-items: center;
  }
}

.gallery-sidenav a.is-active,
.gallery-sidenav a:hover {
  color: var(--ink);
  background: rgba(10, 10, 10, 0.05);
}

.gallery-sidenav a.is-active {
  background: var(--ink);
  color: var(--paper);
}

.trace-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-block: 36px;
  border-bottom: 1px solid var(--rule);
  max-inline-size: 800px;
  scroll-margin-top: 104px;
}

/* Paragraph block (title, blurb, CTAs) stacks above the display
 * (Diagram / XML-ish / JSON tabs). At every viewport. */

.trace-section h2 {
  font-size: clamp(22px, 2.4vw, 32px);
  margin-bottom: 10px;
}

.trace-section .trace-blurb {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 18px;
}

.trace-section .trace-display {
  padding: 20px;
  min-height: 260px;
  position: relative;
  isolation: isolate;
}

.trace-section .trace-display pre {
  max-height: 420px;
  overflow: auto;
}

/* ---------------------------- philosophy ----------------------- */

.premise-deepdive {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 900px) {
  .premise-deepdive {
    grid-template-columns: clamp(140px, 15vw, 220px) 1fr;
    gap: 48px;
    align-items: start;
  }
}

.premise-deepdive .ruled-out {
  margin-top: 20px;
  padding: 18px 20px;
  border-left: 3px solid var(--mesh-1);
  background: #fff6f5;
  border-radius: 0 12px 12px 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.prior-art {
  overflow-x: auto;
}

.prior-art table {
  min-width: 620px;
}

.prior-art td svg {
  display: inline-block;
  vertical-align: middle;
}

.pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.35;
  color: var(--ink);
  border-left: 3px solid var(--mesh-5);
  padding: 12px 0 12px 24px;
  max-inline-size: 640px;
}

.open-question {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding-block: 18px;
  border-bottom: 1px dashed var(--rule);
}

.open-question .num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 300;
  color: var(--ink-muted);
  line-height: 1;
}

.open-question h3 {
  margin-bottom: 6px;
}

/* ---------------------------- about ---------------------------- */

.timeline {
  position: relative;
  padding-left: 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--rule);
}

.timeline .tl-item {
  position: relative;
}

.timeline .tl-item::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--ink);
}

.timeline time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
}

/* ---------------------------- footer --------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: var(--space-lg);
  padding-block: 48px;
}

.site-footer .container-footer {
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  font-size: 13px;
  color: var(--ink-soft);
}

@media (min-width: 720px) {
  .site-footer .container-footer {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
  }
}

.site-footer h4 {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
  font-weight: 500;
}

.site-footer a {
  color: var(--ink);
  text-decoration: none;
}

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

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-credit {
  color: var(--ink-soft);
  margin-top: 12px;
}

.license-stamp {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

.archive-note {
  margin: 24px auto 0;
  max-width: 720px;
  padding: 14px 18px;
  border: 1px solid var(--rule, rgba(0, 0, 0, 0.12));
  border-left: 3px solid var(--ink-muted, #888);
  background: var(--paper-soft, rgba(0, 0, 0, 0.02));
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.archive-note a {
  color: inherit;
  text-decoration: underline;
}

/* ---------------------------- utilities ------------------------ */

.u-center {
  text-align: center;
}

.u-stack-12 > * + * {
  margin-top: 12px;
}

.u-stack-16 > * + * {
  margin-top: 16px;
}

.u-stack-24 > * + * {
  margin-top: 24px;
}

.u-muted {
  color: var(--ink-muted);
}

.u-soft {
  color: var(--ink-soft);
}

/* ---------------------------- page background ------------------ */
/*
 * Fixed full-viewport <canvas id="bg-shader"> renders a subtle WebGL FBM
 * noise texture behind every page at z-index: -1. JS-free SVG noise is
 * kept as a progressive-enhancement fallback on body in case WebGL fails.
 */

.bg-shader {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  display: block;
}

html {
  background-color: var(--paper);
  /* SVG fallback grain — shows only if bg-shader fails to render. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  background-repeat: repeat;
  background-attachment: fixed;
}

body {
  background: transparent;
}

/* ---------------------------- home current redo ---------------- *
 * All .home-* classes are scoped to the marketing home page so they
 * don't bleed into spec / gallery / playground. The conic-mesh hero
 * background uses --mesh-1..6 at low opacity (PRD cap 0.18), kept
 * restful by a heavy blur. Value-prop cards take their accent from
 * --cat-* via data-home-cat.
 */

.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(36px, 6vw, 72px) var(--gutter) clamp(64px, 10vw, 120px);
  background: transparent;
}

/* Conic-mesh wash — six --mesh stops, heavy blur, capped opacity. */
.home-hero::before {
  content: "";
  position: absolute;
  inset: -15% -10% -25%;
  background: conic-gradient(
    from 215deg at 68% 32%,
    var(--mesh-1) 0deg,
    var(--mesh-2) 60deg,
    var(--mesh-3) 120deg,
    var(--mesh-4) 180deg,
    var(--mesh-5) 240deg,
    var(--mesh-6) 300deg,
    var(--mesh-1) 360deg
  );
  filter: blur(90px) saturate(0.85);
  opacity: 0.16;
  z-index: -1;
  pointer-events: none;
}

/* Feather the bottom of the wash into the paper so there's no seam. */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 70%,
    var(--paper) 100%
  );
  z-index: -1;
  pointer-events: none;
}

.home-hero-inner {
  position: relative;
  z-index: 1;
  max-inline-size: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 42px);
  align-items: center;
  justify-items: center;
}

.home-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  min-inline-size: 0;
  max-inline-size: 940px;
  margin-inline: auto;
  text-align: center;
}

.home-hero h1 {
  font-size: clamp(44px, 7.5vw, 88px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-inline-size: 18ch;
  margin: 0 auto;
}

.home-hero-lede {
  max-inline-size: 690px;
  margin-inline: auto;
  margin-top: 4px;
  text-wrap: balance; /* even the lines so the tail isn't a lonely "diff, and replay." */
}

.home-hero-linkline {
  display: block;
  margin-top: 6px;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

/* Real touch target on phones. */
.home-cta {
  min-height: 44px;
  padding-block: 13px;
}

/* Hero editor */
.home-hero-editor {
  display: flex;
  justify-content: center;
  width: 100%;
  min-inline-size: 0;
}

.stream-editor {
  --stream-bg: #11100d;
  --stream-panel: #171610;
  --stream-panel-soft: #211f18;
  --stream-rule: rgba(255, 255, 255, 0.09);
  --stream-ink: rgba(255, 255, 255, 0.9);
  --stream-muted: rgba(255, 255, 255, 0.48);
  --stream-dim: rgba(255, 255, 255, 0.32);
  --stream-tag: #ff8aa0;
  --stream-attr: #f5bf73;
  --stream-string: #93d9f4;
  --stream-id: #9be27d;
  --stream-op: #f46f6f;
  --stream-number: #d7c8ff;
  position: relative;
  width: min(100%, 1080px);
  min-height: clamp(380px, 44vw, 520px);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 94, 122, 0.14), transparent 34%),
    radial-gradient(circle at 90% 26%, rgba(106, 201, 242, 0.12), transparent 32%),
    var(--stream-bg);
  color: var(--stream-ink);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 44px -20px rgba(10, 10, 10, 0.54),
    0 34px 80px -46px rgba(10, 10, 10, 0.72);
}

.stream-editor::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 100% 26px, 52px 100%;
  opacity: 0.18;
}

.stream-editor-titlebar,
.stream-editor-tabs,
.stream-editor-footer {
  position: relative;
  z-index: 1;
}

.stream-editor-titlebar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 34px;
  padding: 0 14px;
  background: rgba(9, 8, 6, 0.82);
  border-bottom: 1px solid var(--stream-rule);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--stream-muted);
}

.stream-window-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.stream-window-controls span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.stream-window-title {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-window-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
}

.stream-window-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stream-window-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--cat-control);
  box-shadow: 0 0 14px rgba(155, 226, 125, 0.82);
}

.stream-editor.is-paused .stream-window-status::before {
  background: var(--stream-muted);
  box-shadow: none;
}

.stream-pause-button {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.05);
  transition:
    border-color 160ms var(--ease-out),
    background 160ms var(--ease-out),
    color 160ms var(--ease-out);
}

.stream-pause-button:hover {
  border-color: rgba(155, 226, 125, 0.42);
  color: rgba(255, 255, 255, 0.92);
  background: rgba(155, 226, 125, 0.10);
}

.stream-pause-button:focus-visible {
  outline: 2px solid var(--cat-control);
  outline-offset: 2px;
}

.stream-pause-button:disabled {
  cursor: default;
  opacity: 0.46;
}

.stream-pause-button:disabled:hover {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.05);
}

.stream-pause-icon {
  position: relative;
  width: 9px;
  height: 10px;
}

.stream-pause-icon::before,
.stream-pause-icon::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 3px;
  border-radius: 1px;
  background: currentColor;
}

.stream-pause-icon::before {
  left: 0;
}

.stream-pause-icon::after {
  right: 0;
}

.stream-editor.is-paused .stream-pause-icon {
  width: 0;
  height: 0;
  border-block: 5px solid transparent;
  border-left: 8px solid currentColor;
}

.stream-editor.is-paused .stream-pause-icon::before,
.stream-editor.is-paused .stream-pause-icon::after {
  content: none;
}

.stream-editor-tabs {
  display: flex;
  min-height: 36px;
  background: rgba(18, 17, 13, 0.94);
  border-bottom: 1px solid var(--stream-rule);
  overflow-x: auto;
  scrollbar-width: none;
}

.stream-editor-tabs::-webkit-scrollbar {
  display: none;
}

.stream-tab {
  display: inline-flex;
  align-items: center;
  min-width: 112px;
  padding: 0 14px;
  border-right: 1px solid var(--stream-rule);
  color: var(--stream-muted);
  font-family: var(--font-body);
  font-size: 12px;
  white-space: nowrap;
}

.stream-tab.is-active {
  background: var(--stream-panel);
  color: var(--stream-ink);
}

.stream-editor-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  height: clamp(300px, 36vw, 430px);
  background: rgba(17, 16, 13, 0.86);
}

.stream-editor-gutter {
  padding: 18px 12px 18px 0;
  overflow: hidden;
  border-right: 1px solid var(--stream-rule);
  color: var(--stream-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  text-align: right;
  user-select: none;
  font-variant-numeric: tabular-nums;
  white-space: pre;
}

.stream-editor-code {
  height: 100%;
  margin: 0;
  padding: 18px 20px;
  overflow: hidden auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--stream-ink);
  font-size: clamp(11px, 1.18vw, 13px);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

.stream-editor-code code {
  display: block;
  min-width: 0;
  background: transparent;
  padding: 0;
}

.stream-editor-code .stream-tag {
  color: var(--stream-tag);
  font-weight: 600;
}

.stream-editor-code .stream-punct {
  color: rgba(255, 255, 255, 0.42);
}

.stream-editor-code .stream-attr {
  color: var(--stream-attr);
}

.stream-editor-code .stream-string {
  color: var(--stream-string);
}

.stream-editor-code .stream-id {
  color: var(--stream-id);
}

.stream-editor-code .stream-op {
  color: var(--stream-op);
  font-weight: 600;
}

.stream-editor-code .stream-number {
  color: var(--stream-number);
}

.stream-editor-code .stream-cursor {
  display: inline-block;
  width: 0.62em;
  height: 1.12em;
  margin-left: 2px;
  translate: 0 0.14em;
  border-radius: 1px;
  background: var(--cat-control);
  box-shadow: 0 0 18px rgba(155, 226, 125, 0.64);
  animation: stream-cursor-blink 1s steps(2, start) infinite;
}

.stream-editor-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  padding: 9px 14px;
  border-top: 1px solid var(--stream-rule);
  background: rgba(9, 8, 6, 0.86);
  color: var(--stream-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

@keyframes stream-cursor-blink {
  0%,
  55% {
    opacity: 1;
  }
  56%,
  100% {
    opacity: 0;
  }
}

@media (min-width: 980px) {
  .home-hero {
    padding-block: clamp(24px, 3vw, 36px) clamp(58px, 8vw, 104px);
  }
}

@media (max-width: 720px) {
  .stream-editor {
    width: 100%;
    min-height: 360px;
    border-radius: 14px;
  }

  .stream-editor-titlebar {
    min-height: 32px;
    padding-inline: 12px;
  }

  .stream-window-status {
    font-size: 10px;
  }

  .stream-tab {
    min-width: 96px;
    padding-inline: 12px;
  }

  .stream-editor-body {
    grid-template-columns: 38px minmax(0, 1fr);
    height: 286px;
  }

  .stream-editor-gutter {
    padding: 14px 9px 14px 0;
    font-size: 10px;
  }

  .stream-editor-code {
    padding: 14px 12px;
    font-size: 10.5px;
    line-height: 1.62;
    overflow-x: auto;
  }

  .stream-editor-footer {
    min-height: 32px;
    padding: 8px 12px;
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  .stream-window-title {
    text-align: left;
  }

  .stream-window-status {
    display: none;
  }

  .stream-editor-tabs {
    min-height: 32px;
  }

  .stream-tab {
    min-width: 88px;
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stream-editor-code .stream-cursor {
    animation: none;
    opacity: 1;
  }
}

/* Spec intro */
.home-spec-intro {
  padding-block: 0;
}

.home-spec-intro h2 {
  max-inline-size: 860px;
  text-wrap: balance;
}

.home-spec-intro-body {
  margin-top: 16px;
  max-inline-size: 860px;
  text-wrap: pretty;
}

/* Living example */
.home-section-lede {
  margin-top: 14px;
  max-inline-size: 640px;
}

.home-example {
  margin-top: 32px;
  /* Constrain to container; horizontal scroll inside, never on body. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-inline-size: 100%;
}

.home-example-caption {
  margin-top: 16px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* Problem framing */
.home-problem-body {
  margin-top: 18px;
  max-inline-size: 760px;
  color: var(--ink);
}

/* Value-prop cards */
.home-value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 36px;
}

@media (min-width: 820px) {
  .home-value-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}

.home-value-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 26px 24px;
  background: var(--surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--ink-muted);
  text-decoration: none;
  color: var(--ink);
  transition-property: border-color, box-shadow, translate;
  transition-duration: 180ms;
  transition-timing-function: var(--ease-out);
}

.home-value-card:hover {
  box-shadow: var(--shadow-border-hover);
  translate: 0 -2px;
}

/* Category-colored 1px border around the whole card (replaces the
 * earlier top-only color stripe, which looked like a floating "hat"
 * over the rounded corners). */
.home-value-card[data-home-cat="reasoning"] { border-color: var(--cat-reasoning); }
.home-value-card[data-home-cat="evidence"]  { border-color: var(--cat-evidence); }
.home-value-card[data-home-cat="control"]   { border-color: var(--cat-control); }
.home-value-card[data-home-cat="reference"] { border-color: var(--cat-reference); }
.home-value-card[data-home-cat="social"]    { border-color: var(--cat-social); }
.home-value-card[data-home-cat="meta"]      { border-color: var(--cat-meta); }

.home-value-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.home-value-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ink-muted);
}

.home-value-card[data-home-cat="reasoning"] .home-value-eyebrow::before { background: var(--cat-reasoning); }
.home-value-card[data-home-cat="evidence"]  .home-value-eyebrow::before { background: var(--cat-evidence); }
.home-value-card[data-home-cat="control"]   .home-value-eyebrow::before { background: var(--cat-control); }
.home-value-card[data-home-cat="reference"] .home-value-eyebrow::before { background: var(--cat-reference); }
.home-value-card[data-home-cat="social"]    .home-value-eyebrow::before { background: var(--cat-social); }
.home-value-card[data-home-cat="meta"]      .home-value-eyebrow::before { background: var(--cat-meta); }

.home-value-title {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.home-value-body {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.home-value-link {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: translate 180ms var(--ease-out);
}

.home-value-card:hover .home-value-link {
  translate: 3px 0;
}

/* News index article cards. Hairline neutral borders; the kind is an
   eyebrow with a neutral dot — no colored category chrome. The lead
   (latest) story spans full width as a featured card on wider screens. */
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 8px;
}
.news-card {
  display: flex;
  flex-direction: column;
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 180ms var(--ease-out), translate 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.news-card:hover,
.news-card:focus-visible {
  border-color: var(--ink);
  translate: 0 -2px;
  box-shadow: var(--shadow-border-hover);
}
.news-card-kind {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.news-card-kind::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ink-muted);
}
.news-card-title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 23px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.news-card-desc {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
  max-inline-size: 62ch;
}
.news-card-more {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: translate 180ms var(--ease-out);
}
.news-card:hover .news-card-more {
  translate: 3px 0;
}

/* Quick start */
.home-quickstart {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.home-quickstart-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}

.home-quickstart-step:first-child {
  border-top: 0;
  padding-top: 0;
}

.home-quickstart-step .numeral {
  font-size: clamp(32px, 4.5vw, 52px);
  min-width: 1.6em;
}

.home-quickstart-body {
  min-width: 0;
}

.home-quickstart-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.home-quickstart-code {
  margin: 0;
  overflow-x: auto;
  max-inline-size: 100%;
}

/* Agent harness panel */
.home-built-in {
  padding: clamp(32px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.home-built-in-title {
  margin: 4px 0 0;
  font-size: clamp(28px, 4vw, 44px);
  max-inline-size: 22ch;
}

.home-built-in-body {
  margin: 4px 0 0;
  max-inline-size: 640px;
}

.home-built-in-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

/* ============================================================== */
/* plugins.html - local Codex/MCP plugin documentation            */
/* ============================================================== */

.plugins-hero .lede {
  margin-top: 20px;
  max-inline-size: 760px;
}

.plugins-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.plugins-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 36px;
}

.plugins-host-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-block-size: 52px;
}

.plugins-host-card-header .category-tag {
  min-width: 0;
}

.plugins-host-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  inline-size: 108px;
  block-size: 52px;
}

.plugins-host-logo img {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
}

.plugins-host-logo-codex {
  inline-size: 56px;
}

.plugins-host-logo-codex img {
  inline-size: 48px;
  block-size: 48px;
}

.plugins-host-logo-claude-code {
  inline-size: 44px;
}

.plugins-host-logo-claude-code img {
  inline-size: 30px;
  block-size: 31px;
}

@media (min-width: 860px) {
  .plugins-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.plugins-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

.plugins-split > * {
  min-width: 0;
}

@media (min-width: 860px) {
  .plugins-split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 48px;
  }
}

.plugins-split .u-soft {
  margin-top: 18px;
  max-inline-size: 640px;
}

.plugins-split .u-soft code {
  overflow-wrap: anywhere;
  white-space: normal;
}

.plugins-install-steps {
  counter-reset: plugin-install-step;
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  max-inline-size: 640px;
  list-style: none;
}

.plugins-install-steps li {
  counter-increment: plugin-install-step;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.plugins-install-steps li::before {
  content: counter(plugin-install-step, decimal-leading-zero);
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.plugins-install-steps li > span {
  min-width: 0;
}

.plugins-install-steps code {
  overflow-wrap: anywhere;
  white-space: normal;
}

.plugins-detail-list {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  max-inline-size: 640px;
  list-style: none;
}

.plugins-detail-list li {
  position: relative;
  padding-left: 22px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.plugins-detail-list li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--cat-control);
  transform: translateY(-50%);
}

.plugins-detail-list code {
  overflow-wrap: anywhere;
  white-space: normal;
}

.plugins-command-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-border);
}

.plugins-command-group {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.plugins-command-label {
  margin: 0;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}

.plugins-command-card pre {
  margin: 0;
  max-inline-size: 100%;
  overflow-x: auto;
  border-radius: var(--radius-card-inner);
}

.plugins-command-card pre code,
.plugins-viewer-panel pre code,
.plugins-command-card pre code.hl-shell {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.plugins-timeline {
  display: grid;
  gap: 18px;
  margin-top: 36px;
}

.plugins-timeline-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.plugins-timeline-item h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 24px);
}

.plugins-timeline-item .u-soft {
  margin-top: 8px;
  max-inline-size: 720px;
}

.plugins-viewer-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: clamp(28px, 5vw, 48px);
}

@media (min-width: 900px) {
  .plugins-viewer-panel {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
  }
}

.plugins-viewer-panel h2 {
  margin-top: 10px;
  max-inline-size: 12ch;
}

.plugins-viewer-panel .u-soft {
  margin-top: 16px;
  max-inline-size: 560px;
}

.plugins-viewer-panel pre {
  margin: 0;
  max-inline-size: 100%;
  overflow-x: auto;
  border-radius: var(--radius-card-inner);
}

.plugins-live-grid {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

@media (min-width: 760px) {
  .plugins-live-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.plugins-live-step {
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.plugins-live-step h3 {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 500;
  line-height: 1.08;
}

.plugins-live-step .u-soft {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
}

.plugins-live-docs {
  margin-top: 44px;
}

.plugins-live-docs h3 {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.3vw, 26px);
  font-weight: 500;
  line-height: 1.02;
  max-inline-size: 13ch;
}

.plugins-endpoint-grid {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

@media (min-width: 760px) {
  .plugins-endpoint-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.plugins-endpoint {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.plugins-endpoint code {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
}

.plugins-endpoint span {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.45;
}

.plugins-note {
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--surface) 84%, var(--cat-evidence) 16%);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.plugins-note strong {
  color: var(--ink);
  font-weight: 650;
}

@media (max-width: 480px) {
  /* Stack CTAs full-width on phones so the 44px touch target is honored. */
  .home-hero-actions,
  .home-built-in-actions,
  .plugins-hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .home-hero-actions .btn,
  .home-built-in-actions .btn,
  .plugins-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================== */
/* spec.html — sticky TOC + per-atom permalinks                    */
/* ============================================================== */

/* Two-column shell. Mobile collapses to a single column; the TOC
 * <details> sits inline at the top. ≥900px the aside pins to the
 * left rail and the body takes a fixed text column. */
.spec-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-block: 56px;
}

@media (min-width: 900px) {
  .spec-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 56px;
    padding-block: 80px;
  }
}

@media (min-width: 1080px) {
  .spec-layout {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

.spec-body {
  min-width: 0;
}

/* ----- TOC rail ----- */

.spec-toc-rail {
  min-width: 0;
}

.spec-toc {
  margin: 0;
}

.spec-toc-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 10, 0.04);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: uppercase;
}

.spec-toc-summary::-webkit-details-marker {
  display: none;
}

.spec-toc-caret {
  display: inline-block;
  transition: transform 180ms var(--ease-out);
  font-size: 14px;
  line-height: 1;
}

.spec-toc[open] .spec-toc-caret {
  transform: rotate(90deg);
}

.spec-toc-nav {
  margin-top: 14px;
}

.spec-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spec-toc-list > li > a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 150ms ease, background 150ms ease;
}

.spec-toc-list > li > a::before {
  content: attr(data-num);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.spec-toc-list > li > a:hover,
.spec-toc-list > li > a.is-active {
  color: var(--ink);
  background: rgba(10, 10, 10, 0.05);
}

.spec-toc-list > li > a.is-active::before {
  color: var(--ink);
}

.spec-toc-list ul {
  list-style: none;
  margin: 4px 0 6px 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spec-toc-list ul a {
  display: block;
  padding: 4px 10px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-muted);
  text-decoration: none;
  border-radius: 6px;
}

.spec-toc-list ul a:hover {
  color: var(--ink);
  background: rgba(10, 10, 10, 0.04);
}

.spec-toc-foot {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.5;
}

/* Desktop: pin the TOC and hide the <summary> toggle — TOC is
 * always-visible, never collapsed. */
@media (min-width: 900px) {
  .spec-toc-rail {
    position: sticky;
    top: 88px;
    align-self: start;
    /* Cap height so the nav scrolls independently for long TOCs. */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-right: 8px;
  }

  .spec-toc {
    /* Force open + remove the chrome on desktop. */
  }

  .spec-toc-summary {
    display: none;
  }

  /* :open is harmless if Safari ignores it; on desktop we want
   * the panel forced open regardless. */
  .spec-toc-nav {
    margin-top: 0;
  }
}

/* Force-open on desktop even when user has manually closed the panel
 * on mobile then resized — checked elements respect [open] but we want
 * desktop to always render the list. */
@media (min-width: 900px) {
  .spec-toc:not([open]) .spec-toc-nav {
    display: block;
  }
}

/* ----- Body sections ----- */

.spec-section {
  padding-block: clamp(40px, 6vw, 64px);
  scroll-margin-top: 88px;
}

.spec-section:first-of-type {
  padding-block-start: 0;
}

/* Invisible anchor target — used for backwards-compat anchors that
 * were reorganized away. Zero size, takes the scroll-margin-top from
 * its enclosing section so deep-links still land below the sticky
 * header. */
.anchor-redirect {
  display: block;
  height: 0;
  width: 0;
  overflow: hidden;
  scroll-margin-top: 88px;
}

/* ----- Permalinks ----- */

/* The little "#" button shown beside heading text. Visible on hover
 * of the parent <h2>/<h3>; tappable on mobile but de-emphasized. */
.heading-permalink,
.card-permalink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-muted);
  text-decoration: none;
  opacity: 0;
  transition: opacity 150ms ease, background 150ms ease, color 150ms ease;
}

h1:hover .heading-permalink,
h2:hover .heading-permalink,
h3:hover .heading-permalink,
.atom-card:hover .card-permalink,
.atom-card:focus-within .card-permalink,
.heading-permalink:focus,
.card-permalink:focus {
  opacity: 1;
}

.heading-permalink:hover,
.card-permalink:hover {
  background: rgba(10, 10, 10, 0.06);
  color: var(--ink);
}

.card-permalink {
  /* On a card the # sits in the top-right corner. */
  position: absolute;
  top: 16px;
  right: 16px;
  margin-left: 0;
}

.card-permalink.is-copied,
.heading-permalink.is-copied {
  width: auto;
  padding: 0 8px;
  background: rgba(31, 164, 99, 0.12);
  color: #1fa463;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 1;
}

@media (max-width: 700px) {
  /* Mobile: keep permalinks visible but very subtle — no hover state. */
  .heading-permalink,
  .card-permalink {
    opacity: 0.45;
  }
}

/* The atom-name itself becomes the primary permalink trigger — same
 * styling as plain text, but clickable. */
.heading-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: border-color 150ms ease;
}

.heading-link:hover {
  border-bottom-color: var(--ink-muted);
}

/* ----- Version chip ----- */

.version-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.version-chip-row {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.version-chip-mini {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(10, 10, 10, 0.08);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ----- schema attribute badges on atom cards ----- */

.atom-v04-row {
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 12px;
}

.v04-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.v04-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(10, 10, 10, 0.05);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
}

.atom-v04-row .v04-badge {
  margin-left: 0;
}

.v04-badge.v04-sub {
  background: rgba(106, 201, 242, 0.15);
}

/* ----- Operator + primitive card variants ----- */

.op-kind-group,
.primitive-family-group {
  margin-block-end: var(--space-sm);
}

.op-kind-label {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.op-kind-label small {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.op-card .category-tag.op-kind-tag {
  /* Operator cards reuse the category-tag chrome but the dot is colored
   * by operator kind, not by atom category. */
}

.op-card .category-tag.op-kind-tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ink);
  flex: none;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

.op-card[data-op-kind="logical"]    .category-tag.op-kind-tag::before { background: var(--op-logical); }
.op-card[data-op-kind="quantifier"] .category-tag.op-kind-tag::before { background: var(--op-quantifier); }
.op-card[data-op-kind="temporal"]   .category-tag.op-kind-tag::before { background: var(--op-temporal); }
.op-card[data-op-kind="reference"]  .category-tag.op-kind-tag::before { background: var(--op-reference); }
.op-card[data-op-kind="identity"]   .category-tag.op-kind-tag::before { background: var(--op-identity); }

.primitive-card .category-tag.primitive-family-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.primitive-card .category-tag.primitive-family-tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ink);
  flex: none;
}

.primitive-card[data-primitive-family="value"]      .category-tag.primitive-family-tag::before { background: var(--ink-muted); }
.primitive-card[data-primitive-family="structural"] .category-tag.primitive-family-tag::before { background: var(--cat-meta); }

.closed-set {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(10, 10, 10, 0.03);
}

.closed-set-vals {
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
}

.closed-set-vals code {
  font-size: 11px;
  padding: 2px 6px;
}

/* ----- Validation section ----- */

.validation-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.validation-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 14px 16px;
  border-radius: var(--radius-card-inner);
  background: rgba(10, 10, 10, 0.03);
}

@media (min-width: 760px) {
  .validation-row {
    grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1fr);
    align-items: baseline;
    gap: 20px;
  }
}

.validation-attr {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}

.validation-attr a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-muted);
}

.validation-attr a:hover {
  border-bottom-color: var(--ink);
}

.validation-allowed,
.validation-example {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.validation-allowed code,
.validation-example code {
  font-size: 11px;
  padding: 1px 5px;
}

.prelude-mode-grid .validation-row {
  align-items: start;
}

.prelude-mode-grid .validation-attr {
  justify-self: start;
  max-inline-size: 100%;
}

.prelude-mode-grid .validation-example {
  max-inline-size: 100%;
}

.prelude-mode-grid .validation-example code {
  display: inline-block;
  box-sizing: border-box;
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (min-width: 760px) {
  .prelude-mode-grid .validation-row {
    grid-template-columns: 160px minmax(240px, 1fr) minmax(300px, 1.35fr);
  }
}

/* ----- Atom card needs position: relative to anchor the # button ---- */

.atom-card {
  position: relative;
}

/* ----- Mobile niceties ----- */

@media (max-width: 480px) {
  .spec-section {
    padding-block: 32px;
  }

  .version-chip-row {
    gap: 10px;
  }

  .atom-card pre,
  .primitive-card pre,
  .op-card pre {
    /* Keep code horizontally scrollable inside its card; never let it
     * push the body wider than the viewport. */
    max-width: 100%;
    overflow-x: auto;
  }
}


/* ---------------------------- spec page: desktop rail ------------------ */
/* Keep the spec within the shared site container on desktop so it aligns
 * with the header and other pages. The slimmer rail preserves room for
 * reference cards without escaping the global content width. */
@media (min-width: 1100px) {
  .spec-layout {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 48px;
  }
}

/* ---------------------------- spec page: docs-site type scale ----- */
/* Marketing pages (home, about, philosophy) use the big Fraunces
 * display scale (h1 up to 84px, h2 up to 56px). The spec page is a
 * reference doc — it should feel like a docs site, not a poster.
 * Smaller, scannable headings; lede sized down to match. */
.container.spec-layout h1 {
  font-size: clamp(22px, 2.4vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.container.spec-layout h2 {
  font-size: clamp(20px, 2.1vw, 26px);
  letter-spacing: -0.015em;
  line-height: 1.22;
}
.container.spec-layout h3 {
  font-size: 17px;
  line-height: 1.3;
}
.container.spec-layout .lede,
.container.spec-layout > article > p,
.container.spec-layout .spec-section > p {
  font-size: 15.5px;
  line-height: 1.6;
}
.container.spec-layout .eyebrow {
  font-size: 11px;
}

/* gallery hero: match the spec page's docs-scale heading + lede (not the
 * big poster display size). Keeps the gallery hero consistent with /spec. */
.gallery-hero h1 {
  font-size: clamp(26px, 2.8vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.gallery-hero .lede {
  font-size: 15.5px;
  line-height: 1.6;
}
.gallery-hero .eyebrow {
  font-size: 11px;
}

/* ---------------------------- prior-art table polish ------------- */
/* Support indicator: small inline-block dot. Three states. */
.support {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  margin-right: 9px;
  margin-bottom: 1px;
  vertical-align: middle;
  flex: none;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.08);
}
.support.full    { background: var(--cat-control); }    /* sage green */
.support.partial { background: var(--cat-reference); }  /* warm amber */
.support.none    { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-muted); }

/* Prior-art table: refined polish. */
.prior-art table.table {
  font-size: 13.5px;
}
.prior-art table.table thead th {
  background: rgba(10, 10, 10, 0.025);
  border-bottom: 1px solid var(--rule);
  font-size: 11px;
  padding-block: 12px;
}
.prior-art table.table tbody th[scope="row"] {
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
  white-space: nowrap;
  padding-right: 12px;
}
.prior-art table.table td {
  line-height: 1.5;
  color: var(--ink-soft);
}
/* Zebra: tint odd rows slightly so the eye tracks horizontally. */
.prior-art table.table tbody tr:nth-child(even) {
  background: rgba(10, 10, 10, 0.022);
}
/* SRML row: highlight as the comparison anchor. */
.prior-art table.table tbody tr.is-srml {
  background: linear-gradient(
    90deg,
    rgba(155, 226, 125, 0.10) 0%,    /* --cat-control tint */
    rgba(155, 226, 125, 0.04) 60%,
    transparent 100%
  );
  box-shadow: inset 3px 0 0 var(--cat-control);
}
.prior-art table.table tbody tr.is-srml th[scope="row"] {
  color: var(--ink);
}
.prior-art table.table tbody tr.is-srml .srml-mark {
  color: var(--ink-muted);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 6px;
}
.prior-art table.table tbody tr:hover {
  background: rgba(10, 10, 10, 0.04);
}
.prior-art table.table tbody tr.is-srml:hover {
  background: linear-gradient(
    90deg,
    rgba(155, 226, 125, 0.16) 0%,
    rgba(155, 226, 125, 0.06) 60%,
    transparent 100%
  );
}
/* Code chips inside cells: tighten + lighter chrome. */
.prior-art table.table td code {
  background: rgba(10, 10, 10, 0.05);
  border: 0;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* ---------------------------- defensive: no page-level horizontal scroll */
/* Wide content inside the spec (long code lines, the enhancement
 * table, atom syntax previews) was occasionally pushing the page wider
 * than the viewport on certain widths. `overflow-x: clip` on html +
 * body guarantees the page never scrolls horizontally — content that
 * legitimately exceeds its container clips at the page edge, while
 * dedicated scroll containers like .table-scroll and .atom-card pre
 * (both have overflow-x: auto) continue to scroll inside themselves. */
html,
body {
  overflow-x: clip;
}

/* Belt-and-suspenders for spec sections: make sure every section sets
 * a min-inline-size of 0 so its grid children (atom cards, pre blocks)
 * can shrink properly inside .spec-body. */
.spec-section,
.spec-section > * {
  min-inline-size: 0;
}

/* The enhancement table at the top of /spec is wrapped in
 * .table-scroll; make sure that wrapper actually bounds itself to its
 * parent's width — otherwise the inner table's min-width: 560px can
 * push the wrapper wider than spec-body on narrow viewports. */
.spec-section .table-scroll {
  max-inline-size: 100%;
}

/* Long unbreakable strings (file paths in atom location attrs, URLs in
 * source links) shouldn't push their container — let them break.
 * Pre/code stay strict (they have their own overflow-x: auto). */
.spec-section p,
.spec-section li,
.spec-section td,
.spec-section .summary {
  overflow-wrap: anywhere;
}

/* ---------------------------- mobile-only: tighten home padding ----- */
/* Default --space-md is clamp(64px, 9vw, 80px), great on desktop but on
 * phones it stacks up to ~128px between sections (section's own padding
 * + the inner card's padding), making the page feel sparse with big
 * empty bands between sections. Tighten on mobile only. */
@media (max-width: 600px) {
  .home-hero {
    padding-block: 20px 48px;
  }
  .home-section,
  .section-md {
    padding-block: 36px;
  }
  .home-built-in {
    padding: 28px 22px;
  }
  .home-built-in-title {
    font-size: 26px;
    max-inline-size: none;
  }
}

/* ---------------------------- top hero type scale ------------------ */
/* Keep first-screen headings/subheadings on the same ramp across pages.
 * The spec reference page keeps its smaller docs-site scale above. */
body.home-page .home-hero h1 {
  font-size: clamp(35.2px, 6vw, 70.4px);
}

body.home-page #example-title,
body.home-page #spec-intro-title,
body.home-page #problem-title,
body.home-page #value-title,
body.home-page #quickstart-title {
  font-size: clamp(25.6px, 4vw, 44.8px);
}

body.home-page .home-built-in-title {
  font-size: clamp(22.4px, 3.2vw, 35.2px);
}

body.home-page .home-hero-lede,
body:not(.home-page):not(.essay-page):not(.philosophy-page) main > :is(.container, .narrow):first-child:not(.spec-layout) .lede,
body.home-page .home-spec-intro-body,
body.home-page .home-section-lede,
body.home-page .home-problem-body {
  font-size: clamp(14.4px, 1.76vw, 17.6px);
}

body.home-page .home-built-in-body {
  font-size: 12.8px;
}

/* ---------------------------- what's new type scale ---------------- */
/* h2 sizing now comes from the site-wide non-home heading cap. */

/* ---------------------------- article pages ------------------------ */
body.article-page main h1 {
  max-inline-size: 820px;
}

body.article-page main h2 {
  max-inline-size: 900px;
}

body.article-page main p,
body.article-page main blockquote,
body.article-page main li,
body.article-page .glass-surface {
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  body.article-page main h1 {
    font-size: clamp(35.2px, 6vw, 70.4px);
    line-height: 1.08;
  }

  body.article-page main h2 {
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.1;
  }

  body.article-page .lede {
    font-size: clamp(14.4px, 1.76vw, 17.6px);
  }

  body.article-page .pullquote {
    padding-inline-start: 18px;
    font-size: 22px;
  }

  body.article-page .btn + .btn {
    margin-inline-start: 0 !important;
    margin-block-start: 10px;
  }
}

html.playground-root,
body.playground-page {
  overflow-x: hidden;
  overflow-y: auto;
}

/* ---------------------------- easter egg ------------------------ */

body.easter-page {
  min-block-size: 100svh;
  background: #030303;
  color: #fff9ea;
  font-family: var(--font-body);
}

body.easter-page a:focus-visible,
body.easter-page button:focus-visible {
  outline: 2px solid #f7d779;
  outline-offset: 4px;
}

.easter-stage {
  --spot-x: 50%;
  --spot-y: 50%;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-block-size: 100svh;
  overflow: hidden;
  padding: 28px;
  background:
    linear-gradient(180deg, #030303 0%, #090303 42%, #180505 100%),
    #030303;
}

.easter-stage::before {
  content: "";
  position: absolute;
  inset: -22% -24%;
  z-index: -4;
  pointer-events: none;
  background:
    conic-gradient(
      from 235deg at 50% -12%,
      transparent 0deg 28deg,
      rgba(251, 218, 126, 0.24) 31deg 43deg,
      transparent 48deg 103deg,
      rgba(0, 216, 255, 0.16) 106deg 118deg,
      transparent 124deg 219deg,
      rgba(255, 43, 67, 0.18) 224deg 238deg,
      transparent 244deg 360deg
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035) 0 1px,
      transparent 1px 92px
    );
  filter: saturate(1.25);
  opacity: 0.9;
  transform: translate3d(-3%, 0, 0) rotate(0.001deg);
  animation: easter-light-pan 11s linear infinite alternate;
}

.easter-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(
      circle 260px at var(--spot-x) var(--spot-y),
      rgba(255, 252, 226, 0.2) 0%,
      rgba(255, 213, 92, 0.08) 38%,
      transparent 70%
    ),
    linear-gradient(90deg, rgba(0, 216, 255, 0.1), transparent 24% 76%, rgba(255, 43, 67, 0.12));
  mix-blend-mode: screen;
}

.easter-texture {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../img/easter-grain.png");
  background-repeat: repeat;
  background-size: 96px 96px;
  opacity: 0.35;
  mix-blend-mode: overlay;
}

.easter-floor {
  position: absolute;
  inset: auto -15% -20% -15%;
  z-index: -3;
  block-size: 46%;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(255, 43, 67, 0.24), transparent 62%),
    repeating-linear-gradient(90deg, rgba(247, 215, 121, 0.22) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(0, 216, 255, 0.18) 0 1px, transparent 1px 34px);
  opacity: 0.42;
  transform: perspective(620px) rotateX(64deg);
  transform-origin: bottom center;
}

.easter-back,
.easter-badge {
  position: absolute;
  top: 22px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  border-radius: var(--radius-pill);
  background: rgba(6, 6, 6, 0.48);
  color: rgba(255, 249, 234, 0.88);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 12px 32px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.easter-back {
  left: 22px;
  padding: 0 15px;
  transition-property: color, background-color, box-shadow, transform;
  transition-duration: 180ms;
  transition-timing-function: var(--ease-out);
}

.easter-back:hover {
  color: #ffffff;
  background: rgba(247, 215, 121, 0.16);
  box-shadow:
    0 0 0 1px rgba(247, 215, 121, 0.34),
    0 18px 42px rgba(0, 0, 0, 0.42);
}

.easter-back:active {
  transform: scale(0.96);
}

.easter-badge {
  right: 22px;
  padding: 0 12px;
  color: #0a0a0a;
  background: linear-gradient(135deg, #f7d779, #ffffff 42%, #00d8ff 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.3),
    0 0 28px rgba(247, 215, 121, 0.34);
}

.easter-lockup {
  position: relative;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 16px;
  max-inline-size: min(1180px, calc(100vw - 36px));
  text-align: center;
  transform: translateY(-3vh);
}

.easter-kicker,
.easter-tagline {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.easter-kicker {
  color: rgba(255, 249, 234, 0.76);
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.28);
}

.easter-tagline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  color: rgba(255, 249, 234, 0.82);
}

.easter-tagline span {
  display: inline-flex;
  align-items: center;
  min-block-size: 28px;
  padding: 0 10px;
  background: rgba(255, 249, 234, 0.07);
  box-shadow: 0 0 0 1px rgba(255, 249, 234, 0.1);
}

.easter-title {
  position: relative;
  margin: 0;
  max-inline-size: calc(100vw - 36px);
  color: #fff8e5;
  font-family: var(--font-blackletter);
  font-size: 3.4rem;
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: 0;
  white-space: nowrap;
  text-wrap: nowrap;
  text-shadow:
    0 2px 0 #d4a133,
    0 5px 0 #4e0709,
    0 0 18px rgba(247, 215, 121, 0.58),
    0 0 42px rgba(255, 43, 67, 0.34),
    0 26px 52px rgba(0, 0, 0, 0.82);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.32);
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.72));
}

.easter-title::before,
.easter-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  font: inherit;
  letter-spacing: 0;
  opacity: 0.7;
}

.easter-title::before {
  color: #00d8ff;
  transform: translate(-0.03em, -0.02em);
  clip-path: polygon(0 0, 100% 0, 100% 48%, 0 58%);
  mix-blend-mode: screen;
  animation: easter-chroma-a 2.8s steps(2, end) infinite;
}

.easter-title::after {
  color: #ff2b43;
  transform: translate(0.03em, 0.025em);
  clip-path: polygon(0 44%, 100% 34%, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  animation: easter-chroma-b 3.2s steps(2, end) infinite;
}

.easter-title.is-beating {
  animation: easter-title-hit 420ms var(--ease-out);
}

.easter-ring {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 1;
  inline-size: min(78vw, 920px);
  aspect-ratio: 1;
  border: 1px solid rgba(247, 215, 121, 0.22);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -52%) rotate(-12deg);
  box-shadow:
    inset 0 0 44px rgba(0, 216, 255, 0.08),
    0 0 64px rgba(255, 43, 67, 0.14);
}

.easter-ring::before,
.easter-ring::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: inherit;
}

.easter-ring::after {
  inset: 18%;
  border-style: solid;
  border-color: rgba(0, 216, 255, 0.16);
  transform: rotate(22deg);
}

.easter-side {
  position: absolute;
  z-index: 4;
  top: 50%;
  color: rgba(255, 249, 234, 0.56);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: translateY(-50%);
  white-space: nowrap;
}

.easter-side-left {
  left: 24px;
}

.easter-side-right {
  right: 24px;
  transform: translateY(-50%) rotate(180deg);
}

.easter-fragment {
  position: absolute;
  z-index: 3;
  display: block;
  max-inline-size: 34ch;
  padding: 0;
  background: transparent;
  border: 0;
  color: rgba(255, 249, 234, 0.42);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(0, 216, 255, 0.24);
  white-space: nowrap;
  animation: easter-fragment-float 7s var(--ease-out) infinite alternate;
}

.easter-fragment-a {
  top: 23%;
  left: 8%;
}

.easter-fragment-b {
  top: 34%;
  right: 7%;
  color: rgba(0, 216, 255, 0.42);
  animation-delay: -2.2s;
}

.easter-fragment-c {
  right: 14%;
  bottom: 25%;
  color: rgba(247, 215, 121, 0.48);
  animation-delay: -4.8s;
}

.easter-eq {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 26px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  block-size: 72px;
  transform: translateX(-50%);
}

.easter-bar {
  inline-size: 7px;
  block-size: var(--bar-h, 44%);
  min-block-size: 10px;
  background: linear-gradient(to top, #ff2b43 0%, #f7d779 58%, #ffffff 100%);
  box-shadow:
    0 0 16px rgba(247, 215, 121, 0.35),
    0 0 28px rgba(255, 43, 67, 0.2);
  transition-property: block-size, opacity;
  transition-duration: 120ms;
  transition-timing-function: linear;
}

@keyframes easter-light-pan {
  from {
    transform: translate3d(-3%, 0, 0) rotate(-1deg);
  }
  to {
    transform: translate3d(3%, 0, 0) rotate(1deg);
  }
}

@keyframes easter-chroma-a {
  0%, 84%, 100% {
    transform: translate(-0.03em, -0.02em);
  }
  86%, 91% {
    transform: translate(-0.055em, 0.015em);
  }
}

@keyframes easter-chroma-b {
  0%, 72%, 100% {
    transform: translate(0.03em, 0.025em);
  }
  75%, 80% {
    transform: translate(0.055em, -0.01em);
  }
}

@keyframes easter-title-hit {
  0%, 100% {
    transform: translateZ(0) scale(1);
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.72));
  }
  36% {
    transform: translateZ(0) scale(1.025);
    filter: drop-shadow(0 0 14px rgba(247, 215, 121, 0.66));
  }
}

@keyframes easter-fragment-float {
  from {
    transform: translate3d(0, -8px, 0);
    opacity: 0.28;
  }
  to {
    transform: translate3d(0, 10px, 0);
    opacity: 0.58;
  }
}

@media (min-width: 520px) {
  .easter-title {
    font-size: 5rem;
  }
}

@media (min-width: 780px) {
  .easter-title {
    font-size: 7.5rem;
  }
}

@media (min-width: 1120px) {
  .easter-title {
    font-size: 10.5rem;
  }
}

@media (min-width: 1440px) {
  .easter-title {
    font-size: 11.5rem;
  }
}

@media (max-width: 720px) {
  .easter-stage {
    padding: 20px 16px 92px;
  }

  .easter-back,
  .easter-badge {
    top: 14px;
    min-block-size: 36px;
    font-size: 10px;
  }

  .easter-back {
    left: 14px;
    padding-inline: 12px;
  }

  .easter-badge {
    right: 14px;
  }

  .easter-lockup {
    gap: 13px;
    transform: translateY(-1vh);
  }

  .easter-title {
    font-size: 3.5rem;
  }

  .easter-kicker,
  .easter-tagline {
    font-size: 10px;
  }

  .easter-ring {
    inline-size: 118vw;
  }

  .easter-side,
  .easter-fragment {
    display: none;
  }

  .easter-eq {
    bottom: 18px;
    block-size: 54px;
    gap: 5px;
  }

  .easter-bar {
    inline-size: 6px;
  }
}

@media (max-width: 360px) {
  .easter-title {
    font-size: 3.1rem;
  }

  .easter-tagline {
    gap: 8px;
  }

  .easter-tagline span {
    padding-inline: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.easter-page *,
  body.easter-page *::before,
  body.easter-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }

  .easter-stage::before {
    transform: none;
  }

  .easter-title::before,
  .easter-title::after {
    animation: none;
  }
}

/* Monochrome video treatment. This intentionally overrides the earlier
 * neon treatment while preserving the same hidden page route. */
.easter-video {
  position: absolute;
  inset: 0;
  z-index: -5;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.18) brightness(0.78);
  transform: scale(1.01);
}

.easter-stage {
  background: #000;
}

.easter-stage::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), transparent 26% 74%, rgba(0, 0, 0, 0.72)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.18) 42%, rgba(0, 0, 0, 0.66));
  filter: none;
  opacity: 1;
  transform: none;
  animation: none;
}

.easter-stage::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 24%, rgba(0, 0, 0, 0.28) 56%, rgba(0, 0, 0, 0.78) 100%);
  mix-blend-mode: normal;
}

.easter-texture {
  z-index: -1;
  opacity: 0.2;
  mix-blend-mode: soft-light;
}

.easter-floor,
.easter-ring,
.easter-side,
.easter-fragment,
.easter-badge,
.easter-eq,
.easter-kicker,
.easter-tagline {
  display: none;
}

.easter-back {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(0, 0, 0, 0.28);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 18px 52px rgba(0, 0, 0, 0.54);
}

.easter-back:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.32),
    0 18px 52px rgba(0, 0, 0, 0.58);
}

.easter-lockup {
  max-inline-size: min(1280px, calc(100vw - 32px));
  transform: translateY(-1vh);
}

.easter-title {
  color: #ffffff;
  font-size: clamp(4.25rem, 14.5vw, 15rem);
  line-height: 0.76;
  text-shadow:
    0 4px 18px rgba(0, 0, 0, 0.96),
    0 18px 64px rgba(0, 0, 0, 0.9),
    0 0 34px rgba(255, 255, 255, 0.18);
  -webkit-text-stroke: 0;
  filter: none;
}

.easter-title::before,
.easter-title::after {
  content: none;
}

.easter-title.is-beating {
  animation: none;
}

@media (max-width: 720px) {
  .easter-stage {
    padding: 20px 16px;
  }

  .easter-lockup {
    max-inline-size: calc(100vw - 24px);
    transform: none;
  }

  .easter-title {
    font-size: clamp(4.2rem, 18.4vw, 6.2rem);
  }
}

@media (max-width: 360px) {
  .easter-title {
    font-size: 3.8rem;
  }
}

/* ---------------------------- redesign 2026-06 ------------------ *
 * Comprehension + IA uplift: header GitHub link, home prose-vs-trace
 * comparison, copyable command lines, Learn hub rows, and the
 * interactive quick-reference page. Tokens only — no new colors,
 * fonts, or shadows beyond base.css.
 * ----------------------------------------------------------------- */

/* ----- header GitHub link ----- */

.header-github {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin-left: 8px;
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out);
}

.header-github:hover,
.header-github:focus-visible {
  color: var(--ink);
  background: rgba(10, 10, 10, 0.04);
}

.header-github svg {
  width: 20px;
  height: 20px;
}

/* Six nav items + the icon don't fit between the brand and CTA on
 * mid-size viewports — drop the icon first, then tighten link padding
 * before the 860px hamburger collapse. */
@media (max-width: 1120px) {
  .header-github {
    display: none;
  }
}

@media (max-width: 1024px) {
  .site-header {
    --site-header-nav-width: 420px;
  }

  .site-nav a {
    padding: 10px 8px;
    font-size: 13.5px;
  }
}

/* ----- copyable command line ----- */

.cmd-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  max-inline-size: 560px;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: var(--radius-card-inner);
  box-shadow: var(--shadow-border);
}

.cmd-line code {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow-x: auto;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  scrollbar-width: none;
}

/* Wrap the command on narrow screens — a nowrap command propagates its
 * min-content width up the centered hero column and overflows the page. */
@media (max-width: 720px) {
  .cmd-line code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

.cmd-line code::before {
  content: "$ ";
  color: var(--ink-muted);
  user-select: none;
}

.copy-button {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-border);
  background: var(--surface);
  transition: color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}

.copy-button:hover,
.copy-button:focus-visible {
  color: var(--ink);
  box-shadow: var(--shadow-border-hover);
}

.copy-button.is-copied {
  color: var(--ink);
}

.home-hero-install {
  margin-top: 18px;
}

.home-hero-install .cmd-line {
  max-inline-size: 620px;
  margin-inline: auto;
}

.home-hero-install-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-muted);
}

/* ----- tabbed install commands (Python / Claude Code / Codex) ----- */

.install-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-bottom: 10px;
}

.install-tab {
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  border-radius: var(--radius-pill);
  transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out);
}

.install-tab:hover,
.install-tab:focus-visible {
  color: var(--ink);
  background: rgba(10, 10, 10, 0.04);
  outline: none;
}

.install-tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-border);
}

.cmd-block {
  position: relative;
  max-inline-size: 620px;
  margin-inline: auto;
  padding: 14px 16px;
  background: var(--surface);
  border-radius: var(--radius-card-inner);
  box-shadow: var(--shadow-border);
  text-align: left;
}

.cmd-block pre {
  margin: 0;
  padding-right: 58px;
  white-space: pre-wrap;
}

.cmd-block code {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink);
}

/* One shell command per line, hanging-indented under its $ prompt.
 * The prompt is a pseudo-element so copied text stays paste-able. */
.cmd-l {
  display: block;
  padding-left: 1.3em;
  text-indent: -1.3em;
  overflow-wrap: anywhere;
}

.cmd-l::before {
  content: "$ ";
  color: var(--ink-muted);
  user-select: none;
}

.cmd-block .copy-button {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* ----- home: prose vs trace comparison ----- */

.home-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 40px;
}

@media (min-width: 960px) {
  .home-compare {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
  }
}

.home-compare-col {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.home-compare-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.home-compare-label .eyebrow {
  color: var(--ink);
}

.home-compare-label small {
  font-size: 12px;
  color: var(--ink-muted);
}

.home-compare-prose {
  flex: 1 1 auto;
  margin: 0;
  padding: 28px 28px 24px;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-border);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.home-compare-prose p + p {
  margin-top: 1em;
}

.home-compare-col pre {
  flex: 1 1 auto;
  margin: 0;
}

.home-compare-caption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-muted);
}

.home-compare-notes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 36px;
}

@media (min-width: 720px) {
  .home-compare-notes {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.home-compare-note {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}

.home-compare-note h3 {
  font-size: 15px;
  font-weight: 600;
}

.home-compare-note p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ----- learn hub ----- */

.hub-group {
  margin-top: 8px;
}

.hub-group + .hub-group {
  margin-top: 56px;
}

.hub-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.hub-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.hub-list li {
  border-top: 1px solid var(--rule);
}

.hub-list li:last-child {
  border-bottom: 1px solid var(--rule);
}

.hub-row {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr auto;
  align-items: baseline;
  gap: 8px 24px;
  padding: 18px 4px;
  text-decoration: none;
  transition: background-color 150ms var(--ease-out);
}

.hub-row:hover,
.hub-row:focus-visible {
  background: rgba(10, 10, 10, 0.025);
  outline: none;
}

.hub-row-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.hub-row-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.hub-row-kind {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

.hub-row-arrow {
  display: none;
}

@media (max-width: 719px) {
  .hub-row {
    grid-template-columns: 1fr auto;
  }

  .hub-row-desc {
    grid-column: 1 / -1;
  }
}

/* ----- quick reference page ----- */

.ref-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.ref-search {
  flex: 1 1 280px;
  max-inline-size: 420px;
  padding: 11px 16px;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-border);
}

.ref-search:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.ref-search::placeholder {
  color: var(--ink-muted);
}

.ref-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ref-chip {
  position: relative;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  border-radius: var(--radius-pill);
  transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out);
}

.ref-chip:hover,
.ref-chip:focus-visible {
  color: var(--ink);
  background: rgba(10, 10, 10, 0.04);
  outline: none;
}

.ref-chip[data-cat]:not([data-cat="all"]) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Category dots — same 5px convention as the spec's atom cards. */
.ref-chip[data-cat]:not([data-cat="all"])::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ink);
  flex: none;
}

.ref-chip[data-cat="reasoning"]::before { background: var(--cat-reasoning); }
.ref-chip[data-cat="evidence"]::before { background: var(--cat-evidence); }
.ref-chip[data-cat="control"]::before { background: var(--cat-control); }
.ref-chip[data-cat="reference"]::before { background: var(--cat-reference); }
.ref-chip[data-cat="social"]::before { background: var(--cat-social); }
.ref-chip[data-cat="meta"]::before { background: var(--cat-meta); }

.ref-chip[aria-pressed="true"] {
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-border);
}

.ref-count {
  inline-size: 100%;
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.ref-section {
  margin-top: 56px;
}

.ref-section > h2 {
  font-size: clamp(19px, 2.2vw, 24px);
}

.ref-section > h2 small {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--ink-muted);
}

.ref-cat-head {
  margin-top: 36px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.ref-cat-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
}

.ref-cat-head h3::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ink);
  flex: none;
}

.ref-cat[data-cat="reasoning"] .ref-cat-head h3::before { background: var(--cat-reasoning); }
.ref-cat[data-cat="evidence"] .ref-cat-head h3::before { background: var(--cat-evidence); }
.ref-cat[data-cat="control"] .ref-cat-head h3::before { background: var(--cat-control); }
.ref-cat[data-cat="reference"] .ref-cat-head h3::before { background: var(--cat-reference); }
.ref-cat[data-cat="social"] .ref-cat-head h3::before { background: var(--cat-social); }
.ref-cat[data-cat="meta"] .ref-cat-head h3::before { background: var(--cat-meta); }

.ref-cat-head .ref-cat-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
}

.ref-rows {
  margin-top: 10px;
}

.ref-row {
  border-top: 1px solid var(--rule);
}

.ref-rows .ref-row:last-child {
  border-bottom: 1px solid var(--rule);
}

.ref-row > summary {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr auto;
  align-items: baseline;
  gap: 8px 20px;
  padding: 14px 4px;
  cursor: pointer;
  list-style: none;
  transition: background-color 150ms var(--ease-out);
}

.ref-row > summary::-webkit-details-marker {
  display: none;
}

.ref-row > summary:hover {
  background: rgba(10, 10, 10, 0.025);
}

.ref-row > summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  border-radius: 2px;
}

.ref-row-tag {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.ref-row-tag .punct {
  color: var(--ink-muted);
  font-weight: 400;
}

.ref-row-summary {
  font-size: 14px;
  color: var(--ink-soft);
}

.ref-row-caret {
  align-self: center;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-muted);
  border-bottom: 1.5px solid var(--ink-muted);
  transform: rotate(45deg);
  transition: transform 180ms var(--ease-out);
}

.ref-row[open] > summary .ref-row-caret {
  transform: rotate(225deg) translate(-2px, -2px);
}

.ref-row-body {
  padding: 4px 4px 22px;
}

.ref-row-body .ref-desc {
  max-inline-size: 720px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.ref-row-body pre {
  margin-top: 14px;
  max-inline-size: 720px;
}

.ref-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
}

/* The validator-drawer .v04-badge rule sets margin-left: auto, which
 * spreads badges across this flex row — pin them back together. */
.ref-row-meta .v04-badge {
  margin-left: 0;
}

.ref-row-speclink {
  margin-top: 14px;
  font-size: 13px;
}

.ref-empty {
  margin-top: 32px;
  padding: 40px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  color: var(--ink-soft);
  text-align: center;
}

.ref-empty button {
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 719px) {
  .ref-row > summary {
    grid-template-columns: 1fr auto;
  }

  .ref-row-summary {
    grid-column: 1 / -1;
    padding-bottom: 2px;
  }

  /* Pin the caret beside the tag — auto-placement would drop it onto
   * its own left-aligned row below the summary. */
  .ref-row-caret {
    grid-row: 1;
    grid-column: 2;
  }
}

/* ----- announcement banner ----- */

.site-banner {
  display: block;
  padding: 9px var(--gutter);
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  text-decoration: none;
  text-decoration-color: transparent;
}

.site-banner strong {
  font-weight: 600;
}

.site-banner:hover,
.site-banner:focus-visible {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: rgba(250, 250, 249, 0.5);
  text-underline-offset: 3px;
}

.site-banner:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: -3px;
}

/* ----- essay: early-benchmark callout ----- */

.essay-benchmark {
  max-inline-size: 760px;
  margin-top: 32px;
  padding: 18px 22px;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-border);
}

.essay-benchmark-stat {
  margin-top: 10px;
  max-inline-size: 680px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.essay-benchmark-stat strong {
  color: var(--ink);
}

.essay-benchmark-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-muted);
}

/* ----- philosophy: docs-scale type ----- */
/* Same rationale as the spec page — it reads as documentation, not a
 * poster. Headings, numerals, and pullquotes sized down to match the
 * spec's docs-site scale. */

body.philosophy-page h1 {
  font-size: clamp(22px, 2.6vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

body.philosophy-page h2 {
  font-size: clamp(20px, 2.1vw, 26px);
  letter-spacing: -0.015em;
  line-height: 1.22;
}

body.philosophy-page .lede {
  font-size: 15.5px;
  line-height: 1.6;
}

body.philosophy-page .eyebrow {
  font-size: 11px;
}

body.philosophy-page .numeral-huge {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-muted);
}

.premise-title {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 23px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

body.philosophy-page .premise-deepdive {
  padding-block: 36px;
}

@media (min-width: 900px) {
  body.philosophy-page .premise-deepdive {
    grid-template-columns: clamp(56px, 6vw, 84px) 1fr;
    gap: 32px;
  }
}

body.philosophy-page .pullquote {
  font-size: clamp(17px, 1.9vw, 21px);
}

body.philosophy-page .open-question .num {
  font-size: 20px;
}

/* ----- essay-page: single-column long-read (Substack-style) ----- */
/* Scoped to the protocol-layer field note. One narrow reading column,
 * no section rules, no per-section eyebrows, headings at prose scale.
 * Appended after the article-page block so equal-specificity rules
 * (including its mobile overrides) lose by source order. */

body.essay-page main > .container {
  max-inline-size: 720px;
  padding-block: 0;
  margin-block: 0 44px;
}

body.essay-page main > section:first-child {
  padding-top: 48px;
}

body.essay-page main > hr.hairline {
  display: none;
}

/* Keep the "Field note · 7 min read" byline; drop section eyebrows. */
body.essay-page main > section ~ section .eyebrow {
  display: none;
}

body.essay-page main h1 {
  font-size: clamp(22px, 2.6vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

body.essay-page main h2 {
  font-size: clamp(20px, 2.3vw, 25px);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

body.essay-page .lede {
  font-size: 17px;
  line-height: 1.65;
}

body.essay-page .pullquote {
  border-left: 0;
  padding: 4px 0;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.5;
}

/* ----- site-wide heading cap (non-home) ----- */
/* Every page except the homepage reads as documentation: no heading
 * above 26px. The home hero keeps the display scale. Appended last so
 * equal-specificity page rules lose by source order; higher-specificity
 * offenders (spec-layout, essay, philosophy, whats-new, hero ramp)
 * were brought under the cap at their definitions. */

body:not(.home-page) main h1 {
  font-size: clamp(22px, 2.6vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

body:not(.home-page) main h2 {
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* h3 (24px) and h4 (18px) base sizes already sit under the cap. */

/* ─────────────────────────────────────────────────────────────────────────
   Field-note eval visualization (why-reasoning-needs-a-protocol-layer).
   Lives in the shared stylesheet (not a page-scoped <style>) so it applies
   on client-side router navigation, not only on a direct page load.
   Hairline borders, neutral surfaces; the only non-neutral colors carry
   verdict information (mergeable / hold) or distinguish chart series.
   ───────────────────────────────────────────────────────────────────────── */
.eval-chart {
  margin-top: 24px; border: 1px solid var(--rule);
  border-radius: var(--radius-card); background: var(--surface);
  padding: 26px 28px 22px;
}
.eval-chart svg { width: 100%; height: auto; }
.eval-chart text { font-family: var(--font-body); }
.eval-axis { fill: var(--ink-muted); font-size: 12px; }
.eval-gridline { stroke: var(--rule); stroke-width: 1; }
.eval-end { font-size: 12px; font-weight: 650; }
.eval-legend {
  display: flex; flex-wrap: wrap; gap: 12px 22px;
  margin: 18px 0 0; padding: 0; font-size: 13px; color: var(--ink-soft);
}
.eval-legend span { display: inline-flex; align-items: center; gap: 8px; }
.eval-legend i { width: 18px; height: 3px; border-radius: 2px; flex: none; }
.eval-callout {
  margin-top: 18px; border: 1px solid var(--rule);
  border-radius: var(--radius-card-inner); background: var(--surface);
  padding: 16px 18px; font-size: 14px; color: var(--ink-soft);
  max-inline-size: 740px;
}
.eval-callout strong { color: var(--ink); font-weight: 650; }
.eval-table-wrap { margin-top: 18px; overflow-x: auto; }
table.eval-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.eval-table thead th {
  text-align: right; font-weight: 600; color: var(--ink-muted);
  font-size: 12px; letter-spacing: .03em; text-transform: uppercase;
  padding: 0 14px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
table.eval-table thead th:first-child { text-align: left; }
table.eval-table tbody td {
  padding: 13px 14px; border-bottom: 1px solid var(--rule);
  text-align: right; font-variant-numeric: tabular-nums;
}
table.eval-table tbody td:first-child {
  text-align: left; font-family: var(--font-mono); font-size: 13px;
}
table.eval-table tbody tr:last-child td { border-bottom: none; }
table.eval-table .muted { color: var(--ink-muted); }
table.eval-table .pos { color: #1f7a43; font-weight: 600; }
table.eval-table .neg { color: #9a5b00; font-weight: 600; }
.eval-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 620; padding: 4px 10px;
  border-radius: var(--radius-pill); border: 1px solid var(--rule);
  white-space: nowrap;
}
.eval-pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.eval-pill.go   { color: #1f7a43; background: #eef7f0; border-color: #cfe7d6; }
.eval-pill.hold { color: #9a5b00; background: #fbf3e7; border-color: #efd9bd; }
.eval-pill.base { color: var(--ink-muted); background: var(--paper); }
.eval-points { margin: 16px 0 0; padding-left: 20px; color: var(--ink-soft); font-size: 14px; max-inline-size: 740px; }
.eval-points li { margin: 8px 0; }
.eval-points strong { color: var(--ink); font-weight: 650; }
.eval-caveat {
  margin-top: 22px; border: 1px solid var(--rule);
  border-radius: var(--radius-card-inner); background: var(--paper);
  padding: 16px 18px; font-size: 14px; color: var(--ink-soft);
  max-inline-size: 740px;
}
.eval-caveat strong { color: var(--ink); font-weight: 650; }