@charset "UTF-8";

/* ============================================================
   Verdensmaal
   Copyright © 2026 aftenregn. Alle rettigheder forbeholdes.
   verdensmaal.aftenregn.dk

   Koden ligger frit læsbar, fordi den kører i browseren.
   Det gør den ikke fri at bruge. Kopiering, ændring og
   videredistribution kræver skriftlig tilladelse.
   ============================================================ */

:root {
    --color-page-background: #2c2828;
    --color-background: #141210;
    --color-text: #f6efe4;
    --color-text-hover: #808080;
    --color-panel: #f6efe4;
    --color-text-on-panel: #141210;
    --color-link: var(--color-goal-17);
    --color-quote-background: rgba(20, 18, 16, 0.5);
    --color-dot: #f3f0f0;
    --color-border-inactive: #f6efe4b7;
    --color-divider-on-panel: rgba(20, 18, 16, 0.15);
    --color-divider-on-panel-light: rgba(20, 18, 16, 0.08);

    --color-status-on-track: #3f8f4a;
    --color-status-moderate: #8fae3a;
    --color-status-marginal: #d9a03a;
    --color-status-stagnation: #d9702f;
    --color-status-regression: #c0392b;
    --color-status-no-data: #9a948c;

    --color-goal-1: #e20820;
    --color-goal-2: #d5a200;
    --color-goal-3: #289337;
    --color-goal-4: #c11727;
    --color-goal-5: #e7311e;
    --color-goal-6: #00a7d6;
    --color-goal-7: #fab800;
    --color-goal-8: #921731;
    --color-goal-9: #eb6410;
    --color-goal-10: #dd0279;
    --color-goal-11: #f69d00;
    --color-goal-12: #d18d0e;
    --color-goal-13: #4a7735;
    --color-goal-14: #0075b7;
    --color-goal-15: #41a634;
    --color-goal-16: #004a84;
    --color-goal-17: #1b3262;

    --color-goal-1-text: #f1272e;
    --color-goal-4-text: #e34043;
    --color-goal-5-text: #eb3522;
    --color-goal-8-text: #cf5462;
    --color-goal-10-text: #ea2284;
    --color-goal-13-text: #5b8946;
    --color-goal-14-text: #1f83c6;
    --color-goal-16-text: #4280bf;
    --color-goal-17-text: #617db3;

    --color-button-border: var(--color-goal-3) var(--color-goal-10) var(--color-goal-7) var(--color-goal-16);

    --font-family-primary: "Oswald", sans-serif;
    --font-family-primary-light: "Oswald Light", "Oswald", sans-serif;
    --font-family-secondary: "Roboto", sans-serif;

    --font-size-small: 1.2rem;
    --font-size-medium: 1.6rem;
    --font-size-large: 1.8rem;
    --font-size-extra-large: 2rem;
    --font-size-quiz-heading: 1.6rem;
    --font-size-body-text: 1.3rem;
    --font-size-part-goal-number: 1.4rem;

    --space-extra-small: 0.5rem;
    --space-small: 1rem;
    --space-medium: 1.5rem;
    --space-large: 2rem;
    --space-extra-large: 3rem;

    --answer-button-border-width: 4px;
    --answer-font-size: 0.95rem;
    --answer-line-height: 1.15;
    --answer-padding-block: 0.25rem;

    --duration-fast: 0.3s;
    --duration-slow: 0.8s;
    --duration-image-fade: 0.6s;
    --duration-relevance-fade: 0.4s;
    --duration-information-fade: 1s;

    --opacity-hover: 0.5;
    --opacity-spotlight: 0.6;

    --page-max-width: 1920px;

    --quiz-heading-height: 3.4rem;
    --next-goal-space: 4.5rem;
    --goal-heading-arrow-space: 2.25rem;
    --goal-heading-size: 1.8rem;
    --quiz-answers-height: calc(
        2 * var(--answer-font-size) * var(--answer-line-height) + 2 * var(--answer-padding-block) +
            2 * var(--answer-button-border-width) + var(--space-extra-small)
    );

    --background-bar-height: 3.5rem;
    --background-bar-total-height: calc(var(--background-bar-height) + env(safe-area-inset-bottom));
    --background-bar-space: 5rem;
    --background-bar-clearance: calc(var(--background-bar-total-height) + var(--background-bar-space));

    --quiz-fixed-height: calc(
        var(--quiz-heading-height) + var(--quiz-answers-height) + var(--background-bar-clearance)
    );

    --page-width: min(100%, var(--page-max-width), max(480px, (100svh - var(--quiz-fixed-height)) * 18 / 13));
}

.goal-1 {
    --goal-color: var(--color-goal-1);
    --goal-text-color: var(--color-goal-1-text);
}

.goal-2 {
    --goal-color: var(--color-goal-2);
    --goal-text-color: var(--color-goal-2);
}

.goal-3 {
    --goal-color: var(--color-goal-3);
    --goal-text-color: var(--color-goal-3);
}

.goal-4 {
    --goal-color: var(--color-goal-4);
    --goal-text-color: var(--color-goal-4-text);
}

.goal-5 {
    --goal-color: var(--color-goal-5);
    --goal-text-color: var(--color-goal-5-text);
}

.goal-6 {
    --goal-color: var(--color-goal-6);
    --goal-text-color: var(--color-goal-6);
}

.goal-7 {
    --goal-color: var(--color-goal-7);
    --goal-text-color: var(--color-goal-7);
}

.goal-8 {
    --goal-color: var(--color-goal-8);
    --goal-text-color: var(--color-goal-8-text);
}

.goal-9 {
    --goal-color: var(--color-goal-9);
    --goal-text-color: var(--color-goal-9);
}

.goal-10 {
    --goal-color: var(--color-goal-10);
    --goal-text-color: var(--color-goal-10-text);
}

.goal-11 {
    --goal-color: var(--color-goal-11);
    --goal-text-color: var(--color-goal-11);
}

.goal-12 {
    --goal-color: var(--color-goal-12);
    --goal-text-color: var(--color-goal-12);
}

.goal-13 {
    --goal-color: var(--color-goal-13);
    --goal-text-color: var(--color-goal-13-text);
}

.goal-14 {
    --goal-color: var(--color-goal-14);
    --goal-text-color: var(--color-goal-14-text);
}

.goal-15 {
    --goal-color: var(--color-goal-15);
    --goal-text-color: var(--color-goal-15);
}

.goal-16 {
    --goal-color: var(--color-goal-16);
    --goal-text-color: var(--color-goal-16-text);
}

.goal-17 {
    --goal-color: var(--color-goal-17);
    --goal-text-color: var(--color-goal-17-text);
}

