:root {
    color-scheme: light;
    --ink: 28 48 70;
    --muted: 86 111 138;
    --surface: 255 255 255;
    --container: 255 249 245;
    --canvas: 244 249 253;
    --primary: 54 105 158;
    --primary-dark: 37 77 119;
    --secondary: 188 216 247;
    --secondary-light: 231 239 250;
    --logo-highlight: 102 177 210;
    --border: 205 222 236;
    --danger: 173 70 78;
    --correct: 42 132 113;
    --incorrect: 188 111 47;
    --background: 220 238 248;

    --shadow: 0 5px 12px rgb(var(--primary) / 25%);
    --shadow-light: 0 18px 45px rgb(var(--primary) / 12%);


    --mdWidth: min(100% - 2rem, 56rem);
    --mdMinWidth: 320px;
    --mdSpace: 0.8rem;
    --smSpace: calc(var(--mdSpace) / 2);
    --lgSpace: calc(var(--mdSpace) * 1.5);
    --xlSpace: clamp(var(--lgSpace), 6vw, calc(var(--lgSpace) * 2));

    --mdFontSize: 1rem;
    --smFontSize: 0.75rem;
    --lgFontSize: 1.1rem;
    --xlFontSize: clamp(2.15rem, 6vw, 3.75rem);

    --mdLineHeight: 1.55;

    --mdBorderRadius: 0.5rem;
    --smBorderRadius: calc(var(--mdBorderRadius) / 2);
    --lgBorderRadius: 1.5rem;

    --closeButtonSize: 2.5rem;

    --defTransition: all .4s ease;

    --btnFullWidth: 100%;

    /* --dogblue: rgb(231, 239, 250);
    --dogred: rgb(194, 66, 70);
    --dogyellow: rgb(215, 156, 64);
    --doggreen: rgb(94, 107, 70);
    --show_ink: rgb(28 48 70);
    --show_muted: rgb(86 111 138);
    --show_surface: rgb(255 255 255);
    --show_container: rgb(255 249 245);
    --show_canvas: rgb(244 249 253);
    --show_primary: rgb(54 105 158);
    --show_primary-dark: rgb(37 77 119);
    --show_secondary: rgb(188 216 247);
    --show_secondary-light: rgb(231 239 250);
    --show_logo-highlight: rgb(102 177 210);
    --show_border: rgb(205 222 236);
    --show_danger: rgb(173 70 78);
    --show_correct: rgb(42 132 113);
    --show_incorrect: rgb(188 111 47);
    --show_background: rgb(220 238 248); */

    font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

*:focus-visible {
    outline: 3px dotted rgb(var(--primary) / 35%);
    outline-offset: 3px;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    border: 0;
    margin: 0;
    color: inherit;
    background: none;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}

body {
    min-width: var(--mdMinWidth);
    min-height: 100vh;
    margin: 0;
    color: rgb(var(--ink));
    background:
        radial-gradient(circle at 0 0, rgb(var(--background)) 0, transparent 32rem),
        rgb(var(--canvas));
}

.layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: var(--xlSpace);
    min-height: 100vh;
}

.layout main {
    flex-grow: 2;
}

.incorrect,
.correct {
    display: inline-block;
    padding: 1px var(--smSpace);
    border-top-left-radius: var(--smBorderRadius);
    border-top-right-radius: var(--smBorderRadius);
}

.incorrect {
    color: rgb(var(--incorrect));
    border-bottom: 1px dotted rgb(var(--incorrect));
    transition: var(--defTransition);
    background: rgb(var(--incorrect) / 10%);
}

