app.css

/* ===== mdsmith.dev — site-specific styles ===== */
/* Extends colors_and_type.css (same directory) */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--fg);
  font-family: var(--font-sans);
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; }

button { font-family: inherit; }

/* ========== LAYOUT ========== */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.container-prose {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ========== TOP NAV ========== */

.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border-subtle);
  height: 56px;
}
.topnav.is-scrolled { box-shadow: var(--shadow-xs); border-bottom-color: var(--border); }
.topnav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
.topnav-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.topnav-brand:hover { text-decoration: none; }
.topnav-links {
  display: flex; gap: 4px;
  font-size: 14px;
}
.topnav-link {
  color: var(--steel-600);
  padding: 6px 10px;
  border-radius: 4px;
  transition: background var(--dur-fast), color var(--dur-fast);
  font-weight: 500;
}
.topnav-link:hover { color: var(--fg); background: var(--steel-100); text-decoration: none; }
.topnav-link.is-active { color: var(--fg); }
.topnav-brand img { display: block; }
.topnav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topnav-version { font-family: var(--font-mono); font-size: 12px; color: var(--fg-subtle); white-space: nowrap; }
.topnav-version:hover { color: var(--accent); text-decoration: none; }
.topnav-kbd {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: var(--bg-raised);
  color: var(--steel-700);
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.topnav-kbd:hover { background: var(--steel-50); }
.topnav-gh {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 4px;
  background: var(--steel-900); color: var(--canvas);
  font-size: 13px; font-weight: 500;
}
.topnav-gh:hover { background: var(--steel-800); color: var(--canvas); text-decoration: none; }

/* Below ~500px the single-row nav (brand + section links + version
   + GitHub) no longer fits. Unwrapped it overflowed the viewport,
   widening the document past the screen so every section — the hero
   most visibly — sat pinned to the left with dead space on the
   right. Wrapping keeps the bar within the viewport and every item
   reachable with no JS: the brand and GitHub button share the top
   row, the section links drop to a full-width row beneath them. */
@media (max-width: 560px) {
  .topnav { height: auto; }
  .topnav-inner {
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 2px;
    padding: 8px 20px;
  }
  .topnav-brand { order: 1; }
  .topnav-right { order: 2; }
  .topnav-links {
    order: 3;
    flex-basis: 100%;
    /* Offset the first link's padding so its text lines up with the
       brand at the gutter edge. */
    margin-left: -10px;
  }
}

/* ========== HERO ========== */

.hero {
  padding: 88px 0 64px;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grad-glow);
  pointer-events: none;
}
.hero-inner { position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forge-600);
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
}
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--forge-500); }
.hero h1 {
  font-size: 60px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 22px;
}
.hero h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--forge-500);
}
.hero-lead {
  font-size: 19px;
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 540px;
  margin: 0 0 28px;
}
/* Hero lead and positioning statement are rendered Markdown
   (markdownify / .Content), which wraps the text in <p>.
   Without these resets, the global
   `p, .p { margin: 0 0 var(--space-4); }` from
   colors_and_type.css would stack on top of the blocks'
   own bottom margins. */
.hero-lead p, .positioning-statement p { margin: 0; }
.hero-lead p:not(:last-child),
.positioning-statement p:not(:last-child) { margin-bottom: 12px; }
.hero-cta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hero-switch {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-muted);
  margin: 16px 0 0;
}
/* min-height reserves the badge row so late or failed external
   badge images don't shift the hero; the JS in baseof.html hides
   a failed badge's link ([hidden]) instead of letting the browser
   paint a broken-image icon. */
.hero-badges {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 22px;
  min-height: 20px;
}
.hero-badges a { display: inline-flex; line-height: 0; }
.hero-badges a[hidden] { display: none; }
.hero-badges img { height: 20px; display: block; }

/* ========== POSITIONING BAND ========== */

/* The strip between the hero and the "Available on" channels:
   a one-sentence scope statement (the content/_index.md body)
   set as display type, then a quiet "Runs in" row of surface
   links from the homepage front matter. The statement carries
   the concrete rule scope so the hero lead never has to (see
   docs/brand/messaging.md). Per the design system, the surface
   links are plain text links — capsules/pills are status-only,
   never navigation — and the serif-italic accent stays
   reserved for the hero, so the statement renders in plain
   sans. */
.positioning {
  padding: 40px 0 32px;
  border-bottom: 1px solid var(--border-subtle);
}
/* Paragraph margin resets live with .hero-lead's (same
   rendered-Markdown wrapping). */
.positioning-statement {
  max-width: 700px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin-bottom: 18px;
}
.positioning-engine {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
/* One mono-label recipe for both band rows: the positioning
   strip's "Runs in" and the logos strip's "Available on". */
.positioning-label,
.logos-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.positioning-label { flex-shrink: 0; }
.positioning-surfaces {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
/* Quiet navigation links: solid underline on hover (the global
   `a:hover` rule), accent color on hover like .logos-item. */
.positioning-surface {
  font-size: 14px;
  font-weight: 500;
  color: var(--steel-700);
}
.positioning-surface:hover {
  color: var(--accent);
}

/* ========== BUTTONS ========== */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 500; font-size: 14px;
  padding: 9px 16px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1.2;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast),
              box-shadow var(--dur-fast),
              transform var(--dur-fast);
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--forge-600); color: #fff; box-shadow: var(--shadow-inset); }
.btn-primary:hover { background: var(--forge-700); }
.btn-secondary { background: var(--bg-raised); color: var(--steel-800); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--steel-500); background: var(--steel-50); }
.btn-ghost { background: transparent; color: var(--steel-700); }
.btn-ghost:hover { background: var(--steel-100); color: var(--fg); }
.btn-lg { padding: 12px 20px; font-size: 15px; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-mono { font-family: var(--font-mono); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ========== SECTION HEADERS ========== */

.section { padding: 80px 0; border-bottom: 1px solid var(--border-subtle); }
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forge-600);
  margin-bottom: 12px;
}
.section-title {
  font-size: 38px; font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.section-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--forge-600);
  letter-spacing: -0.02em;
}
.section-lead {
  font-size: 17px; color: var(--fg-muted); line-height: 1.55;
  max-width: 640px;
  margin: 0 0 48px;
}

/* ========== FEATURE GRID — PILLAR LAYOUT ========== */

