/* =====================================================================
   Astra Automation — docs navigation redesign (AA-8665)
   Part 1: left sidebar TOC tree.

   Layered over sphinx-book-theme/pydata's NATIVE toctree, whose real DOM is
   (verified on build/dirhtml/d1-deploy):
     li.toctree-lN[.has-children][.current.active]
       > a.reference.internal            (the row label)
       > details > summary
           > span.toctree-toggle[role=presentation] > i.fa-solid.fa-chevron-down
           + ul > li.toctree-l(N+1) …
   Expansion is native <details open> (no checkboxes). We only RESTYLE:
   chevron moved to a LEFT gutter (CSS-only — <a> and <details> are siblings,
   so `order` would drag the whole subtree), per-level indent, wrapping long
   labels, and a soft accent active state. Overrides astra-styles.css sidebar
   rules (180-193 indent!important, 205-220 fixed width/right-pad, 226-256
   dead `a ~ .toctree-toggle` + hard-blue active).

   Tokens reuse astra :root. No feature flag yet (scoped to .bd-sidebar-primary,
   same approach as header-actions scoping to .bd-header). Parts 2-4 (drawer,
   filter, on-page) are appended in later phases.
   ===================================================================== */

:root {
  --aa-accent: var(--color__base-blue, #0280fe);
  --aa-toc-accent: var(--color__base-blue, #0280fe);
  --aa-toc-text: var(--color__base-black, #222221);
  --aa-toc-muted: #6b7079;
  --aa-toc-line: #e7e8ec;
  --aa-toc-surface: #f3f4f6;
  --aa-toc-surface-2: #e9ebef;
  --aa-toc-page: var(--color__base-white, #fff);
  --aa-toc-active-bg: rgba(2, 128, 254, 0.13); /* fallback: no color-mix() */
  --aa-toc-active-bg: color-mix(in srgb, var(--aa-toc-accent) 13%, transparent);
}
html[data-theme="dark"] {
  --aa-toc-text: #fff;
  --aa-toc-muted: #9aa1ab;
  --aa-toc-line: rgba(255, 255, 255, 0.12);
  --aa-toc-surface: rgba(255, 255, 255, 0.06);
  --aa-toc-surface-2: rgba(255, 255, 255, 0.1);
  --aa-toc-page: #14191f;
  --aa-toc-active-bg: rgba(2, 128, 254, 0.24); /* fallback: no color-mix() */
  --aa-toc-active-bg: color-mix(in srgb, var(--aa-toc-accent) 24%, transparent);
}

/* =====================================================================
   Row (the <a> label)
   ===================================================================== */
/* Kill astra's fixed width:237px + right-chevron padding + centered align so
   long labels WRAP (no ellipsis) and the chevron can live in the left gutter. */
.bd-sidebar-primary nav.bd-links .navbar-nav .nav li a.reference {
  display: flex;
  align-items: flex-start; /* keep chevron/label on the first line when wrapping */
  width: auto !important; /* kill astra width:237px */
  gap: 0;
  padding: 6px 9px 6px 23px; /* l1: 8 + 15 gutter; per-level padding-left below */
  margin: 1px 0;
  border-radius: 7px;
  background: transparent;
  color: var(--color__base-black, #222221);
  font: 500 13.5px/1.33 var(--font__base-astra, "PT Astra Fact", sans-serif);
  white-space: normal; /* wrap */
  overflow-wrap: anywhere; /* break very long unbroken tokens */
  box-shadow: none !important;
}
html[data-theme="dark"] .bd-sidebar-primary nav.bd-links .nav li a.reference {
  color: #fff;
}
/* No hover background: the redesign's grey hover "stuck" on the last-tapped
   item on touch (:hover persists after a tap), so it read as a second, wrong
   selection. Reverted to the theme's original hover (no background). */

/* nested rows slightly muted (active overrides below). Must include .navbar-nav
   to outweigh the base row-colour rule above (same selector chain + one class);
   without it this rule is dead and every depth renders at full label colour. */
.bd-sidebar-primary nav.bd-links .navbar-nav .nav li li a.reference {
  color: var(--aa-toc-muted);
}

/* per-level indent: label padding-left = 8 + depth*15 + 15px chevron gutter.
   Higher specificity than astra's `nav.bd-links ul ul>li>a{!important}`
   (extra .bd-sidebar-primary + .toctree-lN classes) + !important. */
.bd-sidebar-primary nav.bd-links li.toctree-l1 > a.reference {
  padding-left: 23px !important; /* 8 + 15 */
}
.bd-sidebar-primary nav.bd-links li.toctree-l2 > a.reference {
  padding-left: 38px !important; /* 23 + 15 */
  font-size: 13.5px !important; /* kill astra 12px */
}
.bd-sidebar-primary nav.bd-links li.toctree-l3 > a.reference {
  padding-left: 53px !important; /* 38 + 15 */
  font-size: 13.5px !important;
}
.bd-sidebar-primary nav.bd-links li.toctree-l4 > a.reference {
  padding-left: 68px !important; /* 53 + 15 */
  font-size: 13.5px !important;
}

/* =====================================================================
   Chevron — pinned into the LEFT gutter (CSS-only), rotates on open
   ===================================================================== */
.bd-sidebar-primary nav.bd-links li.has-children {
  position: relative;
}
/* the <summary> carries the chevron; absolutely position it in the gutter to
   the left of the label. left = 8 + depth*15 (per level below). */
.bd-sidebar-primary nav.bd-links li.has-children > details > summary {
  position: absolute;
  top: 6px; /* = row padding-top, so the chevron sits on the label's first line */
  left: 6px;
  width: 15px;
  height: 18px; /* ≈ label line-height (13.5 × 1.33) → centered on first line */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  line-height: 0; /* no extra line-box height that would push the glyph down */
  list-style: none; /* remove default disclosure triangle */
  cursor: pointer;
  z-index: 1;
}
.bd-sidebar-primary nav.bd-links summary::-webkit-details-marker {
  display: none; /* Safari/old Chrome triangle */
}
.bd-sidebar-primary nav.bd-links summary::marker {
  content: "";
}
.bd-sidebar-primary
  nav.bd-links
  li.toctree-l1.has-children
  > details
  > summary {
  left: 6px; /* ≈ 8 - centering slack */
}
.bd-sidebar-primary
  nav.bd-links
  li.toctree-l2.has-children
  > details
  > summary {
  left: 21px; /* ≈ 23 */
}
.bd-sidebar-primary
  nav.bd-links
  li.toctree-l3.has-children
  > details
  > summary {
  left: 36px; /* ≈ 38 */
}
.bd-sidebar-primary
  nav.bd-links
  li.toctree-l4.has-children
  > details
  > summary {
  left: 51px; /* ≈ 53 */
}
/* the chevron glyph itself: fa-chevron-down → rotate -90° collapsed (points
   right ›), 0° open (points down ⌄). */
.bd-sidebar-primary nav.bd-links .toctree-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px !important; /* theme sizes this span to ~30px (row height) with
                   higher specificity, which top-aligned the glyph and pushed it
                   ~6px below the summary centre; pin it to the summary box */
  padding: 0;
  overflow: hidden;
  line-height: 0; /* kill inline baseline gap so the svg centers */
  color: var(--aa-toc-muted);
  opacity: 0.7;
}
/* FontAwesome runs in SVG mode here — the static <i class="fa-chevron-down"> is
   swapped at runtime to <svg class="svg-inline--fa">. Target svg AND i (i is the
   pre-swap / webfont-mode fallback). fill:currentColor inherits the muted color. */
.bd-sidebar-primary nav.bd-links .toctree-toggle svg,
.bd-sidebar-primary nav.bd-links .toctree-toggle i {
  display: block; /* remove inline-svg baseline gap (FA vertical-align) */
  width: 13px;
  height: 13px;
  font-size: 13px;
  line-height: 0;
  transition: transform 0.15s ease;
  transform: rotate(-90deg); /* collapsed → chevron-down points right (›) */
}
.bd-sidebar-primary
  nav.bd-links
  li.has-children
  > details[open]
  > summary
  .toctree-toggle
  svg,
.bd-sidebar-primary
  nav.bd-links
  li.has-children
  > details[open]
  > summary
  .toctree-toggle
  i {
  transform: rotate(0deg); /* open → points down (⌄) */
}
@media (prefers-reduced-motion: reduce) {
  .bd-sidebar-primary nav.bd-links .toctree-toggle svg,
  .bd-sidebar-primary nav.bd-links .toctree-toggle i {
    transition: none;
  }
}

/* =====================================================================
   Active item — soft accent tint, matching the mobile drill-down navigator
   (.aa-mtoc__row--active): a light accent-tinted background + accent-coloured
   label, so desktop and mobile read identically. Uses the same --aa-toc-active-bg
   / --aa-toc-accent tokens, so the dark theme adapts automatically. Set
   explicitly (not just letting astra win) because the row rule's colour has
   higher specificity than astra's a.current. Weight stays normal (500) per the
   client's "not bold" preference — the tint + accent colour alone mark it.
   ===================================================================== */
.bd-sidebar-primary nav.bd-links .navbar-nav .nav li a.reference.current {
  background: var(--aa-toc-active-bg);
  color: var(--aa-toc-accent);
  font-weight: 500; /* same weight as other items — tint + accent colour mark it
                       (overrides astra a.current:700 and pydata :600) */
}
/* (astra's `a.current ~ .toctree-toggle{color:#fff}` is a dead combinator here —
   the toggle is nested in details>summary, not an <a> sibling — so no counter
   needed; the muted color set on .toctree-toggle above already applies.) */

/* =====================================================================
   Breadcrumbs strip — scroll away with the page (AA-8665)
   The theme pins .bd-header-article (breadcrumbs + toggles) sticky below the
   navbar, so it ate a fixed slice of the viewport while scrolling. Drop it into
   normal flow so it scrolls off with the content. The navbar (.bd-header) stays
   sticky, and .bd-container's sticky (pydata sidebar mechanism) is untouched.
   ===================================================================== */
.bd-header-article {
  position: static !important;
}

/* =====================================================================
   Part: left-tree filter "Фильтр по разделам" (AA-8665) — desktop.
   Field injected above the tree by js/toc-filter.js. .is-filtering hides
   non-matching rows (matches + their ancestor path stay) and the chevrons.
   Hidden below 960px — the mobile drawer carries its own filter.
   ===================================================================== */
@media (max-width: 959.98px) {
  .aa-toc-filter {
    display: none;
  }
}
.aa-toc-filter {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 2px 9px 8px;
  background: var(--aa-toc-page);
}
.aa-toc-filter__box {
  position: relative;
  display: flex;
  align-items: center;
}
.aa-toc-filter__box > svg {
  position: absolute;
  left: 10px;
  color: var(--aa-toc-muted);
  pointer-events: none;
}
.aa-toc-filter__input {
  width: 100%;
  height: 36px;
  padding: 0 32px;
  border: 1.5px solid var(--aa-toc-line);
  border-radius: 9px;
  background: var(--aa-toc-page);
  color: var(--aa-toc-text);
  font: 400 13px/1 var(--font__base-astra, "PT Astra Fact", sans-serif);
  outline: 0;
}
.aa-toc-filter__input:focus {
  border-color: var(--aa-toc-accent);
}
.aa-toc-filter__clear {
  position: absolute;
  right: 8px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--aa-toc-surface-2);
  color: var(--aa-toc-muted);
  cursor: pointer;
}
.aa-toc-filter__clear[hidden] {
  display: none;
}
.aa-toc-noresults {
  padding: 8px 12px 4px;
  color: var(--aa-toc-muted);
  font: 400 13px/1.4 var(--font__base-astra, "PT Astra Fact", sans-serif);
}
.bd-sidebar-primary.is-filtering nav.bd-links li.aa-hide {
  display: none !important;
}
.bd-sidebar-primary.is-filtering nav.bd-links .toctree-toggle {
  display: none !important;
}

/* =====================================================================
   Part: mobile full-screen drill-down navigator (AA-8665) — <960px.
   Built by js/toc-mobile-drawer.js as a custom overlay that REPLACES the
   theme's native mobile dialog. Ported from the design handoff. The burger
   itself is styled by the header work (AA-8644) — not restyled here.
   ===================================================================== */
@media (min-width: 960px) {
  .aa-mtoc {
    display: none !important;
  }
  /* AA-8665: the left-tree toggle (burger) is desktop-redundant — the tree is
     always visible ≥960 — so hide the article-header primary toggle per the
     design reference; the burger stays only on mobile. (The navbar primary
     toggle is already theme-hidden ≥960.) */
  label.sidebar-toggle.primary-toggle,
  .bd-header-article .sidebar-toggle.primary-toggle {
    display: none !important;
  }
}
html.aa-mtoc-open {
  overflow: hidden; /* lock body scroll while the overlay is open */
}
.aa-mtoc {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--aa-toc-page);
  display: none;
  flex-direction: column;
  font-family: var(--font__base-astra, "PT Astra Fact", Verdana, sans-serif);
}
.aa-mtoc.is-open {
  display: flex;
}
.aa-mtoc__bar {
  min-height: 56px; /* fallback; JS sets exact height = site header height so
                       the top strip doesn't resize and ✕ lands on the burger */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  /* match the site header's bottom shadow (not a border) so the top strip looks
     identical whether the drawer is open or closed — via the theme's shadow
     token so it stays visible in dark theme (a hard rgba(0,0,0,.1) would not) */
  box-shadow: 0 2px 4px var(--pst-color-shadow, rgba(0, 0, 0, 0.1));
}
.aa-mtoc__close {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1.5px solid var(--aa-toc-accent);
  background: var(--aa-toc-surface);
  color: var(--aa-toc-accent);
  cursor: pointer;
}
.aa-mtoc__close svg {
  width: 20px;
  height: 20px;
}
.aa-mtoc__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  color: var(--aa-toc-text);
}
.aa-mtoc__filter {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 12px 14px 6px;
}
.aa-mtoc__filter-ic {
  position: absolute;
  left: 27px;
  display: inline-flex;
  color: var(--aa-toc-muted);
  pointer-events: none;
}
.aa-mtoc__filter-ic svg {
  width: 16px;
  height: 16px;
  display: block;
}
.aa-mtoc__filter-input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 40px;
  border: 1.5px solid var(--aa-toc-line);
  border-radius: 10px;
  outline: 0;
  background: var(--aa-toc-page);
  color: var(--aa-toc-text);
  font: 400 14px/1 var(--font__base-astra, "PT Astra Fact", sans-serif);
}
.aa-mtoc__clear {
  position: absolute;
  right: 27px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--aa-toc-surface-2);
  color: var(--aa-toc-muted);
  cursor: pointer;
}
.aa-mtoc__clear[hidden] {
  display: none;
}
.aa-mtoc__clear svg {
  width: 12px;
  height: 12px;
}
.aa-mtoc__list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain; /* no scroll-chaining to the page behind */
  padding: 4px 10px 14px;
  -webkit-overflow-scrolling: touch;
}
.aa-mtoc__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  width: 100%;
  padding: 11px 14px;
  margin: 1px 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.aa-mtoc__row > span:first-child {
  flex: 1;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  font: 500 15px/1.35 var(--font__base-astra, "PT Astra Fact", sans-serif);
  color: var(--aa-toc-text);
}
.aa-mtoc__row:hover {
  background: var(--aa-toc-surface);
}
.aa-mtoc__row--active {
  background: var(--aa-toc-active-bg);
}
.aa-mtoc__row--active > span:first-child {
  color: var(--aa-toc-accent);
  font-weight: 600;
}
.aa-mtoc__chev {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--aa-toc-muted);
}
.aa-mtoc__chev svg {
  width: 18px;
  height: 18px;
}
.aa-mtoc__back {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.aa-mtoc__back svg {
  width: 20px;
  height: 20px;
  color: var(--aa-toc-muted);
  flex: 0 0 auto;
}
.aa-mtoc__back > span {
  flex: 1;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  font: 600 14px/1.3 var(--font__base-astra, "PT Astra Fact", sans-serif);
  color: var(--aa-toc-text);
}
.aa-mtoc__sep {
  height: 1px;
  background: var(--aa-toc-line);
  margin: 7px 8px 9px;
}
.aa-mtoc__empty {
  padding: 18px 14px;
  color: var(--aa-toc-muted);
  font: 400 14px/1.4 var(--font__base-astra, "PT Astra Fact", sans-serif);
}
.aa-mtoc__footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--aa-toc-line);
  padding: 12px 14px;
}