.correct {
    color: rgb(var(--correct));
    border-bottom: 1px dotted rgb(var(--correct));
    transition: var(--defTransition);
    background: rgb(var(--correct) / 10%);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.nav-link,
.button {
    align-self: flex-start;
    min-height: 2.9rem;
    padding: var(--mdSpace) var(--lgSpace);
    border: 0;
    border-radius: var(--mdBorderRadius);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    transition: var(--defTransition);
}

.button {
    color: rgb(var(--surface));
    background: rgb(var(--primary));
    box-shadow: var(--shadow);
}

.button--large {
    min-height: 3.5rem;
    padding-inline: 1.5rem;
    font-size: var(--lgFontSize);
}


.button:hover,
.button:focus-visible {
    background: rgb(var(--primary-dark));
    transition: var(--defTransition);
}

.button--secondary {
    color: rgb(var(--primary));
    background: rgb(var(--secondary-light));
    box-shadow: none;
}

.button--secondary:hover,
.button--secondary:focus-visible {
    background: rgb(var(--secondary));
    transition: var(--defTransition);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mdSpace);
}

.nav-link {
    color: rgb(var(--muted));
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.nav-link:hover {
    box-shadow: var(--shadow-light);
}

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

.site-header,
.page-shell,
.site-footer {
    width: var(--mdWidth);
    margin-inline: auto;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.75rem;
    padding: var(--mdSpace) 0;
}

.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: var(--mdSpace);
    color: rgb(var(--primary));
    text-decoration: none;
}

.brand svg {
    display: block;
    height: 100px;
    width: auto;
}

.brand span {
    display: block;
    text-transform: uppercase;
    font-size: 26px;
    letter-spacing: 3px;
    line-height: .8;
}


nav {
    display: flex;
    gap: var(--mdSpace);
}


.eyebrow {
    margin: 0 0 var(--mdSpace);
    color: rgb(var(--primary));
    font-size: var(--smFontSize);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: var(--mdSpace);
    font-size: var(--xlFontSize);
    line-height: 1.05;
    letter-spacing: -0.055em;
}

.doggy {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mdSpace);
    position: relative;
    align-items: center;
}

.doggy-content {
    width: calc(66% - (var(--mdSpace) * 2))
}

.doggy-image {
    width: calc(33% - (var(--mdSpace) * 2))
}

.doggy-image img {
    width: 100%;
    height: auto;
}

.round-dialog__content .doggy-content,
.active-round-message .doggy-content {
    width: calc(100% - 120px - (var(--mdSpace) * 4))
}

.round-dialog__content .doggy-image,
.active-round-message .doggy-image {
    width: 120px;
}

.round-dialog__content .doggy-image img,
.active-round-message .doggy-image img {
    width: 100%;
    height: auto;
}


.doggy-right .doggy-content {
    order: 1;
}

.doggy-right .doggy-image {
    order: 2;
}

.doggy-left .doggy-content {
    order: 2;
}

.doggy-left .doggy-image {
    order: 1;
}

.start-intro {
    display: flex;
    flex-direction: column;
    gap: var(--mdSpace);
    min-height: 16rem;
    position: relative;
}

.start-intro p {
    margin: 0;
    color: rgb(var(--muted));
    font-size: var(--lgFontSize);
    line-height: var(--mdLineHeight);
}

.round-dialog {
    width: calc(var(--mdWidth) - 2 * var(--mdSpace));
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
}

.round-dialog::backdrop {
    background: rgb(31 42 68 / 55%);
    backdrop-filter: blur(0.2rem);
}

.round-dialog__content {
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    /* display: flex;
    flex-direction: column;
    gap: var(--mdSpace); */
}

.round-dialog__content .round-form {
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: var(--mdSpace);
}

.form-field.l-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: var(--mdSpace);
}

@media (min-width: 36.01rem) {
    .form-field.l-list {
        max-height: 400px;
    }
}

.form-field legend {
    padding-bottom: var(--mdSpace);
}

.dialog-close-button {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 3px;
    height: var(--closeButtonSize);
    color: rgb(var(--ink) / 90%);
    font-size: var(--closeButtonSize);
    line-height: 0;
    transform: translateY(-0.04em);
}

.dialog-close-button:hover,
.dialog-close-button:focus-visible {
    color: rgb(var(--ink));
    font-weight: 600;
}

.panel {
    position: relative;
    padding: var(--mdSpace);
    border: 1px solid rgb(255 255 255 / 80%);
    border-radius: var(--lgBorderRadius);
    background: rgb(var(--surface));
    box-shadow: var(--shadow-light);
}

