/**
 * donplano project stylesheet for Alto UI.
 *
 * Alto remains brand-neutral. This entrypoint composes the application-owned
 * tokens, typography, layouts, and components into one browser asset.
 */
@layer donplano.project {
    :where(:root, .theme-donplano) {
        --brand-charcoal: #575656;
        --brand-red: #bc2617;
        --brand-sage: #7b9791;

        /* Neutral palette: charcoal anchor #575656 at step 700. */
        --color-neutral-50: oklch(0.985 0.0013 17.2);
        --color-neutral-100: oklch(0.960 0.0013 17.2);
        --color-neutral-200: oklch(0.910 0.0013 17.2);
        --color-neutral-300: oklch(0.840 0.0013 17.2);
        --color-neutral-400: oklch(0.740 0.0013 17.2);
        --color-neutral-500: oklch(0.640 0.0013 17.2);
        --color-neutral-600: oklch(0.560 0.0013 17.2);
        /* Exact OKLCH conversion of #575656. */
        --color-neutral-700: oklch(0.454088 0.001294 17.206);
        --color-neutral-800: oklch(0.420 0.0013 17.2);
        --color-neutral-900: oklch(0.320 0.0013 17.2);
        --color-neutral-950: oklch(0.230 0.0013 17.2);
        --color-neutral: var(--color-neutral-100);

        /* Primary palette: donplano red anchor #bc2617 at step 700. */
        --color-primary-50: oklch(0.985 0.0072 30.2);
        --color-primary-100: oklch(0.960 0.0197 30.2);
        --color-primary-200: oklch(0.910 0.0467 30.2);
        --color-primary-300: oklch(0.840 0.0882 30.2);
        --color-primary-400: oklch(0.740 0.1587 30.2);
        --color-primary-500: oklch(0.640 0.1877 30.2);
        --color-primary-600: oklch(0.560 0.1877 30.2);
        /* Exact OKLCH conversion of #bc2617. Step 700 is an anchor exception. */
        --color-primary-700: oklch(0.517317 0.187663 30.196);
        --color-primary-800: oklch(0.420 0.1672 30.2);
        --color-primary-900: oklch(0.320 0.1272 30.2);
        --color-primary-950: oklch(0.230 0.0917 30.2);

        /* Sage palette. */
        --color-sage-50: oklch(0.985 0.0202 -179.2);
        --color-sage-100: oklch(0.960 0.0327 -179.2);
        --color-sage-200: oklch(0.910 0.0327 -179.2);
        --color-sage-300: oklch(0.840 0.0327 -179.2);
        --color-sage-400: oklch(0.740 0.0327 -179.2);
        --color-sage-500: oklch(0.640 0.0327 -179.2);
        --color-sage-600: oklch(0.560 0.0327 -179.2);
        --color-sage-700: oklch(0.520 0.0327 -179.2);
        --color-sage-800: oklch(0.420 0.0327 -179.2);
        --color-sage-900: oklch(0.320 0.0327 -179.2);
        --color-sage-950: oklch(0.230 0.0327 -179.2);

        /* Semantic ramps share the same lightness steps. */
        --color-accent-50: var(--color-primary-50);
        --color-accent-100: var(--color-primary-100);
        --color-accent-200: var(--color-primary-200);
        --color-accent-300: var(--color-primary-300);
        --color-accent-400: var(--color-primary-400);
        --color-accent-500: var(--color-primary-500);
        --color-accent-600: var(--color-primary-600);
        --color-accent-700: var(--color-primary-700);
        --color-accent-800: var(--color-primary-800);
        --color-accent-900: var(--color-primary-900);
        --color-accent-950: var(--color-primary-950);

        --color-success-50: oklch(0.985 0.0211 161.8);
        --color-success-100: oklch(0.960 0.0591 161.8);
        --color-success-200: oklch(0.910 0.0911 161.8);
        --color-success-300: oklch(0.840 0.0911 161.8);
        --color-success-400: oklch(0.740 0.0911 161.8);
        --color-success-500: oklch(0.640 0.0911 161.8);
        --color-success-600: oklch(0.560 0.0911 161.8);
        --color-success-700: oklch(0.520 0.0911 161.8);
        --color-success-800: oklch(0.420 0.0911 161.8);
        --color-success-900: oklch(0.320 0.0701 161.8);
        --color-success-950: oklch(0.230 0.0506 161.8);

        --color-warning-50: oklch(0.985 0.0101 68.1);
        --color-warning-100: oklch(0.960 0.0276 68.1);
        --color-warning-200: oklch(0.910 0.0651 68.1);
        --color-warning-300: oklch(0.840 0.0996 68.1);
        --color-warning-400: oklch(0.740 0.0996 68.1);
        --color-warning-500: oklch(0.640 0.0996 68.1);
        --color-warning-600: oklch(0.560 0.0996 68.1);
        --color-warning-700: oklch(0.520 0.0996 68.1);
        --color-warning-800: oklch(0.420 0.0916 68.1);
        --color-warning-900: oklch(0.320 0.0701 68.1);
        --color-warning-950: oklch(0.230 0.0501 68.1);

        --color-danger-50: var(--color-primary-50);
        --color-danger-100: var(--color-primary-100);
        --color-danger-200: var(--color-primary-200);
        --color-danger-300: var(--color-primary-300);
        --color-danger-400: var(--color-primary-400);
        --color-danger-500: var(--color-primary-500);
        --color-danger-600: var(--color-primary-600);
        --color-danger-700: var(--color-primary-700);
        --color-danger-800: var(--color-primary-800);
        --color-danger-900: var(--color-primary-900);
        --color-danger-950: var(--color-primary-950);

        /* Semantic roles. Components consume these aliases, not palette steps. */
        --color-accent: var(--color-accent-700);
        --color-accent-hover: var(--color-accent-800);
        --color-accent-active: var(--color-accent-900);
        --color-on-accent: var(--color-neutral-50);
        --color-success: var(--color-success-700);
        --color-warning: var(--color-warning-700);
        --color-danger: var(--color-danger-700);
        --decoration-link: underline;
        --decoration-link-hover: underline;
        --decoration-link-offset: .2em;

        /* Default contextual contract. */
        --color-background: var(--color-neutral-50);
        --color-foreground: var(--color-neutral-900);
        --color-foreground-muted: var(--color-neutral-700);
        --color-link: var(--color-primary-700);
        --color-link-hover: var(--color-primary-800);
        --color-border: var(--color-neutral-500);
        --color-focus: var(--color-primary-700);
        --color-control-icon: var(--color-foreground);
    }
}
@font-face {
    font-display: swap;
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    src: url("/assets/fonts/plus-jakarta-sans.woff2") format("woff2");
}

@layer donplano.project {
    :where(:root, .theme-donplano) {
        --font-family-primary: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
        --font-family-secondary: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
        --font-size-xs: 0.8125rem;
        --font-size-sm: 0.9375rem;
        --font-size-md: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
        --font-size-lg: clamp(1.25rem, 1.2rem + 0.25vw, 1.375rem);
        --font-size-xl: clamp(1.5rem, 1.4rem + 0.4vw, 1.75rem);
        --font-size-2xl: clamp(1.875rem, 1.7rem + 0.6vw, 2.25rem);
        --font-size-3xl: clamp(2.25rem, 2rem + 0.8vw, 2.75rem);
        --font-size-4xl: clamp(2.75rem, 2.4rem + 1vw, 3.25rem);
    }
}

@layer donplano.project {
    .auth-page :is(input, select, textarea):focus-visible {
        border-color: transparent;
        outline-offset: 0;
    }

    .auth-page .input-element > input:-webkit-autofill,
    .auth-page .input-element > input:-webkit-autofill:hover,
    .auth-page .input-element > input:-webkit-autofill:focus {
        caret-color: var(--color-foreground) !important;
        color: var(--color-foreground) !important;
        font-family: var(--font-family-primary) !important;
        font-size: var(--font-size-sm) !important;
        font-weight: inherit !important;
        line-height: var(--line-height-root) !important;
        -webkit-text-fill-color: var(--color-foreground) !important;
    }

    .auth-page .field > .input {
        align-items: center;
        background: var(--color-background);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        min-block-size: var(--control-target-size);
    }

    .auth-page .field > .input:has(:focus-visible) {
        border-color: transparent;
        outline: var(--color-focus) var(--focus-ring-style) var(--focus-ring-width);
        outline-offset: 0;
    }

    .auth-page .input-element {
        min-inline-size: 0;
    }

    .auth-page .field > .input > .input-element > input {
        background: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        border: 0;
        box-shadow: none;
        caret-color: var(--color-foreground);
        color: var(--color-foreground) !important;
        color-scheme: dark;
        font-family: var(--font-family-primary);
        font-size: var(--font-size-sm);
        outline: 0;
        -webkit-text-fill-color: var(--color-foreground) !important;
    }

    .auth-page .input-element > input::placeholder {
        color: var(--color-foreground-muted);
        opacity: 1;
        -webkit-text-fill-color: var(--color-foreground-muted) !important;
    }

    .auth-page .input-icon {
        align-items: center;
        color: var(--color-control-icon);
        display: inline-flex;
        padding-inline: var(--space-xs);
        pointer-events: none;
    }

    .auth-page .input-icon svg {
        block-size: 1.25em;
        display: block;
        inline-size: 1.25em;
        fill: currentColor;
    }

    .actions label {
        align-items: center;
        display: inline-flex;
        gap: var(--space-xs);
    }

    .actions input:where([type="checkbox"], [type="radio"]) {
        --choice-color-back: var(--color-background);
        --choice-color-border: var(--color-border);
        --choice-rounded: var(--radius-sm);

        position: relative;
        cursor: pointer;
        overflow: hidden;
        flex-shrink: 0;
        block-size: 1lh;
        inline-size: 1lh;
        height: 1lh;
        width: 1lh;
        aspect-ratio: 1 / 1;
        min-block-size: 0;
        min-inline-size: 0;
        min-width: 0;
        border: 1px solid var(--choice-color-border);
        appearance: none;
        border-radius: var(--choice-rounded);
        background: var(--choice-color-back);
        margin: 0;
        padding: 0;
    }

    .actions input:where([type="checkbox"], [type="radio"]):checked {
        border-color: var(--color-accent);
        background: var(--color-accent);
    }

    .actions input[type="checkbox"]::after {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        block-size: 0.72rem;
        inline-size: 0.42rem;
        border-block-end: 2px solid var(--color-on-accent);
        border-inline-end: 2px solid var(--color-on-accent);
        content: "";
        opacity: 0;
        transform: translate(-50%, -60%) rotate(45deg);
    }

    .actions input[type="checkbox"]:checked::after {
        opacity: 1;
    }

    .actions input[type="radio"] {
        border-radius: 50%;
    }

    .actions input[type="radio"]::after {
        position: absolute;
        inset: 0.3rem;
        border-radius: 50%;
        background: var(--color-on-accent);
        content: "";
        opacity: 0;
    }

    .actions input[type="radio"]:checked::after {
        opacity: 1;
    }

    .actions input:where([type="checkbox"], [type="radio"]):focus-visible {
        border-color: transparent;
        border-radius: var(--choice-rounded);
        outline: var(--color-focus) var(--focus-ring-style) var(--focus-ring-width);
        outline-offset: 0;
    }
}

.app-shell {
    background: var(--color-neutral-50);
    color: var(--color-neutral-900);
    display: flex;
    font-family: var(--font-family-primary);
    min-block-size: 100dvh;
}

.app-sidebar {
    background: var(--color-neutral-700);
    color: var(--color-neutral-50);
    display: flex;
    flex: 0 0 16rem;
    flex-direction: column;
    inset-block: 0;
    inset-inline-start: 0;
    position: fixed;
    width: 16rem;
    z-index: 10;
}

.app-brand {
    display: block;
    padding: var(--space-lg);
}

.app-brand img {
    display: block;
    inline-size: 100%;
    max-inline-size: 14rem;
}

.app-sidebar nav {
    display: grid;
    gap: var(--space-2xs);
    padding-inline: var(--space-sm);
}