/* ── Pillar group ── */
.pillar { margin-bottom: 52px; }
.pillar:last-child { margin-bottom: 0; }

.pillar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
/* steel-500: the lighter steel-300/400 pair sat below the 4.5:1
   WCAG AA contrast bar at these tiny sizes. */
.pillar-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--steel-500);
  flex-shrink: 0;
}
.pillar-name {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-500);
  flex-shrink: 0;
}
.pillar-rule {
  flex: 1;
  height: 1px;
  background: var(--steel-100);
}

/* ── Card grid ── */
/* Hairline separators: 1px gap over steel-100 background. */
.card-grid {
  display: grid;
  /* Default for any card count (the grid is data-driven): support
     cards flow into as many ~240px columns as fit, so an unexpected
     count never collapses to a single column. data-count 3/4 tune
     this below; the lead always spans the full row (.card--lead). */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px;
  background: var(--steel-100);
  border: 1px solid var(--steel-100);
  border-radius: 12px;
  overflow: hidden;
}

/* Tuned column counts for the real pillar sizes: 3 cards -> 2-col
   support row, 4 cards -> 3-col. */
.card-grid[data-count="3"] {
  grid-template-columns: repeat(2, 1fr);
}
.card-grid[data-count="4"] {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Card base ── */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--canvas-raised);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: background 130ms ease;
}
.card:hover { background: var(--steel-50); color: inherit; text-decoration: none; }
.card:focus-visible {
  outline: 2px solid var(--forge-500);
  outline-offset: -2px;
  z-index: 1;
}

/* Lead card: spans the full row (any count) and lays out horizontally. */
.card--lead {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
  min-height: 300px;
}

/* 2px forge gradient accent on lead cards */
.card--lead::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--forge-500) 0%,
    var(--forge-300) 60%,
    transparent 100%
  );
  z-index: 1;
}

/* ── Card internals ── */
.card-body {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 22px;
  flex: 1;
  min-height: 180px;
}

.card-body--lead {
  padding: 36px 36px 32px 36px;
  flex: 0 0 320px;
  min-width: 240px;
  position: relative;
}

/* The tile (.icon-tile + tint class, set by feature-grid.html)
   supplies size, background, and glyph color; this class only
   adds the card-local spacing. Glyphs keep their 18px/24px
   attribute size inside the tile. */
.card-icon {
  margin-bottom: 16px;
  stroke-width: 1.5;
}
.card-body--lead .card-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 20px;
}
.card-icon svg { stroke-width: inherit; }

.card-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--steel-900);
  margin-bottom: 7px;
}
.card-body--lead .card-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.18;
  margin-bottom: 11px;
}

.card-desc {
  font-size: 13px;
  line-height: 1.58;
  color: var(--steel-500);
  margin: 0;
}
.card-body--lead .card-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--steel-600);
  max-width: 30ch;
}

/* .rule-chip — the MDSxxx rule tags shown on feature cards. */
.rule-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--steel-500);
  background: var(--steel-50);
  border: 1px solid var(--steel-100);
  border-radius: 3px;
  padding: 2px 6px;
  line-height: 1.5;
}
.card-body--lead .rule-chip {
  color: var(--forge-700);
  background: var(--forge-50);
  border-color: var(--forge-100);
}

.card-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 14px;
}

.card-content { display: flex; flex-direction: column; flex: 1; }

/* steel-500 / forge-600 bases: the old steel-300 / forge-400 read
   at ~2:1 against the card background — under the 4.5:1 WCAG AA
   bar — and touch users never see the darker hover state. */
.card-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--steel-500);
  margin-top: auto;
  padding-top: 18px;
  text-decoration: none;
  transition: color 130ms ease;
}
.card:hover .card-more { color: var(--steel-700); }
.card-body--lead .card-more { color: var(--forge-600); font-size: 12.5px; }
.card--lead:hover .card-more { color: var(--forge-700); }
.card-more svg { transition: transform 130ms ease; }
.card:hover .card-more svg { transform: translateX(2px); }

/* ── Lead card media panel ── */
.card-media {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 24px 24px 24px 16px;
  min-width: 200px;
  background: var(--canvas-sunken);
}

.card-media--terminal {
  background: #F0EDE8;
  padding: 20px 20px 20px 12px;
}
.card-media--editor {
  background: #F0EDE8;
  align-items: flex-start;
  padding-top: 24px;
}
.card-media--graph {
  background: var(--steel-50);
}
.card-media--doc {
  background: #F0EDE8;
}
.card-media--ci {
  background: var(--steel-50);
}

.card--lead:hover .card-media {
  filter: brightness(1.02);
}

/* ── Artifact frame — shared frame language ── */
/* Every artifact (real capture or mockup, dark or light) floats on its
   tile with this one shadow — variants must not override it. The value
   is the design system's screenshot float tier (--shadow-float). */
.artifact-frame {
  width: 100%;
  max-width: 440px;
  border-radius: 9px;
  box-shadow: var(--shadow-float);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Shared titlebar base */
.artifact-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  flex-shrink: 0;
  border-bottom: 1px solid;
}
.artifact-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  flex: 1;
  text-align: center;
  color: var(--steel-500);
}

