@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/Inter-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Display';
    src: url('../fonts/inter/InterDisplay-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {

    /* Color primitives */

    --color-gray-0: #ffffff;
    --color-gray-50: #f7f7f7;
    --color-gray-100: #ededed;
    --color-gray-200: #dedede;
    --color-gray-300: #c8c8c8;
    --color-gray-400: #adadad;
    --color-gray-500: #929292;
    --color-gray-600: #777777;
    --color-gray-700: #5e5e5e;
    --color-gray-800: #454545;
    --color-gray-900: #2f2f2f;
    --color-gray-950: #1c1c1c;
    --color-gray-1000: #000000;

    --color-red-50: #fff1f1;
    --color-red-100: #ffe1e1;
    --color-red-200: #ffc7c7;
    --color-red-300: #ffa0a0;
    --color-red-400: #f96b6c;
    --color-red-500: #d60d0e;
    --color-red-600: #bd0b0c;
    --color-red-700: #9d0c0d;
    --color-red-800: #811314;
    --color-red-900: #6b1718;
    --color-red-950: #3b0708;

    --color-green-500: #16a34a;

    /* Font sizes */

    --font-body-sm: 400 12px/18px 'Inter', sans-serif;
    --font-body-sm-accent: 500 12px/18px 'Inter', sans-serif;

    --font-body-md: 400 14px/20px 'Inter', sans-serif;
    --font-body-md-accent: 500 14px/20px 'Inter', sans-serif;

    --font-body-lg: 400 16px/22px 'Inter', sans-serif;
    --font-body-lg-accent: 500 16px/22px 'Inter', sans-serif;

    --font-heading-3: 400 20px/24px 'Inter Display', sans-serif;
    --letter-spacing-heading-2: -0.01em;

    --font-heading-2: 500 20px/24px 'Inter Display', sans-serif;
    --letter-spacing-heading-2: -0.01em;

    --font-heading-1: 500 32px/36px 'Inter Display', sans-serif;
    --letter-spacing-heading-1: -0.017em;

    --font-features: "ss01" 1;

    /* Transitions */

    --transition: 100ms ease-in-out;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

    /* Shadows */

    --shadow: 0 8px 24px rgb(0 0 0 / 0.14);

    /* Spacing */

    --spacing-0: 0;
    --spacing-25: 1px;
    --spacing-50: 2px;
    --spacing-100: 4px;
    --spacing-200: 8px;
    --spacing-300: 12px;
    --spacing-400: 16px;
    --spacing-500: 24px;
    --spacing-600: 32px;
    --spacing-700: 40px;
    --spacing-800: 48px;
    --spacing-900: 64px;
    --spacing-1000: 80px;
    --spacing-1100: 96px;

    /* Border radii */

    --radius-0: 0;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
    background-repeat: no-repeat;
    background-position: center;
}

*,
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
blockquote,
dl,
dd {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    text-size-adjust: 100%;
    touch-action: manipulation;
    scroll-behavior: smooth;
}

body {
    min-height: 100dvh;
    font: var(--font-body-md);
    font-feature-settings: var(--font-features);
    text-rendering: optimizeLegibility;
    color: var(--color-gray-1000);
    background-color: var(--color-gray-100);

    &:has(.dialog[open]) {
        overflow: hidden;
    }
}

h1 {
    font: var(--font-heading-1);
    font-feature-settings: var(--font-features);
    letter-spacing: var(--letter-spacing-heading-1);
    text-wrap: balance;
}

h2 {
    font: var(--font-heading-2);
    font-feature-settings: var(--font-features);
    letter-spacing: var(--letter-spacing-heading-2);
    text-wrap: balance;
}

ul,
ol {
    list-style: none;
}

img,
picture,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    border-style: none;
    display: block;
}

label {
    width: 100%;
    display: block;
}

