/* styles-shell.css — owned by the shell agent of the premium UI round. Consumes styles-ds.css tokens.
   ==========================================================================
   The "Quantum Control Deck": sidebar, top bar, profile menu, mobile bottom
   nav + drawer. Loaded after styles-v3.css (which holds the original shell
   layout) and overrides it; the DOM these rules style is decorated by
   app/ui/nav.js.

   Breakpoints (must match nav.js):
     > 1024px          full deck; user can collapse it to the rail
     769px – 1024px    forced icon rail (no collapse toggle)
     ≤ 768px           no sidebar — fixed bottom nav + an off-canvas drawer
   ========================================================================== */

/* ============================================================ LOCAL TOKENS */
:root {
  /* Point the v3 shell layout at the design-system sizes. */
  --sidebar-w: var(--shell-sidebar-w);
  --sidebar-w-collapsed: var(--shell-sidebar-w-collapsed);
  --topbar-h: var(--shell-topbar-h);

  --sh-pill: #FFFFFF;                          /* the active item's raised surface */
  --sh-pill-line: var(--ds-deck-line);
  --sh-bar: #FBFCFD;                          /* top bar / bottom nav — solid, no blur */
  --sh-font: "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  --sh-mono: "IBM Plex Mono", ui-monospace, monospace;
  --sh-item-h: 36px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sh-pill: rgba(142, 153, 255, .10);
    --sh-pill-line: rgba(142, 153, 255, .18);
    --sh-bar: #0E111A;
  }
}
:root[data-theme="dark"] {
  --sh-pill: rgba(142, 153, 255, .10);
  --sh-pill-line: rgba(142, 153, 255, .18);
  --sh-bar: #0E111A;
}

/* The hidden attribute must win over every display rule in the shell. */
#shell-sidebar [hidden],
#shell-topbar [hidden],
#shell-topbar[hidden],
.shell-bottomnav [hidden],
.profile-menu[hidden] { display: none !important; }

/* ================================================================ SIDEBAR */
#shell-sidebar {
  width: var(--shell-sidebar-w);
  background:
    radial-gradient(140% 38% at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%),
    var(--ds-deck);
  border-right: 1px solid var(--ds-deck-line);
  color: var(--ds-deck-ink);
  font-family: var(--sh-font);
  transition:
    width var(--ds-dur-2) var(--ds-ease),
    transform var(--ds-dur-2) var(--ds-ease);
}
#shell-sidebar.is-rail { width: var(--shell-sidebar-w-collapsed); }

/* ---- brand ---- */
#shell-sidebar .sidebar-brand {
  height: var(--shell-topbar-h);
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--ds-deck-line);
  border-radius: 0;
}
#shell-sidebar .sidebar-brand-mark {
  width: 32px;
  min-width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 0;
  text-shadow: none;
  border-radius: 9px;
  box-shadow: 0 6px 16px -8px var(--ds-glow);
  transition: transform var(--ds-dur-3) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease);
}
#shell-sidebar .sidebar-brand-mark svg { display: block; }
#shell-sidebar .sidebar-brand:hover .sidebar-brand-mark {
  transform: rotate(-6deg) scale(1.04);
  box-shadow: 0 8px 20px -8px var(--ds-glow);
}
.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  white-space: nowrap;
  transition: opacity var(--ds-dur-1) var(--ds-ease) 70ms;
}
#shell-sidebar .sidebar-brand-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.1;
  color: var(--ds-deck-ink);
  opacity: 1;
}
.sidebar-brand-tag {
  font-family: var(--sh-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ds-deck-ink-3);
  line-height: 1.2;
}

/* ---- nav scroll area ---- */
#shell-sidebar .sidebar-nav {
  position: relative;               /* the indicator's positioning box */
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px 14px;
  scrollbar-color: var(--ds-deck-line) transparent;
}
#shell-sidebar .sidebar-nav > * { flex: none; }
#shell-sidebar .sidebar-nav::-webkit-scrollbar-thumb { background: var(--ds-deck-line); }

