/* latent.foundation — app + page styles
   Brand atoms (fonts, tokens, reset/base) come from latent-design/tokens.css and
   shared component styles from latent-design/components.css — both vendored via
   the `vendor/latent-design` submodule and loaded ahead of this file in index.html.
   This file holds only what is specific to the marketing site's pages. */

/* === LAYOUT === */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.main-content {
  flex: 1;
}

/* === HERO (HOME) === */
.hero {
  padding: 28px 0 64px;
}

.hero-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.03em;
  color: var(--color-text-muted);
  margin: 0 0 28px;
}

.hero-headline {
  font-family: var(--font-ui);
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 0;
  color: var(--color-text-primary);
  max-width: 16ch;
}

.hero-lede {
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: -0.011em;
  color: var(--color-text-secondary);
  max-width: 54ch;
  margin: 28px 0 0;
}

/* === PROJECTS SECTION (HOME) === */
.projects-section {
  margin-top: var(--space-5);
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}

.section-label {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

.view-all {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  border: none;
  padding: 0;
  transition: color var(--dur-fast) var(--ease-standard);
}

.view-all:hover {
  color: var(--color-text-primary);
  border: none;
}

.project-list {
  border-top: 1px solid var(--color-border-subtle);
}

/* === PROJECTS PAGE === */
.projects-page {
  padding-top: var(--space-10);
  padding-bottom: var(--space-12);
}

.projects-page h1 {
  margin: 0 0 10px;
}

.projects-intro {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--color-text-secondary);
  margin: 0 0 32px;
  max-width: 52ch;
  line-height: 1.7;
}

.filter-bar {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.filter-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-subtle);
  background: transparent;
  color: var(--color-text-muted);
  transition: background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.filter-btn:hover {
  color: var(--color-text-secondary);
}

.filter-btn.active {
  background: var(--color-accent-soft);
  color: var(--color-text-primary);
}

/* === ABOUT PAGE === */
.about-page {
  max-width: 720px;
  padding-top: var(--space-10);
  padding-bottom: var(--space-12);
}

.about-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.03em;
  color: var(--color-text-muted);
  margin: 0 0 28px;
}

.about-header {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.monogram {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--color-surface);
  font-family: var(--font-ui);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--color-text-secondary);
}

.about-intro {
  flex: 1;
  min-width: 280px;
}

.about-headline {
  font-family: var(--font-ui);
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.06;
  margin: 0 0 4px;
  color: var(--color-text-primary);
}

.about-byline {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
  margin: 10px 0 0;
}

.about-bio-lg {
  font-family: var(--font-ui);
  font-size: 19px;
  line-height: 1.75;
  letter-spacing: -0.011em;
  color: var(--color-text-secondary);
  margin: 0 0 22px;
  max-width: var(--measure);
}

.about-bio {
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: -0.011em;
  color: var(--color-text-secondary);
  margin: 0 0 22px;
  max-width: var(--measure);
}

.now-bar {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  margin: 8px 0 36px;
}

.now-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  flex-shrink: 0;
}

.now-text {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.facts-grid {
  border-top: 1px solid var(--color-border-subtle);
}

.fact-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--color-border-subtle);
  align-items: start;
}

.fact-key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.fact-value {
  font-family: var(--font-ui);
  font-size: 14.5px;
  letter-spacing: -0.011em;
  color: var(--color-text-secondary);
}

.elsewhere-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.elsewhere-link {
  font-family: var(--font-ui);
  font-size: 14.5px;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-standard);
}

.elsewhere-link:hover {
  color: var(--color-text-secondary);
}

/* === PROJECT DETAIL PAGE === */
.project-detail {
  max-width: 720px;
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
}

.back-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: var(--space-10);
  transition: color var(--dur-fast) var(--ease-standard);
}

.back-link:hover {
  color: var(--color-text-secondary);
}

.project-detail-hero {
  display: flex;
  align-items: flex-end;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.project-detail-splash {
  font-family: var(--font-ui);
  font-size: clamp(3rem, 8vw, 5rem);
  color: var(--color-text-muted);
  letter-spacing: -0.03em;
  line-height: 1;
  flex-shrink: 0;
}

.project-detail-hero-body {
  padding-bottom: 6px;
}

.project-detail-name {
  font-family: var(--font-ui);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--color-text-primary);
  margin: 0 0 8px;
}

.project-detail-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-detail-meta-sep {
  color: var(--color-border-strong);
}

.project-detail-tags {
  margin-bottom: var(--space-6);
}