button,
input,
textarea,
select {
    font: inherit;
    font-feature-settings: var(--font-features);
    color: inherit;
    background: transparent;
    border: 0;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
    cursor: pointer;
    appearance: none;
    -webkit-user-select: none;
    user-select: none;
    border-radius: var(--radius-full);
    background-color: var(--color-red-500);
    padding: var(--spacing-300) var(--spacing-500);
    color: var(--color-gray-0);
    align-self: flex-start;
    font: var(--font-body-lg-accent);
    font-feature-settings: var(--font-features);
    will-change: opacity;
    transition: opacity, color var(--transition)

    &:focus {
        outline: none;
        box-shadow: 0 0 8px 0 var(--color-red-500);
    }

    &:active {
        opacity: 0.9;
    }

    @media (hover: hover) and (pointer: fine) {
        &:hover {
            background-color: var(--color-red-600)
        }
    }
}

.icon-button {
    --icon: none;
    --icon-size: 24px;

    display: inline-grid;
    place-items: center;
    width: var(--icon-size);
    height: var(--icon-size);
    padding: 0;
    color: var(--color-red-500);
    background-color: transparent;
    border-radius: var(--radius-sm);
    transition: color var(--transition), opacity var(--transition);

    &::before {
        content: '';
        width: 100%;
        height: 100%;
        background-color: currentColor;
        mask: var(--icon) center / contain no-repeat;
        -webkit-mask: var(--icon) center / contain no-repeat;
    }

    @media (hover: hover) and (pointer: fine) {
        &:hover {
            color: var(--color-red-700);
            background-color: transparent;
        }
    }
}

.icon-button--close {
    --icon: url('../images/x.svg');
}

.icon-button--plus {
    --icon: url('../images/plus.svg');
}

.icon-button--minus {
    --icon: url('../images/minus.svg');
}

.icon-button--clock {
    --icon: url('../images/clock.svg');
}

.icon-button--alarm-clock-x {
    --icon: url('../images/alarm-clock-x.svg');
}

.icon-button--trash {
    --icon: url('../images/trash-03.svg');
}

.icon-button[hidden] {
    display: none;
}

input[type='text'],
input[type='password'],
textarea {
    padding: var(--spacing-300) var(--spacing-400);
    font: var(--font-body-lg);
    font-feature-settings: var(--font-features);
    width: 100%;
    border-radius: var(--radius-2xl);
    background-color: var(--color-gray-0);
    align-self: flex-start;
    max-width: 400px;

    &:focus {
        outline: none;
        box-shadow: 0 0 8px 0 var(--color-gray-0);
    }
}

textarea {
    resize: none;
    max-width: 100%;
}

a,
.card__title {
    color: var(--color-red-500);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: .2px;
    text-decoration-skip-ink: none;
    text-decoration-color: var(--color-red-200);
    transition: opacity, color, text-decoration-color var(--transition);

    &:active {
        opacity: .9;
    }

    &:focus-visible {
        outline: none;
    }

    @media (hover: hover) and (pointer: fine) {
        &:hover {
            color: var(--color-red-700);
            text-decoration-color: var(--color-red-300);
        }
    }
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset {
    min-width: 0;
    border: 0;
}

iframe {
    border: 0;
}

.header {
    display: flex;
    gap: var(--spacing-400);
    position: relative;
    isolation: isolate;
    padding: var(--spacing-400) var(--spacing-400) var(--spacing-700);
    justify-content: space-between;
    font: var(--font-heading-1);
    font-feature-settings: var(--font-features);
    letter-spacing: var(--letter-spacing-heading-1);
    background-color: var(--color-gray-100);

    &::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        background-color: var(--color-red-500);
    }

    a {
        color: var(--color-gray-0);
        text-underline-offset: 5px;

        @media (hover: hover) and (pointer: fine) {
            &:hover {
                color: var(--color-red-100);
            }
        }

        &[aria-current='page'] {
            text-decoration: none;
        }
    }

    @media (min-width: 768px) {
        padding: var(--spacing-500) var(--spacing-600) var(--spacing-800);
    }

    .header__logo {

    }

    .header__menu {

    }

    .header__links {
        display: flex;
        gap: var(--spacing-400);
    }

    .header__link-item {

        @media (hover: none) and (pointer: coarse) {
            &.header__link-item--desktop {
                display: none;
            }
        }
    }
}

.heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-400);
    position: relative;
    padding: var(--spacing-400) var(--spacing-400) var(--spacing-300);
    background-color: var(--color-gray-100);

    @media (min-width: 768px) {
        padding-top: var(--spacing-500);
        padding-left: var(--spacing-600);
        padding-right: var(--spacing-600);
    }
}

