/* Components. Requires tokens.css and base.css. */

/* ---------- Page head ----------
   <header class="page-head wrap grid">
     <p class="page-head__ref">Ankasum</p>          (optional; mono, margin column)
     <div class="grid__main"><h1>...</h1><p class="lead">...</p></div>
   </header> */
.page-head { padding-block: var(--s-9) var(--s-8); }
.page-head h1 + .lead, .page-head h1 + p { margin-top: var(--s-5); }
.page-head__ref, .section__ref {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
  padding-top: 0.45em;   /* aligns with heading cap height */
}
.page-head__meta { margin-top: var(--s-6); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); }

/* ---------- Section ----------
   A full-width hairline, then the margin-column grid.
   <section class="section wrap grid" aria-labelledby="h-how">
     <p class="section__ref">2</p>   (a real document position or short topic key, never decoration)
     <div class="grid__main">
       <h2 id="h-how" class="section__title">How a test runs</h2>
       <div class="prose">...</div>
     </div>
   </section> */
.section { padding-block: var(--s-7) var(--s-8); position: relative; }
.section::before {
  content: "";
  position: absolute;
  inset: 0 var(--gutter) auto;
  border-top: var(--hair) solid var(--rule);
}
.section--flush::before { display: none; }
.section__title { margin-bottom: var(--s-5); }
.section__intro { max-width: var(--measure); color: var(--text-2); margin-bottom: var(--s-6); }

/* ---------- Status tag: honest build state ----------
   <span class="status" data-state="building">In development</span>
   states: building (accent), planned (stone), live (accent filled, use only when true) */
.status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.4;
  padding: 0.15em 0.5em;
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--text-2);
  white-space: nowrap;
  vertical-align: 0.1em;
}
.status[data-state="building"] { border-color: var(--accent); color: var(--accent-text); }
.status[data-state="live"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* ---------- Definition list: term on the left, definition on the right ---------- */
.defs { display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--hair) solid var(--rule); }
.defs > div { display: grid; gap: var(--s-1) var(--s-6); padding-block: var(--s-4); border-bottom: var(--hair) solid var(--rule); }
.defs dt { font-weight: var(--fw-medium); }
.defs dd { color: var(--text); max-width: var(--measure); }
.defs dd > * + * { margin-top: var(--s-2); }
@media (min-width: 40rem) { .defs > div { grid-template-columns: 14rem minmax(0, 1fr); } }
.defs--mono dt { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-regular); padding-top: 0.15em; }

/* ---------- Spec table ----------
   <div class="table-scroll" role="region" aria-label="..." tabindex="0"><table class="spec">...</table></div> */
.spec { border-top: var(--rule-w) solid var(--text); }
.spec thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  padding-top: var(--s-2);
}
.spec tbody th { font-weight: var(--fw-medium); white-space: nowrap; }
.spec td.num, .spec th.num { text-align: right; font-variant-numeric: tabular-nums; }
.spec code { background: none; padding: 0; }
.spec tr:last-child > * { border-bottom-color: var(--rule-strong); }

/* ---------- Callouts ----------
   <aside class="callout" aria-label="Note"><p class="callout__label">Note</p><p>...</p></aside>
   variants: --status (build state), --alert (Clay; warnings only) */
.callout {
  max-width: var(--measure);
  padding: var(--s-4) 0 var(--s-4) var(--s-5);
  border-left: var(--rule-heavy) solid var(--rule-strong);
}
.callout > * + * { margin-top: var(--s-2); }
.callout__label { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.callout--status { border-left-color: var(--accent); }
.callout--status .callout__label { color: var(--accent-text); }
.callout--alert { border-left-color: var(--alert); }
.callout--alert .callout__label { color: var(--alert-text); }

/* ---------- Steps: only for real sequences ----------
   <ol class="steps"><li><h3 class="steps__title">...</h3><p>...</p></li></ol> */
.steps { counter-reset: step; list-style: none; padding: 0; border-top: var(--hair) solid var(--rule); }
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0 var(--s-4);
  padding-block: var(--s-5);
  margin: 0;
  border-bottom: var(--hair) solid var(--rule);
}
.steps > li::before {
  content: counter(step);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--accent-text);
  padding-top: 0.2em;
}
.steps > li > * { grid-column: 2; max-width: var(--measure); }
.steps > li > * + * { margin-top: var(--s-2); }
.steps__title { font-size: var(--fs-md); font-weight: var(--fw-medium); letter-spacing: 0; }

