@layer components {

  /* architecture: the app's ARCHITECTURE.md, its sections listed beside it on wide
     screens. */
  .doc__note {
    margin: -2rem 0 2rem;
    color: var(--color-ink-muted);
    text-align: center;
  }

  .doc__columns {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }

  .doc__contents {
    position: sticky;
    top: 5.5rem;
    font-size: 0.9rem;

    ol {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    li + li {
      margin-top: 0.4rem;
    }

    a {
      color: var(--color-ink-muted);
      text-decoration: none;
      transition: color 0.2s;
    }

    a:hover {
      color: var(--color-primary);
    }
  }

  .doc__body {
    max-width: 50rem;
    color: var(--color-ink-muted);
    line-height: 1.65;

    > :first-child {
      margin-top: 0;
    }

    h2 {
      margin: 3rem 0 1rem;
      padding-top: 2rem;
      border-top: 1px solid var(--color-line);
      color: var(--color-ink);
      font-size: 1.6rem;
    }

    h3 {
      margin: 2rem 0 0.75rem;
      color: var(--color-ink);
      font-size: 1.2rem;
    }

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

    ul,
    ol {
      padding-left: 1.2rem;
    }

    li + li,
    li > :is(ul, ol) {
      margin-top: 0.4rem;
    }

    /* Wide tables (the tooling's commands) scroll rather than widen the page. */
    table {
      display: block;
      max-width: 100%;
      overflow-x: auto;
      border-collapse: collapse;
      font-size: 0.92rem;
    }

    th,
    td {
      padding: 0.55rem 1rem 0.55rem 0;
      border-bottom: 1px solid var(--color-line);
      text-align: left;
      vertical-align: top;
    }

    th {
      color: var(--color-ink);
    }

    pre {
      overflow-x: auto;
      padding: 1rem 1.25rem;
      border: 1px solid var(--color-line);
      border-radius: var(--radius);
      background: var(--color-surface);
      font-size: 0.85rem;

      code {
        padding: 0;
        background: none;
        color: var(--color-ink);
      }
    }
  }

  /* A Mermaid diagram, drawn by site.js. Mermaid styles each one with an unlayered
     <style> of its own, which beats anything in a layer, so these take over with
     !important (an important declaration in a layer beats an unlayered normal one). */
  .doc__diagram {
    margin: 1.5rem 0;
    padding: 1.5rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    text-align: center;

    svg {
      max-width: 100%;
      height: auto;
    }

    .node :is(rect, polygon, circle, path) {
      fill: var(--color-surface-raised) !important;
      stroke: var(--color-primary) !important;
    }

    :is(.nodeLabel, .label) {
      color: var(--color-ink) !important;
      fill: var(--color-ink) !important;
    }

    :is(.edgeLabel, .edgeLabel p, .labelBkg) {
      background-color: var(--color-surface) !important;
      color: var(--color-ink-muted) !important;
    }

    :is(.flowchart-link, .edgePath .path) {
      stroke: var(--color-ink-muted) !important;
    }

    marker path {
      fill: var(--color-ink-muted) !important;
      stroke: var(--color-ink-muted) !important;
    }
  }

  @media (max-width: 860px) {
    .doc__columns {
      grid-template-columns: minmax(0, 1fr);
      gap: 2rem;
    }

    .doc__contents {
      position: static;

      ol {
        columns: 2;
      }
    }
  }
}