/* Shared traffic dots */
.term-dots, .vscode-traffic, .graph-traffic, .doc-traffic, .ci-traffic {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.term-dot, .vscode-dot, .graph-dot, .doc-dot, .ci-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* ── Artifact 1: Terminal (dark) ── */
.artifact-frame--terminal {
  border: 1px solid #1A1F26;
  background: #0F1419;
}
.artifact-titlebar--terminal {
  background: #070A0D;
  border-bottom-color: #1A1F26;
}
/* The near-black terminal bar needs a lighter title than the default
   steel-500 used on the light artifact bars, for legible contrast. */
.artifact-titlebar--terminal .artifact-title { color: var(--term-fg-dim); }
.term-dot-r { background: #FF6B5C; }
.term-dot-y { background: #E58233; }
.term-dot-g { background: #5DC58C; }

.artifact-body--terminal {
  padding: 14px 16px 16px;
  overflow: hidden;
  background: #0F1419;
}
/* The terminal body is a real `mdsmith check -> fix -> check` run rendered
   to SVG by scripts/gen-feature-terminal.sh; it sits on the dark frame. */
.term-shot { display: block; width: 100%; height: auto; }

/* A real screenshot framed like the other artifacts — e.g. a VS Code
   capture dropped at static/img/features/editor.png. */
.artifact-frame--shot {
  border: 1px solid var(--steel-200);
  background: #FFFFFF;
}
/* A real screenshot floats framed on the tile's light background (like
   the terminal), at its natural aspect — no cropping. */
.artifact-shot { display: block; width: 100%; height: auto; }

/* ── Artifact 2: VS Code editor (light) ── */
.artifact-frame--editor {
  border: 1px solid var(--steel-200);
  background: #FFFFFF;
}
.artifact-titlebar--editor {
  background: #F3F0EC;
  border-bottom-color: #E0DDD8;
  padding: 8px 12px;
}
.vscode-dot-r { background: #FF5F57; }
.vscode-dot-y { background: #FFBD2E; }
.vscode-dot-g { background: #28CA42; }
.artifact-title--editor {
  color: #5C6773;
  font-size: 10px;
}

.vscode-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  background: #FFFFFF;
  min-height: 180px;
}

/* Activity bar — slim left strip */
.vscode-activity-bar {
  width: 34px;
  background: #F3F0EC;
  border-right: 1px solid #E0DDD8;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 4px;
  flex-shrink: 0;
}
.vscode-ab-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #8A93A0;
  cursor: pointer;
}
.vscode-ab-active { color: #D9651D; }
.vscode-ab-icon svg { display: block; }

/* Main editor pane */
.vscode-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Tab bar */
.vscode-tabs {
  display: flex;
  background: #F3F0EC;
  border-bottom: 1px solid #E0DDD8;
  flex-shrink: 0;
}
.vscode-tab {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 6px 12px 5px;
  color: #8A93A0;
  border-right: 1px solid #E0DDD8;
  white-space: nowrap;
}
.vscode-tab--active {
  background: #FFFFFF;
  color: #0F1419;
  border-bottom-color: #FFFFFF;
  border-top: 1.5px solid #D9651D;
  margin-top: -0.5px;
}

/* Editor area with gutter */
.vscode-editor-area {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}
.vscode-gutter {
  display: flex;
  flex-direction: column;
  padding: 8px 8px 8px 4px;
  min-width: 28px;
  background: #FFFFFF;
  border-right: 1px solid #EAECEF;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.7;
  color: #B4BBC4;
  text-align: right;
  flex-shrink: 0;
  user-select: none;
}
.vscode-gutter-active { color: #5C6773; font-weight: 600; }

.vscode-code-area {
  flex: 1;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: #0F1419;
  overflow: hidden;
  position: relative;
}
.vscode-line { display: block; white-space: nowrap; }
.vscode-line--error { background: rgba(229,72,77,0.06); }

/* VS Code syntax */
.vc-text    { color: #3F4A57; }
.vc-url     { color: #2563A8; }

/* Wavy underline squiggle */
.vc-squiggle-red {
  text-decoration: underline wavy #E5484D;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}

/* Hover popup */
.vscode-hover-popup {
  position: absolute;
  top: 75px;
  left: 28px;
  right: 4px;
  background: #FFFFFF;
  border: 1px solid #D6DAE0;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(15,20,25,0.14), 0 1px 4px rgba(15,20,25,0.08);
  overflow: hidden;
  z-index: 5;
}
.vscode-hover-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px 5px;
  border-bottom: 1px solid #EAECEF;
  font-size: 10.5px;
}
.vscode-lightbulb { font-size: 11px; }
.vscode-hover-rule {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #B98AE8;
  font-weight: 600;
}
.vscode-hover-msg { color: #3F4A57; font-size: 10.5px; flex: 1; }
.vscode-hover-actions { padding: 5px 10px 7px; }
.vscode-quickfix-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--forge-600);
  display: block;
  margin-bottom: 3px;
}
.vscode-quickfix-item {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #3F4A57;
  padding: 2px 4px;
  border-radius: 3px;
  background: var(--forge-50);
  border: 1px solid var(--forge-100);
  margin-bottom: 2px;
}
.vscode-quickfix-dim {
  background: var(--steel-50);
  border-color: var(--steel-100);
  color: #8A93A0;
}

/* Status bar */
.vscode-status-bar {
  height: 20px;
  background: #D9651D;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 12px;
  flex-shrink: 0;
}
.vscode-status-problems {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: rgba(255,255,255,0.92);
  font-weight: 500;
}
.vscode-status-lang, .vscode-status-ext {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(255,255,255,0.7);
}
.vscode-status-lang { margin-left: auto; }
.vscode-status-ext  { margin-left: 8px; }

/* ── Artifact 3: Dependency graph (light) ── */
.artifact-frame--graph {
  border: 1px solid var(--steel-200);
  background: #FFFFFF;
}
.artifact-titlebar--graph {
  background: var(--steel-50);
  border-bottom-color: var(--steel-100);
  padding: 8px 12px;
}
.graph-dot-r { background: #FF5F57; }
.graph-dot-y { background: #FFBD2E; }
.graph-dot-g { background: #28CA42; }
.artifact-title--graph {
  color: #5C6773;
  font-size: 10px;
}
.artifact-body--graph {
  padding: 12px;
  background: #FFFFFF;
  overflow: hidden;
}
.graph-svg {
  width: 100%;
  height: auto;
  display: block;
  min-height: 160px;
}

/* ── Artifact 4: Document / TOC (light) ── */
.artifact-frame--doc {
  border: 1px solid var(--steel-200);
  background: #FFFFFF;
}
.artifact-titlebar--doc {
  background: #F3F0EC;
  border-bottom-color: #E0DDD8;
  padding: 8px 12px;
}
.doc-dot-r { background: #FF5F57; }
.doc-dot-y { background: #FFBD2E; }
.doc-dot-g { background: #28CA42; }
.artifact-title--doc { color: #5C6773; font-size: 10px; }

.artifact-body--doc {
  background: #FFFFFF;
  overflow: hidden;
}

.doc-file {
  padding: 6px 0;
  position: relative;
}
.doc-line {
  display: flex;
  align-items: baseline;
  min-height: 21px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
}
.doc-line--added {
  background: rgba(45,142,90,0.08);
}
.doc-gutter {
  width: 26px;
  min-width: 26px;
  text-align: right;
  padding-right: 8px;
  font-size: 10px;
  font-family: var(--font-mono);
  user-select: none;
  flex-shrink: 0;
}
.doc-gutter-dim { color: #B4BBC4; }
.doc-gutter-add { color: #2A8E5A; font-weight: 700; }
.doc-code { padding: 0 10px; flex: 1; overflow: hidden; }
.doc-blank { color: #EAECEF; }

/* Doc syntax */
.doc-h2 { color: #0F1419; font-weight: 600; }
.doc-h3 { color: #3F4A57; font-weight: 600; }
.doc-directive { color: #D9651D; font-style: italic; font-size: 10px; }
.doc-list-item { color: #3F4A57; }
.doc-link { color: #2563A8; }

.doc-annotation {
  font-size: 10px;
  color: #2A8E5A;
  background: rgba(45,142,90,0.07);
  border-top: 1px solid rgba(45,142,90,0.15);
  padding: 6px 10px 6px 34px;
  font-family: var(--font-mono);
}
.doc-annotation code {
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(45,142,90,0.12);
  padding: 1px 4px;
  border-radius: 3px;
  color: #2A8E5A;
}

/* ── Artifact 5: CI checks (GitHub Actions light style) ── */
.artifact-frame--ci {
  border: 1px solid var(--steel-200);
  background: #FFFFFF;
}
.artifact-titlebar--ci {
  background: var(--steel-50);
  border-bottom-color: var(--steel-100);
  padding: 8px 12px;
}
.ci-dot-r { background: #FF5F57; }
.ci-dot-y { background: #FFBD2E; }
.ci-dot-g { background: #28CA42; }
.artifact-title--ci { color: #5C6773; font-size: 10px; }

.artifact-body--ci {
  padding: 12px 14px;
  background: #FFFFFF;
  overflow: hidden;
}

.ci-checks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--steel-100);
}
.ci-workflow-name {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: #0F1419;
}
.ci-all-pass {
  font-size: 10px;
  color: #2A8E5A;
  font-weight: 600;
}

.ci-check-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.ci-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 5px;
  background: var(--steel-50);
  border: 1px solid var(--steel-100);
}
.ci-check--pass { border-left: 2.5px solid #2A8E5A; }
.ci-check-icon { flex-shrink: 0; display: flex; align-items: center; }
.ci-check-name {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #0F1419;
  flex: 1;
}
.ci-check-time {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: #8A93A0;
}

/* Gate step */
.ci-gate-step {
  background: var(--steel-50);
  border: 1px solid var(--steel-100);
  border-radius: 6px;
  overflow: hidden;
}
.ci-step-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--steel-100);
  border-bottom: 1px solid var(--steel-200);
}
.ci-step-arrow { color: #5C6773; font-size: 9px; }
.ci-step-name {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: #3F4A57;
}
.ci-step-body { padding: 8px 10px; }
.ci-step-cmd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #3F4A57;
  margin-bottom: 5px;
}
.ci-dollar { color: var(--forge-500); margin-right: 4px; }
.ci-arg { color: #F4B860; }
.ci-step-output {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ci-pass-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: #FFFFFF;
  background: #2A8E5A;
  padding: 1px 7px;
  border-radius: 3px;
  letter-spacing: 0.05em;
}
.ci-step-dim {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #5C6773;
}

@media (max-width: 960px) {
  /* Tablet: a count=4 pillar's 3 support columns collapse to 2.
     Wider desktops keep the base 3-column layout (clean row of 3);
     <=880px collapses to a single column below. */
  .card-grid[data-count="4"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .card-body--lead {
    flex: 0 0 300px;
  }
}

/* ========== INSTALL LIST ========== */

/* Stacked, always-visible channel list (replaces the old tabs:
   every channel is visible so a reader finds theirs without
   clicking). */
.install-list {
  background: var(--steel-900);
  border: 1px solid var(--steel-800);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.install-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--steel-800);
}
.install-row:last-child { border-bottom: 0; }
.install-row:hover { background: var(--steel-950); }
.install-label {
  flex: 0 0 90px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--forge-400);
}
/* The label links to the channel's registry / marketplace page so
   editor users reach the storefront's install button and anyone can
   check provenance. Keep the forge-400 look on the dark list — the
   global link color (forge-700) would be too dark there. */
a.install-label { text-decoration: none; }
a.install-label:hover { color: var(--forge-300); text-decoration: underline; }
.install-row .install-cmd {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  white-space: nowrap;
  overflow-x: auto;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.install-body {
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.5;
  background: var(--steel-900);
  border: 1px solid var(--steel-800);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.install-cmd { color: var(--term-fg); }
.install-cmd .prompt { color: var(--term-fg-dim); }
.install-cmd .cmd { color: var(--forge-300); }
.install-cmd .arg { color: var(--term-fg); }
.install-copy {
  background: transparent;
  border: 1px solid var(--steel-700);
  color: var(--steel-300);
  padding: 5px 10px; font-size: 11.5px; font-family: var(--font-mono);
  border-radius: 4px; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.install-copy:hover { color: var(--canvas); border-color: var(--steel-500); }
.install-copy.is-copied { color: var(--term-ok); border-color: var(--term-ok); }

/* Install picker: platform-tag filter chips above the channel
   list. Chips toggle .install-row[hidden]; with JS off every row
   stays visible and the chips are inert. */
.install-picker { display: flex; flex-direction: column; gap: 14px; }
.install-filters { display: flex; flex-wrap: wrap; gap: 8px; }
/* Chips sit on the light section background, not on the dark
   install list, so their text must read against --bg (canvas).
   Only the text changed: the old --steel-300 / --canvas washed out
   on the light canvas, so default/hover text now uses --fg-muted /
   --fg. The borders keep their original steel-700 / steel-500
   tokens (both clear the 3:1 non-text-contrast bar on canvas). The
   active state moves to the site's .chip.is-on treatment (forge-700
   on forge-50, ~7:1) for a consistent, legible "selected" look. */
.install-filter {
  background: transparent;
  border: 1px solid var(--steel-700);
  color: var(--fg-muted);
  padding: 5px 12px; font-size: 12px; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.05em;
  border-radius: 999px; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.install-filter:hover { color: var(--fg); border-color: var(--steel-500); }
.install-filter.is-active {
  color: var(--forge-700); border-color: var(--forge-500); background: var(--forge-50);
}
.install-row[hidden] { display: none; }

/* On narrow screens the single-row layout truncated commands to a
   few characters ("$ go install g…") with no visible affordance —
   the overflow-x scroll is invisible until touched. Wrap instead:
   label and copy button share the top line, the command drops to
   a full-width line below (still nowrap + scrollable for the
   longest curl/unzip lines). */
@media (max-width: 560px) {
  .install-row { flex-wrap: wrap; row-gap: 8px; padding: 12px 16px; }
  .install-label { flex: 1 1 auto; }
  .install-row .install-cmd { order: 3; flex-basis: 100%; }
}
/* Sits on the light section background; --fg-muted reads at ~8.4:1. */
.install-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-muted);
}

/* ========== TERMINAL ========== */

.term {
  background: var(--steel-900);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--steel-800);
  box-shadow: var(--shadow-lg);
}
.term-bar {
  height: 32px;
  background: var(--steel-950);
  display: flex; align-items: center; padding: 0 12px;
  gap: 6px;
  border-bottom: 1px solid var(--steel-800);
}
.term-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--steel-700); }
.term-bar .dot.r { background: #FF6B5C; }
.term-bar .dot.y { background: var(--forge-400); }
.term-bar .dot.g { background: var(--term-ok); }
.term-bar .title { margin-left: auto; margin-right: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--term-fg-dim); }
.term-body {
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--term-fg);
  min-height: 320px;
}
.term-prompt { color: var(--term-fg-dim); }
.term-cmd { color: var(--forge-400); }
.term-flag { color: var(--term-key); }
.term-arg  { color: var(--term-fg); }
.term-ok   { color: var(--term-ok); }
.term-err  { color: var(--term-err); }
.term-warn { color: var(--term-warn); }
.term-dim  { color: var(--term-fg-dim); }
.term-key  { color: var(--term-key); }
.term-str  { color: var(--term-string); }
.term-caret {
  display: inline-block; width: 8px; height: 16px;
  background: var(--term-caret); vertical-align: middle;
  animation: blink 1s steps(1) infinite;
  margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

/* ========== DIAGNOSTIC BLOCK ========== */

.diag {
  background: var(--steel-900);
  color: var(--term-fg);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--err-500);
}
.diag.is-ok   { border-left-color: var(--ok-500); }
.diag.is-warn { border-left-color: var(--warn-500); }

/* ========== TABLES ========== */

.tbl {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 14px;
}
.tbl thead th {
  background: var(--steel-50);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--steel-700);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-strong);
}
.tbl tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--fg-muted);
  vertical-align: top;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--canvas); }
.tbl .mono { font-family: var(--font-mono); font-size: 13px; color: var(--forge-600); }

/* ========== DOCS LAYOUT ========== */

.docs-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  padding: 32px 0 80px;
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}
.docs-side {
  position: sticky;
  top: 80px;
  align-self: flex-start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
/* The collapse toggle is a mobile-only affordance: on desktop
   the sidebar is always shown, so the button stays hidden and
   the nav renders unconditionally. */
.docs-side-toggle { display: none; }
.docs-side-nav { display: block; }
.docs-side-group { margin-bottom: 22px; }
.docs-side-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin: 0 0 8px;
  padding: 0 8px;
}
.docs-side-link {
  display: block;
  padding: 5px 10px;
  font-size: 13.5px;
  color: var(--steel-700);
  border-radius: 3px;
  line-height: 1.4;
  border-left: 2px solid transparent;
  margin-left: 6px;
}
.docs-side-link:hover { color: var(--fg); text-decoration: none; background: var(--steel-50); }
.docs-side-link.is-active {
  color: var(--forge-700);
  border-left-color: var(--forge-500);
  background: var(--forge-50);
  font-weight: 500;
}

.docs-main { min-width: 0; }
.docs-breadcrumb { font-size: 13px; color: var(--fg-muted); margin-bottom: 16px; display: flex; align-items: center; gap: 6px; }
.docs-breadcrumb .sep { color: var(--steel-500); font-family: var(--font-mono); }
.docs-prose h1 { font-size: 38px; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 12px; line-height: 1.1; }
.docs-prose h2 {
  font-size: 24px; font-weight: 600; letter-spacing: -0.015em;
  margin: 40px 0 10px; line-height: 1.2;
  padding-top: 16px; border-top: 1px solid var(--border-subtle);
}
.docs-prose h3 { font-size: 18px; font-weight: 600; margin: 28px 0 8px; }
.docs-prose p { font-size: 15px; line-height: 1.7; margin: 0 0 14px; color: var(--steel-800); }
.docs-prose ul { margin: 0 0 16px; padding-left: 20px; }
.docs-prose li { font-size: 15px; line-height: 1.7; color: var(--steel-800); margin-bottom: 4px; }
.docs-prose code { font-family: var(--font-mono); font-size: 13px; background: var(--code-bg); padding: 1px 5px; border-radius: 2px; border: 1px solid var(--code-border); color: var(--steel-800); }
.docs-prose pre {
  background: var(--steel-900); color: var(--term-fg);
  padding: 14px 16px; border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.55;
  overflow-x: auto; margin: 16px 0;
}
.docs-prose pre code { background: none; color: inherit; padding: 0; border: 0; }
.docs-prose .callout {
  background: var(--forge-50); border: 1px solid var(--forge-100);
  border-left: 3px solid var(--forge-500);
  padding: 14px 18px; border-radius: var(--radius-md);
  margin: 16px 0; font-size: 14px; color: var(--forge-800);
}
.docs-prose .callout .label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--forge-700); display: block; margin-bottom: 6px; }

/* ========== RULES TABLE ========== */

.rules-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 0;
  flex-wrap: wrap;
}
.rules-filter {
  flex: 1; min-width: 240px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg-raised);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg);
}
.rules-filter:focus { outline: none; border-color: var(--forge-500); box-shadow: var(--shadow-focus); }
.rules-chip-row { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 11px;
  padding: 3px 8px; border-radius: 3px;
  border: 1px solid var(--border-strong);
  background: var(--bg-raised);
  color: var(--steel-700);
  cursor: pointer;
}
.chip:hover { border-color: var(--steel-400); }
.chip.is-on { border-color: var(--forge-500); background: var(--forge-50); color: var(--forge-700); }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px; line-height: 1.55;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.pill.is-stable { background: #DDF0E5; color: #1f5e3e; }
.pill.is-stable .dot { background: #2A8E5A; }
.pill.is-experimental { background: var(--forge-50); color: var(--forge-700); }
.pill.is-experimental .dot { background: var(--forge-500); }
.pill.is-planned { background: var(--steel-100); color: var(--steel-700); }
.pill.is-planned .dot { background: var(--steel-400); }

/* ========== PLAYGROUND ========== */

.pg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  height: 600px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-raised);
}
.pg-pane { display: flex; flex-direction: column; min-width: 0; }
.pg-pane + .pg-pane { border-left: 1px solid var(--border); }
.pg-head {
  height: 38px;
  background: var(--steel-50);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 14px;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-subtle);
}
.pg-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--forge-500); }
.pg-editor {
  flex: 1;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  border: 0;
  outline: none;
  resize: none;
  color: var(--steel-900);
  background: var(--bg-raised);
}
.pg-diag-list {
  flex: 1;
  overflow-y: auto;
  background: var(--steel-900);
  padding: 12px 0;
}
.pg-diag-row {
  display: grid;
  grid-template-columns: 80px 80px 1fr;
  gap: 10px;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  border-bottom: 1px solid var(--steel-800);
  color: var(--term-fg);
}
.pg-diag-row .loc { color: var(--term-key); }
.pg-diag-row .rule { color: var(--term-err); font-weight: 500; }
.pg-diag-row .msg { color: var(--term-fg); }
.pg-diag-row.is-clean { color: var(--term-ok); padding: 24px 16px; text-align: center; grid-template-columns: 1fr; }

/* ========== COMPARE ========== */

.cmp-cell { font-size: 13px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle); }
.cmp-cell.yes { background: #F0F8F2; color: #1f5e3e; }
.cmp-cell.no  { color: var(--fg-subtle); }
.cmp-cell.partial { background: #FCEFD2; color: #7a4a07; }

/* ========== ICON TILES ========== */

/* Colored icon containers from the design system. The --tint-*
   triads cycle across a grid (never two adjacent tiles in the
   same hue); bare glyphs in prose and nav keep currentColor. */
.icon-tile {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 6px;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-tile.is-ember { background: var(--tint-ember-bg); color: var(--tint-ember-fg); border-color: var(--tint-ember-line); }
.icon-tile.is-sky   { background: var(--tint-sky-bg);   color: var(--tint-sky-fg);   border-color: var(--tint-sky-line); }
.icon-tile.is-moss  { background: var(--tint-moss-bg);  color: var(--tint-moss-fg);  border-color: var(--tint-moss-line); }
.icon-tile.is-amber { background: var(--tint-amber-bg); color: var(--tint-amber-fg); border-color: var(--tint-amber-line); }
.icon-tile.is-clay  { background: var(--tint-clay-bg);  color: var(--tint-clay-fg);  border-color: var(--tint-clay-line); }
.icon-tile.is-slate { background: var(--tint-slate-bg); color: var(--tint-slate-fg); border-color: var(--tint-slate-line); }
.icon-tile.is-forge-grad { background: var(--grad-forge); color: #fff; border-color: var(--forge-600); }

/* ========== BENTO ========== */

/* 6-col feature bento from the design system. Cells rest on
   bg-raised + 1px border and lift to shadow-md on hover; at most
   one is-glow and one is-dark cell per bento. */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.bento-card {
  grid-column: span 2;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.bento-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.bento-card.is-wide { grid-column: span 3; }
.bento-card.is-hero { grid-column: span 4; }
.bento-card.is-full { grid-column: span 6; }
.bento-card.is-tall { grid-row: span 2; }
.bento-card h3 { font-size: 16px; font-weight: 600; margin: 2px 0 0; letter-spacing: -0.01em; }
.bento-card p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.55; margin: 0; }
.bento-card .rule-chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  background: var(--steel-50); border: 1px solid var(--border-strong);
  padding: 1px 6px; border-radius: 3px; color: var(--steel-700);
  align-self: flex-start;
}
.bento-card.is-glow::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--grad-glow);
  pointer-events: none;
}
.bento-card.is-glow > * { position: relative; }
.bento-card.is-dark { background: var(--grad-steel); border-color: var(--steel-800); color: var(--term-fg); }
.bento-card.is-dark h3 { color: var(--canvas); }
.bento-card.is-dark p { color: var(--steel-400); }
.bento-card.is-dark .icon-tile { background: var(--steel-800); color: var(--forge-300); border-color: var(--steel-700); }

@media (max-width: 880px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card, .bento-card.is-wide, .bento-card.is-hero,
  .bento-card.is-full, .bento-card.is-tall { grid-column: auto; grid-row: auto; }
}

/* ========== SCREENSHOT SHOWCASE ========== */

/* A stage cell with a floating window/screenshot on it — the
   feature-section motif from the design system. Put .shot-stage
   on the cell, .shot on the window (composes with the terminal
   mock as class="term shot"; works on plain <img> too). */
.shot-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 48px;
  background: var(--bg-raised);
  overflow: hidden;
}
.shot-stage.is-glow::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--grad-glow);
  pointer-events: none;
}
.shot-stage.is-ember { background: var(--grad-ember); }
.shot-stage > * { position: relative; }
.shot {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  max-width: 100%;
}
.shot.is-sm { box-shadow: var(--shadow-float-sm); }
.shot > img { display: block; width: 100%; border-radius: inherit; }

/* ========== LOGOS STRIP ========== */

.logos {
  padding: 40px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.logos-strip {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 32px;
  filter: grayscale(1); opacity: 0.7;
}
/* .logos-label shares the mono-label recipe declared in the
   POSITIONING BAND section. */
.logos-item { font-family: var(--font-sans); font-size: 18px; font-weight: 600; color: var(--steel-700); letter-spacing: -0.01em; }
.logos-item:hover { color: var(--accent); text-decoration: none; }
.logos-strip:hover { filter: none; opacity: 1; }

/* ========== FOOTER ========== */

.footer {
  padding: 56px 0 36px;
  border-top: 1px solid var(--border);
  background: var(--canvas-sunken);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin: 0 0 12px;
}
.footer-col a { display: block; font-size: 14px; color: var(--steel-700); padding: 3px 0; }
.footer-col a:hover { color: var(--fg); }
.footer-tagline { font-size: 14px; color: var(--fg-muted); line-height: 1.6; max-width: 320px; margin: 14px 0 0; }
.footer-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-subtle); font-family: var(--font-mono); }

/* ========== HERO DEMO ========== */

.hero-demo {
  margin: 0;
  background: var(--steel-900);
  border: 1px solid var(--steel-800);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Screenshot float tier — reserved for screenshots, never UI
     chrome (see docs/development/design-system.md). */
  box-shadow: var(--shadow-float);
}
.hero-demo-bar {
  height: 32px;
  background: var(--steel-950);
  display: flex; align-items: center; padding: 0 12px;
  gap: 6px;
  border-bottom: 1px solid var(--steel-800);
}
.hero-demo-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--steel-700); }
.hero-demo-bar .dot.r { background: #FF6B5C; }
.hero-demo-bar .dot.y { background: var(--forge-400); }
.hero-demo-bar .dot.g { background: var(--term-ok); }
.hero-demo-title {
  margin-left: auto; margin-right: auto;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--term-fg-dim);
}
.hero-demo-img { display: block; width: 100%; height: auto; }

/* ========== CODE BLOCKS ========== */
/* The codeblock render hook wraps Chroma output in .codeblock.
   Chroma (noClasses) writes its own background-color inline on
   the <pre>; pin it to the site's steel-900 panel so the dark
   github-dark token colors keep full contrast and the panel
   shade matches every other code surface. */
.codeblock { margin: 16px 0; }
.codeblock pre,
.docs-prose .codeblock pre,
.codeblock .highlight pre {
  background: var(--steel-900) !important;
  color: var(--term-fg);
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--steel-800);
  overflow-x: auto;
  margin: 0;
}
.codeblock pre code { background: none; border: 0; padding: 0; color: inherit; }