.project-detail-divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin-bottom: var(--space-6);
}

.project-detail-lead {
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: -0.011em;
  color: var(--color-text-secondary);
  max-width: var(--measure);
  margin: 0 0 var(--space-8);
}

.project-detail-section {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
}

.project-detail-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
  font-weight: 400;
}

.project-detail-body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: -0.011em;
  color: var(--color-text-secondary);
  max-width: var(--measure);
  margin: 0;
}

.project-detail-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.project-detail-link {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color var(--dur-fast) var(--ease-standard);
}

.project-detail-link:hover {
  color: var(--color-text-secondary);
}

/* === LOG INDEX === */
.log-page {
  padding-top: var(--space-10);
  padding-bottom: var(--space-12);
}

.log-page h1 {
  margin: 0 0 10px;
}

.log-intro {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--color-text-secondary);
  margin: 0 0 32px;
  max-width: 52ch;
  line-height: 1.7;
}

.log-list {
  border-top: 1px solid var(--color-border-subtle);
}

/* Mirrors .project-row: a date rail, the content, and a right-aligned meta column. */
.log-row {
  display: grid;
  grid-template-columns: 106px 1fr auto;
  gap: 24px;
  align-items: start;
  padding: 26px 4px;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--dur-fast) var(--ease-standard);
  color: inherit;
  text-decoration: none;
}

.log-row:hover {
  background: var(--color-bg-subtle);
}

.log-date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-muted);
  padding-top: 5px;
  white-space: nowrap;
}

.log-row-content {
  min-width: 0;
}

.log-row-title {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.log-row-summary {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: var(--tracking-body);
  color: var(--color-text-secondary);
  margin: 0 0 12px;
  max-width: 56ch;
}

.log-reading-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  padding-top: 6px;
}

.log-empty {
  padding: var(--space-8) 0;
  font-family: var(--font-ui);
  color: var(--color-text-muted);
}

/* === LOG ENTRY === */
.log-entry {
  max-width: 720px;
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
}

.log-entry-title {
  font-family: var(--font-ui);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-heading);
  line-height: 1.08;
  color: var(--color-text-primary);
  margin: 0 0 14px;
}

.log-entry-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.log-entry-meta-sep {
  color: var(--color-border-strong);
}

.log-entry-tags {
  margin: var(--space-5) 0 0;
}

.log-entry-divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-6) 0;
}

/* Table of contents. Inline above the prose on narrow screens; a sticky left column
   from 1120px up (see the media query below). */
.log-toc {
  margin: 0 0 var(--space-8);
  padding: var(--space-4) 0 var(--space-4) var(--space-4);
  border-left: 1px solid var(--color-border-subtle);
}

.log-toc-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.log-toc-link {
  display: block;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 5px 0;
  /* Headings wrap to two lines in a 200px column; a long unbroken token must still not
     spill past the column edge. */
  overflow-wrap: break-word;
  transition: color var(--dur-fast) var(--ease-standard);
}

.log-toc-link:hover {
  color: var(--color-text-primary);
}

.log-toc-link.level-3 {
  padding-left: var(--space-4);
  font-size: 13.5px;
  color: var(--color-text-muted);
}

/* Sticky TOC column.
   A grid, not a float: an earlier float + negative margin pushed the TOC off-screen,
   because `.log-entry` is left-aligned in the container and has no left margin to escape
   into. Here the entry itself becomes two columns and *widens* to make room, so the
   column is real rather than borrowed.

   200 + 48 + 732 = 980px, inside the container's 1032px content box at its 1080px max.
   The breakpoint is 1120px so the layout only engages once that fits with room to spare.

   `grid-row: 1 / span 60` is what makes it stick: the TOC's grid area has to span the
   whole article, or sticky has only its own one-row height to travel in and never moves.
   `-1` can't be used — it resolves to the end of the *explicit* grid, which is row 1 when
   every row is implicit. Row gap is 0, so the surplus spanned rows collapse to nothing. */
@media (min-width: 1120px) {
  .log-entry.has-toc {
    max-width: 980px;
    display: grid;
    grid-template-columns: 200px 1fr;
    column-gap: var(--space-8);
  }

  .log-entry.has-toc > * {
    grid-column: 2;
    min-width: 0;
  }

  .log-entry.has-toc > .log-toc {
    grid-column: 1;
    grid-row: 1 / span 60;
    align-self: start;
    position: sticky;
    top: 84px;
    /* Never taller than the viewport: a long contents list scrolls itself rather than
       hiding its own tail behind the fold. */
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    scrollbar-width: thin;
    margin: 0;
    padding: 0 var(--space-4) 0 0;
    border-left: none;
    border-right: 1px solid var(--color-border-subtle);
    text-align: right;
  }

  .log-entry.has-toc .log-toc-link.level-3 {
    padding-left: 0;
    padding-right: var(--space-3);
  }
}

