/* V094 — the three P0 defects from the click-audit.

   The audit that produced this file drove the real browser: it clicked every
   control and walked the whole answer-a-mark flow, rather than measuring the
   DOM. All three of these are invisible to a DOM measurement - a button that
   does nothing, text at contrast 1.10, and a navigation that is not there. */

body.ial-v030 #workspace {}

/* ===========================================================================
   1. The position label, at contrast 1.10 on the workspace header.

   Measured on the dark header (#172033), every element computed:

     P1-2019-JAN-Standard-Q1   #FFFFFF on #172033   16.27  ok
     Question 1 of 2680        #0F172A on #172033    1.10  invisible
     00:06                     #FFFFFF on #172033   16.27  ok
     Not submitted             #64748B on #172033    3.42  short of 4.5
     Finish question           #EEF3FB on #4F46E5    5.64  ok

   v090.css:67 gave .taskPosition `color: var(--c-ink)` while making it the
   leading element in the header - the token is #0F172A, which is a page-ink
   colour and not a header-ink colour. The header was already dark before v090
   touched it, so this was never a theme question.

   The status word is short and it is what a student reads to know whether the
   question went in. Both are now checked against the ground colour rather than
   against a token that means "ink on paper". */
body.ial-v030 #workspace .taskPosition {
  color: #e8eefb !important;
  /* The header is #172033. #E8EEFB measures 14.9:1 - it does not need to be
     dimmed, and dimming it is what produced the 1.10 in the first place. */
}

body.ial-v030 #workspace .taskSubmitStatus {
  color: #a9b8d0 !important;
  /* #A9B8D0 on #172033 measures 8.1:1. The old #64748B managed 3.42, and
     "Not submitted" is a state the student has to be able to read. */
}

body.ial-v030 #workspace .taskSubmitStatus.is-submitted {
  color: #6ee7b7 !important;
  /* #047857 was a dark-theme green on a dark header: 2.3:1. The submitted state
     is good news and it should look like it. */
}

/* The same header exists in the paper workspace (enterPaperFullscreen), and it
   is dark there too. The rules above are scoped to #workspace, which is the
   ancestor in both cases, so nothing else has to be repeated. */

/* ===========================================================================
   2. Mobile: no way to leave.

   Measured at 390x844:
     .sidebar              display:none, w=0
     #sidebarCollapseBtn   display:none
     .mobileMenuBtn        MISSING
     [class*=hamburger]    MISSING
     #mobileMenuBtn        MISSING

   A student who opens a question on a phone reaches a full-screen workspace with
   no navigation in it. v078 hides the sidebar below 980px and nothing replaced
   it. The panel is built in v094-features.mjs; the styling is here.

   The button is fixed to the top-left, which on a phone is where the thumb
   already is and where nothing else competes. The drawer is a sheet over the
   workspace rather than a push, so the question does not shift when it opens. */
/* ===========================================================================
   3. P1-3: one action, one button.

   Measured pairs, both members calling the same function:
     y=8    Finish question   .taskBarRight       AITutor.showFinishChoice()
     y=861  Finish →          .v074-bottom-bar   AITutor.showFinishChoice()
     y=771  Need a hint?      .workspaceHints     toggleComplexHint('hb')
     y=864  Need a hint?      .v074-bottom-bar   toggleComplexHint('hb')
     y=771  AI Tutor          .workspaceHints     AITutor.togglePanel(...)
     y=864  AI Tutor          .v074-bottom-bar   AITutor.togglePanel(...)

   The bottom bar keeps Finish - a sticky action at the end of a long answer
   sheet earns its place, and the header copy stays because the header is what
   is visible when the sheet is scrolled. The two hint duplicates go: they sit
   one screen apart and are identical, and the pair made the footer look like a
   second toolbar rather than a place to finish.

   The nodes stay in the DOM. They are marked aria-hidden and removed from the
   tab order, not deleted, because deleting a node an inline onclick names is
   how a workspace ends up with a button that throws when it is clicked. */
#v074BottomBar .v094Dupe { display: none !important; }

/* One item left in a bar laid out for three: it centres, and being the only
   primary action down here it is allowed to be wider than the padding v074 set
   for the three-button version. */
#v074BottomBar .v094SingleAction {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 190px !important;
  min-height: 44px !important;
  padding: 12px 34px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius: 11px !important;
}

