/* One visual vocabulary for source, integration, analytics, and consumption. */
:root {
    --diagram-bronze:#9a5a32;
    --diagram-silver:#536d82;
    --diagram-gold:#947017;
    --diagram-semantic:#286346;
    --diagram-line:var(--theme-connector,#91a575);
    --diagram-surface:var(--theme-surface,#fff);
    --diagram-ink:var(--ink);
}
@media screen {
    :root[data-theme="dark"] {
        --diagram-bronze:#e3ad83;
        --diagram-silver:#a7c2d4;
        --diagram-gold:#e1ca78;
        --diagram-semantic:#a5d7ac;
    }
    @media (prefers-color-scheme:dark) {
        :root:not([data-theme]) {
            --diagram-bronze:#e3ad83;
            --diagram-silver:#a7c2d4;
            --diagram-gold:#e1ca78;
            --diagram-semantic:#a5d7ac;
        }
    }
}
.layer-bronze { --layer-color:var(--diagram-bronze); }
.layer-silver { --layer-color:var(--diagram-silver); }
.layer-gold { --layer-color:var(--diagram-gold); }
.layer-semantic { --layer-color:var(--diagram-semantic); }
.model-diagram {
    min-width:0;
    margin:0;
    padding:24px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--diagram-surface);
    color:var(--diagram-ink);
}
.model-caption {
    margin:0 0 22px;
    color:var(--muted);
    font-size:.78rem;
    font-weight:600;
    line-height:1.5;
    letter-spacing:.02em;
}
.model-node {
    min-width:0;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    padding:14px 16px;
    border:1px solid var(--line);
    border-top:3px solid var(--layer-color,var(--diagram-semantic));
    border-radius:10px;
    background:var(--diagram-surface);
    color:var(--diagram-ink);
    overflow-wrap:break-word;
}
.model-node-kind {
    display:block;
    color:var(--layer-color,var(--muted));
    font-size:.66rem;
    line-height:1.4;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
}
.model-node > strong { display:block; font-size:.93rem; line-height:1.35; font-weight:650; letter-spacing:-.015em; }
.model-node > span:not(.model-node-kind) { display:block; font-size:.78rem; line-height:1.5; color:var(--muted); }
.model-node ul { margin:4px 0 0; padding-left:16px; font-size:.78rem; line-height:1.55; color:var(--muted); }
.model-node li + li { margin-top:3px; }
.model-diagram :is(h3,h4) { text-wrap:balance; }
.model-diagram :is(p,li,span,strong) { overflow-wrap:break-word; }
.model-diagram svg { max-width:100%; }

/* A single home overview connects each modeling pattern to implementation work. */
.layer-summary [id] { scroll-margin-top:115px; }
.layer-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; list-style:none; padding:0; margin:0; }
.layer-summary-card { min-width:0; display:grid; grid-template-rows:auto auto 1fr minmax(206px,auto) auto; gap:18px; padding:24px 20px; border:1px solid var(--line); border-top:3px solid var(--layer-color); border-radius:12px; background:var(--diagram-surface); overflow-wrap:break-word; }
.layer-summary-card .layer-summary-label { display:flex; align-items:center; gap:10px; margin:0; color:var(--layer-color); font-size:.68rem; font-weight:700; line-height:1.45; letter-spacing:.055em; text-transform:uppercase; }
.layer-summary-label > span { font-size:1.05rem; font-weight:500; letter-spacing:-.03em; }
.layer-summary-card h3 { margin:0; font-size:1.3rem; line-height:1.25; }
.layer-summary-description { margin:0; font-size:.89rem; line-height:1.7; }
.layer-summary-card > a { align-self:end; font-size:.81rem; line-height:1.6; }
.layer-summary-model { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.layer-mini-node { display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; padding:7px 6px; border:1px solid var(--diagram-line); border-radius:6px; text-align:center; color:var(--diagram-ink); }
.layer-mini-node > span { font-size:.62rem; line-height:1.25; color:var(--layer-color); font-weight:700; text-transform:uppercase; letter-spacing:.025em; }
.layer-mini-node > strong { font-size:.76rem; font-weight:600; line-height:1.3; }
.layer-mini-node > small { font-size:.65rem; line-height:1.4; color:var(--muted); }
.layer-mini-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.layer-mini-link { border-style:dashed; }
.layer-mini-fact { border-color:var(--layer-color); border-width:2px; }
.layer-mini-arrow { position:relative; height:18px; flex-shrink:0; }
.layer-mini-arrow::before { content:""; position:absolute; top:0; left:50%; height:18px; border-left:1px solid var(--diagram-line); }
.layer-mini-fork { position:relative; height:20px; flex-shrink:0; }
.layer-mini-fork::before { content:""; position:absolute; top:0; left:calc((100% - 12px) / 4); right:calc((100% - 12px) / 4); height:10px; border:1px solid var(--diagram-line); border-top:0; }
.layer-mini-fork::after { content:""; position:absolute; top:10px; left:50%; height:10px; border-left:1px solid var(--diagram-line); }
.layer-mini-fork-down { transform:rotate(180deg); }
.layer-summary-footer { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:26px; }
.layer-summary-footer p { max-width:770px; font-size:.88rem; line-height:1.7; }
.layer-summary-footer a { flex-shrink:0; font-size:.88rem; }
.ex-supporting-work .text-link + .text-link { margin-left:0; margin-top:12px; display:block; }

/* Supporting process diagrams use the same surfaces, type, and connectors. */
:is(.diagram-panel,.ex-partner-map,.ex-domain-map,.delivery-workflow,.ext-diagram) { border-radius:12px; }
.diagram-panel .diagram-label { font-size:.78rem; font-weight:600; letter-spacing:.02em; color:var(--muted); }
.diagram-panel .architecture-flow li { border-color:var(--diagram-line); }
.diagram-panel .architecture-flow strong { font-size:.95rem; }
.diagram-panel .architecture-flow p { font-size:.86rem; }

@media (max-width:1100px) {
    .layer-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
    .layer-summary-model { width:100%; max-width:320px; justify-self:center; }
    .layer-summary-footer { align-items:flex-start; flex-direction:column; gap:16px; }
}
@media (max-width:650px) {
    .layer-summary-grid { grid-template-columns:1fr; gap:20px; }
    .layer-summary-card { grid-template-rows:auto auto auto auto auto; padding:22px 20px; }
    .layer-summary-model { min-height:206px; }
}
@media (max-width:550px) {
    .model-diagram { padding:16px; }
    .model-node { padding:12px; }
    .model-caption { margin-bottom:16px; }
}
@media print {
    .model-diagram { background:#fff; color:#17362e; break-inside:avoid; }
    .model-node { background:#fff; color:#17362e; }
    .layer-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .layer-summary-card { break-inside:avoid; }
}