/* Documentation-only shell. It is intentionally not part of @vatse/smart-ui/css. */
.doc-main > .sc-container { width:min(calc(100% - 48px),1600px); max-width:none; }
.doc-main { padding-top:96px; }
.doc-docs-layout { grid-template-columns:250px minmax(0,1fr); gap:30px; }
.doc-sidebar { top:96px; max-height:calc(100vh - 116px); }
.doc-pill { position:fixed; inset:0 0 auto; width:100%; min-height:72px; margin:0; padding:0 max(24px,calc((100vw - 1600px)/2)); border:0; border-bottom:1px solid color-mix(in srgb,var(--sc-border) 82%,transparent); border-radius:0; box-shadow:none; background:color-mix(in srgb,var(--sc-bg-body) 90%,transparent); backdrop-filter:blur(18px); }
.doc-pill::before { content:""; position:absolute; inset:0; pointer-events:none; border-bottom:1px solid color-mix(in srgb,var(--sc-border) 65%,transparent); }
.doc-pill > * { position:relative; }
.doc-brand { padding:0; border:0; border-radius:0; background:transparent; }
.doc-nav { margin-right:auto; }.doc-nav .sc-btn { min-height:38px; padding:0 10px; border:0; border-radius:8px; background:transparent; }.doc-theme,.doc-mode { border-left:0; }.doc-theme .sc-select-menu { min-width:150px; }
.doc-sidebar, .doc-code { scrollbar-width: thin; scrollbar-color: var(--sc-scrollbar-thumb) var(--sc-scrollbar-track); }
.doc-sidebar::-webkit-scrollbar, .doc-code::-webkit-scrollbar { width: var(--sc-scrollbar-size); height: var(--sc-scrollbar-size); }
.doc-sidebar::-webkit-scrollbar-track, .doc-code::-webkit-scrollbar-track { background:var(--sc-scrollbar-track); border-radius:999px; }
.doc-sidebar::-webkit-scrollbar-thumb, .doc-code::-webkit-scrollbar-thumb { background:var(--sc-scrollbar-thumb); border:2px solid var(--sc-scrollbar-track); border-radius:999px; }
.doc-preview .sc-checkbox, .doc-preview .sc-radio { width:100%; min-height:44px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--sc-border) 78%,transparent); border-radius:calc(var(--sc-radius) - 2px); background:color-mix(in srgb,var(--sc-bg-input) 84%,transparent); transition:transform 160ms ease,border-color 160ms ease,background 160ms ease,box-shadow 160ms ease; }
.doc-preview .sc-checkbox:hover, .doc-preview .sc-radio:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--sc-vatse-orange) 52%,var(--sc-border)); }
.doc-preview .sc-checkbox:has(input:checked), .doc-preview .sc-radio:has(input:checked) { border-color:color-mix(in srgb,var(--sc-vatse-orange) 58%,var(--sc-border)); background:color-mix(in srgb,var(--sc-vatse-orange-soft) 58%,var(--sc-bg-input)); }
#doc-effects, #doc-effects .doc-preview-body { overflow:visible; }
@media (max-width:640px) { .doc-preview .sc-checkbox, .doc-preview .sc-radio { min-height:48px; } }
@media (max-width:980px) { .doc-main { padding-top:96px; }.doc-main > .sc-container { width:calc(100% - 32px); }.doc-docs-layout { grid-template-columns:1fr; gap:18px; }.doc-pill { padding:0 16px; flex-wrap:nowrap; justify-content:flex-start; }.doc-pill .doc-theme { display:none; }.doc-pill .doc-nav { margin-right:0; overflow:auto; }.doc-pill .doc-nav .sc-btn { white-space:nowrap; }.doc-sidebar { top:84px; } }
@media (max-width:640px) { .doc-main { padding-top:82px; }.doc-main > .sc-container { width:calc(100% - 24px); }.doc-pill { min-height:64px; height:64px; gap:4px; padding:0 12px; flex-wrap:nowrap !important; justify-content:flex-start !important; }.doc-brand { flex:0 0 auto; padding:0 !important; }.doc-brand-copy { display:none; }.doc-pill .doc-mode-label { display:none; }.doc-pill .doc-nav { display:flex !important; width:auto !important; flex:0 1 auto; gap:2px; overflow:hidden; }.doc-pill .doc-nav .sc-btn { width:auto !important; min-width:0; font-size:11px; padding:0 7px; }.doc-pill .doc-nav [data-route="templates"], .doc-pill .doc-nav a { display:none; }.doc-mode { flex:0 0 auto; margin-left:auto; padding-left:0; } }