/* Shared Zimmis / Dine surfaces. Leading component definitions and state ownership: docs/design-system.md. */
:root{--paper:#f3f4f0;--ink:#262d27;--muted:#5d6a57;--line:#dce3d5;--accent:#526b42;--green:#526b42;--soft:#eef3e7;--lime:#d2e2bc;--dine-forest:#334c3c;--dine-hover:#43654e;--dine-tint:#f1f5ed;--dine-edge:#91a77e;--dine-shadow:0 3px 16px #26351c06;--ui-control-border:#7e8c74;--ui-focus:#75816b;--ui-control-radius:6px;--ui-segment-height:38px;--ui-touch-target:44px;--ui-text-small:12px}
body[data-design]{background:var(--paper);color:var(--ink)}
body[data-design] :is(.button-primary,.button-dark,.button-select,.primary-link),body[data-design="account"] button[type=submit]{background:var(--dine-forest);color:#fff;border:1px solid var(--dine-forest);border-radius:6px}
body[data-design] .button-outline{background:#f5f7f1;color:#4e6143;border-color:var(--line);border-radius:6px}
body[data-design] :is(.za-panel,.za-error){border-radius:8px;border-color:var(--line)}
@media(hover:hover){body[data-design] :is(.button-primary,.button-dark,.button-select,.primary-link):hover:not(:disabled),body[data-design="account"] button[type=submit]:hover:not(:disabled){background:var(--dine-hover);border-color:var(--dine-hover);transform:none;box-shadow:0 3px 9px #23372a20}body[data-design] .button-outline:hover:not(:disabled){background:#e7eddf;border-color:#b6c6a6;transform:none;box-shadow:none}}
body[data-design] :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border-color:var(--ui-control-border);border-radius:var(--ui-control-radius)}
body[data-design] :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{outline:none;border-color:var(--ui-control-border);box-shadow:none}
body[data-design] :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus-visible{outline:1px solid var(--ui-focus);outline-offset:1px}
@media(hover:hover){body[data-design] :is(input:not([type=checkbox]):not([type=radio]),select,textarea):hover:not(:disabled){box-shadow:inset 0 2px 6px #26351c18}}
body[data-design] :is(input,textarea)::placeholder{color:var(--muted);opacity:1}
/* Workspace headings, panels and resource cards. */
body[data-design="workspace"] .main:has(.tool-view:not([hidden]),#restaurants-view:not([hidden]))>.workspace-header{display:none}
body[data-design="workspace"] :is(.section-toolbar,.restaurants-toolbar) h2{color:var(--dine-forest);font-size:23px;font-weight:550;letter-spacing:-.035em}
body[data-design="workspace"] :is(.section-toolbar,.restaurants-toolbar) h2::after{content:'';display:block;width:34px;height:3px;margin-top:9px;border-radius:3px;background:var(--dine-edge)}
body[data-design="workspace"] :is(.catalog-card,.restaurant-card,.team-panel,.shopping-list-card,.restaurant-editor){border:1px solid var(--line);border-top:3px solid var(--dine-edge);border-radius:10px;background:#fff;box-shadow:var(--dine-shadow)}
body[data-design="workspace"] :is(.team-card,.management-list .planning-card,.section-empty,.weekday-group,.season-range){border-color:var(--line);border-radius:8px}
body[data-design="workspace"] .team-card{background:#f8faf5}
body[data-design="workspace"] .team-card.is-archived{background:#f0f1ed;border-color:#bdc5b5;border-left:3px solid #879280;color:#52614a}
body[data-design="workspace"] .team-card.is-archived .resource-badge{background:#e3e7de;border-color:#b8c2ad;color:#47583e}
body[data-design="workspace"] :is(.catalog-card-head,.restaurant-card-top,.shopping-list-head){padding-bottom:13px;border-bottom:1px solid var(--line)}
body[data-design="workspace"] :is(.catalog-card h3,.restaurant-card h3,.shopping-list-head h3,.team-panel h3,.planning-card h4){color:var(--dine-forest)}
body[data-design="workspace"] .catalog-price{padding:4px 8px;background:#edf3e5;border-radius:5px;color:var(--dine-forest);font-size:13px}
body[data-design="workspace"] .tool-controls{padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--dine-tint)}
body[data-design="workspace"] :is(.section-empty,.empty-day){background:#f7f9f3;border-color:#cbd8bf;border-radius:8px}
body[data-design="workspace"] :is(.catalog-tag,.resource-badge,.restaurant-marker){border-radius:20px;border-color:var(--line);background:#f1f5eb;color:#5b734a}
body[data-design="workspace"] :is(.restaurant-editor>h2,.weekly-heading,.planning-heading){color:var(--dine-forest)}
body[data-design="workspace"] .weekly-heading{padding:17px;border:1px solid var(--line);border-radius:8px;background:var(--dine-tint)}
body[data-design="workspace"] :is(.planning-note,.planning-undo,.calculation-note,.legacy-ingredients){background:#f1f5eb;border-color:#d6e1c9;color:#536647}
body[data-design="workspace"] :is(.calendar-toolbar,.planning-scope-bar){background:var(--dine-tint);border-color:var(--line)}
body[data-design="workspace"] .calendar-section{border-top:3px solid var(--dine-edge);box-shadow:var(--dine-shadow)}
body[data-design="workspace"] .day-heading h2{color:var(--dine-forest)}
body[data-design="workspace"] .planning-card.kind-event{border-left-color:#91a77e}
body[data-design="workspace"] :is(.button-primary,.button-outline){min-height:36px}
/* Shared modal surfaces; native dialog behavior, field visibility and grids remain unchanged. */
body[data-design="workspace"] dialog{border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);box-shadow:0 22px 70px #17271626;max-height:90dvh;overscroll-behavior:contain}
body[data-design="workspace"] dialog::backdrop{background:#18211966;backdrop-filter:blur(3px)}
body[data-design="workspace"] dialog .dialog-header{position:sticky;top:0;z-index:4;padding:20px 24px;background:var(--dine-tint);border-bottom:1px solid var(--line)}
body[data-design="workspace"] dialog .dialog-header h2{color:var(--dine-forest);font-size:21px;font-weight:550;line-height:1.4}
body[data-design="workspace"] dialog .dialog-header .eyebrow{color:#607848}
body[data-design="workspace"] dialog .dialog-header .hours-hint{margin-bottom:0}
body[data-design="workspace"] dialog :is(form,.hours-dialog-content){background:#fff}
body[data-design="workspace"] dialog .form-actions{padding-top:16px;border-top:1px solid var(--line);gap:12px}
body[data-design="workspace"] dialog :is(.button-primary,.button-outline){border-radius:6px;min-height:40px;font-size:12px}
body[data-design="workspace"] dialog :is(input:not([type=checkbox]):not([type=radio]),select,textarea){background-color:#fff;font-size:14px}
body[data-design="workspace"] dialog :is(.dialog-empty,.hours-hint,.field-hint){color:var(--muted);line-height:1.8}
body[data-design="workspace"] dialog .ui-close{background:#f4f7ef;border-color:#d9e0d1;color:#5b704d}
body[data-design="workspace"] .event-date-options button{border-color:var(--line);border-radius:8px;background:#fff}
body[data-design="workspace"] .event-date-options button[aria-pressed=true]{background:#edf3e5;border-color:#a3b98f;box-shadow:inset 0 0 0 1px #a3b98f;color:#334f3d}
/* Dine landing: the same green palette and panel hierarchy, with its own marketing layout. */
body[data-design="dine-landing"] :is(h1 em,.closing em,.brand-dot,.step-top,.strip-star){color:var(--dine-forest)}
body[data-design="dine-landing"] :is(.preview-wrap,.closing){border:1px solid var(--line);border-top:3px solid var(--dine-edge);border-radius:10px;box-shadow:var(--dine-shadow);background:#fff}
body[data-design="dine-landing"] .preview-wrap{transform:none}
body[data-design="dine-landing"] :is(.preview-heading,.preview-footer,.development-panel){background:var(--dine-tint);border-color:var(--line)}
body[data-design="dine-landing"] :is(.development-pill,.platform-status,.step-status){color:#607848;border-color:#d0ddc3;background:#edf3e5;border-radius:20px}
body[data-design="dine-landing"] .steps{gap:18px}
body[data-design="dine-landing"] .steps li{padding:22px;border:1px solid var(--line);border-top:3px solid var(--dine-edge);border-radius:8px;background:#fff;box-shadow:var(--dine-shadow)}
body[data-design="dine-landing"] .platform-row{margin-bottom:10px;padding:18px;border:1px solid var(--line);border-radius:8px;background:#fff}
body[data-design="dine-landing"] .guru-icon{color:#526b42;background:#edf3e5}
body[data-design="dine-landing"] .closing{background:var(--dine-tint)}
body[data-design="dine-landing"] .closing .eyebrow{color:#607848}
body[data-design="dine-landing"] .question-list details[open]{padding-inline:14px;border-radius:7px;background:var(--dine-tint)}
body[data-design="dine-landing"] .development-symbol,body[data-design="dine-landing"] .strip-star{font-size:0}
body[data-design="dine-landing"] :is(.development-symbol,.strip-star)::before{content:'';display:inline-block;width:18px;height:18px;background:var(--dine-forest);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9'/%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 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 3v18M4.2 7.5l15.6 9M4.2 16.5l15.6-9'/%3E%3C/svg%3E") center/contain no-repeat}
body[data-design="dine-landing"] .development-symbol::before{width:43px;height:43px}
/* Central account and Zimmis pages keep their branding and adopt the same accents. */
body[data-design="account"] .account-panel{border-top:3px solid var(--dine-edge);border-radius:10px;box-shadow:var(--dine-shadow)}
body[data-design="account"] :is(.account-panel h2,.account-intro h1){color:var(--dine-forest)}
body[data-design="account"] .account-panel>.eyebrow{background:var(--dine-tint);border-radius:5px;padding:9px 11px;color:#607848}
body[data-design="account"] :is(.secondary,input){border-radius:6px;border-color:var(--line);background:#f7f9f3}
body[data-design="zimmis"] :is(.hero-art,.project){border:1px solid var(--line);border-radius:10px;box-shadow:var(--dine-shadow)}
body[data-design="zimmis"] .project-copy{background:#fff}
body[data-design="zimmis"] .tag{background:var(--dine-tint);border-radius:20px;color:#607848}
body[data-design="zimmis"] :is(.project-copy h3,.about h2){color:var(--dine-forest)}
@media(max-width:760px){body[data-design="workspace"] :is(.button-primary,.button-outline){min-height:44px}body[data-design="workspace"] .tool-controls{padding:13px}body[data-design="workspace"] dialog .dialog-header{padding:17px 16px}body[data-design="workspace"] dialog .dialog-header h2{font-size:20px}body[data-design="workspace"] dialog :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px}body[data-design="workspace"] dialog :is(.button-primary,.button-outline){min-height:44px;font-size:13px}body[data-design="dine-landing"] .steps li{padding:21px 20px 20px 55px}body[data-design="dine-landing"] .step-top>span{left:17px;top:18px}body[data-design="dine-landing"] .step-top svg{right:16px}body[data-design="dine-landing"] .platform-row{padding:15px}body[data-design="dine-landing"] .platform-status{margin-left:0;margin-top:4px}}

body[data-design="workspace"] .weekday-chip input:focus-visible+span{outline:1px solid var(--ui-focus);outline-offset:1px}
body[data-design="workspace"] .tool-controls>.tool-check{display:flex;align-items:center;gap:8px;margin:0;white-space:nowrap}
body[data-design="workspace"] .calendar-layout>.day-section{border-top:3px solid var(--dine-edge);box-shadow:var(--dine-shadow)}
body[data-design="workspace"] .workspace-header h1{font-size:32px;font-weight:550;color:var(--dine-forest)}
body[data-design="workspace"] .planning-filter.kind-event.is-active{background:#edf3e5;border-color:#b6c8a4;color:#526b42}
body[data-design="workspace"] .main{margin-block:0}

/* Workspace page titles share one baseline, underline and description rhythm. */
body[data-design="workspace"] :is(#workspace-title,#menu-heading,#catalog-heading,#shopping-heading,#appointments-heading,#tasks-heading,#restaurants-heading,#website-heading){font-size:23px;font-weight:550;line-height:1.35;letter-spacing:-.035em;margin:0 0 8px;color:var(--dine-forest)}
body[data-design="workspace"] :is(#workspace-title,#menu-heading,#catalog-heading,#shopping-heading,#appointments-heading,#tasks-heading,#restaurants-heading,#website-heading)::after{content:'';display:block;width:34px;height:3px;margin-top:9px;border-radius:3px;background:var(--dine-edge)}
body[data-design="workspace"] :is(.workspace-header,.tool-view>.section-toolbar,.restaurants-toolbar){align-items:flex-start;gap:20px;margin-bottom:24px}
body[data-design="workspace"] :is(.workspace-header .subtitle,.tool-view>.section-toolbar p,.restaurants-toolbar p){font-size:13px;line-height:1.75;margin:0;color:var(--muted)}
#menu-view>.menu-page-toolbar{margin-bottom:24px}


/* Password visibility shares field geometry while preserving password-manager space. */
body[data-design="account"] .password-control{display:flex;align-items:stretch;gap:6px;min-width:0}
body[data-design="account"] .password-control>input{flex:1;min-width:0;width:0}
body[data-design="account"] .password-visibility{flex:0 0 76px;align-self:stretch;min-height:var(--ui-touch-target);padding:7px 8px;border:1px solid var(--ui-control-border);border-radius:var(--ui-control-radius);background:#f5f7f0;color:var(--dine-forest);font:inherit;font-size:var(--ui-text-small);cursor:pointer}
body[data-design="account"] .password-visibility:hover{background:#e7eddf}
body[data-design="account"] #continue-account{margin:14px 0 20px}
/* One aligned capsule and green track for planning, dates, quantities and devices. */
:is(.planning-scope-switch,#menu-view .menu-date-shortcuts,#website-view .website-devices){--switch-count:2;--switch-gap:4px;position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(var(--switch-count),minmax(0,1fr));gap:var(--switch-gap);padding:4px;border:1px solid #d7e1cb;border-radius:8px;background:#edf2e6;box-sizing:border-box;min-width:0;max-width:100%}
#calendar-view .planning-scope-switch{width:300px}
:is(#menu-view .menu-date-shortcuts,#website-view .website-devices){--switch-count:3}
#website-view .website-devices{width:300px}
:is(.planning-scope-switch,#menu-view .menu-date-shortcuts,#website-view .website-devices)::before{content:'';position:absolute;z-index:0;pointer-events:none;box-sizing:border-box;inset:4px auto 4px 4px;width:calc((100% - 8px - var(--switch-gap)*(var(--switch-count) - 1))/var(--switch-count));border:1px solid #d5dfca;border-radius:5px;background:linear-gradient(#829b6a,#829b6a) center bottom 3px/18px 2px no-repeat,#fff;box-shadow:0 1px 4px #26351c12;transform:translateX(0);transition:transform 260ms cubic-bezier(.2,.7,.2,1)}
:is(.planning-scope-switch,#menu-view .menu-date-shortcuts,#website-view .website-devices):has(>button:nth-child(2)[aria-pressed=true])::before{transform:translateX(calc(100% + var(--switch-gap)))}
:is(#menu-view .menu-date-shortcuts,#website-view .website-devices):has(>button:nth-child(3)[aria-pressed=true])::before{transform:translateX(calc(200% + var(--switch-gap)*2))}
:is(.planning-scope-switch,#menu-view .menu-date-shortcuts,#website-view .website-devices)>button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-width:0;min-height:var(--ui-segment-height);margin:0;padding:7px 6px;border:1px solid transparent;border-radius:5px;box-sizing:border-box;background:transparent;box-shadow:none;color:var(--muted);font:inherit;font-size:12px;line-height:20px;text-align:center;white-space:nowrap;transition:background-color 180ms ease,color 180ms ease}
:is(.planning-scope-switch,#menu-view .menu-date-shortcuts,#website-view .website-devices)>button:is(.is-active,[aria-pressed=true]){background:transparent;border-color:transparent;box-shadow:none;color:var(--dine-forest)}
@media(hover:hover){:is(.planning-scope-switch,#menu-view .menu-date-shortcuts,#website-view .website-devices)>button:not([aria-pressed=true]):not(:active):not(:disabled):hover{background:rgb(255 255 255 / 75%);box-shadow:none}}
/* Clear the hover preview on press before the shared selection capsule moves. */
:is(.planning-scope-switch,#menu-view .menu-date-shortcuts,#website-view .website-devices)>button:active{background:transparent;box-shadow:none;transform:none}
:is(.planning-scope-switch,#menu-view .menu-date-shortcuts,#website-view .website-devices) .ui-wave{display:none}
#menu-view .menu-date-shortcuts button[aria-pressed=true]::after{content:none}
@media(max-width:760px){body[data-design="workspace"] :is(.workspace-header,.tool-view>.section-toolbar,.restaurants-toolbar){margin-bottom:20px}:is(#calendar-view .planning-scope-switch,#website-view .website-devices){width:100%}:is(.planning-scope-switch,#menu-view .menu-date-shortcuts,#website-view .website-devices)>button{min-height:var(--ui-touch-target)}}

/* Shared details found during the cross-page review: compact headers, neutral focus,
   consistent form typography and green content accents. Red remains a status color. */
body[data-design] ::selection{background:#dce8ce;color:#263d2a}
body[data-design] :is(button,a,summary):focus-visible{outline:1px solid var(--ui-focus);outline-offset:3px}
/* Proportional corners stay softly square at every existing checkbox size. */
body:where([data-design]) input:where([type=checkbox]){width:16px;height:16px}
body[data-design] input[type=checkbox]{appearance:none;-webkit-appearance:none;box-sizing:border-box;min-height:0;padding:0;flex-shrink:0;border:1px solid var(--ui-control-border);border-radius:20%;background-color:#fff;background-position:center;background-size:100% 100%;background-repeat:no-repeat;vertical-align:middle;cursor:pointer;transition:border-color 160ms ease,background-color 160ms ease}
body[data-design] input[type=checkbox]:checked{border-color:var(--dine-forest);background-color:var(--dine-forest);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8 3 3 6-6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
body[data-design] input[type=checkbox]:indeterminate{border-color:var(--dine-forest);background-color:var(--dine-forest);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
body[data-design] input[type=checkbox]:disabled{opacity:.5;cursor:default}
@media(forced-colors:active){body[data-design] input[type=checkbox]{appearance:auto;-webkit-appearance:auto}body[data-design] input[type=checkbox]:is(:checked,:indeterminate){background-image:none}}
body[data-design] input[type=checkbox]:focus-visible{outline:1px solid var(--ui-focus);outline-offset:1px;box-shadow:none}
body[data-design] .button :is(.ui-arrow,.ui-plus){font-size:14px;width:14px;height:14px;flex-basis:14px}
body[data-design] .button.ui-arrow-link::after{width:14px;height:14px;flex-basis:14px}
body[data-design="workspace"] :is(.catalog-card-head,.restaurant-card-top,.shopping-list-head,.team-panel>.section-toolbar){padding:12px 14px;border:1px solid var(--line);border-radius:7px;background:var(--dine-tint)}
body[data-design="workspace"] .catalog-card-head{align-items:center}
body[data-design="workspace"] :is(.restaurant-card-top h3,.shopping-list-head h3,.team-panel h3){font-size:20px;line-height:1.4}
body[data-design="workspace"] .team-panel>.section-toolbar{margin-bottom:16px}
body[data-design="workspace"] :is(.planning-card.kind-task,.planning-card.kind-appointment,.planning-card.kind-shopping){border-left-color:var(--dine-edge)}
body[data-design="workspace"] .planning-card{border-radius:8px}
body[data-design="workspace"] :is(.planning-meta,.planning-date,.restaurant-card-top p,.restaurant-contacts){font-size:12px;line-height:1.7}
body[data-design="workspace"] .planning-event-dates{font-size:12px;color:var(--muted)}
body[data-design="workspace"] label .optional{font-size:inherit;font-weight:inherit;color:inherit}
body[data-design="workspace"] label .optional::before{content:'('}
body[data-design="workspace"] label .optional::after{content:')'}
body[data-design="workspace"] .closure-range{background:#f7f9f3;border-color:var(--line);border-left-color:var(--dine-edge);border-radius:8px}
body[data-design="workspace"] :is(.profile-form-grid,.weekday-group,.opening-schedule-editor) :is(input:not([type=checkbox]),select,textarea){background-color:#fff;font-size:14px;min-height:42px}
body[data-design="workspace"] :is(.profile-form-grid,.plan-dialog) label{font-size:12px;line-height:1.6}
body[data-design="workspace"] .profile-form-grid label{margin-bottom:7px}
body[data-design="workspace"] :is(.weekly-heading p,.hours-mode-label,.time-label,.season-range label,.closure-range label){font-size:12px;line-height:1.7}
body[data-design="workspace"] .opening-schedule-editor{border-color:var(--line)}
body[data-design="workspace"] dialog :is(.dialog-content,.menu-sections-content,.menu-sections-footer){background:#fff}
body[data-design="workspace"] dialog .dialog-header .ui-close:hover{background:#e7eddf;color:#334c3c}
body[data-design="workspace"] dialog .button-primary>span.ui-arrow{font-size:14px}
body[data-design="workspace"] :is(.planning-card-top,.inline-check,.schedule-check,.open-end-label,.next-day-label,.tool-check)>input[type=checkbox]{width:18px;height:18px;flex-shrink:0;flex-basis:18px}
body[data-design="workspace"] :is(.restaurant-editor,.team-panel,.shopping-list-card){scroll-margin-top:110px}
body[data-design="account"] :is(.account-panel label,.account-panel .field-label){font-size:12px}
@media(max-width:760px){
  body[data-design="account"] .account-panel label{font-size:13px}
  body[data-design="workspace"] :is(.catalog-card-head,.restaurant-card-top,.shopping-list-head,.team-panel>.section-toolbar){padding:12px}
  body[data-design="workspace"] :is(.profile-form-grid,.weekday-group,.opening-schedule-editor) :is(input:not([type=checkbox]),select,textarea){font-size:16px;min-height:46px}
  body[data-design="workspace"] :is(.profile-form-grid,.plan-dialog) label{font-size:13px}
  body[data-design="workspace"] :is(.planning-card-top,.inline-check,.schedule-check,.open-end-label,.next-day-label,.tool-check)>input[type=checkbox]{width:21px;height:21px;flex-basis:21px}
  body[data-design="workspace"] :is(.restaurant-editor,.team-panel,.shopping-list-card){scroll-margin-top:125px}
}

/* The transparent scrollbar gutter must continue the sticky header's background and divider. */
body[data-design="workspace"] dialog:has(>.dialog-header){background-image:linear-gradient(to bottom,var(--dine-tint) 0 calc(var(--dialog-scroll-inset,0px) - 1px),var(--line) calc(var(--dialog-scroll-inset,0px) - 1px) var(--dialog-scroll-inset,0px),#fff var(--dialog-scroll-inset,0px));background-attachment:scroll}

/* Shared workflow feedback is inline and never overlays editable content. */
body[data-design="workspace"] .workflow-draft-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;margin:0 0 18px;border:1px solid var(--line);border-left:3px solid var(--dine-edge);border-radius:7px;background:var(--dine-tint);color:var(--muted);font-size:12px;line-height:1.7}
body[data-design="workspace"] .workflow-draft-banner button{flex:0 0 auto;min-height:36px;padding:6px 0;border:0;background:transparent;color:var(--dine-forest);font:inherit;text-decoration:underline;cursor:pointer}
body[data-design="workspace"] .workflow-proposal{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:8px;background:#f7f9f3;color:var(--ink);font-size:13px;line-height:1.7}
body[data-design="workspace"] .workflow-proposal p{margin:0}.workflow-proposal strong{font-weight:600}.workflow-proposal .resource-actions{display:flex;flex-wrap:wrap;gap:10px}.workflow-proposal details ul{max-height:240px;overflow:auto;padding-left:22px}
body[data-design="workspace"] .shopping-calculation-tools{display:grid;gap:14px;margin:16px 0}
body[data-design="workspace"] .resource-load-error{padding:16px;border:1px solid #ead5cc;border-left:3px solid #be786b;border-radius:8px;background:#fff5f2;font-size:13px;line-height:1.7;color:#8b4e45}
body[data-design="workspace"] .resource-load-error button{margin-top:10px}
body[data-design="workspace"] :is(#menu-save-status,#menu-sections-status){display:flex;align-items:center;flex-wrap:wrap;gap:8px}
body[data-design="workspace"] :is(#menu-save-status,#menu-sections-status) button{padding:5px 9px;min-height:32px;border:1px solid var(--ui-control-border);border-radius:6px;background:#fff;color:var(--dine-forest);font:inherit;font-size:12px;cursor:pointer}
body[data-design="workspace"] .workflow-save-state{font-size:12px;line-height:1.5;color:var(--muted);white-space:normal}
@media(max-width:760px){body[data-design="workspace"] .workflow-draft-banner{flex-wrap:wrap}body[data-design="workspace"] .workflow-draft-banner button,body[data-design="workspace"] :is(#menu-save-status,#menu-sections-status) button{min-height:var(--ui-touch-target)}body[data-design="workspace"] .workflow-save-state{grid-column:1/-1;grid-row:3;width:100%;font-size:12px}}