/* IQMentis focused UI cleanup — presentation only.
   No progress, synchronization, authentication, content, or persistence logic is changed here. */

/* 1) Question strip: preserve semantic status color; current question is only a pressed-location layer. */
.number-chip { position:relative; }
.number-chip.current {
  z-index:2;
  transform:translateY(1px) scale(.97);
  outline:0 !important;
  box-shadow:inset 0 3px 5px rgba(0,0,0,.24),inset 0 -1px 0 rgba(255,255,255,.28) !important;
}
.number-chip.current::after {
  content:"";
  position:absolute;
  inset:-4px;
  border:2px solid color-mix(in srgb,var(--text) 76%,transparent);
  border-radius:12px;
  pointer-events:none;
  box-shadow:0 1px 0 color-mix(in srgb,var(--surface) 74%,transparent);
}
html[data-theme="dark"] .number-chip.current::after {
  border-color:rgba(245,250,248,.82);
  box-shadow:0 1px 0 rgba(0,0,0,.7);
}

/* Semantic precedence: skipped > comparison > flagged > answer result > neutral. */
html[data-theme="light"] body:has(#app > .app-header) .number-chip.correct:not(.flagged):not(.comparison):not(.skipped) {
  border-color:#2f7f60 !important;
  background:rgba(24,126,82,.23) !important;
  color:#15583f !important;
}
html[data-theme="light"] body:has(#app > .app-header) .number-chip.wrong:not(.flagged):not(.comparison):not(.skipped) {
  border-color:#9d4050 !important;
  background:rgba(165,42,59,.22) !important;
  color:#741f31 !important;
}
html[data-theme="light"] body:has(#app > .app-header) .number-chip.flagged:not(.comparison):not(.skipped) {
  border-color:#b88813 !important;
  background:rgba(225,173,34,.31) !important;
  color:#6f5200 !important;
  box-shadow:none;
}
html[data-theme="light"] body:has(#app > .app-header) .number-chip.comparison:not(.skipped) {
  border-color:#347bb5 !important;
  background:rgba(50,126,190,.24) !important;
  color:#174f7a !important;
  box-shadow:none;
}
html[data-theme="light"] body:has(#app > .app-header) .number-chip.skipped,
html[data-theme="light"] body:has(#app > .app-header) .number-chip.skipped.current {
  border-color:#818b90 !important;
  background:rgba(120,130,136,.22) !important;
  color:#485257 !important;
  box-shadow:none !important;
}
html[data-theme="light"] body:has(#app > .app-header) .number-chip.current:not(.correct):not(.wrong):not(.flagged):not(.comparison):not(.skipped) {
  border-color:#899692 !important;
  background:#f3f6f5 !important;
  color:#17211e !important;
}
html[data-theme="light"] body:has(#app > .app-header) .number-chip.skipped .skip-mark {
  color:#3f474b !important;
  text-shadow:none !important;
}

html[data-theme="dark"] body:has(#app > .app-header) .number-chip.correct:not(.flagged):not(.comparison):not(.skipped) {
  border-color:#4d9e79 !important;
  background:rgba(35,133,88,.36) !important;
  color:#a7e7c7 !important;
}
html[data-theme="dark"] body:has(#app > .app-header) .number-chip.wrong:not(.flagged):not(.comparison):not(.skipped) {
  border-color:#b85969 !important;
  background:rgba(160,46,64,.38) !important;
  color:#ffb4be !important;
}
html[data-theme="dark"] body:has(#app > .app-header) .number-chip.flagged:not(.comparison):not(.skipped) {
  border-color:#c09a32 !important;
  background:rgba(205,160,35,.30) !important;
  color:#e8c250 !important;
  box-shadow:none;
}
html[data-theme="dark"] body:has(#app > .app-header) .number-chip.comparison:not(.skipped) {
  border-color:#5898cc !important;
  background:rgba(43,116,177,.38) !important;
  color:#b8dcfa !important;
  box-shadow:none;
}
html[data-theme="dark"] body:has(#app > .app-header) .number-chip.skipped,
html[data-theme="dark"] body:has(#app > .app-header) .number-chip.skipped.current {
  border-color:#707a76 !important;
  background:rgba(111,121,117,.30) !important;
  color:#d0d6d3 !important;
  box-shadow:none !important;
}
html[data-theme="dark"] body:has(#app > .app-header) .number-chip.current:not(.correct):not(.wrong):not(.flagged):not(.comparison):not(.skipped) {
  border-color:#6c7772 !important;
  background:#202622 !important;
  color:#f2f6f4 !important;
}
html[data-theme="dark"] body:has(#app > .app-header) .number-chip.skipped .skip-mark {
  color:#e0e5e2 !important;
  text-shadow:none !important;
}

/* 2) Light mode: stronger, controlled contrast in both comfort states. */
html[data-theme="light"] body:has(#app > .app-header) {
  --graded-correct-bg:rgba(20,119,79,.23);
  --graded-correct-border:#2a7458;
  --graded-correct-text:#114c37;
  --graded-correct-letter-bg:rgba(20,119,79,.32);
  --graded-correct-letter-border:#24664e;
  --graded-wrong-bg:rgba(151,35,52,.21);
  --graded-wrong-border:#853346;
  --graded-wrong-text:#681e2e;
  --graded-wrong-letter-bg:rgba(151,35,52,.31);
  --graded-wrong-letter-border:#742b3b;
}
html[data-theme="light"] body:has(#app > .app-header) :is(
  .drawer-link,.tool-word,.tool-icon,.mini-tool,.review-tool,.nav-button,.button,.chapter-reset-button,
  .reader-crumbs > button,.option,.retired-option
) {
  font-weight:800;
}
html[data-theme="light"] body:has(#app > .app-header) .drawer-link {
  color:#26312e;
}
html[data-theme="light"] body:has(#app > .app-header) .drawer-link:hover,
html[data-theme="light"] body:has(#app > .app-header) .drawer-link.active {
  color:#0c5f4f;
  background:rgba(15,105,87,.11);
}
html[data-theme="light"] body:has(#app > .app-header) .reader-toolbar .comparison-tool:not(.active) {
  border-color:#4c92bf !important;
  background:rgba(75,150,194,.09) !important;
  background-image:none !important;
  color:#14577d !important;
}
html[data-theme="light"] body:has(#app > .app-header) .reader-toolbar .comparison-tool.active {
  color:#ffffff !important;
}
html[data-theme="light"] body:has(#app > .app-header) .reader-toolbar .reset-tool {
  border-color:#a64d5c !important;
  background:rgba(163,52,70,.10) !important;
  color:#7b2434 !important;
}
html[data-theme="light"] body:has(#app > .app-header) .reader-toolbar .skip-tool {
  border-color:#7b8783 !important;
  background:rgba(100,112,108,.09) !important;
  color:#44504c !important;
}
html[data-theme="light"] body:has(#app > .app-header) .reader-toolbar .tool-icon {
  border-color:#9aa9a4 !important;
  color:#25312d !important;
}
html[data-theme="light"] body:has(#app > .app-header) .option:not(.correct):not(.incorrect),
html[data-theme="light"] body:has(#app > .app-header) .retired-option:not(.correct):not(.incorrect) {
  border-color:#aebbb7 !important;
  color:#17211e !important;
}
html[data-theme="light"] body:has(#app > .app-header) :is(.option-text,.retired-option-text) {
  color:inherit;
}
html[data-theme="light"] body:has(#app > .app-header) :is(.option-letter,.retired-option-letter) {
  border:1px solid #bcc9c5;
  color:#0b6654;
  font-weight:900;
}
html[data-theme="light"] body:has(#app > .app-header) .drawer-link.flagged {
  color:#725400;
}
html[data-theme="light"] body:has(#app > .app-header) .drawer-link.comparison {
  color:#155b88;
}
html[data-theme="light"] body:has(#app > .app-header) .drawer-link.wrong {
  color:#7d2636;
}

/* 3) Explanation Highlight button follows its text and chosen reader size, never the container width. */
.explanation-highlight-wrap {
  display:inline-flex !important;
  align-items:center;
  inline-size:max-content !important;
  width:max-content !important;
  max-inline-size:100%;
  max-width:100%;
  flex:0 0 auto !important;
  position:relative;
}
.explanation-highlight-wrap .highlight-brush {
  inline-size:max-content !important;
  width:max-content !important;
  min-inline-size:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:.30em .62em !important;
  flex:0 0 auto !important;
  font-size:clamp(10px,calc(var(--reader-size) * .60),17px) !important;
  line-height:1.12 !important;
  white-space:nowrap;
}

/* 4) Answer choices: thinner, lower, closer to their text, and slightly inset from the left edge. */
.reader-content .options {
  width:calc(100% - 10px);
  margin:11px 0 13px 10px;
  gap:9px;
}
.reader-content .option,
.reader-content .option:is(.active,.correct,.incorrect) {
  min-height:40px !important;
  padding:5px 9px !important;
  gap:8px !important;
  border-width:1px !important;
  border-radius:10px !important;
  line-height:1.30 !important;
}
.reader-content .option-letter {
  width:28px !important;
  height:28px !important;
  flex:0 0 28px !important;
  border-radius:7px !important;
}
.retired-review-options {
  gap:10px !important;
  padding-inline-start:8px;
}
.retired-option,
.retired-option:is(.draft,.correct,.incorrect),
.retired-option:not([aria-disabled="true"]):hover {
  min-height:40px !important;
  padding:5px 9px !important;
  gap:8px !important;
  border-width:1px !important;
  border-radius:10px !important;
  line-height:1.30 !important;
}
.retired-option-letter {
  width:28px !important;
  height:28px !important;
  flex:0 0 28px !important;
  border-radius:7px !important;
}
.comparison-options {
  padding-inline-start:26px !important;
}
.comparison-option {
  padding:6px 9px !important;
  grid-template-columns:26px minmax(0,1fr) !important;
  gap:7px !important;
  border-width:1px !important;
  border-radius:9px !important;
  line-height:1.34 !important;
}
.comparison-option b {
  width:24px !important;
  height:24px !important;
  border-radius:6px !important;
}
.iqm-search-options li {
  padding-block:6px !important;
  padding-inline:9px !important;
  border-width:1px !important;
}

/* 5) Flag is transparent while off; active is a controlled yellow tint. Applies to every theme. */
html[data-theme] body:has(#app > .app-header) .reader-toolbar :is(.flag,.review-tool.flag):not(.active) {
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
html[data-theme="light"] body:has(#app > .app-header) .reader-toolbar :is(.flag,.review-tool.flag):not(.active) {
  border-color:#a67b12 !important;
  color:#745600 !important;
}
html[data-theme="light"] body:has(#app > .app-header) .reader-toolbar :is(.flag,.review-tool.flag).active {
  border-color:#ad8318 !important;
  background:rgba(224,174,43,.24) !important;
  background-image:none !important;
  color:#654b00 !important;
  box-shadow:0 2px 0 rgba(153,112,12,.28) !important;
}
html[data-theme="dark"] body:has(#app > .app-header) .reader-toolbar :is(.flag,.review-tool.flag):not(.active) {
  border-color:#b99128 !important;
  color:#d4aa31 !important;
}
html[data-theme="dark"] body:has(#app > .app-header) .reader-toolbar :is(.flag,.review-tool.flag).active {
  border-color:#c49a2f !important;
  background:rgba(211,164,39,.24) !important;
  background-image:none !important;
  color:#e1b83e !important;
  box-shadow:0 2px 0 rgba(117,87,10,.42) !important;
}

@media (max-width:640px) {
  .reader-content .options {
    width:calc(100% - 8px);
    margin-inline-start:8px;
  }
  .reader-content .option,
  .reader-content .option:is(.active,.correct,.incorrect),
  .retired-option,
  .retired-option:is(.draft,.correct,.incorrect) {
    min-height:38px !important;
    padding:4px 8px !important;
  }
}

/* 6) Dark drawer: semantic study destinations remain immediately recognizable. */
html[data-theme="dark"] body:has(#app > .app-header) .drawer-link[data-go="retired-review"] {
  color:#73d4b5 !important;
}
html[data-theme="dark"] body:has(#app > .app-header) .drawer-link.flagged,
html[data-theme="dark"] body:has(#app > .app-header) .drawer-link[data-go="practice/flagged"] {
  color:#e1b947 !important;
}
html[data-theme="dark"] body:has(#app > .app-header) .drawer-link.comparison,
html[data-theme="dark"] body:has(#app > .app-header) .drawer-link[data-go="comparison"] {
  color:#78b8f3 !important;
}
html[data-theme="dark"] body:has(#app > .app-header) .drawer-link.wrong,
html[data-theme="dark"] body:has(#app > .app-header) .drawer-link[data-go="practice/wrong"] {
  color:#ed8493 !important;
}
html[data-theme="dark"] body:has(#app > .app-header) :is(
  .drawer-link[data-go="retired-review"],
  .drawer-link[data-go="practice/flagged"],
  .drawer-link[data-go="comparison"],
  .drawer-link[data-go="practice/wrong"]
) .drawer-icon {
  color:inherit !important;
}
html[data-theme="dark"] body:has(#app > .app-header) .drawer-link[data-go="retired-review"]:is(:hover,.active) { background:rgba(74,181,145,.11) !important; }
html[data-theme="dark"] body:has(#app > .app-header) .drawer-link[data-go="practice/flagged"]:is(:hover,.active) { background:rgba(211,167,44,.11) !important; }
html[data-theme="dark"] body:has(#app > .app-header) .drawer-link[data-go="comparison"]:is(:hover,.active) { background:rgba(71,139,207,.12) !important; }
html[data-theme="dark"] body:has(#app > .app-header) .drawer-link[data-go="practice/wrong"]:is(:hover,.active) { background:rgba(194,69,87,.11) !important; }

/* 7) Dark mode without eye comfort: calmer semantic chips instead of bright blocks. */
html[data-theme="dark"][data-reading-comfort="off"] body:has(#app > .app-header) .number-chip.correct:not(.flagged):not(.comparison):not(.skipped) {
  border-color:rgba(77,158,121,.64) !important;
  background:rgba(35,133,88,.17) !important;
  color:#83cbaa !important;
}
html[data-theme="dark"][data-reading-comfort="off"] body:has(#app > .app-header) .number-chip.wrong:not(.flagged):not(.comparison):not(.skipped) {
  border-color:rgba(184,89,105,.64) !important;
  background:rgba(160,46,64,.18) !important;
  color:#e89ca7 !important;
}
html[data-theme="dark"][data-reading-comfort="off"] body:has(#app > .app-header) .number-chip.flagged:not(.comparison):not(.skipped) {
  border-color:rgba(192,154,50,.62) !important;
  background:rgba(205,160,35,.15) !important;
  color:#d3b44c !important;
}
html[data-theme="dark"][data-reading-comfort="off"] body:has(#app > .app-header) .number-chip.comparison:not(.skipped) {
  border-color:rgba(88,152,204,.66) !important;
  background:rgba(43,116,177,.22) !important;
  color:#9ec8eb !important;
}
html[data-theme="dark"][data-reading-comfort="off"] .number-chip.current::after {
  border-color:rgba(235,242,239,.64) !important;
}

/* 8) Explanation tools share one visual height; Highlight remains content-width. */
.explanation-tools {
  align-items:center !important;
}
.explanation-tools > button,
.explanation-tools > .explanation-highlight-wrap,
.explanation-highlight-wrap .highlight-brush {
  height:34px !important;
  min-height:34px !important;
}
.explanation-highlight-wrap {
  align-self:center !important;
}
.explanation-highlight-wrap .highlight-brush {
  padding:0 .62em !important;
  line-height:1 !important;
}

/* 9) Pure-black reading surface for dark mode when eye comfort is OFF. Semantic result fills remain intact. */
html[data-theme="dark"][data-reading-comfort="off"] body:has(#app > .app-header) .reader-shell,
html[data-theme="dark"][data-reading-comfort="off"] body:has(#app > .app-header) .reader-shell :is(
  .reader-topnav,.reader-context-head,.reader-number-nav,.reader-card,.reader-content,
  .reader-toolbar,.answer-area,.answer-section,.explanation-head,.explanation-tools,
  .question-stem,.lead-in,.reveal-answer-box,.note-card,.note-card textarea
) {
  background:#000000 !important;
  background-image:none !important;
}
html[data-theme="dark"][data-reading-comfort="off"] body:has(#app > .app-header) .reader-shell .option:not(.correct):not(.incorrect):not(.active),
html[data-theme="dark"][data-reading-comfort="off"] body:has(#app > .app-header) .retired-option:not(.correct):not(.incorrect):not(.draft),
html[data-theme="dark"][data-reading-comfort="off"] body:has(#app > .app-header) .comparison-option:not(.correct),
html[data-theme="dark"][data-reading-comfort="off"] body:has(#app > .app-header) .iqm-search-options li:not(.is-correct) {
  background:#000000 !important;
  background-image:none !important;
}
html[data-theme="dark"][data-reading-comfort="off"] body:has(#app > .app-header) .reader-shell :is(.reader-context-head,.reader-number-nav,.reader-card,.answer-section,.option,.question-stem,.lead-in) {
  border-color:#333b38;
}

/* 10) All themes: toolbar is a separate visual zone, then a clean reading gap. */
body:has(#app > .app-header) .reader-toolbar {
  width:100%;
  margin-bottom:12px !important;
  padding-bottom:10px !important;
  border-bottom:2px solid color-mix(in srgb,var(--line-strong) 82%,var(--text)) !important;
}
body:has(#app > .app-header) .reader-toolbar + .reader-content {
  padding-top:4px !important;
}
html[data-theme="light"] body:has(#app > .app-header) .reader-toolbar {
  border-bottom-color:#9eaaa6 !important;
}
html[data-theme="dark"] body:has(#app > .app-header) .reader-toolbar {
  border-bottom-color:#4c5753 !important;
}

/* 11) Light reader consistency: option text follows Reader weight in both comfort states, and primary actions stay legible. */
html[data-theme="light"] body:has(#app > .app-header) .reader-content .option,
html[data-theme="light"] body:has(#app > .app-header) .reader-content .option-text {
  font-weight:var(--reader-weight) !important;
}
html[data-theme="light"] body:has(#app > .app-header) .reader-content .option-letter {
  font-weight:900 !important;
}
/* Retired review answer wording must track the live reader typography in every theme.
   Keep the letter badge and graded/selected colors independent. */
html[data-theme] body:has(#app > .app-header) .retired-option .retired-option-text {
  font-family:var(--reader-family) !important;
  font-size:var(--reader-size) !important;
  font-weight:var(--reader-weight) !important;
  line-height:1.65 !important;
}
/* Shared account illustration; the existing initials remain user-specific. */
body:has(#app > .app-header) .avatar-sticker {
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  padding:0 0 7px;
  background:#102e58 url("/assets/account-student-book.webp") center/cover no-repeat;
  color:#fff5d9;
  font-family:Arial,Helvetica,sans-serif;
  font-size:7px;
  font-weight:800;
  line-height:1;
  letter-spacing:.02em;
  text-shadow:0 1px 2px #06244a;
}
@media (max-width:640px) {
  body:has(#app > .app-header) .avatar-sticker { padding-bottom:6px;font-size:6px; }
}
html[data-theme="light"] body:has(#app > .app-header) .button.primary {
  color:#ffffff !important;
  background:var(--accent-strong) !important;
  background-image:none !important;
  border-color:var(--accent-strong) !important;
}
html[data-theme="light"] body:has(#app > .app-header) .button.primary:disabled {
  opacity:1 !important;
  color:color-mix(in srgb,var(--accent-strong) 82%,var(--text)) !important;
  background:color-mix(in srgb,var(--accent-strong) 16%,var(--surface)) !important;
  border-color:color-mix(in srgb,var(--accent-strong) 42%,var(--line-strong)) !important;
  cursor:not-allowed;
}