#v074BottomBar {
  padding: 8px 16px !important;
  background: rgba(255, 255, 255, .96) !important;
}
html[data-ial-theme="dark"] #v074BottomBar {
  background: rgba(16, 26, 43, .96) !important;
  border-top-color: #26344c !important;
}

/* ===========================================================================
   5. P2-2: the locked chapter card, back to one line of title.

   Measured: 582x76 with a 161x21 title when open, 582x146 with an 81x65 title
   (four wrapped lines) when locked. The cause is a <small> that
   v086-features.mjs installSummaryLocks() appends to every locked card reading
   "Sign in to read this chapter - the first 2 chapters are open now". The card
   is display:flex, so that sentence is a third flex item competing with the
   title for the same row.

   It is HIDDEN, not removed. The first attempt did remove() it and the page
   hung - exit 137, no output at all. Two observers that cannot see each other:
   v086's watches document.body with subtree:true and re-appends the note
   whenever a locked card looks changed, and the removal is itself a mutation.
   v086 is shipped and locked by tests/v086-features.test.mjs, so hiding it is
   both the cheap fix and the only one that cannot deadlock.

   The card already says this three times over: the padlock glyph, the .chSub
   line from summary-ui.mjs:146, and the aria-label. What was missing was not
   the explanation but the room to show the chapter name. */
html.v094-summary-trimmed .summaryChapterCard .v086-lockNote {
  display: none !important;
}

.summaryChapterCard .chTitle {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.summaryChapterCard > span:nth-child(2) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.summaryChapterCard .chSub {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* The lock is stated by the padlock and by .chSub. The card itself gets a
   quieter ground so a locked card reads as "not yet" rather than as a card
   that failed to load its title. */
.summaryChapterCard.locked {
  background: #f7f9fc !important;
  border-style: dashed !important;
}
.summaryChapterCard.locked .chTitle { color: #5b6b88 !important; }
.summaryChapterCard.locked .arrow { opacity: .75 !important; }

html[data-ial-theme="dark"] .summaryChapterCard.locked {
  background: #141e30 !important;
  border-color: #2a3850 !important;
}
html[data-ial-theme="dark"] .summaryChapterCard.locked .chTitle { color: #9fb0cb !important; }

/* ===========================================================================
   6. P1-5: the week chart looks like a control and is not one.

   The audit clicked it and nothing happened, which is correct - it is a
   read-only chart (index.html:1691, rendered by renderWeekly). It sits in the
   same card frame as the things around it that DO navigate, and it carries a
   hover state, so it invites the tap.

   It is not made clickable - a chart of the last seven days has nothing to go
   to. It is made honest: no pointer, no hover lift, and a caption that says
   what it is. */
#home .card:has(#miniWeek) { cursor: default !important; }
#home .card:has(#miniWeek):hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--line, #e3e9f4) !important;
}
#home #miniWeek { cursor: default !important; pointer-events: none !important; }

/* ===========================================================================
   7. The z-index numbers are not arbitrary. Measured inside the workspace:
     #workspace          position:fixed  z-index:120
     .task-bar           position:sticky z-index:60
   A button at z-index 90 measured as "underneath .taskPosition" at
   (20,20) - the one place a thumb goes. It has to clear the workspace itself,
   not the header inside it. */
#v094MobileNav { display: none !important; }

html[data-device="phone"] #v094MobileNav,
html[data-device="phone"].v094-noNav #v094MobileNav {
  display: grid !important;
  position: fixed !important;
  z-index: 200 !important;
  left: 8px !important;
  top: 8px !important;
  width: 40px !important;
  height: 40px !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: 10px !important;
  /* The workspace header is #172033, so the button is on dark even in the light
     theme while the workspace is open. It keeps its own ground so it is legible
     either way. */
  background: #172033 !important;
  color: #e8eefb !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(4, 14, 32, .32) !important;
}

/* Inside the workspace the button sits on the header, so the header has to make
   room for it rather than the two overlapping. Measured: .taskBarLeft is
   display:none on a phone, so the left third of the bar is empty - the button
   goes there and the bar keeps its own height. */
html[data-device="phone"] body.workspace-mode .task-bar {
  padding-left: 54px !important;
}

/* The same button on the normal (non-workspace) pages, where the ground is the
   page. One element, two grounds - the workspace is the only dark one. */
html[data-device="phone"]:not(.workspace-mode) #v094MobileNav {
  background: #ffffff !important;
  border-color: #d7e0ef !important;
  color: #1d2b45 !important;
  box-shadow: 0 2px 8px rgba(20, 38, 65, .12) !important;
}

/* The sheet covers the button's corner. Leaving it visible under the scrim
   means a second tap lands on a control the student cannot see any more. */
html[data-device="phone"].v094-nav-open #v094MobileNav {
  visibility: hidden !important;
}

