/* ══════════════════════════════════════════════════════════════════════════════
   app-navbar.css  —  v4
   • Navbar: restored to original app sand/cream color
   • Page body: very light violet-white tint
   • Full light + dark mode support throughout
   • Headerlink ¶ icons hidden
   • Navbar fixed on scroll
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 0. Navbar design tokens ───────────────────────────────────────────────── */
:root {
  /* Navbar: clean near-white — lighter than the biscuit/cream */
  --sf-nav-bg:       #F8F8F8;          /* solid near-white */
  --sf-nav-border:   rgba(10,10,15,0.10);
  --sf-nav-shadow:   0 8px 30px rgba(0,0,0,0.06);

  /* Text inside navbar */
  --sf-nav-text:        rgba(10,10,15,0.65);
  --sf-nav-text-active: #0A0A0F;
  --sf-nav-accent:      #F26B3A;
  --sf-nav-hover-bg:    rgba(10,10,15,0.06);

  /* Shared */
  --sf-nav-height: 96px;
  --sf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
             sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --sf-radius: 0.375rem;
}

/* Navbar dark mode tokens */
body[data-theme="dark"] {
  --sf-nav-bg:          #1e2022;
  --sf-nav-border:      rgba(255,255,255,0.08);
  --sf-nav-shadow:      0 8px 30px rgba(0,0,0,0.25);
  --sf-nav-text:        rgba(207,208,208,0.65);
  --sf-nav-text-active: #cfd0d0;
  --sf-nav-hover-bg:    rgba(255,255,255,0.06);
}
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    --sf-nav-bg:          #1e2022;
    --sf-nav-border:      rgba(255,255,255,0.08);
    --sf-nav-shadow:      0 8px 30px rgba(0,0,0,0.25);
    --sf-nav-text:        rgba(207,208,208,0.65);
    --sf-nav-text-active: #cfd0d0;
    --sf-nav-hover-bg:    rgba(255,255,255,0.06);
  }
}

/* ── 1. Hide Sphinx ¶ headerlink icons ─────────────────────────────────────── */
.headerlink { display: none !important; }

/* ── 2. Fixed navbar ───────────────────────────────────────────────────────── */
#sf-app-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2000;
  background: var(--sf-nav-bg);
  border-bottom: 1px solid var(--sf-nav-border);
  box-shadow: var(--sf-nav-shadow);
  font-family: var(--sf-font);
  color: var(--sf-nav-text-active);
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}

#sf-app-navbar .sf-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2.5rem;
  min-height: var(--sf-nav-height);
  box-sizing: border-box;
  max-width: 1800px;
  margin: 0 auto;
}

/* Logo */
#sf-app-navbar .sf-nav-logo {
  display: flex; align-items: center;
  text-decoration: none; flex-shrink: 0;
}
#sf-app-navbar .sf-nav-logo img {
  height: 64px; width: auto; object-fit: contain; display: block;
}

/* Nav links */
#sf-app-navbar .sf-nav-links {
  display: flex; align-items: center;
  gap: 1.75rem; list-style: none; margin: 0; padding: 0;
}
#sf-app-navbar .sf-nav-links a {
  font-size: 0.875rem; font-weight: 400;
  color: var(--sf-nav-text);
  text-decoration: none; transition: color 0.15s;
  white-space: nowrap; min-height: 44px;
  display: flex; align-items: center;
}
#sf-app-navbar .sf-nav-links a:hover {
  color: var(--sf-nav-text-active); text-decoration: none;
}
#sf-app-navbar .sf-nav-links a.sf-docs-active {
  color: var(--sf-nav-accent); font-weight: 600;
}

/* CTA buttons */
#sf-app-navbar .sf-nav-cta { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
#sf-app-navbar .sf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; min-height: 44px; padding: 0 1rem;
  border-radius: 999px; font-size: 0.875rem; font-weight: 600;
  font-family: var(--sf-font); text-decoration: none;
  transition: all 0.15s; white-space: nowrap;
  cursor: pointer; border: none; line-height: 1;
}
#sf-app-navbar .sf-btn-ghost {
  background: transparent; color: var(--sf-nav-text-active);
}
#sf-app-navbar .sf-btn-ghost:hover {
  background: var(--sf-nav-hover-bg); color: var(--sf-nav-text-active); text-decoration: none;
}
#sf-app-navbar .sf-btn-primary {
  background: #0A0A0F; color: #fff;
}
body[data-theme="dark"] #sf-app-navbar .sf-btn-primary { background: #cfd0d0; color: #131416; }
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) #sf-app-navbar .sf-btn-primary { background: #cfd0d0; color: #131416; }
}
#sf-app-navbar .sf-btn-primary:hover { opacity: 0.82; text-decoration: none; }

