/* Reef by Gatis Vilaks and Evita Vilaka — brand wordmark only (see .front-page-header-title) */
@font-face {
    font-family: 'Reef';
    src: url('../fonts/Reef.woff2') format('woff2'),
         url('../fonts/Reef.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Inter — all UI/body text via var(--font-ui); variable file from public/fonts */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2');
}

:root {
    /* Set by displayScaleCompensation.js — 1.25 / detected Windows display scale (baseline 125%) */
    --display-compensation-factor: 1;

    --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Layered card inners + session digit shell (MenuFormat) */
    --fp-layer-inner-radius: 2rem;
    --fp-layer-outer-radius: 2rem;

    /* Front page polka — small dots translucent; cursor magnify dots = solid, same apparent tint */
    --app-front-polka-dot-fill: rgba(15, 46, 158, 0.44);
    --app-front-polka-dot-hole-edge: 0.102rem;

    /* Opaque match to small dots: same as rgba(15,46,158,0.44) over rgb(245,248,255) (~--app-bg-standard-color) */
    --app-front-polka-magnify-fill-opaque: rgb(144, 159, 212);

    --app-front-polka-layer: radial-gradient(
        circle at 50% 50%,
        var(--app-front-polka-dot-fill) 0.095rem,
        transparent var(--app-front-polka-dot-hole-edge)
    );

    /* Large dots: filled discs (no hole), 3× radius vs small dot cell */
    --app-front-polka-magnify-layer: radial-gradient(
        circle at 50% 50%,
        var(--app-front-polka-magnify-fill-opaque) 0.285rem,
        transparent 0.306rem
    );

    /* Default page wash (most pages + front page when Administrator is selected) */
    --app-bg-standard-color: #f5f8ff;
    --app-bg-standard-image:
        radial-gradient(circle at 0% 0%, #e0edff 0, transparent 55%),
        radial-gradient(circle at 0% 50%, #d0e2ff 0, transparent 55%),
        radial-gradient(circle at 0% 100%, #d0e2ff 0, transparent 55%),
        radial-gradient(circle at 100% 0%, #e6f0ff 0, transparent 55%),
        radial-gradient(circle at 100% 50%, #d8e5ff 0, transparent 55%),
        radial-gradient(circle at 100% 100%, #d0e2ff 0, transparent 55%);

    /* Deeper saturated blue wash (front Invigilator, Invigilator page, Session Review) */
    --app-bg-blue-color: #c4dafb;
    --app-bg-blue-image:
        radial-gradient(circle at 0% 0%, #a8c9f8 0, transparent 55%),
        radial-gradient(circle at 0% 50%, #94bbf5 0, transparent 55%),
        radial-gradient(circle at 0% 100%, #94bbf5 0, transparent 55%),
        radial-gradient(circle at 100% 0%, #b0d2fb 0, transparent 55%),
        radial-gradient(circle at 100% 50%, #9ec5f8 0, transparent 55%),
        radial-gradient(circle at 100% 100%, #94bbf5 0, transparent 55%);

    /* Tabular lining figures — Inter OpenType (live clocks/timers; avoids proportional-digit jitter) */
    --font-tabular-variant: tabular-nums lining-nums;
    --font-tabular-features: "tnum" 1, "lnum" 1;

    /* `.front-page-role-card-inner` frosted edge */
    --front-code-role-card-inner-border: rgba(255, 255, 255, 0.55);
    /* Expanded session-code digit outline — same blue as digit gradient fill (#0f6bdc), 50% opacity */
    --front-code-digit-open-ring: rgba(15, 107, 220, 0.5);
}

/*
 * Overscroll: keep default vertical chaining so native rubber-band can engage where the
 * platform supports it (e.g. Safari / iOS). Nested regions that use overscroll-behavior: contain
 * still block propagation locally.
 */
html {
    overscroll-behavior-y: auto;
    /*
     * Phone "easier to read" text-size / display-size settings otherwise inflate text
     * inside wide blocks independently of the rem-based layout, which pushes headings,
     * clocks, and buttons out of their containers. Pinch zoom is still available.
     */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* displayScaleCompensation.js applies zoom (or root font-size fallback) so layout matches 125% baseline */
html.display-scale-compensated--font-size {
    overflow-x: auto;
}

body {
    overscroll-behavior-y: auto;
}

/*
 * Live clocks, countdowns, and MM:SS-style numeric UI — stable digit widths with Inter.
 * (Reef-only displays such as `.front-page-clock` / `.digit` rely on fixed `ch` widths in MenuFormat.)
 */
.invigilator-clock-wrap,
.invigilator-scheduled-start-countdown,
.invigilator-break-button,
.session-review-header-datetime,
.exam-periods-datetime,
.exam-node-time-value,
.exam-node-time-value-timer,
.exam-node-time-value-warning,
.exam-node-reading-phase-timer,
.exam-node-reading-phase-timer-mmss,
.invigilator-start-reading-timer,
.student-time-remaining,
.student-time-timer,
.student-time-warning,
.breaks-remaining-circle,
.breaks-remaining-circle-digit,
.admin-settings-clock-sync-status {
    font-variant-numeric: var(--font-tabular-variant);
    font-feature-settings: var(--font-tabular-features);
}

/* Default typography: Inter site-wide (Reef only where explicitly set) */
body,
input, button, select, option, optgroup, textarea,
h1, h2, h3, h4, h5, h6, h7,
p, span, div, label, a, li, td, th {
    font-family: var(--font-ui);
}

/* Invigila wordmark (front header + invigilator header + session review) */
.front-page-header-title,
.session-review-header-wordmark {
    font-family: 'Reef', var(--font-ui) !important;
}

/* Scrollbars — site teal / blue palette (Firefox + WebKit) */
* {
    scrollbar-width: auto;
    scrollbar-color: rgba(0, 96, 143, 0.55) rgba(0, 96, 143, 0.09);
}

*::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

*::-webkit-scrollbar-track {
    background: rgba(0, 96, 143, 0.06);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    background-image: linear-gradient(180deg, #5aa5ff 0%, #0f6bdc 55%, rgb(0, 96, 143) 100%);
    box-shadow: 0 1px 2px rgba(0, 96, 143, 0.15);
}

*::-webkit-scrollbar-thumb:hover {
    background-image: linear-gradient(180deg, #6eb4ff 0%, #1a75e0 55%, rgb(0, 70, 108) 100%);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* iPad landscape lock overlay (markup + extra styles from ipadLandscapeLock.js) */
html.ipad-device.ipad-portrait {
    overflow: hidden !important;
}

html.ipad-device.ipad-portrait body {
    overflow: hidden !important;
    visibility: hidden !important;
}

#ipadLandscapeLock[hidden] {
    display: none !important;
}