/*
 * Drawbridge — architecture page. Loaded AFTER styles.css and depends on it.
 *
 * Consumes the same three-tier engine: everything below resolves to tier-2 semantic tokens
 * defined in styles.css. No raw colour or size literal appears in this file outside the
 * :root block, and that block introduces no new primitives — only diagram-level semantics
 * composed from existing tokens.
 */

:root {
  /* diagram semantics — all derived from tier-2, never from raw values */
  --diagram-surface: var(--color-surface);
  --diagram-group-surface: var(--color-surface-muted);
  --diagram-stroke: var(--color-border-strong);
  --diagram-group-stroke: var(--color-text-faint);
  --diagram-lifeline: var(--color-border);
  --diagram-note-surface: var(--color-surface-inset);
  --diagram-edge-approval: var(--color-text);
  --diagram-edge-approval-halo: var(--color-accent);
  --diagram-edge-return: var(--color-text-faint);

  --diagram-text: var(--text-sm);
  --diagram-text-strong: var(--text-lg);
  --diagram-text-small: var(--text-xs);
  --diagram-min-width: 900px;
  --diagram-seq-min-width: 1100px;
  --prose-max: 78ch;
}

/* -------------------------------------------------------------------------- page shell */

.page-intro {
  max-width: var(--prose-max);
  margin: 0 0 var(--space-6);
  font-size: var(--text-xl);
  line-height: var(--leading-body);
  color: var(--color-text);
}

.prose {
  max-width: var(--prose-max);
}

.doc-section {
  margin-bottom: var(--space-7);
}

.doc-section > h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-lockup);
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--rule-thick) solid var(--color-accent);
}

.doc-section h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin: var(--space-5) 0 var(--space-2);
}

.doc-section p {
  margin: 0 0 var(--space-3);
  max-width: var(--prose-max);
}

.lede {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  max-width: var(--prose-max);
}

/* -------------------------------------------------------------------------- claim callout */

.claim {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--color-surface);
  border: var(--rule-hair) solid var(--color-border);
  border-left: var(--rule-heavy) solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-5);
  box-shadow: var(--shadow-card);
}

.claim__mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.claim__mark svg {
  width: var(--space-4);
  height: var(--space-4);
  display: block;
}

.claim__body {
  min-width: 0;
}
.claim__body p {
  margin: 0;
  font-size: var(--text-lg);
}
.claim__body p + p {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------- grids + panels */

.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.panel {
  background: var(--color-surface);
  border: var(--rule-hair) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5) var(--space-5);
  box-shadow: var(--shadow-card);
}

.panel--lane {
  border-top: var(--rule-heavy) solid var(--state-idle);
}
.panel--lane[data-lane="client-oauth"] {
  border-top-color: var(--lane-client);
}
.panel--lane[data-lane="upstream-oauth"] {
  border-top-color: var(--lane-upstream);
}
.panel--lane[data-lane="sap-legacy"] {
  border-top-color: var(--lane-legacy);
}

.panel--scope {
  border-left: var(--rule-heavy) solid var(--state-fail);
  background: var(--state-fail-surface);
}

.panel__eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 var(--space-1);
}

.panel__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-3);
  letter-spacing: var(--tracking-lockup);
}

.panel p {
  font-size: var(--text-sm);
  margin: 0 0 var(--space-3);
}
.panel p:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------- lists */

.step-list {
  margin: 0;
  padding: 0 0 0 var(--space-5);
  font-size: var(--text-md);
}
.step-list li {
  margin-bottom: var(--space-3);
  padding-left: var(--space-2);
}
.step-list li::marker {
  font-weight: var(--weight-black);
  color: var(--color-text);
}

.fact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
}
.fact-list li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-bottom: var(--rule-hair) solid var(--color-divider);
}
.fact-list li:last-child {
  border-bottom: none;
}
.fact-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-4);
  width: var(--space-3);
  height: var(--rule-thin);
  background: var(--color-accent-line);
}
.fact-list--omitted li::before {
  background: var(--state-fail);
}

.fact-list strong {
  font-weight: var(--weight-bold);
}

/* -------------------------------------------------------------------------- spec table */

.table-scroll {
  overflow-x: auto;
  border: var(--rule-hair) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: var(--ledger-col-min);
}
.spec-table caption {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
  border-bottom: var(--rule-hair) solid var(--color-divider);
}
.spec-table th,
.spec-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--rule-hair) solid var(--color-divider);
}
.spec-table thead th {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
  background: var(--color-surface-muted);
  white-space: nowrap;
}
.spec-table tbody th {
  font-weight: var(--weight-bold);
  white-space: nowrap;
}
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td {
  border-bottom: none;
}
.spec-table .mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------- figures */

