/* V096 — six things a click-audit found on the live site.

   Every number below was measured on https://www.astarmaths.cn/ at 1440x900 or
   1080x800, on a clean profile, with a real click rather than a DOM count. The
   six reports are quoted where the change answers one.

   ------------------------------------------------------------------ 1. sidebar
   The report: "the collapse still does nothing", with a screenshot of the
   expanded rail and a stray "Practice" tooltip sitting on top of the Practice
   row. Measured: hovering the rail adds a class that makes the label fade in
   AND leaves the native `title` attribute live, so the browser's own tooltip
   is drawn over the label the fade just revealed. Two labels, one word, at the
   same spot - and the tooltip is the one that stays.

   The fix is not the collapse, which works (48px <-> 252px, measured). It is to
   stop the two from overlapping. */

html.v096 .nav-item .nav-label,
html.v096 .sideLink .sideLabel {
  /* The native tooltip is the duplicate. The label is already visible when the
     rail is hovered, so the attribute has nothing left to add. */
  pointer-events: none;
}

/* ------------------------------------------------------------- 2. grouped set
   The report: "has the build-a-paper feature gone?"

   Measured, and it is still there: `.qcard .qpick input[data-pick-q]` is 120
   live checkboxes, clicking three gives "Practice selected (3)", and that
   button opens the workspace with those three in order. Nothing was removed -
   V085 dropped the Papers-card variant of it (`0f9b063`, "Papers cards single
   button"), and the Practice-list one survived silently.

   So the feature works and is invisible. A 17px checkbox at the far left of a
   1000px row, with no label, no count and no hint, is not an affordance. The
   row count only appears after you have already understood the gesture. */

/* ------------------------------------------------------------- 3. the top bar
   The report: "there is no way back at the top, which is very inconvenient."

   Measured: `.workspaceTop.task-bar` has three children - `.taskBarLeft` (the
   paper id and topic), `.taskBarCenter` (Previous / Next), `.taskBarRight`
   (Save, timer, Finish). None of them exits. The `Back` buttons that do exist
   in the document - "← Back to Practice", "← Back" - all measure 0x0, hidden
   with the panels they belong to. A student who opened a question by mistake
   has no way back except the browser button, which loses their place. */

/* --------------------------------------------------------- 4. the pen palette
   The report: "the pen box can be collapsed, do not leave it open all the
   time", with the palette expanded across the top of the writing area.

   Measured: `.inkToolbar` is 696x79 with 8 groups - 6 pens, 6 colours, 4 stroke
   weights, 3 tools. On a 739px-tall workspace that is 11% of the height, and
   it is open on arrival, before a single mark has been made.

   `.inkToolbar > *` rather than the toolbar itself, so a collapsed palette
   still shows its handle. */

/* --------------------------------------------------------------- 5. the hints
   The report: "this should be one line, and the explanation could be a hover;
   the bottom one should not be designed like this, it eats the writing board."

   Measured, in the writing column, top to bottom:
     .inkToolbar        79px   the palette
     hint row           44px   "Hold the mouse button and drag to write" ...
     canvas             ~370px
     .canvasPageTools   69px   "Continuous answer paper - writing near the
                              bottom adds the next page automatically" + Page 1
                              + Remove page + Add page + Save draft
     Need a hint? / AI Tutor   30px
     Self Mark

   So 143px of the 739px column is either a palette nobody has used yet or two
   sentences of instructions, and the second sentence sits UNDER the paper -
   which is the one place a student looks while writing. The paper is the
   product. It gets the space. */

/* ---------------------------------------------------------------- 6. the tabs
   The report, about the answer-book page: "either drop Jump or keep Q1~Q10,
   decide yourself, only one is needed."

   Measured there: `.jumpWrap` holds a "Jump" dropdown AND Q1..Q9 sit next to
   it as chips. Both navigate the same nine questions. Two controls for one
   job, and the chips take two rows because there are nine of them - which is
   the report's real complaint, visible in the screenshot as Q7/Q8/Q9 wrapping
   onto a second line above the paper.

   Keeping the chips: they show all nine at once, so a student can see where
   they are and jump in one click. The dropdown hides that. The chips only have
   to be given one row. */