@font-face {
    font-family: "Oswald";
    src: url("../fonts/Oswald-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Oswald Light";
    src: url("../fonts/Oswald-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-page-background);
}

html {
    font-family: var(--font-family-primary);
    scroll-padding-block-end: var(--background-bar-clearance);

    @media (max-width: 588px) {
        font-size: 90%;
    }
}

.page {
    box-sizing: border-box;
    width: var(--page-width);
    min-block-size: 100vh;
    min-block-size: 100dvh;
    margin-inline: auto;
    padding-top: env(safe-area-inset-top);
    padding-bottom: var(--background-bar-clearance);
    background-color: var(--color-background);
    container: page / inline-size;
}

.noscript-message {
    color: var(--color-text);
    font-size: var(--font-size-large);
    text-align: center;
    padding: var(--space-large);
}

.project-background-view {
    display: none;
}

.page.is-showing-background {
    padding-bottom: var(--background-bar-total-height);

    .project-background-view {
        display: block;
    }

    .background-bar-link {
        display: none;
    }

    .background-bar::before {
        display: none;
    }

    .quiz {
        min-block-size: 0;
    }

    .quiz > :not(.goal-icons) {
        display: none;
    }
}

.back-to-quiz-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin: var(--space-extra-large) var(--space-small) 0;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-medium);
    color: var(--color-text);
    text-decoration: none;

    &:hover {
        color: var(--color-text-hover);

        .back-to-quiz-icon {
            opacity: var(--opacity-hover);
        }
    }

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

    @container page (max-width: 600px) {
        margin-top: var(--space-small);
    }
}

.back-to-quiz-icon {
    display: block;
    block-size: 0.8em;
    inline-size: auto;
}

.quiz-information-toggle {
    display: flex;
    justify-content: center;
    padding: 0;
    font-family: var(--font-family-primary);
    min-inline-size: 24px;
    min-block-size: 24px;
    font-size: var(--font-size-extra-large);
    font-weight: bold;
    line-height: 1;
    color: var(--color-text);
    background: none;
    border: none;
    cursor: pointer;

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

.quiz-information {
    display: none;
    width: 80%;
    margin: 0 auto;
    padding-block: var(--space-extra-small);
    color: var(--color-text);
    font-size: var(--font-size-body-text);
    font-weight: bold;
    line-height: 1.3;
    text-align: center;

    &.is-open {
        display: block;
    }
}

.quiz-information-texts {
    display: grid;
    align-items: center;

    @media (prefers-reduced-motion: reduce) {
        display: block;
    }
}

.quiz-information-text {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--duration-information-fade) ease,
        visibility var(--duration-information-fade);

    &.is-shown {
        opacity: 1;
        visibility: visible;
    }

    @media (prefers-reduced-motion: reduce) {
        opacity: 1;
        visibility: visible;
        transition: none;

        & + & {
            margin-top: var(--space-extra-small);
        }
    }
}

.quiz-information-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-small);
    margin-top: var(--space-extra-small);

    @media (prefers-reduced-motion: reduce) {
        display: none;
    }
}