/* ========== DOCS INDEX ========== */

.docs-index {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 24px 0;
}
.docs-index-group { background: var(--bg-raised); padding: 20px 22px; }
.docs-index-group h2 {
  font-size: 15px; font-weight: 600; margin: 0 0 6px;
  border: 0; padding: 0;
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-subtle);
}
.docs-index-group h2 a { color: var(--fg-subtle); }
.docs-index-group h2 a:hover { color: var(--accent); }
.docs-index-summary { font-size: 13px; color: var(--fg-muted); margin: 0 0 10px; }
.docs-index-list { list-style: none; margin: 0; padding: 0; }
.docs-index-list li { font-size: 14px; line-height: 1.5; margin: 0 0 7px; color: var(--steel-800); }
.docs-index-list a { font-weight: 500; }
.docs-index-desc { color: var(--fg-subtle); font-weight: 400; }
.docs-index-flat { margin-top: 16px; }

.docs-side-home {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  padding: 4px 8px 4px 0;
  margin-bottom: 14px;
}
.docs-side-home:hover, .docs-side-home.is-active { color: var(--accent); text-decoration: none; }
a.docs-side-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin: 0 0 8px;
  padding: 0 8px;
}
a.docs-side-title:hover, a.docs-side-title.is-active { color: var(--accent); text-decoration: none; }
.docs-side-sub {
  margin-top: 8px;
  font-weight: 600;
  color: var(--steel-600);
}
.docs-side-nested { padding-left: 18px; font-size: 13px; color: var(--steel-500); }

