/* ══════════════════════════════════════════════════════════════
   Keln — sidebar.

   WHAT WAS WRONG WITH THE OLD ONE
   It was a flat rectangle flush against the viewport edge, full
   height, with a hard 1px border-right. Every other surface on the
   site — the glass cards, the orbit, the Vega panel — reads as an
   object floating in space with depth behind it. The sidebar read
   as a browser chrome element bolted to the side.

   THE FIX IS MATERIAL, NOT DECORATIVE
   It now detaches from all four edges and becomes a floating panel
   with the same glass treatment as everything else: layered blur,
   an inner top highlight so it catches light, and a shadow deep
   enough to sit above the starfield rather than beside it.

   The active state is the other half. It was a 3px left border,
   which is a list-item convention. Now the active row gets a
   gradient fill and a glowing capsule indicator — the same visual
   language as a lit star in the constellation, because it's the
   same idea: this is where you are.

   DROP-IN: save as public/sidebar.css, add to dashboard.html:
     <link rel="stylesheet" href="/sidebar.css">
   ...then DELETE the old .sidebar / .sidebar__item rules from the
   inline <style> block, or they'll fight this file on specificity.
   ══════════════════════════════════════════════════════════════ */

/* ── The panel ─────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  left: 14px;
  top: 86px;
  bottom: 14px;
  width: 254px;
  z-index: 40;

  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  overflow: hidden;

  /* Two-stop gradient rather than a flat fill: the panel is lighter
     where the page glow hits it, which is what stops glass from
     looking like grey plastic. */
  background:
    linear-gradient(160deg, rgba(30,38,52,.82), rgba(12,17,25,.88));
  border: 1px solid var(--border);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);

  /* Outer shadow for depth, inset top line for the caught-light edge. */
  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(91,140,255,.04),
    inset 0 1px 0 rgba(255,255,255,.05);

  transform: translateX(calc(-100% - 20px));
  opacity: 0;
  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    opacity .28s ease;
}

.sidebar.sidebar--open {
  transform: translateX(0);
  opacity: 1;
}

/* A thin accent seam down the leading edge — the one piece of colour,
   and it ties the panel to the topbar's gradient logo mark. */
.sidebar::before {
  content: "";
  position: absolute;
  left: 0; top: 22px; bottom: 22px;
  width: 2px;
  background: linear-gradient(180deg,
    transparent, var(--accent), var(--accent2), transparent);
  opacity: .5;
  border-radius: 2px;
}

.sidebar__content {
  flex: 1;
  padding: var(--s-7) var(--s-5);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(91,140,255,.25) transparent;
}
.sidebar__content::-webkit-scrollbar { width: 6px; }
.sidebar__content::-webkit-scrollbar-thumb {
  background: rgba(91,140,255,.22);
  border-radius: 3px;
}
.sidebar__content::-webkit-scrollbar-thumb:hover {
  background: rgba(91,140,255,.4);
}

/* ── Items ─────────────────────────────────────────────────── */
.sidebar__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-6);

  margin: 3px 0;
  padding: 11px 13px;
  border-radius: var(--r-md);

  font-size: var(--t-md);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;

  /* Named transitions, not `all` — `all` also animates the border
     colour swap on focus, which produces a visible lag on tab. */
  transition:
    background .22s ease,
    color .22s ease,
    border-color .22s ease,
    transform .22s cubic-bezier(.22,1,.36,1);
}

.sidebar__item:hover {
  background: rgba(91,140,255,.08);
  border-color: rgba(91,140,255,.14);
  color: var(--ink);
  transform: translateX(3px);
}

.sidebar__item:focus-visible {
  outline: none;
  border-color: var(--border-hi);
  box-shadow: 0 0 0 3px rgba(34,211,166,.14);
  color: var(--ink);
}

.sidebar__item:active { transform: translateX(3px) scale(.985); }

/* ── Icon capsule ──────────────────────────────────────────── */
.sidebar__icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: var(--t-lg);
  line-height: 1;

  border-radius: 9px;
  background: rgba(6,10,16,.55);
  border: 1px solid rgba(91,140,255,.1);
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}

.sidebar__item:hover .sidebar__icon {
  background: rgba(91,140,255,.14);
  border-color: rgba(91,140,255,.24);
  transform: scale(1.06);
}

