/* bra0 Architecture Cartography — shared component styles.
   Consumes World-2 tokens (legacy-tokens.css: --bg / --surface / --text / --cp / --sl / ...
   / --ok / --warn / --gap). Two SVG scopes: .cartomap (L1 per-family) and
   .cartomap-l0 (L0 master). Used by the standalone cartography pages and by the
   inline embeds in blueprint.html and docs/reference/capabilities.html. */

.cartomap, .cartomap-l0 { --border-strong: rgba(255,255,255,0.15); }
[data-theme="light"] .cartomap, [data-theme="light"] .cartomap-l0 { --border-strong: rgba(0,0,0,0.15); }
.cartomap svg.map, .cartomap-l0 svg.map { display:block; width:100%; height:auto; }

/* ---- page + text scaffold (standalone cartography pages) ---- */
.carto-wrap { max-width:1200px; margin:0 auto; padding:20px 24px 44px; }
.carto-wrap .crumb { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10.5px; letter-spacing:.4px; color:var(--text-muted); margin:0 0 6px; }
.carto-wrap .crumb a { color:var(--text-dim); text-decoration:none; }
.carto-wrap .crumb a:hover { color:var(--fam-accent, var(--bra0-blue-light)); }
.carto-wrap .eyebrow { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-muted); }
.carto-wrap h1 { font-size:24px; font-weight:700; margin:4px 0 4px; letter-spacing:-.2px; color:var(--text); }
.carto-wrap .sub { font-size:13px; color:var(--text-dim); line-height:1.7; margin:0 0 8px; max-width:82ch; }
.carto-wrap .hint { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10.5px; color:var(--text-muted); margin:0 0 16px; }

figure.cartomap, figure.cartomap-l0 { margin:0; }
.diagram-box { width:100%; border:1px solid var(--border); border-radius:12px; background:var(--bg); overflow:hidden; padding:8px; }

/* ---- inline embed (blueprint hero + capabilities family headers) ---- */
.cartomap-embed { margin:16px 0 26px; }
.carto-cap { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:8px;
  font-size:11px; color:var(--text-muted); font-family:var(--font-mono,'JetBrains Mono',monospace); }
.carto-cap a { color:var(--bra0-blue-light); text-decoration:none; }
.carto-cap a:hover { text-decoration:underline; }

/* ---- epistemic ribbon ---- */
.carto-ribbon { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:16px; padding:14px 18px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface); font-size:12px; color:var(--text-dim); line-height:1.6; }
.carto-ribbon h4 { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:var(--text-muted); margin:0 0 4px; width:100%; }
.carto-ribbon .cand { width:100%; font-size:12px; color:var(--text-dim); line-height:1.7; }
.carto-ribbon .cand b { color:var(--text); } .carto-ribbon .cand code { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:11px; color:var(--bra0-blue-light); }
.carto-ribbon .legend { display:flex; gap:18px; flex-wrap:wrap; font-size:11px; color:var(--text-dim); width:100%; }
.carto-ribbon .st { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:9px; letter-spacing:.4px; text-transform:uppercase; }
.carto-ribbon .dot { width:8px; height:8px; border-radius:2px; display:inline-block; }
.carto-ribbon .d-shipped { background:var(--ok); } .carto-ribbon .d-partial { background:var(--warn); }
.carto-ribbon .d-planned { background:var(--text-muted); } .carto-ribbon .d-gap { background:var(--gap); }
.carto-ribbon .d-plane { background:var(--surface); border:1px solid var(--border-strong); }
.carto-ribbon .d-trans { background:var(--surface2); border:1px dashed var(--border-strong); }
.carto-ribbon .d-core { background:var(--bra0-blue-light); }

