/* THE MANUAL.
 *
 * Everything here rides on tokens.css: the same ink, the same rules, the same
 * type scale as the landing page, because a reader arriving from a search must
 * not be able to tell the content section was added later. Nothing in this file
 * introduces a colour or a size of its own.
 *
 * ONE MEASURE, AND IT IS NARROWER THAN THE PAGE. The landing page lays out in
 * columns; an article is read straight down, so it holds --measure and the
 * headings hang on the same left edge as the body. */

.doc { padding-block: var(--s-7) var(--s-8); }
.doc > * { max-width: var(--measure); }
.doc h1 { font-size: var(--t-h2); line-height: 1.08; margin: 0 0 var(--s-3); text-wrap: balance; }
.doc h2 { font-size: var(--t-h3); line-height: 1.2; margin: var(--s-7) 0 var(--s-3); text-wrap: balance; }
.doc h3 { font-size: 1.08rem; margin: var(--s-5) 0 var(--s-2); }
.doc p  { margin: 0 0 var(--s-4); line-height: 1.62; }

/* The standfirst is the promise the title made, kept in one sentence. */
.doc__stand { font-size: var(--t-lead); color: var(--quiet); margin-bottom: var(--s-5); }
.doc__meta { display: flex; gap: var(--s-3); align-items: center;
  font-size: var(--t-micro); color: var(--quiet); margin: 0 0 var(--s-5); }

.crumbs { font-size: var(--t-micro); color: var(--quiet); margin: 0 0 var(--s-4); }
.crumbs a { color: var(--quiet); }

.tagpill { display: inline-block; padding: 0.15em 0.6em; border: var(--hair, 1px) solid var(--rule);
  border-radius: 999px; font-size: var(--t-eyebrow); letter-spacing: 0.06em; text-transform: uppercase; }

/* A checklist is the one list shape these articles use. The marker is a rule
   rather than a bullet, which is the same hairline the rest of the site draws
   its edges with. */
.doc ul.checks { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: var(--s-2); }
.doc ul.checks li { padding-left: var(--s-5); position: relative; line-height: 1.55; }
.doc ul.checks li::before { content: ""; position: absolute; left: 0; top: 0.72em;
  width: 0.85rem; height: 1px; background: var(--rule-strong); }

/* Questions people actually type, answered. Each one is its own block so the
   page reads as a reference rather than as an essay with a tail. */
.doc h3.faq-q { margin-top: var(--s-5); }

/* THE ASK. It is the same offer as the landing page in the same words, set
   apart by a rule rather than by a colour, because a coloured box in the middle
   of an answer reads as an advertisement interrupting it. */
.cta { margin: var(--s-7) 0 0; padding: var(--s-5) 0 0; border-top: 2px solid var(--rule-strong); }
.cta__line { font-size: var(--t-lead); margin: 0 0 var(--s-4); }
.cta__act { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0 0 var(--s-3); }
.cta__terms { font-size: var(--t-micro); color: var(--quiet); margin: 0; }

/* READ NEXT. The same cards as the index, so a reader who finishes one answer
   meets the next ones in a shape she already knows how to scan. */
.more { margin-top: var(--s-8); max-width: none; }
.doc .more h2 { font-size: var(--t-h3); margin: 0 0 var(--s-4); }

/* READING PROGRESS. A hairline of accent across the top that fills as the
   article is read, driven by the scroll itself rather than a script. Browsers
   without scroll timelines never draw it. */
.progress { display: none; }
@supports (animation-timeline: scroll()) {
  .progress {
    display: block;
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--accent);
    transform-origin: 0 50%;
    z-index: calc(var(--z-head) + 1);
    pointer-events: none;
    animation: progress linear both;
    animation-timeline: scroll(root);
  }
  @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* IN THIS ARTICLE. A map of the sections, numbered because they are read in
   order. Each row is its own 44px target (decision 10). */
.toc { margin: 0 0 var(--s-6); padding: var(--s-4) 0; border-block: var(--hair) solid var(--rule); }
.doc .toc__h { font-size: var(--t-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--quiet); margin: 0 0 var(--s-2); }
.doc .toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.doc .toc li { counter-increment: toc; margin: 0; }
.toc a { display: flex; align-items: baseline; gap: var(--s-3); min-height: 2.75rem; padding-block: 0.6rem; text-decoration: none; color: var(--fg); line-height: 1.35; box-sizing: border-box; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-size: var(--t-micro); letter-spacing: 0.08em; color: var(--accent); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--accent); }

/* THE INDEX HEAD. The title at the size the landing page gives its section
   heads, and the search box directly under the promise. */
/* The index is a library, not an article, so it takes the page's full spread;
   the prose inside it still holds the measure. */
