/* Recipes = base + size + variant + state. Native semantics drive behavior. Lagoon Premium treatments. */

/* Button: a 56px pill. Solid is the one primary action per screen (sky fill, ink text). */
.button{--control-height:var(--control-xl);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-height);padding:0 var(--space-6);border:var(--border-width) solid transparent;border-radius:var(--radius-full);background:var(--accent);color:var(--accent-fg);font-size:var(--text-md);line-height:var(--line-height-normal);font-weight:var(--weight-semibold);letter-spacing:var(--letter-spacing-snug);text-decoration:none;transition:background-color var(--motion-normal) var(--ease),border-color var(--motion-normal) var(--ease),color var(--motion-normal) var(--ease),transform var(--motion-fast) var(--ease)}
.button:hover{background:var(--accent-hover);color:var(--accent-fg)}.button:active{background:var(--accent-pressed);transform:scale(.98)}
.button .icon{width:1.25rem;height:1.25rem}
.button[data-variant="outline"]{border-color:var(--border);background:var(--bg-surface);color:var(--fg)}
.button[data-variant="outline"]:hover{border-color:var(--border-strong);background:var(--bg-surface);color:var(--fg)}
.button[data-variant="subtle"]{background:var(--bg-subtle);color:var(--fg)}.button[data-variant="subtle"]:hover{background:var(--bg-muted);color:var(--fg)}
.button[data-variant="ghost"]{background:transparent;color:var(--fg)}.button[data-variant="ghost"]:hover{background:var(--bg-muted);color:var(--fg)}
/* Link: the secondary action. Underlined ink text, no box. */
.button[data-variant="link"]{--control-height:var(--control-lg);padding-inline:var(--space-1);background:transparent;color:var(--fg);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--border-strong)}
.button[data-variant="link"]:hover{background:transparent;color:var(--fg);text-decoration-color:currentColor}
.button[data-variant="link"]:active{transform:none}
.button[data-size="sm"]{--control-height:var(--control-md);padding-inline:var(--space-4);font-size:var(--text-ui);line-height:var(--line-height-compact)}
.button[data-size="md"]{--control-height:var(--control-lg)}
.button[data-width="full"]{display:flex;width:100%}
.button:disabled,.button[aria-disabled="true"]{background:var(--bg-muted);border-color:transparent;color:var(--fg-muted);pointer-events:none}
.button[data-variant="link"]:disabled,.button[data-variant="ghost"]:disabled{background:transparent;color:var(--fg-disabled)}
.button[aria-busy="true"]{pointer-events:none}.button[aria-busy="true"]::before{content:'';width:1.125rem;height:1.125rem;border:2px solid currentColor;border-right-color:transparent;border-radius:var(--radius-full);animation:spin .8s linear infinite}
.button--icon{width:var(--control-height);padding:0;flex:none}.button--icon[data-variant="ghost"]{--control-height:var(--touch-target)}
.button--icon[data-variant="subtle"],.button--icon[data-variant="outline"]{--control-height:var(--touch-target)}
.button--danger{background:var(--danger);color:var(--bg-surface)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Field: 15px label above a 56px filled control with a 16px radius. */
.field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.field__label,legend{font-size:var(--text-ui);line-height:var(--line-height-compact);font-weight:var(--weight-medium);color:var(--fg)}
.field__label[data-size="sm"]{font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--fg-secondary)}
.required{color:var(--danger);text-decoration:none}
.field__control{width:100%;min-height:var(--control-xl);padding:0 var(--space-4);border:var(--border-width) solid var(--border-control);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--fg);font-size:var(--text-md);line-height:var(--line-height-normal);transition:border-color var(--motion-fast) var(--ease),box-shadow var(--motion-fast) var(--ease),background-color var(--motion-fast) var(--ease)}
.field__control:hover{border-color:var(--border-strong)}
.field__control:focus-visible{outline:none;border-color:var(--brand-primary-border);background:var(--bg-surface);box-shadow:0 0 0 var(--focus-width) var(--focus-ring)}
.field__control[data-size="sm"]{min-height:var(--control-md)}
.field__control[readonly]{color:var(--fg-secondary)}
.field__affix{position:relative;display:grid}.field__affix>.icon{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);color:var(--fg-muted);pointer-events:none}.field__affix>.field__control{padding-left:var(--space-12)}
/* Keep native select behavior; a decorative chevron has a consistent inset. */
.select{position:relative;display:grid;min-width:0;color:var(--fg-muted)}
.select::after{content:'';position:absolute;right:var(--space-4);top:50%;width:var(--space-2);height:var(--space-2);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.select>select.field__control{appearance:none;padding-inline-end:var(--space-10)}
.select:has(select:disabled)::after{opacity:.55}
@media(forced-colors:active){.select>select.field__control{appearance:auto}.select::after{display:none}}
textarea.field__control{min-height:7rem;padding-block:var(--space-3);resize:vertical}.field__control::placeholder{color:var(--fg-placeholder);opacity:1}.field__control:disabled{color:var(--fg-disabled);background:var(--bg-muted);opacity:1}
.field__control[aria-invalid="true"]{border-color:var(--danger);background:var(--danger-bg)}.field__control[aria-invalid="true"]:focus-visible{box-shadow:0 0 0 var(--focus-width) var(--danger-border)}
.field__help,.field__error{font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--fg-muted)}
.field__error{display:flex;gap:var(--space-1-5);align-items:flex-start;color:var(--danger);font-weight:var(--weight-medium)}.field__error .icon{width:1rem;height:1rem;margin-top:1px}
.field__confirm{display:flex;gap:var(--space-1-5);align-items:center;font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--fg-secondary)}.field__confirm .icon{width:1rem;height:1rem;color:var(--success)}
fieldset{border:0;margin:0;padding:0;min-width:0}legend{padding:0;margin-bottom:var(--space-2)}