.sidebar__label {
  flex: 1;
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar__badge {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--t-2xs);
  padding: var(--s-1) 7px;
  border-radius: 999px;
  background: rgba(255,209,102,.15);
  color: var(--gold);
  display: none;
}
.sidebar__badge.has-due { display: inline-block; }

/* ── Active state ──────────────────────────────────────────── */
.sidebar__item--active {
  background: linear-gradient(100deg,
    rgba(34,211,166,.14), rgba(91,140,255,.07));
  border-color: rgba(34,211,166,.28);
  color: var(--ink);
  font-weight: 600;
}

/* Glowing capsule marker. Same visual grammar as a lit star in the
   constellation — because it means the same thing: you are here. */
.sidebar__item--active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent2), var(--accent3));
  box-shadow: 0 0 12px rgba(34,211,166,.7);
}

.sidebar__item--active .sidebar__icon {
  background: rgba(34,211,166,.16);
  border-color: rgba(34,211,166,.35);
  box-shadow: 0 0 14px rgba(34,211,166,.2);
}

.sidebar__item--active:hover { transform: none; }   /* already home */

/* ── Staggered entrance ────────────────────────────────────
   Items fan in behind the panel rather than arriving with it. Cheap
   (transform + opacity only, both compositor-friendly) and it makes
   a 420ms open feel deliberate instead of slow. */
.sidebar.sidebar--open .sidebar__item {
  animation: sb-in .38s cubic-bezier(.22,1,.36,1) backwards;
}
.sidebar.sidebar--open .sidebar__item:nth-child(1) { animation-delay: .04s }
.sidebar.sidebar--open .sidebar__item:nth-child(2) { animation-delay: .07s }
.sidebar.sidebar--open .sidebar__item:nth-child(3) { animation-delay: .10s }
.sidebar.sidebar--open .sidebar__item:nth-child(4) { animation-delay: .13s }
.sidebar.sidebar--open .sidebar__item:nth-child(5) { animation-delay: .16s }
.sidebar.sidebar--open .sidebar__item:nth-child(6) { animation-delay: .19s }
.sidebar.sidebar--open .sidebar__item:nth-child(7) { animation-delay: .22s }
.sidebar.sidebar--open .sidebar__item:nth-child(8) { animation-delay: .25s }

@keyframes sb-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Account block ──────────────────────────────────────────── */
.sidebar__account{
  flex-shrink:0;padding: var(--s-5);
  border-top:1px solid rgba(91,140,255,.09)}
.sidebar__acct-head{
  display:flex;align-items:center;gap:11px;padding: var(--s-4) 13px var(--s-6)}
.sidebar__avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-weight:800;font-size: var(--t-md);color:#04121a;
  background:linear-gradient(135deg,var(--accent),var(--accent2))}
.sidebar__name{font-size:13.5px;font-weight:600;color:var(--ink)}
.sidebar__email{
  font-size: var(--t-xs);color:var(--dim);
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Optional footer ───────────────────────────────────────
   Markup for this is in the patch notes — it shows plan + XP so the
   panel ends on something rather than trailing off into empty space. */
.sidebar__foot {
  flex-shrink: 0;
  padding: var(--s-6) var(--s-8);
  border-top: 1px solid rgba(91,140,255,.09);
  background: linear-gradient(180deg, transparent, rgba(6,10,16,.35));
}
.sidebar__plan {
  font-family: var(--mono);
  font-size: var(--t-2xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: var(--s-2);
}
.sidebar__meta {
  font-size: 11.5px;
  color: var(--dim);
}

/* ── Backdrop ──────────────────────────────────────────────
   A floating panel needs something behind it, or it reads as
   hovering over nothing. Also gives a click target to dismiss. */
.sidebar-scrim {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(4,7,12,.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.sidebar-scrim--on { opacity: 1; pointer-events: auto; }

/* ── Responsive ────────────────────────────────────────────
   NOTE: the old inline CSS had `.sidebar{display:none}` at
   max-width:1200px AND `.sidebar{width:100%}` at 768px — the first
   made the second unreachable, so the sidebar simply vanished on
   every laptop. It's a toggle-driven overlay, so there's no reason
   to hide it at any width. */
@media (max-width: 560px) {
  .sidebar {
    left: 10px; right: 10px;
    width: auto;
    top: 80px;
    bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: opacity .2s ease; transform: none; }
  .sidebar:not(.sidebar--open) { opacity: 0; pointer-events: none; }
  .sidebar.sidebar--open .sidebar__item { animation: none; }
  .sidebar__item:hover { transform: none; }
}