.app-sidebar nav a {
    align-items: center;
    border-radius: var(--radius-sm);
    color: var(--color-neutral-50);
    display: flex;
    gap: var(--space-sm);
    min-block-size: 2.75rem;
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    text-decoration: none;
}

.app-sidebar nav a:hover {
    background: var(--color-neutral-600);
}

.app-sidebar nav a.is-active {
    background: var(--color-primary-700);
    color: var(--color-neutral-50);
}

.app-sidebar nav .sprite-icon {
    font-size: 1.35rem;
}

.app-location {
    border: 1px solid var(--color-neutral-500);
    border-radius: var(--radius-md);
    margin-block-start: auto;
    margin-inline: var(--space-sm);
    margin-block-end: var(--space-sm);
    position: relative;
}

.app-location--single {
    align-items: center;
    display: flex;
    gap: var(--space-sm);
    min-block-size: 3.5rem;
    padding: var(--space-xs);
}

.app-location--single > span:last-child {
    display: grid;
    min-inline-size: 0;
}

.app-sidebar-footer {
    display: grid;
    justify-items: center;
    margin-block-start: auto;
}

.app-sidebar-footer .app-location {
    justify-self: stretch;
    margin-block-start: var(--space-sm);
}

.app-location--single strong,
.app-location--single small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-location--single small {
    color: var(--color-neutral-200);
}

.app-location summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: var(--space-sm);
    list-style: none;
    min-block-size: 3.5rem;
    padding: var(--space-xs);
}

.app-location summary::-webkit-details-marker,
.app-topbar summary::-webkit-details-marker {
    display: none;
}

.app-location summary > span:nth-child(2) {
    display: grid;
    min-inline-size: 0;
}

.app-location summary strong,
.app-location summary small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-location summary small {
    color: var(--color-neutral-200);
}

.app-location > div {
    background: var(--color-neutral-50);
    border: var(--border-width) solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    bottom: calc(100% + var(--space-2xs));
    box-shadow: 0 0.75rem 2rem rgb(26 28 28 / 16%);
    color: var(--color-neutral-900);
    inset-inline: 0;
    padding: var(--space-sm);
    position: absolute;
    z-index: 20;
}

.app-location form {
    display: grid;
    gap: var(--space-xs);
}

.app-location label {
    font-weight: var(--font-weight-bold);
}

.app-location select,
.app-location button {
    font: inherit;
    min-block-size: 2.75rem;
}

.app-location > div > a {
    display: inline-block;
    padding-block: var(--space-xs);
}

.app-main {
    flex: 1;
    margin-inline-start: 16rem;
    min-inline-size: 0;
}

.app-topbar {
    align-items: center;
    background: var(--color-neutral-50);
    border: 0;
    border-block-end: var(--border-width) solid var(--color-neutral-200);
    display: flex;
    gap: var(--space-md);
    height: auto;
    justify-content: space-between;
    min-block-size: 4.5rem;
    padding-block: var(--space-sm);
    padding-inline: clamp(var(--space-md), 3vw, var(--space-2xl));
    position: sticky;
    top: 0;
    z-index: 8;
}

.app-topbar > p {
    font-size: var(--font-size-lg);
    margin: 0;
}

.app-topbar > div {
    align-items: center;
    display: flex;
    gap: var(--space-lg);
}

.app-topbar time,
.app-topbar summary {
    align-items: center;
    display: flex;
    gap: var(--space-xs);
}

.app-topbar details {
    position: relative;
}

.app-topbar summary {
    cursor: pointer;
    list-style: none;
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
    justify-content: center;
    position: relative;
}

.app-topbar summary .sprite-icon {
    font-size: 1.5rem;
}

.app-topbar summary .notification-count {
    align-items: center;
    background: var(--color-danger-700);
    border: 2px solid var(--color-neutral-50);
    border-radius: 50%;
    color: var(--color-neutral-50);
    display: flex;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    block-size: 1.5rem;
    box-sizing: border-box;
    inline-size: 1.5rem;
    justify-content: center;
    line-height: 1;
    min-block-size: 1.5rem;
    position: absolute;
    inset-block-start: -0.25rem;
    inset-inline-end: -0.25rem;
}

.app-topbar summary .user-avatar {
    align-items: center;
    background: var(--color-neutral-200);
    border-radius: 50%;
    display: flex;
    font-weight: var(--font-weight-bold);
    inline-size: 2.5rem;
    justify-content: center;
    min-block-size: 2.5rem;
}

.app-topbar details > div {
    background: var(--color-neutral-50);
    border: var(--border-width) solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    box-shadow: 0 0.75rem 2rem rgb(26 28 28 / 16%);
    inset-block-start: calc(100% + var(--space-xs));
    inset-inline-end: 0;
    min-inline-size: 15rem;
    padding: var(--space-md);
    position: absolute;
    z-index: 20;
}

.app-topbar details > div h2,
.app-topbar details > div p {
    margin-block: 0 var(--space-xs);
}

.app-topbar details > div a,
.app-topbar details > div button {
    display: block;
    font: inherit;
    margin-block-start: var(--space-xs);
}

.app-topbar details > div form {
    border-block-start: var(--border-width) solid var(--color-neutral-200);
    margin-block-start: var(--space-sm);
    padding-block-start: var(--space-sm);
}

.app-content {
    padding: clamp(var(--space-md), 3vw, var(--space-2xl));
}

.app-sidebar > .app-version {
    color: var(--color-neutral-200);
    font-size: var(--font-size-xs);
    padding: 0 var(--space-lg) var(--space-lg);
    text-align: center;
}

.app-mobile-more .app-version {
    color: var(--color-neutral-500);
    display: block;
    font-size: var(--font-size-xs);
    padding: var(--space-sm);
}

.app-mobile-brand,
.app-mobile-nav {
    display: none;
}

.app-topbar > .app-mobile-location {
    display: none;
}

.app-sidebar :focus-visible,
.app-topbar :focus-visible,
.app-location :focus-visible {
    outline: var(--color-focus) var(--focus-ring-style) var(--focus-ring-width);
}

@media (max-width: 60rem) {
    .app-shell {
        display: block;
    }

    .app-sidebar {
        display: none;
    }

    .app-main {
        margin-inline-start: 0;
        padding-block-end: calc(4.5rem + env(safe-area-inset-bottom));
    }

    .app-topbar {
        flex-wrap: wrap;
        position: relative;
    }

    .app-topbar > p,
    .app-topbar time {
        display: none;
    }

    .app-mobile-brand {
        display: flex;
        min-inline-size: 0;
        max-inline-size: 11rem;
    }

    .app-mobile-brand img {
        display: block;
        inline-size: 100%;
    }

    .app-mobile-nav {
        align-items: stretch;
        background: var(--color-neutral-50);
        border-block-start: var(--border-width) solid var(--color-neutral-200);
        bottom: 0;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        inline-size: 100%;
        padding-block-end: env(safe-area-inset-bottom);
        position: fixed;
        z-index: 12;
    }

    .app-mobile-nav > a,
    .app-mobile-more > summary {
        align-items: center;
        color: var(--color-neutral-700);
        display: flex;
        flex-direction: column;
        font-size: var(--font-size-xs);
        gap: var(--space-2xs);
        justify-content: center;
        line-height: 1.2;
        min-block-size: 4.5rem;
        min-inline-size: 0;
        overflow-wrap: anywhere;
        padding: var(--space-2xs);
        text-align: center;
        text-decoration: none;
    }

    .app-mobile-nav .sprite-icon {
        font-size: 1.5rem;
    }

    .app-mobile-nav [aria-current="page"],
    .app-mobile-more > summary.is-active {
        color: var(--color-primary-700);
    }

    .app-mobile-more {
        min-inline-size: 0;
    }

    .app-mobile-more > summary {
        cursor: pointer;
        list-style: none;
    }

    .app-mobile-more > summary::-webkit-details-marker {
        display: none;
    }

    .app-mobile-more > div {
        background: var(--color-neutral-50);
        border: var(--border-width) solid var(--color-neutral-200);
        border-radius: var(--radius-md);
        bottom: calc(100% + var(--space-xs));
        box-shadow: 0 0.75rem 2rem rgb(26 28 28 / 16%);
        display: grid;
        inset-inline-end: var(--space-xs);
        max-block-size: calc(100dvh - 6rem);
        min-inline-size: min(17rem, calc(100vw - 2 * var(--space-md)));
        overflow-y: auto;
        padding: var(--space-xs);
        position: absolute;
    }

    .app-mobile-more:not([open]) > div {
        display: none;
    }

    .app-mobile-more > div a {
        border-radius: var(--radius-sm);
        color: var(--color-neutral-900);
        min-block-size: 2.75rem;
        padding: var(--space-sm);
        text-decoration: none;
    }

    .app-mobile-more-location {
        border-block-end: var(--border-width) solid var(--color-neutral-200);
        margin-block-end: var(--space-xs);
        padding-block-end: var(--space-xs);
    }

    .app-mobile-more-location .app-location {
        border: 0;
        margin: 0;
    }

    .app-mobile-more-location .app-location small {
        color: var(--color-neutral-600);
    }

    .app-mobile-more-location .app-location > div {
        inset-block: auto 100%;
        inset-inline: 0;
        min-inline-size: min(17rem, calc(100vw - 2 * var(--space-md)));
    }

    .app-mobile-more > div a:hover,
    .app-mobile-more > div a[aria-current="page"] {
        background: var(--color-neutral-100);
    }

    .app-mobile-nav :focus-visible {
        outline: var(--color-focus) var(--focus-ring-style) var(--focus-ring-width);
        outline-offset: -3px;
    }
}

@media (max-width: 40rem) {
    .app-topbar > div {
        gap: var(--space-sm);
    }

    .app-content {
        padding: var(--space-sm);
    }
}

