/* ===================================================================
   Design tokens — light (default) + dark (prefers-color-scheme)
   Contrast ratios verified against WCAG AA (>=4.5:1 text, >=3:1
   non-text/large); see the UI-pass report for the full table.
   =================================================================== */
:root {
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color-scheme: light dark;

    --color-bg: #f7f7f8;
    --color-surface: #ffffff;
    --color-text: #1a1a1a;
    --color-text-muted: #5f5f66;
    --color-border: #d8d8dd;
    --color-border-strong: #8a8b93;
    --color-selected-bg: #eaefff;
    --color-primary: #3a5fd9;
    --color-primary-button-bg: #3a5fd9;
    --color-primary-contrast: #ffffff;
    --color-success: #0f5132;
    --color-success-bg: #d1e7dd;
    --color-danger: #842029;
    --color-danger-bg: #f8d7da;
    --color-warning: #664d03;
    --color-warning-bg: #fff3cd;
    --color-focus: #3a5fd9;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.15rem;
    --font-size-xl: 1.5rem;

    --tabbar-height: 64px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #15161a;
        --color-surface: #1f2026;
        --color-text: #eceef2;
        --color-text-muted: #a3a7b3;
        --color-border: #34363f;
        --color-border-strong: #6b6e7a;
        --color-selected-bg: #232a46;
        --color-primary: #8099ff;
        --color-primary-button-bg: #4a63c9;
        --color-primary-contrast: #ffffff;
        --color-success: #7fe3a6;
        --color-success-bg: #16331f;
        --color-danger: #ff8a80;
        --color-danger-bg: #3a1414;
        --color-warning: #ffd666;
        --color-warning-bg: #3a2f0a;
        --color-focus: #8099ff;
    }
}

/* ===================================================================
   Base / reset
   =================================================================== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-base);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1 {
    font-size: var(--font-size-xl);
    margin: 0 0 var(--space-4);
}

h2 {
    font-size: var(--font-size-lg);
    margin: var(--space-5) 0 var(--space-3);
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

/* ===================================================================
   Layout
   =================================================================== */
.content {
    padding: var(--space-4);
    padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--space-4));
    max-width: 720px;
    margin: 0 auto;
}

.content.wide {
    max-width: 960px;
}

body.quiz-mode .content {
    padding-bottom: var(--space-4);
}

@media (min-width: 768px) {
    .content {
        padding-bottom: var(--space-6);
    }
}

/* ===================================================================
   Top bar (desktop) / slim user strip (mobile)
   =================================================================== */
.topbar {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar .brand {
    font-weight: 700;
    font-size: var(--font-size-lg);
    color: var(--color-text);
}

.primary-nav {
    display: none;
    gap: var(--space-4);
}

.nav-link {
    color: var(--color-text-muted);
    font-weight: 600;
    padding: var(--space-2) var(--space-1);
    border-bottom: 3px solid transparent;
}

.nav-link:hover {
    text-decoration: none;
    color: var(--color-text);
}

.nav-link.active {
    color: var(--color-text);
    border-bottom-color: var(--color-primary);
}

.user-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

.user-name {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

@media (min-width: 768px) {
    .primary-nav {
        display: flex;
    }
}

/* ===================================================================
   Bottom tab bar (mobile)
   =================================================================== */
.bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 20;
}

.bottom-nav-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--space-2) 0;
    min-height: 56px;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.bottom-nav-link:hover {
    text-decoration: none;
}

.bottom-nav-link.active {
    color: var(--color-primary);
}

.bottom-nav-link svg {
    width: 22px;
    height: 22px;
}

@media (min-width: 768px) {
    .bottom-nav {
        display: none;
    }
}

/* ===================================================================
   Quiz-mode header (replaces nav during question/feedback screens)
   =================================================================== */
.quiz-header {
    position: sticky;
    top: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-4);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.progress-bar {
    background: var(--color-border);
    border-radius: var(--radius-pill);
    height: 8px;
    overflow: hidden;
}

.progress-bar-fill {
    background: var(--color-primary);
    height: 100%;
    border-radius: var(--radius-pill);
}

