/* ===========================================================================
   v078 — the handwriting toolbar skin the teacher picked.

   History, so nobody "fixes" this back:
     · v073 shipped a decorative toolbar (src/canvas-enhance.mjs) that sat under
       the real one. Its buttons only restyled themselves and popped a toast;
       `setInkTool()` was never called, so picking a pen changed nothing. v075
       deleted it and banned its class names in tests/v075-ui-dedupe.test.mjs.
     · The teacher then asked for that look back — emoji tools, four inline
       colour dots, four thickness dots, indigo active state — wired to the real
       ink model this time. That is what this file dresses.

   So: ONE toolbar per writing pad (unchanged), and every control here calls the
   same setter the popover does. The look is the souvenir; the behaviour is the
   one that works.

   Applies to all three writing surfaces so they cannot drift apart again:
     .inkToolbar        practice answer pad    — inside <section id="workspace">
     .sourceInkToolbar  original-paper annotation
     .paperInkToolbar   paper answer book      — both inside <section id="papers">

   ---------------------------------------------------------------------------
   WHY SO SPECIFIC, AND WHY EVERYTHING CARRIES `!important`

   Two traps, both measured in a real browser rather than guessed:

   1. These chips are `<button class="… active">`, and earlier sheets already
      paint bare `button.active`:
        v029.css  body.ial-v029 .paperSourceInkToolbar button.active{background:#e8efff!important;…}
        index.html .paperInkToolbar button.active{background:#edf2ff;…}
      On the first paint the colour dots came out pale blue in a 7px-radius box
      instead of their own colour in a circle. A plain `.ialColorDot` cannot win
      against those; matching id + container + element-class can.

   2. `#workspace` alone is NOT enough — the answer book and the annotation bar
      live under `#papers` (`#paperWorkspace`), so a `#workspace`-scoped rule
      silently skipped two of the three pads. `:is(#workspace, #papers)` covers
      both and still contributes the id weight that beats the old rules.
   =========================================================================== */

