/* nav.css — Margin index (side nav), clusters, section dividers
   Extracted from the single-file UI; loaded by index.html in order. */
  /* ============================ ILLUMINATED MARGIN INDEX + CONTENT ============================ */
  .reader { display:grid; grid-template-columns:248px 1fr; gap:32px; align-items:start; margin-top:16px; }
  .margin-index {
    position:sticky; top:16px;
    border-right:1px solid var(--line);
    padding:6px 20px 6px 0;
    /* The reading cluster has 19 entries — taller than a laptop viewport. Without its own
       scroll the tail (Gemstones, Numerology, Baby Names, Divisionals) is unreachable,
       because sticky positioning moves the nav with the page. */
    max-height:calc(100vh - 32px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  .margin-index::-webkit-scrollbar { width:9px; }
  .margin-index::-webkit-scrollbar-thumb {
    background:color-mix(in srgb,var(--gold) 45%, transparent);
    border-radius:99px; border:2px solid transparent; background-clip:content-box; }
  .margin-index::-webkit-scrollbar-thumb:hover { background:color-mix(in srgb,var(--gold) 70%, transparent); background-clip:content-box; }
  .margin-index::-webkit-scrollbar-track { background:transparent; }
  .mi-cluster { margin-bottom:7px; }
  .mi-cluster > .mi-head {
    display:flex; align-items:center; gap:11px; width:100%;
    background:transparent; border:0; cursor:pointer; text-align:left;
    padding:11px 11px; border-radius:var(--radius-sm); color:var(--ink);
    font-family:var(--head); font-size:17px; letter-spacing:.3px; transition:.16s;
  }
  .mi-cluster > .mi-head:hover { background:color-mix(in srgb,var(--gold) 12%, var(--surface)); }
  .mi-cluster.open > .mi-head {
    color:var(--accent);
    background:linear-gradient(180deg, color-mix(in srgb,var(--gold) 14%, var(--surface)), var(--surface));
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 30%, transparent), var(--shadow-sm);
  }
  .mi-cluster > .mi-head .motif { width:23px; height:23px; flex:0 0 auto; color:var(--gold); }
  .mi-cluster.open > .mi-head .motif { color:var(--accent); }
  .mi-cluster > .mi-head .lbl { flex:1; }
  .mi-cluster > .mi-head .lbl .deva { display:block; font-family:var(--deva); font-size:12px; color:var(--gold); letter-spacing:0; margin-top:0; }
  .mi-cluster > .mi-head .chev { color:var(--gold); font-size:11px; transition:transform .18s; }
  .mi-cluster.open > .mi-head .chev { transform:rotate(90deg); }
  /* advanced (practitioner) clusters — hidden until "For practitioners" is opened */
  .mi-adv, .it-adv { display:none; }
  .mi-adv.adv-shown, .it-adv.adv-shown { display:block; }
  .adv-toggle { display:flex; align-items:center; gap:7px; width:100%; text-align:left; cursor:pointer;
    background:transparent; border:0; border-top:1px dashed var(--line); margin-top:6px; padding:9px 6px 6px;
    color:var(--gold); font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.3px; transition:.14s; }
  .adv-toggle:hover { color:var(--accent); }
  .adv-toggle .chev { font-size:10px; transition:transform .18s; }
  .adv-toggle.revealed .chev { transform:rotate(90deg); }
  .adv-toggle .adv-deva { font-family:var(--deva); color:var(--gold); font-size:11px; opacity:.8; margin-left:auto; }
  .adv-toggle-top { width:auto; border-top:0; border-left:1px dashed var(--line); margin:0 0 0 4px; padding:6px 12px; }
  .mi-subs { display:none; padding:4px 0 8px 2px; margin-left:13px; border-left:1px solid var(--line); }
  .mi-cluster.open .mi-subs { display:block; }
  .mi-subs button {
    display:block; width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
    color:var(--muted); font-family:var(--sans); font-size:15px; padding:8px 10px 8px 17px; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    transition:.14s; position:relative; margin:1px 0;
  }
  .mi-subs button:hover { color:var(--ink); background:var(--surface-2); }
  .mi-subs button.active {
    color:var(--accent-2); font-weight:600;
    background:color-mix(in srgb,var(--accent-2) 10%, transparent);
    box-shadow:inset 3px 0 0 var(--accent-2);
  }
  .mi-subs button .deva { font-family:var(--deva); color:var(--gold); font-size:12px; margin-left:6px; opacity:.85; }

  /* top accordion (mobile) hidden on desktop */
  .index-top { display:none; }

  .tabpane { display:none; animation:fade .22s ease; }
  .tabpane.active { display:block; }
  @keyframes fade { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }

  /* ============================ SECTION DIVIDERS ============================ */
  .sec-divider { display:flex; align-items:center; gap:16px; margin:34px 0 28px; color:var(--gold); }
  .sec-divider::before, .sec-divider::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.7; }
  .sec-divider .dia { font-size:13px; opacity:.95; letter-spacing:6px; }