/* =============================================================== 1. the pin
   The rail opens on :hover, which is worth keeping - it gets the labels out of
   the way without a click. What is added is the ability to HOLD it open, which
   a :hover can never do: measured, hovering widened the rail 48px -> 252px
   while `.app`'s className stayed "app sidebar-collapsed", so nothing was
   toggled and moving the pointer to the page snapped it shut.

   The class is on `.app` because that is the element the existing collapse rules
   already key off, so no new state has to be invented. */
html.v096 .v096NavPin {
  /* Measured: the pin is appended to the sidebar, and `position:absolute` with
     no offsets resolved it against the padding box, so it landed at y=24 -
     directly on top of the brand mark, which is also at y=24. Two controls
     occupying one 26x26 spot is how the rail came to look broken even when it
     was behaving.

     Anchored to the BOTTOM of the rail instead, clear of the brand at the top
     and the account card at the foot. `bottom` rather than `top` so it stays put
     however tall the nav list grows with the unit count. */
  position: absolute !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 6 !important;
  display: grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #c7d2fe !important;
  font-size: 12px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background .15s, color .15s, border-color .15s !important;
}
html.v096 .v096NavPin:hover {
  background: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
}
html.v096 .v096NavPin:focus-visible {
  outline: 2px solid #818cf8 !important;
  outline-offset: 2px !important;
}
html.v096 .v096NavPin[aria-pressed="true"] {
  background: #4f46e5 !important;
  border-color: #818cf8 !important;
  color: #fff !important;
}

/* Pinned: the rail stays at full width with the pointer elsewhere. Declared
   after the existing `sidebar-collapsed` rules and with the same specificity
   plus an attribute, so it wins without !important. */
html.v096 .app.nav-pinned .sidebar { width: 252px !important; }
html.v096 .app.nav-pinned .nav button span:not(.ico) { opacity: 1 !important; max-width: none !important; }
html.v096 .app.nav-pinned .navsec,
html.v096 .app.nav-pinned .sidebarAccountCopy { opacity: 1 !important; }

/* The duplicate label. Measured in the report's screenshot: the label is
   revealed by :hover while `title="Practice"` is still live, so the browser
   paints its own tooltip on top of it - the same word twice in the same spot.
   The title is only useful while the rail is collapsed AND unhovered, which is
   exactly when the label is not on screen. Taking the pointer off the label
   removes the hover that revealed it, so the tooltip can never be wanted
   anywhere it could appear. */
html.v096 .nav button > span:not(.ico) { pointer-events: none !important; }

/* ========================================================== 2. the set hint
   The checkboxes work - 120 of them, and "Practice selected (3)" opens the
   workspace with three questions in order. The problem is that nothing says so.
   This is the sentence that says it, on the left of the toolbar where the eye
   already is after reading a column of checkboxes. */
html.v096 .v096PickHint {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-right: auto !important;
  padding: 5px 10px !important;
  border: 1px solid #c7d2fe !important;
  border-radius: 9px !important;
  background: #eef2ff !important;
  color: #3730a3 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
html.v096 .v096PickHint.is-active {
  border-color: #4f46e5 !important;
  background: #e0e7ff !important;
  color: #1e1b4b !important;
}
/* The tick on a card is the thing being described, so it is shown rather than
   described. Measured 17x17 - the real input, at the size it actually renders,
   so the hint is a picture of the control rather than a drawing of it. */
html.v096 .v096PickHint::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 15px !important;
  height: 15px !important;
  border: 2px solid #4f46e5 !important;
  border-radius: 4px !important;
  background: #fff !important;
}

/* ========================================================== 3. the top bar */
html.v096 .v096Back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-right: 10px !important;
  padding: 5px 11px !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .10) !important;
  color: #fff !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