.quiz-information-play {
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;

    &:hover {
        opacity: var(--opacity-hover);
    }

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

.quiz-information-play-icon {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
}

.quiz-information-counter {
    font-family: var(--font-family-primary-light);
    font-size: var(--font-size-small);
    font-weight: normal;
}

.quiz {
    --photographer-image-size: clamp(3rem, 10cqi, 6rem);
    container: quiz / inline-size;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    min-block-size: calc(var(--quiz-height-hundreds, 0rem) + var(--quiz-height-tens, 0rem) + var(--quiz-height-ones, 0rem));
    grid-template-areas:
        "icons"
        "image"
        "heading"
        "answers"
        "information"
        "relevance"
        "result"
        "restart"
        "description"
        "photographer"
        "part-goal-instruction"
        "part-goals";
}

.goal-icons {
    grid-area: icons;
}

.quiz-image-stack {
    grid-area: image;
}

.quiz-heading-area,
.next-goal,
.quiz-browsing-hint {
    grid-area: heading;
}

.quiz-information {
    grid-area: information;
}

.quiz-answers-area {
    grid-area: answers;
}

.relevance-survey {
    grid-area: relevance;
}

.quiz-result {
    grid-area: result;
}

.quiz-restart {
    grid-area: restart;
}

.goal-description {
    grid-area: description;
}

.part-goal-instruction {
    grid-area: part-goal-instruction;
}

.part-goals {
    grid-area: part-goals;
}

.quiz-height-hundreds-1 {
    --quiz-height-hundreds: 100rem;
}

.quiz-height-hundreds-2 {
    --quiz-height-hundreds: 200rem;
}

.quiz-height-hundreds-3 {
    --quiz-height-hundreds: 300rem;
}

.quiz-height-tens-1 {
    --quiz-height-tens: 10rem;
}

.quiz-height-tens-2 {
    --quiz-height-tens: 20rem;
}

.quiz-height-tens-3 {
    --quiz-height-tens: 30rem;
}

.quiz-height-tens-4 {
    --quiz-height-tens: 40rem;
}

.quiz-height-tens-5 {
    --quiz-height-tens: 50rem;
}

.quiz-height-tens-6 {
    --quiz-height-tens: 60rem;
}

.quiz-height-tens-7 {
    --quiz-height-tens: 70rem;
}

.quiz-height-tens-8 {
    --quiz-height-tens: 80rem;
}

.quiz-height-tens-9 {
    --quiz-height-tens: 90rem;
}

.quiz-height-ones-1 {
    --quiz-height-ones: 1rem;
}

.quiz-height-ones-2 {
    --quiz-height-ones: 2rem;
}

.quiz-height-ones-3 {
    --quiz-height-ones: 3rem;
}

.quiz-height-ones-4 {
    --quiz-height-ones: 4rem;
}

.quiz-height-ones-5 {
    --quiz-height-ones: 5rem;
}

.quiz-height-ones-6 {
    --quiz-height-ones: 6rem;
}

.quiz-height-ones-7 {
    --quiz-height-ones: 7rem;
}

.quiz-height-ones-8 {
    --quiz-height-ones: 8rem;
}

.quiz-height-ones-9 {
    --quiz-height-ones: 9rem;
}

.quiz-browsing-hint {
    display: none;
    align-self: center;
    padding: var(--space-extra-small) var(--space-small);
    color: var(--color-text);
    font-size: var(--font-size-medium);
    line-height: 1.2;
    text-align: center;
}

.quiz.is-confirming-restart {
    .quiz-browsing-hint {
        display: block;
    }

    .quiz-heading-area,
    .next-goal {
        visibility: hidden;
    }
}

.quiz.is-viewing-other-goal {
    .quiz-browsing-hint {
        display: block;
    }

    .quiz-heading-area,
    .quiz-answers-area,
    .next-goal,
    .relevance-survey,
    .photographer,
    .goal-description,
    .part-goal-instruction,
    .part-goals {
        display: none;
    }
}

.quiz.is-showing-part-goals {
    .quiz-heading-area {
        display: none;
    }

    .next-goal {
        grid-area: description;
        align-self: start;
        margin-block-start: var(--space-medium);
    }
}

.quiz-image-stack {
    display: grid;
    aspect-ratio: 3 / 2;
}

.quiz-image {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity var(--duration-image-fade) ease;

    &.is-visible {
        opacity: 1;
    }

    @media (prefers-reduced-motion: reduce) {
        transition: none;
    }
}

.quiz-result,
.quiz-result-content {
    margin-top: var(--space-small);
    color: var(--color-text);
    font-size: var(--font-size-small);
    justify-content: center;
    text-align: center;
}

.quiz-result {
    display: flex;
    opacity: 0;

    &:empty {
        margin-top: 0;
    }

    &.is-visible {
        opacity: 1;
        transition: opacity var(--duration-information-fade) ease;

        @media (prefers-reduced-motion: reduce) {
            transition: none;
        }
    }
}

.quiz-result-line {
    padding-top: var(--space-small);
}

.part-goal-instruction {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.part-goal-instruction {
    display: none;

    &.is-visible {
        display: flex;
    }
}

.quiz-start-button {
    padding: var(--answer-padding-block) var(--space-extra-small);
    font-family: var(--font-family-primary-light);
    color: var(--color-text);
    font-size: var(--answer-font-size);
    line-height: var(--answer-line-height);
    border: var(--answer-button-border-width) solid;
    border-color: var(--color-button-border);
    background-color: transparent;
    transition: all var(--duration-slow);

    &:hover {
        cursor: pointer;
        color: var(--color-text-hover);
    }
}

.quiz-answer-button,
.relevance-answer-button,
.part-goal-choose-button {
    text-align: center;
    padding: var(--answer-padding-block) var(--space-extra-small);
    font-family: var(--font-family-primary-light);
    color: var(--color-text);
    font-size: var(--answer-font-size);
    line-height: var(--answer-line-height);
    border: var(--answer-button-border-width) solid;
    border-color: var(--color-button-border);
    background-color: transparent;
    transition: all var(--duration-slow);

    &:hover {
        cursor: pointer;
        color: var(--color-text-hover);
    }
}

.quiz-answer-button {
    display: none;

    &.is-visible {
        display: block;
    }
}

.relevance-answer-button {
    padding-inline: var(--space-small);
    transition-duration: var(--duration-fast);
}

.quiz-restart {
    display: none;
    justify-content: center;
    gap: var(--space-extra-small);
    margin: 0 auto;

    &.is-reserved {
        display: flex;
        visibility: hidden;
        opacity: 0;
    }

    &.is-visible {
        display: flex;
        visibility: visible;
        opacity: 1;
        transition: opacity var(--duration-information-fade) ease;

        @media (prefers-reduced-motion: reduce) {
            transition: none;
        }
    }
}

.quiz-restart-button.quiz-photographers-button {
    border-color: var(--color-goal-14) var(--color-goal-9) var(--color-goal-15) var(--color-goal-1);
}

.quiz-restart-button {
    margin-top: var(--space-large);
    padding: var(--answer-padding-block) var(--space-extra-small);
    font-family: var(--font-family-primary-light);
    color: var(--color-text);
    font-size: var(--answer-font-size);
    line-height: var(--answer-line-height);
    border: var(--answer-button-border-width) solid;
    border-color: var(--color-button-border);
    background-color: transparent;
    transition: all var(--duration-slow);

    &:hover {
        cursor: pointer;
        color: var(--color-text-hover);
    }
}

.quiz-answer-button,
.quiz-start-button,
.quiz-restart-button,
.part-goal-choose-button {
    box-sizing: border-box;
    min-block-size: calc(2lh + 2 * var(--answer-padding-block) + 2 * var(--answer-button-border-width));
}

.quiz-restart-button,
.part-goal-choose-button {
    inline-size: calc((100cqi - 2 * var(--space-small) - 3 * var(--space-extra-small)) / 4);

    @container quiz (max-width: 649px) {
        inline-size: calc((100cqi - 2 * var(--space-small) - var(--space-extra-small)) / 2);
    }
}

.next-goal {
    display: none;
    justify-self: end;
    align-self: center;
    margin-inline-end: var(--space-medium);
    position: relative;
    z-index: 1;

    @container quiz (max-width: 600px) {
        margin-inline-end: var(--space-small);
    }

    &.is-visible {
        display: flex;
    }
}

.quiz:has(.next-goal.is-visible) .quiz-heading-text {
    padding-inline: var(--next-goal-space);
}

.next-goal-button {
    --dot-size: 0.25rem;
    cursor: pointer;
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: calc(var(--dot-size) * 9);
    gap: calc(var(--dot-size) / 2);

    &:hover {
        animation: next-goal-nudge 2s infinite ease;
    }
}

@keyframes next-goal-nudge {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(calc(var(--dot-size) * 2.5));
    }

    100% {
        transform: translateX(0);
    }
}

.next-goal-dot {
    width: var(--dot-size);
    height: var(--dot-size);
    background: var(--goal-color, var(--color-dot));
    border-radius: 50%;
}

.next-goal-dot-row {
    display: flex;
    gap: calc(var(--dot-size) * 0.375);

    &:nth-child(2) {
        transform: translateX(calc(var(--dot-size) * 1.25));
    }

    &:nth-child(3) {
        transform: translateX(calc(var(--dot-size) * 2.5));
    }

    &:nth-child(4) {
        transform: translateX(calc(var(--dot-size) * 3.75));
    }

    &:nth-child(5) {
        transform: translateX(calc(var(--dot-size) * 2.5));
    }

    &:nth-child(6) {
        transform: translateX(calc(var(--dot-size) * 1.25));
    }
}

.quiz-answer-button {
    border-color: var(--answer-color-1) var(--answer-color-2) var(--answer-color-3) var(--answer-color-4);

    &:nth-child(1) {
        --answer-color-1: var(--color-goal-1);
        --answer-color-2: var(--color-goal-3);
        --answer-color-3: var(--color-goal-14);
        --answer-color-4: var(--color-goal-7);
    }

    &:nth-child(2) {
        --answer-color-1: var(--color-goal-6);
        --answer-color-2: var(--color-goal-4);
        --answer-color-3: var(--color-goal-2);
        --answer-color-4: var(--color-goal-8);
    }

    &:nth-child(3) {
        --answer-color-1: var(--color-goal-9);
        --answer-color-2: var(--color-goal-11);
        --answer-color-3: var(--color-goal-13);
        --answer-color-4: var(--color-goal-10);
    }

    &:nth-child(4) {
        --answer-color-1: var(--color-goal-15);
        --answer-color-2: var(--color-goal-12);
        --answer-color-3: var(--color-goal-5);
        --answer-color-4: var(--color-goal-16);
    }

    &:where(.border-turn-1) {
        border-color: var(--answer-color-4) var(--answer-color-1) var(--answer-color-2) var(--answer-color-3);
    }

    &:where(.border-turn-2) {
        border-color: var(--answer-color-3) var(--answer-color-4) var(--answer-color-1) var(--answer-color-2);
    }

    &:where(.border-turn-3) {
        border-color: var(--answer-color-2) var(--answer-color-3) var(--answer-color-4) var(--answer-color-1);
    }

    &.is-answered {
        border-color: var(--color-border-inactive);
        pointer-events: none;
    }

    &.is-correct {
        border-color: var(--goal-color);
        color: var(--goal-text-color);
    }
}

.relevance-answer-button {
    &:nth-child(1) {
        --survey-color: var(--color-goal-1);
        border-color: var(--survey-color);
    }

    &:nth-child(2) {
        --survey-color: var(--color-goal-9);
        border-color: var(--survey-color);
    }

    &:nth-child(3) {
        --survey-color: var(--color-goal-7);
        border-color: var(--survey-color);
    }

    &:nth-child(4) {
        --survey-color: var(--color-goal-3);
        border-color: var(--survey-color);
    }

    &:nth-child(5) {
        --survey-color: var(--color-goal-15);
        border-color: var(--survey-color);
    }
}

.part-goal-instruction-text {
    font-size: var(--font-size-quiz-heading);
    line-height: 1.2;
    text-align: center;
    margin-top: var(--space-small);
    color: var(--color-text);
    margin-bottom: var(--space-large);

    @container quiz (max-width: 600px) {
        min-block-size: 2.4em;
        margin-top: var(--space-extra-small);
        margin-bottom: var(--space-extra-small);
    }
}

.quiz-heading-text {
    font-size: var(--font-size-quiz-heading);
    line-height: 1.2;
    text-align: center;
    margin-block: var(--space-extra-small);
    color: var(--color-text);

    &:empty {
        display: none;
    }
}

.quiz-heading-text,
.part-goal-instruction-text,
.quiz-finish-title {
    &:focus {
        outline: none;
    }
}
.quiz-heading-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-block-size: var(--quiz-heading-height);
}

