/* shared: sidebar detail panel, used by both prototype layouts.
   The sidebar is an overlay layer, not a flex sibling — the canvas always
   spans the full width; the sidebar floats above it on the right and slides
   in/out, so closing it doesn't leave the canvas permanently narrowed. */
body{overflow:hidden}
main#tapp{flex:1;min-height:0;position:relative;display:flex;flex-direction:row;overflow:hidden}

.tcanvas{flex:1;min-width:0;overflow:auto;position:relative;background:
  radial-gradient(circle,var(--dot) 1px,transparent 1px) 0 0/22px 22px, var(--bg)}

.sidebar{position:absolute;top:0;right:0;height:100%;width:min(440px,92vw);z-index:20;
  background:var(--card);border-left:1.5px solid var(--line-2);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease;
  box-shadow:-8px 0 24px -12px rgba(0,0,0,.18)}
.sidebar.open{transform:translateX(0)}
.sb-head{padding:20px 22px 16px;border-bottom:1.5px solid var(--line);display:flex;gap:12px;align-items:flex-start}
.sb-head h2{margin:0;font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em;flex:1}
.sb-close{flex:none;width:30px;height:30px;border-radius:9px;border:1.5px solid var(--line-2);
  background:var(--card-2);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.sb-close:hover{color:var(--ink);border-color:var(--teal)}
.sb-close svg{width:15px;height:15px}
.sb-crumb{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.sb-body{flex:1;overflow-y:auto;padding:18px 22px 30px;display:flex;flex-direction:column;gap:16px}
/* same hover-reveal thin scrollbar as .scroller/.qwrap/.railbody elsewhere on the site */
.sb-body{scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .3s ease}
.sb-body:hover{scrollbar-color:var(--line-2) transparent}
.sb-body::-webkit-scrollbar{width:12px}
.sb-body::-webkit-scrollbar-track{background:transparent}
.sb-body::-webkit-scrollbar-thumb{background-color:transparent;border-radius:99px;border:3.5px solid transparent;
  background-clip:content-box;transition:background-color .3s ease}
.sb-body:hover::-webkit-scrollbar-thumb{background-color:var(--line-2);background-clip:content-box}
.sb-empty{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
  color:var(--faint);padding:40px}
.sb-empty svg{width:34px;height:34px;opacity:.5}

/* Mobile only: dim the strip of canvas left beside the sidebar; tapping it
   closes the sidebar (see progress-tree.js). Scoped to <main>, not the
   viewport, so the header (theme toggle, progress pill) stays live. Hidden
   entirely above the site's 760px breakpoint. */
.sb-scrim{display:none}
@media (max-width:760px){
  .sb-scrim{display:block;position:absolute;inset:0;z-index:19;background:rgba(0,0,0,.32);
    opacity:0;pointer-events:none;transition:opacity .2s}
  .sb-scrim.show{opacity:1;pointer-events:auto}
}
.sb-body{overscroll-behavior:contain}