/* Choice: native radio or checkbox in a label. 22px indicators. */
.choice{position:relative;display:flex;align-items:center;gap:var(--space-3-5);min-height:var(--control-lg);cursor:pointer;font-size:var(--text-md);line-height:var(--line-height-normal);color:var(--fg)}
.choice input{appearance:none;margin:0;flex:none;display:grid;place-items:center;width:var(--indicator);height:var(--indicator);border:var(--border-width-control) solid var(--control-border);background:var(--bg-surface);transition:border-color var(--motion-fast) var(--ease),background-color var(--motion-fast) var(--ease),box-shadow var(--motion-fast) var(--ease)}
.choice:hover input:not(:checked):not(:disabled){border-color:var(--fg-secondary)}
.choice input[type="radio"]{border-radius:var(--radius-full)}
.choice input[type="radio"]::before{content:'';width:.5rem;height:.5rem;border-radius:var(--radius-full);background:var(--control-checked-on);transform:scale(0);transition:transform var(--motion-fast) var(--ease-out)}
.choice input[type="radio"]:checked{border-color:var(--control-checked);background:var(--control-checked)}.choice input[type="radio"]:checked::before{transform:scale(1)}
.choice input[type="checkbox"]{border-radius:var(--space-1-5)}
/* The tick: a thin rotated L in white. */
.choice input[type="checkbox"]::before{content:'';width:.3125rem;height:.625rem;margin-top:-2px;border:solid var(--control-checked-on);border-width:0 var(--border-width-strong) var(--border-width-strong) 0;transform:rotate(45deg) scale(0);transition:transform var(--motion-fast) var(--ease-out)}
.choice input[type="checkbox"]:checked{border-color:var(--control-checked);background:var(--control-checked)}.choice input[type="checkbox"]:checked::before{transform:rotate(45deg) scale(1)}
.choice:hover input:checked:not(:disabled){border-color:var(--control-checked-hover);background:var(--control-checked-hover)}
.choice input[type="checkbox"]:indeterminate{border-color:var(--control-checked);background:var(--control-checked)}.choice input[type="checkbox"]:indeterminate::before{width:.5rem;height:0;margin:0;border-width:0 0 var(--border-width-strong);transform:none}
/* Locked: chosen and not changeable (for example, a required Fast Track). It keeps the checked fill; a lock icon beside the label says why. */
.choice input[type="checkbox"]:checked:disabled,.choice input[type="radio"]:checked:disabled{border-color:var(--control-checked);background:var(--control-checked)}
.choice input:disabled:not(:checked){border-color:var(--border);background:var(--bg-muted)}
.choice:has(input:disabled){cursor:not-allowed;color:var(--fg-muted)}
.choice:has(input:checked:disabled){cursor:default;color:var(--fg)}
.choice__lock{display:inline-flex;align-items:center;gap:var(--space-1);margin-left:var(--space-1-5);color:var(--fg-muted);vertical-align:-2px}.choice__lock .icon{width:1rem;height:1rem}
.choice input:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
.choice__body{display:flex;flex:1;flex-direction:column;gap:calc(var(--space-1) / 2);min-width:0}
.choice__head{display:flex;justify-content:space-between;gap:var(--space-3);align-items:baseline}
.choice__title{display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);font-weight:var(--weight-semibold)}
.choice__meta{font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--fg-muted)}
.choice__note{font-size:var(--text-sm);line-height:var(--line-height-normal);color:var(--fg-secondary)}
.choice__price{flex:none;font-weight:var(--weight-semibold)}.choice__head>:last-child{flex:none;white-space:nowrap}
/* Row: hairline-separated list of choices (cover tiers, payment methods). */
.choice[data-variant="row"]{align-items:flex-start;padding-block:var(--space-4);border-bottom:var(--border-width) solid var(--border)}
.choice[data-variant="row"]:last-child{border-bottom:0}.choice[data-variant="row"] input{margin-top:1px}
/* Card: a filled option tile; selected gains a sky tint and a 2px brand ring. */
.choice[data-variant="card"]{align-items:flex-start;padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:inset 0 0 0 var(--border-width) var(--border-control);transition:background-color var(--motion-fast) var(--ease),box-shadow var(--motion-fast) var(--ease)}
.choice[data-variant="card"] input{margin-top:1px}
.choice[data-variant="card"]:hover{box-shadow:inset 0 0 0 var(--border-width) var(--border-strong)}
.choice[data-variant="card"]:has(input:checked){background:var(--brand-primary-subtle);box-shadow:inset 0 0 0 var(--border-width-control) var(--control-checked)}
.choice[data-variant="card"]:has(input:disabled){background:var(--bg-muted);box-shadow:none;opacity:.8}
/* Tile: a compact pill-shaped option without an indicator (contact type). */
.choice[data-variant="tile"]{justify-content:center;min-height:var(--control-xl);padding:0 var(--space-3);border-radius:var(--radius-full);background:var(--bg-subtle);font-size:var(--text-ui);font-weight:var(--weight-semibold);text-align:center;box-shadow:inset 0 0 0 var(--border-width-strong) transparent}
.choice[data-variant="tile"] input{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--radius-full);background:transparent;opacity:0}
.choice[data-variant="tile"]:has(input:checked){background:var(--brand-primary-subtle);box-shadow:inset 0 0 0 var(--border-width-control) var(--control-checked)}
.choice[data-variant="tile"]:has(input:focus-visible){outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
.choice-list{display:flex;flex-direction:column}.choice-list[data-gap]{gap:var(--space-2-5)}
.choice-list[data-variant="boxed"]{padding:0 var(--space-5);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:inset 0 0 0 var(--border-width) var(--border-control)}
.choice-list[data-variant="boxed"] .choice[data-variant="row"]{border-bottom-color:var(--border)}

/* Segmented: radio group as pills on a subtle track; the selected pill takes the brand fill. */
/* Segmented: a slim mist track (48px) whose chosen option is a raised white pill, iOS-style; options are 44px and their
   hit area reaches the track edge. */
.segmented{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:var(--space-1);padding:calc(var(--space-1) / 2);border-radius:var(--radius-full);background:var(--bg-subtle)}
.segmented label{position:relative;display:grid;place-items:center;min-height:var(--control-md);padding:0 var(--space-2);border-radius:var(--radius-full);color:var(--fg-secondary);font-size:var(--text-ui);line-height:var(--line-height-compact);font-weight:var(--weight-medium);text-align:center;cursor:pointer;transition:background-color var(--motion-normal) var(--ease),color var(--motion-normal) var(--ease),box-shadow var(--motion-normal) var(--ease)}
.segmented input{position:absolute;inset:calc(var(--space-1) / -2) 0;margin:0;opacity:0;cursor:pointer}
.segmented label:hover{color:var(--fg)}
.segmented label:has(input:checked){background:var(--bg-surface);color:var(--fg);font-weight:var(--weight-semibold);box-shadow:var(--shadow-sm)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .segmented label:has(input:checked){background:var(--bg-muted)}}
:root[data-theme="dark"] .segmented label:has(input:checked){background:var(--bg-muted)}
.segmented label:has(input:focus-visible){outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}

/* Stepper: 44px round minus and plus around a live count. */
.stepper{display:flex;align-items:center;gap:var(--space-3)}
.stepper__button{display:grid;place-items:center;width:var(--stepper);height:var(--stepper);padding:0;border:0;border-radius:var(--radius-full);background:var(--bg-subtle);color:var(--fg);transition:background-color var(--motion-fast) var(--ease)}
.stepper__button:hover{background:var(--bg-muted)}.stepper__button:disabled{color:var(--fg-disabled);background:var(--bg-subtle);opacity:.6}
.stepper__value{min-width:var(--space-6);text-align:center;font-size:var(--text-body-lg);line-height:var(--line-height-compact);font-weight:var(--weight-semibold)}

.switch{appearance:none!important;position:relative;flex:none;width:3.125rem!important;height:1.875rem!important;margin:0;border:0;border-radius:var(--radius-full);background:var(--border-strong);cursor:pointer;transition:background var(--motion-normal) var(--ease)}
.switch::before{content:'';position:absolute;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--white);left:3px;top:3px;box-shadow:var(--shadow-sm);transition:transform var(--motion-normal) var(--ease-out)}.switch:checked{background:var(--brand-primary)}.switch:checked::before{transform:translateX(1.25rem)}
.switch:disabled{opacity:.6;cursor:not-allowed}

