/*
 * Nest English — Phase 8 / Assessment & Practice Flow Elevation
 *
 * Purpose:
 * - calm, premium assessment surfaces without changing assessment logic
 * - distinguish answer states clearly while reducing visual anxiety
 * - create a consistent progress / timer / feedback language
 * - make result reporting feel editorial, encouraging and scannable
 * - preserve LTR / RTL parity and reduced-motion accessibility
 */

/* ---------- Shared assessment canvas ---------- */
body.nest-editorial #quiz-section,
body.nest-editorial #listening-section,
body.nest-editorial #speaking-section {
  background:
    radial-gradient(700px 320px at 12% 8%, rgba(181,138,86,.07), transparent 68%),
    radial-gradient(720px 360px at 88% 84%, rgba(95,138,118,.08), transparent 70%),
    linear-gradient(180deg, var(--nest-paper) 0%, #f8f4ec 100%) !important;
}

html.dark body.nest-editorial #quiz-section,
html.dark body.nest-editorial #listening-section,
html.dark body.nest-editorial #speaking-section {
  background:
    radial-gradient(720px 340px at 12% 8%, rgba(95,138,118,.11), transparent 68%),
    radial-gradient(760px 360px at 88% 84%, rgba(181,138,86,.05), transparent 70%),
    linear-gradient(180deg, #0b120f 0%, #0f1712 100%) !important;
}

body.nest-editorial #quiz-section > .calm-breathe {
  opacity: .55;
  filter: blur(.2px);
}

/* ---------- Assessment card ---------- */
body.nest-editorial #quiz-card,
body.nest-editorial #listening-section > .glass-panel,
body.nest-editorial #speaking-section > .glass-panel {
  border: 1px solid var(--nest-line-strong) !important;
  border-radius: var(--nest-radius-xl) !important;
  background: color-mix(in srgb, var(--nest-surface-strong) 92%, transparent) !important;
  box-shadow: 0 28px 70px rgba(31,54,42,.11), inset 0 1px 0 rgba(255,255,255,.72) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
html.dark body.nest-editorial #quiz-card,
html.dark body.nest-editorial #listening-section > .glass-panel,
html.dark body.nest-editorial #speaking-section > .glass-panel {
  border-color: var(--nest-dark-line) !important;
  background: color-mix(in srgb, var(--nest-dark-surface-strong) 88%, transparent) !important;
  box-shadow: 0 28px 76px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.045) !important;
}

body.nest-editorial #quiz-active-box,
body.nest-editorial #quiz-resume-box {
  scroll-margin-top: 2rem;
}

/* ---------- Exam banner ---------- */
body.nest-editorial .exam-mode-banner {
  border: 1px solid rgba(181,138,86,.22) !important;
  background: linear-gradient(180deg, rgba(244,234,219,.82), rgba(248,242,232,.64)) !important;
  color: #76552f !important;
  border-radius: var(--nest-radius-md) !important;
  box-shadow: 0 10px 24px rgba(181,138,86,.06), inset 0 1px 0 rgba(255,255,255,.55);
}
html.dark body.nest-editorial .exam-mode-banner {
  background: linear-gradient(180deg, rgba(83,61,31,.22), rgba(67,51,29,.16)) !important;
  color: #e7c998 !important;
  border-color: rgba(181,138,86,.25) !important;
}

/* ---------- Question status row ---------- */
body.nest-editorial #question-counter {
  color: var(--nest-ink-soft) !important;
  letter-spacing: .02em;
}
html.dark body.nest-editorial #question-counter { color: #aab6ae !important; }

body.nest-editorial #timer-box {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  padding-inline: .8rem !important;
  border: 1px solid rgba(185,111,98,.18);
  background: linear-gradient(180deg, rgba(245,230,226,.82), rgba(255,246,243,.62)) !important;
  color: #985449 !important;
  box-shadow: 0 8px 18px rgba(185,111,98,.06), inset 0 1px 0 rgba(255,255,255,.6);
  letter-spacing: .02em;
}
html.dark body.nest-editorial #timer-box {
  background: rgba(86,44,40,.22) !important;
  color: #e5a39a !important;
  border-color: rgba(185,111,98,.22);
}