/* ---- group headings: mono kicker + trailing hairline; same height in the
        rail (hairline only), so no item moves when the deck collapses ---- */
#shell-sidebar .sidebar-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  margin: 8px 0 0;
  padding: 0 12px;
  font-family: var(--sh-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ds-deck-ink-3);
  opacity: 1;
  transition: color var(--ds-dur-1) var(--ds-ease);
}
#shell-sidebar .sidebar-nav > .sidebar-group:first-of-type { margin-top: 0; }
#shell-sidebar .sidebar-group::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ds-deck-line);
}
#shell-sidebar.is-rail .sidebar-group { color: transparent; }
#shell-sidebar.is-rail .sidebar-group::after {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
}

#shell-sidebar .sidebar-sep {
  height: 1px;
  margin: 10px 12px;
  background: var(--ds-deck-line);
}

/* ---- items ---- */
#shell-sidebar .sidebar-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: var(--sh-item-h);
  min-height: 0;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--ds-radius-2);
  background: transparent;
  font-family: var(--sh-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .005em;
  text-transform: none;
  color: var(--ds-deck-ink-2);
  cursor: pointer;
  transition:
    background-color var(--ds-dur-1) var(--ds-ease),
    color var(--ds-dur-1) var(--ds-ease),
    transform var(--ds-dur-1) var(--ds-ease);
}
#shell-sidebar .sidebar-item::before,
#shell-sidebar .sidebar-item::after { content: none !important; display: none !important; }
#shell-sidebar .sidebar-item:hover { background: var(--ds-deck-hover); color: var(--ds-deck-ink); }
#shell-sidebar .sidebar-item:active { transform: scale(.985); }

#shell-sidebar .sidebar-item-icon {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: 0;
  color: var(--ds-deck-ink-3);
  transition: color var(--ds-dur-1) var(--ds-ease), transform var(--ds-dur-2) var(--ds-ease-out), filter var(--ds-dur-2) var(--ds-ease);
}
#shell-sidebar .sidebar-item-icon svg { display: block; }
#shell-sidebar .sidebar-item:hover .sidebar-item-icon { color: var(--ds-deck-ink); transform: translateX(1px); }

#shell-sidebar .sidebar-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity var(--ds-dur-1) var(--ds-ease) 70ms;
}

/* Active: the indicator IS the surface; the item only sharpens its type. */
#shell-sidebar .sidebar-item.active,
#shell-sidebar .sidebar-item[aria-current="page"] {
  background: transparent;
  color: var(--ds-deck-ink);
  font-weight: 600;
}
#shell-sidebar .sidebar-item.active .sidebar-item-icon {
  color: var(--accent);
  filter: drop-shadow(0 0 6px var(--ds-glow));
}
#shell-sidebar .sidebar-item.active:hover { background: transparent; }
#shell-sidebar .sidebar-item.active:hover .sidebar-item-icon { transform: none; }

/* ---- sliding selection indicator ---- */
.sidebar-indicator {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 10px;
  right: 10px;
  height: var(--sh-item-h);
  border-radius: var(--ds-radius-2);
  background: var(--sh-pill);
  border: 1px solid var(--sh-pill-line);
  box-shadow: var(--ds-shadow-1), 0 8px 22px -14px var(--ds-glow);
  pointer-events: none;
  transition:
    transform var(--ds-dur-2) var(--ds-ease-out),
    height var(--ds-dur-2) var(--ds-ease-out),
    opacity var(--ds-dur-1) var(--ds-ease);
}
.sidebar-indicator::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  width: 3px;
  height: 16px;
  margin-top: -8px;
  border-radius: 0 3px 3px 0;
  background: var(--ds-accent-grad);
  box-shadow: 0 0 10px var(--ds-glow);
}
.sidebar-indicator.is-idle { opacity: 0; }
.sidebar-indicator.no-anim { transition: none !important; }
/* Before nav.js has measured anything, the active item carries the surface. */
#shell-sidebar .sidebar-indicator.is-idle ~ .sidebar-item.active { background: var(--sh-pill); box-shadow: var(--ds-shadow-1); }