@layer donplano.project {
    .admin-shell {
        background: var(--color-neutral-100);
        color: var(--color-foreground);
        display: flex;
        min-block-size: 100vh;
    }

    .admin-sidebar {
        background: var(--color-neutral-950);
        color: var(--color-neutral-50);
        display: flex;
        flex: 0 0 15.5rem;
        flex-direction: column;
        min-block-size: 100vh;
        padding: var(--space-md);
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 10;
    }

    .admin-brand {
        align-items: center;
        color: inherit;
        display: flex;
        gap: var(--space-sm);
        margin-block-end: var(--space-2xl);
        text-decoration: none;
    }

    .admin-brand img { inline-size: 7.25rem; }
    .admin-brand span { border-inline-start: 1px solid var(--color-neutral-600); color: var(--color-neutral-300); padding-inline-start: var(--space-sm); }
    .admin-nav-label { color: var(--color-neutral-400); font-size: var(--font-size-xs); letter-spacing: .08em; text-transform: uppercase; }
    .admin-nav-label { margin: 0 var(--space-sm) var(--space-xs); }
    .admin-sidebar nav { display: grid; gap: var(--space-2xs); }
    .admin-nav-divider { border-block-start: 1px solid var(--color-neutral-800); margin-block: var(--space-md) var(--space-xs); }
    .admin-nav-link { align-items: center; background: transparent; border: 0; border-radius: var(--radius-md); color: var(--color-neutral-300); display: flex; font: inherit; gap: var(--space-sm); inline-size: 100%; min-block-size: 2.75rem; padding: var(--space-xs) var(--space-sm); text-align: start; text-decoration: none; }
    .admin-nav-link:hover, .admin-nav-link:focus-visible { background: var(--color-neutral-800); color: var(--color-neutral-50); }
    .admin-nav-link.is-active { background: var(--color-primary-700); color: var(--color-neutral-50); }
    .admin-nav-link .sprite-icon { font-size: 1.25rem; }
    .admin-sidebar__footer { color: var(--color-neutral-400); font-size: var(--font-size-xs); margin-block-start: auto; }
    .admin-sidebar__footer form { margin-block-start: var(--space-sm); }
    .admin-sidebar__footer button { cursor: pointer; }

    .admin-main { flex: 1; margin-inline-start: 15.5rem; min-inline-size: 0; }
    .admin-topbar { align-items: center; background: var(--color-neutral-50); border-block-end: 1px solid var(--color-neutral-200); display: flex; justify-content: space-between; min-block-size: 4.5rem; padding: var(--space-sm) clamp(var(--space-md), 4vw, var(--space-2xl)); position: sticky; inset-block-start: 0; z-index: 5; }
    .admin-topbar__context { color: var(--color-foreground-muted); font-size: var(--font-size-sm); }
    .admin-topbar__context span { color: var(--color-neutral-400); padding-inline: var(--space-xs); }
    .admin-topbar__actions { margin-inline-start: auto; }
    .admin-avatar-menu > button { background: transparent; border: 0; border-radius: 50%; cursor: pointer; padding: 0; }
    .admin-avatar-menu [popover] { min-inline-size: 11rem; }
    .admin-avatar-menu a, .admin-avatar-menu button { border-radius: var(--radius-sm); justify-content: flex-start; }
    .admin-avatar-menu form { inline-size: 100%; margin: 0; }
    .admin-avatar-menu .sprite-icon { color: var(--color-foreground-muted); }
    .admin-avatar { align-items: center; background: var(--color-primary-100); border-radius: 50%; color: var(--color-primary-800); display: inline-flex; font-weight: var(--font-weight-bold); inline-size: 2.25rem; justify-content: center; min-block-size: 2.25rem; }
    .admin-menu-toggle { display: none; }
    .admin-content { margin-inline: auto; max-inline-size: 94rem; padding: clamp(var(--space-lg), 4vw, var(--space-2xl)); }

    .admin-page { display: grid; gap: var(--space-xl); }
    .admin-dashboard-links { display: grid; gap: var(--space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-dashboard-links a { align-items: center; display: flex; gap: var(--space-md); text-decoration: none; }
    .admin-dashboard-links a > span { display: grid; flex: 1; gap: var(--space-2xs); }
    .admin-dashboard-links a > span small { color: var(--color-foreground-muted); }
    .admin-panel__header { align-items: start; display: flex; gap: var(--space-md); justify-content: space-between; }
    .admin-panel__header h2, .admin-panel__header p { margin-block: 0; }
    .admin-button { align-items: center; border: 1px solid transparent; border-radius: var(--radius-md); display: inline-flex; gap: var(--space-xs); min-block-size: var(--control-target-size); padding-inline: var(--space-md); text-decoration: none; }
    .admin-button--primary { background: var(--color-primary-700); color: var(--color-neutral-50); }
    .admin-button--primary:hover { background: var(--color-primary-800); color: var(--color-neutral-50); }

    .admin-stat-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .admin-stat-card { align-items: center; background: var(--color-neutral-50); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); color: inherit; display: flex; gap: var(--space-sm); min-block-size: 7rem; padding: var(--space-md); text-decoration: none; }
    .admin-stat-card:hover { border-color: var(--color-primary-400); box-shadow: 0 .5rem 1.5rem rgb(26 28 28 / 7%); }
    .admin-stat-card__icon, .admin-task-list__icon { align-items: center; border-radius: var(--radius-md); display: inline-flex; flex: none; justify-content: center; }
    .admin-stat-card__icon { block-size: 2.75rem; inline-size: 2.75rem; }
    .admin-stat-card__icon--accent, .admin-task-list__icon--accent { background: var(--color-primary-100); color: var(--color-primary-700); }
    .admin-stat-card__icon--warning, .admin-task-list__icon--warning { background: var(--color-warning-100); color: var(--color-warning-800); }
    .admin-stat-card__icon--sage { background: var(--color-sage-100); color: var(--color-sage-800); }
    .admin-stat-card__icon--neutral { background: var(--color-neutral-200); color: var(--color-neutral-700); }
    .admin-stat-card strong { display: block; font-size: var(--font-size-2xl); line-height: 1; }
    .admin-stat-card small, .admin-task-list small, .admin-quick-links small { color: var(--color-foreground-muted); display: block; font-size: var(--font-size-sm); margin-block-start: var(--space-2xs); }
    .admin-stat-card__arrow { color: var(--color-neutral-500); margin-inline-start: auto; }

    .admin-dashboard__grid { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); }
    .admin-panel { background: var(--color-neutral-50); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); min-inline-size: 0; padding: var(--space-lg); }
    .admin-panel--attention { border-block-start: .25rem solid var(--color-primary-700); }
    .admin-panel h2 { font-size: var(--font-size-lg); }
    .admin-panel__count { align-items: center; background: var(--color-primary-100); border-radius: 999px; color: var(--color-primary-800); display: inline-flex; font-weight: var(--font-weight-bold); min-block-size: 1.75rem; min-inline-size: 1.75rem; justify-content: center; }
    .admin-task-list, .admin-quick-links { list-style: none; margin: var(--space-lg) 0 0; padding: 0; }
    .admin-task-list { display: grid; gap: var(--space-xs); }
    .admin-task-list li { align-items: center; border-block-start: 1px solid var(--color-neutral-200); display: flex; gap: var(--space-sm); padding-block: var(--space-sm); }
    .admin-task-list__icon { block-size: 2rem; inline-size: 2rem; }
    .admin-task-list li > span:nth-child(2) { min-inline-size: 0; }
    .admin-task-list li a { font-weight: var(--font-weight-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .admin-status { border-radius: 999px; display: inline-block; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); padding: .2rem .5rem; white-space: nowrap; }
    .admin-task-list .admin-status { margin-inline-start: auto; }
    .admin-status--new, .admin-status--qualified { background: var(--color-primary-100); color: var(--color-primary-800); }
    .admin-status--warning, .admin-status--contacted { background: var(--color-warning-100); color: var(--color-warning-800); }
    .admin-status--accepted, .admin-status--confirmed { background: var(--color-success-100); color: var(--color-success-800); }
    .admin-status--rejected, .admin-status--failed { background: var(--color-danger-100); color: var(--color-danger-800); }
    .admin-empty { align-items: center; color: var(--color-foreground-muted); display: flex; gap: var(--space-sm); margin: var(--space-lg) 0 0; }
    .admin-empty__icon { color: var(--color-success); }
    .admin-quick-links { display: grid; gap: var(--space-xs); }
    .admin-quick-links a { align-items: center; border-block-start: 1px solid var(--color-neutral-200); display: flex; gap: var(--space-sm); padding-block: var(--space-sm); text-decoration: none; }
    .admin-quick-links a > span:first-child { color: var(--color-primary-700); }
    .admin-quick-links a > span:nth-child(2) { flex: 1; }
    .admin-quick-links a > .sprite-icon { color: var(--color-neutral-500); }
    .admin-table-wrap { overflow-x: auto; }
    .admin-table { border-collapse: collapse; inline-size: 100%; margin-block-start: var(--space-lg); min-inline-size: 36rem; }
    .admin-table :is(th, td) { border-block-start: 1px solid var(--color-neutral-200); padding: var(--space-sm); text-align: start; vertical-align: middle; }
    .admin-table thead th { color: var(--color-foreground-muted); font-size: var(--font-size-xs); letter-spacing: .04em; text-transform: uppercase; }
    .admin-table tbody th { font-weight: var(--font-weight-bold); }
    .admin-form-grid { align-items: end; display: grid; gap: var(--space-sm); grid-template-columns: auto minmax(12rem, 24rem) auto; margin-block-start: var(--space-md); }
    .admin-form-grid label { font-weight: var(--font-weight-bold); }
    .admin-row-actions { position: relative; }
    .admin-row-actions summary { color: var(--color-primary-700); cursor: pointer; font-weight: var(--font-weight-bold); }
    .admin-row-actions > div { background: var(--color-neutral-50); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); box-shadow: 0 .5rem 1.5rem rgb(26 28 28 / 12%); display: grid; gap: var(--space-sm); min-inline-size: 15rem; padding: var(--space-sm); position: absolute; inset-inline-end: 0; z-index: 3; }
    .admin-row-actions form { display: flex; gap: var(--space-xs); }
    .admin-row-actions input { min-inline-size: 0; }
    .admin-danger-action { color: var(--color-danger-700); }
    .admin-two-column { align-items: start; display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); }
    .admin-inline-form, .admin-filter-form { align-items: end; display: flex; flex-wrap: wrap; gap: var(--space-sm); }
    .admin-inline-form > .admin-field, .admin-filter-form > .admin-field { flex: 1 1 12rem; }
    .admin-field { display: grid; gap: var(--space-2xs); }
    .admin-field label { font-weight: var(--font-weight-bold); }
    .admin-notice { border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); }
    .admin-notice--success { background: var(--color-success-100); color: var(--color-success-800); }
    .admin-notice--error { background: var(--color-danger-100); color: var(--color-danger-800); }
    .admin-shell alto-dropdown { position: relative; }
    .admin-shell alto-dropdown > button, .admin-icon-button { align-items: center; background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--color-foreground-muted); cursor: pointer; display: inline-flex; justify-content: center; min-block-size: var(--control-target-size); min-inline-size: var(--control-target-size); padding: var(--space-xs); }
    .admin-shell alto-dropdown > button:hover, .admin-shell alto-dropdown > button:focus-visible, .admin-icon-button:hover, .admin-icon-button:focus-visible { background: var(--color-neutral-100); color: var(--color-primary-700); }
    .admin-shell alto-dropdown [popover]:popover-open { display: grid; gap: var(--space-2xs); list-style: none; min-inline-size: 12rem; padding: var(--space-2xs); }
    .admin-shell alto-dropdown [popover][data-alto-dropdown-fallback]:not([hidden]) { display: grid; gap: var(--space-2xs); list-style: none; min-inline-size: 12rem; padding: var(--space-2xs); }
    .admin-shell alto-dropdown [popover] form { align-items: end; display: flex; flex-wrap: wrap; gap: var(--space-2xs); padding: var(--space-2xs); }
    .admin-shell alto-dropdown [popover] form label { flex-basis: 100%; }
    .admin-shell alto-dropdown [popover] form input, .admin-shell alto-dropdown [popover] form select { flex: 1 1 8rem; min-inline-size: 0; }
    .admin-shell alto-dropdown [popover] a, .admin-shell alto-dropdown [popover] button { align-items: center; background: transparent; border: 0; color: var(--color-foreground); display: flex; font: inherit; gap: var(--space-xs); inline-size: 100%; min-block-size: 2.25rem; padding: var(--space-2xs) var(--space-xs); text-align: start; text-decoration: none; }
    .admin-shell alto-dropdown [popover] a:hover, .admin-shell alto-dropdown [popover] button:hover { background: var(--color-neutral-100); color: var(--color-primary-700); }
    .admin-pilot-list { display: grid; gap: var(--space-xs); list-style: none; margin: var(--space-lg) 0 0; padding: 0; }
    .admin-pilot-list li { align-items: center; border-block-start: 1px solid var(--color-neutral-200); display: flex; gap: var(--space-sm); padding-block: var(--space-sm); }
    .admin-pilot-list a { display: grid; flex: 1; gap: var(--space-2xs); min-inline-size: 0; text-decoration: none; }
    .admin-pilot-list a span, .admin-table small { color: var(--color-foreground-muted); display: block; font-size: var(--font-size-sm); }
    .admin-table th small { font-weight: var(--font-weight-normal); margin-block-start: var(--space-2xs); }
    .admin-stack-form { display: grid; gap: var(--space-sm); max-inline-size: 32rem; }
    .admin-stack-form button { justify-self: start; }

    @media (max-width: 62rem) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 48rem) {
        .admin-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
        .admin-shell.is-menu-open .admin-sidebar { box-shadow: 1rem 0 2rem rgb(0 0 0 / 18%); transform: translateX(0); }
        .admin-main { margin-inline-start: 0; }
        .admin-menu-toggle { background: transparent; border: 0; color: var(--color-foreground); display: inline-flex; min-block-size: var(--control-target-size); min-inline-size: var(--control-target-size); padding: var(--space-xs); }
        .admin-topbar { justify-content: start; }
        .admin-topbar__actions { margin-inline-start: auto; }
        .admin-content { padding: var(--space-md); }
        .page-intro { align-items: stretch; flex-direction: column; }
        .admin-button { justify-content: center; }
        .admin-form-grid { align-items: stretch; grid-template-columns: 1fr; }
        .admin-two-column { grid-template-columns: 1fr; }
        .admin-dashboard-links { grid-template-columns: 1fr; }
        .admin-dashboard__grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 32rem) { .metric-grid { grid-template-columns: 1fr; } .admin-panel { padding: var(--space-md); } }
    @media (prefers-reduced-motion: reduce) { .admin-sidebar { transition: none; } }
}