/* Surface deliberately has NO padding, layout, or content slots. */
.surface{background:var(--bg-surface);border-radius:var(--radius-xl)}.surface[data-treatment="subtle"]{background:var(--bg-subtle)}.surface[data-treatment="outline"]{border:var(--border-width) solid var(--border)}.surface[data-treatment="raised"]{box-shadow:var(--shadow-lg)}

/* Badge: a small tinted pill. Text carries the meaning; color only reinforces it. */
.badge{display:inline-flex;align-items:center;gap:var(--space-1);width:fit-content;padding:calc(var(--space-1) / 2) var(--space-2-5);border-radius:var(--radius-full);background:var(--bg-muted);color:var(--fg-secondary);font-size:var(--text-sm);line-height:var(--line-height-normal);font-weight:var(--weight-semibold);white-space:nowrap}
.badge[data-size="sm"]{padding-inline:var(--space-2);font-size:var(--text-xs);line-height:var(--line-height-compact)}
.badge[data-status="success"]{background:var(--success-bg);color:var(--success)}.badge[data-status="warning"]{background:var(--warning-bg);color:var(--warning)}.badge[data-status="danger"]{background:var(--danger-bg);color:var(--danger)}.badge[data-status="info"],.badge[data-status="brand"]{background:var(--brand-primary-subtle);color:var(--fg-brand-primary)}