.progress-label {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.quiz-header .quiz-stop-form {
    align-self: flex-end;
}

/* ===================================================================
   Card
   =================================================================== */
.card,
.page-card,
.question-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

/* ===================================================================
   Buttons
   =================================================================== */
button,
.btn {
    font-size: var(--font-size-base);
    padding: var(--space-3) var(--space-4);
    min-height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
    background: var(--color-primary-button-bg);
    color: var(--color-primary-contrast);
    font-family: inherit;
}

button:hover,
.btn:hover {
    opacity: 0.9;
}

.btn-secondary {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.btn-sm {
    padding: var(--space-2) var(--space-3);
    min-height: 40px;
    font-size: var(--font-size-sm);
}

.home-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.home-actions .btn {
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: var(--font-size-lg, 1.125rem);
    padding: var(--space-5) var(--space-4);
}

.study-set-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.study-set-action-card {
    display: block;
    text-decoration: none;
    color: var(--color-text);
    margin-bottom: 0;
}

.study-set-action-card:hover {
    text-decoration: none;
    border-color: var(--color-primary);
}

.study-set-action-card h2 {
    margin-top: 0;
}

@media (min-width: 768px) {
    .study-set-actions {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===================================================================
   Form fields
   =================================================================== */
label:not(:has(input)) {
    display: block;
    font-weight: 600;
    margin-top: var(--space-3);
    margin-bottom: var(--space-1);
}

label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 400;
    margin: 0;
    padding: var(--space-2) 0;
    min-height: 44px;
}

input,
select,
textarea {
    font-size: var(--font-size-base);
    padding: var(--space-2) var(--space-3);
    min-height: 44px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    width: 100%;
    font-family: inherit;
    scroll-margin-bottom: calc(var(--tabbar-height) + var(--space-4));
}

textarea {
    min-height: 44px;
}

input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    min-height: 0;
    flex-shrink: 0;
}

.option-edit-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-1) 0;
}

.option-edit-row input[type="text"] {
    flex: 1;
}

.login-form,
.logout-form,
.study-set-form,
.upload-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.logout-form {
    flex-direction: row;
}

.error {
    color: var(--color-danger);
    font-weight: 600;
}

/* ===================================================================
   Flash messages
   =================================================================== */
.flash-messages {
    margin-bottom: var(--space-4);
}

.flash {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin: 0 0 var(--space-2) 0;
}

.flash a {
    margin-left: var(--space-2);
    font-weight: 700;
}

/* ===================================================================
   Meta text / status badges
   =================================================================== */
.meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.status {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.status-pending {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.status-done {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.status-failed {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* ===================================================================
   Source quote (the "Bron: ..." citation)
   =================================================================== */
.source-quote {
    border-left: 4px solid var(--color-border-strong);
    padding: var(--space-2) var(--space-3);
    margin: var(--space-3) 0;
    font-style: italic;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.source-quote cite {
    display: block;
    font-style: normal;
    margin-top: var(--space-1);
}

/* ===================================================================
   Answer options (quiz question, interactive)
   =================================================================== */
.answer-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    list-style: none;
    padding: 0;
}

.answer-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    min-height: 44px;
}

.answer-option:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-selected-bg);
}

/* ===================================================================
   Verdict (overall correct/incorrect heading) and per-option review
   state (feedback + results) -- never signalled by color alone:
   icon + label + color + border style (solid vs dashed) together.
   =================================================================== */
.verdict {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-lg);
    font-weight: 700;
    border: 2px solid transparent;
}

.verdict-correct {
    background: var(--color-success-bg);
    color: var(--color-success);
    border-color: var(--color-success);
}

.verdict-incorrect {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border-style: dashed;
    border-color: var(--color-danger);
}

.answer-options-review {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-3) 0;
    list-style: none;
    padding: 0;
}

.answer-option-review {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
}

.answer-option-review .marker {
    font-weight: 700;
    flex-shrink: 0;
}

.answer-option-review.is-correct {
    border-style: solid;
    border-color: var(--color-success);
    background: var(--color-success-bg);
}

.answer-option-review.is-correct .marker {
    color: var(--color-success);
}

.answer-option-review.is-wrong {
    border-style: dashed;
    border-color: var(--color-danger);
    background: var(--color-danger-bg);
}

.answer-option-review.is-wrong .marker {
    color: var(--color-danger);
}

/* ===================================================================
   Lists (study sets, source files, quiz history, question cards)
   =================================================================== */
.study-set-list,
.source-file-list,
.quiz-history {
    list-style: none;
    padding: 0;
}

.study-set-list li,
.source-file-list li,
.quiz-history li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.study-set-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.question-card ul {
    margin: var(--space-2) 0;
    padding-left: var(--space-5);
}

.question-card .correct-answer {
    font-weight: 600;
    color: var(--color-success);
}

/* ===================================================================
   Review screen: page image + extracted text (stacked mobile,
   side-by-side desktop)
   =================================================================== */
.review-pages {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.page-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .page-card {
        grid-template-columns: minmax(240px, 40%) 1fr;
        align-items: start;
    }
}

.page-card img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
}

.page-card textarea {
    width: 100%;
    font-family: inherit;
    font-size: var(--font-size-base);
    min-height: 240px;
}

.request-vision-form {
    margin-top: var(--space-2);
}

.vision-banner {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-top: var(--space-2);
}

.vision-banner form {
    margin-top: var(--space-2);
}

.vision-extra {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
}

.vision-extra ul {
    margin: var(--space-1) 0 0 var(--space-5);
    padding: 0;
}

.file-status {
    padding: var(--space-2) 0;
}

.file-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
}

.file-status-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.file-status-row .delete-file-form {
    flex-shrink: 0;
}