.figure {
  margin: 0 0 var(--space-5);
  background: var(--color-surface);
  border: var(--rule-hair) solid var(--color-border);
  border-top: var(--rule-heavy) solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.figure__caption {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin: 0 0 var(--space-4);
}

.figure__scroll {
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.dg {
  display: block;
  width: 100%;
  height: auto;
  min-width: var(--diagram-min-width);
  font-family: var(--font-sans);
}
.dg--seq {
  min-width: var(--diagram-seq-min-width);
}

/* diagram shapes */
.dg-box {
  fill: var(--diagram-surface);
  stroke: var(--diagram-stroke);
  stroke-width: 1.5;
}
.dg-box--group {
  fill: var(--diagram-group-surface);
  stroke: var(--diagram-group-stroke);
  stroke-width: 1.5;
  stroke-dasharray: 7 5;
}
.dg-box--note {
  fill: var(--diagram-note-surface);
  stroke: var(--diagram-stroke);
  stroke-width: 1.5;
}
.dg-box--client {
  stroke: var(--lane-client);
  stroke-width: 3;
}
.dg-box--upstream {
  stroke: var(--lane-upstream);
  stroke-width: 3;
}
.dg-box--legacy {
  stroke: var(--lane-legacy);
  stroke-width: 3;
}
.dg-box--human {
  stroke: var(--color-accent-line);
  stroke-width: 3;
}

/* diagram type */
.dg-title {
  fill: var(--color-text);
  font-size: var(--diagram-text-strong);
  font-weight: var(--weight-bold);
}
.dg-label {
  fill: var(--color-text);
  font-size: var(--diagram-text);
  font-weight: var(--weight-bold);
}
.dg-sub {
  fill: var(--color-text-muted);
  font-size: var(--diagram-text-small);
}
.dg-mono {
  fill: var(--color-text-muted);
  font-size: var(--diagram-text-small);
  font-family: var(--font-mono);
}
.dg-edge-label {
  fill: var(--color-text);
  font-size: var(--diagram-text-small);
  font-weight: var(--weight-bold);
}
.dg-edge-sub {
  fill: var(--color-text-muted);
  font-size: var(--diagram-text-small);
}
.dg-num {
  fill: var(--color-accent-ink);
  font-size: var(--diagram-text-small);
  font-weight: var(--weight-black);
}

/* diagram edges */
.dg-edge {
  fill: none;
  stroke-width: 2.5;
}
.dg-edge--client {
  stroke: var(--lane-client);
}
.dg-edge--upstream {
  stroke: var(--lane-upstream);
}
.dg-edge--legacy {
  stroke: var(--lane-legacy);
}
.dg-edge--approval {
  stroke: var(--diagram-edge-approval);
  stroke-width: 2;
}
.dg-edge--halo {
  stroke: var(--diagram-edge-approval-halo);
  stroke-width: 8;
  stroke-linecap: round;
}
.dg-edge--return {
  stroke: var(--diagram-edge-return);
  stroke-width: 2;
  stroke-dasharray: 7 5;
}
.dg-lifeline {
  stroke: var(--diagram-lifeline);
  stroke-width: 2;
  stroke-dasharray: 4 6;
}

.dg-marker--client {
  fill: var(--lane-client);
}
.dg-marker--upstream {
  fill: var(--lane-upstream);
}
.dg-marker--legacy {
  fill: var(--lane-legacy);
}
.dg-marker--approval {
  fill: var(--diagram-edge-approval);
}
.dg-marker--return {
  fill: var(--diagram-edge-return);
}

.dg-chip {
  fill: var(--color-accent);
}

/* -------------------------------------------------------------------------- legend */

.legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0 0;
  border-top: var(--rule-hair) solid var(--color-divider);
  font-size: var(--text-sm);
}
.legend li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.legend__key {
  flex: none;
  width: var(--space-6);
  height: var(--rule-thick);
  border-radius: var(--radius-sm);
  background: var(--state-idle);
}
.legend__key--client {
  background: var(--lane-client);
}
.legend__key--upstream {
  background: var(--lane-upstream);
}
.legend__key--legacy {
  background: var(--lane-legacy);
}
.legend__key--approval {
  background: var(--color-accent);
  border-top: var(--rule-hair) solid var(--color-text);
  border-bottom: var(--rule-hair) solid var(--color-text);
}
.legend__key--return {
  background: transparent;
  border-top: var(--rule-thin) dashed var(--color-text-faint);
}

/* -------------------------------------------------------------------------- walkthrough */

.walkthrough {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4) var(--space-6);
  margin: 0;
}

.walkthrough__plain {
  background: var(--color-surface-inset);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

/* -------------------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .page-intro {
    font-size: var(--text-lg);
  }
  .doc-section > h2 {
    font-size: var(--text-xl);
  }
}