/* ===========================================================================
   v068 - the workspace hint is now built from the question it sits under.

   The box used to hold one hardcoded sentence - "For part (b), use the
   perpendicular distance from the centre to the tangent line ..." - which was
   printed verbatim under all 2256 questions, integration ones included. The
   catalog does carry per-question hint fields, but they were only ever rendered
   inside #questionModal, which nothing can open any more.

   Two steps are all the bank can support today, so the box has to read as a
   short stack of steps, not as a paragraph. New file, per the project rule.
   =========================================================================== */

/* the base layer styles the box as a single paragraph; the steps need their own
   stacking so the label sits above its sentence */
.workspaceHintBox {
  display: none;
}

.workspaceHintBox.show {
  display: block;
}

/* ---------------------------------------------------------------------------
   Placement.

   Measured, not assumed: the working panel is `height: calc(100vh - 68px)` with
   `overflow: hidden` (it is a fixed-height flex column, so the answer paper can
   own its own scrolling). The hint control is the second-to-last child, so its
   button lands at ~831px in a 900px viewport - visible, but with only ~40px of
   room beneath it. The expanded box was measured at 869 -> 998px: 98px of it
   past the clip edge, with no scrollbar to reach it. In other words the student
   could click "Need a hint?" and never see the hint.

   So the box opens upward as a popover instead of growing downward. It costs no
   layout (the answer paper keeps the height the other layers set on it) and it
   has room: everything above the button is inside the panel.
   --------------------------------------------------------------------------- */
.workspaceHints {
  position: relative;
}

.workspaceHintBox {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  width: min(430px, 100%);
  max-height: min(46vh, 330px);
  overflow: auto;
  z-index: 30;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
}

.hintStep {
  display: block;
  padding: 7px 0;
  border-top: 1px dashed #eddfba;
}

.hintStep:first-child {
  padding-top: 2px;
  border-top: 0;
}

.hintStep b {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8c6410;
}

.hintStep span {
  display: block;
  line-height: 1.55;
}

.hintHide {
  display: block;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: #8c6410;
  text-decoration: underline;
  cursor: pointer;
  touch-action: manipulation;
}

/* The button label changes as steps are revealed ("Need a hint?" ->
   "Next hint (1 of 2)" -> "All hints shown"), so it must not be mistaken for a
   live control once it is spent. */
.hintBtn[disabled] {
  opacity: .55;
  cursor: default;
}