/*
+------------------------------------------------------+
|  MODULE:   SEO STACK / DOCS                          |
|  LOADS:    docs/index.html, after base.css           |
|  CONTAINS: the documentation page: the lede, its     |
|            sections, the labels inside a section and |
|            the Back pill in the bar                   |
|  READS:    tokens from base.css. Defines none.       |
+------------------------------------------------------+
*/

/* A page sheet adds to the components layer. It holds the sections
   of its own page only. No colour is written in place here. */
@layer components {
  .docs__lede {
    max-width: 62ch;
    margin: 0 0 1.5rem;
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--text-secondary);
  }

  /* one frame, the sections one under the other with a rule between them */
  .docs__section {
    padding: 1.25rem 0;
    border-top: 0.0625rem solid var(--border-color);
  }

  .docs__title {
    margin: 0 0 0.75rem;
    font-family: var(--font-heading);
    font-size: clamp(1.375rem, 2.4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }

  /* the four questions inside a check's section, as small terminal labels */
  .docs__label {
    width: max-content;
    margin: 1rem 0 0.375rem;
    padding: 0.1875rem 0.625rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cli-text);
    background: var(--cli-bg);
    border: 0.0625rem solid var(--cli-border);
    border-radius: var(--r-pill);
  }

  .docs .panel__text {
    max-width: 70ch;
  }

  /* the way back, a pill at the bar's end: the bar is a grid, so the pill keeps its own width
     against its cell's right edge instead of stretching across it */
  .docs__back {
    justify-self: end;
    text-decoration: none;
  }
}