/* ==========================================================================
   V090 — a thinner header, a paper card that shows its three modes, and the
   two contrast holes V087/V088 left behind.
   --------------------------------------------------------------------------
   Everything here was measured in a real browser first. The three defects:

   1. The header above the question and the writing panel took three bands and
      117px before any content started:

        y=10  h=34   tools   timer / Previous / Next / Save / status / more /
                          Finish question / Back      (455px of controls)
        y=19  h=17   title   P1-2019-JAN-Standard-Q1 - P1 - Integration - 4 marks
        y=77  h=40          the lone "Work" tab       <- added by V089

      The third band is V089's own doing. It used to hold "Work" and
      "Mark Scheme"; hiding Mark Scheme (the vertical rail on the right is the
      same action - v073ToggleMs() opens the mark scheme by clicking that tab)
      left a single label with nothing to switch to, occupying 40px.

   2. "Write on the original paper" measured 395x20px - an 11.5px underlined
      link with 0.8px of visual weight, sitting under a 52px checkbox, while
      "Start writing next to it was a 395x41px filled button. v086.css:78 says
      "The card's single primary action", and that pass demoted the feature to
      a footnote. These are three different ways to sit a paper, not one
      primary and two footnotes.

   3. Two bits of V087/V088 text are unreadable, and neither is a rounding
      artefact:
        .v087-planPrice  #1E1B4B on the dark card       - the V088 token flip
                        covers h3/span/small but this class carries its own
                        colour at a higher specificity, so it never flipped
        the FAQ headings #0F172A on #131B28              - contrast 1.03
        .v087-planCta on the yearly plan, LIGHT theme    - white on white, 1.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Header: three bands down to one.
   -------------------------------------------------------------------------- */

/* The lone Work tab is a label with no second tab to switch to. It is removed
   from the layout rather than hidden, so it cannot be reached by keyboard
   either - but its id stays in the DOM, because v073ToggleMs() and the
   "open the mark scheme after submitting" path both click it by id.

   The selector is scoped to #workspace because v089 declares the same
   declaration on the bare class with !important, and two rules of equal
   specificity are settled by load order alone. */
body.ial-v030 #workspace .workingPanel .v027WorkTabs { display: none !important; }

/* One row: context and position on the left, timer and actions on the right.
   The two title bands (taskBarLeft's heading and the timer) were on separate
   lines purely because the flex container had no room; at 1440px there is
   300px of unused space between them. */
body.ial-v030 #workspace .task-bar { align-items: center !important; }
body.ial-v030 #workspace .taskBarLeft { order: 1 !important; }
body.ial-v030 #workspace .taskBarCenter { order: 2 !important; }
body.ial-v030 #workspace .taskBarRight { order: 3 !important; }

/* The question id and the position counter are the same information split
   across two bands ("P1-2019-JAN-Standard-Q1" above, "Q 1 of 2680" below).
   The id is the long one and the position is the one a student actually
   navigates by, so the id goes to small text and the position leads. */
body.ial-v030 #workspace .taskBarLeft .taskContext b {
  font-size: 15px !important; font-weight: 800 !important;
}
body.ial-v030 #workspace .taskBarLeft .taskContext span { display: none !important; }
body.ial-v030 #workspace .taskPosition {
  font-size: 12.5px !important; font-weight: 800 !important; color: var(--c-ink) !important;
}

/* The status word is a fact, not an action. It was 700-weight body text the
   same size as the buttons around it. */
body.ial-v030 #workspace .taskSubmitStatus {
  font-size: 11px !important; font-weight: 600 !important;
  color: var(--c-muted) !important;
}
body.ial-v030 #workspace .taskSubmitStatus.is-submitted { color: #047857 !important; }

/* Previous and Back move into the overflow menu (v090-features.mjs moves the
   nodes, so their handlers travel with them and no id is orphaned). Until that
   script runs they stay visible, so this rule is what the layout falls back
   to and also what keeps them out of the way if JS fails. */
body.ial-v030 #workspace .taskBarRight { gap: 8px !important; }

/* Finish question is the primary action of this screen and stays the only
   filled button up there. */
body.ial-v030 #workspace .btn.taskFinishBtn { padding: 9px 14px !important; font-size: 13px !important; }