@layer donplano.project {
    .page-intro {
        align-items: start;
        display: flex;
        gap: var(--space-md);
        justify-content: space-between;
    }

    .page-intro :is(h1, p) {
        margin-block: 0;
    }

    .page-intro > div:first-child {
        display: grid;
        gap: var(--space-2xs);
    }

    .page-intro h1 {
        font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
        letter-spacing: -.03em;
    }

    .page-intro__description {
        color: var(--color-foreground-muted);
    }

    .eyebrow {
        color: var(--color-primary-700);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    @media (max-width: 48rem) {
        .page-intro {
            align-items: stretch;
            flex-direction: column;
        }
    }
}

@layer donplano.project {
    .metric-grid {
        display: grid;
        gap: var(--space-md);
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .metric-card {
        align-items: center;
        background: var(--color-neutral-50);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-lg);
        box-shadow: 0 .5rem 1.5rem rgb(26 28 28 / 5%);
        display: grid;
        gap: var(--space-md);
        grid-template-columns: auto minmax(0, 1fr) auto;
        min-block-size: 9rem;
        overflow: hidden;
        padding: var(--space-lg);
        position: relative;
        transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    .metric-card::before {
        background: var(--color-primary-600);
        content: '';
        inset-block: 0;
        inset-inline-start: 0;
        position: absolute;
        width: .25rem;
    }

    .metric-card:hover {
        border-color: var(--color-primary-300);
        box-shadow: 0 .75rem 2rem rgb(26 28 28 / 10%);
        transform: translateY(-.125rem);
    }

    .metric-card > div { display: grid; gap: var(--space-xs); min-inline-size: 0; }
    .metric-card strong { color: var(--color-foreground); font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-4xl)); font-weight: var(--font-weight-bold); letter-spacing: -.04em; line-height: 1; order: 2; }
    .metric-card__label { color: var(--color-foreground-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: .08em; line-height: 1.2; order: 1; text-transform: uppercase; }
    .metric-card > a { align-items: center; align-self: end; border: 1px solid var(--color-neutral-200); border-radius: 50%; color: var(--color-foreground-muted); display: inline-flex; justify-content: center; min-block-size: 2.25rem; min-inline-size: 2.25rem; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
    .metric-card > a:hover, .metric-card > a:focus-visible { background: var(--color-primary-700); border-color: var(--color-primary-700); color: var(--color-neutral-50); }
    .metric-card__icon { align-items: center; background: var(--color-primary-100); border-radius: var(--radius-md); color: var(--color-primary-700); display: inline-flex; flex: none; justify-content: center; min-block-size: 3rem; min-inline-size: 3rem; }
    .metric-card--pilots::before { background: var(--color-warning-600); }
    .metric-card--pilots .metric-card__icon { background: var(--color-warning-100); color: var(--color-warning-800); }
    .metric-card--newsletter::before { background: var(--color-sage-600); }
    .metric-card--newsletter .metric-card__icon { background: var(--color-sage-100); color: var(--color-sage-800); }
    .metric-card--skeleton { align-content: center; background: linear-gradient(135deg, var(--color-neutral-50), var(--color-neutral-100)); display: grid; gap: var(--space-sm); grid-template-columns: 1fr; }
    .metric-card--skeleton:hover { border-color: var(--color-neutral-200); box-shadow: 0 .5rem 1.5rem rgb(26 28 28 / 5%); transform: none; }
    .metric-card--skeleton::before { background: var(--color-neutral-300); }
    .skeleton-line { background: var(--color-neutral-200); border-radius: 999px; display: block; inline-size: 70%; min-block-size: .8rem; }
    .skeleton-line--short { inline-size: 38%; min-block-size: 1.8rem; }
    .skeleton-line--tiny { inline-size: 52%; }

    @media (prefers-reduced-motion: reduce) {
        .metric-card, .metric-card > a { transition: none; }
    }
}

@layer donplano.project {
    .public-shell {
        min-block-size: 100dvh;
    }

    .public-header {
        align-items: center;
        background: var(--color-neutral-700);
        border-block-end: var(--border-width) solid var(--color-neutral-600);
        color: var(--color-neutral-50);
        display: flex;
        gap: var(--space-md);
        justify-content: space-between;
        min-block-size: 4.5rem;
        padding-block: var(--space-sm);
        padding-inline: clamp(var(--space-md), 4vw, var(--space-2xl));
    }

    .public-brand img {
        display: block;
        inline-size: min(100%, 12rem);
    }

    .public-header nav {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-md);
        justify-content: flex-end;
    }

    .public-header nav p {
        margin: 0;
    }

    .public-header nav a {
        color: var(--color-neutral-50);
    }

    .public-header nav form {
        margin: 0;
    }

    .public-header nav button {
        font: inherit;
        min-block-size: 2.75rem;
    }

    .public-header :focus-visible {
        outline: var(--color-focus) var(--focus-ring-style) var(--focus-ring-width);
    }

    @media (max-width: 40rem) {
        .public-header {
            align-items: flex-start;
            flex-direction: column;
            gap: var(--space-xs);
            padding-inline: var(--space-md);
        }

        .public-header nav {
            justify-content: flex-start;
            inline-size: 100%;
        }
    }
}

@layer donplano.project {
    .auth-page {
        background: var(--color-neutral-950);
        color: var(--color-foreground);
        font-family: var(--font-family-primary);
    }

    .logo {
        align-items: center;
        display: inline-flex;
        gap: var(--space-xs);
        inset-block-start: var(--space-lg);
        inset-inline-start: var(--space-lg);
        position: absolute;
    }

    .logo span {
        color: var(--color-neutral-400);
        font-size: var(--font-size-sm);
        font-weight: 600;
        white-space: nowrap;
    }

    .auth-page main {
        align-items: center;
        display: grid;
        min-block-size: 100dvh;
        padding: var(--space-lg);
        place-items: center;
    }

    .logo img {
        display: block;
        /* filter: brightness(0) invert(1); */
        width: 100%;
        height: 2rlh;
    }

    @media (max-width: 40rem) {
        .auth-page main {
            align-items: start;
            padding-block: 7rem var(--space-md);
            padding-inline: var(--space-md);
        }

        .logo {
            inset-block-start: var(--space-md);
            inset-inline-start: 50%;
            transform: translateX(-50%);
        }
    }
}

@layer donplano.project {
    .surface-primary {
        --color-background: var(--color-primary-700);
        --color-foreground: var(--color-primary-50);
        --color-foreground-muted: var(--color-primary-50);
        --color-link: var(--color-primary-50);
        --color-link-hover: var(--color-primary-100);
        --color-border: var(--color-neutral-700);
        --color-focus: var(--color-neutral-700);
        --color-control-icon: var(--color-primary-50);
        --color-accent: var(--color-neutral-700);
        --color-accent-hover: var(--color-neutral-800);
        --color-accent-active: var(--color-neutral-900);
        --color-on-accent: var(--color-primary-50);
    }

    .surface-primary :where(button.primary, .button.primary) {
        --color: var(--color-on-accent);
        --color-hover: var(--color-on-accent);
        --color-active: var(--color-on-accent);
    }

    .surface-neutral {
        --color-background: var(--color-neutral-900);
        --color-foreground: var(--color-neutral-50);
        --color-foreground-muted: var(--color-neutral-400);
        --color-link: var(--color-neutral-50);
        --color-link-hover: var(--color-neutral-200);
        --color-border: var(--color-neutral-800);
        --color-focus: var(--color-primary-700);
        --color-control-icon: var(--color-neutral-50);
        --color-accent: var(--color-primary-700);
        --color-accent-hover: var(--color-primary-800);
        --color-accent-active: var(--color-primary-900);
        --color-on-accent: var(--color-neutral-50);
    }

    .surface-neutral :where(button.primary, .button.primary) {
        --color: var(--color-on-accent);
        --color-hover: var(--color-on-accent);
        --color-active: var(--color-on-accent);
    }
}

@layer donplano.project {
    .auth-page section {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: 0 1.5rem 3rem rgb(41 41 41 / 12%);
        inline-size: min(100%, 28rem);
        padding: clamp(var(--space-md), 4vw, var(--space-xl));
    }

    .auth-page header {
        display: grid;
        gap: var(--space-sm);
        text-align: center;
    }

    .auth-page header h1 {
        font-size: var(--font-size-xl);
        margin-block: 0;
    }

    .auth-page header p {
        margin-block: 0;
    }

    .auth-page form {
        --gap: var(--space-md);

        margin-block-start: var(--space-xl);
    }

    .auth-page form > [role="alert"] {
        background: var(--color-primary-100);
        border: var(--border-width) solid var(--color-danger);
        border-radius: var(--radius-sm);
        color: var(--color-primary-900);
        margin: 0;
        padding-block: var(--space-sm);
        padding-inline: var(--space-md);
    }

    .field {
        gap: var(--space-2xs);
    }

    .field label {
        font-weight: var(--font-weight-bold);
    }

    .actions {
        align-items: center;
        display: flex;
        gap: var(--space-md);
        justify-content: space-between;
        margin-block-start: var(--space-xs);
    }

    .actions button {
        flex: 0 0 auto;
    }

    .auth-page form[action="/login"] .actions {
        flex-wrap: wrap;
    }

    .auth-page form[action="/login"] .actions button {
        block-size: var(--control-target-size);
        padding-block: 0;
    }

    .auth-page .check-row {
        align-items: start;
        display: flex;
        gap: var(--space-xs);
    }

    .auth-page .check-row input {
        flex: 0 0 auto;
        margin-block-start: 0.2em;
    }

    .auth-page form[action="/login/reset"] > button {
        inline-size: 100%;
    }

    .auth-page section > p {
        margin-block: var(--space-lg) 0;
        text-align: center;
    }

    .auth-page .back-link {
        --color: var(--color-primary-400);
        --color-hover: var(--color-primary-500);
        --decoration: none;
        --decoration-hover: underline;
        font-weight: var(--font-weight-bold);
    }

    .auth-page section > p a:not(.button) {
        --decoration: none;
        --decoration-hover: underline;
    }

    .auth-page form > p[role="alert"] {
        background: var(--color-primary-100);
        border: var(--border-width) solid var(--color-danger);
        border-radius: var(--radius-sm);
        color: var(--color-primary-900);
        padding-block: var(--space-sm);
        padding-inline: var(--space-md);
    }

    @media (max-width: 40rem) {
        .auth-page section {
            margin-block: var(--space-md);
        }
    }
}

@layer donplano.project {
    .password-reveal {
        align-items: center;
        display: grid;
        gap: var(--space-xs);
        grid-template-columns: minmax(0, 1fr) auto;
        min-inline-size: 0;
    }

    .password-reveal > input,
    .password-reveal > .input-element {
        min-inline-size: 0;
    }

    .password-reveal > .password-reveal-button {
        --color: var(--color-control-icon);
        --color-hover: var(--color-control-icon);
        --color-active: var(--color-control-icon);

        background: transparent;
        border: 0;
        color: var(--color-control-icon);
        cursor: pointer;
        inline-size: auto;
        min-block-size: var(--control-target-size);
        min-inline-size: 0;
        padding-block: 0;
        padding-inline: var(--space-xs);
    }

    .auth-page .input.password-reveal {
        gap: 0;
    }

    .auth-page .password-reveal-button svg {
        block-size: 1.25em;
        display: block;
        inline-size: 1.25em;
        fill: currentColor;
    }

    .password-reveal > .password-reveal-button:focus-visible {
        outline: var(--color-focus) var(--focus-ring-style) var(--focus-ring-width);
        outline-offset: 0;
    }
}

.forecast-chart {
    background: var(--color-background);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    display: grid;
    gap: var(--space-md);
    padding: var(--space-lg);
}

.forecast-chart__header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: space-between;
}