.quiz-start {
    grid-row: 1;
    grid-column: 1 / span 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-small);

    @container quiz (max-width: 649px) {
        grid-column: 1 / span 2;
    }
}

.quiz-start-button[data-quiz-type="extended"] {
    border-color: var(--color-goal-14) var(--color-goal-9) var(--color-goal-15) var(--color-goal-1);
}

.quiz-answers-area {
    padding-inline: var(--space-small);
    margin-bottom: var(--space-extra-small);
}

.quiz-answers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-extra-small);

    @container quiz (max-width: 649px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.relevance-survey {
    display: none;
    scroll-margin-block-start: var(--space-small);

    &.is-visible {
        display: block;
    }
}

.relevance-question-area {
    display: flex;
    justify-content: center;
    padding-inline: var(--space-small);
}

.relevance-question {
    display: grid;
    color: var(--color-text);
    font-size: var(--font-size-quiz-heading);
    text-align: center;
    margin-block: var(--space-small);
}

.relevance-question-text {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity var(--duration-relevance-fade) ease;

    &.is-visible {
        opacity: 1;
    }

    @media (prefers-reduced-motion: reduce) {
        transition: none;
    }
}

.relevance-answers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-extra-small);
    padding-inline: var(--space-small);

    &.is-answered {
        pointer-events: none;

        & .relevance-answer-button {
            color: var(--color-border-inactive);
            border-color: var(--color-border-inactive);
        }

        & .relevance-answer-button.is-selected {
            color: var(--survey-color);
            border-color: var(--survey-color);
        }
    }
}

.relevance-skip-button {
    display: block;
    margin: var(--space-small) auto 0;
    padding: var(--answer-padding-block) var(--space-small);
    font-family: var(--font-family-primary-light);
    font-size: var(--answer-font-size);
    line-height: var(--answer-line-height);
    color: var(--color-text);
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;

    &:hover {
        color: var(--color-text-hover);
    }
}

.goal-icons {
    display: flex;
    align-items: flex-end;
    min-block-size: calc(100cqi / 18);

    @container quiz (max-width: 600px) {
        display: grid;
        grid-template-columns: repeat(9, minmax(0, 1fr));
        position: relative;
        z-index: 1;
    }
}

.goal-icon-button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity var(--duration-fast) ease;

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

    @media (hover: hover) {
        .goal-icons:has(.goal-icon-button:hover) &:not(:hover, .is-current) {
            opacity: var(--opacity-spotlight);
        }
    }

    &.is-current {
        --current-icon-size: calc(100cqi / 18 + 0.75rem);
        flex: 0 0 var(--current-icon-size);
        align-self: flex-start;
        position: relative;
        z-index: 1;
    }

    @container quiz (max-width: 600px) {
        position: relative;
        z-index: 1;

        &.is-current {
            z-index: 0;
        }
    }
}

.goal-icon {
    display: block;
    width: 100%;
    height: auto;

    .is-current > & {
        width: var(--current-icon-size);
        margin-bottom: -0.75rem;
    }

    @container quiz (max-width: 600px) {
        width: 100%;

        .is-current > & {
            --current-icon-scale: 1.15;
            --current-icon-crop: calc(100% - 100% / var(--current-icon-scale));
            width: 100%;
            margin-bottom: 0;
            transform: scale(var(--current-icon-scale));
            transform-origin: bottom;
            clip-path: inset(0 calc(var(--current-icon-crop) / 2));
        }

        .goal-icon-button.is-current:nth-child(n + 10) > & {
            transform-origin: top;
        }

        .goal-icon-button.is-current:nth-child(1) > & {
            transform-origin: left bottom;
            clip-path: inset(0 var(--current-icon-crop) 0 0);
        }

        .goal-icon-button.is-current:nth-child(9) > & {
            transform-origin: right bottom;
            clip-path: inset(0 0 0 var(--current-icon-crop));
        }

        .goal-icon-button.is-current:nth-child(10) > & {
            transform-origin: left top;
            clip-path: inset(0 var(--current-icon-crop) 0 0);
        }

        .goal-icon-button.is-current:nth-child(18) > & {
            transform-origin: right top;
            clip-path: inset(0 0 0 var(--current-icon-crop));
        }
    }
}