.tabs__list{display:flex;gap:var(--space-2);border-bottom:var(--border-width) solid var(--border);overflow:auto}.tabs__tab{border:0;border-bottom:var(--border-width-strong) solid transparent;background:transparent;color:var(--fg-muted);min-height:var(--touch-target);padding:var(--space-2) var(--space-4);white-space:nowrap;font-size:var(--text-ui);line-height:var(--line-height-compact);font-weight:var(--weight-semibold)}
.tabs__tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--brand-primary-border)}.tabs__tab:disabled{opacity:.45}.tabs__panel{padding-block:var(--space-4)}
.tabs[data-variant="segmented"] .tabs__list{border:0;border-radius:var(--radius-full);padding:var(--space-1);background:var(--bg-subtle);gap:var(--space-1)}.tabs[data-variant="segmented"] .tabs__tab{flex:1;border:0;border-radius:var(--radius-full);font-size:var(--text-md);line-height:var(--line-height-normal)}.tabs[data-variant="segmented"] .tabs__tab[aria-selected="true"]{background:var(--brand-primary);color:var(--brand-primary-on)}

/* Alert (notice): a tinted, borderless 20px-radius panel; icon and title take the status colour, the body stays ink. */
.alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);background:var(--info-bg);color:var(--fg);font-size:var(--text-ui);line-height:var(--line-height-compact)}
.alert>.icon{margin-top:1px;color:var(--info)}
.alert__body{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.alert__title{font-size:var(--text-md);line-height:var(--line-height-normal);font-weight:var(--weight-semibold);color:var(--fg)}
.alert__text{color:var(--fg)}.alert__text[data-tone="secondary"]{color:var(--fg-secondary)}
.alert[data-status="success"]{background:var(--success-bg)}.alert[data-status="success"]>.icon,.alert[data-status="success"] .alert__title{color:var(--success)}
.alert[data-status="warning"]{background:var(--warning-bg)}.alert[data-status="warning"]>.icon,.alert[data-status="warning"] .alert__title{color:var(--warning)}
.alert[data-status="danger"]{background:var(--danger-bg)}.alert[data-status="danger"]>.icon,.alert[data-status="danger"] .alert__title{color:var(--danger)}
.alert[data-status="neutral"]{background:var(--bg-subtle)}.alert[data-status="neutral"]>.icon{color:var(--fg)}
.alert[data-status="neutral"][data-tone="success"]>.icon,.alert[data-status="neutral"][data-tone="success"] .alert__title{color:var(--success)}
/* Panel: a quiet subtle note (route summary, tips). */
.alert[data-status="panel"]{background:var(--bg-subtle);color:var(--fg-secondary)}.alert[data-status="panel"]>.icon{color:var(--fg)}.alert[data-status="panel"] .alert__text{color:var(--fg-secondary)}
.alert__actions{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);margin-top:var(--space-1)}

