/* Layout sizes use Daren Design tokens; breakpoints are document-template behavior. */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); font-size: var(--text-body-lg); line-height: 1.8; color: var(--color-foreground); background: var(--color-background); }
a { color: var(--color-link); text-decoration: none; overflow-wrap: anywhere; }
a:hover { text-decoration: underline; }
button, input { font: inherit; color: inherit; background: var(--color-background); border: var(--border-control-default); border-radius: var(--radius-md); padding: var(--space-100) var(--space-200); }
button { cursor: pointer; }
button:hover { background: var(--color-background-secondary); border: var(--border-control-hover); }
:focus-visible { outline: var(--border-width-strong) solid var(--color-focus-ring); outline-offset: var(--space-025); }
.skip { position: absolute; transform: translateY(-200%); z-index: 10; background: var(--color-background); padding: var(--space-100); }
.skip:focus { transform: none; }
.brand { display: flex; align-items: center; gap: var(--space-150); font-size: var(--text-title-md); font-weight: var(--weight-body-md-strong); color: var(--color-foreground); line-height: var(--leading-title-md); }
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--color-brand); width: var(--size-icon-2xl); height: var(--size-icon-2xl); flex-shrink: 0; }
.docs-layout { display: grid; grid-template-columns: var(--size-container-280) minmax(0, 1fr) var(--size-container-240); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: var(--space-400) var(--space-300); background: var(--color-background-secondary); font-size: var(--text-body-md); min-width: 0; }
.sidebar-head { position: relative; flex-shrink: 0; padding: 0 var(--space-100) var(--space-200); }
.sidebar-tools { display: flex; flex-direction: column; gap: var(--space-100); margin-top: var(--space-250); }
.sidebar-search { display: flex; align-items: center; gap: var(--space-100); width: 100%; min-height: var(--size-control-md); padding: var(--space-050) var(--space-100); color: var(--color-foreground-secondary); font-size: var(--text-body-sm); text-align: left; }
.sidebar-search svg { width: var(--size-icon-sm); height: var(--size-icon-sm); flex-shrink: 0; }
.sidebar-search span { flex: 1; }
.sidebar-search kbd { font-size: var(--text-body-xs); color: var(--color-foreground-tertiary); }
.sidebar-utilities { display: flex; flex-shrink: 0; justify-content: flex-start; gap: var(--space-100); width: 100%; padding: var(--space-150) var(--space-100) 0; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: var(--size-control-md); height: var(--size-control-md); padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-foreground-secondary); }
.icon-button:hover { background: var(--color-icon-button-hover-bg); color: var(--color-foreground); border: 0; }
.icon-button svg { width: var(--size-icon-md); height: var(--size-icon-md); }
.moon-icon, .dark .sun-icon { display: none; }
.dark .moon-icon { display: block; }
html { color-scheme: light; }
html.dark { color-scheme: dark; }
.language-picker { position: relative; }
.language-picker summary { list-style: none; cursor: pointer; }
.language-picker summary::-webkit-details-marker { display: none; }
.language-options { position: absolute; bottom: calc(100% + var(--space-100)); left: 0; z-index: var(--z-popover); width: var(--size-container-200); padding: var(--space-100); border: var(--border-solid-neutral); border-radius: var(--radius-md); background: var(--color-background); box-shadow: var(--shadow-popover); }
.language-options button { width: 100%; border: 0; text-align: left; color: var(--color-brand-active); background: var(--color-brand-muted); }
.language-options p { font-size: var(--text-body-sm); color: var(--color-foreground-tertiary); margin: var(--space-100) var(--space-050) var(--space-025); }
.directory-tree { overflow: auto; min-height: 0; flex: 1; }
.directory-tree > a { margin-bottom: var(--space-100); }
.directory-tree a { display: block; color: var(--color-foreground-secondary); padding: var(--space-075) var(--space-100); border-radius: var(--radius-sm); }
.directory-tree a[aria-current=page] { background: var(--color-brand-muted); color: var(--color-brand-active); font-weight: var(--weight-body-md-strong); }
.directory-tree details { margin: var(--space-100) 0 var(--space-200); }
.directory-tree summary { cursor: pointer; font-weight: var(--weight-body-md-strong); }
.directory-tree summary a { display: inline; color: var(--color-foreground); }
.nav-nested { padding-left: var(--space-100); margin-top: var(--space-100); }
.doc-body { width: 100%; max-width: var(--size-container-960); justify-self: center; padding: var(--space-500) var(--space-600) var(--space-800); min-width: 0; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-100); color: var(--color-foreground-tertiary); font-size: var(--text-body-sm); margin-bottom: var(--space-300); }
h1 { font-size: var(--text-title-xl); line-height: var(--leading-title-xl); font-weight: var(--weight-title-xl); margin: 0 0 var(--space-200); }
.lead { color: var(--color-foreground-secondary); margin-bottom: var(--space-500); }
.prose h2 { font-size: var(--text-title-lg); font-weight: var(--weight-title-lg); margin-top: var(--space-600); padding-top: var(--space-300); border-top: var(--border-solid-neutral); }
.prose h3 { font-size: var(--text-title-md); font-weight: var(--weight-title-md); margin-top: var(--space-400); }
.prose :is(h2,h3) { scroll-margin-top: var(--size-container-096); }
.prose img, .prose video { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.prose pre { overflow: auto; background: var(--color-background-secondary); padding: var(--space-200); border-radius: var(--radius-md); font-size: var(--text-body-md); }
.prose code { font-family: var(--font-mono); overflow-wrap: anywhere; }
.prose blockquote { margin-left: 0; padding: var(--space-100) var(--space-200); border-left: var(--border-width-strong) solid var(--color-brand); color: var(--color-foreground-secondary); background: var(--color-brand-muted); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-body-md); }
.prose th, .prose td { padding: var(--space-100); border: var(--border-solid-neutral); text-align: left; overflow-wrap: anywhere; }
.prose th { background: var(--color-background-secondary); }
.toc { position: sticky; top: 0; height: fit-content; max-height: 100vh; overflow: auto; padding: var(--space-600) var(--space-200); font-size: var(--text-body-sm); }
.toc nav { border-left: var(--border-width-thin) solid var(--color-border-subtle); }
.toc p { color: var(--color-foreground); font-weight: var(--weight-body-md-strong); }
.toc a { position: relative; display: flex; align-items: center; min-height: var(--size-control-sm); color: var(--color-foreground-secondary); padding: var(--space-050) var(--space-100) var(--space-050) var(--space-150); }
.toc a:hover { color: var(--color-foreground); text-decoration: none; }
.toc a[aria-current=location] { color: var(--color-brand); }
.toc a[aria-current=location]::before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); height: var(--leading-body-sm); left: calc(-1 * var(--border-width-thin)); width: var(--border-width-strong); border-radius: var(--radius-full); background: var(--color-brand); pointer-events: none; }
.toc .subheading { padding-left: calc(var(--space-150) + var(--space-250)); }
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--size-container-240)), 1fr)); gap: var(--space-200); }
.entry-card { display: flex; flex-direction: column; gap: var(--space-100); border: var(--border-solid-neutral); padding: var(--space-250); border-radius: var(--radius-md); margin-bottom: var(--space-150); }
.entry-card strong { color: var(--color-foreground); font-weight: var(--weight-body-md-strong); }
.entry-card span { font-size: var(--text-body-md); color: var(--color-foreground-secondary); }
.pagination { border-top: var(--border-solid-neutral); display: flex; justify-content: space-between; gap: var(--space-200); padding-top: var(--space-300); margin-top: var(--space-600); font-size: var(--text-body-md); }
.search-row { display: flex; gap: var(--space-100); margin-top: var(--space-100); }
.search-row input { min-width: 0; flex: 1; }
.search-dialog { width: min(var(--size-container-560), calc(100vw - var(--space-400))); height: min(480px, calc(100dvh - var(--space-400))); max-height: calc(100dvh - var(--space-400)); padding: 0; border: var(--border-solid-neutral); border-radius: var(--radius-lg); background: var(--color-background); color: var(--color-foreground); box-shadow: var(--shadow-popover); overflow: hidden; }
.search-dialog::backdrop { background: var(--color-overlay-strong); backdrop-filter: blur(var(--space-025)); }
.search-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.search-box { flex-shrink: 0; display: flex; align-items: center; gap: var(--space-100); padding: var(--space-150) var(--space-200); border-bottom: var(--border-solid-neutral); }
.search-box input { flex: 1; min-width: 0; padding: var(--space-050) 0; border: 0; border-radius: 0; background: transparent; font-size: var(--text-body-md); }
.search-box input:focus, .search-box input:focus-visible { outline: none; box-shadow: none; }
.search-close { flex-shrink: 0; background: transparent; padding: var(--space-025) var(--space-075); font: var(--text-body-sm) var(--font-mono); color: var(--color-foreground-tertiary); }
.search-results { list-style: none; margin: 0; padding: var(--space-075); overflow: auto; flex: 1; min-height: 0; }
.search-result { display: flex; align-items: baseline; gap: var(--space-200); padding: var(--space-150) var(--space-150); border-radius: var(--radius-md); font-size: var(--text-body-md); color: var(--color-foreground); }
.search-result:hover, .search-result:focus-visible { background: var(--color-background-secondary); text-decoration: none; }
.search-kind { flex-shrink: 0; font-size: var(--text-body-sm); color: var(--color-foreground-tertiary); }
.search-label { min-width: 0; font-weight: var(--weight-body-md-strong); }
.search-label small { display: block; font-size: var(--text-body-sm); font-weight: normal; color: var(--color-foreground-tertiary); line-height: var(--leading-body-sm); margin-top: var(--space-025); }
.search-status { flex-shrink: 0; margin: 0; padding: var(--space-150) var(--space-200); color: var(--color-foreground-secondary); font-size: var(--text-body-md); }
.search-open, .directory-open { overflow: hidden; }
.mobile-header, .directory-close { display: none; }
.directory-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-popover) - 1); background: var(--color-overlay); border: 0; border-radius: 0; padding: 0; }
.directory-backdrop:hover { background: var(--color-overlay); border: 0; }
[hidden] { display: none !important; }
@media (max-width: 1200px) { .docs-layout { grid-template-columns: var(--size-container-240) minmax(0, 1fr); } .toc { display: none; } }
@media (max-width: 720px) {
  /* Mindex editor.standard: 320px left pane minus 20px, bounded by 86vw. */
  body { --press-drawer-width: min(calc(var(--size-container-320) - var(--space-250)), 86vw); --press-header-height: var(--size-control-xl); }
  .mobile-header { display: grid; grid-template-columns: var(--size-control-md) minmax(0, 1fr) var(--size-control-md); align-items: center; gap: var(--space-100); position: fixed; inset: 0 0 auto; height: var(--press-header-height); padding: 0 var(--space-150); z-index: calc(var(--z-popover) + 1); background: var(--color-background-secondary); }
  .mobile-page-title { display: flex; align-items: center; justify-content: center; gap: var(--space-075); min-width: 0; color: var(--color-foreground); font-size: var(--text-body-md); font-weight: var(--weight-body-md-strong); }
  .mobile-page-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-page-title .brand-mark { width: var(--size-icon-md); height: var(--size-icon-md); }
  .directory-close { display: inline-flex; position: absolute; right: 0; top: 0; }
  .sidebar .brand { padding-right: var(--size-control-md); }
  .docs-layout { display: block; overflow-x: clip; padding-top: var(--press-header-height); }
  .sidebar { display: flex; position: fixed; top: var(--press-header-height); bottom: 0; left: 0; width: var(--press-drawer-width); height: calc(100dvh - var(--press-header-height)); z-index: var(--z-popover); visibility: hidden; transform: translateX(-100%); transition: transform var(--motion-duration-normal) var(--motion-ease-standard); }
  .sidebar.is-open { visibility: visible; transform: translateX(0); }
  .directory-backdrop { top: var(--press-header-height); left: var(--press-drawer-width); }
  .doc-body { padding: var(--space-300) var(--space-200) var(--space-600); transition: transform var(--motion-duration-normal) var(--motion-ease-standard); }
  .directory-open .doc-body { transform: translateX(var(--press-drawer-width)); }
  .prose :is(h2,h3) { scroll-margin-top: calc(var(--press-header-height) + var(--space-200)); }
  h1 { font-size: var(--text-title-lg); line-height: var(--leading-title-lg); }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .doc-body { transition-duration: var(--motion-duration-reduced); } }