/* ---------- Progress rail ---------- */
body.nest-editorial #progress-bar {
  background: linear-gradient(90deg, var(--nest-gold), var(--nest-forest)) !important;
  box-shadow: 0 0 18px rgba(31,95,74,.22);
}
body.nest-editorial #quiz-active-box > .w-full.bg-slate-100,
body.nest-editorial #quiz-active-box > div.w-full {
  height: 8px !important;
  border: 1px solid rgba(42,61,50,.08);
  background: rgba(42,61,50,.06) !important;
  box-shadow: inset 0 1px 2px rgba(42,61,50,.05);
}
html.dark body.nest-editorial #quiz-active-box > .w-full.bg-slate-100,
html.dark body.nest-editorial #quiz-active-box > div.w-full {
  border-color: rgba(220,233,226,.08);
  background: rgba(220,233,226,.08) !important;
}

body.nest-editorial #adaptive-hint {
  color: var(--nest-ink-faint) !important;
  font-weight: 600;
  max-width: 38rem;
  margin-inline: auto;
}
html.dark body.nest-editorial #adaptive-hint { color: #87958d !important; }

/* ---------- Question content ---------- */
body.nest-editorial #question-box > div:first-child,
body.nest-editorial #listening-question-box > div:first-child {
  padding: clamp(1.2rem, 3vw, 1.7rem);
  border: 1px solid var(--nest-line);
  border-radius: var(--nest-radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(250,247,241,.68));
  box-shadow: var(--nest-shadow-sm);
  font-size: clamp(1rem, 1.4vw, 1.13rem) !important;
  line-height: 1.78 !important;
  font-weight: 700 !important;
}
html.dark body.nest-editorial #question-box > div:first-child,
html.dark body.nest-editorial #listening-question-box > div:first-child {
  border-color: var(--nest-dark-line);
  background: linear-gradient(180deg, rgba(23,32,27,.92), rgba(18,27,22,.78));
  box-shadow: var(--nest-shadow-dark);
  color: #eef4f0 !important;
}

