/* Course pages retain the practice clock, with no route to other subjects. */
html.dd-course-only { --dd-topbar-h: 6px; }
html.dd-course-only .topbar { background: var(--bg); border-bottom: 0; }
html.dd-course-only .topbar-side,
html.dd-course-only .topbar-mid,
html.dd-course-only .nav-drawer,
html.dd-course-only .nav-scrim,
html.dd-course-only .footer,
html.dd-course-only .home-tabs,
html.dd-course-only #practice-session-setup .home-choice > :not(.course-practice-go),
html.dd-course-only #learner-survey,
html.dd-course-only .practice-notch-menu,
html.dd-course-only .practice-notch-btn {
  display: none !important;
}
/* Shown before app.js picks the tab, so the card course-route.js mounts early
   is on screen while the scripts are still downloading. A course page only
   ever lands on Practice (app.js switchTab), so this never shows a wrong page. */
html.dd-course-only:not(.dd-course-up) #page-practice.hidden { display: flex; }
html.dd-course-only #practice-session-setup {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}
html.dd-course-only #practice-session-setup .home-choice {
  border: 0;
  display: flex;
  justify-content: center;
}
/* The home's goal graph stays (Seth, 2026-10-17): problems a day toward
   your daily target, drag to set, the board practice/step3-board.js paints
   on the full Home, here asked for this course alone (`only`). Over the
   card, as the one-column Home has it; nothing until it has a chart (a
   guest never does). Its own Solve button goes: the card's Practice is it. */
html.dd-course-only #practice-session-setup .home-main:not(:has(.s3-member)) { display: none; }
html.dd-course-only #practice-session-setup:has(.s3-member) .course-practice-go { padding-top: 12px; }
html.dd-course-only .s3-go { display: none; }
.course-practice-go { display: grid; gap: 20px; text-align: center; padding: 48px 16px; }
/* The course's title heads the card, over the goal graph, not under it (Seth,
   2026-10-25, "looks ugly as hell"): course-route.js and, on a Study course
   page, focus-route.js put it first in #practice-session-setup. */
#practice-session-setup > .course-page-title {
  color: var(--text);
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere;
  padding: 26px 30px 0;   /* lines up with .home-main's graph under it */
}
@media (max-width: 860px) {
  #practice-session-setup > .course-page-title { font-size: 22px; padding: 20px 18px 0; }
}
.course-practice-go button { min-height: 50px; min-width: 220px; font-size: 16px; }
.course-practice-go p:empty { display: none; }

.course-catalog-card-title a { color: inherit; text-decoration: none; }
.course-catalog-card-title a:hover { text-decoration: underline; }
#course-link-status {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  padding: 12px 20px;
  border: 1px solid var(--muted);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}
/* A Study course page keeps the goal graph too (Seth, 2026-10-18: "It also
   doesn't have ... how much you've done per day"): step3-board.js reads the
   home board for this course alone, as on a drill course page above. */
html.dd-isolated-study #practice-session-setup .home-main:not(:has(.s3-member)),
html.dd-isolated-study #practice-session-setup .home-choice > :not(.focus-go) { display: none !important; }
html.dd-isolated-study #practice-session-setup .home-main:has(.s3-member),
html.dd-isolated-study #practice-session-setup .home-main:has(.s3-member) .home-graphs { display: block !important; }
html.dd-isolated-study .s3-go { display: none; }
html.dd-isolated-study #practice-session-setup > .focus-title { display: block !important; }
html.dd-isolated-study #practice-session-setup .home-choice .focus-practice-btns { display: flex !important; }

/* ---- TWO TABS: Practice | AI Tutor --------------------------------------
   Seth, 2026-10-18: every course page "has two tabs: The AI tutor tab and the
   practice tab. that way they can learn the content." practice/home-tabs.js's
   switch, its other tabs gone; the whole bar only while not practising
   (run mode is full screen) and only when the AI Tutor is open to this
   learner here (ai-tutor.js un-hides its tab), so a lone "Practice" never
   shows. html.dd-course-tabs: course-route.js, and focus-route.js for a
   /practice-course-<id> Study page (not /step3). */
html.dd-course-tabs:not(.dd-run):has(.home-tab[data-home-tab="ai-tutor"]:not([hidden])) {
  --dd-topbar-h: 44px;
}
html.dd-course-tabs:not(.dd-run) .topbar-mid:has(.home-tab[data-home-tab="ai-tutor"]:not([hidden])),
html.dd-course-tabs:not(.dd-run) .topbar-mid > .home-tabs:has(.home-tab[data-home-tab="ai-tutor"]:not([hidden])) {
  display: flex !important;
}
html.dd-course-tabs .home-tab:not([data-home-tab="practice"], [data-home-tab="ai-tutor"]) {
  display: none !important;
}

/* ---- ARENA's course page: Practice | Notebook ------------------------------
   Seth, 2026-10-26, /arena-practice: "the practice tab, and the notebook tab
   and that's it", the tutor a bubble bottom-left in a drill and in a notebook
   (Chatwoot, feedback-widget/tutor_bubble.js), the "?" help still bottom-right.
   html.dd-course-arena: course-route.js. The Notebook tab is home-tabs.js's
   ARENA Notebooks, always shown here; the AI Tutor tab goes. */
html.dd-course-arena:not(.dd-run) { --dd-topbar-h: 44px; }
html.dd-course-arena:not(.dd-run) .topbar-mid,
html.dd-course-arena:not(.dd-run) .topbar-mid > .home-tabs {
  display: flex !important;
}
html.dd-course-tabs.dd-course-arena .home-tab[data-home-tab="ai-tutor"] { display: none !important; }
html.dd-course-tabs.dd-course-arena .home-tab[data-home-tab="arena-notebooks"]:not([hidden]) {
  display: inline-block !important;
}

/* ---- CODE on a course with paper-replication notebooks ----------------------
   Seth, 2026-10-27, ai-cells-cancer: "be able to replicate the papers oneself".
   paper-code/paper-code.js un-hides the Code tab (home-tabs.js) when
   paper-code/<course>/manifest.json exists and the course is open to this
   account; the bar shows whenever it does. */
html.dd-course-tabs:not(.dd-run):has(.home-tab[data-home-tab="paper-code"]:not([hidden])) {
  --dd-topbar-h: 44px;
}
html.dd-course-tabs:not(.dd-run) .topbar-mid:has(.home-tab[data-home-tab="paper-code"]:not([hidden])),
html.dd-course-tabs:not(.dd-run) .topbar-mid > .home-tabs:has(.home-tab[data-home-tab="paper-code"]:not([hidden])) {
  display: flex !important;
}
html.dd-course-tabs .home-tab[data-home-tab="paper-code"]:not([hidden]) {
  display: inline-block !important;
}