.header + .heading {
    isolation: isolate;
    background-color: var(--color-red-500);

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        background-color: var(--color-gray-100);
    }
}

.heading__title {
    font: var(--font-heading-1);
    font-feature-settings: var(--font-features);
    letter-spacing: var(--letter-spacing-heading-1);
    text-wrap: balance;

    &[data-count="0"] {
        padding-bottom: var(--spacing-500);
    }
}

.heading__status {
}

.list {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-400) var(--spacing-400) var(--spacing-800);

    .list__item {
        text-decoration: none;
    }

    .list__name {
        font: var(--font-heading-2);
        font-feature-settings: var(--font-features);
        letter-spacing: var(--letter-spacing-heading-2);
        text-decoration: underline;
        text-underline-offset: 4px;
        text-decoration-thickness: .2px;
        text-decoration-skip-ink: none;
        text-decoration-color: var(--color-gray-500);
        transition: opacity, color, text-decoration-color var(--transition);
    }

    .list__meta {

    }

    .list__link {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: var(--spacing-200) 0;
        color: var(--color-gray-1000);

        @media (hover: hover) {
            &:hover .list__name {
                color: var(--color-red-700);
                text-decoration-color: var(--color-red-300);
            }
        }
    }

    @media (min-width: 768px) {
        /*
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--spacing-600);
        */
        padding-left: var(--spacing-600);
        padding-right: var(--spacing-600);
        padding-bottom: var(--spacing-600);
    }
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-100);
    white-space: nowrap;

    .status-indicator__label {
        color: var(--color-gray-600);
    }

    .status-indicator__number {
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.02em;
    }

    .status-indicator__icon {
        display: block;
        flex: 0 0 20px;
        color: var(--color-green-500);
    }

    .status-indicator__track,
    .status-indicator__value {
        fill: none;
        stroke-width: 2;
    }

    .status-indicator__track {
        stroke: var(--color-gray-200);
    }

    .status-indicator__value {
        stroke: currentColor;
        stroke-linecap: round;
        stroke-dasharray: var(--status-progress) 1;
        transform: rotate(-90deg);
        transform-origin: 10px 10px;
        transition:
            stroke-dasharray 220ms cubic-bezier(0.77, 0, 0.175, 1),
            opacity 120ms ease;
    }

    &[data-owned='0'] .status-indicator__value {
        opacity: 0;
    }

    .status-indicator__complete {
        fill: var(--color-green-500);
        opacity: 0;
        transform: scale(.92);
        transform-origin: center;
        transition:
            opacity 160ms var(--ease-out),
            transform 220ms var(--ease-out);
    }

    &.is-complete .status-indicator__progress {
        opacity: 0;
    }

    &.is-complete .status-indicator__complete {
        opacity: 1;
        transform: scale(1);
    }

    .status-indicator__progress {
        transition: opacity 120ms ease;
    }

    @media (prefers-reduced-motion: reduce) {
        .status-indicator__value,
        .status-indicator__complete,
        .status-indicator__progress {
            transition: none;
        }
    }
}

.message {
    padding: var(--spacing-300) var(--spacing-400) 0;

    .summary {
        margin-bottom: var(--spacing-200);
    }

    &.message--error {
        p {
            color: var(--color-red-500);
        }
    }

    @media (min-width: 768px) {
        padding-left: var(--spacing-600);
        padding-right: var(--spacing-600);
    }
}

.summary {

}

.import-results {

}

.grid {
    margin-top: var(--spacing-600);
    margin-bottom: var(--spacing-800);
    position: relative;
    z-index: 1;

    &:has(.card.is-touch-open) {
        z-index: 2;
    }

    @media (hover: hover) {
        &:has(.card:hover) {
            z-index: 2;
        }
    }

    .grid__header {
        position: sticky;
        top: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: var(--spacing-300) var(--spacing-400);
        z-index: 2;
        align-items: flex-end;
        gap: var(--spacing-200);

        @media (min-width: 768px) {
            padding-left: var(--spacing-600);
            padding-right: var(--spacing-600);
        }
    }

    .grid__heading {
        text-wrap: balance;
    }

    .grid__summary {
        text-align: right;
        white-space: nowrap;
    }

    .grid__status {
        grid-column: 1 / -1;
        height: .5px;
        margin-top: var(--spacing-100);
        overflow: hidden;
        border-radius: var(--radius-full);
        background-color: rgba(0, 0, 0, 1);
    }

    .grid__progress {
        height: 100%;
        border-radius: var(--radius-full);
        background-color: var(--color-red-500);
    }

    .grid__body {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
        gap: var(--spacing-50);
        padding: var(--spacing-100);
        position: relative;
        z-index: 1;
    }
}

