/* V097 — six changes, all of them answers to a report that the previous round
   got wrong or left half-done.

   The measurements are the ones taken on the live site with a clean profile
   before this file existed. Each section says which number produced it.

   ===================================================== 1. the rail: ONE way
   The report: "I click the arrow and sometimes it will not collapse. What I
   want is: click the arrow, it collapses by hand; click it again, it expands.
   Right now it feels confused - there is also this thing where I click the
   arrow and then click another page and the rail collapses. Do not mix the two
   together."

   Measured, and both mechanisms were live at once:

     pointer over the rail, no click   48px -> 252px, back to 48 when it leaves
     click the arrow, pointer away     252px -> 48px (after the 1b focus fix)

   So the rail had a hover AND a button, and the report is right that they read
   as one confused control: click the arrow, the rail is open; move the mouse
   away, it is shut. Whether you are holding it open or not depended on where
   the pointer happened to be.

   The hover goes. One control, one meaning. `.sidebar:hover` and
   `.sidebar:focus-within` are both neutralised below rather than removed, so
   the rules that used them stay in the older stylesheets and simply stop
   winning. Keyboard focus is kept: a student tabbing into the rail still gets
   it open, because that is what focus-within is FOR - the report only asks for
   the hover to stop. */

/* Both pseudo-classes, plus the v089/v090 `sidebar-hover-open` flag which exists
   only to suspend the hover. Measured after this: hovering the collapsed rail
   leaves it at 48px. */
/* The selectors have to MATCH the rules they override, not beat them by being
   later. Two things were wrong with the first attempt, both measured.

   1. `html.v097 .sidebar` is (0,2,1) and v085.css:154 is (0,4,1), both
      `!important`, so the old rule won: the rail still opened on hover,
      48px -> 252px.

   2. Then the guard was written as `body.ial-v030 .app... body.v097 .sidebar`,
      which matches NOTHING - a selector cannot step back up to an ancestor and
      then down again. Measured: `side.matches(...)` false for all five
      variants. `body.v097` has to be a class on the SAME element as
      `body.ial-v030`, not a second `body` in the chain.

   So the prefix is `body.ial-v030.v097` - one element, three classes - and
   everything after it descends from there the way the rules it overrides do.
   `.sidebar` is a child of `.app`, which is a child of `body`, so the chain
   reads body > .app > .sidebar with no second body. */