.forecast-chart__header h2,
.forecast-chart__header p {
    margin: 0;
}

.forecast-chart__header p {
    color: var(--color-foreground-muted);
    margin-block-start: var(--space-xs);
}

.forecast-chart__controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.forecast-chart__controls button.primary:disabled {
    --background-color: var(--color-accent);
    --border-color: var(--color-accent);
    --color: white;

    cursor: default;
}

.forecast-plot {
    block-size: clamp(16rem, 34vw, 24rem);
    min-inline-size: 0;
    position: relative;
}

.forecast-plot canvas {
    display: block;
    max-inline-size: 100%;
}

.forecast-plot [data-chart-status] {
    background: var(--color-background);
    border-radius: var(--radius-sm);
    inset-block-start: 50%;
    inset-inline-start: 50%;
    padding: var(--space-sm);
    position: absolute;
    transform: translate(-50%, -50%);
}

.forecast-plot [data-state="error"] {
    color: var(--color-danger);
}

.forecast-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.forecast-legend li {
    align-items: center;
    display: inline-flex;
    gap: var(--space-xs);
}

.forecast-overview .forecast-plot,
.forecast-overview .forecast-legend {
    display: none;
}

.has-forecast-chart-js .forecast-overview .forecast-plot {
    display: block;
}

.has-forecast-chart-js .forecast-overview .forecast-legend {
    display: flex;
}

.forecast-key {
    background: var(--color-danger);
    block-size: 0.2rem;
    inline-size: 1.25rem;
}

.forecast-key.is-range {
    background: var(--color-danger-100);
    block-size: 0.7rem;
}

.forecast-key.is-previous {
    background: repeating-linear-gradient(90deg, var(--color-sage-700) 0 0.12rem, transparent 0.12rem 0.28rem);
}

.forecast-note {
    color: var(--color-foreground-muted);
    font-size: var(--font-size-sm);
}

.forecast-table-wrap {
    max-inline-size: 100%;
    overflow-x: auto;
}

.forecast-table-wrap table {
    inline-size: 100%;
    min-inline-size: 36rem;
}

.forecast-table-wrap th,
.forecast-table-wrap td {
    border-block-end: 1px solid var(--color-border);
    padding: var(--space-sm);
    text-align: start;
    vertical-align: top;
}

@media (max-width: 40rem) {
    .forecast-chart {
        padding: var(--space-md);
    }

    .forecast-plot {
        block-size: 18rem;
    }
}

@layer donplano.project {
    .sprite-icon {
        block-size: 1em;
        fill: currentColor;
        font-size: 1.25rem;
        flex: none;
        inline-size: 1em;
        vertical-align: middle;
    }
}

.app-main:has(.dashboard-page) {
    background: var(--color-neutral-100);
}

.dashboard-page {
    display: grid;
    gap: var(--space-lg);
}

.dashboard-panel,
.dashboard-forecast {
    background: var(--color-neutral-50);
    border: var(--border-width) solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    min-inline-size: 0;
}

.dashboard-panel {
    padding: var(--space-md);
}

.dashboard-page h2 {
    font-size: var(--font-size-lg);
    margin-block: 0 var(--space-sm);
}

.dashboard-intro {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    justify-content: space-between;
    padding-block-end: var(--space-md);
}

.dashboard-intro h2,
.dashboard-intro p {
    margin: 0;
}

.dashboard-intro p {
    font-size: var(--font-size-sm);
    margin-block-start: var(--space-2xs);
}

.dashboard-intro .button {
    gap: var(--space-xs);
}

.dashboard-status-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-status-grid .dashboard-panel {
    align-content: start;
}

.dashboard-status-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.dashboard-status-card h2,
.dashboard-status-card p {
    margin: 0;
}

.dashboard-status-card h2 {
    font-size: var(--font-size-sm);
}

.dashboard-status-card .dashboard-status-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.dashboard-status-card--skeleton {
    gap: var(--space-sm);
}

.dashboard-skeleton {
    background: var(--color-neutral-200);
    border-radius: var(--radius-sm);
    display: block;
}

.dashboard-skeleton--heading {
    block-size: 1rem;
    inline-size: 45%;
}

.dashboard-skeleton--value {
    block-size: 1.75rem;
    inline-size: 75%;
}

.dashboard-skeleton--text {
    block-size: .875rem;
    inline-size: 90%;
}

.dashboard-muted {
    color: var(--color-foreground-muted);
}

.dashboard-notice {
    border-inline-start: 0.25rem solid var(--color-border);
    margin-block: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
}

.dashboard-notice--error {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.dashboard-table-scroll {
    margin-inline: calc(-1 * var(--space-md));
    overflow-x: auto;
}

.dashboard-production-table {
    border-collapse: collapse;
    min-inline-size: 42rem;
    text-align: start;
    width: 100%;
}

.dashboard-production-table th,
.dashboard-production-table td {
    border-block-end: var(--border-width) solid var(--color-neutral-200);
    padding: var(--space-sm);
    text-align: start;
    vertical-align: middle;
}

.dashboard-production-table :is(th, td):first-child {
    padding-inline-start: var(--space-md);
}

.dashboard-production-table :is(th, td):last-child {
    padding-inline-end: var(--space-md);
}

.dashboard-decision > p:last-child {
    font-size: var(--font-size-sm);
    margin-block: var(--space-sm) 0;
}

.dashboard-production-table thead th {
    color: var(--color-foreground-muted);
    font-size: var(--font-size-sm);
}

.dashboard-production-table :is(th, td):nth-child(n + 2) {
    text-align: center;
}

.dashboard-production-table tbody th {
    font-weight: var(--font-weight-bold);
}

.dashboard-recommendation-value {
    font-size: var(--font-size-xl);
    white-space: nowrap;
}

.dashboard-recommendation-value small {
    font-size: var(--font-size-sm);
}

.dashboard-forecast {
    background: transparent;
    border: 0;
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
}

.dashboard-forecast .forecast-chart {
    min-inline-size: 0;
}

.dashboard-important-notices {
    align-content: start;
    display: grid;
    gap: var(--space-md);
}

.dashboard-important-notices .dashboard-intro {
    padding-block-end: 0;
}

.dashboard-notice-skeleton {
    display: grid;
    gap: var(--space-sm);
}

.dashboard-notice-skeleton .dashboard-skeleton--heading {
    inline-size: 65%;
}

.dashboard-notice-skeleton .dashboard-skeleton--text {
    inline-size: 90%;
}

@media (max-width: 70rem) {
    .dashboard-forecast {
        background: transparent;
        border: 0;
        grid-template-columns: 1fr;
    }

    .dashboard-forecast .forecast-chart {
        padding: var(--space-md);
    }
}

@media (min-width: 70.01rem) {
    .dashboard-forecast .forecast-chart,
    .dashboard-important-notices {
        background: var(--color-neutral-50);
        border: var(--border-width) solid var(--color-neutral-200);
        border-radius: var(--radius-md);
    }
}

.dashboard-forecast .forecast-chart {
    padding: var(--space-md);
}

@media (max-width: 40rem) {
    .dashboard-important-notices {
        padding: var(--space-md);
    }
}

@media (max-width: 60rem) {
    .dashboard-status-grid {
        grid-auto-columns: minmax(17rem, 82vw);
        grid-auto-flow: column;
        grid-template-columns: none;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        margin-block-end: calc(-1 * var(--space-sm));
        padding-block-end: var(--space-sm);
        scroll-snap-type: inline mandatory;
    }

    .dashboard-status-card {
        scroll-snap-align: start;
    }
}

.recommended-range {
    align-items: center;
    display: grid;
    font-size: var(--font-size-sm);
    gap: var(--space-sm);
    grid-template-columns: auto minmax(10rem, 1fr) auto;
}

@media (min-width: 60.01rem) {
    .recommended-range {
        min-inline-size: 23rem;
    }
}

.recommended-range > span:first-child {
    text-align: start;
}

.recommended-range > span:last-child {
    text-align: end;
}

.recommended-range-track {
    background: var(--color-sage-200);
    border-radius: var(--radius-sm);
    block-size: .75rem;
    min-inline-size: 0;
    position: relative;
}

.recommended-range-segment {
    background: var(--color-sage-500);
    border-radius: inherit;
    block-size: 100%;
    inset-inline-start: var(--range-left);
    position: absolute;
    inline-size: var(--range-width);
}

.recommended-range-marker {
    background: var(--color-sage-900);
    block-size: 1.5rem;
    inline-size: .2rem;
    inset-block-start: 50%;
    inset-inline-start: clamp(0px, calc(var(--marker-left) - .1rem), calc(100% - .2rem));
    position: absolute;
    transform: translateY(-50%);
}

@layer donplano.project {
    .operator-diagnostics,
    .operator-admin-page {
        display: grid;
        gap: var(--space-lg);
        margin-inline: auto;
        max-inline-size: 90rem;
    }

    .operator-diagnostics > header,
    .operator-admin-page > header {
        display: grid;
        gap: var(--space-xs);
    }

    .operator-diagnostics > header h1,
    .operator-diagnostics > header p,
    .operator-admin-page > header h1,
    .operator-admin-page > header p {
        margin-block: 0;
    }

    .operator-diagnostics > header p,
    .operator-admin-page > header p {
        color: var(--color-foreground-muted);
    }

    .operator-diagnostics__panel,
    .operator-admin-page__panel {
        background: var(--color-background);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        min-inline-size: 0;
        padding: var(--space-lg);
    }

    .operator-diagnostics__panel h2 {
        font-size: var(--font-size-lg);
        margin-block: 0 var(--space-md);
    }

    .operator-diagnostics__panel form {
        align-items: end;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-md);
    }

    .operator-diagnostics__panel form label {
        display: grid;
        flex: 1 1 16rem;
        gap: var(--space-xs);
    }

    .operator-diagnostics__filters :is(input, select) {
        background: var(--color-background);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        color: var(--color-foreground);
        font: inherit;
        min-block-size: var(--control-target-size);
        padding-inline: var(--space-sm);
    }

    .operator-diagnostics__filters button {
        align-self: end;
        justify-self: start;
    }

    .operator-diagnostics__error {
        border: 1px solid var(--color-danger);
        border-radius: var(--radius-md);
        color: var(--color-danger);
        margin: 0 0 var(--space-md);
        padding: var(--space-sm) var(--space-md);
    }

    .operator-diagnostics__panel > h2 {
        font-size: var(--font-size-lg);
        margin-block: 0 var(--space-md);
    }

    .operator-diagnostics__filters select:focus-visible,
    .operator-admin-page__delete:focus-visible {
        outline: var(--color-focus) var(--focus-ring-style) var(--focus-ring-width);
        outline-offset: var(--focus-ring-offset);
    }

    .operator-diagnostics__table-wrap,
    .operator-admin-page__table-wrap {
        overflow-x: auto;
    }

    .operator-diagnostics table,
    .operator-admin-page table {
        border-collapse: collapse;
        inline-size: 100%;
        text-align: start;
    }

    .operator-diagnostics table {
        min-inline-size: 30rem;
    }

    .operator-diagnostics th,
    .operator-diagnostics td,
    .operator-admin-page th,
    .operator-admin-page td {
        border-block-end: 1px solid var(--color-border);
        padding: var(--space-sm);
        text-align: start;
        vertical-align: top;
    }

    .operator-diagnostics th,
    .operator-admin-page th {
        color: var(--color-foreground-muted);
        font-size: var(--font-size-sm);
    }

    .operator-admin-page__panel > p {
        margin-block: 0 var(--space-md);
    }

    .operator-admin-page__notice {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        margin: 0;
        padding: var(--space-sm) var(--space-md);
    }

    .operator-admin-page__notice--success {
        border-color: var(--color-success);
    }

    .operator-admin-page__notice--error {
        border-color: var(--color-danger);
    }

    .operator-admin-page__warning {
        color: var(--color-foreground-muted);
    }

    .operator-admin-page form {
        display: grid;
        gap: var(--space-sm);
        min-inline-size: 10rem;
    }

    .operator-admin-page form label {
        align-items: center;
        display: flex;
        gap: var(--space-xs);
    }

    .operator-admin-page__delete {
        background: var(--color-danger);
        border: 1px solid var(--color-danger);
        border-radius: var(--radius-md);
        color: var(--color-on-accent);
        cursor: pointer;
        font: inherit;
        min-block-size: var(--control-target-size);
        padding: var(--space-xs) var(--space-sm);
    }

    .operator-admin-page__delete:hover {
        filter: brightness(0.9);
    }

    @media (max-width: 48rem) {
        .operator-diagnostics__panel,
        .operator-admin-page__panel {
            padding: var(--space-md);
        }
    }
}