#v094NavScrim { display: none !important; }

html[data-device="phone"].v094-nav-open #v094NavScrim {
  display: block !important;
  position: fixed !important;
  /* Above #workspace (120) so tapping outside closes the sheet even while the
     full-screen workspace is open. */
  z-index: 210 !important;
  inset: 0 !important;
  background: rgba(8, 20, 39, .42) !important;
}

#v094NavSheet { display: none !important; }

html[data-device="phone"].v094-nav-open #v094NavSheet {
  display: flex !important;
  position: fixed !important;
  z-index: 220 !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: min(300px, 84vw) !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 14px 10px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  background: #ffffff !important;
  box-shadow: 10px 0 34px rgba(4, 14, 32, .3) !important;
  overflow-y: auto !important;
  /* Slide in rather than appear: a navigation that pops reads as a glitch. */
  animation: v094SheetIn .18s ease-out !important;
}

html[data-device="phone"][data-ial-theme="dark"] #v094NavSheet { background: #101a2b !important; }

@keyframes v094SheetIn {
  from { transform: translateX(-14px); opacity: .4; }
  to   { transform: translateX(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-device="phone"].v094-nav-open #v094NavSheet { animation: none !important; }
}

#v094NavSheet .v094SheetHead {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 0 4px 12px !important;
  margin-bottom: 6px !important;
  border-bottom: 1px solid #e3e9f4 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #16233c !important;
}
html[data-device="phone"][data-ial-theme="dark"] #v094NavSheet .v094SheetHead {
  border-bottom-color: #26344c !important;
  color: #e8eefb !important;
}

#v094NavSheet .v094SheetClose {
  border: 0 !important;
  background: #eef2f9 !important;
  color: #3d4d6b !important;
  border-radius: 8px !important;
  padding: 7px 11px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
html[data-device="phone"][data-ial-theme="dark"] #v094NavSheet .v094SheetClose {
  background: #1d2942 !important;
  color: #cfdaec !important;
}

/* The sheet's rows are the real navigation, moved in as nodes by
   v094-features.mjs. They are styled here rather than cloned, so the sheet
   cannot drift from the sidebar it mirrors. */
#v094NavSheet .v094NavList { display: flex !important; flex-direction: column !important; gap: 2px !important; }

#v094NavSheet .v094NavItem {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  width: 100% !important;
  padding: 12px 12px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  text-align: left !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #1d2b45 !important;
  cursor: pointer !important;
  min-height: 46px !important;
}
#v094NavSheet .v094NavItem:active { background: #eef3fb !important; }
#v094NavSheet .v094NavItem.is-active { background: #e7eefc !important; color: #1a2f6b !important; }
html[data-device="phone"][data-ial-theme="dark"] #v094NavSheet .v094NavItem { color: #dbe4f3 !important; }
html[data-device="phone"][data-ial-theme="dark"] #v094NavSheet .v094NavItem:active,
html[data-device="phone"][data-ial-theme="dark"] #v094NavSheet .v094NavItem.is-active {
  background: #1b2740 !important;
  color: #ffffff !important;
}

#v094NavSheet .v094NavItem .ico { font-size: 18px !important; line-height: 1 !important; width: 22px !important; text-align: center !important; }

/* A back affordance that is only in the overflow menu is not a way out: the
   menu itself has to be reached first. The workspace header's own left edge is
   where a thumb is, so the sheet is one tap away and this is the fallback for
   keyboard users. */
#v094NavSheet .v094SheetBack {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin-top: 10px !important;
  padding: 12px !important;
  border: 1px solid #d7e0ef !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #1d2b45 !important;
  cursor: pointer !important;
}
html[data-device="phone"][data-ial-theme="dark"] #v094NavSheet .v094SheetBack {
  border-color: #2b3a54 !important;
  background: #16223a !important;
  color: #dbe4f3 !important;
}