/* Approved OrderList Penpot foundations. Unmodified OFL fonts: see
   font-sources.json and the adjacent copyright/license files. */
@font-face{font-family:Outfit;src:url('./Outfit.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'League Spartan';src:url('./LeagueSpartan.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
:root{
 --brand-primary:#4B5791;--brand-primary-pressed:#404A7B;--brand-primary-subtle:#DBDDE9;
 --brand-secondary:#024226;--brand-secondary-subtle:#D6DAD6;
 --background-page:#F4EDE3;--background-surface:#FFFCF8;--background-elevated:#FFFFFF;
 --text-primary:#20231F;--text-secondary:#4F554E;--text-muted:#70766F;--text-inverse:#FFFFFF;
 --border-default:#D8D1C8;--border-strong:#AFA79D;
 --success-strong:#2E6B3A;--success-subtle:#DCE9DE;--error-strong:#B3261E;--error-subtle:#F3DDDA;
 --warning-strong:#A45100;--warning-subtle:#F3E2D2;--pending-strong:#806000;--pending-subtle:#EEE6C9;
 --info-strong:#4B5791;--info-subtle:#E2E4EF;
 --space-4:4px;--space-6:6px;--space-8:8px;--space-12:12px;--space-16:16px;--space-24:24px;--space-32:32px;
 --radius-small:6px;--radius-medium:10px;--radius-large:16px;--radius-full:999px;
 --border-width:1px;--border-focus:2px;
 --font-body:Outfit,system-ui,sans-serif;--font-heading:'League Spartan',system-ui,sans-serif;
 --type-body:400 16px/1.5 var(--font-body);--type-small:400 14px/1.429 var(--font-body);
 --type-label:500 14px/1.429 var(--font-body);--type-item:500 16px/1.375 var(--font-body);
 --type-quantity:600 16px/1.25 var(--font-body);--type-button:600 16px/1.25 var(--font-body);
 --type-screen:600 22px/1.273 var(--font-heading);--type-section:600 18px/1.333 var(--font-heading);
 --type-subgroup:600 15px/1.333 var(--font-body);
 font:var(--type-body);color:var(--text-primary);background:var(--background-page);color-scheme:light;
}
*{box-sizing:border-box}body{margin:0}
button,.button{font:var(--type-button);min-height:48px;cursor:pointer;border:var(--border-width) solid var(--brand-primary);border-radius:var(--radius-medium);background:transparent;padding:var(--space-12) var(--space-16);color:var(--brand-primary);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);touch-action:manipulation}
button:hover,.button:hover{background:var(--brand-primary-subtle)}
button.primary,.button.primary{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--text-inverse)}
button.primary:active,.button.primary:active{background:var(--brand-primary-pressed);border-color:var(--brand-primary-pressed)}
button.secondary,.button.secondary{background:var(--brand-secondary);border-color:var(--brand-secondary);color:var(--text-inverse)}
button.outline,.button.outline{border-color:var(--brand-primary);color:var(--brand-primary);background:transparent}
button.ghost,.button.ghost{border-color:transparent;color:var(--brand-primary);background:transparent}
button.destructive,.button.destructive{background:var(--error-strong);border-color:var(--error-strong);color:var(--text-inverse)}
button:disabled,.button[aria-disabled=true]{opacity:.5;cursor:not-allowed}
label,.input-label{font:var(--type-label);color:var(--text-secondary)}
input,textarea,select{font:var(--type-body);background:var(--background-elevated);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-medium);padding:var(--space-12);min-height:48px;color:var(--text-primary);min-width:0;max-width:100%}
input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:1}
input[type=checkbox]{min-height:20px;accent-color:var(--brand-primary)}
input:not([type=checkbox]),select{height:48px}
textarea,.input-multiline{min-height:80px;max-height:240px;overflow-y:auto;resize:vertical;field-sizing:content}
input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible{outline:var(--border-focus) solid var(--brand-primary);outline-offset:2px}
[aria-invalid=true]{border-color:var(--error-strong)}
.input-error{font:var(--type-small);color:var(--error-strong);margin-top:var(--space-4)}
.input-default{display:flex;flex-direction:column;gap:var(--space-4)}
.search-field input,input[type=search]{padding-left:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2370766F' stroke-width='2'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center}
h1,.screen-title{font:var(--type-screen);margin:0 0 var(--space-8);overflow-wrap:anywhere}
h2,.section-title{font:var(--type-section);margin:var(--space-24) 0 var(--space-12);overflow-wrap:anywhere}
.screen-header,.section-header{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-8)}
.screen-header h1,.section-header h2{margin:0}
.section-header,.shopping-channel>h2{color:var(--brand-primary);border-bottom:var(--border-width) solid var(--border-default);padding-bottom:var(--space-8)}
.subgroup-header,.grocery-group h3{font:var(--type-subgroup);text-transform:uppercase;color:var(--brand-secondary);padding:0 0 var(--space-4) var(--space-8);margin:var(--space-16) 0 var(--space-8)}
.header-count,.muted{font:var(--type-small);color:var(--text-secondary)}
.item-name{font:var(--type-item);overflow-wrap:anywhere}
.status-inline,.row-status{font:var(--type-small);display:inline-flex;align-items:center;gap:var(--space-4);color:var(--text-secondary)}
.status-inline[data-state=Saved],.row-status[data-state=Saved]{color:var(--success-strong)}
.status-inline[data-state=Saved]::before,.row-status[data-state=Saved]::before{content:'✓' / ''}
[data-state='Not saved']{color:var(--error-strong)}
[data-state='Review required']{color:var(--warning-strong)}
.badge{font:var(--type-small);color:var(--pending-strong)}
.error{color:var(--error-strong);background:var(--error-subtle);padding:var(--space-12);border-radius:var(--radius-small)}
dialog,.dialog{background:var(--background-elevated);color:var(--text-primary);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-large);max-width:620px;width:calc(100% - 32px);padding:var(--space-16);max-height:90dvh;overflow:auto;box-shadow:0 15px 80px #20231F44}
dialog::backdrop{background:#20231F66}
dialog h2,.dialog h2{margin-top:0;margin-bottom:var(--space-12)}
dialog p,.dialog p{margin:var(--space-12) 0}
dialog .actions,.dialog .actions{gap:var(--space-8);margin-top:var(--space-12)}
dialog textarea{width:100%}
.toast,.snackbar{background:var(--text-primary);color:var(--text-inverse);font:var(--type-small);padding:var(--space-12) var(--space-16);border-radius:var(--radius-medium);display:flex;align-items:center;gap:var(--space-12);overflow-wrap:anywhere}
.toast button,.snackbar button{color:var(--text-inverse);border-color:transparent;background:transparent;flex-shrink:0;min-height:44px;padding:var(--space-8)}
.quantity-field>label{display:block;font:var(--type-label);color:var(--text-secondary);margin:0 0 var(--space-4)}
.quantity-control{display:grid;grid-template-columns:44px 44px 44px;gap:0;align-items:center;width:134px;min-width:134px;background:var(--background-elevated);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-medium)}
.quantity-control button{min-width:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--text-primary);font:600 18px/1.25 var(--font-body);border-radius:var(--radius-medium)}
.quantity-control input{width:100%;min-width:0;min-height:44px;margin:0!important;text-align:center;padding:var(--space-8) 2px;font:var(--type-quantity);border:0;border-left:var(--border-width) solid var(--border-default);border-right:var(--border-width) solid var(--border-default);border-radius:0;appearance:textfield;-moz-appearance:textfield}
.quantity-control input::-webkit-inner-spin-button,.quantity-control input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.quantity-control input:not([type=checkbox]){height:44px}
.quantity-control button:hover:not(:disabled){background:var(--brand-primary-subtle)}
.quantity-control :focus-visible{position:relative;z-index:1}
[hidden],.hidden{display:none!important}