/* ---------- Answer options ---------- */
body.nest-editorial #options-box,
body.nest-editorial #listening-options-box {
  gap: .72rem !important;
}
body.nest-editorial #options-box > button,
body.nest-editorial #listening-options-box > button,
body.nest-editorial .quiz-option {
  position: relative;
  min-height: 56px;
  padding: .95rem 1rem !important;
  border: 1px solid var(--nest-line-strong) !important;
  border-width: 1px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.72) !important;
  color: var(--nest-ink) !important;
  box-shadow: 0 7px 18px rgba(31,54,42,.045), inset 0 1px 0 rgba(255,255,255,.62);
  transition: transform var(--nest-fast) var(--nest-ease), border-color var(--nest-fast) ease, background-color var(--nest-fast) ease, box-shadow var(--nest-mid) var(--nest-ease), opacity var(--nest-fast) ease;
}
body.nest-editorial #options-box > button:not(:disabled):hover,
body.nest-editorial #listening-options-box > button:not(:disabled):hover,
body.nest-editorial .quiz-option:not(:disabled):hover {
  transform: translateY(-2px);
  border-color: rgba(31,95,74,.42) !important;
  background: rgba(246,250,247,.94) !important;
  box-shadow: 0 14px 28px rgba(31,95,74,.09), inset 0 1px 0 rgba(255,255,255,.78);
}
body.nest-editorial #options-box > button.is-selected,
body.nest-editorial #listening-options-box > button.is-selected,
body.nest-editorial .quiz-option.is-selected {
  border-color: rgba(31,95,74,.65) !important;
  background: linear-gradient(180deg, rgba(232,239,233,.98), rgba(244,248,244,.94)) !important;
  color: var(--nest-forest-deep) !important;
  box-shadow: 0 12px 24px rgba(31,95,74,.11), inset 0 0 0 1px rgba(31,95,74,.08);
  transform: translateY(-1px);
}
body.nest-editorial #options-box > button.is-correct,
body.nest-editorial #listening-options-box > button.is-correct,
body.nest-editorial .quiz-option.is-correct {
  border-color: rgba(31,95,74,.55) !important;
  background: linear-gradient(180deg, #edf7ef, #f8fbf8) !important;
  color: #23654e !important;
  box-shadow: 0 12px 26px rgba(31,95,74,.08), inset 0 0 0 1px rgba(31,95,74,.07);
}
body.nest-editorial #options-box > button.is-incorrect,
body.nest-editorial #listening-options-box > button.is-incorrect,
body.nest-editorial .quiz-option.is-incorrect {
  border-color: rgba(185,111,98,.48) !important;
  background: linear-gradient(180deg, #fbefec, #fff9f7) !important;
  color: #975147 !important;
  box-shadow: 0 10px 24px rgba(185,111,98,.06), inset 0 0 0 1px rgba(185,111,98,.05);
}
body.nest-editorial #options-box > button.is-dimmed,
body.nest-editorial #listening-options-box > button.is-dimmed,
body.nest-editorial .quiz-option.is-dimmed {
  opacity: .48;
  transform: none;
}
html.dark body.nest-editorial #options-box > button,
html.dark body.nest-editorial #listening-options-box > button,
html.dark body.nest-editorial .quiz-option {
  border-color: var(--nest-dark-line) !important;
  background: rgba(23,32,27,.72) !important;
  color: #e9f0ec !important;
  box-shadow: 0 9px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035);
}
html.dark body.nest-editorial #options-box > button:not(:disabled):hover,
html.dark body.nest-editorial #listening-options-box > button:not(:disabled):hover,
html.dark body.nest-editorial .quiz-option:not(:disabled):hover {
  border-color: rgba(95,138,118,.48) !important;
  background: rgba(29,43,35,.9) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.045);
}
html.dark body.nest-editorial #options-box > button.is-selected,
html.dark body.nest-editorial #listening-options-box > button.is-selected,
html.dark body.nest-editorial .quiz-option.is-selected {
  border-color: rgba(95,138,118,.62) !important;
  background: linear-gradient(180deg, rgba(42,69,56,.92), rgba(28,46,37,.94)) !important;
  color: #edf6f0 !important;
}
html.dark body.nest-editorial #options-box > button.is-correct,
html.dark body.nest-editorial #listening-options-box > button.is-correct,
html.dark body.nest-editorial .quiz-option.is-correct {
  border-color: rgba(95,138,118,.55) !important;
  background: linear-gradient(180deg, rgba(35,73,56,.9), rgba(24,50,39,.94)) !important;
  color: #d8f0df !important;
}
html.dark body.nest-editorial #options-box > button.is-incorrect,
html.dark body.nest-editorial #listening-options-box > button.is-incorrect,
html.dark body.nest-editorial .quiz-option.is-incorrect {
  border-color: rgba(185,111,98,.5) !important;
  background: linear-gradient(180deg, rgba(78,43,39,.82), rgba(54,34,31,.9)) !important;
  color: #f1c4bd !important;
}

/* ---------- Answer feedback ---------- */
body.nest-editorial #answer-feedback-box {
  padding: 1rem !important;
  border: 1px solid var(--nest-line) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(250,248,243,.95), rgba(247,244,237,.84)) !important;
  color: var(--nest-ink) !important;
  box-shadow: var(--nest-shadow-sm);
  animation: nest-feedback-in var(--nest-mid) var(--nest-ease) both;
}
html.dark body.nest-editorial #answer-feedback-box {
  border-color: var(--nest-dark-line) !important;
  background: linear-gradient(180deg, rgba(25,35,29,.92), rgba(18,27,22,.88)) !important;
  color: #eaf2ed !important;
}

