/* Colab edition — the practice page as a tutor rail beside the notebook.

   Only ever active under `html.dd-colab-edition`, a class practice/colab_mode.js
   adds when the page is served from delta-drills-colab.vercel.app. On the normal
   deploy this file is inert, which is why it can be blunt.

   WHY THE PAGE LOSES MOST OF ITSELF HERE
     On this deploy the problem is in the notebook: the prompt, the starter code,
     the worked example and the place you type are all already on screen, in the
     tab this panel sits beside. Rendering a second copy of them in a 400px rail
     is not redundancy, it is two sources of truth for what the question says,
     and it reads as "the fork didn't apply". What is left is the part the
     notebook does NOT have — which question you are on, what concept it is
     testing, how hard it is, how you are doing, and the session controls.

   `html.dd-no-notebook` IS THE ESCAPE HATCH — 424 of 499 questions have a
   published notebook cell; the rest have nowhere to route. ui.js sets that class
   for them and the full page comes back, because a rail with no prompt, no
   editor and no notebook is a dead end. Every hiding rule below is written
   `:not(.dd-no-notebook)` for that reason — do not "simplify" it away. */

/* ---- what the notebook already shows ----------------------------------- */

/* `body:not(.lesson-mode)` is load-bearing, not defensive. The lesson gate —
   the screen that teaches a concept before its first drill — renders ITSELF
   into #question-text (practice/lessons.js `showPage`), so hiding that element
   unconditionally leaves the rail completely blank with a Continue button
   nobody can see. Caught in verification: the gate came up and the panel was
   empty apart from the concept strip. */
html.dd-colab-edition:not(.dd-no-notebook) body:not(.lesson-mode) #question-text,
html.dd-colab-edition:not(.dd-no-notebook) #question-imports,
html.dd-colab-edition:not(.dd-no-notebook) #question-visual {
  display: none;
}

/* ---- the review step ---------------------------------------------------- */

/* The solution is NOT in that list. It lives inside #practice-feedback-area,
   which stays hidden until a verdict, and a verdict is this deploy's submit —
   so answering opens the reference solution under the buttons that recorded it
   ("after pressing submit… it should display the solution to the problem at the
   bottom"). The notebook carries its own collapsed copy; this one is for
   reading without leaving the rail.

   Some of what the rest of that panel holds does not survive the trip: the AI
   explanation needs the submission it never saw, and it is noise stacked above
   the answer the learner just asked for. The felt-difficulty self-report DOES
   survive — the verdict now leaves its attempt pending for the rating to land
   on — and is styled for this column further down.

   The accuracy bar used to be hidden here, on the argument that the concept
   strip above it already carried a correct/total count for the same answers by
   a different formula. That argument held on every edition, not just this one,
   so the bar is gone from the app entirely and there is nothing left to hide.
   See practice/stage-ladder.js. */
html.dd-colab-edition:not(.dd-no-notebook) #ai-explanation-section,
html.dd-colab-edition:not(.dd-no-notebook) #tutor-section {
  display: none;
}

/* ---- the felt-difficulty rating ----------------------------------------- */

/* Three buttons on one row is a 1600px page's layout. In a 290px side panel it
   gives each of them ~85px, and "Way too easy" wraps to three lines inside a
   box sized for one — so they stack here, in the order the rating runs from
   least to most extreme. Full width also makes them the obvious next action,
   which they are: nothing advances until one is pressed.

   Next problem is in the same flex container and must NOT stack alongside them
   — it replaces them (showNextProblemButton hides the three), so it keeps its
   own line either way. */
html.dd-colab-edition:not(.dd-no-notebook) .feedback-buttons {
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

html.dd-colab-edition:not(.dd-no-notebook) .feedback-btn {
  flex: 0 0 auto;
  padding: 9px 10px;
}

/* The help line is the only place the rating's consequence is written down, and
   in this column it is the difference between three buttons that look like a
   survey and three that the learner can tell actually steer the next problem.
   It stays. */
html.dd-colab-edition:not(.dd-no-notebook) #feedback-help {
  font-size: 11px;
  line-height: 1.45;
  margin-bottom: 10px;
}

/* "Is this a mistake? I got it right" — offered when the GRADER said wrong. Here
   the learner said wrong, about their own run, half a second ago; there is
   nothing to appeal to. It also posts /override against an attempt that came in
   through submit-local-eval, which is not the shape that endpoint expects. */
html.dd-colab-edition:not(.dd-no-notebook) #override-row {
  display: none;
}

html.dd-colab-edition:not(.dd-no-notebook) .solution-section {
  border-top: 0;
  padding-top: 0;
}

/* The editor, the Run button and the Output pane, gone — not hidden per
   question. ui.js already drops `.hidden` on this panel when a question routes,
   but that leaves it on screen for every moment in between (an idle practice
   tab, the beat before the first render), and on this deploy there is no moment
   when typing code into the panel is the right thing to do. The notebook has a
   runtime; this rail does not. */
html.dd-colab-edition:not(.dd-no-notebook) .practice-right {
  display: none;
}

html.dd-colab-edition:not(.dd-no-notebook) .practice-left {
  border-right: 0;
}

html.dd-colab-edition .practice-left {
  gap: 14px;
  padding: 16px 18px 24px;
}

/* Below 900px the two panels stack and each is capped at half the viewport, so
   neither hides the other. A side panel is always below 900px and there is no
   other panel here — the cap just left the rail scrolling inside the top half
   of the window with dead space under it. */
@media (max-width: 900px) {
  html.dd-colab-edition:not(.dd-no-notebook) .practice-left {
    border-bottom: 0;
    max-height: none;
  }
}

/* ---- the stage ladder, in a side panel --------------------------------- */

