/* Styles for the documentation site only — not part of the framework. */

:root {
    --doc-tag:    light-dark(#0b7ccf, #6cc4ff);
    --doc-attr:   light-dark(#8b3fb8, #c99bf0);
    --doc-string: light-dark(#237a36, #8fd19e);
    --doc-comment: var(--color-text-subtle);
}

.layout > main.docs {max-width: 920px;}

/* Brand + theme switcher at the top of the side nav */
.doc-brand {display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-6); color: var(--color-text); font-weight: 500;}
.doc-brand img {width: 28px; height: 36px;}
.doc-brand small {display: block; font-weight: 400; color: var(--color-text-subtle); font-size: 12px;}
.doc-theme {margin-bottom: var(--space-8);}

/* Each documented section */
.doc-section {scroll-margin-top: var(--space-8); padding-top: var(--space-4);}
.doc-section + .doc-section {border-top: 1px solid var(--color-border); padding-top: var(--space-15);}
.doc-section > h2 {margin-top: var(--space-10);}
.doc-section > hgroup + h2, .doc-section > hgroup + p + h2 {margin-top: var(--space-6);}

/* Live example + generated code */
.demo {
    position: relative;
    margin: var(--space-4) 0 0;
    padding: var(--space-6);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.demo.subtle {background: var(--color-bg-subtle);}
.demo.nocode, .demo:not(:has(+ .demo-code)) {border-radius: var(--radius-lg); margin-bottom: var(--space-6);}
.demo > :last-child {margin-bottom: 0;}
.demo-code {position: relative; margin: 0 0 var(--space-6);}
.demo-code pre, pre.snippet {max-height: 420px; margin: 0; font-size: 12.5px; line-height: 20px; white-space: pre;}
.demo-code pre {border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg);}
pre.snippet {margin: var(--space-4) 0 var(--space-6); border-radius: var(--radius-lg);}
.snippet-wrap {position: relative;}
.copy {position: absolute; top: 8px; right: 8px; z-index: 1; opacity: 0;}
:is(.demo-code, .snippet-wrap):hover .copy, .copy:focus-visible {opacity: 1;}

.hl-t {color: var(--doc-tag);}
.hl-a {color: var(--doc-attr);}
.hl-s {color: var(--doc-string);}
.hl-c {color: var(--doc-comment); font-style: italic;}

/* Swatches for the variable tables */
.swatch {display: inline-block; width: 28px; height: 28px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--color-border); vertical-align: middle;}
.swatch-shadow {display: inline-block; width: 56px; height: 32px; border-radius: var(--radius); background: var(--color-surface);}
.space-bar {display: inline-block; height: 10px; background: var(--color-primary); border-radius: 2px; vertical-align: middle;}
td code, li code, p code {white-space: nowrap;}

/* Hero */
.doc-hero {padding: var(--space-6) 0 var(--space-4);}
.doc-hero h1 {font-size: 34px; line-height: 40px; margin-bottom: var(--space-3);}
.doc-hero p {font-size: 17px; line-height: 26px; color: var(--color-text-muted); max-width: 640px;}

/* Typography specimen */
.specimen > * + * {margin-top: var(--space-4);}

/* Fake app frame used in the layout section */
.frame {display: flex; height: 220px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-size: 12px;}
.frame > aside {width: 56px; background: var(--color-bg-subtle); border-right: 1px solid var(--color-border);}
.frame > nav {width: 140px; padding: 16px; border-right: 1px solid var(--color-border);}
.frame > div {flex: 1; padding: 24px;}
.frame .skeleton {margin-bottom: 10px;}

/* Positioning helpers for demos only */
.demo.tall {min-height: 220px;}
.demo .toast {max-width: 356px;}

@media (max-width: 900px) {
    .layout > nav .doc-groups {display: none;}
    .layout > nav.open .doc-groups {display: block;}
}
[data-nav-toggle] {display: none;}
@media (max-width: 900px) {
    [data-nav-toggle] {display: inline-flex;}
}