.log-entry-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  flex-wrap: wrap;
}

.log-entry-nav-link {
  font-family: var(--font-ui);
  font-size: 14.5px;
  color: var(--color-text-secondary);
  text-decoration: none;
  max-width: 40ch;
  transition: color var(--dur-fast) var(--ease-standard);
}

.log-entry-nav-link:hover {
  color: var(--color-text-primary);
}

.log-entry-nav-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 5px;
}

.log-entry-nav-link.older {
  margin-left: auto;
  text-align: right;
}

/* === MARKDOWN BODY ===
   Rendered markdown, injected via `inner_html`. Kept deliberately identical in name and
   rules to ido's `.markdown-body` so both apps can drop their copy the day these are
   promoted into latent-design/components.css — see docs/log-section.md §6. */
.markdown-body {
  font-family: var(--font-ui);
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-secondary);
}

.markdown-body > :first-child {
  margin-top: 0;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin: 1.8em 0 0.6em;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  /* Anchor links from the TOC must clear the sticky header. */
  scroll-margin-top: 84px;
}

.markdown-body h1 {
  font-size: var(--text-h2);
}

.markdown-body h2 {
  font-size: var(--text-h3);
}

.markdown-body h3 {
  font-size: var(--text-h4);
}

.markdown-body h4 {
  font-size: var(--text-body-lg);
}

.markdown-body h5,
.markdown-body h6 {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

.markdown-body p {
  margin: 0 0 1.1em;
}

.markdown-body a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-strong);
  transition: color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.markdown-body a:hover {
  color: var(--color-accent-hover);
  border-color: var(--color-accent);
}

.markdown-body strong {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.markdown-body em {
  font-style: italic;
}

.markdown-body del {
  color: var(--color-text-muted);
}

.markdown-body ul,
.markdown-body ol {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
}

.markdown-body li {
  margin: 0 0 0.4em;
}

.markdown-body li::marker {
  color: var(--color-text-muted);
}

.markdown-body blockquote {
  margin: 0 0 1.1em;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--color-border-strong);
  color: var(--color-text-muted);
}

.markdown-body hr {
  margin: 2em 0;
  border: none;
  border-top: 1px solid var(--color-border-subtle);
}

.markdown-body code {
  padding: 0.12em 0.36em;
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--color-code-bg);
  color: var(--color-code-text);
  border-radius: var(--radius-sm);
}

