/* Shared practice engines inherit the diagnostic palette. Keep this scope local
   so Practice Hub and full practice tests retain their own theme. */
#ielts-diagnostic-app {
    --idt-control-border: #9E9689;
    --idt-button: var(--idt-green);
    --idt-button-hover: var(--idt-green-dark);
    --idt-success: #276449;
    --idt-warning: #875b12;
    --idt-danger: #b42332;
    --ielts-primary: var(--idt-green);
    --ielts-primary-dark: var(--idt-green-dark);
    --ielts-primary-light: var(--idt-warm);
    --ielts-bg: var(--idt-bg);
    --ielts-bg-white: var(--idt-card);
    --ielts-card: var(--idt-card);
    --ielts-border: var(--idt-border);
    --ielts-text: var(--idt-text);
    --ielts-text-secondary: var(--idt-muted);
    --ielts-text-muted: var(--idt-soft);
    color: var(--idt-text);
    color-scheme: light;
}
html.dark-mode #ielts-diagnostic-app {
    --idt-control-border: #888581;
    --idt-success: #9ad6b2;
    --idt-warning: #f1cb82;
    --idt-danger: #fca5a5;
    color-scheme: dark;
}

#ielts-diagnostic-app .li-session-footer { border-top: 0; }

/* Inputs, selected answers and keyboard focus must remain distinguishable. */
#ielts-diagnostic-app :is(.q-text-input, .q-group-text-input, .q-match-select,
    .q-match-drop, .q-match-clear, .q-match-option, .radio-mark, .checkbox-mark,
    .li-qchip, .q-dot, .font-btn, .iw-mode-toggle) {
    border-color: var(--idt-control-border);
}
#ielts-diagnostic-app :is(input, textarea)::placeholder {
    color: var(--idt-muted);
    opacity: 1;
}
#ielts-diagnostic-app :is(button, a, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--idt-green);
    outline-offset: 3px;
}
#ielts-diagnostic-app .q-radio:has(input:focus-visible) {
    outline: 2px solid var(--idt-green);
    outline-offset: 3px;
}
/* Reading's hidden radio inputs must still receive keyboard focus. */
#ielts-diagnostic-app .q-radio input {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
#ielts-diagnostic-app .q-radio input:checked ~ :is(.radio-mark, .checkbox-mark) {
    background: var(--idt-button);
    border-color: var(--idt-green);
}
#ielts-diagnostic-app .q-radio input:checked ~ .radio-mark::after {
    background: var(--idt-on-primary);
}
#ielts-diagnostic-app .q-radio input:checked ~ .checkbox-mark::after {
    border-color: var(--idt-on-primary);
}
#ielts-diagnostic-app .q-radio input:checked ~ .radio-label {
    color: var(--idt-green);
}
#ielts-diagnostic-app :is(.q-card-number, .q-match-number) {
    color: var(--idt-green);
    background: var(--idt-warm);
}
#ielts-diagnostic-app :is(.q-word-limit, .q-nav-note, .iw-word-target,
    .passage-meta, .q-dot, .iw-word-count) {
    color: var(--idt-muted);
}
#ielts-diagnostic-app .iw-badge { color: var(--idt-green); background: var(--idt-warm); border-color: var(--idt-border); }
#ielts-diagnostic-app :is(.q-card, .q-group-header) { border-color: var(--idt-border); }
#ielts-diagnostic-app :is(.q-radio, .q-structured-prompt) { color: var(--idt-text); }
#ielts-diagnostic-app .q-radio { border-color: var(--idt-border); }
#ielts-diagnostic-app :is(.li-qchip.is-answered, .q-dot.answered:not(.active)) {
    border-color: var(--idt-green);
    color: var(--idt-green);
    background: var(--idt-warm);
}
/* Listening start buttons share their gradient with the instructions dialog. */
#ielts-diagnostic-app :is(.li-session-btn:not(.secondary, .idt-listening-start), .q-nav-btn.primary,
    .q-nav-btn.submit, .q-dot.active, .iw-submit-btn, .ielts-btn-primary) {
    background: var(--idt-button);
    border-color: var(--idt-green);
    color: var(--idt-on-primary);
}
#ielts-diagnostic-app :is(.li-session-btn:not(.secondary, .idt-listening-start), .q-nav-btn.primary,
    .q-nav-btn.submit, .iw-submit-btn, .ielts-btn-primary):hover:not(:disabled) {
    background: var(--idt-button-hover);
    color: var(--idt-on-primary);
}
/* TOEFL practice-session primary controls: 8px corners and no raised edge. */
#ielts-diagnostic-app :is(.li-session-btn:not(.secondary, .idt-listening-start), .q-nav-btn.primary,
    .q-nav-btn.submit, .iw-submit-btn, .ielts-btn-primary) {
    border: 2px solid var(--idt-button);
    border-radius: 8px;
    box-shadow: none;
    font-weight: 600;
    letter-spacing: 0.02em;
}
#ielts-diagnostic-app :is(.li-session-btn:not(.secondary, .idt-listening-start), .q-nav-btn.primary,
    .q-nav-btn.submit, .iw-submit-btn, .ielts-btn-primary):hover:not(:disabled) {
    border-color: var(--idt-button-hover);
}
#ielts-diagnostic-app .iw-word-count-wrap.is-met :is(.iw-word-count, .iw-word-target) {
    color: var(--idt-green);
}
#ielts-diagnostic-app .ielts-record-btn-circle { background: var(--idt-button); color: var(--idt-on-primary); }
#ielts-diagnostic-app .li-session-unavailable { color: var(--idt-danger); }
#ielts-diagnostic-app .li-session-unavailable p { color: var(--idt-muted); }