/* =====================================================================
   Part: on-page right rail restyle (AA-8665) — ≥1200px.
   The theme hides the rail heading (.tocsection { display:none }) and uses
   default anchor styles, so the on-page TOC showed as a bare, unlabelled list.
   Un-hide + style the heading ("НА ЭТОЙ СТРАНИЦЕ" — text renamed by
   js/onpage-inline.js, CSS upper-cases it) and match the inline block's anchors
   (muted links + accent active marker). Only renders ≥1200 (the theme hides the
   whole .bd-sidebar-secondary below 1200, so no width scoping needed here).
   ===================================================================== */
.bd-sidebar-secondary .tocsection.onthispage {
  display: flex !important; /* theme hides it with display:none */
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font: 600 12px/1.1 var(--font__base-astra, "PT Astra Fact", sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase; /* "На этой странице" → "НА ЭТОЙ СТРАНИЦЕ" */
  color: var(--aa-toc-muted);
}
.bd-sidebar-secondary .tocsection.onthispage svg {
  width: 15px;
  height: 15px;
  color: var(--aa-toc-accent);
}
.bd-sidebar-secondary nav.bd-toc-nav a.reference {
  display: block;
  padding: 5px 10px;
  border-left: 2px solid transparent;
  /* !important: dark theme sets an !important link colour on content links */
  color: var(--aa-toc-muted) !important;
  text-decoration: none;
}
.bd-sidebar-secondary nav.bd-toc-nav a.reference:hover {
  color: var(--aa-toc-text) !important;
}
.bd-sidebar-secondary nav.bd-toc-nav a.reference.active,
.bd-sidebar-secondary nav.bd-toc-nav li.active > a.reference {
  color: var(--aa-toc-accent) !important;
  border-left-color: var(--aa-toc-accent);
  font-weight: 600;
}

/* =====================================================================
   Part: on-page inline "НА ЭТОЙ СТРАНИЦЕ" (AA-8665) — <1200px.
   Built by js/onpage-inline.js as a collapsible clone of the theme's right
   on-page rail (which the theme hides below 1200px). Placed after the
   article <h1>. Tokens are the shared --aa-toc-* set, so dark theme adapts.
   ===================================================================== */
.aa-onpage {
  border: 1px solid var(--aa-toc-line);
  border-radius: 10px;
  margin: 0 0 20px;
  overflow: hidden;
  max-width: 520px;
}
@media (min-width: 1200px) {
  .aa-onpage {
    display: none !important; /* belt-and-braces: JS also removes it at ≥1200 */
  }
}
.aa-onpage > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--aa-toc-surface);
  color: var(--aa-toc-text);
}
.aa-onpage > summary::-webkit-details-marker {
  display: none;
}
.aa-onpage > summary::marker {
  content: "";
}
.aa-onpage__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 12px/1.1 var(--font__base-astra, "PT Astra Fact", sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase; /* renders "На этой странице" → "НА ЭТОЙ СТРАНИЦЕ" */
  color: var(--aa-toc-muted);
}
.aa-onpage__label svg {
  flex: 0 0 auto;
  color: var(--aa-toc-accent);
}
.aa-onpage__chev {
  flex: 0 0 auto;
  color: var(--aa-toc-muted);
  transition: transform 0.2s ease;
}
.aa-onpage[open] > summary .aa-onpage__chev {
  transform: rotate(180deg);
}
.aa-onpage__list {
  padding: 6px 8px 8px;
}
.aa-onpage__list a {
  display: block;
  padding: 6px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  font: 400 13px/1.35 var(--font__base-astra, "PT Astra Fact", sans-serif);
  /* !important: the dark theme sets an !important link colour on content <a>,
     which would otherwise paint these clones accent-blue (light theme is fine). */
  color: var(--aa-toc-muted) !important;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.aa-onpage__list a:hover {
  color: var(--aa-toc-text) !important;
  background: var(--aa-toc-surface);
}
.aa-onpage__list a.active {
  color: var(--aa-toc-accent) !important;
  border-left-color: var(--aa-toc-accent);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .aa-onpage > summary .aa-onpage__chev {
    transition: none;
  }
}