/* ---------- Two-column split (e.g. "what it does / what it does not") ---------- */
.split { display: grid; gap: var(--s-6); }
@media (min-width: 48rem) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); } }
.split > * > * + * { margin-top: var(--s-3); }

/* ---------- Diagram ----------
   <figure class="diagram">
     <svg viewBox="..." role="img" aria-labelledby="d1-title d1-desc">
       <title id="d1-title">...</title><desc id="d1-desc">...</desc>
       <rect class="d-box" .../> <path class="d-line" .../> <text class="d-label" ...>...</text>
     </svg>
     <figcaption>...</figcaption>
   </figure>
   SVG uses currentColor-free classes below, so light and dark follow the tokens. */
.diagram { margin-block: var(--s-6); max-width: 60rem; }
.diagram svg { width: 100%; height: auto; overflow: visible; font-family: var(--font-mono); }
.diagram figcaption { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-2); max-width: var(--measure); }
.diagram__scroll { overflow-x: auto; }
.diagram__scroll svg { min-width: 52rem; }  /* keeps 13px labels at 12px or more; viewBoxes here are 880 wide */
.d-box       { fill: var(--bg); stroke: var(--rule-strong); stroke-width: 1; }
.d-box--sunk { fill: var(--bg-sunk); }
.d-box--accent { fill: var(--bg); stroke: var(--accent); stroke-width: 1.5; }
.d-box--alert  { fill: var(--bg); stroke: var(--alert); stroke-width: 1.5; stroke-dasharray: 4 3; }
.d-line      { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.d-line--accent { stroke: var(--accent); stroke-width: 1.5; }
.d-line--dashed { stroke-dasharray: 4 3; }
.d-arrow     { fill: var(--rule-strong); }
.d-arrow--accent { fill: var(--accent); }
.d-label     { fill: var(--text); font-size: 14px; font-family: var(--font-sans); }
.d-label--strong { font-weight: 600; }
.d-label--mono { font-family: var(--font-mono); font-size: 13px; fill: var(--text-2); }
.d-label--accent { fill: var(--accent-text); }
.d-mask      { fill: var(--bg); }  /* clears a line behind a label */

/* ---------- Text actions (no filled buttons, no arrows) ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-top: var(--s-6); align-items: baseline; }
.action {
  display: inline-block;
  padding: var(--s-2) var(--s-4);
  border: var(--hair) solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent-text);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
.action:visited { color: var(--accent-text); }
.action:hover { background: var(--accent); color: var(--bg); }

/* ---------- Mono key-value line (e.g. contact, document metadata) ---------- */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-5); font-size: var(--fs-sm); }
.kv dt { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); padding-top: 0.2em; }
.kv dd { margin: 0; }

/* ---------- Footer layout ----------
   <footer class="site-footer"><div class="wrap footer-grid">
     <div class="footer-grid__id">Devanka<br>...</div>
     <nav aria-label="Footer"><ul class="footer-links">...</ul></nav>
     ...
   </div><p class="wrap footer-legal">...</p></footer> */
.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: var(--margin-col) repeat(3, minmax(0, 1fr)); gap: var(--s-7); } }
.footer-grid__id { color: var(--text); font-weight: var(--fw-semibold); }
.footer-grid h2 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); letter-spacing: 0; margin-bottom: var(--s-3); }
.footer-links { list-style: none; padding: 0; }
.footer-links li + li { margin-top: var(--s-2); }
.footer-legal { margin-top: var(--s-7); font-family: var(--font-mono); font-size: var(--fs-xs); }