/* Speaking uses CSS variables even in its inline assessment/transition markup.
   Switching the theme therefore never needs to recreate the recording UI. */
#ielts-diagnostic-app .ielts-practice {
    --bg-base: var(--idt-bg);
    --bg-card: var(--idt-card);
    --bg-card-hover: var(--idt-warm);
    --bg-elevated: var(--idt-card);
    --border-subtle: var(--idt-border);
    --text-primary: var(--idt-text);
    --text-secondary: var(--idt-muted);
    --text-muted: var(--idt-soft);
    --accent: var(--idt-green);
    --accent-light: var(--idt-green);
    --accent-glow: var(--idt-warm);
    --speaking: var(--idt-green);
    --speaking-glow: var(--idt-warm);
    --speaking-border: var(--idt-control-border);
    --success: var(--idt-success);
    --warning: var(--idt-warning);
    --error: var(--idt-danger);
}
#ielts-diagnostic-app .ielts-btn-secondary {
    background: var(--idt-card);
    color: var(--idt-text);
    border-color: var(--idt-control-border);
}

/* Grading details should be readable before their stage becomes active too. */
#ielts-diagnostic-app .grading-content {
    background: var(--idt-card);
    border-color: var(--idt-border);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}
#ielts-diagnostic-app :is(.grading-title, .grading-prepex-logo, .stage-title) {
    color: var(--idt-text);
    text-shadow: none;
}
#ielts-diagnostic-app :is(.grading-subtitle, .stage-detail, .grading-progress-text,
    .grading-time-estimate) { color: var(--idt-muted); }
#ielts-diagnostic-app :is(.grading-petra-badge span, .grading-progress-percent,
    .grading-stage.active .stage-detail) { color: var(--idt-green); }
#ielts-diagnostic-app .grading-stage {
    background: var(--idt-bg);
    border-color: var(--idt-border);
}
#ielts-diagnostic-app .grading-stage.active { border-color: var(--idt-green); }
#ielts-diagnostic-app .stage-icon svg { stroke: var(--idt-muted); }
#ielts-diagnostic-app :is(.grading-stage.active, .grading-stage.completed) .stage-icon svg {
    stroke: var(--idt-on-primary);
}