.markdown-body pre {
  margin: 0 0 1.1em;
  padding: 14px 16px;
  background: var(--color-code-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.markdown-body pre code {
  padding: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  background: none;
}

/* Tables can exceed the 720px column, so the table scrolls rather than the page. */
.markdown-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  margin: 0 0 1.4em;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.markdown-body th,
.markdown-body td {
  padding: 7px 12px;
  border: 1px solid var(--color-border-subtle);
  text-align: left;
}

.markdown-body th {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

.markdown-body img {
  max-width: 100%;
  border-radius: var(--radius-md);
}

.markdown-body sup {
  font-size: 0.75em;
  line-height: 0;
}

.markdown-body .footnote-definition {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.markdown-body .footnote-definition p {
  display: inline;
}

/* === IDO PRODUCT PAGE ===
   Wider than the 720px reading column because the feature blocks are two-column.
   Everything here is namespaced .ido-* so it can't leak into the archive pages. */
.ido-page {
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
}

.ido-hero {
  display: flex;
  align-items: flex-end;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.ido-hero-mark {
  font-family: var(--font-ui);
  font-size: clamp(3rem, 8vw, 5rem);
  color: var(--color-text-muted);
  letter-spacing: -0.03em;
  line-height: 1;
  flex-shrink: 0;
}

.ido-hero-body {
  padding-bottom: 6px;
}

.ido-hero-name {
  font-family: var(--font-ui);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-heading);
  line-height: 1.05;
  color: var(--color-text-primary);
  margin: 0 0 6px;
}

.ido-hero-tagline {
  font-family: var(--font-ui);
  font-size: var(--text-body-lg);
  letter-spacing: var(--tracking-body);
  color: var(--color-accent);
  margin: 0 0 10px;
}

.ido-hero-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ido-hero-meta-sep {
  color: var(--color-border-strong);
}

.ido-lede {
  font-family: var(--font-ui);
  font-size: var(--text-body-lg);
  line-height: 1.75;
  letter-spacing: var(--tracking-body);
  color: var(--color-text-secondary);
  max-width: var(--measure);
  margin: 0 0 var(--space-5);
}

.ido-lede strong,
.ido-body strong {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.ido-body code {
  padding: 0.12em 0.36em;
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--color-code-bg);
  color: var(--color-code-text);
  border-radius: var(--radius-sm);
}

.ido-hero-links {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.ido-link-primary {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.ido-link-primary:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.ido-link-secondary {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

.ido-link-secondary:hover {
  color: var(--color-text-secondary);
}

.ido-hero-status {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-muted);
}

/* --- sections --- */
.ido-section {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
}

.ido-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
  margin: 0 0 var(--space-5);
}

.ido-section-lede {
  margin-bottom: var(--space-6);
}

.ido-body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: var(--tracking-body);
  color: var(--color-text-secondary);
  max-width: 58ch;
  margin: 0 0 1.1em;
}

.ido-body:last-child {
  margin-bottom: 0;
}

/* Prose beside an illustration. Collapses to one column early — the miniatures are
   illustrations, so they yield to the text rather than squeezing it. */
.ido-split,
.ido-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 900px) {
  .ido-split,
  .ido-feature {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
  }

  /* Swap visual order without moving the prose in the DOM, so reading order and
     screen-reader order stay prose-first. */
  .ido-feature.reversed .ido-feature-prose {
    order: 2;
  }
}

.ido-feature {
  margin-bottom: var(--space-10);
}

.ido-feature:last-child {
  margin-bottom: 0;
}

.ido-feature-title {
  font-family: var(--font-ui);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3);
}

/* --- diagrams --- */
.ido-diagram {
  color: var(--color-text-muted);
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  overflow-x: auto;
}

.ido-svg {
  width: 100%;
  height: auto;
  display: block;
  min-width: 380px;
}

.ido-svg-box {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.55;
}

.ido-svg-box.target {
  stroke: var(--color-accent);
  opacity: 1;
}

.ido-svg-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: 0.4;
}

.ido-svg-arrow {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
}

.ido-svg-label {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: currentColor;
}

.ido-svg-label.target {
  fill: var(--color-accent);
}

.ido-svg-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: currentColor;
  opacity: 0.7;
}

/* --- the well tree (monospace text, not SVG) --- */
.ido-tree {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.9;
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-secondary);
}

.ido-tree-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  white-space: nowrap;
}

.ido-tree-prefix {
  color: var(--color-border-strong);
}

.ido-tree-name {
  color: var(--color-text-primary);
}

.ido-tree-note {
  color: var(--color-text-muted);
  font-size: 11.5px;
  text-align: right;
}

/* --- miniatures ---
   Schematic illustrations built from tokens. Decorative and aria-hidden; the prose
   beside them carries the information. */
.ido-mini {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  user-select: none;
}

.ido-mini-line {
  display: block;
  height: 6px;
  width: 70%;
  border-radius: var(--radius-pill);
  background: var(--color-border-subtle);
}

.ido-mini-line.long {
  width: 92%;
}

.ido-mini-line.short {
  width: 44%;
}

/* sections miniature */
.ido-mini-sections {
  display: flex;
  gap: var(--space-4);
}

.ido-mini-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-right: var(--space-4);
  border-right: 1px solid var(--color-border-subtle);
}

.ido-mini-rail-mark {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.ido-mini-rail-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}

.ido-mini-rail-dot.active {
  background: var(--color-accent);
}

.ido-mini-sections-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.ido-mini-section {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}

.ido-mini-section.active {
  border-color: var(--color-border-subtle);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}

.ido-mini-section-name {
  color: var(--color-text-primary);
}

.ido-mini-section-note {
  text-align: right;
}

/* editor miniature */
.ido-mini-modes {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-4);
}

.ido-mini-mode {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
}

.ido-mini-mode.active {
  background: var(--color-accent-soft);
  color: var(--color-text-primary);
}