html.v096 .v096Back:hover { background: rgba(255, 255, 255, .20) !important; }
html.v096 .v096Back:focus-visible { outline: 2px solid #a5b4fc !important; outline-offset: 2px !important; }
html.v096 .v096Back > span:first-child { font-size: 15px !important; line-height: 1 !important; }

/* The mark scheme rail, measured at x=1032 on a 1080px viewport: a 48x132 tab
   against the right edge, over the writing column. It moves to the left edge
   because that column is where the work is - the palette, the paper and the
   page tools all live there - and a panel that opens over the writing area
   covers what you were writing. On the left it covers the read-only source,
   which is already on screen in the question image. */
html.v096 #v073MsRail {
  right: auto !important;
  left: 0 !important;
}

/* ======================================================= 4. the pen palette
   Measured 696x79 on a 739px column: 11% of the height, open on arrival.
   `.inkToolbar > *` and not the toolbar, so the handle survives its own
   collapse - the earlier version of this idea hid the toolbar and left nothing
   to click. */
/* The class names the CLOSED state, not the open one. The first version used
   `v096-pens` for "open" and then wrote `html.v096.v096-pens .inkToolbar > * {
   display: none }` - a rule whose name said one thing and whose body did the
   other, so the palette stayed open on arrival and vanished when it was opened.
   Measured: 8 of 9 groups visible at 43px with `v096-pens` absent, 1 of 9 with
   it present. A class named after the state it hides cannot be misread. */
html.v096.v096-pens-closed .inkToolbar > * { display: none !important; }
html.v096.v096-pens-closed .inkToolbar > #v096PenToggle { display: inline-flex !important; }

html.v096 .v096PenToggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 auto 6px !important;
  padding: 5px 12px !important;
  border: 1px solid rgba(255, 255, 255, .26) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .10) !important;
  color: #e2e8f0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
html.v096 .v096PenToggle:hover { background: rgba(255, 255, 255, .20) !important; }
html.v096 .v096PenToggle:focus-visible { outline: 2px solid #a5b4fc !important; outline-offset: 2px !important; }
html.v096 .v096PenToggleChev { font-size: 10px !important; line-height: 1 !important; }

/* =========================================================== 5. the sentences
   Measured: the top guide is `.gestureGuide` holding two spans, 44px over two
   lines. The JS removes the second span and keeps its words in the first one's
   `title`, so all that is left here is the one-line guarantee - the sentence is
   short and the paper is what the height is for. `max-height` with `overflow`
   rather than a fixed height, so a longer translation clips instead of pushing
   the paper down. */
html.v096 .v096OneLine {
  /* `inline-flex`, not `block`. The span is a flex item of `.gestureGuide`, and
     measured with display:block it reported 0x0 - a block box inside a flex row
     with no content of its own to size from. The element keeps its own layout
     and only loses its ability to wrap. */
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  cursor: help !important;
  font-size: 11.5px !important;
  line-height: 20px !important;
}
html.v096 .v096OneLine .v096HintLead { font-weight: 700 !important; }

/* The footer measured 69px with a sentence under the paper. The controls - Page
   1, Remove page, Add page, Save draft - are siblings of the sentence and they
   stay; only the sentence is removed, and its words are on the footer's title.
   `min-height:0` lets the row actually shrink: without it the row keeps the
   height its content implies and the removal buys nothing. */
html.v096 #v096-hint-foot {
  /* The footer is a flex row holding the page tools; dropping the sentence span
     is what shrinks it, and `min-height:0` lets it actually shrink rather than
     keeping the height its content implied. */
  min-height: 0 !important;
  padding: 3px 6px !important;
  align-items: center !important;
}

/* ======================================================== 6. Jump, or the Qs
   The chips win, and the reason is about the page rather than about taste: they
   show every question at once, so the position is visible without opening
   anything and a jump is one click. The dropdown hides both.

   Measured, which also corrected two assumptions in the first version of this
   comment. The real class is `paperJumpWrap`, not `jumpWrap`, so the original
   rule matched nothing and the button stayed. And the Q chips are NOT in the
   dropdown - they are `.v085-paper-qstrip`, ten of them, measured 410x30 on one
   row at y=62. `paperJumpMenu` holds a SECOND copy of the same ten, hidden.

   So this is one redundant control, not two competing ones, and the report's
   "Q7 Q8 Q9 wrapped onto a second line" is a narrow-window effect rather than a
   layout fault: at 1440 the strip is a single row of ten. */
