@layer page {
.task-dialog { --task-top: clamp(12px, calc((var(--vv-height, 100dvh) - 640px) / 2), 160px); position: fixed; inset: var(--vv-top, 0px) 0 auto; width: 100%; max-width: none; height: var(--vv-height, 100dvh); max-height: none; margin: 0; padding: var(--task-top) var(--gutter) 12px; border: 0; background: transparent; overflow: hidden; overflow: clip; cursor: pointer; container: task-view / size; -webkit-tap-highlight-color: transparent; }
.task-dialog:is([open], :popover-open) { display: block; }
.task-dialog:target:not([data-task-ready]) { display: block; }
.task-sheet { display: flex; flex-direction: column; width: min(640px, 100%); max-height: 100%; margin-inline: auto; overflow: hidden; cursor: auto; }
.task-sheet:focus { outline: none; }
.task-dialog::backdrop { background: color-mix(in srgb, var(--ink) 76%, transparent); }
html:has(.task-dialog:is(:modal, :popover-open)) { overflow: hidden; scrollbar-gutter: stable; }
.task-bar { display: flex; flex: none; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4) var(--s3) var(--s5); background: var(--teal); color: var(--yellow); --focus: var(--yellow); }
.task-disc { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--yellow); }
.task-bar h3 { flex: 1; min-width: 0; font-family: var(--font-action); font-size: clamp(1.625rem, 3.2vw, 2.25rem); font-weight: 600; line-height: 1.1; text-wrap: balance; }
.task-close { display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--yellow); color: var(--teal); transition: background-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out); }
.task-close:active { background: var(--orange); color: var(--ink); }
@media (hover: hover) { .task-close:hover { background: var(--orange); color: var(--ink); } }
.task-body { flex: 0 1 auto; min-height: 0; padding: var(--s5) var(--s6) var(--s6); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--teal) var(--yellow); scrollbar-width: thin; }
@container task-view (max-height: 420px) {
.task-bar { padding-block: var(--s1); }
.task-disc { display: none; }
.task-bar h3 { font-size: 1.5rem; }
.task-body { padding-block: var(--s4); }
}
.task-dialog .intake-fields { gap: var(--s5); }
.task-dialog .intake-submit { width: 100%; }
.task-dialog .intake-done:not([hidden]) { grid-template-columns: minmax(0, 1fr); justify-items: center; margin-inline: auto; padding-block: var(--s3); text-align: center; }
.task-dialog .intake-done .btn-row { justify-content: center; }
.task-dialog .signup-card { max-width: none; padding: 0; background: transparent; border: 0; border-radius: 0; }
@media (max-width: 767px) {
.task-dialog { padding: var(--s5) 0 0; }
.task-dialog:is([open], :popover-open) { display: flex; align-items: flex-end; }
.task-sheet { width: 100%; border-width: 1px 0 0; border-radius: var(--r-md) var(--r-md) 0 0; }
.task-bar { gap: var(--s3); padding: var(--s2) var(--s3) var(--s2) var(--gutter); }
.task-disc { width: 52px; height: 52px; }
.task-disc .campaign-icon { width: 36px; height: 36px; }
.task-body { padding: var(--s5) var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) {
.task-dialog:is([open], :popover-open) .task-sheet { animation: task-rise 260ms var(--ease-out) backwards; }
.task-dialog:is([open], :popover-open)::backdrop { animation: task-dim 200ms linear backwards; }
@keyframes task-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes task-dim { from { opacity: 0; } to { opacity: 1; } }
@keyframes task-sheet { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
.task-dialog:is([open], :popover-open) .task-sheet { animation: task-sheet 300ms var(--ease-out) backwards; }
}
@media (forced-colors: active) { .task-bar { border-bottom: 1px solid CanvasText; } }
}
.task-dialog .address-ac__panel { position: static; margin-top: 0; scroll-margin-block: var(--s4); }
.task-dialog .address-ac__list { max-height: clamp(7rem, calc(var(--vv-height, 100dvh) - 14rem), 22rem); }