/* RUN MODE — practising is full screen (practice/run-mode.js).

   Seth, 2026-10-11, the whole app: once practice starts "the top bar will
   disappear", the timer "should be the size of the current timer for the
   deep link version" (styles/focus.css), and "at the top there will be a
   progress bar going from the top left of the screen all the way to the
   far right" with the count "on the node of the bar itself". The timer
   "should again only show up once you start doing the practice", and "the
   tutor bubble should only show up for the coding ... whenever you go into
   the practice". Token-only colours (styles/watch.py). */

/* ---- THE BAR'S BOX STAYS, ITS CONTENTS GO -----------------------------------
   As focus.css does: #practice-notch is a direct child of the sticky
   `.topbar`, so the box stays (a short band the floating timer sits over)
   and only the tabs, pill and account button go. The concept pill (the old per-concept bar)
   lived in the left cell, so it goes with it. */
html.dd-run {
  --dd-topbar-h: 30px;
}
html.dd-run .topbar {
  background: var(--bg);
  border-bottom: 0;
}
html.dd-run .topbar-side--right,
html.dd-run .topbar-mid,
html.dd-run .topbar-side--left,
html.dd-run .nav-scrim,
html.dd-run .nav-drawer,
html.dd-run .footer {
  display: none !important;
}

/* ---- THE TIMER ---------------------------------------------------------------
   Its whole look (floating box, Pause button, 34px clock) and the rule that
   hides it outside run mode live in styles/practice/notch-menu.css, the one
   place that defines it (2026-11-02). Only run-mode placement stays here. */
/* The floating row sits over the page, so the page starts below it. */
html.dd-run #page-concept-chat,
html.dd-run #page-practice {
  padding-top: 56px;
}
/* AN ARENA NOTEBOOK (practice/run-mode.js `dd-arena-run`): NO BAND AT ALL
   (Seth, 2026-10-17: "it needs to be just floating ... It's in its own thing
   that is like a bar across the top, which is very ugly"). The bar keeps its
   sticky box — it anchors the notch — at zero height and no paint, so the
   row floats over the notebook and the contents pane (it reads
   `--dd-topbar-h`) runs to the top. The notebook's sticky toolbar is gone
   too: its buttons are the row's Exit and ⚙ (styles/practice/
   arena-notebook-run.css). */
html.dd-arena-run {
  --dd-topbar-h: 0px;
}
html.dd-arena-run .topbar {
  background: transparent;
  border: 0;
  padding: 0;
}
/* Its idle clock reads `--:--` and there is nothing to pause until an
   exercise runs, so the square is not offered as a dead control. */
html.dd-arena-run .practice-notch-stop:disabled {
  display: none;
}

/* ---- THE HELP BUBBLE: EVERY SCREEN -------------------------------------------
   Was coding practice only (2026-10-11); Seth, 2026-10-12: a "?" help button
   bottom-right that helps learners at once, so it shows everywhere
   (feedback-widget/chatwoot_widget.js). */

/* ---- THE PROGRESS BOX: styles/run-bar.css -------------------------------- */

/* ---- THE HOME: THE BARS, THEN PRACTICE -------------------------------------
   As /step3's: no course header, no choose-a-concept list, no time
   multiplier, always AI mode. `.has-run` = run-mode.js painted its buttons
   (signed in, board read), so a guest still has "Practice with AI". The
   original button stays in the page as the drills' proxy target.
   The choose-a-concept list comes back with Settings → "Choose what to
   study next" (Seth, 2026-10-14; practice/settings-page.js sets the class). */
#learner-xp,
html:not(.dd-choose-concept) #practice-session-setup .concept-choice,
#practice-session-setup .session-clock-scale,
#practice-session-setup .home-choice.has-run .session-go {
  display: none !important;
}
#practice-session-setup,
#practice-session-setup:has(.home-graphs.is-empty) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}
#practice-session-setup .home-choice {
  border-left: 0;
  justify-content: center;
  order: 0;
  padding-top: 4px;
}
#practice-session-setup .home-main {
  border-top: 0;
  padding-bottom: 8px;
}
/* CHOOSING (Settings → "Choose what to study next", Seth 2026-10-14): the
   pre-redesign two columns come back while the list has rows. Left is the
   home as it is now (your group's charts, or your own courses' charts and
   their Solve buttons); right is the list. A phone keeps one column.
   🔴 Never on a one-course page (/arena-practice, /focus, isolated Study):
   those hide the list with display:none, not [hidden], so the :has() still
   matched and the card grew an empty right column (Seth, 2026-10-17). */
@media (min-width: 861px) {
  html.dd-choose-concept:not(.dd-course-only):not(.dd-focus):not(.dd-isolated-study) #practice-session-setup:has(.concept-choice:not([hidden])):not(:has(.home-graphs.is-empty)) {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    max-width: 1120px;
  }
  html.dd-choose-concept:not(.dd-course-only):not(.dd-focus):not(.dd-isolated-study) #practice-session-setup:has(.concept-choice:not([hidden])):not(:has(.home-graphs.is-empty)) .home-choice {
    border-left: 1px solid var(--home-rule);
    justify-content: flex-start;
    padding-top: 28px;
  }
}
.run-go {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 auto;
  max-width: 420px;
  width: 100%;
}
.run-go[hidden] {
  display: none;
}
.run-go-btn {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
}
.run-go-btn.primary .run-go-word {
  font-size: 20px;
  font-weight: 750;
}
.run-go-btn.ghost .run-go-word {
  font-size: 16px;
  font-weight: 650;
}
.run-go-sub {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.85;
}
.run-go-done {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  text-align: center;
}

/* /step3's own Practice button gives way to these (its sign-in note stays). */
#practice-session-setup .home-choice.has-run .focus-practice-btns,
#practice-session-setup .home-choice.has-run .focus-title {
  display: none !important;
}

/* ---- THE BAR WHILE NOT PRACTISING: FOUR TABS, NOTHING ELSE ------------------
   Seth, 2026-10-11: "remove the Account Settings dropdown", "the XP and
   leveling system does not exist any more"; the tabs are Practice, Courses,
   (Notes), Groups, Settings (practice/home-tabs.js), on every page. */
html:not(.dd-run):not(.dd-focus) .topbar-mid > .home-tabs {
  display: flex;
}
.dd-level-wrap,
#topbar-account,
#account-menu,
body.dd-basic-mode .nav-toggle {
  display: none !important;
}
@media (max-width: 560px) {
  .home-tab {
    min-width: 0;
    padding: 8px 10px;
  }
}