/* A consistent study workspace across all four diagnostic skills. */
#ielts-diagnostic-app .idt-header { border-bottom-color: var(--idt-accent-border); }
#ielts-diagnostic-app .idt-section { background: var(--idt-warm); border: 1px solid var(--idt-accent-border); }
#ielts-diagnostic-app .idt-progress-bar { background: var(--idt-border); height: 5px; border-radius: 8px; }
#ielts-diagnostic-app .idt-progress-fill { border-radius: inherit; }
#ielts-diagnostic-app .idt-timer { padding: 0.55rem 0.75rem; border: 1px solid var(--idt-border); border-radius: 9px; color: var(--idt-green); background: var(--idt-bg); font-variant-numeric: tabular-nums; }
#ielts-diagnostic-app .idt-main { padding: 1.25rem; }
#ielts-diagnostic-app :is(.ielts-reading-split, .li-question-group, .iw-editor-card, .iw-prompt-card) {
    border-color: var(--idt-border);
    border-radius: 14px;
    box-shadow: 0 3px 14px rgba(24, 54, 34, 0.04);
}
#ielts-diagnostic-app :is(.passage-header, .questions-header, .q-group-header,
    .li-question-group-head, .iw-timer-bar) {
    background: var(--idt-warm);
    border-color: var(--idt-accent-border);
}
#ielts-diagnostic-app :is(.li-group-type, .li-session-kicker,
    .iw-prompt-label, .iw-prompt-label svg, .iw-timer-left svg, .q-progress) { color: var(--idt-green); }
#ielts-diagnostic-app :is(.li-qchip, .q-dot, .font-btn) { border-radius: 7px; }
#ielts-diagnostic-app :is(.q-radio, .li-qchip, .q-dot, .font-btn):hover { border-color: var(--idt-green); }
#ielts-diagnostic-app .q-radio:has(input:checked) { background: var(--idt-warm); border-color: var(--idt-green); }

/* Reading: keep the passage quiet and give the question groups clear landmarks. */
#ielts-diagnostic-app .ielts-reading-split { height: calc(100dvh - 220px); min-height: 420px; background: var(--idt-card); }
#ielts-diagnostic-app :is(.ielts-reading-passage, .q-nav) { border-color: var(--idt-border); }
#ielts-diagnostic-app .passage-title { font-size: 1rem; color: var(--idt-text); }
#ielts-diagnostic-app .passage-content { padding: 1.4rem; color: var(--idt-text); line-height: 1.85; }
#ielts-diagnostic-app .passage-content strong { color: var(--idt-green); }
#ielts-diagnostic-app .q-group { border-color: var(--idt-border); }
#ielts-diagnostic-app .q-completion-notes h5 { font-size: 0.98rem; line-height: 1.5; }
#ielts-diagnostic-app .q-completion-notes h6 { padding: 0.4rem 0.65rem; border-left: 3px solid var(--idt-green); border-radius: 0 6px 6px 0; background: var(--idt-warm); color: var(--idt-green); }
#ielts-diagnostic-app .q-completion-notes ul { list-style: disc; }
#ielts-diagnostic-app .q-completion-notes li::marker { color: var(--idt-green); }
#ielts-diagnostic-app .q-inline-limit { color: var(--idt-muted); }

/* Listening: the preview state, form and worked example share one visual rhythm. */
#ielts-diagnostic-app .li-session-header { padding-bottom: 1.1rem; border-color: var(--idt-border); }
#ielts-diagnostic-app .li-session-status { background: var(--idt-warm); border-color: var(--idt-accent-border); border-left: 4px solid var(--idt-green); }
#ielts-diagnostic-app .li-question-group-head { padding: 0.9rem 1.1rem; }
#ielts-diagnostic-app .li-question-group-body { padding: 0 1.1rem; }
#ielts-diagnostic-app .li-group-context { padding-top: 1.3rem; }
#ielts-diagnostic-app .li-group-subtitle { color: var(--idt-green); }
#ielts-diagnostic-app .li-group-example { background: var(--idt-warm); border: 1px solid var(--idt-accent-border); }
#ielts-diagnostic-app :is(.li-question-number, .q-match-number) { color: var(--idt-green); background: var(--idt-warm); }

