/* Single owner for page canvas, article surface and desktop TOC.
   Header/navigation colors remain in solid-background.css. */
:root { --zdd-canvas: #eaf5fb; --zdd-article-bg: #fff; }
body[data-md-color-scheme="slate"] { --zdd-canvas: #101924; --zdd-article-bg: #1e2030; }
body { position: relative; min-height: 100vh; background: var(--zdd-canvas); overflow-x: clip; }
.md-container, .md-main, .md-main__inner { background: transparent; }
.md-content { background: var(--zdd-article-bg); border-radius: 16px; padding: 20px; margin-top: 20px; margin-bottom: 20px; }
body.article-layout .md-content { background: var(--zdd-article-bg) !important; border: 1px solid var(--zdd-surface-border) !important; border-radius: 16px !important; padding: 24px !important; box-shadow: 0 8px 28px #0001 !important; }
body.article-layout .md-content__inner { background: transparent; }
.md-sidebar { background: none; box-shadow: none; z-index: 10; }
.md-sidebar--secondary .md-sidebar__scrollwrap { padding: 0; margin: 0; scrollbar-width: thin; }
.md-sidebar--secondary .md-nav--secondary { background: var(--zdd-surface); color: var(--zdd-surface-ink); border: 1px solid var(--zdd-surface-border); border-radius: 8px; padding: 0.7rem; }
.md-sidebar--secondary .md-nav--secondary .md-nav__title { background: transparent; box-shadow: none; position: static; margin: 0 0 0.35rem; padding: 0.2rem 0.4rem; height: auto; }
.md-sidebar--secondary .md-nav--secondary .md-nav__link { color: var(--zdd-surface-ink); }
.md-sidebar--secondary .md-nav--secondary .md-nav__link--active { color: var(--zdd-reading-link, var(--md-typeset-a-color)); font-weight: 700; }

/* Friends is an unframed directory; these rules do not affect article pages. */
.md-content:has(.friend-directory) { width: 100%; max-width: 1000px; margin: 2rem auto; padding: 0 1.2rem; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.md-content__inner:has(.friend-directory) { margin: 0; }
.friend-directory { --friend-ink: #213e4b; --friend-muted: #526b77; --friend-line: #b8cfda; --friend-hover: #daeaf2; }
body[data-md-color-scheme="slate"] .friend-directory { --friend-ink: #e2e8ef; --friend-muted: #afc2cf; --friend-line: #354d5b; --friend-hover: #1b2e3a; }
.friend-directory-header { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.8rem; }
.md-typeset .friend-directory h1 { margin: 0; color: var(--friend-ink); font-size: 32px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.friend-directory-label { color: var(--friend-muted); font-size: 15px; }
.md-typeset .friend-directory ul.friend-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; margin: 0; padding: 0; list-style: none; }
.md-typeset .friend-list li { min-width: 0; margin: 0; padding: 0; border-top: 1px solid var(--friend-line); }
.md-typeset .friend-directory a.friend-link { display: flex; flex-direction: column; min-height: 148px; padding: 1rem 0.6rem; color: var(--friend-ink); background: none; border: 0; border-radius: 0; box-shadow: none; text-decoration: none; }
.md-typeset .friend-directory a.friend-link:hover { background: var(--friend-hover); }
.friend-link:focus-visible { outline: 2px solid var(--friend-ink); outline-offset: 3px; }
.friend-name { color: var(--friend-ink); font-size: 20px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.md-typeset .friend-directory a.friend-link { background-image: none !important; }
.friend-link:hover .friend-name { text-decoration: underline; text-underline-offset: 4px; }
.friend-desc { margin-top: 0.3rem; color: var(--friend-muted); font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.friend-domain { margin-top: auto; padding-top: 0.65rem; color: var(--friend-muted); font-family: var(--md-code-font-family); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .md-content:has(.friend-directory) { margin: 1.4rem auto; padding: 0 1rem; }
    .friend-directory-header { margin-bottom: 1.2rem; }
    .md-typeset .friend-directory ul.friend-list { grid-template-columns: minmax(0, 1fr); }
    .md-typeset .friend-directory a.friend-link { min-height: 132px; padding: 0.85rem 0.4rem; }
}