/* Shared components for blog posts and guides: key takeaways, on-this-page
   list, figures with inline SVG diagrams, tip/warning callouts.
   Palette matches the site tokens (brand teal, paper neutrals). */

.prose h2 { scroll-margin-top: 5rem; }

/* Key takeaways */
.takeaways { background: #fff; border: 1px solid #a4d9e0; border-radius: 0.75rem; padding: 1.1rem 1.35rem 1.2rem; margin: 0 0 1.25rem; }
.takeaways-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #1c7a88; margin: 0 0 0.6rem; }
.takeaways ul { margin: 0; padding: 0; list-style: none; }
.takeaways li { position: relative; padding-left: 1.5rem; margin: 0 0 0.45rem; font-size: 0.9375rem; line-height: 1.55; color: #34302a; }
.takeaways li:last-child { margin-bottom: 0; }
.takeaways li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 0.9rem; height: 0.9rem; border-radius: 9999px; background: #d2ebf0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.4 2.4 4.6-5' fill='none' stroke='%231c7a88' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }

/* On this page */
.toc { background: #fbfaf6; border: 1px solid #e7e3d8; border-radius: 0.75rem; padding: 0.9rem 1.35rem 1rem; margin: 0 0 2rem; }
.toc-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #a09889; margin: 0 0 0.5rem; }
.toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 2rem; counter-reset: toc; }
.toc li { break-inside: avoid; counter-increment: toc; margin: 0 0 0.3rem; font-size: 0.8125rem; line-height: 1.45; }
.toc li::before { content: counter(toc) "."; display: inline-block; width: 1.4rem; color: #a09889; font-variant-numeric: tabular-nums; }
.toc a { color: #155f6b; text-decoration: none; }
.toc a:hover { color: #124b55; text-decoration: underline; }
@media (max-width: 560px) { .toc ol { columns: 1; } }

/* Figures */
.fig { margin: 2rem 0; border: 1px solid #e7e3d8; border-radius: 0.75rem; background: #fff; overflow: hidden; }
.fig-scroll { overflow-x: auto; }
.fig svg { display: block; width: 100%; min-width: 600px; height: auto; }
.fig figcaption { padding: 0.7rem 1rem; font-size: 0.75rem; line-height: 1.5; color: #736b5f; border-top: 1px solid #e7e3d8; background: #fbfaf6; }
.fig-title { padding: 0.8rem 1rem 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #a09889; margin: 0; }

/* SVG diagram vocabulary */
.d-t   { font-size: 13px; fill: #34302a; }
.d-s   { font-size: 11px; fill: #736b5f; }
.d-b   { font-weight: 700; }
.d-cap { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; fill: #a09889; }
.d-w   { fill: #fff; }
.d-teal  { fill: #1c7a88; }
.d-dark  { fill: #124b55; }
.d-red   { fill: #b91c1c; }
.d-amber { fill: #8a6a2a; }
.d-mono  { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.d-node  { fill: #eef7f9; stroke: #a4d9e0; stroke-width: 1.5; }
.d-node-dark { fill: #124b55; stroke: #124b55; }
.d-node-teal { fill: #1c7a88; stroke: #1c7a88; }
.d-card  { fill: #fff; stroke: #e7e3d8; stroke-width: 1.5; }
.d-grid  { stroke: #e7e3d8; stroke-width: 1; }
.d-axis  { stroke: #cdc6b6; stroke-width: 1.5; }
.d-line-teal  { fill: none; stroke: #1c7a88; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.d-line-amber { fill: none; stroke: #c09040; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.d-arrow { fill: none; stroke: #66bfca; stroke-width: 2.5; stroke-linecap: round; }
.d-band-good { fill: #1c7a88; opacity: 0.1; }
.d-band-bad  { fill: #b91c1c; opacity: 0.08; }
.d-pill-bad  { fill: #fdecec; }
.d-bracket   { fill: none; stroke: #a09889; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Callouts: tip and warning (the base .callout is defined per page) */
.callout-tip, .callout-warn { margin: 1.5rem 0; padding: 0.9rem 1.15rem; border-radius: 0 0.5rem 0.5rem 0; border-left: 3px solid; }
.callout-tip  { background: #eef7f9; border-color: #1c7a88; }
.callout-warn { background: #faf6ea; border-color: #c09040; }
.callout-tip .callout-label, .callout-warn .callout-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.25rem; }
.callout-tip .callout-label  { color: #1c7a88; }
.callout-warn .callout-label { color: #8a6a2a; }
.callout-tip p:not(.callout-label), .callout-warn p:not(.callout-label) { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: #34302a; }