.photographer {
    --photographer-toggle-size: 1.5rem;
    display: none;
    grid-area: photographer;
    margin: var(--space-small);
    padding: var(--space-extra-small) var(--space-small);
    background-color: var(--color-quote-background);
    border-radius: 0.3rem;

    &.is-visible {
        display: flow-root;
    }

    @container quiz (min-width: 650px) {
        grid-area: image;
        align-self: end;
        position: relative;
        z-index: 1;
    }

    @container quiz (max-width: 649px) {
        .quiz.is-showing-part-goals & {
            display: none;
        }
    }
}

.photographer-images {
    display: flex;
    float: left;
    gap: var(--space-extra-small);
    margin-inline-end: var(--space-small);
}

.photographer-goal-icon,
.photographer-portrait {
    display: block;
    width: var(--photographer-image-size);
    height: var(--photographer-image-size);
    object-fit: contain;
}

.photographer-quote {
    color: var(--color-text);
    font-size: var(--font-size-small);
    font-family: var(--font-family-primary-light);
    text-align: left;

    @container quiz (min-width: 650px) {
        &::after {
            content: "";
            display: inline-block;
            inline-size: calc(var(--photographer-toggle-size) + var(--space-extra-small));
        }
    }
}

.photographer-toggle {
    display: none;
    padding: 0.15rem;
    border: none;
    background: none;
    cursor: pointer;

    @container quiz (min-width: 650px) {
        display: block;
        position: absolute;
        inset-block-end: var(--space-extra-small);
        inset-inline-end: var(--space-small);
    }

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

.photographer-toggle-icon {
    display: block;
    inline-size: calc(var(--photographer-toggle-size) - 0.3rem);
    block-size: calc(var(--photographer-toggle-size) - 0.3rem);
    object-fit: contain;
    filter: brightness(0) invert(1);
}

@container quiz (min-width: 650px) {
    .photographer.is-collapsed {
        justify-self: end;
        padding: calc(var(--space-extra-small) + var(--answer-button-border-width))
            calc(0.625rem + var(--answer-button-border-width));
        margin-inline-end: calc(var(--space-small) + 0.375rem - var(--answer-button-border-width));
        margin-block-end: calc(var(--space-small) - var(--answer-button-border-width));
        background-color: transparent;

        &::before,
        &::after {
            content: "";
            position: absolute;
            z-index: -1;
        }

        &::before {
            inset: 0;
            background-color: var(--goal-color, var(--color-text));
            clip-path: polygon(
                50% 23.9%, 50.1% 22.7%, 50.9% 19.4%, 52.8% 14.6%, 56.2% 9.2%, 61.3% 4.4%, 67.7% 1.1%, 75% 0%,
                82.5% 1.5%, 89.4% 5.4%, 95.1% 11.5%, 98.7% 19%, 100% 27.4%, 98.7% 36%, 95.1% 44.5%, 89.4% 52.6%,
                82.5% 60.2%, 75% 67.5%, 67.7% 74.4%, 61.3% 81%, 56.2% 87.1%, 52.8% 92.3%, 50.9% 96.4%, 50.1% 99.1%,
                50% 100%, 49.9% 99.1%, 49.1% 96.4%, 47.2% 92.3%, 43.8% 87.1%, 38.7% 81%, 32.3% 74.4%, 25% 67.5%,
                17.5% 60.2%, 10.6% 52.6%, 4.9% 44.5%, 1.3% 36%, 0% 27.4%, 1.3% 19%, 4.9% 11.5%, 10.6% 5.4%,
                17.5% 1.5%, 25% 0%, 32.3% 1.1%, 38.7% 4.4%, 43.7% 9.2%, 47.2% 14.6%, 49.1% 19.4%, 49.9% 22.7%,
                50% 23.9%, 50% 28.3%, 49.9% 27.3%, 49.3% 24.5%, 47.6% 20.5%, 44.7% 16%, 40.5% 12%, 35% 9.2%,
                28.9% 8.3%, 22.5% 9.5%, 16.6% 12.8%, 11.9% 17.9%, 8.8% 24.2%, 7.7% 31.2%, 8.8% 38.4%, 11.9% 45.4%,
                16.6% 52.2%, 22.5% 58.5%, 28.9% 64.6%, 35% 70.4%, 40.5% 75.8%, 44.7% 80.9%, 47.6% 85.3%, 49.3% 88.7%,
                49.9% 90.9%, 50% 91.7%, 50.1% 90.9%, 50.7% 88.7%, 52.4% 85.3%, 55.3% 80.9%, 59.5% 75.8%, 65% 70.4%,
                71.1% 64.6%, 77.5% 58.5%, 83.4% 52.2%, 88.1% 45.4%, 91.2% 38.4%, 92.3% 31.2%, 91.2% 24.2%, 88.1% 17.9%,
                83.4% 12.8%, 77.5% 9.5%, 71.1% 8.3%, 65% 9.2%, 59.5% 12%, 55.3% 16%, 52.4% 20.5%, 50.7% 24.5%,
                50.1% 27.3%, 50% 28.3%
            );
        }

        &::after {
            inset: 8.333% 7.692%;
            background-color: var(--color-quote-background);
            clip-path: polygon(
                50% 23.9%, 50.1% 22.7%, 50.9% 19.4%, 52.8% 14.6%, 56.2% 9.2%, 61.3% 4.4%, 67.7% 1.1%, 75% 0%,
                82.5% 1.5%, 89.4% 5.4%, 95.1% 11.5%, 98.7% 19%, 100% 27.4%, 98.7% 36%, 95.1% 44.5%, 89.4% 52.6%,
                82.5% 60.2%, 75% 67.5%, 67.7% 74.4%, 61.3% 81%, 56.2% 87.1%, 52.8% 92.3%, 50.9% 96.4%, 50.1% 99.1%,
                50% 100%, 49.9% 99.1%, 49.1% 96.4%, 47.2% 92.3%, 43.8% 87.1%, 38.7% 81%, 32.3% 74.4%, 25% 67.5%,
                17.5% 60.2%, 10.6% 52.6%, 4.9% 44.5%, 1.3% 36%, 0% 27.4%, 1.3% 19%, 4.9% 11.5%, 10.6% 5.4%,
                17.5% 1.5%, 25% 0%, 32.3% 1.1%, 38.7% 4.4%, 43.7% 9.2%, 47.2% 14.6%, 49.1% 19.4%, 49.9% 22.7%
            );
        }

        .photographer-images,
        .photographer-quote {
            display: none;
        }

        .photographer-toggle {
            position: static;
        }
    }
}

.goal-description-content {
    justify-content: center;
    display: flex;
    text-align: center;
    padding-left: var(--space-large);
    padding-right: var(--space-large);
    background-color: transparent;

    @container quiz (max-width: 600px) {
        --goal-heading-arrow-space: 2.75rem;
        padding-inline: var(--space-small);
    }

    .goal-description-text {
        @media (max-width: 1675px) {
            padding-left: var(--space-small);
            padding-right: var(--space-small);
            font-size: 90%;
        }

        @media (max-width: 1078px) {
            padding-left: var(--space-small);
            font-size: 80%;
        }

        @media (max-width: 588px) {
            font-size: 70%;
        }

        @container quiz (max-width: 600px) {
            padding-inline: 0;
        }

        .goal-description-heading {
            justify-content: center;
            font-size: var(--goal-heading-size);
            color: var(--goal-text-color, var(--color-goal-1-text));
            font-family: var(--font-family-primary);
            text-align: center;
            padding-top: var(--space-medium);
            padding-inline: var(--goal-heading-arrow-space);
            scroll-margin-block-start: var(--space-small);
        }

        .goal-description-paragraph {
            scroll-margin-block-end: var(--space-large);
            font-size: var(--font-size-body-text);
            color: var(--color-text);
            font-family: var(--font-family-secondary);
            text-align: center;
            padding: var(--space-extra-small);

            @container quiz (max-width: 600px) {
                padding-inline: 0;
            }
        }
    }
}

.part-goal-board {
    justify-content: center;
    display: flex;
    text-align: center;
    padding-left: var(--space-large);
    padding-right: var(--space-large);
    background-color: transparent;
}

.part-goal-options {
    --part-goal-option-size: clamp(2.75rem, 7cqi, 4.5rem);
    --part-goal-gap: 0.75rem;
    --part-goal-border-width: var(--answer-button-border-width);
    display: grid;
    grid-template-columns: repeat(var(--part-goal-tracks, 2), calc((var(--part-goal-option-size) + var(--part-goal-gap)) / 2));
    justify-content: center;
    row-gap: var(--part-goal-gap);
    padding-block: var(--space-extra-small);
    box-sizing: unset;

    @container quiz (max-width: 600px) {
        --part-goal-gap: 0.5rem;
    }

    &.is-locked .part-goal-option-image,
    &.is-revealed .part-goal-option-image {
        pointer-events: none;
    }

    &.is-revealed .part-goal-option {
        outline: var(--part-goal-border-width) ridge var(--goal-color);
    }

    &.is-revealed .part-goal-option.is-false {
        outline: var(--part-goal-border-width) dashed var(--goal-color);
    }
}

.part-goal-option {
    grid-column: span 2;
    justify-self: center;
    width: var(--part-goal-option-size);
    height: var(--part-goal-option-size);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    outline: none;
    box-sizing: unset;
    transition: opacity var(--duration-fast) ease;

    &.is-row-start-shifted {
        grid-column: 2 / span 2;
    }

    &:focus-visible {
        box-shadow:
            0 0 0 calc(var(--part-goal-border-width) + 2px) var(--color-background),
            0 0 0 calc(var(--part-goal-border-width) + 5px) var(--color-text);
    }

    .part-goal-options:has(.is-shown) &:not(.is-shown) {
        opacity: var(--opacity-spotlight);
    }

    &.is-rejected {
        outline: var(--part-goal-border-width) ridge var(--goal-color);
    }
}

.part-goal-option-image {
    display: block;
    width: var(--part-goal-option-size);
    cursor: pointer;
}

.part-goal-columns-1 {
    --part-goal-tracks: 2;
}

.part-goal-columns-2 {
    --part-goal-tracks: 4;
}

.part-goal-columns-3 {
    --part-goal-tracks: 6;
}

.part-goal-columns-4 {
    --part-goal-tracks: 8;
}

.part-goal-columns-5 {
    --part-goal-tracks: 10;
}

.part-goal-columns-6 {
    --part-goal-tracks: 12;
}

.part-goal-columns-7 {
    --part-goal-tracks: 14;
}

.part-goal-columns-8 {
    --part-goal-tracks: 16;
}

.part-goal-columns-9 {
    --part-goal-tracks: 18;
}

.part-goal-columns-10 {
    --part-goal-tracks: 20;
}

.part-goal-columns-11 {
    --part-goal-tracks: 22;
}

.part-goal-columns-12 {
    --part-goal-tracks: 24;
}

.part-goal-columns-13 {
    --part-goal-tracks: 26;
}

.part-goal-columns-14 {
    --part-goal-tracks: 28;
}

.part-goal-columns-15 {
    --part-goal-tracks: 30;
}

.part-goal-columns-16 {
    --part-goal-tracks: 32;
}

.part-goal-columns-17 {
    --part-goal-tracks: 34;
}

.part-goal-columns-18 {
    --part-goal-tracks: 36;
}

.part-goal-columns-19 {
    --part-goal-tracks: 38;
}

.part-goal-columns-20 {
    --part-goal-tracks: 40;
}

.part-goal-description {
    display: grid;
}

.part-goal-description-content {
    grid-area: 1 / 1;
    visibility: hidden;

    &.is-shown {
        visibility: visible;
    }
}

.part-goal-choose-button {
    display: block;
    margin: var(--space-extra-small) auto var(--space-small);

    @media (hover: hover) {
        display: none;
    }

    .part-goal-description-content.is-chosen &,
    .part-goal-description.is-revealed &,
    .part-goal-description.is-locked & {
        visibility: hidden;
    }
}

.part-goal-heading {
    justify-content: center;
    font-size: var(--goal-heading-size);
    color: var(--goal-text-color);
    font-family: var(--font-family-primary);
    text-align: center;
    padding-top: var(--space-extra-small);
    padding-inline: var(--space-extra-small);
}

.part-goal-number {
    min-block-size: 1lh;
    justify-content: center;
    font-size: var(--font-size-part-goal-number);
    font-weight: bold;
    color: var(--color-text);
    font-family: var(--font-family-primary);
    text-align: center;
    padding-top: var(--space-extra-small);
    padding-inline: var(--space-extra-small);
}

.part-goal-text {
    font-size: var(--font-size-body-text);
    color: var(--color-text);
    font-family: var(--font-family-secondary);
    text-align: center;
    padding: var(--space-extra-small);
}

.project-background {
    margin-top: var(--space-small);
    padding: var(--space-large) var(--space-extra-large) var(--space-extra-large);
    background-color: var(--color-panel);
    color: var(--color-text-on-panel);

    @container page (max-width: 600px) {
        padding-inline: var(--space-small);
    }

    & > * + * {
        margin-block-start: var(--space-extra-large);
    }

    & > .photographers {
        margin-block-start: var(--space-large);
    }

    & a:hover {
        opacity: var(--opacity-hover);
        cursor: pointer;
    }
}

.project-background-heading {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;

    &:focus {
        outline: none;
    }
}

.quiz-page-heading {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.photographers {
    text-align: center;
}

.photographers-heading {
    font-family: var(--font-family-primary);
    margin-block-end: var(--space-small);
}

.photographers-progress,
.indicators-progress {
    max-inline-size: 40rem;
    margin: 0 auto var(--space-large);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-small);

    & p + p {
        margin-block-start: var(--space-extra-small);
    }

    & strong {
        font-family: var(--font-family-primary-light);
        font-weight: normal;
    }
}

.photographers-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-large) var(--space-medium);
}