/* ---- rail (collapsed desktop / tablet): labels fade, icons stay put ---- */
#shell-sidebar:not(.is-rail) .sidebar-brand-name,
#shell-sidebar:not(.is-rail) .sidebar-item-label,
#shell-sidebar:not(.is-rail) .sidebar-user-info,
#shell-sidebar:not(.is-rail) .sidebar-brand-text,
#shell-sidebar:not(.is-rail) .sidebar-resume-body,
#shell-sidebar:not(.is-rail) .sidebar-collapse-label { opacity: 1; pointer-events: auto; }
#shell-sidebar.is-rail .sidebar-brand-text,
#shell-sidebar.is-rail .sidebar-item-label,
#shell-sidebar.is-rail .sidebar-user-info,
#shell-sidebar.is-rail .sidebar-resume-body,
#shell-sidebar.is-rail .sidebar-collapse-label {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}

/* ---- rail tooltip (body-level, fixed; nav.js positions it) ---- */
.shell-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 400;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ds-deck-ink);
  color: var(--ds-deck);
  font: 600 12.5px/1.2 var(--sh-font);
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: var(--ds-shadow-2);
  pointer-events: none;
  opacity: 0;
  transform: translate(-4px, -50%);
  transition: opacity var(--ds-dur-1) var(--ds-ease), transform var(--ds-dur-1) var(--ds-ease);
}
.shell-tip::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: inherit;
  border-radius: 2px;
  transform: rotate(45deg);
}
.shell-tip.on { opacity: 1; transform: translate(0, -50%); }

/* ================================================================= FOOTER */
#shell-sidebar .sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid var(--ds-deck-line);
}

/* ---- continue / up-next card (real learner data only) ---- */
.sidebar-pulse { display: block; }
.sidebar-resume {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 7px;
  border: 1px solid var(--ds-deck-line);
  border-radius: var(--ds-radius-2);
  background: var(--sh-pill);
  color: var(--ds-deck-ink);
  font-family: var(--sh-font);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color var(--ds-dur-1) var(--ds-ease),
    box-shadow var(--ds-dur-2) var(--ds-ease),
    transform var(--ds-dur-2) var(--ds-ease-out),
    background-color var(--ds-dur-2) var(--ds-ease);
}
.sidebar-resume:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--ds-deck-line));
  box-shadow: var(--ds-shadow-2);
  transform: translateY(-1px);
}
.sidebar-resume:active { transform: translateY(0) scale(.99); }
.sidebar-resume-icon {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ds-accent-grad);
  color: #fff;
  box-shadow: 0 4px 12px -4px var(--ds-glow);
}
.sidebar-resume.is-next .sidebar-resume-icon {
  background: var(--ds-deck-2);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--ds-deck-line);
}
.sidebar-resume-icon svg { display: block; }
.sidebar-resume-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: opacity var(--ds-dur-1) var(--ds-ease) 70ms;
}
.sidebar-resume-kicker {
  font-family: var(--sh-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ds-deck-ink-3);
  white-space: nowrap;
}
.sidebar-resume-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ds-deck-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-resume-bar {
  position: relative;
  height: 3px;
  margin-top: 2px;
  border-radius: 3px;
  background: var(--ds-deck-line);
  overflow: hidden;
}
.sidebar-resume-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  border-radius: inherit;
  background: var(--ds-accent-grad);
}
#shell-sidebar.is-rail .sidebar-resume {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* ---- profile card ---- */
#shell-sidebar .sidebar-user {
  gap: 10px;
  padding: 6px;
  border-radius: var(--ds-radius-2);
}
.sidebar-avatar-wrap {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
}
#shell-sidebar .sidebar-user-avatar {
  width: 32px;
  height: 32px;
  background: var(--ds-accent-grad);
  color: #fff;
  font-family: var(--sh-font);
  font-size: 14px;
  font-weight: 700;
}
#shell-sidebar .sidebar-user-avatar.is-guest {
  background: var(--ds-deck-2);
  color: var(--ds-deck-ink-3);
  box-shadow: inset 0 0 0 1px var(--ds-deck-line);
}
.sidebar-user-avatar svg { display: block; }
/* Module-completion ring: only drawn when modulesDone > 0. */
.sidebar-avatar-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) var(--ring, 0%), var(--ds-deck-line) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  pointer-events: none;
}
#shell-sidebar .sidebar-user-info { gap: 2px; }
#shell-sidebar .sidebar-user-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ds-deck-ink);
}
#shell-sidebar .sidebar-user-meta {
  font-family: var(--sh-font);
  font-size: 12px;
  color: var(--ds-deck-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 3px;
}

