/* Documentation chrome (not part of the system itself). */
.doc-wrap { max-width: 76rem; margin: 0 auto; padding: 0 1.5rem; }
.doc-header { background: var(--cc-brand-deep); border-bottom: 4px solid var(--cc-accent); }
.doc-header .doc-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2.5rem; padding-top: 0.9rem; padding-bottom: 0.9rem; }
.doc-brand { margin: 0; font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; gap: 0.75rem; }
.doc-brand a { color: #fff; text-decoration: none; }
.doc-brand .cc-tag--brand { border-color: #fff; color: #fff; background: transparent; }
.doc-header nav ul { list-style: none; display: flex; gap: 0.25rem; margin: 0; padding: 0; }
.doc-header nav a { display: inline-flex; align-items: center; min-height: var(--cc-target); padding: 0 1rem; color: #fff; font-family: var(--cc-font-sans); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; }
.doc-header nav a:hover { border-bottom-color: var(--cc-accent); }
.doc-header :focus-visible { outline-color: #fff; }

.doc-columns { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-top: 2rem; padding-bottom: 3rem; }
@media (min-width: 60rem) { .doc-columns:has(.doc-sidebar) { grid-template-columns: 15rem minmax(0, 1fr); } }
.doc-sidebar { font-family: var(--cc-font-sans); }
.doc-sidebar-heading { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.5rem; }
.doc-sidebar ul { list-style: none; margin: 0; padding: 0; }
.doc-sidebar a { display: inline-flex; align-items: center; min-height: 2.4rem; color: var(--cc-brand); text-decoration: none; padding: 0 0.5rem; border-radius: var(--cc-radius-sm); }
.doc-sidebar a:hover { background: var(--cc-brand-wash); text-decoration: underline; }
.doc-sidebar a[aria-current] { font-weight: 700; color: var(--cc-ink); }

.doc-main > :first-child { margin-top: 0; }

.doc-example { border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); margin: 1.5rem 0 2rem; }
.doc-example-label { font-family: var(--cc-font-sans); font-size: var(--cc-text-sm); font-weight: 700; color: var(--cc-ink-soft); margin: 0; padding: 0.5rem 1.25rem; border-bottom: 1px solid var(--cc-line); background: var(--cc-panel); border-radius: var(--cc-radius-md) var(--cc-radius-md) 0 0; }
.doc-example-canvas { padding: 1.5rem 1.25rem; }
.doc-example-canvas > :last-child { margin-bottom: 0; }
.doc-example-code { border-top: 1px solid var(--cc-line); }
.doc-example-code summary { display: flex; align-items: center; min-height: var(--cc-target); padding: 0 1.25rem; font-family: var(--cc-font-sans); font-weight: 600; color: var(--cc-brand); cursor: pointer; }
.doc-example-code pre { margin: 0; padding: 1rem 1.25rem; background: var(--cc-ink); color: #f4f6fb; overflow-x: auto; font-size: 0.9rem; border-radius: 0 0 var(--cc-radius-md) var(--cc-radius-md); }

.doc-notes { background: var(--cc-panel); border-left: 6px solid var(--cc-accent); border-radius: 0 var(--cc-radius-md) var(--cc-radius-md) 0; padding: 1rem 1.4rem; margin: 1.5rem 0; max-width: 46rem; }
.doc-notes h2 { font-family: var(--cc-font-sans); font-size: 1.05rem; margin: 0 0 0.5rem; }
.doc-notes ul { margin: 0; padding-left: 1.2rem; }
.doc-notes li { margin-bottom: 0.35rem; }

.doc-footer { background: var(--cc-brand-deep); color: #fff; padding: 1.5rem 0; }
.doc-footer a { color: #fff; }
.doc-footer p { margin: 0; font-family: var(--cc-font-sans); font-size: var(--cc-text-sm); }

.doc-swatches { list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); padding: 0; }
.doc-swatch { border: 1px solid var(--cc-line); border-radius: var(--cc-radius-md); overflow: hidden; font-family: var(--cc-font-sans); }
.doc-swatch-color { height: 3.5rem; }
.doc-swatch dl { margin: 0; padding: 0.6rem 0.9rem; font-size: var(--cc-text-sm); }
.doc-swatch dt { font-weight: 700; }
.doc-swatch dd { margin: 0 0 0.3rem; color: var(--cc-ink-soft); }