.panel-heading {
    position: relative;
    padding-bottom: var(--mdSpace);
}

.panel-heading p {
    margin: 0;
    color: rgb(var(--muted));
    font-size: var(--lgFontSize);
    line-height: var(--mdLineHeight);
}

h2 {
    margin-bottom: var(--mdSpace);
    font-size: var(--lgFontSize);
}

.muted {
    color: rgb(var(--muted));
}

.lesson-list {
    display: flex;
    flex-direction: column;
    gap: var(--mdSpace);
}

.round-form {
    display: flex;
    flex-direction: column;
    gap: var(--mdSpace);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--mdSpace);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    color: rgb(var(--ink));
    font-weight: 800;
}

select {
    width: 100%;
    min-height: 2.85rem;
    padding: var(--mdSpace) var(--lgSpace);
    border: 1px solid rgb(var(--border));
    border-radius: var(--mdBorderRadius);
    color: rgb(var(--ink));
    background: rgb(var(--surface));
    font: inherit;
    font-weight: 600;
}

.option-group {
    gap: var(--mdSpace);
}

.option-group label {
    display: flex;
    align-items: center;
    gap: var(--mdSpace);
    font-weight: 600;
}

input[type="radio"] {
    width: var(--lgFontSize);
    height: var(--lgFontSize);
    accent-color: rgb(var(--primary));
}

.lesson-choice {
    display: flex;
    align-items: center;
    padding: var(--smSpace);
    gap: var(--smSpace);
    background: rgb(var(--canvas));
    cursor: pointer;
}

.lesson-choice__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--mdSpace);
}

@media (min-width: 36.01rem) {
    .lesson-choice {
        padding: var(--mdSpace);
        gap: var(--mdSpace);
        border: 1px solid rgb(var(--border));
        border-radius: var(--mdBorderRadius);
    }

    .lesson-choice:has(input:checked) {
        border-color: rgb(var(--primary));
        background: rgb(var(--background));
        box-shadow: var(--shadow);
    }

    .lesson-choice__content span {
        color: rgb(var(--muted));
        font-size: var(--mdFontSize);
        font-weight: 500;
        line-height: var(--mdLineHeight);
    }
}

.word-count {
    align-self: center;
    padding: var(--mdSpace) var(--lgSpace);
    border-radius: var(--lgBorderRadius);
    color: #695000;
    background: #fff4cc;
    font-size: var(--smFontSize);
    font-weight: 800;
    white-space: nowrap;
}

.active-round-message {
    margin-bottom: var(--mdSpace);
    padding: var(--mdSpace);
    border: 1px solid rgb(var(--border));
    border-radius: var(--lgBorderRadius);
    color: rgb(var(--primary));
    background: rgb(var(--container));
    line-height: var(--mdLineHeight);
}

.active-round-message p {
    margin-bottom: var(--mdSpace);
    font-size: var(--lgFontSize);
}


.learning-view,
.completion-view,
.results-view {
    width: 100%;
    margin-inline: auto;
}

.round-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--mdSpace);
    margin-bottom: var(--mdSpace);
    color: rgb(var(--muted));
    font-size: var(--smFontSize);
    font-weight: 700;
}

.prompt-card {
    padding: var(--xlSpace) var(--mdSpace);
    border: 2px solid #dfdbff;
    border-radius: var(--mdBorderRadius);
    color: rgb(var(--primary-dark));
    background: #f8f7ff;
    text-align: center;
}

.answer-form {
    display: flex;
    flex-direction: column;
    gap: var(--mdSpace);
}

.answer-form input {
    width: 100%;
    min-height: 3rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgb(var(--border));
    border-radius: var(--mdBorderRadius);
    color: rgb(var(--ink));
    font: inherit;
}

.feedback,
.pause-decision {
    margin-top: var(--mdSpace);
    padding: var(--mdSpace);
    border-radius: var(--mdBorderRadius);
    line-height: var(--mdLineHeight);
}