.photographers-card {
    --photographers-per-row: 4;
    flex: 0 0 calc((100% - (var(--photographers-per-row) - 1) * var(--space-medium)) / var(--photographers-per-row));
    min-width: 0;
    font-family: var(--font-family-secondary);

    @container page (max-width: 800px) {
        --photographers-per-row: 3;
    }

    @container page (max-width: 600px) {
        --photographers-per-row: 2;
    }
}

.photographers-card-images {
    display: flex;
    justify-content: center;
    gap: var(--space-extra-small);
    margin-block-end: var(--space-small);
}

.photographers-card-portrait,
.photographers-card-goal-icon {
    display: block;
    flex: 0 1 5rem;
    min-width: 0;
    aspect-ratio: 1;
    object-fit: contain;
}

.photographers-card-name {
    font-family: var(--font-family-primary-light);
}

.photographers-card-text {
    margin-block: var(--space-extra-small);
}

.photographers-card-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-small);
    list-style: none;
}

.photographers-card-link {
    font-family: var(--font-family-primary-light);
    color: var(--color-link);
    text-decoration: none;
}

.indicators {
    --indicators-icon-size: 4.3rem;
    text-align: center;
}

.indicators-heading {
    font-family: var(--font-family-primary);
    margin-block-end: var(--space-small);
}