/* ---------- Primary next / submit action ---------- */
body.nest-editorial #next-btn,
body.nest-editorial #listening-next-btn,
body.nest-editorial #play-audio-btn {
  min-height: 52px;
  border-radius: 16px !important;
  background: linear-gradient(135deg, var(--nest-forest), #2e725a) !important;
  color: #fff !important;
  box-shadow: 0 16px 30px rgba(31,95,74,.16), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform var(--nest-fast) var(--nest-ease), box-shadow var(--nest-mid) var(--nest-ease), filter var(--nest-fast) ease, opacity var(--nest-fast) ease;
}
body.nest-editorial #next-btn:not(:disabled):hover,
body.nest-editorial #listening-next-btn:not(:disabled):hover,
body.nest-editorial #play-audio-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 36px rgba(31,95,74,.22), inset 0 1px 0 rgba(255,255,255,.22);
  filter: saturate(1.03);
}
body.nest-editorial #next-btn:disabled,
body.nest-editorial #listening-next-btn:disabled {
  background: rgba(112,124,116,.18) !important;
  color: rgba(89,97,92,.68) !important;
  box-shadow: none;
  cursor: not-allowed;
}
html.dark body.nest-editorial #next-btn:disabled,
html.dark body.nest-editorial #listening-next-btn:disabled {
  background: rgba(150,165,157,.12) !important;
  color: rgba(203,215,208,.46) !important;
}

/* ---------- Results / feedback report ---------- */
body.nest-editorial #result-section {
  padding-top: clamp(3rem, 6vw, 5.5rem) !important;
  padding-bottom: clamp(4rem, 8vw, 7rem) !important;
  background:
    radial-gradient(900px 460px at 10% 2%, rgba(181,138,86,.12), transparent 62%),
    radial-gradient(900px 520px at 92% 22%, rgba(95,138,118,.11), transparent 64%),
    linear-gradient(180deg, #102018 0%, #16261e 54%, #0e1913 100%) !important;
  color: #f5f7f4 !important;
}
body.nest-editorial #result-section > div.max-w-4xl {
  width: min(100%, 1120px);
}
body.nest-editorial #pdf-report-template {
  border: 1px solid rgba(42,61,50,.12) !important;
  border-radius: var(--nest-radius-xl) !important;
  box-shadow: 0 32px 90px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.75) !important;
  padding: clamp(1.35rem, 4vw, 3.2rem) !important;
}
body.nest-editorial #level-reveal-stage {
  width: 120px;
  height: 120px;
}
body.nest-editorial #level-reveal-badge {
  background: linear-gradient(135deg, var(--nest-forest), #2f765c) !important;
  box-shadow: 0 22px 42px rgba(31,95,74,.20) !important;
}
body.nest-editorial #level-reveal-glow {
  background: rgba(181,138,86,.22) !important;
  filter: blur(7px);
}
body.nest-editorial #overall-score-number,
body.nest-editorial #final-level-big {
  color: var(--nest-forest) !important;
}
body.nest-editorial #pdf-report-template > div,
body.nest-editorial #pdf-report-template > section,
body.nest-editorial #pdf-report-template .bg-slate-50,
body.nest-editorial #pdf-report-template .bg-indigo-50\/60 {
  border-radius: 18px;
}
body.nest-editorial #report-confidence-meter {
  background: linear-gradient(90deg, var(--nest-gold), var(--nest-forest)) !important;
}
body.nest-editorial #resource-recommendations-box > *,
body.nest-editorial #writing-report-box,
body.nest-editorial #studyplan-box > * {
  border-radius: 16px;
}