/* ---- L1 SVG component ---- */
.cartomap .band, .cartomap .lane { fill:var(--surface); stroke:var(--border-strong); }
.cartomap .code { font-family:var(--font-mono,'JetBrains Mono',monospace); fill:var(--fam-accent); font-size:34px; font-weight:600; letter-spacing:1px; }
.cartomap .fam { font-family:var(--font-mono,'JetBrains Mono',monospace); fill:var(--text); font-size:14px; letter-spacing:.6px; text-transform:uppercase; }
.cartomap .plane-tag { font-family:var(--font-mono,'JetBrains Mono',monospace); fill:var(--text-muted); font-size:10px; letter-spacing:.8px; text-transform:uppercase; }
.cartomap .q { font-family:var(--font-body,'Inter',sans-serif); fill:var(--text-dim); font-size:12px; }
.cartomap .count { font-family:var(--font-mono,'JetBrains Mono',monospace); fill:var(--text-dim); font-size:12px; }
.cartomap .lane-q { font-family:var(--font-mono,'JetBrains Mono',monospace); fill:var(--text); font-size:12.5px; letter-spacing:.5px; text-transform:uppercase; }
.cartomap .lane-accent { stroke:var(--fam-accent); stroke-width:3; }
.cartomap .lane-ids { font-family:var(--font-mono,'JetBrains Mono',monospace); fill:var(--text-muted); font-size:10px; letter-spacing:.3px; }
.cartomap .door { cursor:pointer; outline:none; }
.cartomap .cap-card { fill:var(--surface2); fill-opacity:1; stroke:var(--border-strong); stroke-width:1; transition:fill .15s,stroke .15s; }
.cartomap .door:hover .cap-card, .cartomap .door:focus .cap-card { fill:var(--fam-accent); fill-opacity:.12; stroke:var(--fam-accent); }
.cartomap .cap-code { font-family:var(--font-mono,'JetBrains Mono',monospace); fill:var(--text-dim); font-size:11.5px; letter-spacing:.4px; }
.cartomap .cap-title { font-family:var(--font-body,'Inter',sans-serif); fill:var(--text); font-weight:500; }
.cartomap .cap-desc { font-family:var(--font-body,'Inter',sans-serif); fill:var(--text-dim); font-size:10.5px; }
.cartomap .cap-std { font-family:var(--font-mono,'JetBrains Mono',monospace); fill:var(--text-muted); font-size:9px; letter-spacing:.4px; }
.cartomap .cap-st { font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:8.5px; letter-spacing:.5px; text-transform:uppercase; }
.cartomap .s-shipped { fill:var(--ok); } .cartomap .s-partial { fill:var(--warn); }
.cartomap .s-planned { fill:var(--text-muted); } .cartomap .s-gap { fill:var(--gap); }

/* ---- L0 SVG component ---- */
.cartomap-l0 { --core-tint: rgba(77,148,255,0.14); }
[data-theme="light"] .cartomap-l0 { --core-tint: rgba(0,70,178,0.09); }
.cartomap-l0 .plane { fill:var(--surface); stroke:var(--border-strong); }
.cartomap-l0 .transversal { fill:var(--surface2); stroke:var(--border-strong); stroke-dasharray:6 5; }
.cartomap-l0 .door { cursor:pointer; outline:none; transition:fill .15s,stroke .15s; }
.cartomap-l0 .door:hover .plane, .cartomap-l0 .door:focus .plane,
.cartomap-l0 .door:hover .transversal, .cartomap-l0 .door:focus .transversal { fill:var(--core-tint); stroke:var(--bra0-blue-light); }
.cartomap-l0 .code { font-family:var(--font-mono,'JetBrains Mono',monospace); fill:var(--text); font-size:34px; font-weight:500; letter-spacing:1px; }
.cartomap-l0 .fam { font-family:var(--font-mono,'JetBrains Mono',monospace); fill:var(--text); font-size:15px; letter-spacing:.5px; text-transform:uppercase; }
.cartomap-l0 .plane-tag { font-family:var(--font-mono,'JetBrains Mono',monospace); fill:var(--text-muted); font-size:10px; letter-spacing:.8px; text-transform:uppercase; }
.cartomap-l0 .q { font-family:var(--font-body,'Inter',sans-serif); fill:var(--text-dim); font-size:11.5px; }
.cartomap-l0 .count { font-family:var(--font-mono,'JetBrains Mono',monospace); fill:var(--text-dim); font-size:12px; }
.cartomap-l0 .core-ring { fill:var(--core-tint); stroke:var(--bra0-blue-light); stroke-width:1.6; stroke-dasharray:5 4; }
.cartomap-l0 .core-lbl { font-family:var(--font-mono,'JetBrains Mono',monospace); fill:var(--bra0-blue-light); font-size:13px; letter-spacing:.6px; text-transform:uppercase; font-weight:500; }
.cartomap-l0 .rel { fill:none; stroke:var(--text-dim); stroke-width:1.3; marker-end:url(#cm-ar); }
.cartomap-l0 .rel-dot { fill:none; stroke:var(--text-muted); stroke-width:1.1; stroke-dasharray:3 4; marker-end:url(#cm-arm); }
.cartomap-l0 .rel-core { fill:none; stroke:var(--bra0-blue-light); stroke-width:1.5; marker-end:url(#cm-arc); }
.cartomap-l0 .verb { font-family:var(--font-body,'Inter',sans-serif); fill:var(--text-muted); font-size:10px; font-style:italic; }