.card {
    position: relative;
    z-index: 1;

    &[data-reorderable='1'] {
        @media (hover: hover) and (pointer: fine) {
            &:hover {
                cursor: grab;
            }
        }

        &.is-touch-open {
            touch-action: none;
        }
    }

    &.is-drag-source {
        opacity: 0;
        pointer-events: none;
    }

    .card__controls {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition);
    }

    .card__controls .icon-button {
        width: 44px;
        height: 44px;
        pointer-events: none;
        transition: color var(--transition), opacity var(--transition);

        &::before {
            width: 20px;
            height: 20px;
        }
    }

    &:has(.pending-toggle[data-pending='1']) {
        .card__controls {
            opacity: 1;
        }

        .card__controls .icon-button {
            opacity: 0;
        }

        .card__controls .pending-toggle {
            color: var(--color-gray-200);
            opacity: 1;
        }
    }

    &:has(.collection-toggle[data-owned='0']) {
        .card__controls {
            opacity: 1;
        }

        .collection-toggle {
            color: var(--color-gray-200);
            opacity: 1;
        }

        .pending-toggle[data-pending='0'] {
            opacity: 0;
        }
    }

    &:has(:focus-visible) .card__controls,
    &.is-touch-open .card__controls {
        opacity: 1;

        .icon-button {
            color: var(--color-red-500);
            opacity: 1;
            pointer-events: auto;
        }
    }

    &:has(.pending-toggle[data-pending='1']):has(:focus-visible) .card__controls,
    &:has(.pending-toggle[data-pending='1']).is-touch-open .card__controls {
        .icon-button {
            color: var(--color-red-500);
            opacity: 1;
            pointer-events: auto;
        }
    }

    .card__surface {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    &:focus-visible {
        outline: none;
    }

    .card__background {
        position: absolute;
        inset: 0 0 -4px;
        background-color: var(--color-gray-0);
        border-radius: var(--radius-lg);
        box-shadow: 0 8px 24px rgb(0 0 0 / 0);
        transition: box-shadow var(--transition);
    }

    .card__background-spacer {
        width: 100%;
        aspect-ratio: 1;
    }

    .card__images {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        aspect-ratio: 1;
        overflow: hidden;
        position: relative;
        z-index: 1;
        -webkit-user-select: none;
        user-select: none;

        &.card__images--flippable {
            cursor: pointer;
        }
    }

    .card__image {
        display: grid;
        place-items: center;
        min-width: 0;
        border-radius: var(--radius-full);
        overflow: hidden;
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        max-width: calc(100% - 2 * var(--spacing-300));
        max-height: calc(100% - 2 * var(--spacing-300));
        object-fit: contain;
        width: var(--coin-image-width, calc(100% - 2 * var(--spacing-300)));
        height: var(--coin-image-height, auto);
        transform: translate(-50%, -50%);
        transform-origin: center;
        transition:
            transform var(--transition),
            opacity var(--transition);
        will-change: transform, opacity;

        &.card__image--img_front {
            transition-delay: 60ms;
        }

        &.card__image--img_back {
            transition-delay: 0ms;
        }
    }

    &.is-coin-dropping .card__image {
        animation: coin-drop 360ms cubic-bezier(.37, 0, .63, 1);
    }

    &.is-coin-rising .card__image {
        animation: coin-rise 360ms cubic-bezier(.37, 0, .63, 1);
    }

    &.card--medal {
        .card__image--img_back {
            transform: translate(-50%, -50%) scaleX(0);
        }

        .card__images.is-flipped {
            .card__image--img_front {
                transform: translate(-50%, -50%) scaleX(0);
            }

            .card__image--img_back {
                transform: translate(-50%, -50%) scaleX(1);
            }
        }
    }

    &.card--coin {
        .card__image--img_back {
            transform: translate(-50%, -50%) scaleY(0);
        }

        .card__images.is-flipped {
            .card__image--img_front {
                transform: translate(-50%, -50%) scaleY(0);
            }

            .card__image--img_back {
                transform: translate(-50%, -50%) scaleY(1);
            }
        }
    }

    .card__images.is-flipped {
        .card__image--img_front {
            transition-delay: 0ms;
        }

        .card__image--img_back {
            transition-delay: 60ms;
        }
    }

    &.card--not-collected {
        .card__image {
            opacity: .3;
        }

        &:has(:focus-visible),
        &.is-touch-open {
            .card__image {
                opacity: 1;
            }
        }

        @media (hover: hover) {
            &:hover .card__image {
                opacity: 1;
            }
        }
    }

    .card__body {
        padding: var(--spacing-0) var(--spacing-400);
        text-align: center;
        position: relative;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition:
        max-height var(--transition),
        opacity var(--transition),
        padding-bottom var(--transition);
        margin-top: -4px;
    }

    .card__title {
        appearance: none;
        display: inline;
        padding: 0;
        border-radius: var(--radius-0);
        background: transparent;
        font: var(--font-body-md-accent);
        font-feature-settings: var(--font-features);
        text-wrap: balance;
        margin-bottom: var(--spacing-50);
    }

    .card__meta {
        font: var(--font-body-sm);
        font-feature-settings: var(--font-features);
        color: var(--color-gray-600);
    }

    &:has(:focus-visible),
    &.is-touch-open {
        z-index: 2;

        .card__background {
            box-shadow: var(--shadow);
        }

        .card__body {
            max-height: 120px;
            opacity: 1;
            padding-bottom: var(--spacing-300);
        }
    }

    @media (hover: hover) {
        &:hover {
            z-index: 2;

            .card__controls {
                opacity: 1;

                .icon-button {
                    color: var(--color-red-500);
                    opacity: 1;
                    pointer-events: auto;
                }
            }

            .card__background {
                box-shadow: var(--shadow);
            }

            .card__body {
                max-height: 120px;
                opacity: 1;
                padding-bottom: var(--spacing-300);
            }
        }

        &:has(.pending-toggle[data-pending='1']):hover .card__controls {
            .icon-button {
                color: var(--color-red-500);
                opacity: 1;
                pointer-events: auto;
            }
        }

        &:hover .card__controls .icon-button:hover {
            color: var(--color-red-700);
        }
    }
}