.indicators-icons {
    --indicators-per-row: 9;
    container: indicators-icons / inline-size;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-extra-small);
    max-inline-size: calc(9 * var(--indicators-icon-size) + 8 * var(--space-extra-small));
    margin: 0 auto var(--space-large);
}

.indicators-icon-button {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    outline-offset: 3px;

    &:disabled {
        cursor: default;
        opacity: 0.55;
    }

    &:not(:disabled):hover {
        outline: 3px solid var(--color-divider-on-panel);
    }

    &[aria-pressed="true"],
    &:focus-visible {
        outline: 3px solid var(--color-text-on-panel);
    }
}

.indicators-icon {
    --size: min(
        var(--indicators-icon-size),
        (100cqi - (var(--indicators-per-row) - 1) * var(--space-extra-small)) / var(--indicators-per-row)
    );
    display: block;
    inline-size: var(--size);
    block-size: var(--size);

    @container indicators-icons (max-width: 480px) {
        --indicators-per-row: 6;
    }
}

.indicators-panel {
    padding-block-start: var(--space-large);
    border-block-start: 1px solid var(--color-divider-on-panel);
    font-family: var(--font-family-secondary);
    text-align: start;

    &:empty {
        display: none;
    }
}

.indicators-goal-heading {
    font-family: var(--font-family-primary-light);
    margin-block-end: var(--space-extra-small);
}

.indicators-goal-headline {
    margin-block-end: var(--space-extra-small);
    font-family: var(--font-family-primary-light);
    font-size: 1.1rem;
}

.indicators-goal-description,
.indicators-goal-text {
    margin-block-end: var(--space-small);
}

.indicators-references {
    list-style: none;
    margin-block: var(--space-extra-small) var(--space-small);
    font-size: 0.9rem;

    & li + li {
        margin-block-start: var(--space-extra-small);
    }
}

.indicators-reference-title {
    display: block;
}

.indicators-reference-link {
    font-family: var(--font-family-primary-light);
    color: var(--color-link);
    text-decoration: none;
}

.indicators-part-goal {
    --indicators-number-width: 2.5rem;
    padding-block: var(--space-small);
    border-block-start: 1px solid var(--color-divider-on-panel-light);
}

.indicators-part-goal-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-extra-small) var(--space-small);
}

.indicators-part-goal-heading {
    display: flex;
    align-items: baseline;
    gap: var(--space-small);
    font-family: var(--font-family-primary-light);
    font-weight: normal;
    font-size: 1rem;
}

.indicators-part-goal-number {
    flex: none;
    min-inline-size: var(--indicators-number-width);
    font-size: 1.1rem;
}

.indicators-part-goal-headline {
    font-size: 0.95rem;
}

.indicators-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-family-primary-light);
    font-size: 0.85rem;
    white-space: nowrap;

    &.status-on-track {
        --status-color: var(--color-status-on-track);
    }

    &.status-moderate {
        --status-color: var(--color-status-moderate);
    }

    &.status-marginal {
        --status-color: var(--color-status-marginal);
    }

    &.status-stagnation {
        --status-color: var(--color-status-stagnation);
    }

    &.status-regression {
        --status-color: var(--color-status-regression);
    }

    &.status-no-data {
        --status-color: var(--color-status-no-data);
    }
}

.indicators-status-dot {
    inline-size: 0.65rem;
    block-size: 0.65rem;
    border-radius: 50%;
    background-color: var(--status-color);
}

.indicators-part-goal-body {
    margin-inline-start: calc(var(--indicators-number-width) + var(--space-small));
    font-size: 0.95rem;

    @container page (max-width: 600px) {
        margin-inline-start: 0;
    }
}

.indicators-part-goal-text,
.indicators-own-text {
    margin-block-start: var(--space-extra-small);
}

.indicators-group-heading {
    margin-block: var(--space-small) var(--space-extra-small);
    font-family: var(--font-family-primary-light);
    font-weight: normal;
    font-size: 0.95rem;
}

.indicators-note {
    font-size: 0.9rem;
}

.indicators-list {
    list-style: none;
    font-size: 0.9rem;

    & li + li {
        margin-block-start: 0.3rem;
    }
}

.indicators-indicator-number {
    margin-inline-end: 0.4rem;
    font-family: var(--font-family-primary-light);
}