.ido-mini-doc {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ido-mini-doc.compact {
  gap: 7px;
}

.ido-mini-h {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.ido-mini-block-editing {
  padding: 7px 9px;
  border-left: 2px solid var(--color-accent);
  background: var(--color-bg-subtle);
}

.ido-mini-raw {
  color: var(--color-code-text);
}

/* board miniature */
.ido-mini-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.ido-mini-col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.ido-mini-col-head {
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.ido-mini-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 9px 8px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
}

.ido-mini-card.done {
  opacity: 0.5;
}

.ido-mini-card-title {
  display: block;
  height: 5px;
  width: 60%;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}

.ido-mini-card-title.short {
  width: 38%;
}

.ido-mini-card-meta {
  color: var(--color-text-muted);
  font-size: 10px;
  white-space: nowrap;
}

.ido-mini-card-meta.due {
  color: var(--color-accent);
}

.ido-mini-insertion {
  display: block;
  height: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}

/* tabs / split miniature */
.ido-mini-tabs {
  display: flex;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.ido-mini-pane {
  flex: 1;
  min-width: 0;
  padding: var(--space-3);
}

.ido-mini-split {
  width: 1px;
  background: var(--color-border-subtle);
  flex-shrink: 0;
}

.ido-mini-tabstrip {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: 7px;
}

.ido-mini-tab {
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ido-mini-tab.active {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.ido-mini-tab.preview {
  font-style: italic;
}

/* --- roadmap timeline ---
   A spine with a node per arc. The connector below a node is solid where the work is
   real (shipped, or being built now) and dashed from there down, so the boundary between
   what exists and what is projected is visible before a word is read. That is the whole
   reason this is a timeline and not a list — the line carries information. */
.ido-roadmap {
  margin-top: var(--space-2);
}

.ido-arc {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-8);
  align-items: start;
}

.ido-arc:last-child {
  padding-bottom: 0;
}

/* The connector runs from the bottom of this node to the top of the next one. Drawn on
   the arc rather than the node so it can span the arc's full padded height. */
.ido-arc:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 26px;
  bottom: 0;
  border-left: 1px solid var(--color-border-subtle);
}

/* Keyed on one `projected` class, not on a list of horizon names. Which horizons count
   as projected is decided in Rust (`Horizon::projected`) so a new variant can't silently
   inherit a solid line — see the note there. */
.ido-arc.projected:not(:last-child)::before {
  border-left-style: dashed;
}

.ido-arc-spine {
  position: relative;
  width: 26px;
  height: 26px;
}

/* Opaque background so the connector passes behind the node, not through it. */
.ido-arc-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-muted);
}

.ido-arc-horizon {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 7px;
}

/* Shipped work reads at full strength; everything unbuilt is progressively quieter. */
.ido-arc.shipped .ido-arc-node {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.ido-arc.shipped .ido-arc-horizon {
  color: var(--color-accent);
}

.ido-arc.next .ido-arc-node {
  border-color: var(--color-text-secondary);
  color: var(--color-text-secondary);
}

.ido-arc.next .ido-arc-horizon {
  color: var(--color-text-secondary);
}

.ido-arc.exploring .ido-arc-node {
  border-style: dashed;
  border-color: var(--color-border-subtle);
}

.ido-arc-title {
  font-family: var(--font-ui);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.ido-arc.planned .ido-arc-title,
.ido-arc.exploring .ido-arc-title {
  color: var(--color-text-secondary);
}

.ido-arc-text {
  font-family: var(--font-ui);
  font-size: 15.5px;
  line-height: 1.75;
  letter-spacing: var(--tracking-body);
  color: var(--color-text-secondary);
  max-width: 62ch;
  margin: 0;
}

.ido-arc.exploring .ido-arc-text {
  color: var(--color-text-muted);
}

.ido-arc-points {
  margin: var(--space-3) 0 0;
  padding-left: 1.1em;
  list-style: none;
}

.ido-arc-points li {
  position: relative;
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 62ch;
  margin-bottom: 3px;
}

.ido-arc-points li::before {
  content: "—";
  position: absolute;
  left: -1.1em;
  color: var(--color-border-strong);
}

/* Sub-points of shipped work are things that exist; the marker says so quietly. */
.ido-arc.shipped .ido-arc-points li::before {
  color: var(--color-accent);
}

/* --- non-goals --- */
.ido-nongoals {
  margin-top: var(--space-8);
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.ido-nongoals-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
  margin: 0 0 var(--space-3);
}

.ido-nongoals-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ido-nongoals-list li {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* --- closing --- */
.ido-closing-links {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

/* === PROJECT DETAIL → PRODUCT PAGE LINK === */
.project-detail-page-link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 2px;
  margin-bottom: var(--space-8);
  transition: color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.project-detail-page-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* === UTILITY === */
.text-primary {
  color: var(--color-text-primary);
}