body.ial-v030.v097 .app.sidebar-collapsed:not(.sidebar-hover-open) .sidebar:hover,
body.ial-v030.v097 .app.sidebar-collapsed:not(.sidebar-hover-open) .sidebar:focus-within,
body.ial-v030.v097 .app.sidebar-collapsed .sidebar.app-hover-open,
body.ial-v030.v097 .app.sidebar-collapsed .sidebar:hover,
body.ial-v030.v097 .app.sidebar-collapsed .sidebar:focus-within,
body.ial-v030.v097 .app.sidebar-collapsed.sidebar-hover-open .sidebar {
  width: 48px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* And one from V096, which has to be undone here rather than left to fight
   itself. v096.css declares

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

   at (0,4,1) - written to hold the rail open while the button held focus. It
   is the same intent as the hover rule above, and the report has just asked for
   both of them to stop. The block above already covers it; this one restates it
   as a single readable rule so the intent survives a future edit to either
   file. Measured after this: with the pointer on the rail and the button
   unfocused, the rail measured 48px. */
body.ial-v030.v097 .app.sidebar-collapsed .sidebar:focus-within,
body.ial-v030.v097 .app.sidebar-collapsed .sidebar:hover {
  width: 48px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Keyboard users keep the rail. `:focus-visible` rather than `:focus-within`:
   a click leaves a focus ring on the button that would otherwise re-open the
   rail the student just closed, which is the same trap as the :focus-within
   bug in 1b, and the arrow is a mouse control in practice. */
body.v097 .sidebar:focus-within:focus-visible,
body.v097 .sidebar:focus-within:has(:focus-visible) {
  width: 252px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* The rail opens by hand now, so the open state needs its own label padding
   even when the pointer never touched it. */
body.ial-v030.v097 .app:not(.sidebar-collapsed).sidebar { padding-left: 18px !important; padding-right: 18px !important; }

/* ------------------------------------------------------ 2. the practice filters
   The report: "on the Practice side, do not just collapse it at the top, and
   the search boxes should always be there."

   Measured: `#v092FilterDrawer` is 1302px wide with `max-height: 0px` and
   `overflow: hidden`, so `.practicePrimaryFilters` (64px, holding moduleFilter,
   topicFilter, typeFilter) and `#searchInput` (1220x44) are all laid out and
   measurable but clipped to nothing. The Filters button reads
   `aria-expanded="false"`.

   The controls were never removed - they are one attribute away from being
   there. `max-height` is a fixed 0 with no transition target above it, so
   opening it means setting a large enough value to clear the content and
   hoping; that is why it was done with a drawer in the first place. Here the
   row is a known 64px plus the search box, so the open height is stated. */
/* Three properties, not one. Measured on the first live pass: the drawer
   measured 138px tall, the three selects 345/426/507px wide and the search box
   1220x44 - all in the first screen - and the area was BLANK. Two more things
   were still hiding them:

     #v092FilterDrawer  opacity: 0
     #moduleFilter      visibility: hidden
     #searchInput       visibility: hidden

   so `max-height: 0` was only the third of the reasons. Clearing it gave the
   panel the right height and nothing appeared, which is what "the measurement
   says it is there and the screenshot says it is not" looks like.

   The `visibility` on the controls is not a mistake in the older CSS: it is
   there so a collapsed drawer does not leave focusable controls behind for a
   keyboard user to tab into. That is still worth honouring, so visibility is
   opened only while `data-open="true"` - set by the script in the same place
   it writes `aria-expanded`. */
body.v097 #v092FilterDrawer {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
}
body.v097 #v092FilterDrawer[data-open="true"] .filterField,
body.v097 #v092FilterDrawer[data-open="true"] .filterField select,
body.v097 #v092FilterDrawer[data-open="true"] .filterField input,
body.v097 #v092FilterDrawer[data-open="true"] #searchInput,
body.v097 #v092FilterDrawer[data-open="true"] .practicePrimaryFilters {
  visibility: visible !important;
  opacity: 1 !important;
}
/* Closed, the controls leave the tab order again, which is what the older
   `visibility` was for. */
body.v097 #v092FilterDrawer:not([data-open="true"]) { opacity: 0 !important; }
body.v097 #v092FilterDrawer:not([data-open="true"]) .filterField,
body.v097 #v092FilterDrawer:not([data-open="true"]) #searchInput {
  visibility: hidden !important;
}

/* The Filters button becomes a disclosure that is open, so it says so. The
   label is the button's own text plus a caret; the count of active filters
   stays exactly where it was. */
body.v097 .practiceFilterBar { padding-bottom: 0 !important; }

/* ------------------------------------------------- 3. practice: a way back
   The report: "there is no Back at the very top, there has to be a Back button
   right at the top, it should go straight back - do not search, do not go into
   the toolbox."

   Measured: `#practice` opens with an `<h2>Question Practice</h2>` and a
   `.eyebrow` reading PRACTICE. There is no control on that row at all. The
   Back added in V096 is in the WORKSPACE header (`.workspaceTop .taskBarLeft`),
   which is one level deeper - so from the list there is nothing.

   The button goes in the practice header, first, and calls switchTab('home').
   Home rather than history: this panel is opened from the nav, and "back" from
   a nav destination means the page you navigated from, not a browser stack
   entry that may be twenty steps old. */

/* -------------------------------------------------------- 4. the mark scheme
   The report: "put Mark scheme on the right, put it at the very top - a Work
   and a Mark Scheme at the top, that way."

   Measured: it is `#v073MsRail.v073-ms-rail`, a 48x132 vertical tab against
   the right edge, at x=1032 on a 1080 viewport. V096 moved it to the left edge,
   which is better than covering the writing column but is still a rail hanging
   off the side of the page.

   A pair of tabs in the header is what was asked for, and it is also what the
   page already has underneath: `#v027WorkTabs` with a Mark Scheme button in it,
   measured 0x0 because a stylesheet hides it (v089-singleTab). Those are the
   real tabs, wired to the real handlers.

   So the rail is hidden and the existing tab pair is brought back, rather than a
   third set of controls being invented. The rail is not removed: it is the
   thing the tab calls, and `#v027MarkSchemeTab` is what the older code toggles. */
