@import "_imports/reset-classic.css" layer(blueprint);
@import "_imports/variables.css" layer(blueprint);
@import "_imports/utilities.css" layer(blueprint);
@import "_imports/fonts.css" layer(blueprint);

@layer blueprint {

    /* Fonts */
    :where(:root) {
        --font-primary: "Work Sans", ui-sans-serif, system-ui, sans-serif;
        --font-secondary: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
        --font-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
    }



    /* Base */
    *,
    *:before,
    *:after {
        box-sizing: border-box;
    }

    html {
        font-size: var(--font-size-base);
        scroll-behavior: smooth;
        scrollbar-gutter: stable;
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

    body {
        font-family: var(--font-primary);
        line-height: var(--line-height-m);
        margin: 0;
        min-height: 100vh;
        overflow-x: clip;
    }

    :where(p, ol, ul, dl, dd, form, fieldset, audio, video, iframe, blockquote, details, table, pre, figure, address) {
        margin: 0;
        margin-block-end: var(--space);
    }

    :where(p, ol, ul, dl, dd, form, fieldset, audio, video, iframe, blockquote, details, table, pre, figure, address):last-child {
        margin-block-end: 0;
    }

    :where(h1, h2, h3, h4, h5, h6) {
        margin-block: 0 var(--size-m);
    }

    /*
:where(h1) {
    margin-block-start: var(--size-4xs);
}
:where(h2) {
    margin-block-start: var(--size-5xl);
}
*/
    :is(button, [href], input, select, textarea, summary, [tabindex]):focus-visible {
        outline-color: lightskyblue;
        outline-style: solid;
        outline-width: 0.0625rem;
        /* 1px */
        outline-offset: 0.0625rem;
        /* 1px */
    }

    [hidden],
    [hide-until-ready]:not([is-ready]),
    :not([is-ready]):has(> [show-until-ready]) > :not([show-until-ready]),
    [is-ready] [show-until-ready] {
        display: none;
    }

    @media (prefers-reduced-motion: reduce) {

        *,
        :after,
        :before {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }



    /* Containers */
    [class*=container] {
        --width: var(--breakpoint-m);
        margin-inline: auto;
        max-width: var(--width);
        width: var(--width-base);
    }

    .container-xs {
        --width: var(--breakpoint-xs);
    }

    .container-s {
        --width: var(--breakpoint-s);
    }

    .container-l {
        --width: var(--breakpoint-l);
    }

    .container-xl {
        --width: var(--breakpoint-xl);
    }

    .container-2xl {
        --width: var(--breakpoint-2xl);
    }

    .container-fluid {
        --width: 100%;
    }

    .section {
        &[class*="breakout"] {
            --width: 100vw;
            margin-inline-start: calc(50% - 50vw);
            min-width: var(--width);
            max-width: var(--width);
            width: var(--width);
            padding-block: var(--size-m);
            margin-block-start: var(--size-s);
            margin-block-end: var(--size-xl);
        }

        &.bg-primary {
            background-color: rgba(80, 160, 0, 0.66);
        }

        &.bg-secondary {
            background-color: rgba(120, 120, 100, 0.66);
        }
    }



    /* Grid */
    .grid.row {
        --grid-gutter-x: 1.5rem;
        --grid-gutter-y: 1.5rem;
        display: flex;
        flex-wrap: wrap;
        margin-top: calc(-1 * var(--grid-gutter-y));
        margin-right: calc(-0.5 * var(--grid-gutter-x));
        margin-left: calc(-0.5 * var(--grid-gutter-x));
    }

    .grid > .col {
        flex: 0 0 auto;
        width: calc(100% - var(--grid-gutter-x));
        max-width: 100%;
        margin-top: var(--grid-gutter-y);
        margin-right: calc(var(--grid-gutter-x) * 0.5);
        margin-left: calc(var(--grid-gutter-x) * 0.5);

        @media (min-width: 768px) {
            width: calc(100%);
        }

        /*
        background-color: #fafafa;
        border: 1px solid #eeeeee;
        */
    }

    /*
.grid[class*="fractions"] > .col {}
*/

    /* BEN: Note that CSS variables don't work in media queries (yet?) */
    @media (min-width: 768px) {

        .grid.fractions-12-12 > .col,
        .grid.fractions-12-14-14 > .col:nth-child(1),
        .grid.fractions-14-12-14 > .col:nth-child(2),
        .grid.fractions-14-14-12 > .col:nth-child(3) {
            width: calc(50% - var(--grid-gutter-x));
        }

        .grid.fractions-23-13 > .col:nth-child(1),
        .grid.fractions-13-23 > .col:nth-child(2) {
            width: calc(66.666666667% - var(--grid-gutter-x));
        }

        .grid.fractions-23-13 > .col:nth-child(2),
        .grid.fractions-13-23 > .col:nth-child(1),
        .grid.fractions-13-13-13 > .col {
            width: calc(33.333333333% - var(--grid-gutter-x));
        }

        .grid.fractions-34-14 > .col:nth-child(1),
        .grid.fractions-14-34 > .col:nth-child(2) {
            width: calc(75% - var(--grid-gutter-x));
        }

        .grid.fractions-34-14 > .col:nth-child(2),
        .grid.fractions-14-34 > .col:nth-child(1),
        .grid.fractions-12-14-14 > .col:nth-child(2),
        .grid.fractions-12-14-14 > .col:nth-child(3),
        .grid.fractions-14-12-14 > .col:nth-child(1),
        .grid.fractions-14-12-14 > .col:nth-child(3),
        .grid.fractions-14-14-12 > .col:nth-child(1),
        .grid.fractions-14-14-12 > .col:nth-child(2),
        .grid.fractions-14-14-14-14 > .col {
            width: calc(25% - var(--grid-gutter-x));
        }
    }



    /* Stack, Split, Cluster, Sidecar (Inspired by Kelp, see https://kelpui.com/docs/layout/overview/) */
    .stack {
        --gap: var(--size-m);
        display: flex;
        flex-direction: column;
        gap: var(--gap);
    }

    .split {
        --gap: var(--size-m);
        display: flex;
        gap: var(--gap);
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .cluster {
        --gap: var(--size-m);
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);
    }

    [class*=sidecar] {
        --gap: var(--size-m);
        --main-size: initial;
        --secondary-size: initial;
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);
    }

    :is(.sidecar, .sidecar-start) > :first-child,
    .sidecar-end > :last-child {
        flex-basis: var(--secondary-size, auto);
        flex-grow: 1;
    }

    :is(.sidecar, .sidecar-start) > :last-child,
    .sidecar-end > :first-child {
        flex-basis: 0;
        flex-grow: 999;
        min-inline-size: var(--main-size, 50%);
    }

    .stack > *,
    .split > *,
    .cluster > *,
    [class*=sidecar] > * {
        margin: 0;
    }



    /* Lists */
    ul,
    ol {
        padding-inline: var(--size-5xl) 0;
    }

    dt {
        font-weight: bold;
    }

    .list-unstyled,
    .list-inline {
        list-style-type: "";
        padding-inline: 0;
    }

    .list-inline {
        --gap: var(--size-m);
        display: flex;
        column-gap: var(--gap);
        row-gap: calc(var(--gap) * 0.5);
        flex-wrap: wrap;
        align-items: center;
    }



    /* Headings */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--font-primary);
        line-height: var(--line-height-s);
        text-wrap: pretty;
        word-wrap: break-word;
    }

    h1, .h1 {
        font-size: var(--size-3xl);
        line-height: var(--line-height-xs);
    }

    @media (min-width: 768px) {

        h1, .h1 {
            font-size: var(--size-4xl);
        }
    }

    h2, .h2 {
        font-size: var(--size-2xl);
    }

    h3, .h3 {
        font-size: var(--size-l);
    }

    h4, h5, h6, .h4, .h5, .h6 {
        font-size: var(--size-m);
    }



    /* Blockquotes */
    blockquote {
        --padding-block: var(--size-4xs);
        --padding-inline: var(--size-m);
        border-inline-start: var(--size-5xs) solid gray;
        padding-block: var(--padding-block);
        padding-inline: var(--padding-inline);
    }

    blockquote pre {
        font-style: normal;
    }

    cite {
        color: darkslategray;
        display: block;
        font-size: var(--size-s);
        padding-block-start: var(--size-m);
    }



    /* Links */
    a {
        color: var(--theme-primary-medium);
        text-decoration: underline;
        -webkit-text-decoration: underline;
        word-wrap: break-word;
    }

    a:hover {
        color: var(--theme-primary-dark);
    }

    .link-subtle:not(:hover) {
        text-decoration: none;
    }


    /* Misc */
    hr {
        --border-color: var(--color-border-accent);
        border: 0;
        border-block-start: 1px solid var(--border-color);
        margin-block: var(--size-5xl);
        margin-inline: auto;
    }

    mark {
        background: yellow;
        color: black;
    }

    @media (forced-colors: active) {
        mark {
            background: revert;
            color: revert;
        }
    }

    del {
        color: lightcoral;
    }



    /* Forms */
    /*
    fieldset {
        border: 0;
        padding: 0;
    }

    legend,
    label {
        --gap: var(--size-5xs);
        margin: 0;
        margin-block-end: var(--gap);
        padding: 0;
    }

    legend {
        display: block;
    }

    label {
        --gap: var(--size-5xs);
        display: flex;
        align-items: center;
        column-gap: var(--gap);
        width: 100%;
    }

    label:has(:is(input, select, textarea):not([type=radio], [type=checkbox])) {
        display: block;
        margin-block-end: 0;
    }

    label:has(input, select, textarea) :is(input, select, textarea):not([type=radio], [type=checkbox]) {
        margin-block-start: var(--gap);
    }

    input,
    optgroup,
    select,
    textarea {
        color: darkslategray;
        font-family: inherit;
        font-size: inherit;
        margin: 0;
        padding-block: var(--size-5xs);
        padding-inline: var(--size-4xs);
    }

    ::placeholder {
        color: lightgray;
    }

    input,
    textarea,
    select {
        --border-radius: var(--border-radius-s);
        background-color: white;
        border: 1px solid gray;
        border-radius: var(--border-radius);
        color: gray;
        line-height: var(--line-height-m);
        width: 100%;
    }

    input:is([type=submit], [type=reset]) {
        width: auto;
    }

    input:not([type=date], [type=time], [type=datetime-local], [type=month], [type=week], [type=checkbox], [type=radio]),
    textarea,
    select {
        display: block;
    }

    ::-webkit-datetime-edit,
    ::-webkit-datetime-edit-fields-wrapper,
    ::-webkit-datetime-edit-text,
    ::-webkit-datetime-edit-minute-field,
    ::-webkit-datetime-edit-hour-field,
    ::-webkit-datetime-edit-meridiem-field,
    ::-webkit-datetime-edit-day-field,
    ::-webkit-datetime-edit-month-field,
    ::-webkit-datetime-edit-year-field {
        padding: 0;
    }

    input::-webkit-inner-spin-button {
        height: auto;
    }

    :where(input, textarea, select):not(:last-child) {
        margin-block-end: var(--size-xl);
    }

    textarea {
        min-height: 5rem;
        overflow: auto;
        resize: vertical;
    }

    [type=image],
    [type=checkbox],
    [type=radio] {
        cursor: pointer;
        display: inline-block;
        height: auto;
        width: auto;
        padding: 0;
    }

    [type=checkbox],
    [type=radio] {
        appearance: none;
        height: var(--size-m);
        width: var(--size-m);
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
    }

    [type=checkbox] {
        font-weight: bold;
    }

    [type=radio] {
        border-radius: 50%;
    }

    [type=color] {
        height: 3rem;
        width: 3rem;
    }

    :is(input, textarea, select):not([type=checkbox], [type=radio], [type=range]):focus,
    :is([type=checkbox], [type=radio], [type=range]):focus-visible {
        outline-color: lightblue;
        outline-style: dotted;
        outline-width: var(--size-6xs);
        outline-offset: var(--size-6xs);
    }

    [type=radio]:checked {
        background-color: transparent;
        border-color: darkgreen;
    }

    [type=radio]:checked::after {
        background-color: darkgreen;
        border-radius: 50%;
        content: "";
        width: 0.667em;
        aspect-ratio: 1;
    }

    [type=checkbox]:is(:checked, :indeterminate) {
        background-color: transparent;
        border-color: darkgreen;
        color: darkgreen;
    }

    [type=checkbox]:is(:checked, :indeterminate)::after {
        content: "";
        height: 0.667em;
        width: 0.667em;
        box-shadow: inset 1em 1em darkgreen;
    }

    [type=checkbox]:checked::after {
        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
        rotate: 45deg;
    }

    [type=checkbox]:indeterminate::after {
        clip-path: inset(40% 10% round 50%);
    }

    @media (forced-colors: active) {
        :is([type=checkbox], [type=radio]):is(:checked, :indeterminate)::after {
            background-color: CanvasText;
        }
    }

    :is(input, textarea, select):is([readonly], [disabled]) {
        background-color: lightgray;
        color: lightgray;
    }

    [disabled]:checked {
        border-color: lightgray;
    }
    */



    /* Buttons */
    button,
    .btn,
    input:is([type=button], [type=reset], [type=submit]) {
        --gap: var(--size-xs);
        --padding-block: var(--size-xs);
        --padding-inline: var(--size-m);
        background-color: gray;
        border: 0 none;
        border-radius: var(--border-radius-m);
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        font: inherit;
        font-size: var(--size-s);
        font-weight: 400;
        line-height: var(--line-height-xs);
        padding-block: var(--padding-block);
        padding-inline: var(--padding-inline);
        text-align: center;
        vertical-align: middle;
        text-decoration: none;
        text-transform: uppercase;

        &:hover {
            background-color: darkgray;
            color: #fff;
        }

        &.btn-primary {
            background-color: var(--theme-primary-light);

            &:hover {
                background-color: var(--theme-primary-medium);
            }
        }

        &.btn-secondary {
            background-color: var(--theme-primary-medium);

            &:hover {
                background-color: var(--theme-primary-dark);
            }
        }

        &.btn-tertiary {
            background-color: var(--theme-secondary-medium);
            color: #111;

            &:hover {
                background-color: var(--theme-secondary-dark);
            }
        }
    }

    button,
    [type=submit] {
        appearance: none;
    }

    button[disabled],
    button[data-disabled],
    [data-submitting] button {
        --opacity: 0.7;
        box-shadow: none;
        cursor: not-allowed;
        opacity: var(--opacity);
        pointer-events: none;
    }

    .btn-link:hover,
    .link:hover {
        --decoration: var(--decoration-text-link-hover);
    }



    /* Tables */
    table {
        --border-color: gray;
        --background-color: lightgray;
        --color: darkslategray;
        border-collapse: collapse;
        border-spacing: 0;
        max-width: 100%;
        width: 100%;
    }

    th,
    td {
        text-align: left;
        padding: var(--size-4xs);
    }

    th {
        border-block-end: var(--size-6xs) solid var(--border-color);
        font-weight: bold;
        vertical-align: bottom;
    }

    td {
        border-block-start: 1px solid var(--border-color);
        vertical-align: top;
    }

    .table-striped tbody tr:nth-child(odd of :not([hidden])) {
        background-color: var(--background-color);
    }

    .table-striped.vivid tbody tr:nth-child(odd of :not([hidden])) {
        color: var(--color);
    }



    /* Details */
    summary {
        --margin: var(--size-3xs);
        cursor: pointer;
    }

    [open] > summary {
        margin-block-end: var(--margin);
    }



    /* Dialog (Modals and Drawers) */
    html:has([open]:modal) {
        overflow: hidden;
    }

    dialog {
        --background-color: var(--theme-secondary-dark);
        --border-color: var(--theme-secondary-dark);
        --color: var(--theme-primary-dark);
        --gap: var(--size-2xl);
        --width: 40rem;
        background-color: var(--background-color);
        border: 1px solid var(--border-color);
        color: var(--color);
        border-radius: var(--border-radius-m);
        max-height: calc(100% - var(--size-5xl));
        max-width: calc(100% - var(--size-5xl));
        width: var(--width);
        padding: 0;

        h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
            text-transform: none !important;
        }

    }

    @media (forced-colors: active) {
        dialog {
            border-width: var(--size-5xs);
        }
    }

    dialog:modal::backdrop {
        background-color: rgba(0, 0, 0, 0.6);
    }

    dialog:has(.action-body) .action-header {
        position: sticky;
        top: 0;
    }

    dialog:has(.action-body) .action-footer {
        position: sticky;
        bottom: 0;
    }

    dialog[open]:has(.action-body) {
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        overflow: hidden;
    }

    dialog .action-body {
        overflow: auto;
        margin-inline-end: calc(-1 * var(--gap));
        padding-inline-end: var(--gap);
    }

    dialog .modal-close {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;

        color: var(--theme-white);
        background-color: var(--theme-primary-light);
        font-size: 14px;
        width: 35px;
        height: 35px;
        top: 10px;
        right: 10px;

        @media (min-width: 768px) {
            font-size: 18px;
            width: 45px;
            height: 45px;
            top: 20px;
            right: 20px;
        }

        &:hover {
            color: var(--theme-white);
            background-color: var(--theme-primary-medium);
        }

    }

    dialog .modal-body {
        padding: 50px 20px;

        @media (min-width: 768px) {
            padding: 50px;
        }

        @media (min-width: 1200px) {
            padding: 100px;
        }
    }

    [class*=drawer] {
        border-radius: 0;
        max-height: 100%;
        max-width: 100%;
        margin: 0;
    }

    .drawer,
    .drawer-end,
    .drawer-start {
        height: 100%;
    }

    .drawer,
    .drawer-end {
        inset-inline-end: 0;
        inset-inline-start: auto;
    }

    .drawer-start {
        inset-inline-start: 0;
        inset-inline-end: auto;
    }

    .drawer-top,
    .drawer-bottom {
        --width: 100%;
        inset-inline-end: 0;
        inset-inline-start: 0;
    }

    .drawer-top {
        inset-block-start: 0;
    }

    .drawer-bottom {
        inset-block-end: 0;
        inset-block-start: auto;
    }

    .dialog-xs {
        --width: 20vw;
    }

    .dialog-s {
        --width: 40vw;
    }

    .dialog-l {
        --width: 60vw;
    }

    .dialog-xl {
        --width: 80vw;
    }

    .dialog-full {
        --width: 100%;
        height: 100%;
    }



    /* Media */
    img,
    picture,
    video,
    svg,
    iframe,
    object,
    embed {
        max-width: 100%;
    }

    img,
    picture,
    video {
        height: auto;
    }

    audio,
    video,
    iframe {
        width: 100%;
    }

    figcaption {
        font-size: var(--size-s);
        font-style: italic;
        color: darkslategray;
        padding-block-start: var(--size-4xs);
        text-align: center;
    }



    /* Code */
    code,
    kbd,
    pre,
    samp {
        font-family: var(--font-monospace);
        font-size: 1em;
    }

    code {
        color: darkolivegreen;
        word-wrap: break-word;
    }

    pre {
        background-color: darkolivegreen;
        border: 1px solid darkolivegreen;
        border-radius: var(--border-radius-m);
        color: #efefef;
        display: block;
        font-size: var(--size-m);
        line-height: var(--line-height-m);
        overflow: auto;
        padding: var(--size-xs);
        tab-size: 2;
        white-space: pre-wrap;
        word-break: break-all;
    }

    @media (min-width: 768px) {
        pre {
            tab-size: 4;
        }
    }

    pre code {
        color: inherit;
    }


    /* Badges (Tags) */
    .badge {
        --background-color: darkslategray;
        --color: white;
        --border-color: transparent;
        --gap: var(--size-4xs);
        --decoration: none;
        --decoration-hover: none;
        background-color: var(--background-color);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-s);
        color: var(--color);
        display: inline-flex;
        gap: var(--gap);
        align-items: center;
        font: inherit;
        font-size: var(--size-2xs);
        font-weight: 500;
        line-height: var(--line-height-xs);
        padding-block: var(--size-5xs);
        padding-inline: var(--size-3xs);
    }

    /* Callouts */
    .callout {
        --background-color: lightgray;
        --color: darkslategray;
        --border-color: gray;
        background-color: var(--background-color);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-m);
        color: var(--color);
        margin-block-end: var(--size-5xs);
        padding: var(--size-xs);
    }

    .callout:not(.outline, .vivid) {
        color: black;
    }

    .callout > :first-child {
        margin-block-start: 0;
    }

    .callout > :last-child {
        margin-block-end: 0;
    }



    /* Avatar */
    .avatar {
        --border-radius: var(--border-radius-circle);
        display: inline-block;
        border-radius: var(--border-radius);
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }


    /* Skeleton (Wireframe, Placeholder) */
    .skeleton {
        --border-radius: var(--border-radius-s);
        --height: var(--space);
        --width: 100%;
        animation: loadingPulse 3s ease-in infinite;
        background-color: lightgray;
        border-radius: var(--border-radius);
        margin-block-end: var(--size-m);
        height: var(--height);
        width: var(--width);
    }

    @media (forced-colors: active) {
        .skeleton {
            border: var(--size-6xs) solid;
        }
    }

    @keyframes loadingPulse {
        0% {
            background-color: lightgray;
        }

        50% {
            background-color: color-mix(in oklab, lightgray, lightskyblue);
        }

        100% {
            background-color: lightgray;
        }
    }
}