/* Tag/concept page (S072) — component-level styling for `web/templates/tag.html`, per
 * `web/static/css/app.css`'s own module doc ("component-level styling for individual
 * pages ... belongs to the steps that add those templates"). Reuses the shared
 * `.wrap-main` shell (D-33) and every token in `tokens.css`; introduces no new colour.
 * `.chip`/`.chip-row` are `blog.css`'s own component, redeclared here rather than
 * cross-imported — each page loads only its own stylesheet, `blog.css`'s own module doc.
 *
 * `design/design_handoff_agentblog/mockups/Article.dc.html`'s `#tag` view: a sticky
 * concept card (left column) and the post list (right), in a two-column
 * `auto-fit, minmax(280px,1fr)` grid so the card stacks above the list on a narrow
 * viewport instead of a fixed sidebar width. No `related` row (D-17/D-83: no
 * `skos:related` predicate) and no "N posts · M authors" or "1–4 of N" range counter
 * (D-83: unions of scanned rows and a keyset walk have no total to print, the same rule
 * D-75 already established for the landing page). The concept card's description
 * paragraph is D-90's exception register (docs/decisions.md): D-83 §5, `tags` has no
 * description/definition column and no code path invents prose no column stores. */

.tag-page {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-12);
  align-items: start;
  /* 8px more than `.wrap-main`'s (`app.css`) 40px top padding, matching the mockup's
   * `padding:48px 24px 80px` (`design/design_handoff_agentblog/mockups/Article.dc.html:120`)
   * — same arithmetic `.article`/`.search-page` use — S077d review round 1. */
  padding-top: var(--space-2);
}

.tag-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  padding: var(--space-6);
  position: sticky;
  top: var(--space-14);
}

.tag-card .tag-card-eyebrow {
  margin: 0 0 var(--space-2);
  max-width: none;
  font-family: var(--mono);
  font-size: var(--size-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-2);
}

.tag-card h1 {
  /* 10px, not `--space-5` (20px), and `1.1`, not the shared `h1 { line-height: 1.2 }`
   * (`app.css`): `design/design_handoff_agentblog/mockups/Article.dc.html:123` —
   * S077d review round 1. */
  margin: 0 0 10px;
  line-height: 1.1;
  /* 36px, not the shared `--size-h1` (28px): the concept card's own heading sits between
   * the H1 and display scales, its own off-scale value
   * (`design/design_handoff_agentblog/mockups/Article.dc.html:123`) — S077d. */
  font-size: 36px;
}

/* Each `<dt>`/`<dd>` pair is one `<div>` row of the concept card's term/value list
 * (`design/design_handoff_agentblog/mockups/Article.dc.html:125-130`); a `<dl>` announces
 * a term/definition structure to assistive tech, which the substituted `<div>`/`<p>` rows
 * it replaces did not (S077d review round 1, major). */
.tag-card-dl {
  margin: 0;
  display: grid;
  /* 14px, not `--space-4` (16px): mockup `:125` — S077d review round 1. */
  gap: 14px;
}

.tag-card .tag-card-label {
  /* 6px, not `--space-2` (8px): mockup `:126` — S077d review round 1. */
  margin: 0 0 6px;
  max-width: none;
  font-family: var(--mono);
  font-size: var(--size-mono);
  color: var(--text-2);
}

/* Each synonym is its own `<span>`, joined by a `.tag-card-sep` span, not one joined text
 * node: the mockup colours the "·" separators `--text-2` distinctly from the `--text`
 * synonym terms and lays the row out as a 6px flex-wrap (`design/design_handoff_agentblog/
 * mockups/Article.dc.html:126`) — a joined string put both in `--text` and the gap in a
 * literal space (S077d review round 2, minor). */
.tag-card .tag-card-synonyms {
  margin: 0;
  max-width: none;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tag-card .tag-card-synonyms span:not(.tag-card-sep) {
  font-family: var(--mono);
  /* `--size-helper` (13px), not `--size-ui-dense` (14px):
   * `design/design_handoff_agentblog/mockups/Article.dc.html:126` (S077d). */
  font-size: var(--size-helper);
  color: var(--text);
}

.tag-card-sep {
  color: var(--text-2);
}

.tag-card .tag-card-count {
  margin: var(--space-5) 0 0;
  max-width: none;
  font-family: var(--mono);
  font-size: var(--size-mono);
  color: var(--text-2);
}

.chip-row {
  /* `margin: 0` zeroes the UA `<dd>` default (`margin-inline-start: 40px`) now that the
   * concept card's broader/narrower rows are `<dd>` elements, not `<p>` — S077d review
   * round 1. */
  margin: 0;
  display: flex;
  /* 6px, not `--space-2` (8px): mockup `:126-130`'s `<dd>` gap — S077d review round 1. */
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.chip {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  /* `2px 8px` == `2px var(--space-2)`, distinct from the article footer's `3px 10px`
   * (`post.css`'s own `.chip`) — one shared rule cannot serve both, on padding or size
   * (`design/design_handoff_agentblog/mockups/Article.dc.html:127-129` vs. `:105-107`,
   * S077d). */
  padding: 2px var(--space-2);
  font-family: var(--mono);
  /* `--size-mono` (12px), not `--size-helper` (13px): mockup `:127-129` — S077d review
   * round 2, minor. */
  font-size: var(--size-mono);
  color: var(--text);
}

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-row {
  /* 18px, not `--space-5` (20px): mockup `:135-138` — S077d review round 1. */
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

/* Mockup's last row carries no bottom rule (`:138`) — S077d review round 1. */
.post-row:last-child {
  border-bottom: 0;
}

.post-row .post-row-meta {
  /* `--space` (4px), not `--space-2` (8px): mockup `:135-138` — S077d review round 1. */
  margin: 0 0 var(--space);
  max-width: none;
  font-family: var(--mono);
  font-size: var(--size-mono);
  color: var(--text-2);
}

.post-row h2 {
  margin: 0 0 var(--space);
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--size-h2);
}

.post-row h2 a {
  color: var(--text);
}

.post-row .post-row-dek {
  margin: 0;
  max-width: none;
  /* `--size-ui` (15px) / `1.55`, not `--size-ui-dense` (14px) / `1.6`: mockup `:135-138`
   * — S077d review round 1. */
  font-size: var(--size-ui);
  line-height: 1.55;
  color: var(--text-2);
}

/* Restored (S077d review round 2, nit): dropped without mention by round 1's `.post-row
 * .post-row-dek` rewrite. Both `tag.html` and `tags_index.html` still emit
 * `class="tag-empty"` on a `<p>`; `app.css`'s `.wrap-main p` already supplies the same
 * `--text-2`, so this is visually inert either way, but its removal was accidental, not
 * reasoned, and a future `.wrap-main p` change should not silently also change this
 * empty state. */
.tag-empty {
  color: var(--text-2);
}

/* Base rule shared by every paginated page lives in `app.css`; this page only ever
 * renders one link ("Older →"), so it right-aligns it. */
.pagination {
  justify-content: flex-end;
}