:root { --dealer-z-popover: 60; } /* above dialogs (40, stacked 50) and dropdowns (20) */
    .dcal { position: fixed; z-index: var(--dealer-z-popover); width: 20.5rem; padding: .75rem; border-radius: var(--dui-radius-md, .75rem); background: #fff; color: var(--gray-950);
        box-shadow: 0 0 0 1px rgb(3 7 18 / .08), 0 12px 32px -6px rgb(3 7 18 / .25); font-size: .875rem; user-select: none; }
    .dark .dcal { background: var(--gray-900); color: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 12px 32px -6px rgb(0 0 0 / .6); }
    .dcal-head { display: flex; align-items: center; gap: .25rem; margin-bottom: .5rem; }
    .dcal-head select { flex: 1; min-width: 0; padding: .3rem 1.6rem .3rem .5rem; border: 1px solid var(--gray-300); border-radius: var(--dui-radius-control, .5rem); background-color: transparent; color: inherit; font-weight: 600; font-size: .875rem; }
    .dark .dcal-head select { border-color: rgb(255 255 255 / .15); }
    .dark .dcal-head select option { background: var(--gray-900); }
    .dcal-nav { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: none; border-radius: var(--dui-radius-control, .5rem); color: var(--gray-500); }
    .dcal-nav:hover { background: rgb(0 0 0 / .05); color: var(--gray-900); }
    .dark .dcal-nav:hover { background: rgb(255 255 255 / .08); color: #fff; }
    .dcal-nav svg { width: 1rem; height: 1rem; }
    .dcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
    .dcal-wd { text-align: center; font-size: .7rem; font-weight: 600; text-transform: uppercase; color: var(--gray-400); padding: .25rem 0; }
    .dcal-day { height: 2.25rem; border-radius: var(--dui-radius-control, .5rem); font-variant-numeric: tabular-nums; color: inherit; background: transparent; }
    .dcal-day:hover:not(:disabled) { background: color-mix(in oklab, var(--primary-500) 12%, transparent); }
    .dcal-day.dcal-out { color: var(--gray-400); }
    .dcal-day.dcal-today { box-shadow: inset 0 0 0 1px var(--primary-500); font-weight: 700; }
    .dcal-day.dcal-sel { background: var(--primary-600); color: #fff; font-weight: 700; }
    .dcal-day:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }
    .dcal-day:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }
    .dcal-foot { display: flex; justify-content: space-between; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--gray-100); }
    .dark .dcal-foot { border-color: rgb(255 255 255 / .08); }
    .dcal-foot button { padding: .3rem .6rem; border-radius: var(--dui-radius-control, .5rem); font-weight: 600; font-size: .8125rem; color: var(--primary-600); }
    .dcal-foot button:hover { background: color-mix(in oklab, var(--primary-500) 10%, transparent); }
    .dcal-foot .dcal-clear { color: var(--gray-500); }
    .dcal-time { display: flex; align-items: center; gap: .375rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--gray-100); }
    .dark .dcal-time { border-color: rgb(255 255 255 / .08); }
    .dcal-time span { margin-inline-end: auto; font-weight: 600; color: var(--gray-500); }
    .dcal-time select { width: 5.25rem; padding: .3rem 1.75rem .3rem .625rem; border: 1px solid var(--gray-300); border-radius: var(--dui-radius-control, .5rem); background-color: transparent; color: inherit; font-size: 1rem; font-variant-numeric: tabular-nums; }
    .dark .dcal-time select { border-color: rgb(255 255 255 / .15); }
    .dark .dcal-time select option { background: var(--gray-900); }
    /* phone: a bottom sheet with large touch targets over a dimmed page */
    .dcal-backdrop { position: fixed; inset: 0; z-index: calc(var(--dealer-z-popover) - 1); background: rgb(3 7 18 / .4); }
    @media (max-width: 639px) {
        .dcal.dcal-sheet { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; border-radius: var(--dui-radius, 1rem) var(--dui-radius, 1rem) 0 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
        .dcal.dcal-sheet .dcal-day { height: 2.75rem; font-size: 1rem; }
        .dcal.dcal-sheet .dcal-head select { font-size: 1rem; }
    }
    /* "Today" in an empty date field (DateInput::todayShortcut): a quiet word before the calendar icon; gone once the
       field has a value (the calendar keeps its own "Today") */
    .ddi-today { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 .5rem; border-radius: var(--dui-radius-sm, .375rem); font-size: .75rem; font-weight: 500; line-height: 1;
        white-space: nowrap; color: var(--gray-600); background: var(--dui-hover, rgb(0 0 0 / .05)); transition: color .15s ease-out, background-color .15s ease-out; }
    .ddi-today:hover, .ddi-today:focus-visible { color: var(--primary-700); background: color-mix(in oklab, var(--primary-500) 12%, transparent); }
    .ddi-today:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }
    .dark .ddi-today { color: var(--gray-300); background: rgb(255 255 255 / .08); }
    .dark .ddi-today:hover, .dark .ddi-today:focus-visible { color: var(--primary-300); }
    .fi-input-wrp:has(.ddi-today) .fi-input-wrp-suffix { gap: 0; }
    .fi-input-wrp:has(.ddi-today) .fi-input-wrp-suffix > .fi-input-wrp-label { display: inline-flex; align-items: center; padding: 0 .25rem 0 .5rem; }
    .fi-input-wrp:has(input:not(:placeholder-shown)) .fi-input-wrp-suffix > .fi-input-wrp-label:has(.ddi-today), .fi-input-wrp.fi-disabled .fi-input-wrp-label:has(.ddi-today) { display: none; }
    @media (pointer: coarse) { .ddi-today { height: 2rem; padding: 0 .625rem; font-size: .8125rem; } }