/* ---------- Modals / dialogs ---------- */
body.nest-editorial .nest-modal {
  background: rgba(10,17,13,.52) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1rem;
}
body.nest-editorial .nest-modal-panel {
  border: 1px solid var(--nest-line-strong) !important;
  border-radius: 24px !important;
  background: color-mix(in srgb, var(--nest-surface-strong) 94%, transparent) !important;
  color: var(--nest-ink) !important;
  box-shadow: 0 34px 90px rgba(17,31,24,.22), inset 0 1px 0 rgba(255,255,255,.78) !important;
  padding: clamp(1.25rem, 3vw, 1.75rem) !important;
}
html.dark body.nest-editorial .nest-modal-panel {
  border-color: var(--nest-dark-line) !important;
  background: color-mix(in srgb, var(--nest-dark-surface-strong) 96%, transparent) !important;
  color: #eef5f0 !important;
  box-shadow: 0 36px 92px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.nest-editorial .nest-modal-panel button {
  min-height: 44px;
  border-radius: 14px;
  transition: transform var(--nest-fast) var(--nest-ease), box-shadow var(--nest-mid) var(--nest-ease), background-color var(--nest-fast) ease;
}
body.nest-editorial .nest-modal-panel button:hover:not(:disabled) {
  transform: translateY(-1px);
}

/* ---------- Inputs inside assessment/results ---------- */
body.nest-editorial #quiz-section input,
body.nest-editorial #quiz-section select,
body.nest-editorial #result-section input,
body.nest-editorial #result-section select {
  border-radius: 14px !important;
  border-color: var(--nest-line-strong) !important;
  background: rgba(255,255,255,.74) !important;
  color: var(--nest-ink) !important;
  box-shadow: inset 0 1px 2px rgba(42,61,50,.035);
}
body.nest-editorial #quiz-section input:focus,
body.nest-editorial #quiz-section select:focus,
body.nest-editorial #result-section input:focus,
body.nest-editorial #result-section select:focus {
  outline: none;
  border-color: rgba(31,95,74,.46) !important;
  box-shadow: 0 0 0 4px rgba(31,95,74,.10) !important;
}
html.dark body.nest-editorial #quiz-section input,
html.dark body.nest-editorial #quiz-section select,
html.dark body.nest-editorial #result-section input,
html.dark body.nest-editorial #result-section select {
  background: rgba(19,28,23,.86) !important;
  border-color: var(--nest-dark-line) !important;
  color: #edf4ef !important;
}

/* ---------- Calm transitions already emitted by page lifecycle ---------- */
body.nest-editorial .q-enter {
  animation: nest-question-in var(--nest-mid) var(--nest-ease) both !important;
}
body.nest-editorial .page-section.animate__fadeIn,
body.nest-editorial .page-section.animate__fadeInUp {
  animation-duration: 380ms !important;
}

@keyframes nest-question-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes nest-feedback-in {
  from { opacity: 0; transform: translate3d(0, 7px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---------- Mobile composition ---------- */
@media (max-width: 640px) {
  body.nest-editorial #quiz-section,
  body.nest-editorial #listening-section,
  body.nest-editorial #speaking-section {
    padding: .75rem !important;
    align-items: flex-start;
    padding-top: 1.25rem !important;
  }
  body.nest-editorial #quiz-card,
  body.nest-editorial #listening-section > .glass-panel,
  body.nest-editorial #speaking-section > .glass-panel {
    border-radius: 22px !important;
    padding: 1rem !important;
  }
  body.nest-editorial #options-box > button,
  body.nest-editorial #listening-options-box > button,
  body.nest-editorial .quiz-option {
    min-height: 54px;
  }
  body.nest-editorial #result-section {
    padding-inline: .85rem !important;
  }
  body.nest-editorial #pdf-report-template {
    border-radius: 22px !important;
    padding: 1rem !important;
  }
}

/* ---------- Accessibility ---------- */
body.nest-editorial button:focus-visible,
body.nest-editorial a:focus-visible,
body.nest-editorial input:focus-visible,
body.nest-editorial select:focus-visible,
body.nest-editorial textarea:focus-visible {
  outline: 3px solid rgba(181,138,86,.54) !important;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  body.nest-editorial #options-box > button,
  body.nest-editorial #listening-options-box > button,
  body.nest-editorial .quiz-option,
  body.nest-editorial #next-btn,
  body.nest-editorial #listening-next-btn,
  body.nest-editorial #play-audio-btn,
  body.nest-editorial .nest-modal-panel button {
    transition: none !important;
  }
  body.nest-editorial .q-enter,
  body.nest-editorial #answer-feedback-box {
    animation: none !important;
  }
}