/*
 * Front page. A single measured column: mark, one factual sentence, the
 * pipeline figure, the install block, and the entry points. Nothing here
 * exists to persuade.
 */

.srag-home-body {
  width: 100%;
}

@media screen and (min-width: 76.25em) {
  .srag-home-nav {
    display: none;
  }
}

.srag-home-body > .md-typeset {
  color: var(--srag-ink-800);
}

.srag-home-section {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2.6rem 1.2rem;
}

.srag-home-section + .srag-home-section {
  border-top: 1px solid var(--srag-border);
}

/* The figure carries detail that rewards width, so it runs wider than the
   prose sections rather than being held to a reading measure. */
.srag-home-section--figure {
  max-width: 64rem;
}

.srag-home-section > :first-child {
  margin-top: 0;
}

.srag-home-section > :last-child {
  margin-bottom: 0;
}

.srag-home-section h2 {
  margin-top: 0;
  margin-bottom: 0.9rem;
}

/* ── Masthead ───────────────────────────────────────────────────────── */

.srag-home-masthead {
  padding-top: 3.2rem;
  padding-bottom: 2.6rem;
}

.srag-home-masthead__brand {
  margin-bottom: 1.6rem;
}

.srag-home-masthead__logo {
  display: block;
  width: 14rem;
  height: auto;
}

/* The masthead heading is the page title; an anchor link on it is noise. */
.md-typeset .srag-home-masthead h1 .headerlink {
  display: none;
}

.srag-logo--dark {
  display: none;
}

[data-md-color-scheme="slate"] .srag-logo--light {
  display: none;
}

[data-md-color-scheme="slate"] .srag-logo--dark {
  display: block;
}

.md-typeset .srag-home-masthead h1 {
  max-width: 42ch;
  margin: 0 0 0.9rem;
}

.md-typeset .srag-home-masthead__lede {
  max-width: 54ch;
  margin: 0;
  color: var(--srag-muted-700);
  font-size: 0.92rem;
  line-height: 1.6;
}

.md-typeset .srag-home-masthead__meta {
  margin: 1.4rem 0 0;
  color: var(--srag-muted-600);
  font-size: 0.74rem;
}

/* ── Pipeline figure ────────────────────────────────────────────────── */

.md-typeset .srag-home-figure {
  margin: 0;
}

/* The diagram is drawn on paper, so it keeps a white plate in both schemes
   rather than putting near-black text on a near-black page. */
.md-typeset .srag-home-figure img {
  display: block;
  width: 100%;
  height: auto;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--srag-border);
  border-radius: var(--srag-radius-sm);
  background: #ffffff;
}

.md-typeset .srag-home-figure figcaption {
  max-width: none;
  margin: 0.7rem 0 0;
  color: var(--srag-muted-600);
  font-size: 0.72rem;
  text-align: left;
}

/* ── Repository tree ────────────────────────────────────────────────── */

.srag-home-tree {
  overflow-x: auto;
  margin: 1.4rem 0 0;
  padding: 1.05rem 1.15rem;
  color: var(--srag-ink-800);
  font-family: var(--md-code-font-family);
  font-size: 0.7rem;
  line-height: 1.7;
  white-space: pre;
  border: 1px solid var(--srag-border);
  border-radius: var(--srag-radius-sm);
  background: var(--srag-surface-soft);
}

/* ── Definition lists (components, principles) ──────────────────────── */

.md-typeset .srag-defs {
  margin: 1.4rem 0 0;
}

.md-typeset .srag-defs dl {
  margin: 0;
}

.md-typeset .srag-defs dt {
  margin-top: 1.1rem;
  color: var(--srag-ink-950);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.md-typeset .srag-defs dt:first-child {
  margin-top: 0;
}

.md-typeset .srag-defs dd {
  margin: 0.15rem 0 0;
  color: var(--srag-muted-700);
  font-size: 0.78rem;
  line-height: 1.55;
}

@media screen and (max-width: 44.984375em) {
  .srag-home-section {
    padding: 2.1rem 1.2rem;
  }

  .srag-home-masthead {
    padding-top: 2.2rem;
  }

  .srag-home-masthead__logo {
    width: 9rem;
  }

  .md-typeset .srag-home-figure img {
    padding: 0.6rem;
  }
}

/* Recorded sci-rag-new session on the homepage. The player brings its own
   ANSI palette, but its background and body text come from the same tokens as
   the console blocks above it, so the two sit on one surface instead of two. */
.srag-cast {
  margin: 1.25rem 0 1rem;
  border: 1px solid var(--srag-border);
  border-radius: var(--srag-radius-md);
  overflow: hidden;
  background: var(--srag-surface-tinted);
}

.srag-cast:empty {
  display: none;
}

.srag-cast .ap-player {
  font-size: 0.82rem;
}

.srag-cast .ap-terminal {
  --term-color-background: var(--md-code-bg-color);
  --term-color-foreground: var(--md-code-fg-color);
  background-color: var(--md-code-bg-color);
}