.indicators-indicator-details {
    & summary {
        list-style: none;
        cursor: pointer;
        min-block-size: 24px;
        align-content: center;

        &::-webkit-details-marker {
            display: none;
        }

        &::before {
            content: "";
            display: inline-block;
            inline-size: 0.8em;
            block-size: 0.8em;
            margin-inline-end: 0.5em;
            background: url("../images/plus.png") center / contain no-repeat;
            vertical-align: -0.05em;
        }
    }

    &[open] summary {
        margin-block-end: 0.3rem;

        &::before {
            background-image: url("../images/minus.png");
        }
    }
}

.indicators-indicator-text {
    padding-inline-start: 1rem;
}

.indicators-indicator-details .indicators-references {
    padding-inline-start: 1rem;
}

.background-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-areas: "logos text";
    gap: var(--space-large);
    padding-block-start: var(--space-extra-large);
    border-block-start: 1px solid var(--color-divider-on-panel);

    &:has(.background-section-aside) {
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "logos text"
            "aside text";
    }

    &:has(.sdg-guidelines-heading) {
        grid-template-areas:
            "logos text"
            "guidelines guidelines";
    }

    @container page (max-width: 600px) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "logos"
            "text";

        &:has(.background-section-aside) {
            grid-template-rows: none;
            grid-template-areas:
                "logos"
                "text"
                "aside";
        }

        &:has(.sdg-guidelines-heading) {
            grid-template-areas:
                "logos"
                "text"
                "guidelines";
        }
    }
}

.background-section-logos {
    grid-area: logos;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-large);

    & a {
        max-width: 100%;
    }

    & img {
        display: block;
        max-width: 100%;
    }
}

.background-section-logos-spread {
    justify-content: space-between;
}

.media-college-logo {
    width: 12rem;
}

.unesco-logo {
    width: 17rem;
}

.partner-logo-image {
    width: 14rem;
}

.background-section-link {
    font-family: var(--font-family-primary-light);
    color: var(--color-link);
    text-decoration: none;
    min-block-size: 24px;
    align-content: center;
}

.background-section-text {
    grid-area: text;
    font-family: var(--font-family-secondary);

    & p + p {
        margin-block-start: 1lh;
    }
}

.background-section.background-section-centered {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text";
    justify-items: center;
    text-align: center;

    .background-section-text {
        max-inline-size: 40rem;
    }
}

.background-section-aside {
    grid-area: aside;
    font-family: var(--font-family-secondary);
    font-size: 0.85rem;

    & p + p {
        margin-block-start: 1lh;
    }
}

.background-section:has(.background-section-aside) {
    .background-section-text,
    .background-section-aside {
        display: flex;
        flex-direction: column;

        & p {
            flex-grow: 1;
        }

        & p:last-child {
            flex-grow: 0;
        }
    }
}

.background-section-heading {
    font-family: var(--font-family-primary);
    margin-block-end: var(--space-small);
}

.background-section-subheading {
    font-family: var(--font-family-primary-light);
    margin-block-end: var(--space-small);
}

.sdg-guidelines-link {
    text-decoration: none;
    color: var(--color-goal-6);
    font-family: var(--font-family-primary);
}

.sdg-guidelines-heading {
    grid-area: guidelines;
    text-align: center;
}

.social-media {
    padding-block-start: var(--space-extra-large);
    border-block-start: 1px solid var(--color-divider-on-panel);
    text-align: center;
}

.social-media-heading {
    margin-block-end: var(--space-small);
    font-family: var(--font-family-primary-light);
    font-size: var(--font-size-body-text);
}

.social-media-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-small);

    & a:nth-child(1) {
        --social-color-1: var(--color-goal-1);
        --social-color-2: var(--color-goal-14);
        --social-color-3: var(--color-goal-8);
        --social-color-4: var(--color-goal-13);
    }

    & a:nth-child(2) {
        --social-color-1: var(--color-goal-10);
        --social-color-2: var(--color-goal-17);
        --social-color-3: var(--color-goal-5);
        --social-color-4: var(--color-goal-3);
    }

    & a:nth-child(3) {
        --social-color-1: var(--color-goal-4);
        --social-color-2: var(--color-goal-16);
        --social-color-3: var(--color-goal-13);
        --social-color-4: var(--color-goal-10);
    }

    & a:nth-child(4) {
        --social-color-1: var(--color-goal-14);
        --social-color-2: var(--color-goal-5);
        --social-color-3: var(--color-goal-1);
        --social-color-4: var(--color-goal-17);
    }
}

.social-media-icon {
    display: block;
    width: clamp(2rem, 6cqi, 3.5rem);
    aspect-ratio: 1;
    object-fit: contain;
    padding: var(--answer-padding-block);
    border: var(--answer-button-border-width) solid;
    border-radius: 50%;
    border-color: var(--social-color-1) var(--social-color-2) var(--social-color-3) var(--social-color-4);

    &.border-turn-1 {
        border-color: var(--social-color-4) var(--social-color-1) var(--social-color-2) var(--social-color-3);
    }

    &.border-turn-2 {
        border-color: var(--social-color-3) var(--social-color-4) var(--social-color-1) var(--social-color-2);
    }

    &.border-turn-3 {
        border-color: var(--social-color-2) var(--social-color-3) var(--social-color-4) var(--social-color-1);
    }
}

.background-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    box-sizing: border-box;
    inline-size: var(--page-width);
    block-size: var(--background-bar-total-height);
    margin-inline: auto;
    padding-block: var(--answer-button-border-width) env(safe-area-inset-bottom);
    background-color: var(--color-background);

    &::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-end: 100%;
        block-size: 1.5rem;
        background-image: linear-gradient(transparent, var(--color-background));
        pointer-events: none;
    }
}

.background-bar-stripe {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    display: flex;
    block-size: var(--answer-button-border-width);
}

.background-bar-stripe-color {
    flex: 1 1 0;
    background-color: var(--goal-color);
}

.background-bar-link {
    font-family: var(--font-family-primary-light);
    font-size: var(--font-size-body-text);
    color: var(--color-text);

    &:hover {
        color: var(--color-text-hover);
    }

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

.background-bar-copyright {
    font-family: var(--font-family-secondary);
    font-size: max(12px, 0.75rem);
    color: var(--color-text);
}

.quiz-heading {
    font-family: var(--font-family-primary);
    font-size: min(4.2rem, 4.5cqi);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.quiz-finish-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 0.3em;
    font-size: inherit;
    font-weight: normal;
}

.quiz-finish-word {
    display: inline-flex;
}

.quiz-heading-letter {
    display: inline-block;
    transition: all 1s ease;

    &.is-colored {
        transform: translateY(10px);
        color: var(--goal-text-color);
    }

    @media (prefers-reduced-motion: reduce) {
        transition: none;
    }
}