/* Clarity sidebar — Longbridge floating frosted-glass capsule (task #4).
   Companion script: output/js/clarity/sidebar.js.
   Desktop (>=769px): a fixed 72px rounded-full frosted-glass pill floats over
   the page (backdrop-blur + gray ring), vertically centered; hover/focus reveals
   a dropdown panel of sub-pages. Content clears it via body padding-left:104px.
   Mobile (<=768px): pill collapses; a hamburger button in the header opens an
   off-canvas drawer listing the same groups + sub-pages inline. */
.cl-sidebar{display:none}
body.clarity .cl-sidebar{display:block}
body.clarity .cl-sidebar-toggle{display:none}

/* ── Desktop floating capsule ──────────────────────────────── */
/* Longbridge .aside_left: a frosted-glass pill that floats over the page
   (position:fixed, rounded-full, backdrop-blur, gray ring) instead of an
   attached full-height rail. Content clears it via body padding-left. */
@media(min-width:769px){
  .cl-sidebar-scrim{display:none}
  .cl-sidebar-rail{position:fixed;left:8px;top:50%;transform:translateY(-50%);
    width:72px;z-index:90;border-radius:9999px;background:rgba(238,238,238,.8);
    -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    box-shadow:inset 0 0 0 .5px rgba(255,255,255,.5),0 0 0 .5px rgba(107,107,107,.3),0 4px 16px rgba(0,0,0,.04);
    display:flex;flex-direction:column;align-items:center;padding:10px 0}
  .cl-sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
    gap:4px;width:100%;align-items:center}
  .cl-sidebar-item{position:relative;width:100%;display:flex;justify-content:center}
  .cl-sidebar-btn{position:relative;display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;border:0;border-radius:9999px;background:transparent;color:#070a13;
    cursor:pointer;transition:color .15s,background-color .15s}
  .cl-sidebar-btn svg{width:24px;height:24px}
  .cl-sidebar-btn:hover{background:rgba(0,0,0,.06)}
  .cl-sidebar-btn.active{background:rgba(0,0,0,.1);color:#070a13}
  /* dropdown panel — absolutely anchored to the item so it flies out beside the
     hovered icon (immune to the rail's transform/backdrop-filter); an 8px ::before
     bridge keeps :hover alive while the pointer crosses the gap to the panel */
  .cl-sidebar-panel{position:absolute;left:calc(100% + 8px);top:0;z-index:95;
    display:flex;flex-direction:column;min-width:200px;max-height:calc(100vh - 32px);
    overflow-y:auto;padding:6px;background:#fff;border:.5px solid #dbdde1;border-radius:10px;
    box-shadow:0 8px 28px #070a1314;opacity:0;visibility:hidden;transform:translateX(-4px);
    transition:opacity .15s,transform .15s,visibility .15s}
  .cl-sidebar-panel::before{content:'';position:absolute;left:-8px;top:0;width:8px;height:100%}
  .cl-sidebar-item:hover .cl-sidebar-panel,
  .cl-sidebar-item:focus-within .cl-sidebar-panel{opacity:1;visibility:visible;transform:none}
  .cl-sidebar-link{display:block;padding:9px 12px;border-radius:6px;color:#696e77;
    font-size:13px;line-height:18px;text-decoration:none;white-space:nowrap;
    transition:background-color .12s,color .12s}
  .cl-sidebar-link:hover{background:#f0f2f4;color:#070a13}
  .cl-sidebar-link.active{background:#f2eefc;color:#7560d6;font-weight:600}
}

/* ── Mobile drawer ────────────────────────────────────────── */
@media(max-width:768px){
  body.clarity{padding-left:0}
  body.clarity .cl-sidebar-toggle{display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;border:.5px solid rgba(0,0,0,.1);border-radius:30px;
    background:rgba(210,210,210,.6);color:#000;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.07)}
  body.clarity .cl-sidebar-toggle svg{width:24px;height:24px}
  body.clarity .cl-sidebar-toggle:active{transform:scale(.95)}
  .cl-sidebar-scrim{position:fixed;inset:0;background:rgba(7,10,19,.4);opacity:0;
    visibility:hidden;transition:opacity .2s;z-index:89}
  .cl-sidebar-rail{position:fixed;left:0;top:0;bottom:0;width:min(300px,84vw);z-index:90;
    background:#fff;border-right:.5px solid #dbdde1;transform:translateX(-100%);
    transition:transform .25s ease;display:flex;flex-direction:column;padding:12px;
    overflow-y:auto}
  .cl-sidebar.open .cl-sidebar-rail{transform:translateX(0)}
  .cl-sidebar.open .cl-sidebar-scrim{opacity:1;visibility:visible}
  .cl-sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
  .cl-sidebar-item{display:flex;flex-direction:column}
  .cl-sidebar-btn{display:flex;align-items:center;gap:12px;width:100%;padding:12px;
    border:0;border-radius:8px;background:transparent;color:#696e77;font-size:15px;
    font-weight:600;text-align:left;cursor:pointer}
  .cl-sidebar-btn svg{width:22px;height:22px;flex:none}
  .cl-sidebar-btn::after{content:attr(aria-label)}
  .cl-sidebar-btn.active{background:#f2eefc;color:#7560d6}
  .cl-sidebar-panel{display:flex;flex-direction:column;padding:0 0 6px 34px;gap:2px}
  .cl-sidebar-link{display:block;padding:9px 12px;border-radius:6px;color:#696e77;
    font-size:14px;line-height:20px;text-decoration:none}
  .cl-sidebar-link:hover{background:#f0f2f4;color:#070a13}
  .cl-sidebar-link.active{background:#f2eefc;color:#7560d6;font-weight:600}
}