/* Architecture page. Loads AFTER about.css and inherits its tokens, type scale
   and rails — same site, same system, applied twice on purpose. Only the
   diagram-specific rules live here. */

figure {
  margin: 4px 0 26px;
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 22px 24px 16px;
}
figure svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  color: var(--ink-2);
}
figcaption {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-2);
}
figcaption b { color: var(--ink); font-weight: 600; }

/* Diagram type. Sized at the drawn scale, not the page scale. */
.d-box   { fill: var(--surface-2); stroke: currentColor; stroke-width: 1; }
.d-box-k { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.d-label { font-family: var(--sans); font-size: 13px; font-weight: 600; fill: var(--ink); }
.d-sub   { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-3); }
.d-edge  { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-3); }
.d-accent{ fill: var(--accent); }
.d-line  { stroke: currentColor; stroke-width: 1.2; fill: none; }
.d-line-k{ stroke: var(--accent); stroke-width: 1.6; fill: none; }
.d-cut   { stroke: var(--oxide); stroke-width: 1.4; stroke-dasharray: 5 4; fill: none; }
.d-cut-t { font-family: var(--mono); font-size: 10.5px; fill: var(--oxide); font-weight: 500; }
.d-slab  { fill: var(--surface-2); stroke: currentColor; stroke-width: 1; }

/* ------------------------------------------------------------ tool grid */
.tools { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.toolgroup { background: var(--surface); padding: 16px 18px; }
.toolgroup h4 {
  font-family: var(--sans); font-weight: 600; font-size: 0.92rem; margin: 0 0 4px;
}
.toolgroup p { font-size: 0.87rem; color: var(--ink-2); margin: 0 0 10px; }
.toolgroup ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.toolgroup li {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: 3px; padding: 3px 8px; color: var(--ink-2);
}

/* --------------------------------------------------------- spec listing */
.spec { display: grid; gap: 0; }
.spec-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.spec-row:last-child { border-bottom: 0; }
.spec-row dt {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
}
.spec-row dd { margin: 0; font-size: 0.93rem; }
.spec-row dd .m2 { font-family: var(--mono); font-size: 0.85rem; color: var(--ink-2); }

.exposed { color: var(--oxide); font-weight: 600; }
.private { color: var(--accent); font-weight: 600; }

@media (max-width: 720px) {
  .spec-row { grid-template-columns: 1fr; gap: 3px; }
  figure { padding: 16px 14px 12px; }
}