/* The wide page gives the ladder five sections on one row. A browser side
   panel is ~300px, which is ~60px per section — enough for "Worked" and not
   for "Worked example", and truncating a rung name to "Wor…" destroys the one
   thing the ladder is for. So the sections wrap to a grid here.

   The predecessor of this was a zig-zag: four dots on a line with their labels
   alternating above and below it, taken out of flow so they could overlap in
   width without colliding. It bought the horizontal space back at the cost of
   a row height nothing could exceed, and it only ever fit FOUR rungs — the
   fifth is what finally broke it. Two rows of boxes need none of that. */
/* 🔴 The ladder has no padding of its own any more — it is a block inside
   `.question-number-row`, which is the card, and that card is already inside
   the rail's own padding. What the rail retunes is the CARD, which is tight
   here for the same reason everything else in the rail is. */
html.dd-colab-edition .stage-ladder {
  gap: 4px;
}

html.dd-colab-edition .question-number-row {
  padding: 8px 10px 9px;
}

/* The concept name is allowed to wrap here. On a wide page it is one line with
   an ellipsis; in a panel that ellipsis eats most of the name. */
html.dd-colab-edition .stage-ladder-kc {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

html.dd-colab-edition .stage-ladder-now {
  flex-direction: column;
  gap: 1px;
}

/* The rung names stay in FOUR columns in the rail, wrapping inside their own
   column. They used to fall to a 2x2 grid here, which was right while each
   rung owned its own bar; against one continuous track cut into quarters it
   is not — every label would point at the wrong length of bar. */
html.dd-colab-edition .stage-ladder-track {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

html.dd-colab-edition .stage-seg-label {
  font-size: 9.5px;
  letter-spacing: 0;
  white-space: normal;
}

/* ~300px of rail: a 26px track with a 14px chevron cut into it is most of a
   card's height here.

   🔴 Set the VARIABLE, not `.stage-ladder-bar { height }`. Nothing is anchored
   off this token any more (the pop-up that was is deleted), but the rail is
   not the only place that retunes the bar and one token is what keeps the
   phone breakpoint and this file from fighting over the same rule.

   🪦 `--dd-ladder-gap: 4px` and `padding-top: 40px` were here too: a reserve
   above the track for a floating reading that was routinely two lines in the
   rail, because `.stage-ladder-kc` wraps here. The reading is a line of text
   UNDER the track now — it takes its own height, in flow, and reserving space
   above the bar would just push the bar off its title. */
html.dd-colab-edition .stage-ladder-meter {
  --dd-ladder-bar-h: 20px;
}

html.dd-colab-edition .stage-ladder-reading {
  font-size: 10px;
}

html.dd-colab-edition .stage-ladder-reading b {
  font-size: 11.5px;
}

/* ---- the rail's own rows ----------------------------------------------- */

html.dd-colab-edition .self-report-row,
html.dd-colab-edition .session-status-row,
html.dd-colab-edition .question-number-row {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* `align-items: stretch` because the verdict labels are not the same length, so
   one wraps to two lines at panel widths and the other does not. Equal heights
   anyway — two different-sized buttons read as two different KINDS of answer. */
html.dd-colab-edition .torch-colab-actions {
  align-items: stretch;
  flex-wrap: wrap;
  row-gap: 8px;
}

/* The two verdicts ARE the submit on this deploy, and they are one question
   with two answers — so they get one row, equal halves, identical styling. An
   emphasised "matched" would be a nudge on a self-report the mastery model
   takes at face value. The notebook link goes above them, full width, because
   it is how you get BACK to the problem, not a third answer to it. */
html.dd-colab-edition #torch-colab-link {
  flex: 1 1 100%;
  text-align: center;
}

html.dd-colab-edition #torch-rate-solved,
html.dd-colab-edition #torch-rate-lookedup {
  flex: 1 1 0;
  justify-content: center;
  min-width: 150px;
  text-align: center;
}

/* The notice is the rail's main body now that the prompt is gone: it says which
   notebook you were sent to and takes the self-rating that moves the tutor on. */
html.dd-colab-edition:not(.dd-no-notebook) .torch-colab-notice {
  margin-top: 4px;
}

/* ============================================================
   LESSON RAIL — the `worked` rung on the Colab edition.

   The notebook already holds this lesson's prose, its runnable blocks, the
   worked example, the problem, the hints and the solution, as real cells
   against a real torch runtime. Rendering a second copy in the panel put the
   reading on the left and the work on the right, which is the split this
   edition exists to close. So the panel keeps only what the notebook cannot
   know — the rung, the estimate, which page of how many — and one button.

   Deliberately styled like `.torch-colab-notice` rather than like the lesson
   body: on this edition, "here is where your work is" is one recurring kind of
   message, and a lesson is another instance of it, not a different surface.
   Built in practice/lessons.js::_colabPageHtml.
   ============================================================ */
.lesson-colab-card {
  margin: 12px 0 18px;
  padding: 15px 16px;
  background: rgb(var(--warn-rgb) / 0.07);
  border: 1px solid rgb(var(--warn-rgb) / 0.32);
  border-radius: 10px;
}
.lesson-colab-eyebrow {
  font-weight: 700;
  margin: 0 0 7px;
}
.lesson-colab-card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 12px;
}
/* Full width and centred, matching #torch-colab-link on the question rail —
   it is the same instruction ("your work is over there"), so it should not
   look like a different one. */
.lesson-colab-open {
  display: block;
  padding: 11px 12px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.lesson-colab-open:hover { background: var(--accent-dark); }
/* The continue button is the learner's own claim that they have read it, and
   the only control on the rail. Give it the width that says so. */
html.dd-colab-edition .lesson-actions #lesson-continue-btn {
  width: 100%;
}