.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sh-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ds-deck-ink-2);
  white-space: nowrap;
}
.stat-chip-icon { display: grid; place-items: center; color: var(--accent); }
.stat-chip-icon svg { display: block; }

/* ---- collapse toggle: a full deck row, not a stray square ---- */
#shell-sidebar #sidebar-collapse {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  height: 34px;
  min-height: 0;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--ds-radius-2);
  background: transparent;
  color: var(--ds-deck-ink-3);
  font-family: var(--sh-font);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color var(--ds-dur-1) var(--ds-ease), color var(--ds-dur-1) var(--ds-ease);
}
#shell-sidebar #sidebar-collapse:hover { background: var(--ds-deck-hover); color: var(--ds-deck-ink); }
.sidebar-collapse-icon {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  transition: transform var(--ds-dur-2) var(--ds-ease-out);
}
.sidebar-collapse-icon svg { display: block; transform: none !important; }
#shell-sidebar.collapsed .sidebar-collapse-icon { transform: rotate(180deg); }
.sidebar-collapse-label { transition: opacity var(--ds-dur-1) var(--ds-ease) 70ms; }

/* ================================================================ TOP BAR */
#shell-topbar {
  height: var(--shell-topbar-h);
  gap: 12px;
  padding: 0 20px;
  background: var(--sh-bar);
  border-bottom: 1px solid var(--ds-line);
  font-family: var(--sh-font);
}

#shell-topbar .topbar-hamburger {
  width: 36px;
  height: 36px;
  border-radius: var(--ds-radius-2);
  color: var(--ds-deck-ink-2);
  transition: background-color var(--ds-dur-1) var(--ds-ease), color var(--ds-dur-1) var(--ds-ease);
}
#shell-topbar .topbar-hamburger:hover { background: var(--ds-deck-hover); color: var(--ds-deck-ink); }
#shell-topbar .topbar-hamburger svg { display: block; }

/* ---- where am I: view tile + title / breadcrumb ---- */
#shell-topbar .topbar-title-area {
  position: relative;
  flex: 1;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.topbar-view-icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--ds-deck-active);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
}
.topbar-view-icon svg { display: block; animation: sh-pop var(--ds-dur-2) var(--ds-ease-out) both; }

