/* ============================================================================
 * diagrams.css — shared design system for the Platform Architecture pages.
 * Token-driven (theme.css) so inline SVGs + tables adapt to zen-light/zen-dark.
 * SVG text uses fill="currentColor"; the .dgm wrapper sets color:var(--ink).
 * ========================================================================== */

/* page scaffolding */
.arch-wrap { max-width: 1080px; }
.arch-lede { max-width: 820px; color: var(--body-ink); line-height: 1.62; }
.arch-sec { margin: 26px 0; }
.arch-sec > h2 { font-size: 19px; color: var(--ink); margin: 0 0 4px; }
.arch-sec > .sub { color: var(--muted); font-size: 13px; margin: 0 0 12px; }

/* sticky in-page anchor nav (real <a href="#..."> links) */
.arch-nav {
  position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; gap: 6px;
  padding: 9px 4px; margin: 6px 0 18px;
  background: var(--page-bg, var(--wrap)); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.arch-nav a {
  font-size: 12px; text-decoration: none; color: var(--body-ink);
  border: 1px solid var(--line); background: var(--card-bg);
  border-radius: 999px; padding: 4px 11px;
}
.arch-nav a:hover, .arch-nav a.active { border-color: var(--accent2); color: var(--ink); }

/* diagram frame: a .zen card holding an inline SVG */
.dgm { color: var(--ink); }
.dgm svg { width: 100%; height: auto; max-width: 100%; display: block; }
.dgm-title { font-size: 13px; font-weight: 700; color: var(--teal); margin: 0 0 8px; }

/* SVG element classes (stroke/fill via tokens, never raw hex) */
.dgm-box     { fill: var(--card-bg); stroke: var(--card-border, var(--line)); stroke-width: 1.4; }
.dgm-box2    { fill: var(--panel2);  stroke: var(--line); stroke-width: 1.2; }
.dgm-actor   { fill: var(--panel2);  stroke: var(--teal); stroke-width: 1.4; }
.dgm-ext     { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 5 4; }
.dgm-store   { fill: var(--card-bg); stroke: var(--accent2); stroke-width: 1.4; }
.dgm-boundary{ fill: none; stroke: var(--bad); stroke-width: 1.4; stroke-dasharray: 6 4; }
.dgm-region  { fill: none; stroke: var(--accent2); stroke-width: 1.3; stroke-dasharray: 7 5; }
.dgm-arrow   { stroke: currentColor; stroke-width: 1.5; fill: none; opacity: .72; }
.dgm-arrow-dash { stroke: var(--warn); stroke-width: 1.5; fill: none; stroke-dasharray: 5 4; }
.dgm-ok   { fill: var(--ok); }   .dgm-warn { fill: var(--warn); }   .dgm-bad { fill: var(--bad); }
.dgm-accent { fill: var(--accent2); }   .dgm-teal { fill: var(--teal); }
.dgm-t  { fill: currentColor; font-family: Verdana, Arial, sans-serif; }
.dgm-t.lbl  { font-size: 12px; font-weight: 700; }
.dgm-t.sm   { font-size: 10.5px; opacity: .85; }
.dgm-t.tiny { font-size: 9px; opacity: .8; }
.dgm-lane-lbl { fill: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* legend under a diagram (HTML, not SVG) */
.dgm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 11px; color: var(--muted); }
.dgm-legend .k { display: inline-flex; align-items: center; gap: 5px; }
.dgm-legend .sw { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }

/* Assumption / Rationale callout — built on the demo's .about info-box look */
.about.ar { border-left: 3px solid var(--accent2); }
.about.ar.collapsed .ab { display: none; }
.about.ar .ah { cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; color: var(--ink); font-size: 13px; }
.about.ar .ab { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--body-ink); }
.about.ar .ab b { color: var(--ink); }

/* GCP↔AWS comparison + option toggle */
.opt-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 4px 0 12px; }
.opt-toggle button { font-family: inherit; font-size: 12px; padding: 5px 13px; border: 0; cursor: pointer;
  background: var(--card-bg); color: var(--body-ink); }
.opt-toggle button.active { background: var(--accent2); color: #fff; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.cmp th, table.cmp td { border: 1px solid var(--line); padding: 7px 9px; text-align: left; vertical-align: top; }
table.cmp thead th { background: var(--chrome); color: var(--chrome-ink, #fff); }
table.cmp tbody tr:nth-child(odd)  td { background: var(--row-odd); }
table.cmp tbody tr:nth-child(even) td { background: var(--row-even); }
table.cmp [data-opt] { display: none; }

/* maturity-ladder stage control */
.stage-toggle { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.stage-toggle button { font-family: inherit; font-size: 12px; padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card-bg); color: var(--body-ink); border-radius: 999px; }
.stage-toggle button.active { background: var(--accent2); color: #fff; border-color: var(--accent2); }
svg[data-ladder] [data-step] { transition: opacity .35s ease; }
.stage-note { font-size: 13px; line-height: 1.6; color: var(--body-ink); }
.stage-note b { color: var(--ink); }
table.cmp.show-1 [data-opt="1"], table.cmp.show-2 [data-opt="2"] { display: block; }

/* section "story" affordance — 📖 in the nav pills + next to each section heading */
.arch-navitem { display: inline-flex; align-items: center; gap: 4px; }
.sec-story { font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
  border: 1px solid var(--line); background: var(--card-bg); color: var(--accent2);
  border-radius: 999px; padding: 4px 8px; }
.sec-story:hover, .sec-story:focus-visible { border-color: var(--accent2); background: var(--accent2); color: #fff; outline: none; }
.h2-story { font-size: 12px; vertical-align: middle; margin-left: 10px; padding: 5px 11px; font-weight: 600; }
.arch-storyhint { font-size: 12px; color: var(--muted); margin: -10px 0 16px; }

/* "Flow story" — the demo-able narrative under each diagram (turns boxes into a story) */
.flowstory { margin-top: 16px; background: var(--panel2); border: 1px solid var(--line);
  border-left: 4px solid var(--accent2); border-radius: 12px; padding: 16px 20px 14px; }
.flowstory h2 { margin: 0 0 6px; font-size: 16px; color: var(--ink); }
.flowstory .fs-sub { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.flowstory ol { margin: 0; padding-left: 22px; }
.flowstory li { font-size: 13.5px; line-height: 1.6; color: var(--body-ink); margin: 0 0 9px; }
.flowstory li:last-child { margin-bottom: 0; }
.flowstory li::marker { color: var(--accent2); font-weight: 700; }
.flowstory code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; color: var(--ink); }

/* print: expand callouts, drop sticky nav + toggles + theme switch */
@media print {
  .arch-nav, .opt-toggle, .themeswitch { display: none !important; }
  .about.ar.collapsed .ab { display: block !important; }
  .zen { break-inside: avoid; box-shadow: none; }
  .dgm svg { max-width: 100%; }
}