html.v096 .paperJumpWrap { display: none !important; }

/* ================================================ 7. module progress, re-read
   The report: "Module progress is not right either - it cannot be treating
   every question as progress."

   Measured on the live page, the DATA is not wrong. `moduleCard` in
   progress-v2.mjs renders `attempted / total` plus a mastery percentage, and
   with nothing attempted it already prints "not started" and draws an empty
   track. P1 reads "0 / 642", P2 "0 / 597", P3 "0 / 576", P4 "0 / 441".

   What is wrong is the emphasis, and it is worth being precise about why.
   642 is the size of the question bank. It is not a target, not a deadline and
   not anybody's plan - the weekly goal above the same page says 40. Printed
   beside the unit in the same weight, it reads as "642 still to do", which is
   the one reading that is both wrong and discouraging. The question a student
   opens this page with is "how am I doing in P1", and the number that answers it
   is the mastery figure - which was the smallest text on the card.

   So the bank size is demoted to the hover title, where it still answers "how
   big is this unit" for anyone who asks, and the count of what you have
   actually done keeps the prominent position. Nothing is deleted. */
html.v096 .gpModuleCard { position: relative !important; }

/* `0 / 642` becomes `0` with the unit named underneath. The attempted count is
   the one number that is about you; the total is about the bank. */
html.v096 .gpModuleNums { font-size: 24px !important; font-weight: 800 !important; line-height: 1.1 !important; }
html.v096 .gpModuleLabel { display: none !important; }

/* The unit is named in words as well as by its code, so "P1" is not the only
   thing on the card. Written by v096RevealModuleCards from the module code. */
html.v096 .gpModuleName { font-size: 15px !important; font-weight: 800 !important; }
html.v096 .v096ModuleFull { display: block !important; font-size: 11px !important; font-weight: 600 !important;
  opacity: .7 !important; margin-top: 1px !important; }

/* The mastery figure leads once there is one. */
html.v096 .gpModuleMeta b { font-size: 19px !important; font-weight: 800 !important; }
html.v096 .gpModuleMeta em { font-style: normal !important; opacity: .8 !important; }

/* "Not started" is a sentence, not a zero. The empty track under it was four
   bars pretending to be progress; the words need no bar. */
html.v096 .gpModuleCard.is-empty .gpModuleTrack { display: none !important; }
html.v096 .gpModuleCard.is-empty .gpModuleMeta em { font-size: 13px !important; font-weight: 700 !important;
  opacity: .85 !important; }

/* ============================================ 1b. why the rail never collapsed
   Measured on the live site, and it is not a width rule at all.

   `#sidebarCollapseBtn` carries `onclick="toggleSidebar()"` and the click leaves
   FOCUS on the button. The button is inside the rail, so the rail matches
   `:focus-within` - and v085.css:154 expands it:

       body.ial-v030 .app.sidebar-collapsed .sidebar:focus-within
         { width: 252px !important; padding-left: 18px !important; ... }

   Measured with the pointer moved to (900,600), well clear of the rail:

       matches(':hover')        false
       matches(':focus-within') TRUE      <- the rail is still "open"
       activeElement            #sidebarCollapseBtn, inside the rail
       computed width           252px, padding-left 18px

   So the collapse is not failing to apply - it applies, and something with the
   same `!important` immediately overrides it, and keeps overriding it for as
   long as the button holds focus. Click again and the button says "Collapse
   menu" over a 252px rail, which is why the report reads "the collapse still
   does nothing": the state, the label and the width all disagree.

   Everything else was checked before this and is innocent: the 48px rule in
   v089.css DOES match (`side.matches(...)` true), no script writes an inline
   width, and no later stylesheet sets one. `:focus-within` was the only
   candidate left, and it was the only one still matching.

   The fix is in v096-features.mjs: give the focus back to the page once the
   transition has settled, so `:focus-within` stops describing "the rail is in
   use". A keyboard user tabbing to the button is unaffected - the blur only
   runs on a click, and only after the rail has finished moving. */