/* ── 3. Push Furo chrome below fixed navbar ────────────────────────────────── */
.page                { padding-top: var(--sf-nav-height) !important; }
.mobile-header       { top: var(--sf-nav-height) !important; position: sticky !important; }
.sidebar-drawer      { top: 0 !important; }
.sidebar-sticky      { position: sticky !important; top: var(--sf-nav-height) !important; height: calc(100vh - var(--sf-nav-height)) !important; }
.toc-drawer          { top: var(--sf-nav-height) !important; height: calc(100vh - var(--sf-nav-height)) !important; }
:target              { scroll-margin-top: calc(var(--sf-nav-height) + 1.5rem) !important; }
section > span:target{ scroll-margin-top: calc(var(--sf-nav-height) + 1.8rem) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE  —  page: very subtle violet-white tint
   These rules apply when data-theme="light" OR when system is light AND
   no explicit theme is set (auto mode).
   We scope everything so Furo's dark rules can fully override in dark mode.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Light: pure white page */
body[data-theme="light"],
body[data-theme="auto"],
body:not([data-theme]) {
  --color-background-primary:   #ffffff;
  --color-background-secondary: #f5f5f5;
  --color-background-hover:     #eeeeee;
  --color-background-hover--transparent: rgba(238,238,238,0);
  --color-background-border:    rgba(10,10,15,0.12);

  --color-foreground-primary:   #0A0A0F;
  --color-foreground-secondary: rgba(10,10,15,0.65);
  --color-foreground-muted:     rgba(10,10,15,0.50);
  --color-foreground-border:    rgba(10,10,15,0.20);

  --color-brand-primary:        #0a4bff;
  --color-brand-content:        #0a4bff;
  --color-brand-visited:        #6B21A8;

  --color-header-background:    #F8F8F8;
  --color-header-border:        rgba(10,10,15,0.08);
  --color-header-text:          #0A0A0F;

  --color-sidebar-background:           #f5f5f5;
  --color-sidebar-background-border:    rgba(10,10,15,0.08);
  --color-sidebar-brand-text:           #0A0A0F;
  --color-sidebar-caption-text:         rgba(10,10,15,0.50);
  --color-sidebar-link-text:            rgba(10,10,15,0.70);
  --color-sidebar-link-text--top-level: #0a4bff;
  --color-sidebar-item-background:      #f5f5f5;
  --color-sidebar-item-background--current: #ebebeb;
  --color-sidebar-search-background:    rgba(255,255,255,0.80);
  --color-sidebar-search-background--focus: #ffffff;
  --color-sidebar-search-border:        rgba(10,10,15,0.12);
  --color-sidebar-search-icon:          rgba(10,10,15,0.40);
  --color-sidebar-search-text:          #0A0A0F;

  --color-toc-background:        #ffffff;
  --color-toc-title-text:        rgba(10,10,15,0.50);
  --color-toc-item-text:         rgba(10,10,15,0.65);
  --color-toc-item-text--hover:  #0A0A0F;
  --color-toc-item-text--active: #0a4bff;

  --color-code-background: #f0f0f0;
  --color-code-foreground: #0A0A0F;
  --color-inline-code-background: rgba(10,10,15,0.06);
}

/* System auto light */
@media (prefers-color-scheme: light) {
  body:not([data-theme="dark"]):not([data-theme="light"]) {
    background: #ffffff !important;
  }
}

/* Concrete element overrides for LIGHT */
body[data-theme="light"],
body[data-theme="auto"]:not([data-theme="dark"]),
body:not([data-theme]) {
  background: #ffffff;
  color: #0A0A0F;
}

body[data-theme="light"] .page,
body[data-theme="auto"] .page,
body:not([data-theme]) .page            { background: #ffffff; }
body[data-theme="light"] .sidebar-drawer,
body[data-theme="auto"] .sidebar-drawer,
body:not([data-theme]) .sidebar-drawer  { background: #f5f5f5 !important; border-right-color: rgba(10,10,15,0.08) !important; }
body[data-theme="light"] .toc-drawer,
body[data-theme="auto"] .toc-drawer,
body:not([data-theme]) .toc-drawer      { background: #ffffff !important; }
body[data-theme="light"] article[role="main"],
body[data-theme="auto"] article[role="main"],
body:not([data-theme]) article[role="main"] { background: transparent; color: #0A0A0F; }

/* Light code blocks */
body[data-theme="light"] pre,
body[data-theme="light"] .highlight pre,
body[data-theme="auto"] pre,
body[data-theme="auto"] .highlight pre,
body:not([data-theme]) pre,
body:not([data-theme]) .highlight pre   { background: #f0f0f0 !important; color: #0A0A0F !important; }

/* Light links */
body[data-theme="light"] article a,
body[data-theme="auto"] article a,
body:not([data-theme]) article a        { color: #0a4bff; }
body[data-theme="light"] article a:hover,
body[data-theme="auto"] article a:hover,
body:not([data-theme]) article a:hover  { color: #2757dd; }

/* ══════════════════════════════════════════════════════════════════════════════
   DARK MODE  —  explicit overrides that supplement Furo's own dark rules
   ══════════════════════════════════════════════════════════════════════════════ */
body[data-theme="dark"] {
  --color-background-primary:   #131416;
  --color-background-secondary: #1a1c1e;
  --color-background-hover:     #1e2124;
  --color-background-hover--transparent: rgba(30,33,36,0);
  --color-background-border:    #303335;

  --color-foreground-primary:   #cfd0d0;
  --color-foreground-secondary: #9ca0a5;
  --color-foreground-muted:     #81868d;
  --color-foreground-border:    #666;

  --color-brand-primary:        #a78bfa;
  --color-brand-content:        #a78bfa;
  --color-brand-visited:        #c084fc;

  --color-header-background:    rgba(19, 20, 22, 0.95);
  --color-header-border:        rgba(255,255,255,0.06);
  --color-header-text:          #cfd0d0;

  --color-sidebar-background:           #1a1c1e;
  --color-sidebar-background-border:    rgba(255,255,255,0.06);
  --color-sidebar-brand-text:           #cfd0d0;
  --color-sidebar-caption-text:         #81868d;
  --color-sidebar-link-text:            #9ca0a5;
  --color-sidebar-link-text--top-level: #a78bfa;
  --color-sidebar-item-background:      #1a1c1e;
  --color-sidebar-item-background--current: #1e2124;
  --color-sidebar-search-background:    rgba(255,255,255,0.06);
  --color-sidebar-search-background--focus: rgba(255,255,255,0.10);
  --color-sidebar-search-border:        rgba(255,255,255,0.12);
  --color-sidebar-search-icon:          #81868d;
  --color-sidebar-search-text:          #cfd0d0;

  --color-toc-background:        #131416;
  --color-toc-title-text:        #81868d;
  --color-toc-item-text:         #9ca0a5;
  --color-toc-item-text--hover:  #cfd0d0;
  --color-toc-item-text--active: #a78bfa;

  --color-code-background: #202020;
  --color-code-foreground: #d0d0d0;
  --color-inline-code-background: rgba(255,255,255,0.08);

  background: #131416;
  color: #cfd0d0;
}

body[data-theme="dark"] .page           { background: #131416; }
body[data-theme="dark"] .sidebar-drawer { background: #1a1c1e !important; border-right-color: rgba(255,255,255,0.06) !important; }
body[data-theme="dark"] .toc-drawer     { background: #131416 !important; }
body[data-theme="dark"] article[role="main"] { background: transparent; color: #cfd0d0; }

body[data-theme="dark"] pre,
body[data-theme="dark"] .highlight pre  { background: #202020 !important; color: #d0d0d0 !important; }

body[data-theme="dark"] article a       { color: #a78bfa; }
body[data-theme="dark"] article a:hover { color: #c084fc; }

body[data-theme="dark"] .sidebar-search { background: rgba(255,255,255,0.07); color: #cfd0d0; }
body[data-theme="dark"] code.literal,
body[data-theme="dark"] .sig-inline     { background: rgba(255,255,255,0.08); color: #cfd0d0; }

/* System-prefers-dark AND no explicit theme set */
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    --color-background-primary:   #131416;
    --color-background-secondary: #1a1c1e;
    background: #131416;
    color: #cfd0d0;
  }
  body:not([data-theme="light"]) .page           { background: #131416; }
  body:not([data-theme="light"]) .sidebar-drawer { background: #1a1c1e !important; }
  body:not([data-theme="light"]) .toc-drawer     { background: #131416 !important; }
  body:not([data-theme="light"]) pre,
  body:not([data-theme="light"]) .highlight pre  { background: #202020 !important; color: #d0d0d0 !important; }
  body:not([data-theme="light"]) article a       { color: #a78bfa; }
}

/* ── Typography (shared) ───────────────────────────────────────────────────── */
body, article, .sidebar-tree, .toc-tree, h1, h2, h3, h4, h5, h6 {
  font-family: var(--sf-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
article h1 { font-size: 2rem;    font-weight: 700; letter-spacing: -0.02em;  }
article h2 { font-size: 1.5rem;  font-weight: 700; letter-spacing: -0.015em; }
article h3 { font-size: 1.25rem; font-weight: 600; }
article[role="main"] p,
article[role="main"] li,
article[role="main"] td { line-height: 1.65; }

/* Sidebar brand */
.sidebar-brand-text { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.sidebar-search     { border-radius: var(--sf-radius); }
.sidebar-search:focus { outline: 2px solid #0a4bff; outline-offset: -2px; }

/* Admonitions */
.admonition { background: rgba(10,10,15,0.04); border-left-color: #0a4bff; }

/* Footer */
footer, .bottom-of-page { border-top-color: var(--color-background-border); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #sf-app-navbar .sf-nav-links { display: none; }
  #sf-app-navbar .sf-nav-inner { padding: 0.75rem 1rem; }
  #sf-app-navbar .sf-btn-ghost { display: none; }
}
@media (max-width: 480px) {
  :root { --sf-nav-height: 72px; }
  #sf-app-navbar .sf-nav-logo img { height: 48px; }
}