/* ═══════════════════════════════════════════
   DYSAUTONOMIA ACADEMY — Shared Components
   Progress rings, sidebar elements, shared UI
   ═══════════════════════════════════════════ */

/* ── Mobile Sidebar Toggle ── */
.sidebar-toggle{
  display:none;
  position:fixed;bottom:20px;right:20px;z-index:50;
  width:48px;height:48px;border-radius:50%;
  background:var(--accent-teal);color:#fff;
  border:none;font-size:20px;cursor:pointer;
  box-shadow:var(--shadow-teal);
  align-items:center;justify-content:center;
}

@media(max-width:768px){
  .sidebar-toggle{display:flex}
}

/* ── Tier Gate Banner ── */
.tier-gate{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px;
  background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);
  margin:16px 0;
}
.tier-gate.unlocked{
  border-color:var(--accent-teal-dim);
  background:var(--accent-teal-bg);
}
.tier-gate.passed{
  border-color:var(--accent-green-dim);
  background:var(--accent-green-bg);
}
.tier-gate-icon{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}
.tier-gate .tier-gate-icon{
  background:var(--bg-elevated);color:var(--text-dim);
  border:1px solid var(--border);
}
.tier-gate.unlocked .tier-gate-icon{
  background:var(--accent-teal-bg);color:var(--accent-teal);
  border:1px solid var(--accent-teal-dim);
}
.tier-gate.passed .tier-gate-icon{
  background:var(--accent-green-bg);color:var(--accent-green);
  border:1px solid var(--accent-green-dim);
}
.tier-gate-info{flex:1}
.tier-gate-title{font-size:14px;font-weight:600;color:var(--text-heading)}
.tier-gate-desc{font-size:12px;color:var(--text-muted);margin-top:2px}

/* ── Empty State ── */
.empty-state{
  text-align:center;padding:60px 20px;
  color:var(--text-muted);
}
.empty-state h3{color:var(--text-secondary);margin-bottom:8px}

/* ── Tooltip ── */
.tooltip{
  position:relative;cursor:help;
}
.tooltip::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%);
  padding:6px 12px;border-radius:6px;
  background:var(--bg-elevated);color:var(--text-primary);
  font-size:12px;white-space:nowrap;
  border:1px solid var(--border);
  opacity:0;pointer-events:none;
  transition:opacity .15s;
}
.tooltip:hover::after{opacity:1}

/* ── Scroll Shadows ── */
.scroll-shadow{
  position:relative;
}
.scroll-shadow::before,
.scroll-shadow::after{
  content:'';position:absolute;left:0;right:0;
  height:24px;pointer-events:none;z-index:1;
}
.scroll-shadow::before{
  top:0;
  background:linear-gradient(to bottom, var(--bg-sidebar), transparent);
}
.scroll-shadow::after{
  bottom:0;
  background:linear-gradient(to top, var(--bg-sidebar), transparent);
}