/* ══════════════════════════════════════════════════════════════════════
   v5-pset.css — v5 editorial chrome + quiz-widget overrides for the
   per-PSet pages (psets/pset-m0..m4/index.html).

   Layered on top of the legacy .pset-container chrome + the dynamic
   classes produced by /shared/quiz-engine.js. Same body.v5-* gating
   pattern used everywhere else. Loaded AFTER quiz-engine.css so source
   order plus body.v5-pset specificity wins the cascade.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Base ─── */
body.v5-pset {
    font-family: var(--v5-sans);
    background: var(--v5-bg);
    color: var(--v5-text);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'cv11', 'ss01';
}

/* ─── Header (matches index/psets/study) ─── */
body.v5-pset .header {
    background: var(--v5-bg);
    color: var(--v5-ink);
    border-bottom: 1px solid var(--v5-hairline);
    padding: 2rem 0 1.25rem;
    text-align: left;
}
body.v5-pset .header-content {
    max-width: 1320px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 2rem;
    position: static;
    padding: 0 2rem;
}
body.v5-pset .logo-main { display: none; }
body.v5-pset .header h1 {
    font-family: var(--v5-serif);
    font-weight: 500;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--v5-ink);
    font-variation-settings: 'opsz' 144;
}
body.v5-pset .header-subtitle {
    font-family: var(--v5-sans);
    font-size: 1.05rem;
    color: var(--v5-muted);
    margin-top: 0.5rem;
    opacity: 1;
}

/* ─── Nav (5 tabs, hairline underline) ─── */
body.v5-pset .nav-bar {
    background: var(--v5-bg);
    border-bottom: 1px solid var(--v5-hairline);
    box-shadow: none;
    margin-bottom: 1.5rem;
}
body.v5-pset .nav-container {
    max-width: 1320px;
    justify-content: flex-start;
    padding: 0 2rem;
    height: auto;
}
body.v5-pset .nav-tabs { gap: 0.25rem; }
body.v5-pset .nav-tab {
    color: var(--v5-muted);
    font-size: 0.875rem;
    padding: 0.85rem 0.85rem 0.95rem;
}
body.v5-pset .nav-tab:hover { color: var(--v5-ink); }
body.v5-pset .nav-tab.active { color: var(--v5-ink); }
body.v5-pset .nav-tab.active::after {
    background: var(--v5-ink);
    border-radius: 2px;
    bottom: 0;
    height: 2px;
}

