/* Shared about-page chrome for /privacy, /transparency, /about, /quickstart, /activate, /docs.
 *
 * Networks importing this stylesheet inherit the layout shell — header (eyebrow + h1 + back-link),
 * content grid, and the activate-prompt code block style used by /activate and /quickstart.
 *
 * Tokens (var(--color-*), var(--space-*), var(--text-*), var(--radius*)) come from
 * frontend-tokens.css — import both stylesheets in the consuming network.
 *
 * Originally extracted from a bespoke network frontend's styles.css (Session 103 / F1 #6 + #7).
 * That frontend keeps inline rules for behavior-critical aspects (`.about-page[hidden]`)
 * inside its own @layer; the shell + content-grid + prompt classes live here.
 */

@layer components {
  .about-page {
    padding: var(--space-4);
    max-width: var(--shell-max-w);
    margin-inline: auto;
  }
  .about-page__inner {
    background: var(--color-paper);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
  }
  .about-page__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }
  .about-page__header h1 {
    font-family: serif;
    font-size: var(--text-2xl);
    margin-top: var(--space-2);
  }
  .about-page__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-5);
  }
  .about-page__grid h2 {
    font-family: serif;
    font-size: var(--text-lg);
    color: var(--color-accent);
    margin-bottom: var(--space-2);
  }
  .about-page__muted {
    color: var(--color-text-muted, var(--color-text));
    opacity: 0.72;
  }
  .about-list {
    padding-inline-start: var(--space-4);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .about-list--ordered { list-style: decimal; }

  /* Code-style prompt block used in /activate (MCP client config) and
     /quickstart (curl walkthroughs). Wraps long lines, monospaces text,
     subtle paper-soft background. */
  .activate-prompt {
    background: var(--color-paper-soft);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin: var(--space-2) 0;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .activate-prompt code {
    font-family: inherit;
    background: transparent;
    padding: 0;
    color: inherit;
  }
}