/* Shared controls and restrained feedback for every Zimmis surface. */
:root{--ui-ease:cubic-bezier(.2,.7,.2,1);--ui-fast:150ms;--ui-focus:#75816b;--ui-control-border:#7e8c74;--ui-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 7.5 5 5 5-5' stroke='%23687c5b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html{scroll-padding-top:20px}html:has(.site-header),html:has(.header){scroll-behavior:smooth}
:is(button,a,summary,input,select,textarea){-webkit-tap-highlight-color:transparent}
:is(button,a.button,summary,.nav-item){transition:background-color var(--ui-fast) var(--ui-ease),border-color var(--ui-fast) var(--ui-ease),color var(--ui-fast) var(--ui-ease),box-shadow var(--ui-fast) var(--ui-ease),transform 130ms var(--ui-ease),opacity var(--ui-fast) var(--ui-ease)}
:is(button,a,summary,input,select,textarea):focus-visible{outline:1px solid var(--ui-focus);outline-offset:2px}
:is(input:not([type=checkbox]):not([type=radio]),select,textarea){border-color:var(--ui-control-border,#7e8c74);transition:border-color var(--ui-fast) ease,box-shadow var(--ui-fast) ease,background-color var(--ui-fast) ease}
:is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{border-color:var(--ui-focus,#75816b);box-shadow:none;outline:none}:is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus-visible{outline:1px solid var(--ui-focus,#75816b);outline-offset:1px}
:is(button,a.button,summary):active:not(:disabled):not([aria-disabled=true]):not([aria-busy=true]){transform:scale(.975)}
button:disabled{cursor:default}button[aria-busy=true]{cursor:wait}
select:not([multiple]):not([size]){appearance:none;-webkit-appearance:none;background-image:var(--ui-chevron)!important;background-repeat:no-repeat!important;background-position:right 8px center!important;background-size:14px 14px!important;padding-inline-end:28px!important;cursor:pointer}
select:disabled{cursor:default}.za-chevron{width:14px;height:14px;flex:0 0 14px;font-size:0;line-height:0;transition:transform 180ms var(--ui-ease)}.za-chevron::before{content:"";display:block;width:14px;height:14px;background:var(--ui-chevron) center/contain no-repeat}.za-menu[open] .za-chevron{transform:rotate(180deg)}
/* Identical geometry, independent of font metrics and the surrounding button size. */
button.ui-close{position:relative;padding:0!important;font-size:0!important;line-height:0;box-sizing:border-box;flex-shrink:0}
button.ui-close::before,button.ui-close::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:0;border:0;border-radius:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}
button.ui-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.dialog-header button.ui-close{width:36px;height:36px;flex-basis:36px;min-height:36px;border:1px solid #d9e0d1;border-radius:7px;background:#f4f7ef;color:#5b704d}
.forecast-tooltip button.ui-close{position:absolute}.toast button.ui-close{width:26px;height:26px;min-width:26px;min-height:26px}
.ui-press-surface{position:relative}.ui-wave{position:absolute;pointer-events:none;z-index:0;border-radius:50%;background:currentColor;opacity:0;transform:scale(.15);animation:ui-wave 380ms ease-out;contain:strict}
.ui-wave-layer{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0}
.ui-invalid{border-color:#b8684b!important;animation:ui-invalid 160ms ease-out}
dialog[open]{animation:ui-dialog-in 180ms var(--ui-ease)}dialog[open]::backdrop{animation:ui-backdrop-in 180ms ease-out}.tool-view:not([hidden]),.za-panel{animation:ui-content-in 170ms var(--ui-ease)}.toast:not([hidden]),.form-error:not([hidden]),#account-message:not([hidden]),.za-error:not([hidden]){animation:ui-notice-in 180ms var(--ui-ease)}
.hero-copy,.hero-text,.account-panel{animation:ui-page-in 420ms var(--ui-ease)}.hero-art{animation:ui-page-in 520ms var(--ui-ease)}
@media(hover:hover){:is(.button,.za-login):hover:not(:disabled):not([aria-disabled=true]){transform:translateY(-1px);box-shadow:0 4px 12px #26351c0d}button.ui-close:hover:not(:disabled){background-color:color-mix(in srgb,currentColor 9%,transparent)}:is(.catalog-card,.restaurant-card,.team-card,.shopping-list-card){transition:border-color 180ms ease,box-shadow 180ms ease}:is(.catalog-card,.restaurant-card,.team-card,.shopping-list-card):hover{border-color:#aab99a;box-shadow:0 4px 18px #26351c08}}
@keyframes ui-spin{to{transform:rotate(360deg)}}
@keyframes ui-wave{0%{opacity:.14;transform:scale(.15)}100%{opacity:0;transform:scale(1)}}
@keyframes ui-dialog-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ui-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes ui-content-in{from{opacity:.35}to{opacity:1}}
@keyframes ui-notice-in{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@keyframes ui-page-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes ui-invalid{0%,100%{translate:0 0}35%{translate:-2px 0}70%{translate:2px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.ui-wave{display:none}:is(button,a.button,summary):active{transform:none!important}}

/* A single vector arrow avoids platform-dependent emoji glyphs, including on iOS. */
:root{--ui-arrow-ne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 15 15 5M5.5 5H15v9.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ui-arrow,.ui-arrow-link::after{display:inline-block;width:1em;height:1em;flex:0 0 1em;vertical-align:-.12em;background-color:currentColor;-webkit-mask:var(--ui-arrow-ne) center/contain no-repeat;mask:var(--ui-arrow-ne) center/contain no-repeat;pointer-events:none}
.ui-arrow-link::after{content:'';margin-inline-start:.45em}.ui-arrow-link:is(button,.button){column-gap:8px}.ui-arrow-link:is(button,.button)::after{margin-inline-start:0}

/* Checkbox focus follows the same thin neutral treatment as text inputs. */
input[type=checkbox]:focus{outline:none;box-shadow:none}
input[type=checkbox]:focus-visible{outline:1px solid var(--ui-focus,#75816b);outline-offset:1px;box-shadow:none}

:root{--ui-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.ui-plus,.ui-plus-link::after,.ui-plus-link.ui-plus-leading::before{display:inline-block;width:1em;height:1em;flex:0 0 1em;vertical-align:-.12em;background-color:currentColor;-webkit-mask:var(--ui-plus) center/contain no-repeat;mask:var(--ui-plus) center/contain no-repeat;pointer-events:none}
.ui-plus-link::after,.ui-plus-link.ui-plus-leading::before{content:''}.ui-plus-link::after{margin-inline-start:.4em}.ui-plus-link:is(button,.button){column-gap:8px}.ui-plus-link:is(button,.button)::after{margin-inline-start:0}.ui-plus-link.ui-plus-leading::after{display:none}.ui-plus-link.ui-plus-leading::before{margin-inline-end:.3em}.ui-plus-link.ui-plus-leading:is(button,.button)::before{margin-inline-end:0}

/* Shared scroll rails: quiet thumb, transparent track, no native arrow buttons. */
*{scrollbar-width:thin;scrollbar-color:#a4b496 transparent}
@supports selector(::-webkit-scrollbar){
  *{scrollbar-width:auto!important;scrollbar-color:auto!important}
  *::-webkit-scrollbar{width:6px;height:6px;background:transparent}
  *::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent}
  *::-webkit-scrollbar-thumb{min-height:28px;border:1px solid transparent;border-radius:99px;background:#a4b496;background-clip:padding-box}
  *::-webkit-scrollbar-thumb:hover{background-color:#789069}
  *::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important;background:transparent!important}
  dialog::-webkit-scrollbar-track:vertical{margin-top:var(--dialog-scroll-inset,0px);margin-bottom:10px}
}
@media(forced-colors:active){*{scrollbar-color:auto}*::-webkit-scrollbar-thumb{background:CanvasText}}

/* Pending is owned by the real controller's aria-busy state, never inferred from disabled.
   A painted inner edge leaves button width, labels, plus/arrow icons and focus rings intact. */
@media screen {
  :is(body[data-design],body.landing-page,body.invite-page,body[data-admin-copy]) button[aria-busy=true]:not(.ui-close) {
    cursor:wait;
    opacity:.92;
    animation:ui-busy-feedback 1100ms ease-in-out infinite;
  }
  :is(body[data-design],body.landing-page,body.invite-page,body[data-admin-copy]) button[aria-busy=true]:not(.ui-close):disabled {
    opacity:.92;
  }
  #cloud-state[aria-busy=true]::before {
    content:"";
    display:inline-block;
    box-sizing:border-box;
    width:13px;
    height:13px;
    margin-inline-end:7px;
    vertical-align:-2px;
    border:1.5px solid currentColor;
    border-right-color:transparent;
    border-radius:50%;
    animation:ui-spin 800ms linear infinite;
  }
  #cloud-state:is(.is-error,[data-save-state=error]),
  body[data-design="workspace"] .workspace-topbar #cloud-state:is(.is-error,[data-save-state=error]) {
    color:var(--friendly-danger,#a94343);
  }
  body[data-design=workspace] .resource-loading {
    border:1px solid var(--friendly-border,#dce4d8);
    border-radius:var(--friendly-radius,12px);
    background:var(--friendly-surface,#fff);
    box-shadow:var(--friendly-shadow,0 3px 16px rgb(26 48 34 / .06));
  }
  body[data-design=workspace] .resource-loading-copy>.eyebrow {
    font-size:12px;
    color:var(--friendly-muted,#5f6f63);
  }
  body[data-design=workspace] .resource-loading-copy>strong {
    color:var(--friendly-ink,#283d30);
    font-size:18px;
    line-height:1.5;
  }
  body[data-design=workspace] .resource-loading-note {
    color:var(--friendly-muted,#5f6f63);
    font-size:13px;
    line-height:1.65;
  }
  body[data-design=workspace] .resource-loading-spinner {
    border-color:#e2eadc;
    border-top-color:var(--friendly-accent,#365b43);
    border-right-color:#87a07d;
  }
  body[data-design=workspace] .resource-loading-track {
    background:var(--friendly-surface-subtle,#f0f4ed);
    border-radius:4px;
  }
  body[data-design=workspace] .resource-loading-track::after {
    background:linear-gradient(90deg,#e0ead9,#8ba87e,#e0ead9);
  }
  body[data-design=workspace] .resource-loading-card {
    border-color:var(--friendly-border,#dce4d8);
    border-radius:10px;
    background:#f8faf5;
  }
  body[data-design=workspace] .resource-skeleton {
    background-image:linear-gradient(100deg,#e8eee2 20%,#f7faf4 45%,#e8eee2 70%);
  }
  body[data-design=workspace] .area-status:not(.is-loading) {
    border-color:var(--friendly-border,#dce4d8);
    border-radius:var(--friendly-radius-small,8px);
    background:var(--friendly-surface,#fff);
    color:var(--friendly-ink,#283d30);
    font-size:13px;
    line-height:1.65;
  }
  body[data-design=workspace] .area-status.is-error:not(.is-loading) {
    border-color:#e4c7c0;
    background:#fff8f5;
    color:var(--friendly-danger,#a94343);
  }
  body[data-design] .toast:not([hidden]) {
    font-size:13px;
    line-height:1.6;
    border-radius:var(--friendly-radius,12px);
  }
}
@keyframes ui-busy-feedback {
  0%,100% {box-shadow:inset 0 -3px 0 color-mix(in srgb,currentColor 25%,transparent)}
  50% {box-shadow:inset 0 -3px 0 color-mix(in srgb,currentColor 75%,transparent)}
}
@media screen and (prefers-reduced-motion:reduce) {
  :is(body[data-design],body.landing-page,body.invite-page,body[data-admin-copy]) button[aria-busy=true]:not(.ui-close) {
    box-shadow:inset 0 -3px 0 currentColor;
  }
  #cloud-state[aria-busy=true]::before {animation:none;}
}
@media screen and (forced-colors:active) {
  :is(body[data-design],body.landing-page,body.invite-page,body[data-admin-copy]) button[aria-busy=true]:not(.ui-close) {
    text-decoration:underline dotted;
    text-underline-offset:4px;
  }
}