#shell-topbar .topbar-page-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--ds-deck-ink);
  line-height: 1.2;
}
#shell-topbar .topbar-page-title.is-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#shell-topbar .topbar-breadcrumb {
  display: flex;
  min-width: 0;
  flex: 1;
  font-family: var(--sh-font);
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ds-deck-ink-3);
  overflow: hidden;
}
.topbar-breadcrumb .crumbs {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topbar-breadcrumb .crumb {
  display: flex;
  align-items: center;
  flex: none;
  min-width: 0;
  animation: sh-crumb var(--ds-dur-2) var(--ds-ease-out) both;
}
.topbar-breadcrumb .crumb:nth-child(2) { animation-delay: 40ms; }
.topbar-breadcrumb .crumb:nth-child(3) { animation-delay: 80ms; }
.topbar-breadcrumb .crumb:nth-child(n+4) { animation-delay: 120ms; }
.topbar-breadcrumb .crumb.is-current { flex: 1 1 auto; overflow: hidden; }
.topbar-breadcrumb .crumb-link {
  height: 30px;
  min-height: 0;
  padding: 0 7px;
  margin: 0 -1px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ds-deck-ink-2);
  font: 500 14px/1 var(--sh-font);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ds-dur-1) var(--ds-ease), color var(--ds-dur-1) var(--ds-ease);
}
.topbar-breadcrumb .crumb.is-root .crumb-link { padding-left: 0; margin-left: 0; }
.topbar-breadcrumb .crumb.is-root .crumb-link:hover { padding-left: 7px; margin-left: -7px; }
.topbar-breadcrumb .crumb-link:hover { background: var(--ds-deck-hover); color: var(--ds-deck-ink); }
.topbar-breadcrumb .crumb-text { color: var(--ds-deck-ink-2); white-space: nowrap; padding: 0 6px; }
.topbar-breadcrumb .crumb-sep {
  padding: 0 4px;
  color: var(--ds-deck-ink-3);
  opacity: .55;
  user-select: none;
}
.topbar-breadcrumb .crumb-label {
  flex: none;
  padding-left: 6px;
  font-weight: 700;
  color: var(--ds-deck-ink);
  white-space: nowrap;
}
.topbar-breadcrumb .crumb-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ds-deck-ink-3);
  font-weight: 400;
}
.topbar-breadcrumb .crumb-title::before { content: "·"; padding: 0 8px; opacity: .7; }

/* ---- right-hand cluster ---- */
#shell-topbar .topbar-controls { gap: 8px; }
.topbar-divider {
  flex: none;
  width: 1px;
  height: 22px;
  margin: 0 2px;
  background: var(--ds-line);
}

/* Status: only rendered when reviews are really due. */
.topbar-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  min-height: 0;
  padding: 0 11px 0 9px;
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  border-radius: var(--ds-radius-pill);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  color: var(--warn);
  font: 600 12.5px/1 var(--sh-font);
  white-space: nowrap;
  cursor: pointer;
  animation: sh-pop var(--ds-dur-2) var(--ds-ease-out) both;
  transition: background-color var(--ds-dur-1) var(--ds-ease), transform var(--ds-dur-1) var(--ds-ease);
}
.topbar-status:hover { background: color-mix(in srgb, var(--warn) 17%, transparent); }
.topbar-status:active { transform: scale(.97); }
.topbar-status svg { display: block; flex: none; }
.topbar-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.topbar-status-n { font-family: var(--sh-mono); font-weight: 600; }

/* Search: a faux input with the real shortcut. */
#shell-topbar .topbar-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 232px;
  height: 36px;
  min-height: 0;
  padding: 0 6px 0 11px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-2);
  background: var(--ds-deck);
  color: var(--ds-deck-ink-3);
  font: 400 13.5px/1 var(--sh-font);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition:
    border-color var(--ds-dur-1) var(--ds-ease),
    box-shadow var(--ds-dur-1) var(--ds-ease),
    color var(--ds-dur-1) var(--ds-ease),
    background-color var(--ds-dur-1) var(--ds-ease);
}
#shell-topbar .topbar-search:hover {
  border-color: var(--ds-line-strong);
  color: var(--ds-deck-ink-2);
  background: var(--surface);
  box-shadow: var(--ds-shadow-1);
}
#shell-topbar .topbar-search svg { display: block; flex: none; }
.topbar-search-label { flex: 1; text-align: left; white-space: nowrap; }
.topbar-kbd {
  flex: none;
  padding: 3px 6px;
  border: 1px solid var(--ds-line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ds-deck-ink-3);
  font: 500 10.5px/1 var(--sh-mono);
  letter-spacing: .02em;
}