@layer donplano.project {
    .onboarding-page {
        color: var(--color-neutral-900);
        display: grid;
        gap: var(--space-lg);
        font-family: var(--font-family-primary);
        padding-block: var(--space-lg);
        padding-inline: var(--gutter);
    }

    .onboarding-panel {
        background: var(--color-neutral-50);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-lg);
        display: grid;
        gap: var(--space-lg);
        min-inline-size: 0;
        padding: clamp(var(--space-md), 3vw, var(--space-xl));
    }

    .onboarding-heading,
    .onboarding-copy {
        display: grid;
        gap: var(--space-xs);
    }

    .onboarding-heading h1,
    .onboarding-heading p,
    .onboarding-copy h2,
    .onboarding-copy p,
    .onboarding-steps p,
    .sales-import-copy h1,
    .sales-import-copy p,
    .import-result h2,
    .sales-import-products-header h2 {
        margin: 0;
    }

    .onboarding-heading h1,
    .sales-import-copy h1 {
        color: var(--color-foreground);
        font-size: var(--font-size-2xl);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-heading);
    }

    .onboarding-copy h2,
    .import-result h2,
    .sales-import-products-header h2 {
        color: var(--color-foreground);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
    }

    .onboarding-lead {
        color: var(--color-foreground-muted);
        font-size: var(--font-size-lg);
    }

    .onboarding-muted {
        color: var(--color-foreground-muted);
        font-size: var(--font-size-sm);
    }

    .onboarding-steps {
        display: grid;
        gap: var(--space-2xs);
        max-inline-size: 24rem;
    }

    .onboarding-steps progress {
        accent-color: var(--color-primary-700);
        inline-size: 100%;
        min-block-size: var(--space-sm);
    }

    .onboarding-form {
        display: grid;
        gap: var(--space-md);
        max-inline-size: 42rem;
    }

    .onboarding-form details {
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-md);
        padding: var(--space-sm) var(--space-md);
    }

    .onboarding-form summary {
        cursor: pointer;
        font-weight: var(--font-weight-semibold);
    }

    .onboarding-form details[open] summary {
        margin-block-end: var(--space-sm);
    }

    .onboarding-form input:not([type="checkbox"], [type="hidden"]),
    .onboarding-form select,
    .onboarding-form textarea {
        inline-size: 100%;
        min-block-size: var(--control-target-size);
    }

    .onboarding-choice,
    .import-weekday-option {
        align-items: flex-start;
        gap: var(--space-xs);
    }

    .onboarding-choice {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        inline-size: 100%;
    }

    .onboarding-choice input {
        margin-block-start: 0.35em;
    }

    .onboarding-choice .field-help {
        grid-column: 2;
    }

    .onboarding-message {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        margin: 0;
        padding: var(--space-sm) var(--space-md);
    }

    .onboarding-error-message {
        border-color: var(--color-danger);
        color: var(--color-danger);
    }

    .onboarding-warning-message {
        border-color: var(--color-warning);
        color: var(--color-warning);
    }

    .onboarding-success-message {
        border-color: var(--color-success);
        color: var(--color-success);
    }

    .import-assisted-review {
        align-items: start;
        background: var(--color-primary-50);
        border: 1px solid var(--color-primary-200);
        border-radius: var(--radius-lg);
        display: grid;
        gap: var(--space-md);
        grid-template-columns: auto minmax(0, 1fr);
        padding: clamp(var(--space-md), 4vw, var(--space-xl));
    }

    .import-assisted-review__icon {
        align-items: center;
        background: var(--color-primary-700);
        border-radius: 50%;
        color: var(--color-neutral-50);
        display: inline-flex;
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-bold);
        inline-size: 2.75rem;
        justify-content: center;
        min-block-size: 2.75rem;
    }

    .import-assisted-review h2,
    .import-assisted-review p {
        margin: 0;
    }

    .import-assisted-review h2 {
        color: var(--color-foreground);
        font-size: var(--font-size-xl);
        line-height: var(--line-height-heading);
    }

    .import-assisted-review__actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-md);
        margin-block-start: var(--space-xs);
    }

    .onboarding-message p:first-child {
        margin-block-start: 0;
    }

    .onboarding-message p:last-child,
    .onboarding-message ul:last-child {
        margin-block-end: 0;
    }

    .sales-import-progress {
        gap: var(--space-lg);
        max-inline-size: var(--width-wide);
    }

    .import-status {
        align-items: start;
        display: grid;
        gap: var(--space-md);
        grid-template-columns: minmax(0, 1fr);
    }

    .sales-import-status-active {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .sales-import-spinner {
        align-items: center;
        display: inline-flex;
        gap: var(--space-2xs);
        padding-block-start: var(--space-xs);
    }

    .sales-import-spinner span {
        animation: import-pulse 1.2s infinite ease-in-out;
        background: var(--color-primary-700);
        block-size: 0.6rem;
        border-radius: 50%;
        inline-size: 0.6rem;
    }

    .sales-import-spinner span:nth-child(2) {
        animation-delay: 0.15s;
    }

    .sales-import-spinner span:nth-child(3) {
        animation-delay: 0.3s;
    }

    .import-location-card {
        align-items: start;
        background: var(--color-neutral-50);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-lg);
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-lg);
        justify-content: space-between;
        min-inline-size: 0;
        padding: var(--space-md);
    }

    .import-location-meta {
        display: grid;
        flex: 1 1 18rem;
        gap: var(--space-sm);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
        margin: 0;
        min-inline-size: 0;
    }

    .import-location-meta div,
    .import-summary-card {
        background: var(--color-neutral-100);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-md);
        display: grid;
        gap: var(--space-2xs);
        min-inline-size: 0;
        padding: var(--space-sm);
    }

    .import-location-meta dt,
    .sales-import-summary-label,
    .sales-import-result-details dt {
        color: var(--color-foreground-muted);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
    }

    .import-location-meta dd {
        font-weight: var(--font-weight-semibold);
        margin: 0;
        overflow-wrap: anywhere;
    }

    .import-progress {
        display: grid;
        gap: var(--space-xs);
    }

    .sales-import-progress-meta {
        align-items: baseline;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
        justify-content: space-between;
    }

    .sales-import-meter {
        accent-color: var(--color-primary-700);
        block-size: var(--space-md);
        inline-size: 100%;
    }

    .import-summary-grid {
        display: grid;
        gap: var(--space-sm);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
        margin: 0;
    }

    .import-summary-card dd {
        margin: 0;
    }

    .import-summary-card strong {
        font-size: var(--font-size-xl);
    }

    .import-result {
        display: grid;
        gap: var(--space-sm);
    }

    .sales-import-result-details {
        display: grid;
        gap: var(--space-xs) var(--space-md);
        grid-template-columns: minmax(9rem, auto) minmax(0, 1fr);
        margin: 0;
    }

    .sales-import-result-details dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

    .import-products-card {
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-lg);
        display: grid;
        gap: var(--space-md);
        min-inline-size: 0;
        padding: var(--space-md);
    }

    .sales-import-products-header {
        align-items: start;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-md);
        justify-content: space-between;
    }

    .import-products-grid {
        display: grid;
        gap: var(--space-md);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    }

    .import-product-card {
        background: var(--color-neutral-50);
        border: 1px solid var(--color-neutral-200);
        border-radius: var(--radius-md);
        display: grid;
        gap: var(--space-md);
        min-inline-size: 0;
        padding: var(--space-md);
    }

    .sales-import-product-title {
        align-items: baseline;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .sales-import-product-plu {
        color: var(--color-foreground-muted);
        font-size: var(--font-size-sm);
    }

    .import-product-weekdays {
        border: 0;
        display: grid;
        gap: var(--space-xs) var(--space-md);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0;
        min-inline-size: 0;
        padding: 0;
    }

    .import-product-weekdays legend {
        font-weight: var(--font-weight-semibold);
        grid-column: 1 / -1;
        margin-block-end: var(--space-xs);
    }

    .import-weekday-option {
        display: flex;
        width: auto;
    }

    .import-products-empty {
        border: 1px dashed var(--color-neutral-400);
        border-radius: var(--radius-md);
        color: var(--color-foreground-muted);
        padding: var(--space-md);
    }

    .import-complete-actions {
        border: 1px solid var(--color-success);
        border-radius: var(--radius-md);
        display: grid;
        gap: var(--space-sm);
        justify-items: start;
        padding: var(--space-md);
    }

    .import-complete-actions p {
        margin: 0;
    }

    .sales-import-note {
        margin: 0;
    }

    @keyframes import-pulse {
        0%, 80%, 100% {
            opacity: 0.45;
            transform: scale(0.75);
        }

        40% {
            opacity: 1;
            transform: scale(1);
        }
    }

    @media (max-width: 40rem) {
        .import-assisted-review {
            grid-template-columns: minmax(0, 1fr);
        }

        .import-status {
            grid-template-columns: minmax(0, 1fr);
        }

        .sales-import-result-details {
            grid-template-columns: minmax(0, 1fr);
            gap: 0;
        }

        .sales-import-result-details dt {
            margin-block-start: var(--space-sm);
        }

        .sales-import-result-details dd {
            margin-block-start: var(--space-2xs);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .sales-import-spinner span {
            animation: none;
        }
    }
}

/**
 * @section Dropdown
 */

@layer donplano.project {
  alto-dropdown {
    display: inline-block;
  }

  alto-dropdown [popover] {
    position: fixed;
    inset: auto;
    margin: 0;
    max-inline-size: calc(100vw - 1rem);
    max-block-size: min(28rem, calc(100dvh - 1rem));
    overflow: auto;
    padding: var(--space-2xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-background);
    color: var(--color-foreground);
  }

  alto-dropdown [popover]:popover-open {
    display: grid;
  }

  alto-dropdown [popover][data-alto-dropdown-fallback]:not([hidden]) {
    display: grid;
  }

  alto-dropdown > [popover][hidden] {
    display: none;
  }
}

@layer donplano.project {
    .forecast-page,
    .sales-history-page {
        display: grid;
        gap: var(--space-lg);
        margin-inline: auto;
        max-inline-size: 88rem;
        min-inline-size: 0;
    }

    .forecast-page__header {
        display: grid;
        gap: var(--space-xs);
    }

    .forecast-page__header p,
    .forecast-page__muted {
        color: var(--color-foreground-muted);
    }

    .forecast-page__panel,
    .sales-history-page__panel {
        background: var(--color-background);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        display: grid;
        gap: var(--space-md);
        min-inline-size: 0;
        padding: var(--space-lg);
    }

    .forecast-page__filters {
        align-items: end;
        display: grid;
        gap: var(--space-md);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    }

    .forecast-overview .forecast-day {
        border-block-start: 1px solid var(--color-border);
        padding-block: var(--space-md);
    }

    .forecast-overview .forecast-day summary {
        cursor: pointer;
        font-weight: var(--font-weight-bold);
    }

    .forecast-overview .forecast-day summary:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: var(--space-2xs);
    }

    .forecast-page__filters .field {
        display: grid;
        gap: var(--space-xs);
    }

    .forecast-page__filters .primary,
    .forecast-page__panel > .button {
        justify-self: start;
    }

    .forecast-page__table-wrap,
    .sales-history-page__table-wrap {
        max-inline-size: 100%;
        overflow: auto;
    }

    .forecast-page__table-wrap table,
    .sales-history-page__table-wrap table {
        border-collapse: collapse;
        inline-size: 100%;
        text-align: start;
    }

    .forecast-page__table-wrap th,
    .forecast-page__table-wrap td,
    .sales-history-page__table-wrap th,
    .sales-history-page__table-wrap td {
        border-block-end: 1px solid var(--color-border);
        padding: var(--space-sm);
        text-align: start;
        vertical-align: top;
    }

    .forecast-page__table-wrap thead,
    .sales-history-page__table-wrap thead {
        color: var(--color-foreground-muted);
        font-size: var(--font-size-sm);
    }

    .forecast-page__notice,
    .sales-history-page__notice {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: var(--space-sm) var(--space-md);
    }

    .forecast-page__notice--error {
        border-color: var(--color-danger);
        color: var(--color-danger);
    }

    .sales-history-page__table-wrap table {
        min-inline-size: 30rem;
    }

    .sales-history-page .sales-history-weather,
    .sales-history-page .sales-history-factor-cell,
    .sales-history-page .sales-history-badge-cell {
        display: grid;
        gap: var(--space-2xs);
    }

    .sales-history-page .sales-history-weather__top {
        align-items: center;
        display: flex;
        gap: var(--space-xs);
    }

    .sales-history-page .sales-history-weather__label,
    .sales-history-page .sales-history-factor-cell__value {
        font-weight: var(--font-weight-bold);
    }

    .sales-history-page .sales-history-weather__icon {
        color: var(--color-warning);
        font-size: 1.2em;
    }

    .sales-history-page .sales-history-weather__details,
    .sales-history-page .sales-history-badge-cell__details {
        color: var(--color-foreground-muted);
        font-size: var(--font-size-sm);
    }

    .sales-history-page .sales-history-badge {
        border: 1px solid var(--color-border);
        border-radius: 999rem;
        display: inline-flex;
        inline-size: fit-content;
        padding-inline: var(--space-sm);
    }

    .sales-history-page .sales-history-badge--success {
        border-color: var(--color-success);
        color: var(--color-success);
    }

    .sales-history-page .sales-history-badge--neutral {
        background: var(--color-neutral-100);
        color: var(--color-foreground-muted);
    }

    @media (max-width: 48rem) {
        .forecast-page__panel,
        .sales-history-page__panel {
            padding: var(--space-md);
        }
    }
}

