/**
 * 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;
    filter: brightness(0) invert(1);
    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-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 {
    margin-inline: auto;
    max-inline-size: 104rem;
    padding: clamp(var(--space-md), 3vw, var(--space-2xl));
}

.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);
        font-weight: var(--font-weight-bold);
    }

    .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 {
    .public-shell {
        min-block-size: 100dvh;
    }

    .public-header {
        align-items: center;
        background: var(--color-neutral-50);
        border-block-end: var(--border-width) solid var(--color-neutral-200);
        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 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 {
        inset-block-start: var(--space-lg);
        inset-inline-start: var(--space-lg);
        position: absolute;
    }

    .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;
}

.forecast-details summary {
    cursor: pointer;
    inline-size: fit-content;
}

@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;
    }
}

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

.dashboard-panel {
    background: var(--color-background);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    min-inline-size: 0;
    padding: clamp(var(--space-md), 2vw, var(--space-lg));
}

.dashboard-panel h2,
.dashboard-decision h1 {
    margin-block: 0 var(--space-md);
}

.dashboard-eyebrow {
    color: var(--color-primary-700);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    margin-block: 0 var(--space-xs);
    text-transform: uppercase;
}

.dashboard-decision-total {
    display: grid;
    font-size: var(--font-size-lg);
    gap: var(--space-2xs);
}

.dashboard-decision-total strong {
    font-size: var(--font-size-2xl);
}

.dashboard-table-hint {
    display: none;
}

.dashboard-decision > .button {
    margin-block-start: var(--space-md);
}

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

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

.dashboard-status-grid p {
    margin-block: 0 var(--space-sm);
}

.dashboard-status-grid ul {
    margin-block: var(--space-sm);
}

.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 {
    overflow-x: auto;
}

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

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

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

.dashboard-top-products > p {
    margin-block: 0 var(--space-sm);
}

.dashboard-top-products ol {
    list-style-position: inside;
    margin: 0;
    padding: 0;
}

.dashboard-top-products li {
    align-items: center;
    border-block-start: 1px solid var(--color-neutral-200);
    display: flex;
    gap: var(--space-sm);
    justify-content: space-between;
    padding-block: var(--space-sm);
}

.dashboard-forecast {
    background: var(--color-background);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    min-inline-size: 0;
    overflow: hidden;
}

.dashboard-forecast__header {
    align-items: center;
    border-block-end: var(--border-width) solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
}

.dashboard-forecast__header p,
.dashboard-forecast__title {
    margin: 0;
}

.dashboard-forecast__title {
    color: var(--color-primary-700);
    font-size: var(--font-size-lg);
}

.dashboard-forecast__subtitle,
.dashboard-forecast__range {
    color: var(--color-foreground-muted);
    margin-block-start: var(--space-2xs) !important;
}

.dashboard-forecast__range {
    font-size: var(--font-size-sm);
}

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

.dashboard-forecast__nav,
.dashboard-forecast__action {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-block-size: var(--control-target-size);
}

.dashboard-forecast__nav {
    padding-inline: var(--space-sm);
}

.dashboard-forecast__action {
    min-inline-size: var(--control-target-size);
}

@media (max-width: 40rem) {
    .dashboard-table-hint {
        display: block;
    }

    .dashboard-top-products li {
        align-items: start;
    }
}

@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);
    }

    .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-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;
        }
    }
}

@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,
    .sales-history-page__header {
        display: grid;
        gap: var(--space-xs);
    }

    .forecast-page__header p,
    .sales-history-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 {
    .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;
    }

    @media (max-width: 40rem) {
        .production-log-page .operations-page__heading h1 {
            font-size: clamp(var(--font-size-xl), 8vw, var(--font-size-2xl));
        }
    }

    .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 > .operations-panel {
        display: grid;
        gap: var(--space-md);
        min-inline-size: 0;
    }

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

    .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;
    }

    .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-page .operations-alert,
    .operations-alert {
        border-inline-start: 0.25rem solid var(--color-border);
        margin-block: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
    }

    .operations-alert--error {
        border-color: var(--color-danger);
        color: var(--color-danger);
    }

    .operations-alert--warning {
        border-color: var(--color-warning);
        color: var(--color-warning);
    }

    .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-page .production-log-reset-form {
        margin-block-start: var(--space-sm);
    }

    .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: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;
        }

        .support-control-mobile {
            align-items: center;
            background: transparent;
            border-radius: var(--radius-sm);
            box-shadow: none;
            color: var(--color-neutral-900);
            display: flex;
            font-weight: var(--font-weight-regular);
            gap: var(--space-sm);
            inset-inline-end: auto;
            min-block-size: 2.75rem;
            min-inline-size: 0;
            padding: var(--space-sm);
            position: static;
            text-align: start;
            z-index: auto;
        }

    }

    @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);
        }
    }
}