/* Writing: distinguish the source task, planning space and response editor. */
#ielts-diagnostic-app .iw-topbar { padding: 0 0 1rem; }
#ielts-diagnostic-app .iw-prompt-card { background: var(--idt-card); padding: 1.4rem; }
#ielts-diagnostic-app .iw-prompt-card::before { background: var(--idt-green); }
#ielts-diagnostic-app .iw-prompt-header { padding-bottom: 0.85rem; border-bottom: 1px solid var(--idt-border); }
#ielts-diagnostic-app :is(.iw-prompt-hint, .iw-prompt-guidance, .iw-timer-left, .iw-topbar-meta) { color: var(--idt-muted); }
#ielts-diagnostic-app .iw-prompt-text { color: var(--idt-text); line-height: 1.8; }
#ielts-diagnostic-app .iw-timer-bar { flex-wrap: wrap; }
#ielts-diagnostic-app .iw-timer-display.warning { color: var(--idt-warning); }
#ielts-diagnostic-app .iw-timer-display.critical { color: var(--idt-danger); }
#ielts-diagnostic-app .idt-editor-label { display: block; padding: 1rem 1.25rem 0.75rem; color: var(--idt-green); font: 600 0.78rem/1.5 'Poppins', sans-serif; }
#ielts-diagnostic-app .iw-textarea { padding-top: 0.75rem; font-size: 1rem; line-height: 1.8; }
#ielts-diagnostic-app .iw-editor-footer { background: var(--idt-bg); border-color: var(--idt-border); }
#ielts-diagnostic-app .iw-notes-panel { background: var(--idt-warm); border-color: var(--idt-accent-border); }

/* Speaking: class hooks avoid coupling the diagnostic to inline layout details. */
#ielts-diagnostic-app .ielts-assessment-intro { min-height: 0 !important; padding: 0.5rem 0 1rem !important; }
#ielts-diagnostic-app .ielts-assessment-intro-inner { max-width: 980px !important; }
#ielts-diagnostic-app .ielts-assessment-intro-header { padding: 1.6rem; background: var(--idt-warm); border: 1px solid var(--idt-accent-border); border-radius: 16px; }
#ielts-diagnostic-app .ielts-assessment-intro-header h1 { font-size: 1.6rem !important; }
#ielts-diagnostic-app .ielts-assessment-stat { border-top: 3px solid var(--idt-green) !important; }
#ielts-diagnostic-app .ielts-assessment-flow { background: var(--idt-card); }
#ielts-diagnostic-app .ielts-assessment-part { background: var(--idt-bg) !important; }
#ielts-diagnostic-app .ielts-assessment-transition { min-height: 440px !important; }
#ielts-diagnostic-app .ielts-speaking-chat-message.petra .ielts-speaking-chat-bubble { background: var(--idt-warm); border-color: var(--idt-accent-border); }
#ielts-diagnostic-app .ielts-session-topbar { border-color: var(--idt-accent-border); }

@media (max-width: 768px) {
    #ielts-diagnostic-app .idt-main { padding: 0.75rem; }
    #ielts-diagnostic-app .idt-header { flex-direction: row; align-items: center; gap: 0.5rem; padding: 0.7rem 0.75rem; }
    #ielts-diagnostic-app .idt-left { gap: 0.65rem; flex: 1; min-width: 0; }
    #ielts-diagnostic-app .idt-progress { min-width: 0; flex: 1; max-width: 180px; }
    #ielts-diagnostic-app .idt-progress-text { font-size: 0.66rem; }
    #ielts-diagnostic-app .idt-timer { font-size: 0.78rem; }
    #ielts-diagnostic-app .ielts-reading-split { height: auto; min-height: 0; }
    #ielts-diagnostic-app .ielts-assessment-intro-header { padding: 1.1rem; }
    #ielts-diagnostic-app .ielts-assessment-intro-header h1 { font-size: 1.25rem !important; }
    #ielts-diagnostic-app .ielts-assessment-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.5rem !important; }
    #ielts-diagnostic-app .ielts-assessment-stats > div { padding: 0.85rem 0.35rem !important; }
    #ielts-diagnostic-app .li-question-group-body { padding: 0 0.85rem; }
}

/* Use TOEFL's stronger accent for small text over a tinted surface. */
#ielts-diagnostic-app :is(.q-type-badge, .iw-badge, .li-state-label, .ielts-part-chip) {
    color: var(--idt-green-dark);
}
#ielts-diagnostic-app :is(.ielts-assessment-kicker, .ielts-assessment-part-label) {
    color: var(--idt-green-dark) !important;
}