/**
 * components.css — the brief's component vocabulary, generalised
 *
 * Every component here exists in the counsel brief. What is added is
 * naming and consistency, not invention. The depth devices — tint,
 * radius, accent edge, hover lift — are what keep long documents from
 * reading as one undifferentiated white field.
 */

/* ══ Stat cards ══════════════════════════════════════════════════
   A row of counts. Mono numerals so digits align down the row.  */

.cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 2.3em 0;
}

.card {
  text-align: center;
  padding: 1.1em 1.2em;
  min-width: 116px;
  background: var(--paper-raise);
  border: 1px solid var(--rule-soft);
}

.card .val {
  font-family: var(--mono);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink-strong);
}

.card .label {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 0.4em;
}

/* Accent-edged variant, for a count that carries weight. */
.card.is-keyed { border-top: var(--edge) solid var(--accent); }
.card.is-dual  { border-top: var(--edge) solid var(--dual); }
.card.is-safe  { border-top: var(--edge) solid var(--safe); }

/* ══ Asides ══════════════════════════════════════════════════════
   A left rule, a mono tag, and quieter text. The rule colour is
   the whole signal — counsel, note, accent.                     */

.aside {
  border-left: 2px solid var(--rule-strong);
  padding-left: 1.3em;
  margin: 1.6em 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: var(--lead-prose);
}

.aside .tag {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 0.4em;
  color: var(--ink-dim);
}

.aside.counsel { border-left-color: var(--dual); }
.aside.counsel .tag { color: var(--dual); }
.aside.note    { border-left-color: var(--neutral); }
.aside.note .tag { color: var(--neutral); }
.aside.accent  { border-left-color: var(--accent); }
.aside.accent .tag { color: var(--accent); }
.aside.safe    { border-left-color: var(--safe); }
.aside.safe .tag { color: var(--safe); }

/* ══ Panels ══════════════════════════════════════════════════════
   A tinted block. The cheapest way to break a white field.      */

.panel {
  background: var(--paper-sunk);
  padding: 1.6em 1.8em;
  border-radius: var(--r-md);
  margin: 1.8em 0;
}

.panel.is-warm { background: var(--paper-soft); }
.panel.is-edged { border-left: var(--edge) solid var(--accent); border-radius: 0 var(--r-md) var(--r-md) 0; }

/* ══ Factor cards ════════════════════════════════════════════════
   Accent top edge, small radius. For a set of parallel points.  */

.factors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 1.8em 0;
}

.factor {
  border: 1px solid var(--rule-soft);
  border-top: var(--edge) solid var(--accent);
  border-radius: var(--r-md);
  padding: 0.95em 0.9em;
  text-align: center;
  background: var(--paper-raise);
}

.factor .fk {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4em;
}

.factor .fd { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.45; }

.factor.is-dual { border-top-color: var(--dual); }
.factor.is-dual .fk { color: var(--dual); }
.factor.is-safe { border-top-color: var(--safe); }
.factor.is-safe .fk { color: var(--safe); }

/* ══ Path cards ══════════════════════════════════════════════════
   Left accent edge, radius, and a lift on hover. The one place
   the site moves.                                               */

.path {
  display: block;
  border: 1px solid var(--rule-warm);
  border-left: var(--edge) solid var(--accent);
  border-radius: var(--r-lg);
  padding: 1.2em 1.3em;
  background: var(--paper-raise);
  text-align: left;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.path:hover {
  background: var(--paper-soft);
  transform: translateY(-2px);
  box-shadow: var(--lift-2);
}

.path .pk {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4em;
}

.path .pt { font-size: 1.04rem; font-weight: 600; color: var(--ink-strong); margin-bottom: 0.35em; }
.path .pd { font-size: 0.85rem; color: var(--ink-muted); line-height: 1.45; }
.path .pmeta { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-dim); margin-top: 0.6em; }
.path .path-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 0.7em; padding-top: 0.6em; border-top: 1px solid var(--rule); }
.path .path-links a { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--accent-deep); text-decoration: none; }
.path .path-links a:hover { text-decoration: underline; }
div.path:hover { transform: none; box-shadow: none; background: transparent; }

/* ══ Semantic dots + legend ══════════════════════════════════════ */

.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.dot.safe { background: var(--safe); }
.dot.dual { background: var(--dual); }
.dot.neut { background: var(--neutral); }
.dot.acc  { background: var(--accent); }

.legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.4em;
  margin: 1em 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.legend-item { display: flex; align-items: center; gap: 6px; }