/* --------------------------------------------------------------------------
   1b. A click beats a leftover hover.

   Measured before: with the pointer resting on the 48px rail, the collapse
   button took two clicks to do anything. The class toggled correctly both
   times; the :hover rule re-expanded it inside the same frame, so the change
   was invisible.

   The mechanism is already in v089 and it is elegant: every hover rule there
   is written as

       .app.sidebar-collapsed:not(.sidebar-hover-open) .sidebar:hover

   and nothing in the codebase has ever written `sidebar-hover-open` - v085
   reads it in one rule and v089 in six, and no script sets it. So the flag was
   reserved and never wired, which is exactly the class of bug this project
   keeps hitting. v090 wires it: adding the class makes all seven `:not()`
   conditions false, and the rail stays at its collapsed width while a
   deliberately-made click settles.

   This is why the rules below are short. Repeating "and not suppressed" seven
   times would work too, and would need seven more the next time a hover rule
   is added.

   The one rule here is written with the same shape as v089's, minus the
   :not() - matching v085's two-class specificity is not enough on its own,
   because v089's hover rule carries three classes plus the negation and
   v090 loads after it. A selector that only wins on load order is the exact
   thing this project's own test suite is written to catch. */
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:hover,
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:focus-within,
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:hover .nav button,
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:focus-within .nav button,
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:hover .brandCopy,
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:focus-within .brandCopy,
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:hover .nav button > span:not(.ico),
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:focus-within .nav button > span:not(.ico),
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:hover .navsec,
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:focus-within .navsec,
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:hover .sidebarCollapseBtn,
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:focus-within .sidebarCollapseBtn {
  width: 48px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:hover .nav button,
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:focus-within .nav button { font-size: 0 !important; }
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:hover .nav button > span:not(.ico),
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:focus-within .nav button > span:not(.ico),
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:hover .brandCopy,
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:focus-within .brandCopy,
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:hover .navsec,
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:focus-within .navsec { display: none !important; }
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:hover .sidebarCollapseBtn,
body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open .sidebar:focus-within .sidebarCollapseBtn { left: 6px !important; }
/* The content stays where the collapsed rail puts it instead of jumping to the
   252px offset the moment the pointer leaves. */
@media (hover: hover) {
  body.ial-v030 .app.sidebar-collapsed.sidebar-hover-open:has(.sidebar:hover) .main {
    margin-left: 48px !important;
    padding-left: 14px !important;
  }
}

/* --------------------------------------------------------------------------
   2. Paper card: three modes, three buttons.

   Measured before:  Start writing 395x41, timed exam 395x52, original paper
   395x20. Measured after: 395x41, 395x45 - and the card shrinks from 362px to
   316px, so three cards still fit on a screen. */
body.ial-v030 .v085-paper-card-actions { display: flex !important; flex-direction: column !important; gap: 9px !important; }

body.ial-v030 .btn.v085-paper-start {
  width: 100% !important; display: block !important; text-align: center !important;
  padding: 11px 12px !important; border-radius: 10px !important;
  background: linear-gradient(135deg, #4F46E5 0%, #6D28D9 100%) !important;
  color: #fff !important; border: 0 !important;
  font-weight: 800 !important; font-size: 13.5px !important;
}
body.ial-v030 .btn.v085-paper-start:hover { filter: brightness(1.07); }

/* The original-paper mode is the one thing this site does that a worksheet
   cannot, so it gets a full button: outlined rather than filled, so the
   primary action is still the obvious default, but impossible to miss. */
body.ial-v030 .btn.v085-paper-original {
  width: 100% !important;
  margin-top: 0 !important;
  display: block !important; text-align: center !important;
  padding: 11px 12px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 2px solid #4F46E5 !important;
  color: #3730a3 !important;
  font-size: 13.5px !important; font-weight: 800 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
body.ial-v030 .btn.v085-paper-original:hover { background: #eef2ff !important; border-color: #3730a3 !important; }
body.ial-v030 .btn.v085-paper-original:disabled { opacity: .45 !important; cursor: not-allowed !important; }

/* Timed exam mode is gone from the card (V090). startExam() only walks the
   student through the questions and adds up the marks at the end - there is no
   answer upload, no per-question feedback, no report, so a score it produces
   cannot tell a student what to revise. The module stays in the repo for a real
   exam later; the checkbox that reached it does not. This rule is the
   belt-and-braces half: the node is also removed by the script, so a paper card
   rendered without JS still shows two modes instead of three. */
body.ial-v030 label.v085-paper-timed { display: none !important; }

/* --------------------------------------------------------------------------
   3. The two unreadable texts, and the third that was hiding in plain sight.

   Every selector here is the class the markup actually carries - the first
   attempt guessed .v027-faq and .faqItem and matched nothing, which is the
   usual way a contrast "fix" turns out to have fixed nothing:
     .v087-faqLine > b            the FAQ lines, v087.css:92
     .v087-plan.is-featured       the Best value card, v087.css:51/76
     .v087-plan .v087-planPrice   carries its own #1E1B4B at (0,2,0)
   -------------------------------------------------------------------------- */
html[data-ial-theme="dark"] .v087-plan .v087-planPrice { color: #f1f5f9 !important; }
html[data-ial-theme="dark"] .v087-plan .v087-planPrice small { color: #cbd5e1 !important; }

/* #047857 on #131B28 measured 2.87. The saving is real information, so it is
   lightened rather than dropped. */
html[data-ial-theme="dark"] .v087-plan .v087-planSave { color: #6ee7b7 !important; }

/* #0F172A on the dark card measured 1.03 - the three FAQ headings were
   invisible, not faint. */
html[data-ial-theme="dark"] .v087-faqLine b { color: #e2e8f0 !important; }
html[data-ial-theme="dark"] .v087-faqLine { color: #b6c2d4 !important; }

/* The Best value card paints itself white in the LIGHT theme to lift it out of
   the page, and v087.css:76 then gives its button white text - so the button
   was white on white, contrast 1.0, an invisible control. The dark theme
   repaints the card dark and needs the light text back. */
body.ial-v030 .v087-plan.is-featured .btn.v087-planCta { color: #ffffff !important; }

/* Measured after the flip above: the Best value badge is #C6D1E0 on the
   #4F46E5 fill, 4.07. One step of lightness clears it. */
html[data-ial-theme="dark"] .v087-plan .v087-planBadge { color: #eef2ff !important; }

/* --------------------------------------------------------------------------
   4. The practice preset row measured three buttons stretched across the full
   1440px. They are three short labels; the row should read as a toolbar.
   -------------------------------------------------------------------------- */
body.ial-v030 .practiceFilterMeta .v086-preset { flex: 0 1 auto !important; }

/* --------------------------------------------------------------------------
   5. Dark mode, for the surfaces this file changes.
   -------------------------------------------------------------------------- */
html[data-ial-theme="dark"] body.ial-v030 .btn.v085-paper-original {
  background: #1a2333 !important;
  border-color: #6d8bff !important;
  color: #c7d2fe !important;
}
html[data-ial-theme="dark"] body.ial-v030 .btn.v085-paper-original:hover {
  background: #232f45 !important;
  border-color: #93a8ff !important;
}