.card.is-drag-ghost {
    position: fixed;
    z-index: 20;
    margin: 0;
    pointer-events: none;
    cursor: grabbing;
    opacity: .84;

    .card__background {
        box-shadow: var(--shadow);
    }

    .card__body {
        max-height: 120px;
        opacity: 1;
        padding-bottom: var(--spacing-300);
    }
}

.is-dragging-card,
.is-dragging-card * {
    cursor: grabbing !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

.dialog {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-width: 768px;
    max-height: 80vh;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background-color: var(--color-gray-0);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 160ms var(--ease-out),
        transform 160ms var(--ease-out),
        display 160ms allow-discrete,
        overlay 160ms allow-discrete;

    @media (min-width: 768px) {
        inset: 0;
        margin: auto;
    }

    &.dialog--sidebar {
        @media (min-width: 768px) {
            inset: 0 0 0 auto;
            width: 100%;
            max-width: 512px;
            height: 100dvh;
            max-height: 100dvh;
            margin: 0;
            border-radius: var(--radius-xl) 0 0 var(--radius-xl);

            &:not([open]) {
                transform: translateX(24px);
            }
        }
    }

    &[open] {
        opacity: 1;
        transform: none;
        transition-duration: 220ms;
        transition-timing-function: var(--ease-drawer);
    }

    &:focus {
        outline: none;
    }

    &::backdrop {
        background: rgb(0 0 0 / 0.4);
        opacity: 0;
        transition:
            opacity 160ms var(--ease-out),
            display 160ms allow-discrete,
            overlay 160ms allow-discrete;
    }

    &[open]::backdrop {
        opacity: 1;
        transition-duration: 220ms;
        transition-timing-function: var(--ease-drawer);
    }

    .dialog__header {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--spacing-400);
        padding: var(--spacing-400);
        background-color: var(--color-gray-0);
        border-bottom: 0.5px solid var(--color-gray-200);
    }

    .dialog__title {

    }

    .dialog__close {
        flex: 0 0 auto;
    }

    .dialog__details {
        display: grid;
        grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr);
        padding: var(--spacing-300) var(--spacing-400);
    }

    .dialog__details dt,
    .dialog__details dd {
        padding: var(--spacing-300) 0;
        border-bottom: .5px solid var(--color-gray-100);
        overflow-wrap: anywhere;
    }

    .dialog__details dt {
        color: var(--color-gray-600);
    }

    .dialog__details dt:last-of-type,
    .dialog__details dd:last-of-type {
        border-bottom: 0;
    }

    .dialog__footer {
        display: flex;
        justify-content: flex-start;
        gap: var(--spacing-300);
        padding: var(--spacing-400) var(--spacing-400) var(--spacing-800);
    }

    .dialog__footer[hidden] {
        display: none;
    }

    .dialog__delete:disabled,
    .dialog__swap:disabled {
        cursor: wait;
        opacity: 0.6;
    }
}

