/* Long-form pages: the ADA compliance checker, the news page and the posts.
   Loaded only by those pages, the way home.css is loaded only by the home page.
   Role tokens all come from styles.css; nothing here invents a colour pair, and
   every pair used on a text or control surface is measured there. */

/* ---------- Byline and dates ---------- */
.post-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: baseline;
  margin: 0 0 1.6rem; color: var(--muted); font-size: 1rem; font-weight: 600;
}
/* The separator is type, not a rule, so it takes the byline's own colour. --line
   is 1.52:1 on paper, which is right for a border and wrong for a glyph. */
.post-meta .sep { color: var(--muted); font-weight: 400; }

/* ---------- Long-form body ----------
   A post runs several sections deep, so headings need air above them. On the
   rest of the site a heading opens its own band, which is why this rule lives
   here rather than in styles.css. */
.post h2 { margin-top: 2.4rem; }
.post h3 { margin-top: 1.8rem; }
.post > h2:first-child, .post > h3:first-child { margin-top: 0; }
.post ul, .post ol { max-width: var(--measure); }
.post figcaption, .post .note { color: var(--muted); font-size: 0.98rem; }
.post .note { max-width: var(--measure); margin: -0.4rem 0 1.4rem; }

/* A definition list reads better than a table for one-off pairs, and stacks
   without a scroll container at 320 pixels. */
.pairs { margin: 0 0 1.5rem; max-width: var(--measure); }
.pairs > div { display: grid; gap: 0.15rem 1.25rem; padding-block: 0.85rem; border-top: 1px solid var(--line); }
.pairs > div:first-child { border-top: 2px solid var(--ink); }
.pairs dt { font-weight: 700; }
.pairs dd { margin: 0; color: var(--muted); }
@media (min-width: 40rem) {
  .pairs > div { grid-template-columns: 15rem minmax(0, 1fr); }
}

/* ---------- The checker ---------- */
.checker-form { margin-top: 2rem; max-width: var(--measure); }
/* The paste box is monospace and tall: it holds a page of markup, and the
   line breaks are part of what is being read. */
.field textarea.checker-source { font-family: var(--mono); font-size: 0.95rem; line-height: 1.5; min-height: 14rem; }
.checker-privacy {
  border-left: 4px solid var(--accent); padding: 0.15rem 0 0.15rem 0.9rem;
  color: var(--muted); font-size: 0.98rem; margin-bottom: 1.4rem;
}
.checker-empty { color: var(--muted); max-width: var(--measure); }
/* The checker needs scripting, because the check runs in the reader's browser.
   Saying so is better than a form that quietly does nothing when scripting is
   off. site.js puts the js class on the root element as its first act. */
.checker-noscript {
  border-left: 4px solid var(--warn); padding: 0.15rem 0 0.15rem 0.9rem;
  color: var(--muted); max-width: var(--measure);
}
.checker-noscript strong { color: var(--ink); }
html.js .checker-noscript { display: none; }
.checker-results-note { margin-top: 0.5rem; }
.checker-status { font-weight: 700; max-width: var(--measure); }
.checker-status.is-error { color: var(--err); }

.finding-group { margin-top: 2.4rem; }
.finding-group > h3 { margin-bottom: 0.5rem; }
.finding-group > p.intro { color: var(--muted); }
.finding-list { list-style: none; padding: 0; margin: 1.2rem 0 0; max-width: none; display: grid; gap: 1.1rem; }
/* A grid item will not shrink below its content unless it is told it may, so
   the source block would otherwise stretch the card past the edge of the page
   on a phone instead of scrolling inside it. */
.finding-list > *, .finding, .finding-items > li { min-width: 0; }
.finding {
  margin: 0; padding: 1.25rem 1.35rem; background: var(--paper);
  border: 1px solid var(--line); border-left: 6px solid var(--muted); border-radius: var(--radius);
}
/* Colour is never the only signal: each group is named in its heading and each
   finding carries its own worded verdict. The border is a second cue. */
.finding.is-fail { border-left-color: var(--err); }
.finding.is-manual { border-left-color: var(--warn); }
.finding-head { font-size: 1.1rem; margin: 0 0 0.35rem; }
.finding-sc { margin: 0 0 0.7rem; font-size: 0.95rem; color: var(--muted); }
.finding-sc .sc {
  display: inline-block; font-family: var(--mono); font-size: 0.9rem; font-weight: 700;
  color: var(--ink); background: var(--tint); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.05rem 0.4rem; margin-right: 0.4rem;
}
.finding-why { margin: 0 0 0.9rem; color: var(--muted); }
/* Where the finding sits in the paste, as a sentence, before any of the
   examples. It is the line a reader takes to their editor. */
.finding-where {
  margin: 0 0 0.9rem; font-size: 0.95rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.finding-items { list-style: none; padding: 0; margin: 0 0 0.9rem; max-width: none; display: grid; gap: 0.75rem; }
.finding-items li { margin: 0; }
.finding-items code {
  display: block; font-family: var(--mono); font-size: 0.88rem; line-height: 1.5;
  color: var(--ink); background: var(--tint); border: 1px solid var(--line);
  border-radius: 8px; padding: 0.4rem 0.6rem; overflow-wrap: anywhere;
}
/* Each example carries the line it is on and the lines around it, so the tag
   can be found in the paste rather than described. The block scrolls sideways
   rather than wrapping: a line of markup broken in half is harder to match
   against the source than one line that runs off the edge. */
.finding-at {
  margin: 0 0 0.3rem; font-size: 0.88rem; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.finding-src {
  margin: 0 0 0.35rem; padding: 0.5rem 0; overflow-x: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  font-family: var(--mono); font-size: 0.84rem; line-height: 1.6;
}
.finding-src-line { display: block; white-space: pre; padding-inline: 0.6rem; }
/* The line the finding is on. --tint sits a step from --paper in both themes,
   so the row stands forward on white in the light theme and forward on navy in
   the dark one, rather than sinking into the block in one of the two. */
.finding-src-line.is-here { background: var(--tint); box-shadow: inset 3px 0 0 var(--brand); color: var(--ink); }
.finding-src-n {
  display: inline-block; min-width: 3.2rem; padding-right: 0.7rem; text-align: right;
  color: var(--muted); user-select: none;
}
.finding-src-text { color: var(--muted); }
.finding-src-line.is-here .finding-src-text { color: var(--ink); }
.finding-tag { font-size: 0.85rem !important; }
.finding-more { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.95rem; }
.finding-fix { margin: 0; }
.finding-fix strong { color: var(--ink); }
.verdict { font-weight: 700; }
.verdict-fail { color: var(--err); }
.verdict-manual { color: var(--warn); }
.verdict-pass { color: var(--ok); }
.checks-run { max-width: none; color: var(--muted); }
.checks-run li { margin-bottom: 0.5rem; }

/* ---------- The news page ---------- */
.update-list { list-style: none; padding: 0; margin: 1.6rem 0 0; max-width: none; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.update { margin: 0; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.update h3 { margin-bottom: 0.35rem; }
.update-date { margin: 0 0 0.6rem; font-weight: 700; font-size: 0.95rem; color: var(--muted); }
.update p { max-width: var(--measure); }
.update p:last-child { margin-bottom: 0; }

.source-list { list-style: none; padding: 0; margin: 1.6rem 0 0; max-width: none; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.source-list li { margin: 0; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.source-list h3 { margin-bottom: 0.25rem; }
.source-list p { margin: 0; color: var(--muted); font-size: 1rem; }
.source-list a { word-break: break-word; }