/* Practice tab — question display: number, text, imports, visuals, meta, prose/code split. */
/* ---- the question's heading CARD ---------------------------------------

   This started as a counter and two audit chips ("Question 21", "ID 490",
   "See in knowledge graph"). It became an <h2> naming the CONCEPT, with the
   chips moved into the notch's three-dot menu; #placement-timer was the last
   thing beside the heading and it went to the notch tab the same day.

   🔴 It is a RECTANGLE now, and it holds the progress ladder (Seth,
   2026-08-23: "the bar goes on the left as well right below the title of the
   concept, and the title of the concept is center aligned ... it is part of a
   rectangle that holds both the bar and the concept right above it"). The
   ladder used to be a full-width band above both panels — which meant the
   concept was named twice on one screen, by the band's pop-up and by this
   heading, in two type sizes and two places. One card, one name, and the bar
   directly under the thing it is a bar for.

   So this is a COLUMN, not a row: heading, then `#stage-ladder` (markup in
   index.html, contents styled by styles/practice/stage-ladder.css). Default
   `align-items: stretch` is load-bearing — it is what gives the track the
   card's full width; the heading is centred by `text-align` rather than by
   flex so it keeps that width and wraps inside it.

   The card is there in BOTH modes. Basic mode hides the ladder inside it
   (`body.dd-basic-mode .stage-ladder`), not the card, so a learner who has
   never opened the Account tab still gets the title in its frame. */
/* 🔴 NOTHING TO FRAME, NO FRAME. The heading is written by `ui.js` when a
   question renders, so between a session opening and its first question
   landing — and on the placement page between probes — `#question-number` is
   an empty <h2>. That was invisible while the row had no chrome; as a bordered
   card it is an empty rectangle sitting above nothing. `:empty` matches only
   an element with no child nodes at all, which is exactly what
   `textContent = ""` leaves, so a heading with a space in it still draws. */
.question-number-row:has(> .question-number:empty) {
  display: none;
}

.question-number-row {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  padding: 11px 14px 12px;
}

/* 🔴 Uppercase and 14px MUTED was right for "QUESTION 21" and is wrong for a
   title: a concept name is prose, it can run to five or six words, and small
   caps at that length stop being readable. It is the largest thing in the
   panel's first inch now, and the question text under it steps DOWN to 17px
   rather than up. `margin: 0` because it is a real heading element and the UA
   sheet gives <h2> a block margin the row would inherit as a gap.

   Centred, because the card is (Seth, 2026-08-23) — and by `text-align`, so a
   name that wraps still occupies the card's full width and centres line by
   line. Centring it with flex instead would shrink the box to the text and
   take the ladder's width with it. */
.question-number {
  text-align: center;
  color: var(--white);
  /* THE NOTEBOOK'S HEADING FACE. Seth, 2026-09-10, on the practice split:
     "the left side needs to have the same font as the notebook for the text
     and then of course the code will have its own separate font". The concept
     name is the heading of the thing being read, so it takes the heading face
     rather than the app's sans chrome. Weight 400 rather than 700 for the same
     reason the notebook's headings are — ET Book carries a heading at its own
     weight, and 700 on a display serif reads as shouting. Sized UP from 20px
     to hold its place: a serif at a given px reads smaller than the sans it
     replaced. */
  font-family: var(--prose-heading);
  font-size: 23px;
  font-weight: 400;
  /* The -0.2px tracking was tuned for bold Inter and closes up a serif. */
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0;
  /* A concept name is allowed to wrap; it is not allowed to be clipped. */
  min-width: 0;
}

/* Question Text — the problem statement, the left half of the split.

   🔴 THE READING FACE, NOT THE UI FACE. This is the one piece of prose on the
   practice tab, and it is the same prose a lesson and a notebook show, so it
   is set in --prose-font (styles/variables.css) like both of those. What is
   NOT set in it is the code: the editor on the right, the `code` chips in this
   paragraph and the imports panel all keep --code-font, which is the whole of
   what Seth asked for — one reading face, one code face, and the split's two
   halves each showing one of them.

   Weight 400 rather than 500: 500 in a stack whose first hits are Palatino and
   ET Book means a SYNTHESISED bold on most machines, which is a smeared
   paragraph rather than an emphatic one. Sized up 17px → 18.5px on the same
   argument as the heading above. */