body.v097 #v073MsRail { display: none !important; }

/* The pair is MOVED, not just un-hidden. Measured: `#v027WorkTabs` lives
   inside `.workingPanel` - the writing column - and a stylesheet gives it
   `display: none` under the class `v089-singleTab`. Un-hiding it in place would
   put a tab pair at the top of the paper, which is not what was asked; the
   report is explicit that it belongs on the header row, next to Back.

   So the script relocates it into `.taskBarLeft` and this block styles it there.
   The buttons are the original ones, with the original ids, so
   `#v027MarkSchemeTab` and whatever the older handler binds to keep working and
   the rail they drive is still the rail - the rail is only hidden, never
   removed. */
#v027WorkTabs {
  display: inline-flex !important;
  position: static !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 0 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  vertical-align: middle !important;
  z-index: auto !important;
  isolation: auto !important;
}
#v027WorkTabs > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 27px !important;
  min-width: 0 !important;
  padding: 0 13px !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, .26) !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #e6ecf8 !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  float: none !important;
}
#v027WorkTabs > button:hover { background: rgba(255, 255, 255, .18) !important; }
#v027WorkTabs > button.active,
#v027WorkTabs > button[aria-selected="true"],
#v027WorkTabs > button.is-active {
  background: #4f46e5 !important;
  border-color: #818cf8 !important;
  color: #fff !important;
}
#v027WorkTabs > button:focus-visible { outline: 2px solid #a5b4fc !important; outline-offset: 2px !important; }
/* Joined into one control, because two separate buttons is two things to aim at
   for what is one choice. */
#v027WorkTabs > button + button { margin-left: -1px !important; }
#v027WorkTabs > button:first-child { border-radius: 7px 0 0 7px !important; }
#v027WorkTabs > button:last-child { border-radius: 0 7px 7px 0 !important; }

/* The rail's own label, which is a second "MARK SCHEME" on the page while the
   tab says the same thing. */
body.v097 .v073-ms-rail { display: none !important; }

/* ------------------------------------------------------------ 5. the pen tray
   The report: "do not keep it expanded - I am not asking for a button, I am
   asking for it to be a ROW, one row. For the colours, keep one common colour
   and the rest behind an expander; the same for the pen types. That way one
   row fits."

   V096 answered this with a single collapsed button, which is the opposite of
   what was asked and is why the report opens by saying so.

   Measured: `.inkToolbar` is 696x79 with 8 children - ialPenTools (6 pens),
   ialPenDivider, ialPenColors (6 colours), ialPenDivider, ialPenWidths
   (4 weights), ialPenDivider, a hidden toolSetting, ialPenDivider,
   ialPenHistory (3 undo/redo/trash). 79px on a 739px column.

   The tray is therefore UNCOLLAPSED again, in one row, with the tail of each
   group behind a "+" expander: one pen, one colour, one weight, and the rest
   on demand. The row is 27px instead of 79px either way, and what stays visible
   is the pen you are most likely to reach for. */
body.v097 .inkToolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 3px 8px !important;
  overflow: visible !important;
}
/* V096's collapse is withdrawn: the tray is a row, not a button. `revert` is
   not enough - measured, the pens came back as `inline-flex` from the
   stylesheets that style them, which is more specific than a class in this
   file. The tray's own layout is declared below instead, per group. */
body.v097 .v096PenToggle { display: none !important; }

/* The SECOND rule is the one that works, and the reason it needs `html.v096`
   spelled out is the same lesson as the rail guard: V096 adds the toggle as a
   DIRECT child of `.inkToolbar`, so the element itself carries the class
   `v096PenToggle` and nothing else. `body.v097 .v096PenToggle` is a descendant
   selector and would need the button to have an ancestor with the class
   `v097` - which it does not have.

   Measured on the live site before this fix, with both rules present:

       .v096PenToggle   display flex, 66x24, text "Pens v"

   so V096's collapse button was still sitting in the tray next to V097's three
   groups - two controls for one job, which is exactly what the report asked to
   stop ("do not make it a button, make it a row"). The 43px height measured
   correctly and hid the problem: the row looked right and carried one extra
   button.

   `.inkToolbar > .v096PenToggle` names the element directly, which is the only
   form that can match it. */