/* Theme: a quiet segmented pill (styled wherever #theme lives). */
#theme.theme-toggle {
  height: 36px;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-2);
  background: var(--ds-deck);
}
#theme .theme-btn {
  width: 30px;
  height: 28px;
  min-height: 0;
  padding: 0;
  justify-content: center;
  border-radius: 7px;
  color: var(--ds-deck-ink-3);
  transition: background-color var(--ds-dur-1) var(--ds-ease), color var(--ds-dur-1) var(--ds-ease), box-shadow var(--ds-dur-1) var(--ds-ease);
}
#theme .theme-btn svg { display: block; }
#theme .theme-btn:hover { color: var(--ds-deck-ink); }
#theme .theme-btn[aria-pressed="true"] {
  background: var(--sh-pill);
  color: var(--accent);
  box-shadow: var(--ds-shadow-1), inset 0 0 0 1px var(--sh-pill-line);
}

/* Profile trigger. */
.topbar-profile { position: relative; flex: none; }
.topbar-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  min-height: 0;
  padding: 2px 6px 2px 2px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-pill);
  background: var(--surface);
  color: var(--ds-deck-ink-3);
  cursor: pointer;
  transition: border-color var(--ds-dur-1) var(--ds-ease), box-shadow var(--ds-dur-1) var(--ds-ease);
}
.topbar-profile-btn:hover,
.topbar-profile-btn[aria-expanded="true"] {
  border-color: var(--ds-line-strong);
  box-shadow: var(--ds-shadow-1);
}
.topbar-avatar,
.pm-avatar {
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ds-accent-grad);
  color: #fff;
  font: 700 13px/1 var(--sh-font);
}
.topbar-avatar { width: 30px; height: 30px; }
.topbar-avatar.is-guest,
.pm-avatar.is-guest {
  background: var(--ds-deck-2);
  color: var(--ds-deck-ink-3);
  box-shadow: inset 0 0 0 1px var(--ds-deck-line);
}
.topbar-avatar svg,
.pm-avatar svg { display: block; }
.topbar-profile-caret { display: grid; place-items: center; transition: transform var(--ds-dur-2) var(--ds-ease-out); }
.topbar-profile-caret svg { display: block; }
.topbar-profile-btn[aria-expanded="true"] .topbar-profile-caret { transform: rotate(180deg); }

/* ============================================================ PROFILE MENU */
.profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 5;
  width: 304px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - var(--shell-topbar-h) - var(--shell-bottomnav-h) - 24px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-3);
  background: var(--surface);
  color: var(--ds-deck-ink);
  box-shadow: var(--ds-shadow-pop);
  font-family: var(--sh-font);
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-4px) scale(.96);
  transition: opacity 180ms var(--ds-ease), transform 180ms var(--ds-ease-out);
}
.profile-menu.open { opacity: 1; transform: none; }

.pm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 8px;
}
.pm-avatar { width: 40px; height: 40px; font-size: 16px; }
.pm-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pm-name { font-size: 15px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-meta { font-size: 12.5px; line-height: 1.35; color: var(--ds-deck-ink-3); }

.pm-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 10px 10px;
}
.pm-stats .stat-chip {
  height: 24px;
  padding: 0 8px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-deck-2);
  box-shadow: inset 0 0 0 1px var(--ds-deck-line);
}

/* The moved #auth control, restyled to sit inside the menu. */
.pm-auth { padding: 0 10px 8px; }
.pm-auth .auth-control { display: block; }
.pm-auth .auth-chip { justify-content: space-between; }
.pm-auth .auth-name { display: none; }             /* the menu header already names the learner */
.pm-auth .auth-control > .btn,
.pm-auth .auth-chip .btn {
  font-family: var(--sh-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 9px;
}
.pm-auth .auth-control > .btn {
  width: 100%;
  min-height: 36px;
  justify-content: center;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 6px 16px -10px var(--ds-glow);
}
.pm-auth .auth-control > .btn:hover { filter: brightness(1.08); }
.pm-auth .auth-pop {
  position: static;
  width: auto;
  padding: 4px 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pm-sep { height: 1px; margin: 4px 6px; background: var(--ds-line); }
.pm-list { display: flex; flex-direction: column; gap: 1px; padding: 2px 0; }
.profile-menu .pm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 38px;
  min-height: 0;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ds-deck-ink-2);
  font: 400 14px/1 var(--sh-font);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--ds-dur-1) var(--ds-ease), color var(--ds-dur-1) var(--ds-ease);
}
.profile-menu .pm-item svg { display: block; flex: none; color: var(--ds-deck-ink-3); transition: color var(--ds-dur-1) var(--ds-ease); }
.profile-menu .pm-item:hover { background: var(--ds-deck-hover); color: var(--ds-deck-ink); }
.profile-menu .pm-item:hover svg { color: var(--accent); }

