/* The unified left sidebar shared by every sub-page (example wrappers, docs, backends, playground,
   and the full-page app demos). Linked alongside each page's own stylesheet; the markup is the
   `nav.html` fragment the generator writes once, so the navigation is identical everywhere. */
body {
  /* The compiled app demos (todomvc/rts) have no base stylesheet, so kill the default 8px body
     margin that otherwise frames the whole layout in a stray white border. */
  margin: 0;
}
.layout {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}
.sidebar {
  flex: 0 0 240px;
  width: 240px;
  background: #0f1720;
  color: #aebfcf;
  /* Own font so the menu is sans-serif even on pages with no base stylesheet (the app demos, which
     would otherwise inherit the browser's serif default). */
  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
  padding: 22px 0 32px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}
.sidebar .brand {
  display: block;
  padding: 0 22px 4px;
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .2px;
  text-decoration: none;
}
.sidebar .tagline {
  display: block;
  padding: 0 22px 16px;
  color: #6b7c8d;
  font-size: .74rem;
}
.sidebar .group {
  padding: 10px 0;
  border-top: 1px solid #1b2733;
}
.sidebar .label {
  display: block;
  padding: 2px 22px 6px;
  color: #6b7c8d;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.sidebar a:not(.brand) {
  display: block;
  padding: 7px 22px;
  color: #aebfcf;
  text-decoration: none;
  font-size: .9rem;
  border-left: 3px solid transparent;
}
.sidebar a:not(.brand):hover {
  background: #182430;
  color: #fff;
}
.sidebar a.active {
  background: #182430;
  color: #fff;
  border-left-color: var(--accent, #5fabdc);
  font-weight: 600;
}
/* The page's own <main> sits to the right of the sidebar and fills the rest. */
.layout > main,
.layout > .content {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 760px) {
  .layout {
    display: block;
  }
  .sidebar {
    position: static;
    width: auto;
    height: auto;
    flex: none;
    padding-bottom: 12px;
  }
}

/* ---- Dark theme (toggled by theme.js via [data-theme=dark]) -------------------------------------
   The sidebar is dark in both themes; these rules darken the page chrome (body, prose, code, tables)
   on the wrapper/doc/backends/playground/app pages. The gallery index has its own dark rules in
   styles.css. nav.css is linked last, so these win over the light page.css/docs.css defaults. */
[data-theme=dark] {
  color-scheme: dark;
}
[data-theme=dark] body {
  background: #0f1720;
  color: #cdd9e5;
}
[data-theme=dark] main,
[data-theme=dark] .content {
  color: #cdd9e5;
}
[data-theme=dark] h1,
[data-theme=dark] h2,
[data-theme=dark] h3,
[data-theme=dark] h4 {
  color: #e6edf3;
  border-color: #1b2733;
}
[data-theme=dark] a {
  color: #7cc0ee;
}
[data-theme=dark] code {
  background: #1b2535;
  color: #e6edf3;
}
[data-theme=dark] pre {
  background: #0b1118;
}
[data-theme=dark] th {
  background: #1b2535;
  color: #cdd9e5;
}
[data-theme=dark] th,
[data-theme=dark] td {
  border-color: #27384a;
}
[data-theme=dark] tr:nth-child(even) td {
  background: #141e2a;
}
[data-theme=dark] blockquote {
  background: #13202c;
  color: #cdd9e5;
}
[data-theme=dark] footer {
  color: #7c8b99;
  border-color: #1b2733;
}
[data-theme=dark] .demo iframe {
  background: #0b1118;
  border-color: #27384a;
}