/* ==========================================================================
   OgbonMath — Diagnostic Quiz Modal
   --------------------------------------------------------------------------
   Styles the first-time diagnostic quiz flow:
     - Active question modal (appears in #mr)
     - Results modal with answer review + recommended starting lesson

   The legacy .diag-card / .diag-step / .card-ok / .card-no classes remain
   in styles.css; we override with our warm palette here. Since diagnostic
   renders into #mr (modal root), we scope via :has/:is selectors on the
   modal container rather than body[data-view].
   ========================================================================== */

/* ==========================================================================
   Diag card — Q&A review item (appears in results modal)
   ==========================================================================
*/
#mr .diag-card {
  background: var(--bg2) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--sp-4) var(--sp-5) !important;
  margin-bottom: var(--sp-3) !important;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease-out);
}

#mr .diag-card:hover {
  border-color: var(--bdr2) !important;
}

#mr .diag-card.card-ok {
  border-left: 3px solid var(--gn) !important;
}

#mr .diag-card.card-no {
  border-left: 3px solid var(--rd) !important;
}

/* Q number label — small-caps sans */
#mr .diag-card > div:first-child > span:nth-child(2) {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-widest) !important;
  text-transform: uppercase !important;
  color: var(--tx2) !important;
}

/* Question text — serif prose */
#mr .diag-card > p {
  font-family: var(--font-serif) !important;
  font-size: var(--fs-base) !important;
  line-height: var(--lh-relaxed) !important;
  color: var(--tx) !important;
  margin-bottom: var(--sp-3) !important;
}

/* "Yours:" / "Correct:" labels */
#mr .diag-card > div[style*="font-size:12px"] {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-sm) !important;
  line-height: var(--lh-relaxed) !important;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-2) !important;
}

#mr .diag-card > div[style*="font-size:12px"] span[style*="color:var(--rd)"] {
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--rd) !important;
}

#mr .diag-card > div[style*="font-size:12px"] span[style*="color:var(--gn)"] {
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--gn) !important;
}

/* Step-by-step label + steps */
#mr .diag-card > div[style*="border-top"] {
  border-top: 1px solid var(--bdr) !important;
  padding-top: var(--sp-3) !important;
  margin-top: var(--sp-3) !important;
}

#mr .diag-card > div[style*="border-top"] > div:first-child {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-widest) !important;
  text-transform: uppercase !important;
  color: var(--ac) !important;
  margin-bottom: var(--sp-2) !important;
}

#mr .diag-step {
  font-family: var(--font-serif) !important;
  font-size: var(--fs-sm) !important;
  line-height: var(--lh-relaxed) !important;
  color: var(--tx1) !important;
  padding: 6px 0 6px var(--sp-3) !important;
  border-left: 2px solid var(--bdr) !important;
  margin-bottom: 4px !important;
  position: relative;
}

#mr .diag-step::before {
  /* Colored dot to mark the step — terracotta accent */
  content: "";
  position: absolute;
  left: -4px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ac);
}

/* ==========================================================================
   Results modal header + recommendation block
   ==========================================================================
*/
#mr .md-h h2 {
  font-family: var(--font-display) !important;
  font-size: var(--fs-2xl) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-tight) !important;
  color: var(--tx) !important;
  margin-bottom: var(--sp-2) !important;
}

#mr .md-h p[style*="font-family:var(--mono)"] {
  font-family: var(--font-mono) !important;
  font-size: var(--fs-xl) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--ac) !important;
  margin-top: var(--sp-2) !important;
}

/* "Recommended Start" recommendation card (.cb) */
#mr .cb {
  background: var(--ac-soft) !important;
  border: 1px solid var(--ac) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--sp-4) var(--sp-5) !important;
  margin-bottom: var(--sp-5) !important;
}

#mr .cb h4 {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-widest) !important;
  text-transform: uppercase !important;
  color: var(--ac) !important;
  margin-bottom: var(--sp-1) !important;
}

#mr .cb p[style*="font-size:16px"],
#mr .cb > p:nth-of-type(1) {
  font-family: var(--font-display) !important;
  font-size: var(--fs-lg) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-tight) !important;
  color: var(--tx) !important;
  margin-bottom: var(--sp-1) !important;
}

#mr .cb p[style*="color:var(--tx3)"] {
  font-family: var(--font-serif) !important;
  font-size: var(--fs-sm) !important;
  color: var(--tx2) !important;
  line-height: var(--lh-relaxed) !important;
}

/* "Answer Review" label in results */
#mr .md-b > div[style*="font-weight:700"][style*="text-transform:uppercase"] {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-widest) !important;
  text-transform: uppercase !important;
  color: var(--tx2) !important;
  margin-bottom: var(--sp-3) !important;
}

/* ==========================================================================
   Active diagnostic question (before submission)
   ==========================================================================
*/
#mr [data-dopt] {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  font-weight: var(--fw-medium) !important;
  padding: var(--sp-3) var(--sp-4) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--radius-md) !important;
  background: var(--bg2) !important;
  color: var(--tx) !important;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: var(--sp-2) !important;
}

#mr [data-dopt]:hover {
  background: var(--ac-soft) !important;
  border-color: var(--ac) !important;
  color: var(--tx) !important;
}

#mr [data-dopt]:active {
  transform: scale(var(--active-scale));
}