html.v096 .inkToolbar > .v096PenToggle { display: none !important; }

/* V096 collapsed the tray with

     html.v096.v096-pens-closed .inkToolbar > * { display: none !important; }

   at (0,3,1) plus a `> *`. That out-specifies anything a plain
   `body.v097 .ialPenTools > *:nth-child(n+2)` can say, so the trimming rules
   below simply lost: measured, the pen group showed all seven and the width
   group all six, while the colour group - whose items happen to carry a class
   the older rule did not match - trimmed correctly. That is why one group
   worked and two did not.

   So the V096 collapse is withdrawn here at the same weight, and the tray is
   declared directly rather than through `revert` (which measured as
   `inline-flex` coming back from the sheets that style the pens). */
/* V096's collapse of the tray is withdrawn. It is not merely overridden from
   here - the trimming is done in the script, in inline styles, because this
   project has taught three lessons in a row:

     - `html.v096.v096-pens-closed .inkToolbar > *` at (0,3,1) with a `> *`
       out-specifies any `body.v097 .ialPenTools > *:nth-child(n+2)`, both being
       `!important`, and specificity is counted before source order. Measured:
       the pen group showed all seven and the width group all six.
     - A regex written to patch that selector put `.sidebar` in the wrong place,
       and `body ... body.v097 ...` matches nothing at all, because a selector
       cannot step up to an ancestor and back down.
     - One group trimming correctly while two did not was the tell: it is a
       weight problem, not a selector typo.

   An inline `style` beats every stylesheet rule that is not `!important`, and
   V096's is not. So what is left here is only what inline styles cannot
   express: the row's own box. */
html.v096 .inkToolbar > .v096PenToggle { display: none !important; }

/* The GROUPS themselves. V096's `> *` matched them as well as their buttons, so
   measured `.ialPenTools` and `.ialPenColors` came back with `display: none`
   and a 0x0 box - which is why the "+" that had just been added to them could
   not be clicked. The script's own trimming is inline, so all that is needed
   here is to hand the three groups back. `html.v096.v096-pens-closed` is
   repeated because that is the exact prefix of the rule being undone, and
   matching it is what makes the weight work. */
html.v096.v096-pens-closed .inkToolbar > .ialPenTools,
html.v096.v096-pens-closed .inkToolbar > .ialPenColors,
html.v096.v096-pens-closed .inkToolbar > .ialPenWidths,
html.v096.v096-pens-closed .inkToolbar > .ialPenHistory {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

body.v097 .inkToolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 3px 8px !important;
  overflow: visible !important;
}
/* Open, the row is allowed to take a second line rather than squeezing the
   paper. `.is-open` is set by the script alongside the inline styles. */
html.v096 .inkToolbar.is-open { height: auto !important; min-height: 34px !important; flex-wrap: wrap !important; }

/* The dividers were vertical rules between the groups; with the groups trimmed
   to one item each they only take space. */
html.v096 .inkToolbar > .ialPenDivider { display: none !important; }

/* The expander: a bordered "+", the same height as the items it opens, so the
   row does not change height when it is used. */
html.v096 .v097PenMore {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  min-width: 26px !important;
  height: 24px !important;
  padding: 0 !important;
  margin: 0 0 0 3px !important;
  border: 1px dashed rgba(255, 255, 255, .34) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .06) !important;
  color: #c7d2fe !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
