/* theme:start — generated by bin/app-build.sh from meta.php seed #63A002, don't edit by hand */
:root {
    --md-primary: #4C662B;
    --md-on-primary: #FFFFFF;
    --md-primary-container: #CDEDA3;
    --md-on-primary-container: #354E16;
    --md-secondary: #586249;
    --md-on-secondary: #FFFFFF;
    --md-secondary-container: #DCE7C8;
    --md-on-secondary-container: #404A33;
    --md-tertiary: #386663;
    --md-on-tertiary: #FFFFFF;
    --md-tertiary-container: #BCECE7;
    --md-on-tertiary-container: #1F4E4B;
    --md-error: #BA1A1A;
    --md-on-error: #FFFFFF;
    --md-error-container: #FFDAD6;
    --md-on-error-container: #93000A;
    --md-background: #F9FAEF;
    --md-on-background: #1A1C16;
    --md-surface: #F9FAEF;
    --md-on-surface: #1A1C16;
    --md-surface-variant: #E1E4D5;
    --md-on-surface-variant: #44483D;
    --md-surface-container-lowest: #FFFFFF;
    --md-surface-container-low: #F3F4E9;
    --md-surface-container: #EEEFE3;
    --md-surface-container-high: #E8E9DE;
    --md-surface-container-highest: #E2E3D8;
    --md-outline: #75796C;
    --md-outline-variant: #C5C8BA;
    --md-inverse-surface: #2F312A;
    --md-inverse-on-surface: #F1F2E6;
    --md-inverse-primary: #B1D18A;
    --md-red: #B42800;
    --md-on-red: #FFFFFF;
    --md-red-container: #FFDAD2;
    --md-on-red-container: #8A1D00;
    --md-yellow: #795900;
    --md-on-yellow: #FFFFFF;
    --md-yellow-container: #FFDFA0;
    --md-on-yellow-container: #5C4300;
    --md-green: #286C07;
    --md-on-green: #FFFFFF;
    --md-green-container: #AAF685;
    --md-on-green-container: #1A5200;
}
@media (prefers-color-scheme: dark) {
    :root {
        --md-primary: #B1D18A;
        --md-on-primary: #1F3701;
        --md-primary-container: #354E16;
        --md-on-primary-container: #CDEDA3;
        --md-secondary: #BFCBAD;
        --md-on-secondary: #2A331E;
        --md-secondary-container: #404A33;
        --md-on-secondary-container: #DCE7C8;
        --md-tertiary: #A0D0CB;
        --md-on-tertiary: #003735;
        --md-tertiary-container: #1F4E4B;
        --md-on-tertiary-container: #BCECE7;
        --md-error: #FFB4AB;
        --md-on-error: #690005;
        --md-error-container: #93000A;
        --md-on-error-container: #FFDAD6;
        --md-background: #12140E;
        --md-on-background: #E2E3D8;
        --md-surface: #12140E;
        --md-on-surface: #E2E3D8;
        --md-surface-variant: #44483D;
        --md-on-surface-variant: #C5C8BA;
        --md-surface-container-lowest: #0C0F09;
        --md-surface-container-low: #1A1C16;
        --md-surface-container: #1E201A;
        --md-surface-container-high: #282B24;
        --md-surface-container-highest: #33362E;
        --md-outline: #8F9285;
        --md-outline-variant: #44483D;
        --md-inverse-surface: #E2E3D8;
        --md-inverse-on-surface: #2F312A;
        --md-inverse-primary: #4C662B;
        --md-red: #FFB4A2;
        --md-on-red: #621100;
        --md-red-container: #8A1D00;
        --md-on-red-container: #FFDAD2;
        --md-yellow: #F8BD2A;
        --md-on-yellow: #402D00;
        --md-yellow-container: #5C4300;
        --md-on-yellow-container: #FFDFA0;
        --md-green: #8FD96C;
        --md-on-green: #0F3900;
        --md-green-container: #1A5200;
        --md-on-green-container: #AAF685;
    }
}
/* theme:end */

/* The map quiz's full-height map (assets/map.js, pages/quiz/view.php app_view_location_question()): a canvas the finger owns
   (no page scroll, no page zoom on it); map.js reads its colors from the --md-* tokens. */
.app-map__frame { position: relative; height: 100%; background: var(--md-tertiary-container); }
.app-map { display: block; width: 100%; height: 100%; touch-action: none; cursor: pointer; }
.app-map:focus-visible { outline: 2px solid var(--md-primary); outline-offset: -2px; }
/* M3's floating toolbar + FAB pair, centred 16px above the map's bottom edge; the row itself lets taps through to the map. */
.app-map__controls {
    position: absolute;
    left: var(--spacing-medium);
    right: var(--spacing-medium);
    bottom: var(--spacing-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xsmall);
    pointer-events: none;
}
.app-map__controls > * { pointer-events: auto; }
/* Heard by screen readers, never seen: a visible country name would give the answer away. */
.app-map__announce, .app-map__choices { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The countries as a list for keyboards: hidden until it holds the focus, then a panel over the map. */
.app-map__choices:focus-within {
    top: var(--spacing-medium);
    left: var(--spacing-medium);
    right: var(--spacing-medium);
    width: auto;
    height: auto;
    bottom: calc(2 * var(--spacing-medium) + 64px);
    overflow-y: auto;
    clip-path: none;
    white-space: normal;
    border-radius: 16px;
    background: var(--md-surface);
}