html, body {
    font-family: 'Roboto', 'Noto Sans SC', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #F0F2F5;
    /* The study has one theme and it is light, so say so: it stops a browser in OS dark mode
       darkening the canvas, the scrollbars and any unstyled form control. */
    color-scheme: light;
}

/* ── Blazor loading & error (keep these) ── */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
.blazor-error-boundary {
    padding: 1rem;
    color: white;
    background: #b32121;
}
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}
.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: #1B2558;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* ── Registration / entry page ── */
.reg-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #1B2558 0%, #2a3a7c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.reg-card {
    width: 100%;
    max-width: 860px;
    border-radius: 16px !important;
}
.reg-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: #F59F00;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

/* ── Literacy check page ── */
.literacy-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #1B2558 0%, #2a3a7c 100%);
    display: flex;
    flex-direction: column;   /* CR V7 item 11 — the Disclaimer link sits under the card */
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.option-card {
    cursor: pointer;
    border: 2px solid #e0e0e0 !important;
    border-radius: 10px !important;
    transition: all 0.2s ease;
    padding: 0.8rem 1.2rem;
    text-align: center;
}
/* CR V4 item 11 — a multi-select question puts a checkbox in the card, so those cards read
   left-aligned with the box leading. Single-select cards keep the centred treatment. */
.option-card:has(.option-check) {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-align: left;
}
.option-check {
    font-size: 20px;
    color: #1B2558;
    flex-shrink: 0;
}
.option-card.selected .option-check { color: #B45309; }

.option-card:hover {
    border-color: #1B2558 !important;
    background: #EEF0F8 !important;
}
.option-card.selected {
    border-color: #F59F00 !important;
    background: #FFF8E1 !important;
}
.option-card.correct {
    border-color: #4CAF50 !important;
    background: #E8F5E9 !important;
}

/* v1 simulation styles removed — the v2 simulation screen is fully styled by
   the scoped stylesheet Pages/Simulation.razor.css. Keeping simulation class
   names out of this global file prevents collisions (.news-panel, .bank-card,
   .action-grid, .modal-overlay, …). */

/* ── Completed page ── */
.completed-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #1B2558 0%, #2a3a7c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 2rem;
}

/* ── Mobile: stop iOS auto-zooming form fields ──────────────────────────────
   iOS Safari zooms the viewport whenever a focused input's font-size is below
   16px, and it does NOT zoom back out when the field loses focus — the
   participant is left pinching to restore their view after every entry.

   MudBlazor's text fields inherit `body2` (0.875rem = 14px), so the demographics
   and literacy forms trigger it just as the transaction amount box did. This
   file loads after MudBlazor.min.css, so matching their specificity is enough
   and no !important is needed.

   Deliberately NOT fixed via `maximum-scale=1 / user-scalable=no` on the
   viewport meta: that disables pinch-zoom outright, fails WCAG 1.4.4, and this
   study includes older participants who may rely on it. */
@media (pointer: coarse), (max-width: 900px) {
    input,
    textarea,
    select,
    .mud-input-slot.mud-input-root,
    .mud-input > input.mud-input-root,
    .mud-input.mud-input-text {
        font-size: 16px;
    }
}