/* ══ Pull quote ══════════════════════════════════════════════════ */

.pull {
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--ink-strong);
  text-align: center;
  max-width: 730px;
  margin: 2.2em auto;
  font-style: italic;
}

.pull em { color: var(--accent); font-style: italic; }

/* ══ Tiles ═══════════════════════════════════════════════════════
   A grid where each cell is one atom of something. States carry
   the meaning; the grid carries the scale.                      */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; margin: 1.6em 0; }

.tile {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  background: #eef2ef;
  border: 1px solid #e0e6e1;
}

.tile.is-published { background: #e6f0ea; border-color: #cfe3d6; }
.tile.is-held      { background: #f3e0e0; border-color: #d9b0b0; box-shadow: 0 0 0 2px var(--dual); }
.tile.is-pending   { background: var(--paper-sunk); border-color: var(--rule); }

/* ══ Q&A ═════════════════════════════════════════════════════════ */

.qa { border-left: 2px solid var(--accent); padding-left: 1.3em; margin: 1.3em 0; }
.qa .q { font-style: italic; color: var(--neutral); font-size: 0.94rem; margin-bottom: 0.3em; }
.qa .q .n { font-family: var(--mono); font-style: normal; color: var(--accent); font-size: 0.78rem; margin-right: 0.5em; }
.qa .a { font-size: 0.9rem; margin: 0; }

/* ══ Figure ══════════════════════════════════════════════════════ */

.fig { margin: 2.3em 0; text-align: center; }
.fig svg, .fig img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.fig-caption {
  font-size: 0.75rem; color: var(--ink-dim); font-style: italic;
  text-align: center; margin: 0.85em auto 0; max-width: 680px; line-height: 1.6;
}

/* ══ Numbered section heading ════════════════════════════════════ */

.sec-num {
  font-family: var(--mono);
  font-size: 0.6em;
  color: var(--accent-pale);
  margin-right: 0.5em;
}

/* ══ Collapsible track ═══════════════════════════════════════════ */

details.track {
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-xl);
  margin: 1.4em 0;
  overflow: hidden;
  background: var(--paper-raise);
}
details.track[open] { border-color: var(--rule-warm); }

details.track > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1em 1.4em;
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-weight: 600;
  color: var(--ink-strong);
  font-size: 1.02rem;
  background: var(--paper-sunk);
}
details.track > summary::-webkit-details-marker { display: none; }

details.track > summary .marker {
  font-family: var(--mono);
  color: var(--accent);
  font-size: 1.1rem;
  width: 18px;
  display: inline-block;
  transition: transform 0.25s var(--ease);
}
details.track[open] > summary .marker { transform: rotate(45deg); }

details.track > summary .tk {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-left: auto;
}

.track-body { padding: 0.6em 1.6em 1.6em; }

/* ══ Viz canvas — the cartographer figure idiom (shared) ═════════ */

.viz { margin: 0 auto 1.4em; position: relative; max-width: var(--w-wide); padding: 0 var(--pad-x); }
.viz canvas { display: block; width: 100%; border: 1px solid var(--rule-soft); background: var(--paper); }
.viz-caption { font-size: 0.75rem; color: var(--ink-dim); text-align: center; margin-top: 0.6em; font-style: italic; }

/* ══ Motion ══════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .path:hover { transform: none; }
}

@media print {
  .reveal { opacity: 1; transform: none; }
  details.track { border: none; }
  details.track > summary { background: none; padding-left: 0; }
  details.track .marker { display: none; }
  h2, h3, table, .fig, .cards, .aside, .factors, .qa { page-break-inside: avoid; }
}

/* ── Prose lists (governance corpus, ported documents) ── */
.prose-block ul, .prose-block ol {
  font-family: var(--serif);
  font-size: var(--prose);
  line-height: var(--prose-lead);
  color: var(--ink);
  margin: 1.1em 0 1.1em 0.4em;
  padding-left: 1.4em;
}
.prose-block li { margin: 0.4em 0; }
.prose-block ul li::marker { color: var(--accent); }