.dialog{max-width:min(var(--content-sm),calc(100% - var(--space-8)));width:100%;max-height:calc(100dvh - var(--space-8));padding:var(--space-6);border:0;border-radius:var(--radius-2xl);background:var(--bg-surface);color:var(--fg);box-shadow:var(--shadow-lg);overflow:auto}.dialog::backdrop{background:var(--scrim);backdrop-filter:blur(2px)}
.dialog[open]{animation:dialog-in var(--motion-normal) var(--ease-out)}.dialog[open]::backdrop{animation:fade-in var(--motion-normal) var(--ease)}
.dialog [tabindex="-1"]:focus{outline:none}
.dialog__head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}
.dialog__head .button--icon{margin-right:calc(var(--space-2) * -1);background:var(--bg-subtle)}
.dialog__actions{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-6)}body:has(dialog[open]){overflow:hidden}
@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@keyframes fade-in{from{opacity:0}to{opacity:1}}
.avatar{display:inline-grid;place-items:center;overflow:hidden;width:var(--control-md);height:var(--control-md);flex:none;border-radius:var(--radius-full);background:var(--brand-primary-muted);color:var(--fg);font-size:var(--text-ui);line-height:var(--line-height-compact);font-weight:var(--weight-semibold)}.avatar[data-size="sm"]{width:var(--control-sm);height:var(--control-sm);font-size:var(--text-xs)}.avatar[data-size="lg"]{width:var(--space-16);height:var(--space-16);font-size:var(--text-xl)}.avatar img{width:100%;height:100%;object-fit:cover}
.search{position:relative;display:flex;align-items:center}.search>.icon{position:absolute;left:var(--space-4);pointer-events:none;color:var(--fg-muted)}.search input{padding-left:var(--space-12);padding-right:var(--space-12)}.search input::-webkit-search-cancel-button{appearance:none}.search__clear{position:absolute;right:var(--space-1);min-height:var(--touch-target);width:var(--touch-target);border:0;border-radius:var(--radius-full);background:transparent;color:var(--fg-muted)}
.menu{position:fixed;inset:auto;margin:0;min-width:12rem;max-width:calc(100vw - var(--space-4));max-height:calc(100dvh - var(--space-4));overflow:auto;padding:var(--space-1-5);border:0;border-radius:var(--radius-lg);background:var(--bg-surface);color:var(--fg);box-shadow:var(--shadow-lg)}
.menu__item{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:var(--touch-target);border:0;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);background:transparent;color:var(--fg);text-align:left;text-decoration:none;font-size:var(--text-ui);line-height:var(--line-height-compact);font-weight:var(--weight-regular)}.menu__item:hover,.menu__item:focus{background:var(--bg-subtle);color:var(--fg)}.menu__item:disabled{opacity:.4}.menu__divider{border:0;border-top:var(--border-width) solid var(--border);margin:var(--space-1)}
@media(pointer:coarse),(max-width:699px){.button,.field__control{min-height:max(var(--control-height,var(--control-xl)),var(--touch-target))}.button--icon{min-width:var(--touch-target)}}

/* Date fields: the native picker icon is replaced by Phosphor calendar-blank (Regular), drawn as a mask so it takes the theme colour.
   The picker itself still opens on click (Chromium and Safari); Firefox keeps its own icon. */
input[type="date"].field__control::-webkit-calendar-picker-indicator{width:1.25rem;height:1.25rem;padding:0;margin:0;background:var(--fg-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z'/%3E%3C/svg%3E") center/contain no-repeat;cursor:pointer;opacity:1;transition:background-color var(--motion-fast) var(--ease)}
input[type="date"].field__control:hover::-webkit-calendar-picker-indicator{background:var(--fg)}