.pm-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 6px;
  margin-top: 4px;
  border-top: 1px solid var(--ds-line);
}
.pm-theme-label { font-size: 13.5px; color: var(--ds-deck-ink-2); }

/* ============================================================ BOTTOM NAV */
.shell-bottomnav { display: none; }

/* ================================================================ FOCUS */
#shell-sidebar :is(button, a):focus-visible,
#shell-topbar :is(button, a):focus-visible,
.shell-bottomnav button:focus-visible,
.profile-menu :is(button, a):focus-visible {
  outline: none;
  box-shadow: var(--ds-focus);
}
#theme .theme-btn[aria-pressed="true"]:focus-visible { box-shadow: var(--ds-focus); }

/* =============================================================== KEYFRAMES */
@keyframes sh-crumb {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sh-pop {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================ RESPONSIVE */

/* Laptop: a tighter search field. */
@media (max-width: 1280px) {
  #shell-topbar .topbar-search { width: 188px; }
}

/* Tablet + mobile: the collapse toggle has no job here. */
@media (max-width: 1024px) {
  #shell-sidebar #sidebar-collapse { display: none; }
  #shell-topbar { padding: 0 16px; }
  #shell-topbar .topbar-search { width: 164px; }
}

/* Tablet: always the icon rail (nav.js also adds .is-rail here). */
@media (min-width: 769px) and (max-width: 1024px) {
  #shell-sidebar { width: var(--shell-sidebar-w-collapsed); }
}

/* Small tablet: search collapses to its icon. */
@media (max-width: 900px) {
  #shell-topbar .topbar-search { width: 36px; padding: 0; justify-content: center; }
  #shell-topbar .topbar-search-label,
  #shell-topbar .topbar-kbd { display: none; }
}

/* Mobile: no sidebar — bottom nav + drawer. */
@media (max-width: 768px) {
  :root { --shell-bottomnav-h: 64px; }

  /* The drawer (the same #shell-sidebar, off-canvas). */
  #shell-sidebar {
    width: min(300px, 86vw) !important;
    padding-bottom: calc(var(--shell-bottomnav-h) + env(safe-area-inset-bottom, 0px));
    visibility: hidden;
    box-shadow: none;
    transition:
      transform 260ms var(--ds-ease-out),
      box-shadow 260ms var(--ds-ease),
      visibility 0s linear 260ms;
  }
  #shell-sidebar.drawer-open {
    visibility: visible;
    box-shadow: var(--ds-shadow-pop);
    transition:
      transform 260ms var(--ds-ease-out),
      box-shadow 260ms var(--ds-ease),
      visibility 0s;
  }
  #shell-sidebar .sidebar-group,
  #shell-sidebar .sidebar-brand-text,
  #shell-sidebar .sidebar-item-label,
  #shell-sidebar .sidebar-user-info,
  #shell-sidebar .sidebar-resume-body { opacity: 1 !important; pointer-events: auto !important; }

  .shell-drawer-bg {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: color-mix(in srgb, var(--ground) 55%, transparent);
    transition: opacity var(--ds-dur-2) var(--ds-ease), visibility 0s linear var(--ds-dur-2);
  }
  .shell-drawer-bg.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--ds-dur-2) var(--ds-ease), visibility 0s;
  }

  /* Top bar: the bottom nav's "More" opens the drawer, so no hamburger. */
  #shell-topbar { padding: 0 12px; gap: 8px; }
  #shell-topbar .topbar-hamburger { display: none; }
  #shell-topbar .topbar-controls { gap: 6px; }
  .topbar-view-icon { width: 30px; height: 30px; }
  #shell-topbar .topbar-page-title { font-size: 15px; }
  .topbar-divider,
  .topbar-profile-caret,
  .topbar-status-label { display: none; }
  .topbar-status { padding: 0 9px; }
  .topbar-profile-btn { padding: 2px; }
  /* Breadcrumb: only the last two crumbs, no lesson-title suffix. */
  .topbar-breadcrumb .crumb:not(:nth-last-child(-n+2)) { display: none; }
  .topbar-breadcrumb .crumb-title { display: none; }
  .topbar-breadcrumb .crumb-link { padding: 0 6px; }

  .profile-menu { position: fixed; top: calc(var(--shell-topbar-h) + 8px); right: 12px; }

  /* Content clears the bottom nav. */
  body.shell-active #shell-content .app {
    padding-bottom: calc(40px + var(--shell-bottomnav-h) + env(safe-area-inset-bottom, 0px));
  }

  .shell-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: calc(var(--shell-bottomnav-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    background: var(--sh-bar);
    border-top: 1px solid var(--ds-line);
    font-family: var(--sh-font);
  }
  .shell-bottomnav .bn-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    height: var(--shell-bottomnav-h);
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ds-deck-ink-3);
    font: 600 11px/1 var(--sh-font);
    letter-spacing: .01em;
    text-transform: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--ds-dur-1) var(--ds-ease);
  }
  .shell-bottomnav .bn-item::after { content: none !important; display: none !important; }
  .shell-bottomnav .bn-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 28px;
    height: 3px;
    margin-left: -14px;
    border-radius: 0 0 3px 3px;
    background: var(--ds-accent-grad);
    box-shadow: 0 0 10px var(--ds-glow);
    transform: scaleX(0);
    transition: transform var(--ds-dur-2) var(--ds-ease-out);
  }
  .shell-bottomnav .bn-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 28px;
    border-radius: var(--ds-radius-pill);
    transition: background-color var(--ds-dur-2) var(--ds-ease), transform var(--ds-dur-1) var(--ds-ease);
  }
  .shell-bottomnav .bn-icon svg { display: block; }
  .shell-bottomnav .bn-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shell-bottomnav .bn-item:active .bn-icon { transform: scale(.92); }
  .shell-bottomnav .bn-item.active,
  .shell-bottomnav .bn-item.is-open { color: var(--ds-deck-ink); }
  .shell-bottomnav .bn-item.active::before { transform: scaleX(1); }
  .shell-bottomnav .bn-item.active .bn-icon,
  .shell-bottomnav .bn-item.is-open .bn-icon { background: var(--ds-deck-active); color: var(--accent); }
  .shell-bottomnav .bn-badge {
    position: absolute;
    top: -3px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: var(--ds-radius-pill);
    background: var(--warn);
    color: var(--surface);
    font: 700 9.5px/1 var(--sh-mono);
    box-shadow: 0 0 0 2px var(--surface);
  }
}

/* Touch screens: drawer rows get a full 44px target. */
@media (max-width: 768px) and (pointer: coarse) {
  #shell-sidebar .sidebar-item { height: 44px; }
  .sidebar-indicator { height: 44px; }
}

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  #shell-sidebar,
  #shell-sidebar *,
  #shell-topbar *,
  .shell-tip,
  .shell-drawer-bg,
  .shell-bottomnav *,
  .profile-menu,
  .profile-menu * { transition: none !important; animation: none !important; }
}
[data-reduced-motion="true"] #shell-sidebar,
[data-reduced-motion="true"] #shell-sidebar *,
[data-reduced-motion="true"] #shell-topbar *,
[data-reduced-motion="true"] .shell-tip,
[data-reduced-motion="true"] .shell-drawer-bg,
[data-reduced-motion="true"] .shell-bottomnav *,
[data-reduced-motion="true"] .profile-menu,
[data-reduced-motion="true"] .profile-menu * { transition: none !important; animation: none !important; }

/* ================================================================== PRINT */
@media print {
  .shell-bottomnav,
  .shell-tip,
  .profile-menu { display: none !important; }
}