/* ══ Expandable series cards (publications hub) ══════════════════ */
.series-stack { display: flex; flex-direction: column; gap: 10px; }
.series-card { border: 1px solid var(--rule-warm); border-left: var(--edge) solid var(--accent); border-radius: var(--r-lg); background: transparent; }
.series-card summary { display: flex; align-items: baseline; gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none; }
.series-card summary::-webkit-details-marker { display: none; }
.series-card summary:hover { background: var(--paper-soft); }
.series-card .sc-key { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; color: var(--accent-deep); flex: none; width: 5.2em; }
.series-card .sc-name { font-weight: 600; color: var(--ink-strong); font-size: 1.02rem; }
.series-card .sc-count { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-dim); margin-left: auto; white-space: nowrap; }
.series-card .sc-chev { font-family: var(--mono); color: var(--ink-dim); flex: none; transition: transform 0.18s ease; }
.series-card[open] .sc-chev { transform: rotate(180deg) translateY(-3px); }
.series-card .sc-body { padding: 2px 18px 16px 18px; border-top: 1px solid var(--rule); }
.series-card .sc-desc { font-family: var(--serif); font-size: 0.92rem; color: var(--ink-soft); line-height: 1.65; margin: 12px 0 6px; }
.series-card .sc-list { list-style: none; margin: 8px 0 0; padding: 0; }
.series-card .sc-list li { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 0.88rem; }
.series-card .sc-list li:last-child { border-bottom: 0; }
.series-card .sc-id { font-family: var(--mono); font-size: 0.64rem; color: var(--ink-dim); flex: none; width: 8.5em; }
.series-card .sc-title { color: var(--ink); }
.series-card .sc-title a { color: var(--ink-strong); border-bottom: 1px solid var(--rule-strong); text-decoration: none; }
.series-card .sc-title a:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }
.series-card .sc-date { font-family: var(--mono); font-size: 0.64rem; color: var(--ink-dim); margin-left: auto; white-space: nowrap; }
.series-card .sc-home { font-family: var(--mono); font-size: 0.7rem; color: var(--accent-deep); text-decoration: none; display: inline-block; margin-top: 10px; }
.series-card .sc-home:hover { text-decoration: underline; }
@media (max-width: 640px) { .series-card summary { flex-wrap: wrap; } .series-card .sc-count { margin-left: 6.4em; } .series-card .sc-list li { flex-wrap: wrap; } .series-card .sc-date { margin-left: 8.5em; } }

/* ── Conformance status ─────────────────────────────────────────
   The tile palette follows the honesty of the status, not its
   cheerfulness: a reference pass is ink, not green, because green
   would imply a reproduction that has not happened. */
.tile.is-refpass  { background: var(--paper-sunk); border-color: var(--rule-strong); }
.tile.is-partial  { background: #f7ece9; border-color: #dcbdb6; }
.tile.is-scaffold { background: #e6f0ea; border-color: #cfe3d6; }
.dot.refpass  { background: var(--ink-soft); }
.dot.partial  { background: #a3423c; }
.dot.scaffold { background: var(--safe); }
.cell-status.s-partial { color: #a3423c; background: #f7ece9; }
.cell-rep {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.04em;
  line-height: 1.8; color: var(--ink-dim); margin: 8px 0 0;
  padding-top: 7px; border-top: 1px dotted var(--rule);
}

/* ── Step cards ───────────────────────────────────────────────────
   A numbered sequence where the order is the argument: each step is
   close to useless without the one before it, so the numeral is the
   visual and the card is centred on it. Descended from the lens cards
   on the Invariant Theory hub, which earned their keep by being a
   glyph, a label, a short title and exactly one italic line — the
   discipline is the brevity, not the border.
   One accent only: these are stages, not semantic states, and the
   semantic colours are reserved for things that mean something. */
/* Fixed counts, never auto-fit: a four-step sequence that reflows to
   three-plus-one strands the last step on a row of its own and reads as
   an afterthought. Two-by-two at the site's measure, four across only
   when there is genuinely room, one column on a phone. */
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 2.4em 0 1em; }
@media (min-width: 1140px) { .steps { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px)  { .steps { grid-template-columns: 1fr; } }
.step { display: block; text-decoration: none; color: inherit; text-align: center;
  border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 1.5em 1.3em 1.35em;
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  transition: border-color 0.25s ease, transform 0.25s ease; }
.step:hover { border-color: var(--accent); transform: translateY(-2px); }
.step .step-n { font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--accent); margin-bottom: 0.32em; }
.step .step-where { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 0.55em; }
.step .step-title { font-family: var(--serif); font-size: 1.1rem; color: var(--ink-strong); margin-bottom: 0.4em; line-height: 1.25; }
.step .step-desc { font-style: italic; font-size: 0.85rem; color: var(--ink-muted); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .step { transition: border-color 0.25s ease; } .step:hover { transform: none; } }