/* ─── Page container + page H1 ─── */
body.v5-pset .pset-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
}
body.v5-pset .pset-container > h1 {
    font-family: var(--v5-serif);
    font-weight: 500;
    font-size: 2.25rem;
    color: var(--v5-ink);
    font-variation-settings: 'opsz' 60;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

/* ─── PSet intro / prerequisite callout (the legacy blue tip box) ─── */
body.v5-pset .pset-container > div[style*="background:#eff6ff"],
body.v5-pset .pset-container > div[style*="background: #eff6ff"] {
    background: var(--v5-surface) !important;
    border: 1px solid var(--v5-hairline) !important;
    border-left: 3px solid var(--m1) !important;
    border-radius: var(--v5-r) !important;
    box-shadow: var(--v5-shadow-1);
    padding: 1.1rem 1.4rem !important;
}
body.v5-pset .pset-container > div[style*="background:#eff6ff"] h3,
body.v5-pset .pset-container > div[style*="background: #eff6ff"] h3 {
    font-family: var(--v5-serif) !important;
    font-weight: 500 !important;
    color: var(--v5-ink) !important;
    font-size: 1.05rem !important;
    font-variation-settings: 'opsz' 36;
}
body.v5-pset .pset-container > div[style*="background:#eff6ff"] p,
body.v5-pset .pset-container > div[style*="background: #eff6ff"] p {
    color: var(--v5-text) !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   QUIZ WIDGET — overrides for /shared/quiz-engine.css
   The widget is dynamically injected by quiz-engine.js into #quiz-app.
   Selectors reach in via body.v5-pset for specificity bump.
   ══════════════════════════════════════════════════════════════════════ */

body.v5-pset #quiz-app {
    max-width: 100%;
    margin: 0;
    font-family: var(--v5-sans);
}

/* Quiz header — replace blue gradient with v5 surface + hairline */
body.v5-pset .quiz-header {
    background: var(--v5-surface);
    color: var(--v5-ink);
    border: 1px solid var(--v5-hairline);
    border-radius: var(--v5-r);
    box-shadow: var(--v5-shadow-1);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    /* keep sticky behavior for long psets */
    position: sticky;
    top: 0;
    z-index: 100;
}
body.v5-pset .quiz-header h2 {
    font-family: var(--v5-serif);
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--v5-ink);
    font-variation-settings: 'opsz' 36;
    letter-spacing: -0.01em;
}
body.v5-pset .quiz-header p {
    color: var(--v5-muted);
    font-size: 0.9rem;
    opacity: 1;
}
body.v5-pset .quiz-best-score,
body.v5-pset .progress-indicator {
    background: var(--v5-bg);
    color: var(--v5-ink);
    border: 1px solid var(--v5-hairline);
    font-family: var(--v5-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.4rem 0.7rem;
    border-radius: var(--v5-r-sm);
}

/* Questions container — surface panel */
body.v5-pset .questions-container {
    background: var(--v5-surface);
    border: none;
    border-radius: var(--v5-r);
    box-shadow: var(--v5-shadow-1);
    padding: 0.5rem 1.5rem;
}
body.v5-pset .question-block {
    border-bottom: 1px solid var(--v5-hairline);
    padding: 1.4rem 0;
}
body.v5-pset .question-block:last-child { border-bottom: none; }

body.v5-pset .question-header {
    gap: 0.6rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}
body.v5-pset .question-number {
    background: var(--v5-bg);
    color: var(--v5-muted);
    border: 1px solid var(--v5-hairline);
    border-radius: 50%;
    font-family: var(--v5-mono);
    font-weight: 600;
    font-size: 0.78rem;
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.v5-pset .question-number.answered {
    background: var(--v5-ink);
    color: white;
    border-color: var(--v5-ink);
}
body.v5-pset .category-badge {
    /* keep dynamic per-category color from JS, refine typography */
    font-family: var(--v5-mono);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.55rem;
    border-radius: var(--v5-r-sm);
}
body.v5-pset .module-link {
    font-family: var(--v5-mono);
    font-size: 0.62rem;
    color: var(--v5-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    margin-left: auto;
}
body.v5-pset .module-link:hover { color: var(--m1); text-decoration: none; }

body.v5-pset .question-text {
    font-family: var(--v5-sans);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--v5-ink);
    margin-bottom: 0.85rem;
}

/* Options — clean radio cards */
body.v5-pset .options { gap: 0.55rem; }
body.v5-pset .option {
    background: var(--v5-bg);
    border: 1px solid var(--v5-hairline);
    border-radius: var(--v5-r-sm);
    padding: 0.7rem 0.85rem;
    transition: border-color 0.15s, background 0.15s;
}
body.v5-pset .option:hover {
    background: var(--v5-surface);
    border-color: var(--v5-muted);
}
body.v5-pset .option.selected {
    background: var(--v5-surface);
    border-color: var(--v5-ink);
    box-shadow: 0 0 0 1px var(--v5-ink);
}
body.v5-pset .option-label {
    font-family: var(--v5-sans);
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--v5-ink);
}

/* Numeric input */
body.v5-pset .numeric-input {
    background: var(--v5-bg);
    border: 1px solid var(--v5-hairline);
    border-radius: var(--v5-r-sm);
    font-family: var(--v5-mono);
    font-size: 0.95rem;
    padding: 0.65rem 0.85rem;
    color: var(--v5-ink);
}
body.v5-pset .numeric-input:focus {
    border-color: var(--v5-ink);
    background: var(--v5-surface);
    box-shadow: 0 0 0 1px var(--v5-ink);
}
body.v5-pset .numeric-input::placeholder {
    color: var(--v5-muted);
    font-family: var(--v5-sans);
    font-size: 0.88rem;
}

/* Ordering question */
body.v5-pset .ordering-item {
    background: var(--v5-bg);
    border: 1px solid var(--v5-hairline);
    border-radius: var(--v5-r-sm);
}
body.v5-pset .ordering-item:hover {
    background: var(--v5-surface);
    border-color: var(--v5-muted);
}
body.v5-pset .ordering-select {
    border: 1px solid var(--v5-hairline);
    border-radius: var(--v5-r-sm);
    font-family: var(--v5-mono);
    font-size: 0.85rem;
    color: var(--v5-ink);
}
body.v5-pset .ordering-select:focus {
    border-color: var(--v5-ink);
    box-shadow: 0 0 0 1px var(--v5-ink);
}
body.v5-pset .ordering-item-text {
    font-family: var(--v5-sans);
    font-size: 0.9rem;
    color: var(--v5-ink);
}

/* Submit + warnings */
body.v5-pset .submit-section { margin-top: 2rem; }
body.v5-pset .quiz-button {
    background: var(--v5-ink);
    color: white;
    border: 1px solid var(--v5-ink);
    border-radius: var(--v5-r-sm);
    font-family: var(--v5-sans);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.75rem;
    letter-spacing: 0.01em;
}
body.v5-pset .quiz-button:hover:not(:disabled) {
    background: var(--v5-text);
    border-color: var(--v5-text);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}
body.v5-pset .quiz-button:disabled {
    background: var(--v5-bg);
    color: var(--v5-muted);
    border-color: var(--v5-hairline);
}
body.v5-pset .warning {
    color: #b91c1c;
    font-family: var(--v5-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.75rem;
}

/* ─── Results pane (after submit) ─── */
body.v5-pset .results-container {
    background: var(--v5-surface);
    border-radius: var(--v5-r);
    box-shadow: var(--v5-shadow-1);
    padding: 2rem;
}
body.v5-pset .score-display {
    background: var(--v5-bg);
    border: 1px solid var(--v5-hairline);
    border-radius: var(--v5-r);
    padding: 2rem;
    margin-bottom: 1.75rem;
}
body.v5-pset .score-display h2 {
    font-family: var(--v5-serif);
    font-weight: 500;
    color: var(--v5-ink);
    font-variation-settings: 'opsz' 60;
    letter-spacing: -0.02em;
}
body.v5-pset .score-percentage {
    font-family: var(--v5-mono);
    font-size: 1.4rem;
    color: var(--v5-ink);
    margin-top: 0.6rem;
    letter-spacing: 0.02em;
}
body.v5-pset .results-grid { gap: 1rem; }
body.v5-pset .result-item {
    background: var(--v5-bg);
    border: 1px solid var(--v5-hairline);
    border-left: 3px solid var(--v5-hairline);
    border-radius: var(--v5-r-sm);
    padding: 1.1rem 1.25rem;
}
body.v5-pset .result-item.correct {
    border-color: var(--v5-hairline);
    border-left-color: var(--v5-done, #10b981);
    background: var(--v5-bg);
}
body.v5-pset .result-item.incorrect {
    border-color: var(--v5-hairline);
    border-left-color: #b91c1c;
    background: var(--v5-bg);
}
body.v5-pset .result-header {
    font-family: var(--v5-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--v5-muted);
}
body.v5-pset .result-question {
    font-family: var(--v5-sans);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--v5-ink);
    margin: 0.5rem 0 0.75rem;
}
body.v5-pset .result-answer {
    font-family: var(--v5-sans);
    font-size: 0.85rem;
    padding: 0.4rem 0.65rem;
    border-radius: var(--v5-r-sm);
    margin-bottom: 0.35rem;
}
body.v5-pset .result-answer.user-answer { background: #fef2f2; color: #991b1b; }
body.v5-pset .result-answer.correct-answer { background: #f0fdf4; color: #14532d; }
body.v5-pset .explanation {
    background: var(--v5-surface);
    border-left: 3px solid var(--m1);
    border-radius: 0;
    padding: 0.65rem 0.9rem;
    margin-top: 0.55rem;
    font-family: var(--v5-sans);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--v5-text);
}
body.v5-pset .restart-btn {
    background: var(--v5-bg);
    color: var(--v5-ink);
    border: 1px solid var(--v5-hairline);
}
body.v5-pset .restart-btn:hover:not(:disabled) {
    background: var(--v5-surface);
    border-color: var(--v5-ink);
}

/* Responsive */
@media (max-width: 768px) {
    body.v5-pset .header-content,
    body.v5-pset .nav-container,
    body.v5-pset .pset-container { padding-left: 1rem; padding-right: 1rem; }
    body.v5-pset .options { grid-template-columns: 1fr; }
}