/* Diagram kit for the open-source contribution posts (/open-source/<project>-<pr>/).
   Inline SVG only. Colours come from the theme tokens, so both themes work. No inline style attributes. */
.oss-figure { margin-block: var(--space-7, 2.5rem); }
.oss-figure__media { background: var(--canvas); border: 1px solid var(--hair); border-radius: 18px; padding: clamp(12px, 2.5vw, 28px); overflow-x: auto; }
.oss-figure svg { display: block; width: 100%; height: auto; min-width: 820px; max-width: 980px; margin-inline: auto; }
.oss-figure figcaption { margin-top: var(--space-3, .75rem); color: var(--ink-2); font-size: var(--text-small, .875rem); line-height: 1.5; }
.oss-figure .lab-figure__num { font-weight: 600; margin-right: .5em; color: var(--ink); }
.oss-hero { display: grid; gap: var(--space-5, 1.5rem); }
.oss-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4, 1rem); margin: 0; padding: 0; list-style: none; }
.oss-facts li { border-top: 2px solid var(--accent); padding-top: .6rem; }
.oss-facts strong { display: block; font-size: 1.5rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.oss-facts span { color: var(--ink-2); font-size: var(--text-small, .875rem); }
.oss-pr { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; margin: 0; padding: 0; list-style: none; }
.oss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4, 1rem); margin: 0; padding: 0; list-style: none; }
.oss-card { border: 1px solid var(--hair); border-radius: 16px; padding: 1.1rem 1.2rem; background: var(--bg); display: grid; gap: .5rem; align-content: start; }
.oss-card h3 { margin: 0; font-size: 1.05rem; }
.oss-card p { margin: 0; color: var(--ink-2); font-size: var(--text-small, .875rem); }
/* SVG diagram classes */
.d-box { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.5; }
.d-soft { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.d-solid { fill: var(--accent); stroke: var(--accent); }
.d-dim { fill: var(--canvas); stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 5 4; }
.d-miss { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.d-line { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.d-arrow { fill: none; stroke: var(--accent); stroke-width: 2; }
.d-head { fill: var(--accent); }
.d-t { fill: var(--ink); font: 600 14px var(--font-sans, system-ui, sans-serif); }
.d-t2 { fill: var(--ink-2); font: 400 12.5px var(--font-sans, system-ui, sans-serif); }
.d-on { fill: #fff; font: 600 14px var(--font-sans, system-ui, sans-serif); }
.d-mono { fill: var(--ink-2); font: 400 12px var(--font-mono, ui-monospace, monospace); }
.d-title { fill: var(--ink); font: 700 16px var(--font-sans, system-ui, sans-serif); }
.d-bar { fill: var(--accent); }
.d-bar2 { fill: var(--line-strong); }
.d-grid { stroke: var(--hair); stroke-width: 1; }
.oss-group { margin: var(--space-7, 2.5rem) 0 .25rem; font-size: 1.35rem; letter-spacing: -.01em; }