/* Shared controls. Layout sheets position components; this file owns their appearance. */
:root {
  --control-height:48px;
  --control-radius:8px;
  --control-surface:#fffdf7;
  --control-border:#b9bdaf;
  --control-text:14px;
}
button,input,select,textarea { font-family:var(--sans); }
button:disabled { cursor:not-allowed; opacity:1; color:#85877e; }
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:3px solid var(--ink); outline-offset:3px;
}
select,.food-search,.text-field {
  min-height:var(--control-height); border:1px solid var(--control-border);
  border-radius:var(--control-radius); background-color:var(--control-surface);
  color:var(--ink); font-size:var(--control-text); line-height:1.4;
}
select {
  appearance:none; -webkit-appearance:none; width:100%; height:var(--control-height);
  padding:12px 40px 12px 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23292b22' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px;
  cursor:pointer;
}
select:disabled { color:var(--muted); background-color:#eeeade; cursor:not-allowed; }
.food-search { padding:0 0 0 14px; gap:10px; height:var(--control-height); }
.food-search>svg { width:18px; height:18px; flex:none; }
.food-search input {
  appearance:none; -webkit-appearance:none; border:0; border-radius:0;
  background:transparent; padding:10px 12px 10px 0; height:100%;
  font-size:inherit; line-height:1.4; color:inherit; flex:1; width:100%; min-width:0;
}
.food-search input::placeholder { color:var(--muted); opacity:1; }
.food-search input::-webkit-search-cancel-button { appearance:none; -webkit-appearance:none; }
.food-search:focus-within { outline:3px solid var(--ink); outline-offset:3px; }
.food-search input:focus-visible { outline:none; }
#clear-search { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; min-height:44px; padding:0; border-radius:6px; background:transparent; }
#clear-search svg { width:18px; height:18px; }
#clear-search:hover { background:var(--sage); }
.sort-label { flex:0 0 164px; }
.cuisine-picker select { flex:1; min-width:0; width:auto; }
#dish-select { margin-bottom:0; }
.primary,.secondary,.bag-link,.rail-pick {
  min-height:var(--control-height); border:1px solid transparent; border-radius:var(--control-radius);
  font-size:14px; font-weight:700; line-height:1.4; padding:12px 18px;
}
.primary { background:var(--red); color:white; }
.primary:hover { background:#aa341d; }
.primary:disabled { background:#eeeade; color:var(--muted); border-color:var(--control-border); }
.secondary,.rail-pick,.bag-link { background:var(--control-surface); color:var(--ink); border-color:var(--control-border); }
.rail-pick,#rail-checkout { width:100%; }
.secondary:hover,.rail-pick:hover,.bag-link:hover { background:var(--sage); border-color:#8d9a7d; }
.quantity {
  display:inline-flex; align-items:center; min-height:var(--control-height);
  border:1px solid var(--control-border); border-radius:var(--control-radius);
  background:var(--control-surface); flex-shrink:0;
}
.quantity button { width:44px; min-height:44px; padding:0; background:transparent; border-radius:6px; font-size:20px; line-height:1; }
.quantity button:hover:not(:disabled) { background:var(--sage); }
.quantity output { min-width:26px; text-align:center; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.menu-bottom { align-items:stretch; }
.menu-bottom>.primary { min-width:0; }
.menu-feedback { color:var(--ink); }
.add-dish {
  min-height:44px; min-width:76px; padding:9px 12px;
  background:var(--control-surface); color:var(--ink); border:1px solid var(--control-border);
  border-radius:var(--control-radius); font-size:13px; font-weight:700; line-height:1.4;
}
.add-dish>span { font-size:17px; }
.add-dish:hover { background:var(--ink); color:white; border-color:var(--ink); }
.add-dish.just-added { background:var(--sage); color:#25462c; border-color:#9ba98a; }
.occasion-row .filters { display:flex; flex-wrap:wrap; gap:4px; }
.occasion-row .filters button {
  min-height:44px; padding:9px 12px; border:1px solid transparent; border-radius:var(--control-radius);
  background:transparent; color:var(--muted); font-size:12px; line-height:1.4;
}
.occasion-row .filters button:hover { background:#eeeade; color:var(--ink); }
.occasion-row .filters button[aria-pressed=true] { background:var(--ink); color:var(--control-surface); }
.route-options label {
  display:grid; grid-template-columns:18px minmax(0,1fr); align-items:center; gap:5px 10px;
  min-width:0; border:1px solid var(--control-border); border-radius:var(--control-radius);
  background:var(--control-surface); padding:12px; font-size:13px; line-height:1.4;
}
.route-options label:has(input:checked) { background:var(--sage); border-color:#8d9a7d; }
.route-options label:has(input:focus-visible) { outline:3px solid var(--ink); outline-offset:3px; }
.route-options input:focus-visible { outline:none; }
input[type=radio] {
  appearance:none; -webkit-appearance:none; width:18px; height:18px; border:1px solid var(--control-border);
  border-radius:50%; margin:0; background:var(--control-surface); display:grid; place-content:center;
}
input[type=radio]::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--ink); transform:scale(0); }
input[type=radio]:checked { border-color:var(--ink); }
input[type=radio]:checked::before { transform:scale(1); }
.route-options small { grid-column:2; margin:0; font-size:11px; color:var(--muted); }
.field-label,.cuisine-picker>label { font-size:12px; font-weight:700; line-height:1.4; }
.food-footer { background:var(--paper); color:var(--ink); }
.food-footer .wordmark { color:var(--red); }
.food-footer small { color:var(--muted); }
.food-footer button,.food-header nav button { border-radius:6px; }
@media(max-width:760px) {
  :root { --control-text:16px; }
  .sort-label { flex-basis:144px; }
  .menu-toolbar { gap:10px; }
  .menu-bottom { flex-wrap:wrap; }
  .menu-bottom>.primary { flex:1; min-width:138px; }
  .finish-actions { flex-wrap:wrap; }
  .finish-actions>* { min-width:120px; }
  .surprise-actions .primary { min-width:150px; }
}
@media(max-width:600px) {
  .food-search { padding-left:10px; gap:7px; }
  .sort-label { flex-basis:132px; }
  select { padding-left:12px; padding-right:34px; background-position:right 10px center; }
  .occasion-row .filters { flex-wrap:nowrap; gap:2px; justify-content:space-between; }
  .occasion-row .filters button { font-size:11px; padding-inline:8px; }
  .add-dish { min-width:72px; font-size:12px; padding-inline:10px; }
  .food-intro { padding-bottom:12px; }
}
@media(max-width:360px) {
  .sort-label { flex-basis:118px; }
  .occasion-row .filters button { padding-inline:5px; }
  .menu-bottom>.primary { flex-basis:100%; }
  .bag-line { flex-wrap:wrap; }
  .bag-line>div:first-child { flex:1 1 120px; }
  .line-controls { margin-left:auto; }
}
@media(forced-colors:active) {
  select { appearance:auto; background-image:none; }
  input[type=radio] { appearance:auto; }
  input[type=radio]::before { display:none; }
}
/* A reserved dismissal header keeps scrolling form and receipt content unobscured. */
dialog { scroll-padding-block:78px 20px; }
.dialog-toolbar {
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px;
  min-height:64px; padding:10px 20px; background:var(--paper);
  border-bottom:1px solid var(--line);
}
.dialog-toolbar .eyebrow { flex:1; min-width:0; margin:0; color:var(--muted); font-size:10px; line-height:1.5; letter-spacing:1px; }
.dialog-toolbar .close-dialog { position:static; margin:0 0 0 auto; flex:0 0 44px; display:grid; place-items:center; }
dialog>.dialog-pad { padding-top:20px; }
#menu-content .dialog-pad { padding-top:20px; }
.menu-hero.food-photo { height:210px; }
.finish { padding-top:20px; }
#order-dialog:has(.finish) .dialog-toolbar { background:var(--sage); }
@media(max-width:600px) {
  .dialog-toolbar { padding-inline:18px; }
  .dialog-toolbar .eyebrow { font-size:9px; letter-spacing:.7px; }
  .menu-hero.food-photo { height:210px; }
}

.text-field { display:block; width:100%; min-width:0; padding:12px 14px; font-family:var(--sans); }
input.text-field { height:var(--control-height); }
textarea.text-field { resize:vertical; min-height:84px; }
.text-field::placeholder { color:var(--muted); opacity:1; }
.text-field:user-invalid { border-color:var(--red); }