/* ───────────────────────────────────────────────────────────────────
       STUDENT SIDEBAR  (Canvas-style left rail for the student portal)
       Always visible while in any student-portal page (lessons / reader /
       profile / drill / practice / class / inbox). Hidden on public
       homepage and admin. On mobile, hidden entirely for v1; bottom-tab
       layout will land in a follow-up if needed.
       ─────────────────────────────────────────────────────────────────── */
    :root { --student-sidebar-w: 84px; }

    .student-sidebar {
      display: none;
      position: fixed;
      left: 0; top: 0; bottom: 0;
      width: var(--student-sidebar-w);
      background: var(--bg-tint);
      border-right: 1px solid var(--line);
      flex-direction: column;
      align-items: stretch;
      z-index: 90;
      font-family: var(--font-body);
    }
    body.has-sidebar .student-sidebar { display: flex; }
    /* Push the active student shell to leave room for the sidebar */
    body.has-sidebar .course-shell.is-active,
    body.has-sidebar .reader-shell.is-active,
    body.has-sidebar .stub-shell.is-active {
      left: var(--student-sidebar-w);
    }

    .sidebar-logo {
      display: flex; align-items: center; justify-content: center;
      height: 60px;
      border-bottom: 1px solid var(--line-soft);
      padding: .6rem;
      text-decoration: none;
    }
    .sidebar-logo img {
      max-height: 28px; max-width: 100%;
      opacity: .92;
    }

    .sidebar-items {
      list-style: none; margin: 0;
      padding: .65rem .55rem;
      flex: 1;
      overflow-y: auto;
      display: flex; flex-direction: column;
      gap: .15rem;
    }
    .sidebar-item {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: .35rem;
      padding: .8rem .35rem;
      border-radius: 10px;
      color: var(--ink-mute);
      text-decoration: none;
      font-size: .68rem;
      font-weight: 500;
      letter-spacing: .02em;
      position: relative;
      transition: color .15s, background .15s;
      cursor: pointer;
      text-align: center;
      line-height: 1.1;
    }
    .sidebar-item:hover { color: var(--ink); background: var(--line-soft); }
    .sidebar-item.is-active {
      color: var(--gold);
      background: rgba(184,146,58,.10);
      font-weight: 600;
    }
    .sidebar-item.is-active::before {
      content: '';
      position: absolute;
      left: -.55rem;
      top: 28%; bottom: 28%;
      width: 3px;
      background: var(--gold);
      border-radius: 0 3px 3px 0;
    }
    .sidebar-item svg { width: 22px; height: 22px; flex-shrink: 0; }
    .sidebar-item-label {
      font-size: .68rem;
      letter-spacing: .02em;
      max-width: 100%;
      white-space: nowrap;
    }

    .sidebar-account {
      border-top: 1px solid var(--line-soft);
      padding: .8rem .55rem;
      background: none; border: none;
      font-family: var(--font-body);
      cursor: pointer;
      color: var(--ink-mute);
      display: flex; flex-direction: column;
      align-items: center; gap: .3rem;
      font-size: .68rem;
      font-weight: 500;
      letter-spacing: .02em;
      transition: color .15s, background .15s;
      width: calc(100% - 1.1rem);
      margin: 0 .55rem .55rem;
      border-radius: 10px;
    }
    .sidebar-account:hover { color: var(--ink); background: var(--line-soft); }
    .sidebar-account svg { width: 20px; height: 20px; }

    /* On mobile, hide sidebar entirely for v1 */
    @media (max-width: 640px) {
      body.has-sidebar .student-sidebar { display: none; }
      body.has-sidebar .course-shell.is-active,
      body.has-sidebar .reader-shell.is-active,
      body.has-sidebar .stub-shell.is-active { left: 0; }
    }

    /* ───────────────────────────────────────────────────────────────────
       STUB SHELL (Coming-soon pages — Profile, Drill, Practice, Class, Inbox)
       Reuses the course-shell visuals but with stub content.
       ─────────────────────────────────────────────────────────────────── */
    .stub-shell {
      display: none;
      position: fixed; inset: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font-body);
      flex-direction: column;
      z-index: 75;
      overflow: hidden;
    }
    .stub-shell.is-active { display: flex; }

    /* Cosmetic top header — hidden across portal pages (lessons /
       drill / practice / profile / class). Page identity is
       sufficiently established by the left-rail nav + the page's own
       h1. The reader-header stays — it's functional (back / bookmark
       / edit / prev-next). */
    .stub-header {
      display: none;
    }
    .stub-header-title {
      flex: 1; min-width: 0;
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 500;
      color: var(--ink);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .stub-body {
      flex: 1; min-height: 0;
      overflow-y: auto;
      padding: 3rem 2rem;
      display: flex;
      align-items: center; justify-content: center;
    }
    .stub-card {
      max-width: 480px;
      width: 100%;
      text-align: center;
      padding: 2.4rem 2rem;
      background: var(--bg-tint);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
    }
    .stub-icon {
      width: 64px; height: 64px;
      margin: 0 auto 1rem;
      border-radius: 50%;
      background: rgba(184,146,58,.12);
      color: var(--gold);
      display: flex; align-items: center; justify-content: center;
    }
    .stub-icon svg { width: 28px; height: 28px; }
    .stub-eyebrow {
      font-size: .7rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--gold);
      font-weight: 700;
      margin-bottom: .5rem;
    }
    .stub-title {
      font-family: var(--font-display);
      font-size: 1.7rem;
      color: var(--ink);
      margin: 0 0 .8rem;
      font-weight: 500;
      line-height: 1.2;
    }
    .stub-desc {
      font-size: .94rem;
      color: var(--ink-soft);
      line-height: 1.55;
      margin: 0 0 1.4rem;
    }