/* A ONE-COURSE page (/usmle-step-3, "USMLE Step 3 Practice"). focus-route.js
   stamps <html class="dd-focus"> before first paint and builds the button.

   Seth, 2026-10-06: "they will not see the top bar anymore, but they will see
   the timer notch at the top"; the Learner Home shows "on the left their XP
   for this week" and, instead of choosing a concept, one button that "will
   take them to the practice". */

/* ---- THE BAR: GONE, EXCEPT THE NOTCH -------------------------------------
   As solo-route.css does for its timed routes: #practice-notch is a DIRECT
   child of the sticky `.topbar` and hangs off its bottom edge, so the bar's
   box stays (positioned + sticky, painted in the page colour) and only its
   contents go. A thin band, so the notch sits at the top of the window. */
html.dd-focus {
  --dd-topbar-h: 6px;
}
html.dd-focus .topbar {
  background: var(--bg);
  border-bottom: 0;
}
html.dd-focus .topbar-side--right,
html.dd-focus .topbar-mid,
html.dd-focus .topbar-side--left > :not(.dd-level-wrap),
html.dd-focus .nav-scrim,
html.dd-focus .nav-drawer,
html.dd-focus .footer {
  display: none !important;
}

/* ---- THE LEVEL PILL, TOP LEFT ----------------------------------------------
   Seth, 2026-10-11: "it still displays you leveling up in the top left for
   the step3 deeplink" (xp-reward.js; the "+N XP" pop hangs under it). The
   bar's left cell keeps the pill alone (the hamburger goes, above), lifted
   out of the 6px band to sit where the "← Home" button was. */
html.dd-focus .topbar-side--left {
  left: 14px;
  position: absolute;
  top: 10px;
  z-index: 60;
}
/* It stays put while the page scrolls under it: solid, so it reads over a graph. */
html.dd-focus .dd-level {
  background: var(--surface);
}

/* ---- THE HOME: THE WEEK'S XP, AND ONE BUTTON ------------------------------
   Left keeps "N XP gained this week" and the Monday–Sunday bars; the drill
   course's name and %, the daily target and the everyone-board go. Right is
   focus-route.js's title + Practice; the drill home's own button, the
   concept list and the time multiplier go. The Practice | Courses switch
   (practice/home-tabs.js) goes too: this page has one course and no other. */
html.dd-focus .xp-course,
html.dd-focus .xp-panel-body .xp-goal,
html.dd-focus .xp-board,
html.dd-focus #practice-session-setup .session-go,
html.dd-focus #practice-session-setup .concept-choice,
html.dd-focus #practice-session-setup .session-clock-scale,
html.dd-focus #learner-survey,
html.dd-focus .home-tabs {
  display: none !important;
}
html.dd-focus #practice-session-setup .home-choice {
  justify-content: center;
}

/* ---- ONE COLUMN: THE BARS, THEN PRACTICE ----------------------------------
   Seth, 2026-10-10 (/step3, for Paula): "it should just have the bar chart
   above and then below the bar chart it has the practice button, and that's
   literally the only thing it displays" and "it should just be blank at the
   top". So no page title over the button, and the stack is bars first at
   every width (home.css puts the button first on a phone; not here). The
   day readout under the bars goes too: each bar still says its day on hover. */
html.dd-focus #practice-session-setup,
html.dd-focus #practice-session-setup:has(.home-graphs.is-empty) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}
html.dd-focus #practice-session-setup .home-choice {
  border-left: 0;
  order: 0;
  padding-top: 4px;
}
html.dd-focus #practice-session-setup .home-main {
  border-top: 0;
  padding-bottom: 8px;
}
html.dd-focus .focus-title,
html.dd-focus .xp-readout {
  display: none !important;
}

.focus-go {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.focus-title {
  color: var(--text);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}
/* The page's one Practice button (/step3: the qbank and the CCS cases in
   one plan, Seth 2026-10-11). */
.focus-practice-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.focus-practice-btns > .focus-practice-btn { flex: 1 1 220px; }
.focus-practice-btn {
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  min-height: 50px;
  width: 100%;
}
.focus-practice-btn:disabled {
  cursor: default;
  opacity: 0.55;
}
.focus-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}
.focus-note:empty { display: none; }
/* "Switch course": only for an account none of this page's courses is on
   for (focus-route.js `away`; Seth 2026-11-02, Ethan stuck on Step 3). */
.focus-away {
  align-self: flex-start;
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.focus-away:hover { color: var(--text); }
.focus-away[hidden] { display: none; }

/* ---- NO WAY BACK BUTTON ----------------------------------------------------
   "← Home" is gone (Seth, 2026-10-11: "get rid of the home button in the top
   left of the screen"): Pause on the notch pauses and exits to the home. */

/* ---- THE TIMER ---------------------------------------------------------------
   Seth, 2026-10-10, this page first: a much bigger clock and a Pause that says
   Pause, no ⋯. That became the app's one timer look; it lives in
   styles/practice/notch-menu.css (2026-11-02). On the home nothing is
   running, so there is no timer: it shows once Practice opens a question. */
html.dd-focus body:not(:has(#page-concept-chat:not(.hidden))) .practice-notch {
  display: none;
}
/* The timer floats over the page, so the page starts below it. */
html.dd-focus #page-concept-chat {
  padding-top: 64px;
}
/* A phone: the page starts a little higher. (The smaller phone timer that
   stood here never drew: run-mode.css, loaded later, overrode it.) */
@media (max-width: 520px) {
  html.dd-focus #page-concept-chat {
    padding-top: 52px;
  }
}

/* ---- NO FEEDBACK BUTTON -----------------------------------------------------
   "It also shouldn't have the feedback button": the lesson's feedback dock.
   The chat bubble never boots here (feedback-widget/chatwoot_widget.js). */
html.dd-focus #lesson-feedback-dock {
  display: none !important;
}