/* ---- the bars ---- */
html body :is(#workspace, #papers) .inkToolbar,
html body :is(#workspace, #papers) .sourceInkToolbar,
html body :is(#workspace, #papers) .paperInkToolbar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  height: auto !important;
  min-height: 40px !important;
  padding: 6px 10px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 8px 8px 0 0 !important;
}

.ialPenTools,
.ialPenColors,
.ialPenWidths,
.ialPenHistory {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ---- tool chips: icon only, indigo when live ---- */
html body :is(#workspace, #papers) .inkToolbar .ialPenTool,
html body :is(#workspace, #papers) .sourceInkToolbar .ialPenTool,
html body :is(#workspace, #papers) .paperInkToolbar .ialPenTool {
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  border-radius: 6px !important;
  min-width: 34px !important;
  height: 30px !important;
  padding: 0 6px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
html body :is(#workspace, #papers) .inkToolbar .ialPenTool.active,
html body :is(#workspace, #papers) .sourceInkToolbar .ialPenTool.active,
html body :is(#workspace, #papers) .paperInkToolbar .ialPenTool.active {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
}
/* an emoji cannot be recoloured, but it can be filtered — the chosen look shows
   the live tool as a white mark on the indigo chip */
.ialPenTool.active .ialGlyph { filter: brightness(0) invert(1); }

/* ---- inline colour dots ---- */
html body :is(#workspace, #papers) .inkToolbar .ialColorDot,
html body :is(#workspace, #papers) .sourceInkToolbar .ialColorDot,
html body :is(#workspace, #papers) .paperInkToolbar .ialColorDot {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border-radius: 50% !important;
  border: 2px solid #fff !important;
  background: var(--ial-dot, #172033) !important;
  background-color: var(--ial-dot, #172033) !important;
  box-shadow: 0 0 0 1px #cbd5e1 !important;
  padding: 0 !important;
  cursor: pointer;
  flex: 0 0 auto !important;
}
html body :is(#workspace, #papers) .inkToolbar .ialColorDot.active,
html body :is(#workspace, #papers) .sourceInkToolbar .ialColorDot.active,
html body :is(#workspace, #papers) .paperInkToolbar .ialColorDot.active {
  background: var(--ial-dot, #172033) !important;
  background-color: var(--ial-dot, #172033) !important;
  box-shadow: 0 0 0 2px #4f46e5 !important;
}

/* ---- inline thickness dots ---- */
html body :is(#workspace, #papers) .inkToolbar .ialWidthDot,
html body :is(#workspace, #papers) .sourceInkToolbar .ialWidthDot,
html body :is(#workspace, #papers) .paperInkToolbar .ialWidthDot {
  width: 28px !important;
  height: 26px !important;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  border-radius: 6px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  cursor: pointer;
  flex: 0 0 auto !important;
}
.ialWidthDot i {
  display: block;
  background: #334155;
  border-radius: 999px;
}
html body :is(#workspace, #papers) .inkToolbar .ialWidthDot.active,
html body :is(#workspace, #papers) .sourceInkToolbar .ialWidthDot.active,
html body :is(#workspace, #papers) .paperInkToolbar .ialWidthDot.active {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
}
html body :is(#workspace, #papers) .inkToolbar .ialWidthDot.active i,
html body :is(#workspace, #papers) .sourceInkToolbar .ialWidthDot.active i,
html body :is(#workspace, #papers) .paperInkToolbar .ialWidthDot.active i { background: #fff !important; }

/* ---- the "more" chips that open the full v039 pickers ---- */
html body :is(#workspace, #papers) .inkToolbar .ialPenMore,
html body :is(#workspace, #papers) .sourceInkToolbar .ialPenMore,
html body :is(#workspace, #papers) .paperInkToolbar .ialPenMore {
  border: 1px dashed #cbd5e1 !important;
  background: #fff !important;
  border-radius: 6px !important;
  height: 26px !important;
  min-width: 28px !important;
  padding: 0 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #58657a !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto !important;
}

html body :is(#workspace, #papers) .inkToolbar .ialPenDivider,
html body :is(#workspace, #papers) .sourceInkToolbar .ialPenDivider,
html body :is(#workspace, #papers) .paperInkToolbar .ialPenDivider {
  width: 1px !important;
  height: 20px !important;
  background: #e2e8f0 !important;
  flex: 0 0 1px !important;
  margin: 0 2px !important;
}

/* The old tool labels ("Pen", "Fountain", …) were text spans inside the tool
   buttons. The chosen look is icon-only; hide any that survived a partial
   merge rather than letting them reflow the row. */
.ialPenTool > span { display: none; }

/* ===========================================================================
   The Mark Scheme rail — the teacher could not find the answers.

   It was laid out as a column of the workspace grid, so it inherited the full
   content height and slid below the fold: measured `top: 911px` in a 900px-tall
   viewport, i.e. eleven pixels past the bottom edge, on a window whose panes had
   already grown to 747px. Pinning it to the viewport keeps the one obvious
   "MARK SCHEME" handle reachable at any window height.
   =========================================================================== */
html body .v073-ms-rail {
  position: fixed !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: auto !important;
  min-height: 132px !important;
  max-height: 62vh !important;
  z-index: 40 !important;
  border-radius: 8px 0 0 8px !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .2) !important;
}
/* The rail is the door to the Mark Scheme, so it should not stay inside the
   room. Once the pane is open the rail retires; when the student goes back to
   Work it returns. Driven by CSS off the same class the tabs toggle, so the two
   entry points (rail and tab) can never disagree about the current state - the
   hand-written JS version forgot to bring the rail back on the way out. */
html body .workingPanel.v027-show-ms > .v073-ms-rail {
  display: none !important;
}

/* ===========================================================================
   Phone — no handwriting area at all.

   The teacher's call: on a 4-inch screen the pad is unreadable anyway, so a
   phone should just show the question and the Mark Scheme.

   This supersedes the old v059 rule ("手写切换入口必须存在且可用 —— 不得一刀切隐藏")
   — that comment is now history, not a requirement.

   Note v059.css also did `[data-device="phone"] body.ink-hidden #workspace
   #v027WorkTabs { display:none !important }`, which removed the Work / Mark
   Scheme switch together with the pad and left a phone with NO way to reach the
   answers. The tabs have to come back, or "看题目和 Mark Scheme" is impossible.
   =========================================================================== */
html[data-device="phone"] body.workspace-mode #workspace #inkMethod {
  display: none !important;
}
html[data-device="phone"] #workspace .v073-ms-rail {
  display: none !important;
}
html[data-device="phone"] body.workspace-mode #workspace #v027WorkTabs {
  display: flex !important;
}
/* the writing-only furniture inside the panel goes with the pad */
html[data-device="phone"] #workspace .inkWorkspace,
html[data-device="phone"] #workspace .canvasFooter,
html[data-device="phone"] #workspace .workspaceHints {
  display: none !important;
}
/* "Your Working" heads a writing area that no longer exists here. */
html[data-device="phone"] #workspace .workHead {
  display: none !important;
}
/* …and so is the toggle that used to fold it away. */
html[data-device="phone"] #workspace [data-ink-toggle] {
  display: none !important;
}

/* Two rules force this pane open on a phone and between them they turn the
   switch into a no-op:
     · v033.css:117  body.workspace-mode .v027MarkSchemePane{display:block!important}
     · v059.css:143  [data-device="phone"] body.ink-hidden …{display:block!important}
   Hand display back to the tab (v027 owns that behaviour).

   Note the second one is keyed on `body.ink-hidden`, so it used to come back to
   life the moment the student tapped the ✏️ toggle. These rules deliberately do
   NOT mention `ink-hidden` — on a phone the tab alone decides. */
html[data-device="phone"] body.workspace-mode #workspace #v027MarkSchemePane {
  display: none !important;
}
html[data-device="phone"] body.workspace-mode #workspace .workingPanel.v027-show-ms > #v027MarkSchemePane {
  display: block !important;
}

/* With the pad gone, the panel holds the tabs and, on the Mark Scheme tab, the
   answers. Nothing else, so let it shrink to what it holds. */
html[data-device="phone"] body.workspace-mode #workspace .workingPanel {
  flex: 0 0 auto !important;
}
html[data-device="phone"] body.workspace-mode #workspace .workingPanel.v027-show-ms {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* The question sheet is content-height, so on a tall phone pane the bottom half
   of the question fell through to the workspace's grey — measured on a 390x844
   phone: the cream sheet stopped at y=545 and the panel runs to y=706, so ~160px
   of nothing sat between the question and the tab bar.

   Two things are needed, and neither alone is enough:
     · the sheet's WRAPPER (the only other child of `.questionPaper` besides the
       toolbar) has to grow — it is a flex item, so `flex:1 1 auto` makes it fill
       271..706;
     · and it has to be painted, because growing a transparent box just shows the
       grey behind it. `--c-paper` is the exact colour the sheet already uses
       (src/v032.css), so there is no seam.

   Growing `#questionPaperInner` instead does nothing: its parent is `display:
   block`, so `flex` on the sheet itself is ignored. */
html[data-device="phone"] #workspace .questionPaper > :not(.question-toolbar) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  background: var(--c-paper, #fdfcf8) !important;
}
/* With the pad gone, "Work" no longer names anything a phone can show - the
   two things on offer are the question and the answers. Relabel by CSS rather
   than by editing the node: tests and desktop both still read "Work". */
html[data-device="phone"] #v027WorkTab {
  font-size: 0 !important;
}
html[data-device="phone"] #v027WorkTab::after {
  content: "Question";
  font-size: 14px;
  font-weight: 800;
}