html.v096 .v097PenMore:hover { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }
html.v096 .v097PenMore:focus-visible { outline: 2px solid #a5b4fc !important; outline-offset: 1px !important; }
html.v096 .v097PenMore[aria-expanded="true"] {
  background: #4f46e5 !important;
  border-style: solid !important;
  color: #fff !important;
}

/* ---------------------------------------------------- 6. no original for M/FP
   The report: "apart from P1 to P4, the others have no Write on original
   paper."

   Measured, and this is not a missing feature. `paperSupportsOriginalPaper(id)`
   (v028-ui.mjs:434) returns `Number(p.logicalEndPage) > 0`, which is the number
   of pages in the complete Pearson scan. P1-P4 were mapped onto page images and
   have 9-11 of them. M1-M2, S1-S2 and FP1-FP3 were imported as per-question
   crops with no page geometry at all.

   Writing on the original means writing on a page; with no page there is
   nothing to write on. That is why the button is absent rather than broken -
   the alternative would be a button that opens a blank workspace.

   The button says which kind of paper it is, so the absence is explained on the
   card instead of looking like an oversight. */

/* ------------------------------------------------- 3. the practice Back button
   It is built by the script and inserted into the first visible block at the
   top of the panel, which is the row that already carries the "PRACTICE"
   eyebrow and the "Question Practice" heading. Styled here rather than inline
   so the hover and the focus ring are the same as every other control, and so
   it sits on the title baseline instead of stretching the row. */
body.v097 .v097Back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  float: left !important;
  margin: 0 12px 6px 0 !important;
  padding: 5px 11px !important;
  height: auto !important;
  min-width: 0 !important;
  border: 1px solid #c7d2fe !important;
  border-radius: 8px !important;
  background: #eef2ff !important;
  color: #3730a3 !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
body.v097 .v097Back:hover { background: #e0e7ff !important; color: #1e1b4b !important; }
body.v097 .v097Back:focus-visible { outline: 2px solid #4f46e5 !important; outline-offset: 2px !important; }
body.v097 .v097Back > span:first-child { font-size: 15px !important; line-height: 1 !important; }

/* ------------------------------------------- 3b. one line for Back and the tabs
   Measured with `#v027WorkTabs` appended to `.taskBarLeft`: Back rendered on
   the first line and the tab pair wrapped onto a second one 27px below, so the
   row was 60px tall and the pair was not "at the very top" in any useful sense.
   The report asked for both on one row.

   `.taskBarLeft` is a flex line here - it was already the left third of the
   header bar - and `nowrap` is what keeps the three controls on it. The label
   column that used to sit between them is allowed to shrink and clip, because
   the paper id is also in the page title and the two controls are not. */
html.v096 .workspaceTop .taskBarLeft {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
html.v096 .workspaceTop .taskBarLeft > * { flex: 0 0 auto !important; }
html.v096 .workspaceTop .taskBarLeft .v096Back { margin-right: 0 !important; }
/* The paper id and topic, when they are still children, give up width first. */
html.v096 .workspaceTop .taskBarLeft > .qid,
html.v096 .workspaceTop .taskBarLeft > .taskBarTopic {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* `.taskContext` is a 197px block holding the paper id and the topic, and it is
   what forced the row to 88px and pushed Back to y=-17 - off the top of the
   header entirely. Measured with all three children side by side:

       .taskBarLeft  88px tall, 197px wide
       #v096Back     y = -17     <- above the bar
       .taskContext  y = 10, 197px wide
       #v027WorkTabs y = 31, 172px wide

   The row was never a line; it was three stacked things that happened to share
   a parent. `nowrap` alone cannot fix that, so the context block is hidden
   rather than squeezed: the paper id is the first thing in the page title and
   the topic is on the question card, and neither is worth a 197px column that
   costs the two controls their row. The node and its ids stay - whatever
   re-renders it will find it, and the CSS makes it invisible. */
html.v096 .workspaceTop .taskBarLeft > .taskContext {
  display: none !important;
}

/* The two controls are the same height now that the row is a line: measured
   Back 27px against the tab pair's 40px, so Back sat 7px low and the pair 0px
   from the top. The tab pair's extra height is its own padding - the buttons
   inside are 27px - so the row is aligned to the buttons and the pair is given
   `align-self: center` rather than a height of its own. */
html.v096 #v027WorkTabs { height: 27px !important; align-self: center !important; }
html.v096 .v096Back { align-self: center !important; }

/* ------------------------------------------- 3c. the gap above the toolbar
   Measured on the live site after the Back button went into the practice
   panel: it rendered correctly - 73x27 at y=26, first in reading order - and
   150px of empty space opened up between it and the toolbar below.

   The cause is the host. "The first visible block wide enough" is a column that
   carries padding and a bottom margin for a heading arrangement the button is
   no longer part of, so nothing was hidden and nothing was added - the space was
   already there. The script now picks the heading's own parent instead, and
   these two rules remove what is left of the old arrangement's spacing. */
html.v097 #v097PracticeBack { margin-bottom: 0 !important; }
html.v097 #practice h2 { margin-top: 0 !important; }