@layer donplano.project {
    .app-main:has(.production-log-page) {
        background: var(--color-neutral-100);
    }

    .operations-page {
        align-content: start;
        display: grid;
        gap: var(--space-lg);
        margin-inline: auto;
        min-inline-size: 0;
        width: 100%;
    }

    .operations-page--narrow {
        max-inline-size: 56rem;
    }

    .operations-page__heading {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-md);
        justify-content: space-between;
    }

    .operations-page__heading h1,
    .operations-page__heading p {
        margin-block: 0;
    }

    .operations-page__heading h1 {
        overflow-wrap: anywhere;
    }

    .operations-lead {
        color: var(--color-foreground-muted);
        font-size: var(--font-size-lg);
    }

    .operations-panel {
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-md);
        padding: clamp(var(--space-md), 2vw, var(--space-lg));
    }

    .operations-panel > :is(h2, p):first-child {
        margin-block-start: 0;
    }

    .operations-form {
        align-items: end;
        display: grid;
        gap: var(--space-md);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    }

    .operations-form > button,
    .operations-form > .operations-actions,
    .operations-form > fieldset {
        grid-column: 1 / -1;
    }

    .operations-form > label {
        align-items: stretch;
        display: grid;
        font-weight: var(--font-weight-bold);
        gap: var(--space-2xs);
        min-inline-size: 0;
    }

    .operations-form input,
    .operations-form select,
    .operations-table input {
        max-inline-size: 100%;
        min-inline-size: 0;
        width: 100%;
    }

    .operations-choice-group {
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-md);
        display: grid;
        gap: var(--space-sm);
        margin: 0;
        padding: var(--space-md);
    }

    .operations-choice-group legend {
        font-weight: var(--font-weight-bold);
        padding-inline: var(--space-2xs);
    }

    .operations-choice-grid {
        display: grid;
        gap: var(--space-xs);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    }

    .operations-choice-grid label {
        align-items: center;
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-sm);
        display: flex;
        gap: var(--space-sm);
        min-block-size: var(--control-target-size);
        padding: var(--space-xs) var(--space-sm);
    }

    .operations-choice-grid input {
        accent-color: var(--color-accent);
        flex: 0 0 auto;
        min-block-size: 1rem;
        min-inline-size: 1rem;
        width: auto;
    }

    .operations-choice-grid--weekdays {
        grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    }

    .operations-actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .operations-actions form {
        margin: 0;
    }

    .operations-danger-button {
        --background-color: var(--color-danger);
        --border-color: var(--color-danger);
        --color: var(--color-neutral-50);
    }

    .operations-table-wrap {
        max-inline-size: 100%;
        overflow-x: auto;
    }

    .operations-table {
        border-collapse: collapse;
        min-inline-size: 56rem;
        width: 100%;
    }

    .operations-table th,
    .operations-table td {
        border-block-end: var(--border-width) solid var(--color-border);
        padding: var(--space-sm);
        text-align: start;
        vertical-align: top;
    }

    .operations-table th {
        font-weight: var(--font-weight-bold);
    }

    .operations-field-label {
        display: grid;
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
        gap: var(--space-2xs);
        min-inline-size: 9rem;
    }

    .operations-field-label input {
        width: 100%;
    }

    .location-list {
        display: grid;
        gap: var(--space-md);
    }

    .location-card {
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-md);
        padding: var(--space-md);
    }

    .location-card h3 {
        margin-block: 0 var(--space-md);
    }

    .location-card .operations-form > .operations-actions {
        align-items: end;
    }

    .production-log-page .production-log-form {
        display: grid;
        gap: var(--space-md);
    }

    .production-log-page .production-reuse {
        border-block-start: var(--border-width) solid var(--color-neutral-200);
        display: grid;
        gap: var(--space-sm);
        padding-block-start: var(--space-md);
    }

    .production-log-page .production-reuse-row {
        align-items: end;
        display: grid;
        gap: var(--space-sm);
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    @media (max-width: 48rem) {
        .production-log-page .production-reuse-row {
            grid-template-columns: 1fr;
        }
    }

    .production-log-page > .operations-panel {
        background: var(--color-neutral-50);
        border-color: var(--color-neutral-200);
        display: grid;
        gap: var(--space-md);
        min-inline-size: 0;
        padding: var(--space-md);
    }

    .production-log-special-orders {
        border-block: var(--border-width) solid var(--color-neutral-200);
        display: grid;
        gap: var(--space-md);
        padding-block: var(--space-md);
    }

    .production-log-special-orders > .operations-page__heading p {
        margin-block: var(--space-2xs) 0;
    }

    .production-log-special-orders summary {
        cursor: pointer;
        font-weight: var(--font-weight-semibold);
    }

    .production-special-order-form {
        margin-block-start: var(--space-md);
        max-inline-size: 48rem;
    }

    .production-log-intro {
        align-items: end;
    }

    .production-log-intro h1,
    .production-log-intro p {
        margin-block: 0;
    }

    .production-log-intro h1 {
        font-size: var(--font-size-lg);
    }

    .production-log-intro .operations-lead {
        font-size: var(--font-size-sm);
    }

    .production-log-date-form {
        align-items: end;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .production-log-date-form label {
        display: block;
    }

    .production-log-date-display {
        color: var(--color-foreground-muted);
        display: block;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        margin-block-end: var(--space-2xs);
        text-align: end;
    }

    .production-log-date-form input {
        min-inline-size: 10rem;
    }

    .production-log-items {
        display: grid;
        gap: var(--space-md);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    }

    .production-log-table-wrap {
        inline-size: calc(100% + (2 * var(--space-md)));
        margin-inline: calc(-1 * var(--space-md));
        max-inline-size: none;
        overflow-x: auto;
    }

    .production-log-summary .operations-table-wrap {
        inline-size: calc(100% + (2 * var(--space-md)));
        margin-block-end: calc(-1 * var(--space-md));
        margin-inline: calc(-1 * var(--space-md));
        max-inline-size: none;
    }

    .production-log-summary-table tbody tr:last-child :is(th, td) {
        border-block-end: 0;
    }

    .production-log-summary-table th,
    .production-log-summary-table td {
        border-block-end: var(--border-width) solid var(--color-neutral-200);
        color: var(--color-foreground);
        font-size: var(--font-size-md);
        padding: var(--space-sm);
        vertical-align: middle;
    }

    .production-log-summary-table th {
        color: var(--color-foreground-muted);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
    }

    .production-log-table {
        border-collapse: collapse;
        min-inline-size: 64rem;
        width: 100%;
    }

    .production-log-table th,
    .production-log-table td {
        border-block-end: var(--border-width) solid var(--color-neutral-200);
        padding: var(--space-sm);
        text-align: start;
        vertical-align: middle;
    }

    .production-log-table th {
        color: var(--color-foreground-muted);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
    }

    .production-log-table :is(th, td):not(:first-child) {
        text-align: center;
    }

    .production-log-table td:first-child {
        min-inline-size: 11rem;
    }

    .production-log-table td:first-child small {
        color: var(--color-foreground-muted);
        display: block;
        margin-block-start: var(--space-2xs);
    }

    .production-log-product-name {
        display: block;
    }

    .production-quantity {
        display: grid;
        gap: var(--space-xs);
    }

    @media (min-width: 60.01rem) {
        .production-quantity {
            min-inline-size: 16rem;
        }
    }

    .production-quantity__track {
        display: block;
        min-block-size: 2.75rem;
        padding-block-start: 1.75rem;
        position: relative;
    }

    .production-quantity__track::before {
        background: var(--color-neutral-300);
        border-radius: var(--radius-sm);
        block-size: .25rem;
        content: "";
        inset-block-start: calc(1.75rem + .375rem);
        inset-inline: 0;
        pointer-events: none;
        position: absolute;
    }

    .production-quantity__value {
        background: var(--color-danger-700);
        border-radius: var(--radius-sm);
        color: var(--color-neutral-50);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        inset-block-start: 0;
        inset-inline-start: var(--slider-position);
        line-height: 1.5;
        padding-inline: var(--space-xs);
        position: absolute;
        pointer-events: none;
        transform: translateX(-50%);
        white-space: nowrap;
        z-index: 2;
    }

    .production-quantity__value::after {
        border-block-start: .3rem solid var(--color-danger-700);
        border-inline-end: .3rem solid transparent;
        border-inline-start: .3rem solid transparent;
        content: "";
        inset-block-end: auto;
        inset-block-start: 100%;
        inset-inline-start: 50%;
        position: absolute;
        transform: translateX(-50%);
    }

    .production-quantity__dot {
        background: var(--color-danger-700);
        border: .15rem solid var(--color-neutral-50);
        border-radius: 50%;
        block-size: 1rem;
        inline-size: 1rem;
        inset-block-start: calc(1.75rem + .5rem);
        inset-inline-start: var(--slider-position);
        position: absolute;
        pointer-events: none;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    .production-quantity__slider {
        accent-color: var(--color-accent);
        appearance: none;
        background: transparent;
        border: 0;
        box-shadow: none;
        cursor: grab;
        inset: 0;
        margin: 0;
        position: absolute;
        touch-action: pan-y;
        z-index: 3;
    }

    .production-quantity__slider::-webkit-slider-runnable-track {
        background: transparent;
        border-radius: var(--radius-sm);
        block-size: .25rem;
    }

    .production-quantity__slider::-webkit-slider-thumb {
        appearance: none;
        background: transparent;
        border: 0;
        border-radius: 50%;
        block-size: 1rem;
        box-sizing: border-box;
        inline-size: 1rem;
        margin-block-start: -.375rem;
    }

    .production-quantity__slider::-moz-range-track {
        background: transparent;
        border-radius: var(--radius-sm);
        block-size: .25rem;
    }

    .production-quantity__slider::-moz-range-progress {
        background: transparent;
        border-radius: var(--radius-sm);
        block-size: .25rem;
    }

    .production-quantity__slider::-moz-range-thumb {
        background: transparent;
        border: 0;
        border-radius: 50%;
        block-size: 1rem;
        box-sizing: border-box;
        inline-size: 1rem;
    }

    .production-quantity__slider:active {
        cursor: grabbing;
    }

    .production-quantity__help {
        color: var(--color-foreground-muted);
        font-size: var(--font-size-xs);
    }

    .production-log-correction {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: var(--radius-sm);
        color: var(--color-foreground-muted);
        cursor: pointer;
        display: inline-flex;
        justify-content: center;
        min-block-size: var(--control-target-size);
        min-inline-size: var(--control-target-size);
        padding: var(--space-xs);
    }

    .production-log-correction:hover {
        background: var(--color-neutral-100);
        color: var(--color-foreground);
    }

    .production-log-correction:focus-visible {
        outline: var(--color-focus) var(--focus-ring-style) var(--focus-ring-width);
        outline-offset: var(--space-2xs);
    }

    .production-log-correction .sprite-icon {
        block-size: 1.25rem;
        inline-size: 1.25rem;
    }

    @media (max-width: 60rem) {
        .production-log-table {
            min-inline-size: 0;
        }

        .production-log-table thead {
            block-size: 1px;
            clip-path: inset(50%);
            inline-size: 1px;
            overflow: hidden;
            position: absolute;
            white-space: nowrap;
        }

        .production-log-table tbody,
        .production-log-table tr,
        .production-log-table td {
            display: block;
        }

        .production-log-table tr {
            border-block-end: var(--border-width) solid var(--color-neutral-200);
            padding-block: var(--space-sm);
        }

        .production-log-table tr:last-child {
            border-block-end: 0;
        }

        .production-log-table td,
        .production-log-table :is(th, td):not(:first-child) {
            border-block-end: 0;
            display: grid;
            gap: 0;
            grid-template-columns: minmax(0, 1fr);
            min-inline-size: 0;
            padding: var(--space-xs) var(--space-sm);
            text-align: start;
        }

        .production-log-table td::before {
            display: none;
        }

        .production-log-table td:first-child {
            min-inline-size: 0;
        }

        .production-log-table .recommended-range {
            box-sizing: border-box;
            font-size: var(--font-size-xs);
            gap: var(--space-2xs);
            grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content);
            max-inline-size: 100%;
            overflow: hidden;
            width: 100%;
        }

        .production-log-table .recommended-range > span {
            white-space: nowrap;
        }

        .production-log-table .production-quantity {
            width: 100%;
        }

        .production-log-product-name {
            align-items: baseline;
            display: flex;
            flex-wrap: wrap;
            gap: 0 var(--space-sm);
        }

        .production-log-product-name small {
            margin-block-start: 0;
        }
    }

    .production-log-item {
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-md);
        display: grid;
        gap: var(--space-sm);
        min-inline-size: 0;
        padding: var(--space-md);
    }

    .production-log-item :is(h2, p, dl) {
        margin: 0;
    }

    .production-log-item h2 {
        font-size: var(--font-size-lg);
    }

    .production-log-facts {
        display: grid;
        gap: var(--space-2xs);
    }

    .production-log-facts > div {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
        justify-content: space-between;
    }

    .production-log-facts dd {
        font-weight: var(--font-weight-bold);
        margin: 0;
    }

    .production-log-item input {
        inline-size: 100%;
    }

    .production-log-progress,
    .production-log-status {
        font-weight: var(--font-weight-bold);
    }

    .production-log-date-actions {
        align-items: end;
    }

    @media (max-width: 40rem) {
        .production-log-date-form {
            inline-size: 100%;
        }

        .production-log-date-form label,
        .production-log-date-form input,
        .production-log-date-form button {
            inline-size: 100%;
        }
    }

    .production-log-summary-table :is(th, td) {
        white-space: nowrap;
    }

    .production-log-page .production-log-product {
        display: grid;
        gap: var(--space-2xs);
    }

    .production-log-page .production-log-product__meta,
    .operations-muted {
        color: var(--color-foreground-muted);
    }

    .production-log-help {
        font-size: var(--font-size-sm);
        margin-block: 0;
    }

    .production-log-progress {
        color: var(--color-foreground-muted);
        font-size: var(--font-size-xs);
        margin: 0 0 0 auto;
    }

    .production-log-page .operations-alert,
    .operations-alert {
        border: var(--border-width) solid var(--color-success-200);
        border-inline-start: .25rem solid var(--color-success-700);
        margin-block: 0;
        padding: var(--space-sm) var(--space-md);
        background: var(--color-success-50);
        color: var(--color-success-900);
    }

    .operations-alert--success {
        border-color: var(--color-success-200);
        border-inline-start-color: var(--color-success-700);
        background: var(--color-success-50);
        color: var(--color-success-900);
    }

    .operations-alert--warning {
        border-color: var(--color-warning-200);
        border-inline-start-color: var(--color-warning-700);
        background: var(--color-warning-50);
        color: var(--color-warning-900);
    }

    .operations-alert--danger,
    .operations-alert--error {
        border-color: var(--color-danger-200);
        border-inline-start-color: var(--color-danger-700);
        background: var(--color-danger-50);
        color: var(--color-danger-900);
    }

    .operations-edit-link {
        align-items: center;
        border-radius: var(--radius-sm);
        display: inline-flex;
        justify-content: center;
        min-block-size: var(--control-target-size);
        min-inline-size: var(--control-target-size);
    }

    .operations-edit-link:focus-visible {
        outline: var(--color-focus) var(--focus-ring-style) var(--focus-ring-width);
        outline-offset: var(--space-2xs);
    }

    .production-log-summary {
        min-inline-size: 0;
    }
}