.feedback--correct {
    color: rgb(var(--correct));
    background: rgb(var(--correct) / 10%) url(../images/doggy/correct.png) center right var(--mdSpace) no-repeat;
    background-size: auto 90%;
    padding-right: 105px;
}

.feedback--incorrect {
    color: rgb(var(--incorrect));
    background: rgb(var(--incorrect) / 10%) url(../images/doggy/incorrect.png) center right var(--mdSpace) no-repeat;
    background-size: auto 90%;
    padding-right: 105px;
}

.pause-decision {
    color: rgb(var(--primary-dark));
    background: rgb(var(--canvas));
}

.feedback p,
.pause-decision p {
    margin-bottom: var(--mdSpace);
}

#next-button {
    margin-top: var(--mdSpace);
}

.result-image {
    margin-bottom: var(--mdSpace);
    width: 6.25rem;
    height: 6.25rem;
    object-fit: contain;
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: var(--mdSpace);
}

.result-card {
    display: flex;
    flex-direction: column;
    gap: var(--mdSpace);
    min-height: 5rem;
    padding: var(--mdSpace) calc(var(--mdSpace) * 6) var(--mdSpace) var(--mdSpace);
    border: 1px solid rgb(var(--border));
    border-radius: var(--mdBorderRadius);
    background: rgb(var(--canvas));
    background-position: right center;
    background-repeat: no-repeat;
    background-size: auto 70px;
}

.result-card--100 {
    background-color: rgb(var(--correct) / 10%);
    background-image: url("../images/doggy/result-100.png");
}

.result-card--80 {
    background-image: url("../images/doggy/result-80.png");
}

.result-card--60 {
    background-image: url("../images/doggy/result-60.png");
}

.result-card--0 {
    background-color: rgb(var(--incorrect) / 10%);
    background-image: url("../images/doggy/result-0.png");
}

.result-card__heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--mdSpace);
}

.result-card h2 {
    margin: 0;
    font-size: var(--mdFontSize);
}

.result-card p {
    margin: 0;
    color: rgb(var(--muted));
}

.result-card details {
    color: rgb(var(--muted));
}

.not-solved-list {
    margin: var(--mdSpace) 0 0;
    padding-left: var(--lgSpace);
}

.message {
    margin-bottom: var(--mdSpace);
    padding: var(--mdSpace);
    border-radius: var(--mdBorderRadius);
    color: rgb(var(--danger));
    background: rgb(var(--danger) / 10%);
    line-height: var(--mdLineHeight);
}

.site-footer {
    padding-block: var(--mdSpace) var(--lgSpace);
    color: rgb(var(--muted));
    font-size: var(--mdFontSize);
    text-align: center;
}

@media (max-width: 36rem) {

    .layout {
        gap: var(--mdSpace);
    }

    .button {
        width: var(--btnFullWidth);
    }

    .r-hide {
        display: none !important;
    }

    .brand,
    .brand svg {
        height: 4.25rem;
    }

    .nav-link {
        padding-inline: 0.45rem;
        font-size: var(--mdFontSize);
    }

    .result-card {
        padding-right: var(--xlSpace);
    }

    .round-dialog {
        width: 100%;
        max-width: none;
        max-height: none;
        height: 100dvh;
    }

    .round-dialog__content {
        min-height: 100dvh;
        max-height: none;
        border-radius: 0;
    }

    .start-intro {
        min-height: 0;
        padding-left: 0;
    }

    .doggy-left .doggy-content,
    .doggy-right .doggy-content {
        width: 100%;
        order: 2;
        text-align: center;
    }

    .doggy-left .doggy-image,
    .doggy-right .doggy-image {
        order: 1;
        width: 100%;
        text-align: center;
    }

    .doggy-image img {
        width: 60%
    }
    .round-dialog__content .doggy-content,
    .active-round-message .doggy-content {
        width: auto;
        text-align: left;
    }
    .round-dialog__content .doggy-image,
    .active-round-message .doggy-image {
        width: 80px;
    }
}