.question-text {
  font-family: var(--prose-font);
  font-size: 18.5px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.62;
  margin-bottom: 20px;
}

/* The chips inside the problem statement stay monospace — they name real
   identifiers, and a serif `arr[1, 0]` is not the thing the learner will type.
   Scoped to inline code: a fenced block inside the statement is a cell and is
   dressed by the notebook sheet. */
.question-text :not(pre) > code {
  background: var(--prose-chip);
  border-radius: 4px;
  font-family: var(--code-font);
  font-size: 0.86em;
  padding: 1px 5px;
}

.question-imports {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid rgb(var(--accent-2-rgb) / 0.22);
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 8%, var(--panel)), var(--panel-deep));
}

.question-imports.hidden {
  display: none;
}

.question-imports-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.question-imports-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.question-import-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.question-import {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgb(var(--accent-2-rgb) / 0.25);
  background: rgb(var(--accent-2-rgb) / 0.08);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.question-import:hover {
  transform: translateY(-1px);
  border-color: rgb(var(--accent-2-rgb) / 0.5);
  background: rgb(var(--accent-2-rgb) / 0.14);
}

.question-import-item.expanded .question-import {
  border-color: rgb(var(--accent-2-rgb) / 0.6);
  background: rgb(var(--accent-2-rgb) / 0.18);
}

.question-import-detail {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgb(var(--accent-2-rgb) / 0.18);
  background: var(--panel-deep);
}

.question-import-detail.hidden {
  display: none;
}

.question-import-detail-note {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.question-import-detail-code {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--white);
  font-size: 12px;
  line-height: 1.5;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

.question-import-detail-context {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgb(var(--tint-rgb) / calc(0.03 * var(--tint-k)));
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.question-import-detail-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.question-import-detail-preview-note {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgb(var(--tint-rgb) / calc(0.04 * var(--tint-k)));
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.question-import-detail-preview-canvas {
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid rgb(var(--accent-2-rgb) / 0.18);
  background: var(--canvas-bg);
}

.question-import-detail-preview-json {
  margin: 0;
  padding: 10px 12px;
  overflow: auto;
  max-height: 220px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--white);
  font-size: 11px;
  line-height: 1.5;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

.question-visual {
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  padding: 14px;
}

.question-visual-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.question-visual-note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 10px;
}

.question-visual-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  background: var(--canvas-bg);
  image-rendering: pixelated;
}

.question-visual-canvas.hidden {
  display: none;
}

.question-meta-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.question-meta-top.hidden {
  display: none;
}

/* Subtopic & Difficulty Row */
.question-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.subtopic-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
}

.question-provenance {
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}

.question-provenance.hidden {
  display: none;
}

.difficulty-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--warn);
  background: rgb(var(--warn-rgb) / 0.1);
  border: 1px solid rgb(var(--warn-rgb) / 0.25);
  border-radius: 6px;
  padding: 5px 12px;
}

.question-id-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 9px;
  line-height: 1;
  min-height: 27px;
  cursor: pointer;
  white-space: nowrap;
}

.question-id-chip:hover {
  color: var(--text);
  border-color: var(--accent-text);
}

.question-id-chip:disabled {
  cursor: default;
  opacity: 0.55;
}

/* A question the tutor cannot place on its own map. Marked, not hidden — the
   whole point of this control is that a mismatch between what was served and
   what the graph claims stays visible. */
.question-id-chip.is-untagged {
  border-style: dashed;
  opacity: 0.75;
}

/* The Cold Start Badge and its .cold-start-label / .cold-start-note rules were
   deleted on 2026-08-23 with the markup — see practice/ui.js. #placement-timer
   outlived it and has moved twice since: into .question-number-row, and then
   onto the notch tab, which is where it is (styling still in diagnostic.css). */
/* Question body: separate the prose prompt from any starter/code block. */
.question-prose { line-height: 1.6; }
.question-prose + .question-prose { margin-top: 10px; }
.question-prose + .question-code-block,
.question-code-block + .question-prose { margin-top: 10px; }
.question-code-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
  line-height: 1.45;
}
.question-code-block code { white-space: pre; }