/* ========== RULE PAGES ========== */

.rule-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.rule-id {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-subtle);
  letter-spacing: 0.04em;
}
.rule-source-link {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  font-size: 13px;
}
.rule-source-link a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg-subtle);
}
.rule-source-link a:hover { color: var(--accent); }

/* Category chips — each maps to a distinct palette pair with
   contrast ≥ 4.5:1 against its background. */
.chip.cat-heading    { background: var(--steel-100); border-color: var(--steel-300); color: var(--steel-700); }
.chip.cat-whitespace { background: var(--steel-50);  border-color: var(--steel-300); color: var(--steel-700); }
.chip.cat-code       { background: var(--forge-50);  border-color: var(--forge-200); color: var(--forge-700); }
.chip.cat-link       { background: #D9E6F5; border-color: #2563A8; color: #1a4780; }
.chip.cat-prose      { background: #DDF0E5; border-color: #2A8E5A; color: #1f5e3e; }
.chip.cat-structural { background: #FCEFD2; border-color: #C77A0C; color: #7a4a07; }
.chip.cat-directive  { background: var(--forge-50);  border-color: var(--forge-300); color: var(--forge-700); }
.chip.cat-list       { background: var(--steel-100); border-color: var(--steel-300); color: var(--steel-700); }
.chip.cat-table      { background: #D9E6F5; border-color: #2563A8; color: #1a4780; }
.chip.cat-accessibility { background: #DDF0E5; border-color: #2A8E5A; color: #1f5e3e; }
.chip.cat-line       { background: var(--steel-50);  border-color: var(--steel-300); color: var(--steel-700); }

/* Auto-linked rule references (render-codespan hook). Keep the
   code-span look; add a subtle accent + underline so it reads
   as a link without losing the monospace token styling. */
a.rule-ref { text-decoration: none; }
a.rule-ref code {
  color: var(--accent);
  border-color: var(--forge-200);
  cursor: pointer;
}
a.rule-ref:hover code { text-decoration: underline; }

/* ========== UTIL ========== */
.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }
.mono { font-family: var(--font-mono); }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero h1 { font-size: 44px; }

  /* Feature grid — every pillar collapses to a single column. The
     data-count variants are listed too: the tuned 2/3-column templates
     carry higher specificity, so a bare `.card-grid` would not override
     them here. */
  .card-grid,
  .card-grid[data-count="3"],
  .card-grid[data-count="4"] {
    grid-template-columns: 1fr;
    border-radius: 8px;
  }
  .card-grid .card--lead {
    grid-column: auto;
  }

  /* Lead card: artifact on top, body below */
  .card--lead {
    flex-direction: column-reverse;
  }
  .card-body--lead {
    padding: 28px 24px 24px;
    flex: none;
    min-width: 0;
    width: 100%;
  }
  .card-body--lead .card-desc { max-width: none; }
  .card-body--lead .card-title { font-size: 18px; }

  .card-media {
    min-height: 180px;
    min-width: 0;
    width: 100%;
    border-bottom: 1px solid var(--steel-100);
    padding: 16px;
  }
  .card-media--terminal { padding: 12px; }

  .artifact-frame { max-width: 100%; }

  /* Scale down VS Code artifact */
  .vscode-code-area { font-size: 9.5px; }
  .vscode-gutter    { font-size: 9px; }
  .vscode-hover-popup { position: static; margin-top: 4px; }

  /* Graph SVG — full width */
  .graph-svg { height: 160px; }

  .pillar { margin-bottom: 36px; }
  .card-body { padding: 22px 20px 18px; }

  .docs-index { grid-template-columns: 1fr; }
  .docs-grid { grid-template-columns: 1fr; gap: 20px; }
  /* Standard mobile pattern: the long docs nav collapses
     behind a disclosure so page content sits directly under
     the breadcrumb instead of below the entire tree. The
     aside shrinks to just the toggle until expanded. */
  .docs-side {
    position: static;
    max-height: none;
    overflow: visible;
  }
  /* Progressive enhancement: the collapse is JS-only. Without
     the `html.js` flag (script disabled or failed) the toggle
     stays hidden and the nav stays visible, so docs navigation
     is always reachable. */
  .docs-side-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    background: var(--steel-50);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
  }
  html.js .docs-side-toggle { display: flex; }
  /* Lucide's createIcons() swaps the <i data-lucide> for an
     inline <svg>, so target both: the <i> covers the brief
     pre-script paint, the <svg> the rendered state. */
  .docs-side-toggle i,
  .docs-side-toggle svg { transition: transform 0.15s ease; }
  .docs-side-toggle[aria-expanded="true"] i,
  .docs-side-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .docs-side-nav { display: block; padding: 14px 0 4px; }
  html.js .docs-side-nav { display: none; }
  html.js .docs-side-nav.is-open { display: block; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* The brand cell drops from 2fr to a half-width column here,
     which crushed the tagline to ~12 characters per line; span
     both columns instead. */
  .footer-grid .footer-col:first-child { grid-column: 1 / -1; }

  /* Stack the "Runs in" label on its own line above the
     wrapping surface links. */
  .positioning { padding: 28px 0 26px; }
  .positioning-statement { font-size: 18px; margin-bottom: 18px; }
  .positioning-engine { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* space-between + wrap scattered the channel names with ragged
     gaps once they wrapped; switch to a left-aligned gap flow with
     the label on its own line. */
  .logos { padding: 28px 0; }
  .logos-strip { justify-content: flex-start; gap: 12px 24px; }
  .logos-label { flex-basis: 100%; }
  .logos-item { font-size: 16px; }

  .pg { grid-template-columns: 1fr; height: auto; }
  .pg-pane + .pg-pane { border-left: 0; border-top: 1px solid var(--border); }
  .pg-pane { height: 360px; }
}

/* ========== SEARCH (⌘K) ========== */

/* The trigger is inert without JS (search.js wires the dialog), so it
   only appears once html.js lands. The docs sidebar stays the no-JS
   path to every page. */
.search-trigger { display: none; }
html.js .search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Re-use .topnav-kbd's border/background; widen the right padding so
     the ⌘K hint reads as a distinct chip from the "Search" label. */
  padding: 4px 6px 4px 10px;
  color: var(--fg-subtle);
}
.search-trigger:hover { color: var(--fg); }
.search-trigger i,
.search-trigger svg { color: var(--fg-subtle); flex: none; }
.search-trigger-text { font-family: var(--font-sans); font-size: 13px; }
.search-trigger-keys { display: inline-flex; gap: 2px; }
.search-trigger-key {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: var(--radius-xs);
  background: var(--steel-100);
  color: var(--steel-600);
}

/* The dialog itself is just a transparent, top-anchored container; the
   visible card is .search-panel. */
.search-dialog {
  width: min(580px, calc(100vw - 32px));
  max-width: 580px;
  margin: 12vh auto auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fg);
  overflow: visible;
}
.search-dialog::backdrop {
  background: rgba(15, 20, 25, 0.42);
  backdrop-filter: saturate(140%) blur(3px);
}
.search-panel {
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
.search-field-icon { color: var(--fg-subtle); flex: none; }
.search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--fg);
}
.search-input::placeholder { color: var(--fg-subtle); }
/* Hide the native clear/search affordances so the field reads as one
   flat input across browsers. */
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-esc {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--steel-50);
  color: var(--fg-subtle);
  cursor: pointer;
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
}
.search-result { margin: 0; }
.search-result-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  color: var(--fg);
}
.search-result-link:hover { text-decoration: none; }
.search-result.is-active .search-result-link { background: var(--accent-soft); }
.search-result.is-active .search-result-title { color: var(--accent); }
.search-result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.search-result-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.search-result-section {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
}
.search-result-summary {
  font-size: 12.5px;
  color: var(--fg-muted);
  line-height: 1.4;
  /* Clamp long summaries to two lines so every result stays scannable. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.search-results mark {
  background: transparent;
  color: var(--accent);
  font-weight: 600;
}

.search-status {
  margin: 0;
  padding: 18px 16px;
  font-size: 13px;
  color: var(--fg-subtle);
  text-align: center;
}

.search-footer {
  display: flex;
  gap: 16px;
  padding: 9px 14px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-sunken);
  font-size: 11px;
  color: var(--fg-subtle);
}
.search-foot { display: inline-flex; align-items: center; gap: 5px; }
.search-footer kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 5px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--bg-raised);
}

/* Lock the page behind the modal so only the result list scrolls.
   The always-on stable gutter keeps the scrollbar's space reserved
   while the lock hides it, so the page never widens and shifts
   behind the dialog. It must not move into the lock rule: Chromium
   reserves a nonzero stable gutter even with overlay scrollbars, so
   a lock-scoped gutter would itself shift the page on open. */
html { scrollbar-gutter: stable; }
html.search-active { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .search-dialog[open] { animation: search-in var(--dur-base) var(--ease-out); }
  @keyframes search-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* On narrow nav the label and key hint would crowd the bar; keep just
   the icon button (still full-size, still keyboard-openable). */
@media (max-width: 720px) {
  .search-trigger-text,
  .search-trigger-keys { display: none; }
  html.js .search-trigger { padding: 5px 7px; }
}