.doc.man { max-width: var(--spread); }
.man > h1 { font-size: var(--t-display); letter-spacing: -0.02em; }
.find { margin: 0 0 var(--s-4); max-width: 40rem; }
.find input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1.1rem 0.75rem 3rem;
  font: inherit;
  font-size: var(--t-body);
  color: var(--fg);
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f1c5e' stroke-width='2' stroke-linecap='square'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M15 15l6 6'/%3E%3C/svg%3E") no-repeat 1.1rem 50% / 1.25rem;
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--r-pill);
  -webkit-appearance: none;
  appearance: none;
}
.find input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--accent); }
.find__n { font-size: var(--t-micro); color: var(--quiet); margin: 0 0 var(--s-6); }
.find__none { font-size: var(--t-lead); color: var(--quiet); margin: var(--s-6) 0; }

/* THE SECTIONS AS CHIPS. Jump links with no script; filters with one, and the
   pressed chip takes the same ticked state as the pills on the landing page. */
.cats { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); max-width: none; }
.cats a { display: inline-flex; align-items: center; gap: var(--s-2);
  /* 44px, decision 10: the pill itself grows rather than a pseudo that would
     meet its neighbour. */
  min-height: 2.75rem;
  padding: 0.35em 0.95em; border: var(--hair) solid var(--rule-strong); border-radius: var(--r-pill);
  font-size: var(--t-small); text-decoration: none; color: var(--fg); cursor: pointer;
  user-select: none; -webkit-user-select: none; }
.cats a:hover { background: var(--paper-2); }
.cats a[aria-pressed="true"] { background: var(--paper-3); box-shadow: inset 0 0 0 2px var(--accent); }
.cats a[hidden] { display: none; }
.cats em { font-style: normal; color: var(--quiet); font-size: var(--t-micro); font-variant-numeric: tabular-nums; }
.cats .ic { width: 18px; height: 18px; }

/* NEW HERE. Three answers in reading order on the page's second ground, so the
   first thing under the search is a place to begin rather than a wall of 101. */
.start { margin: var(--s-6) 0 var(--s-8); padding: var(--s-6) var(--s-5); background: var(--paper-2); max-width: none; }
.doc .start h2 { font-size: var(--t-h3); margin: 0 0 var(--s-5); padding: 0; border: 0; }
.doc .start__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-5); counter-reset: start; }
.doc .start__item { margin: 0; counter-increment: start; border-top: 2px solid var(--accent); padding-top: var(--s-4); }
.start__item::before { content: counter(start); display: block; font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; line-height: 1; color: var(--accent); margin-bottom: var(--s-3); font-variant-numeric: tabular-nums; }
.start__item a { text-decoration: none; color: var(--fg); display: block; position: relative; }
.start__item a::after { content: ""; position: absolute; inset: -0.6rem 0; }
.start__t { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.25; text-wrap: balance; }
.start__item a:hover .start__t { color: var(--accent); }
.start .card2__d { margin-top: var(--s-2); }
@media (min-width: 52rem) {
  .start { padding: var(--s-7) var(--s-6); }
  .doc .start__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
}

.cat { margin-bottom: var(--s-8); max-width: none; }
.cat[hidden] { display: none; }
.doc .cat h2 { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-h3); margin: 0 0 var(--s-4); }
.cat h2 em { font-style: normal; font-family: var(--font-text); font-size: var(--t-micro); font-weight: 500; color: var(--quiet); border: var(--hair) solid var(--rule); border-radius: var(--r-pill); padding: 0.1em 0.6em; }
.doc .cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 0;
  border-top: var(--hair) solid var(--rule); }

/* A CARD LIGHTS UNDER THE POINTER. An accent rule at its left edge and the
   title in accent, drawn as an inset shadow in padding every card already has,
   so nothing moves sideways when it appears. */
.doc .card2 { margin: 0; padding: var(--s-4); border-bottom: var(--hair) solid var(--rule); max-width: var(--measure); transition: box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease; }
.card2[hidden] { display: none; }
.card2:hover, .card2:focus-within { background: var(--paper-2); box-shadow: inset 3px 0 0 var(--accent); }
.card2 a { text-decoration: none; color: var(--fg); display: block; position: relative; }
/* The title link measured 23px. The target grows into the card's own padding,
   so the design does not change and the card rule keeps neighbours separated. */
.card2 a::after { content: ""; position: absolute; top: -0.8rem; bottom: -0.8rem; left: 0; right: 0; }
.card2:hover .card2__t { color: var(--accent); }
.card2__t { font-size: 1.12rem; font-weight: 600; line-height: 1.3; display: block; text-wrap: balance; }
.card2__d { color: var(--quiet); margin: var(--s-2) 0 var(--s-2); line-height: 1.55; }
.card2__m { display: flex; gap: var(--s-3); align-items: center;
  font-size: var(--t-micro); color: var(--quiet); margin: 0; }
@media (prefers-reduced-motion: reduce) { .card2 { transition: none; } }

@media (min-width: 60rem) {
  .doc .cards { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); }
  .card2 { max-width: none; }
}