@starting-style {
    .dialog[open] {
        opacity: 0;
        transform: translateY(24px);
    }

    .dialog[open]::backdrop {
        opacity: 0;
    }

    @media (min-width: 768px) {
        .dialog.dialog--sidebar[open] {
            transform: translateX(24px);
        }
    }
}

@keyframes coin-drop {
    42%,
    58% {
        translate: 0 7px;
    }
}

@keyframes coin-rise {
    42%,
    58% {
        translate: 0 -7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .card.is-coin-dropping .card__image,
    .card.is-coin-rising .card__image {
        animation: none;
    }

    .dialog,
    .dialog.dialog--sidebar:not([open]),
    .dialog[open] {
        transform: none;
        transition-duration: 120ms;
    }

    .dialog::backdrop,
    .dialog[open]::backdrop {
        transition-duration: 120ms;
    }

    @starting-style {
        .dialog[open],
        .dialog.dialog--sidebar[open] {
            transform: none;
        }
    }
}

.toast-region {
    position: fixed;
    z-index: 100;
    right: var(--spacing-400);
    bottom: calc(var(--spacing-400) + env(safe-area-inset-bottom));
    left: var(--spacing-400);
    display: grid;
    justify-items: center;
    pointer-events: none;
}

.toast {
    max-width: 100%;
    padding: var(--spacing-300) var(--spacing-400);
    color: var(--color-gray-0);
    font: var(--font-body-md-accent);
    font-feature-settings: var(--font-features);
    text-align: center;
    background-color: rgb(0 0 0 / 0.78);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(calc(100% + var(--spacing-200)));
    transition:
        opacity 180ms var(--ease-out),
        transform 220ms var(--ease-out);
    will-change: transform, opacity;
}

.toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.toast.is-leaving {
    opacity: 0;
    transform: translateY(calc(100% + var(--spacing-200)));
    transition-duration: 160ms;
}

@media (prefers-reduced-motion: reduce) {
    .toast,
    .toast.is-visible,
    .toast.is-leaving {
        transform: none;
        transition-duration: 120ms;
    }
}

.card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-200);
    padding: var(--spacing-400);
}

.card__actions button {
}

.card__actions button:hover {
}

.card__actions .primary {
}

.card__actions .primary:hover {

}

.card__actions .primary:active {

}

.card__actions .danger {

}

.card__actions .danger:hover {

}

.card__actions button:focus-visible {

}

.card__actions button:disabled {

}

.collection-status {

}

.form {
    padding: var(--spacing-400);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-400);

    @media (min-width: 768px) {
        padding-left: var(--spacing-600);
        padding-right: var(--spacing-600);
        padding-bottom: var(--spacing-600);
    }

    .form__row {
        width: 100%;

        label input {
            margin-top: var(--spacing-200);
        }
    }
}