@layer donplano.project {
    .product-list-page .schedule-location-form {
        align-items: end;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
        margin-block: var(--space-md);
    }

    .product-list-page .schedule-form {
        margin-block-start: var(--space-md);
    }

    .product-list-page .schedule-form > :is(.schedule-selection, p) {
        grid-column: 1 / -1;
    }

    .product-list-page .schedule-form fieldset > label {
        display: grid;
        gap: var(--space-2xs);
        max-inline-size: 28rem;
    }

    .product-list-page .schedule-form fieldset > label[hidden],
    .product-list-page .schedule-selection p[hidden] {
        display: none;
    }

    .product-list-page .schedule-products {
        display: grid;
        gap: var(--space-xs);
        grid-auto-rows: 1fr;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    }

    .product-list-page .schedule-product {
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-sm);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-block-size: 6.5rem;
        min-inline-size: 0;
        padding: var(--space-sm);
    }

    .product-list-page .schedule-product label {
        align-items: start;
        border: 0;
        display: flex;
        flex: 1;
        gap: var(--space-xs);
        min-inline-size: 0;
        padding: 0;
    }

    .product-list-page .schedule-product label span {
        min-inline-size: 0;
        overflow-wrap: anywhere;
    }

    .product-list-page .schedule-product small {
        color: var(--color-foreground-muted);
        display: block;
    }

    .product-list-page .schedule-remove {
        align-self: start;
        margin-block-start: var(--space-xs);
    }

    .product-list-page .schedule-selection {
        border: var(--border-width) solid var(--color-border);
        border-radius: var(--radius-md);
        padding: var(--space-md);
    }

    .product-list-page .schedule-selection h3 {
        margin-block-start: 0;
    }

    .product-list-page .schedule-selection .schedule-products {
        max-block-size: 24rem;
        overflow-y: auto;
    }

    .product-list-page .scheduled-products {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .product-list-page .scheduled-products li {
        align-items: center;
        border-block-end: var(--border-width) solid var(--color-border);
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
        justify-content: space-between;
        padding-block: var(--space-sm);
    }

    .product-list-page .schedule-product[hidden],
    .product-list-page .scheduled-products li[hidden] {
        display: none;
    }
}

@layer donplano.project {
    .account-settings-page {
        max-inline-size: 48rem;
    }

    .account-settings-form {
        display: grid;
        gap: var(--space-sm);
        max-inline-size: 32rem;
    }

    .account-settings-form label {
        font-weight: var(--font-weight-bold);
    }

    .account-settings-form input,
    .account-settings-form button {
        min-block-size: var(--control-target-size);
        width: 100%;
    }

    .account-settings-error {
        color: var(--color-danger);
    }

    .account-settings-message {
        color: var(--color-success);
    }
}

@layer donplano.project {
    .support-control {
        align-items: center;
        background: var(--color-primary-700);
        border-radius: 999px;
        bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
        box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 18%);
        color: var(--color-neutral-50);
        font-weight: var(--font-weight-bold);
        inset-inline-end: var(--space-lg);
        min-block-size: 3rem;
        min-inline-size: 3rem;
        padding: var(--space-sm) var(--space-md);
        position: fixed;
        display: inline-flex;
        gap: var(--space-xs);
        text-align: center;
        text-decoration: none;
        z-index: 13;
    }

    .support-control-mobile {
        display: none;
    }

    .support-control-sidebar {
        align-self: center;
        background: var(--color-primary-700);
        border-radius: 999px;
        box-shadow: none;
        color: var(--color-neutral-50);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        inset: auto;
        margin-block: 0 var(--space-sm);
        margin-inline: var(--space-md);
        min-block-size: 2.25rem;
        min-inline-size: 0;
        padding: var(--space-2xs) var(--space-sm);
        position: static;
        text-align: center;
        z-index: auto;
    }

    .support-control-sidebar:hover {
        background: var(--color-primary-800);
    }

    .support-control:focus-visible,
    .support-control-mobile:focus-visible,
    .support-dialog :focus-visible {
        outline: var(--color-focus) var(--focus-ring-style) var(--focus-ring-width);
    }

    .support-dialog {
        --width: 28rem;
        padding: var(--space-lg);
    }

    .support-dialog header {
        align-items: start;
        display: flex;
        justify-content: space-between;
    }

    .support-dialog h2,
    .support-dialog p {
        margin-block: 0 var(--space-md);
    }

    .support-close {
        min-block-size: 2.75rem;
        min-inline-size: 2.75rem;
    }

    .support-form {
        display: grid;
        gap: var(--space-sm);
    }

    .support-form[hidden] {
        display: none;
    }

    .support-form textarea {
        inline-size: 100%;
        min-block-size: 8rem;
        resize: vertical;
    }

    .support-feedback[hidden] {
        display: none;
    }

    @media (max-width: 60rem) {
        .support-control:not(.support-control-mobile) {
            display: none;
        }

        .app-mobile-more > div .support-control-mobile {
            align-items: center;
            background: var(--color-primary-700) !important;
            border-radius: 999px !important;
            box-shadow: none;
            color: var(--color-neutral-50) !important;
            display: inline-flex;
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-bold);
            gap: var(--space-xs);
            inset-inline-end: auto;
            block-size: 2rem;
            min-inline-size: 0;
            inline-size: max-content;
            margin-inline: var(--space-sm) auto;
            min-block-size: 0;
            padding: var(--space-2xs) var(--space-sm);
            position: static;
            text-align: center;
            z-index: auto;
        }

        .support-control-mobile:hover {
            background: var(--color-primary-800) !important;
        }

    }

    @media (max-width: 35rem) {
        .support-dialog {
            max-block-size: calc(100dvh - 2 * var(--space-sm));
            max-inline-size: calc(100vw - 2 * var(--space-sm));
            overflow: auto;
            padding: var(--space-md);
        }
    }
}