/* Architecture page (tools/genArchitecture.mjs): six diagrams as inline SVG, drawn with the tokens only,
   so they follow the theme. The technology marks sit on a light plate (--logo-ground-light) in both
   themes, so a dark or black brand mark stays readable on the dark theme. No animation. */

.ar-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--color-default);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.ar-canvas { overflow-x: auto; }
.ar-svg { display: block; width: 100%; min-width: 760px; height: auto; }

.ar-aside {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-default);
}
@media (max-width: 900px) { .ar-aside { grid-template-columns: minmax(0, 1fr); } }
.ar-text { display: flex; flex-direction: column; gap: var(--space-3); }
.ar-text p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-foreground); }

/* ── Legend ── */
.ar-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ar-legend li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-label); line-height: var(--leading-label); color: var(--color-muted); }
.ar-sw { flex: none; width: 28px; height: 18px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-emphasis); background: var(--color-surface); }
.ar-sw--core { background: var(--color-primary-soft); border-color: var(--color-primary); }
.ar-sw--part { background: var(--color-surface); }
.ar-sw--muted { background: var(--color-surface-muted); }
.ar-sw--ext { background: var(--color-surface-muted); border-style: dashed; }
.ar-sw--group { background: transparent; border-style: dashed; }
.ar-sw--guard { background: var(--color-warning-soft); border-color: var(--color-warning); }
.ar-sw--plate { width: 18px; margin-right: 10px; background: var(--logo-ground-light); border-color: var(--color-default); }
.ar-sw--arrow, .ar-sw--keep, .ar-sw--life { height: 0; border-width: 0; border-radius: 0; border-top: 2px solid var(--color-muted); background: none; position: relative; }
.ar-sw--arrow::after { content: ''; position: absolute; right: -2px; top: -6px; border: 5px solid transparent; border-left: 8px solid var(--color-muted); border-right-width: 0; }
.ar-sw--keep { border-top-style: dotted; }
.ar-sw--life { border-top: 2px dashed var(--color-emphasis); }
.ar-sw--number { width: 18px; margin-right: 10px; height: 18px; border-radius: var(--radius-full); border: 0; background: var(--color-primary); }

/* ── Inside the drawings ── */
.ar-svg text { font-family: var(--font-sans); fill: var(--color-foreground); }
.ar-t { font-size: 14px; font-weight: var(--weight-semibold); }
.ar-t--lg { font-size: 20px; }
.ar-s { font-size: 13px; fill: var(--color-muted); }
.ar-svg .ar-s--ink { fill: var(--color-foreground); font-weight: var(--weight-medium); }
.ar-svg .ar-cap { font-size: 13px; font-weight: var(--weight-semibold); fill: var(--color-subtle); letter-spacing: 0.02em; }
.ar-svg .ar-lbl {
  font-size: 13px;
  fill: var(--color-muted);
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 6px;
  stroke-linejoin: round;
}

.ar-box { fill: var(--color-surface); stroke: var(--color-emphasis); stroke-width: 1.5; }
.ar-box--core { fill: var(--color-primary-soft); stroke: var(--color-primary); }
.ar-box--muted { fill: var(--color-surface-muted); }
.ar-box--ext { fill: var(--color-surface-muted); stroke-dasharray: 6 4; }
.ar-box--inner { fill: var(--color-surface-muted); stroke: var(--color-default); }
.ar-group { fill: none; stroke: var(--color-emphasis); stroke-width: 1.5; stroke-dasharray: 6 4; }
.ar-chip { fill: var(--color-surface); stroke: var(--color-default); stroke-width: 1; }
.ar-plate { fill: var(--logo-ground-light); stroke: var(--color-default); stroke-width: 1; }
.ar-brand { fill: var(--color-primary); }
.ar-rule { stroke: var(--color-primary); stroke-opacity: 0.35; stroke-width: 1; }

.ar-line { fill: none; stroke: var(--color-muted); stroke-width: 1.5; }
.ar-line--keep { stroke-dasharray: 2 4; stroke-width: 2; stroke-linecap: round; }
.ar-head { fill: var(--color-muted); }
.ar-life { fill: none; stroke: var(--color-emphasis); stroke-width: 1.5; stroke-dasharray: 4 5; }

.ar-badge circle { fill: var(--color-primary); }
.ar-svg .ar-badge text { fill: var(--color-primary-foreground); font-size: 13px; font-weight: var(--weight-semibold); }

.ar-guard { fill: var(--color-warning-soft); stroke: var(--color-warning); stroke-width: 1; }
.ar-svg .ar-guard-t { fill: var(--color-warning-text); }
.ar-live { fill: var(--color-success-soft); stroke: var(--color-success); stroke-width: 1; }
.ar-svg .ar-live-t { fill: var(--color-success-text); }

.ar-stripe--backoffice { fill: var(--color-fn-backoffice); }
.ar-stripe--land { fill: var(--color-fn-land); }
.ar-stripe--partnerships { fill: var(--color-fn-partnerships); }
.ar-stripe--construction { fill: var(--color-fn-construction); }
.ar-stripe--legal { fill: var(--color-fn-legal); }

/* ── One request: the numbered steps under the drawing ── */
.ar-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); }
@media (max-width: 900px) { .ar-steps { grid-template-columns: minmax(0, 1fr); } }
.ar-steps li { display: flex; gap: var(--space-3); align-items: flex-start; }
.ar-steps p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-sm); }
.ar-steps__n {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}