/**
 * restaurant-current-general-master-major-alignment-001
 * Restaurant-local styles only — scoped under restaurant root.
 * Mirrors General DPC button hierarchy language without editing section01/02/03.css.
 *
 * restaurant-mobile-general-master-template-alignment-002
 * restaurant-mobile-real-frontend-visual-acceptance-polish-003
 * Phone shell inherits General’s light cream surface language; keep a restrained
 * mint identity strip — not a separate dark/heavy ERP look.
 *
 * restaurant-prefs-follow-qhc-no-reselect-001
 * restaurant-prefs-currency-follow-fix-001
 * Prefs row removed from restaurant.html; leftover --prefs chrome rules are inert.
 * Formal currency follows shared General/QHC session keys; missing CTA → General.
 *
 * homepage-restaurant-entry-cutlery-icon-001
 * Identity tile glyph only (fork+knife SVG); size / green fill unchanged.
 *
 * restaurant-workspace-identity-fork-spoon-icon-001
 * Identity tile glyph only (fork+spoon SVG); size / green fill unchanged.
 *
 * restaurant-workspace-identity-place-setting-icon-001
 * Historical: tried place-setting SVG then 🍴 emoji fallback (low contrast on green).
 *
 * restaurant-workspace-identity-white-cutlery-contrast-001
 * Historical: white stroke fork+spoon SVG (no emoji).
 *
 * restaurant-workspace-identity-bo-fork-knife-001
 * Identity tile glyph: Bo reference white outline 4-tine fork + dinner knife; size / green fill unchanged.
 *
 * restaurant-workspace-ad-slot-parity-001
 * Ad rail / mobile banner live in shared specializedWorkbenchAdSlot.css.
 * This file does not place mid-section ads inside 01/02/03.
 */

:root {
  --rsc-primary-bg: #165536;
  --rsc-primary-border: #c9a227;
  --rsc-primary-shadow: 0 1px 3px rgba(22, 85, 54, 0.18);
  --rsc-danger-border: #c0392b;
  --rsc-danger-fg: #a93226;
  --rsc-surface: #fffdfc;
  --rsc-ink: #17211d;
  --rsc-muted: #64716b;
  --rsc-line: #e2d8c8;
  /* Match General page cream; soft mint reserved for identity strip only. */
  --rsc-shell: #f7f3ea;
  --rsc-identity: #eaf3ee;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--rsc-shell);
  color: var(--rsc-ink);
  font-family: "Source Sans 3", "Noto Sans SC", "Noto Sans TC", "Segoe UI", sans-serif;
}

#restaurant-root[data-restaurant-workbench="true"] {
  min-height: 100vh;
}

/*
 * restaurant-operating-details-general-parity-004 (desktop + phone)
 * Keep area unit m² glued inside the input (fixed-width unit chrome).
 * Reinforced for all viewports so desktop never falls back to a dropped suffix
 * if shared businessResourceFields.css is delayed or overridden.
 */
#restaurant-root .s02v2-bizinfo-area .smp-input-affix {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  position: relative;
}

#restaurant-root .s02v2-bizinfo-area .smp-input-affix input {
  box-sizing: border-box;
  min-width: 0;
  padding-right: 2rem;
  width: 100%;
}

#restaurant-root .s02v2-bizinfo-area .smp-affix {
  color: var(--muted, #64716b);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
}

/*
 * restaurant-operating-details-bizinfo-column-align-001
 * Desktop (≥700) parity OD: people/area carry per-field hints; date does not.
 * Shared `.s02v2-bizinfo-row { align-items: end }` sinks the date column so the
 * three fields are not horizontally level. Align to start so labels + inputs
 * share one top edge; hints hang below people/area only. Restaurant-scoped.
 * Also keep people/area hints fully visible (no left clip / mid-word break).
 */
@media (min-width: 700px) {
  #restaurant-root .s02v2-bizinfo-row--stable-order,
  #restaurant-root .s02v2-bizinfo-row[data-operating-details-parity="general"] {
    align-items: start;
  }

  #restaurant-root .s02v2-bizinfo-row--stable-order > .smp-standalone-date,
  #restaurant-root .s02v2-bizinfo-row[data-operating-details-parity="general"] > .smp-standalone-date {
    align-self: start;
  }
}

#restaurant-root .s02v2-bizinfo-people .smp-hint--per-block,
#restaurant-root .s02v2-bizinfo-area .smp-hint--per-block {
  display: block;
  margin-top: 2px;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  overflow-wrap: break-word;
  text-overflow: unset;
  white-space: normal;
  word-break: normal;
}

#restaurant-root .restaurant-topbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rsc-line);
  background: var(--rsc-surface);
}

#restaurant-root .restaurant-topbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#restaurant-root .restaurant-topbar-row--brand {
  justify-content: flex-start;
  gap: 10px;
}

#restaurant-root .restaurant-topbar-row--prefs {
  justify-content: flex-start;
}

#restaurant-root .restaurant-brand {
  font-weight: 700;
  font-size: 1.05rem;
}

/*
 * restaurant-global-header-back-navigation-polish-001
 * Lightweight text back-nav to the right of the brand — not a bordered button.
 * Invisible hit padding only; hover darkens + thin underline.
 */
#restaurant-root a.restaurant-back-general {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 6px 8px;
  min-height: 32px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #165536;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#restaurant-root a.restaurant-back-general:hover,
#restaurant-root a.restaurant-back-general:focus-visible {
  color: #0f3f28;
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

#restaurant-root a.restaurant-back-general:focus-visible {
  text-decoration: underline;
}

#restaurant-root .restaurant-back-general-arrow {
  flex: 0 0 auto;
  font-size: 1em;
  line-height: 1;
  transform: translateY(-0.5px);
}

#restaurant-root .restaurant-chrome-field {
  margin: 0;
  min-width: 0;
  flex: 1 1 7.5rem;
}

#restaurant-root .restaurant-chrome-field--currency {
  flex: 0 1 5.5rem;
  max-width: 7rem;
}

#restaurant-root .restaurant-chrome-label {
  display: block;
  font-size: 0.75rem;
  color: var(--rsc-muted);
  margin-bottom: 2px;
}

#restaurant-root .restaurant-chrome-field select {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  border: 1px solid #b7c4bb;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: #fff;
}

#restaurant-root .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * restaurant-footer-and-data-tools-parity-001
 * + specialized-workspace-no-own-clear-action-001
 * Standalone .restaurant-workbench-footer (red clear block) removed.
 * Industry clear button (#rsc-clear) removed entirely — specialized workspaces
 * must not expose their own clear-data CTAs.
 */

/* Hide any leftover QHC shell if cloned by mistake */
#restaurant-root #quick-health-check {
  display: none !important;
}

/* Restaurant sales channel / fulfillment (S02 opt-in) */
#restaurant-root .s02v2-rsc-meta {
  margin: 0.75rem 0;
}

#restaurant-root .s02v2-rsc-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.75rem;
  align-items: end;
}

#restaurant-root .s02v2-rsc-title {
  font-size: 0.85rem;
  font-weight: 600;
}

#restaurant-root .s02v2-rsc-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

#restaurant-root .s02v2-rsc-manage-link,
#restaurant-root .s02v2-rsc-text-action {
  appearance: none;
  border: 0;
  background: transparent;
  color: #0b5cab;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
}

#restaurant-root .s02v2-rsc-anonymous {
  margin: 0.5rem 0 0.75rem;
}

#restaurant-root .s02v2-rsc-anonymous-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

#restaurant-root .s02v2-rsc-anonymous-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2f0;
  color: var(--rsc-muted);
  font-size: 0.8rem;
}

#restaurant-root .s02v2-rsc-keep-anonymous {
  margin: 0.25rem 0 0.5rem;
}

#restaurant-root .s02v2-rsc-manager {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--rsc-line);
  border-radius: 8px;
  background: #f7faf8;
}

#restaurant-root .s02v2-rsc-gross-hint {
  margin: 0.25rem 0 0.65rem;
  max-width: 42rem;
  line-height: 1.35;
}

#restaurant-root .s02v2-rsc-gross-confirm {
  margin: 0.5rem 0 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--rsc-line);
  border-radius: 8px;
  background: #f4f8fc;
}

#restaurant-root .s02v2-rsc-gross-confirm-msg {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: #243447;
}

#restaurant-root .s02v2-rsc-gross-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

#restaurant-root .s02v2-rsc-gross-confirm-actions .primary-action,
#restaurant-root .s02v2-rsc-gross-confirm-actions .secondary-action {
  min-height: 40px;
}

#restaurant-root .s02v2-rsc-channel-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

#restaurant-root .s02v2-rsc-channel-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #e4ebe6;
}

/* No app-owned fixed FABs on restaurant — cancel any sticky overlays that could cover inputs */
#restaurant-root .restaurant-calculator-host .qhc-disclosure-toggle {
  position: static;
}

/*
 * restaurant-mobile-obstruction-and-text-clipping-fix-001 (A)
 * Phone ≤480: hide any back-to-top / scroll-top floating control if present.
 * Audit found no app-owned fixed FAB in current DOM; these selectors stay
 * restaurant-scoped so General is untouched and absent nodes leave no layer.
 */
@media (max-width: 480px) {
  #restaurant-root .back-to-top,
  #restaurant-root .scroll-to-top,
  #restaurant-root .scroll-top,
  #restaurant-root [data-back-to-top],
  #restaurant-root [data-scroll-to-top],
  #restaurant-root a[href="#top"],
  #restaurant-root a[href="#restaurant-root"],
  #restaurant-root button[aria-label*="back to top" i],
  #restaurant-root button[aria-label*="回到顶部"],
  #restaurant-root a[aria-label*="back to top" i],
  #restaurant-root a[aria-label*="回到顶部"] {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    pointer-events: none !important;
    position: static !important;
    visibility: hidden !important;
    width: 0 !important;
  }
}

@media (min-width: 901px) {
  #restaurant-root .restaurant-topbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  #restaurant-root .restaurant-topbar-row--prefs {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  #restaurant-root .restaurant-chrome-field {
    flex: 0 1 auto;
    min-width: 140px;
  }

  #restaurant-root .restaurant-chrome-field--currency {
    max-width: none;
  }
}

/*
 * restaurant-workspace-header-identity-polish-001
 * One compact light-green identity strip (breadcrumb + title).
 * Aligns to the same 16px side inset as calculator panel / footer.
 *
 * restaurant-workspace-flow-strip-remove-001:
 * Desktop/mobile flow map (01 → 02 → 03) removed; no reserved empty strip.
 *
 * restaurant-workspace-header-after-flow-remove-fix-001:
 * Hero lives in specialized-workbench-main (content column), content-sized —
 * not a full-bleed green band spanning the ad rail. No leftover min-height
 * from the old desktop flow row (~125px). Long locales may wrap; strip stays
 * compact (tight padding + slightly moderated desktop title size).
 */
#restaurant-root .restaurant-workspace-hero {
  box-sizing: border-box;
  margin: 8px 16px 0;
  padding: 8px 12px 9px;
  background: var(--rsc-identity);
  border: 1px solid var(--rsc-line);
  border-radius: 10px;
  min-height: 0;
  max-width: 100%;
  width: auto;
}

#restaurant-root .restaurant-workspace-hero-inner {
  display: block;
  width: 100%;
  min-height: 0;
}

#restaurant-root .restaurant-workspace-hero-main {
  min-width: 0;
  width: 100%;
}

#restaurant-root .restaurant-workspace-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--rsc-muted);
}

#restaurant-root .restaurant-workspace-breadcrumb-sep {
  color: #8a968e;
}

#restaurant-root .restaurant-breadcrumb-home {
  appearance: none;
  border: 0;
  background: transparent;
  color: #0b5cab;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  font: inherit;
}

#restaurant-root .restaurant-workspace-title-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

#restaurant-root .restaurant-workspace-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #165536;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#restaurant-root .restaurant-workspace-icon-svg {
  /* restaurant-workspace-identity-bo-fork-knife-001: slightly larger glyph keeps hollow outline readable */
  width: 24px;
  height: 24px;
  display: block;
}

#restaurant-root .restaurant-workspace-titles {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#restaurant-root .restaurant-workspace-titles h1 {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--rsc-ink);
  overflow-wrap: break-word;
}

#restaurant-root .restaurant-workspace-subtitle {
  margin: 3px 0 0;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--rsc-muted);
  overflow-wrap: break-word;
}

@media (min-width: 901px) {
  #restaurant-root .restaurant-workspace-hero {
    padding: 10px 14px;
    min-height: 0;
  }

  #restaurant-root .restaurant-workspace-breadcrumb {
    margin-bottom: 5px;
  }

  #restaurant-root .restaurant-workspace-icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
  }

  #restaurant-root .restaurant-workspace-icon-svg {
    width: 26px;
    height: 26px;
  }

  #restaurant-root .restaurant-workspace-titles h1 {
    font-size: 1.25rem;
  }
}

@media (max-width: 900px) {
  #restaurant-root .restaurant-workspace-hero {
    padding: 7px 10px 8px;
  }

  #restaurant-root .restaurant-workspace-breadcrumb {
    margin-bottom: 3px;
  }
}

/*
 * =============================================================================
 * restaurant-mobile-general-parity-001
 * ≤900 only — copy General mobile shell rhythm for Restaurant chrome + host.
 *
 * restaurant-mobile-side-gutter-nudge-001 (Bo FE)
 * Phone outer side margin: 2px → 8px (match topbar). Slight breathing room only —
 * do not re-inflate to 12–16px (squeezes fields / long words).
 *
 * General reference (styles.css ≤900):
 *   .app-shell { padding: 2px }
 *   .input-panel { padding: 4px }
 * Shared DPC (dpcSectionHeader.css ≤900):
 *   --dpc-header-pad-inline: 16px
 *
 * Prior Restaurant phone chrome used 16px outer margins + 12px calculator pad,
 * stacking to ~44px before section headers — much tighter than General.
 * Bring outer page/topbar/hero/panel insets near the edge;
 * keep desktop (≥901) 16px Restaurant chrome unchanged.
 * Back-nav text treatment from restaurant-global-header-back-navigation-polish-001
 * is preserved.
 * =============================================================================
 */
@media (max-width: 900px) {
  #restaurant-root .restaurant-topbar {
    gap: 8px;
    padding: 8px max(8px, env(safe-area-inset-left)) 10px max(8px, env(safe-area-inset-right));
  }

  #restaurant-root .restaurant-topbar-row {
    gap: 6px;
  }

  #restaurant-root .restaurant-topbar-row--prefs {
    width: 100%;
  }

  #restaurant-root .restaurant-chrome-field {
    flex: 1 1 0;
    min-width: 0;
  }

  #restaurant-root .restaurant-chrome-field--currency {
    flex: 0 1 5.5rem;
    max-width: 6.25rem;
  }

  #restaurant-root .restaurant-chrome-field select {
    min-height: 36px;
    padding: 6px 8px;
  }

  #restaurant-root .restaurant-workspace-hero {
    margin: 6px max(8px, env(safe-area-inset-left)) 0 max(8px, env(safe-area-inset-right));
    padding: 8px 10px 10px;
  }

  #restaurant-root .restaurant-workspace-title-row {
    gap: 8px;
  }

  #restaurant-root .restaurant-workspace-icon {
    width: 36px;
    height: 36px;
  }

  #restaurant-root .restaurant-workspace-icon-svg {
    width: 24px;
    height: 24px;
  }

  #restaurant-root .restaurant-workspace-titles h1 {
    font-size: 1.125rem;
    line-height: 1.25;
  }

  #restaurant-root .restaurant-workspace-subtitle {
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  #restaurant-root .restaurant-panel {
    margin: 6px max(8px, env(safe-area-inset-left)) 6px max(8px, env(safe-area-inset-right));
    padding: 4px;
  }

  /*
   * Calculator host: drop the stacked 16+12 outer chrome so shared DPC
   * --dpc-header-pad-inline (16px) lands near the screen like General.
   */
  #restaurant-root .restaurant-panel.restaurant-panel--calculator {
    margin: 4px max(8px, env(safe-area-inset-left)) 6px max(8px, env(safe-area-inset-right));
    padding-left: 0;
    padding-right: 0;
  }

  #restaurant-root .restaurant-calculator-host {
    margin-bottom: 10px;
  }

  #restaurant-root .restaurant-calculator-host .detailed-calculator-header h1,
  .detailed-calculator-header h2,
  .detailed-calculator-header #detailed-calculator-title {
    font-size: 1.125rem;
  }
}

#restaurant-root .restaurant-panel {
  margin: 8px 16px;
  padding: 12px;
  background: var(--rsc-surface);
  border: 1px solid var(--rsc-line);
  border-radius: 10px;
}

/*
 * restaurant-mobile-real-frontend-visual-acceptance-polish-003
 * Calculator host must NOT sit inside a second white bordered card
 * (base .restaurant-panel above would otherwise win on cascade).
 * Keep the same 16px side margin + 12px inline pad so 01/02/03
 * number left=45 / title left=95 stay on the accepted Restaurant grid.
 */
#restaurant-root .restaurant-panel.restaurant-panel--calculator {
  background: transparent;
  /* Transparent 1px border keeps the accepted 45/95 header grid after dropping the visible card stroke. */
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  /* Preserve horizontal inset used by the shared DPC header grid. */
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 0;
  padding-bottom: 0;
}

#restaurant-root .restaurant-panel h2 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

#restaurant-root .restaurant-panel p {
  margin: 0 0 10px;
  color: var(--rsc-muted);
  line-height: 1.45;
}

#restaurant-root .restaurant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

#restaurant-root .restaurant-field label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

#restaurant-root .restaurant-field input,
#restaurant-root .restaurant-field select {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  border: 1px solid #b7c4bb;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: #fff;
}

#restaurant-root .restaurant-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Button hierarchy mirror (restaurant root only) */
#restaurant-root .rsc-btn-primary {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--rsc-primary-border);
  background: var(--rsc-primary-bg);
  color: #fff;
  font-weight: 650;
  box-shadow: var(--rsc-primary-shadow);
  cursor: pointer;
}

#restaurant-root .rsc-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

#restaurant-root .rsc-btn-secondary {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #b7c4bb;
  background: #f7faf8;
  color: var(--rsc-ink);
  cursor: pointer;
}

#restaurant-root .restaurant-status {
  min-height: 1.25em;
  margin-top: 8px;
  font-size: 0.9rem;
}

#restaurant-root .restaurant-status[data-tone="ok"] { color: #165536; }
#restaurant-root .restaurant-status[data-tone="warn"] { color: #8a5a00; }
#restaurant-root .restaurant-status[data-tone="err"] { color: var(--rsc-danger-fg); }

#restaurant-root .restaurant-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8f6ee;
  color: #165536;
  font-size: 0.8rem;
  font-weight: 600;
}

#restaurant-root .restaurant-calculator-host {
  margin: 0 0 16px;
}

#restaurant-root .restaurant-calculator-host .detailed-calculator-header h1,
  .detailed-calculator-header h2,
  .detailed-calculator-header #detailed-calculator-title {
  font-size: 1.25rem;
}

/* Desktop final consistency: keep white chrome; hide duplicate sector line if any remnant. */
#restaurant-root .restaurant-current-sector {
  display: none !important;
}

/*
 * dpc-all-sectors-operational-header-layout-001
 * Header geometry is shared via src/dpcSectionHeader.css — no restaurant layout fork.
 * restaurant-mobile-general-parity-001: sync S01 form-pad with General mobile (4px).
 */
@media (max-width: 480px) {
  #restaurant-root .restaurant-calculator-host,
  #restaurant-root .restaurant-calculator-host .detailed-calculator-group {
    --dpc-s01-form-pad-inline: 4px;
  }

  /*
   * restaurant-s01-header-no-chevron-gap-tighten-001 / -003
   * Tighten gap between「详细利润测算」intro and always-open 01 card.
   * S01 card-top → badge inset is fixed in dpcSectionHeader.css (top-align + 4px pad).
   */
  #restaurant-root .restaurant-calculator-host .detailed-calculator-header,
  #restaurant-root .restaurant-calculator-host .qhc-detailed-header {
    margin-bottom: 6px;
  }

  #restaurant-root #product-margin-form.input-panel.section01-flow {
    padding-top: 0;
  }
}

/*
 * restaurant-s01-header-no-chevron-gap-tighten-001
 * Restaurant has no QHC above the detailed calculator. Do not inherit
 * General `.qhc-detailed-group { margin-top: 32px / 48px }` — that left a
 * large empty band between the workspace hero and「详细利润测算」.
 */
#restaurant-root .restaurant-calculator-host .qhc-detailed-group,
#restaurant-root .restaurant-calculator-host .detailed-calculator-group {
  margin-top: 8px;
}

/*
 * Match 01→02 visual separation for 02→03 (same sibling panel rhythm, slightly clearer gap).
 * Receivables / payables / partners stay inside S02; S03 remains a sibling details panel.
 */
#restaurant-root .s02-section.section-panel + .s03-section.section-panel {
  margin-top: 24px;
  padding-top: 4px;
}

#restaurant-root .restaurant-hint-list {
  margin: 0 0 8px;
  padding-left: 1.2em;
  color: var(--rsc-muted);
}

#restaurant-root .restaurant-hint-list li + li {
  margin-top: 2px;
}

#restaurant-root .restaurant-sales-snapshot[hidden] {
  display: none !important;
}

/* Working capital: denser formula card; keep signs/labels/amounts readable */
#restaurant-root .s03v2-wc {
  padding: 0.55rem 0.7rem;
  margin-top: 0.45rem;
}

#restaurant-root .s03v2-wc .qhc-hint--compact {
  margin: 0 0 0.25rem;
}

/* restaurant-section03-cogs-basis-clarity-001: short COGS-basis note; no layout redesign
 * restaurant-section03-cogs-basis-clarity-001b: unavailable-fallback hint reuses same compact note
 * restaurant-section03-daily-total-cogs-honesty-001: daily-total cannot-calculate hint */
#restaurant-root .s03v2-cogs-basis-note {
  margin: 0.35rem 0 0.15rem;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}

#restaurant-root .s03v2-cogs-basis-unavailable,
#restaurant-root .s03v2-cogs-basis-daily-total {
  margin-top: 0.2rem;
}

/* restaurant-section03-inventory-stocktake-cogs-entry-001: compact COGS basis + stocktake fields */
#restaurant-root .s03v2-stocktake-cogs {
  margin: 0.55rem 0 0.25rem;
  max-width: 100%;
}

#restaurant-root .s03v2-stocktake-cogs-heading {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rsc-ink, #17211d);
  margin: 0 0 0.35rem;
}

#restaurant-root .s03v2-stocktake-cogs-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: flex-start;
}

#restaurant-root .s03v2-stocktake-cogs-option {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.9rem;
  line-height: 1.35;
  max-width: 100%;
}

#restaurant-root .s03v2-stocktake-cogs-option input {
  margin-top: 0.2rem;
  flex: 0 0 auto;
}

#restaurant-root .s03v2-stocktake-cogs-fields {
  margin-top: 0.45rem;
}

#restaurant-root .s03v2-stocktake-cogs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.75rem;
  margin-top: 0.35rem;
}

#restaurant-root .s03v2-stocktake-cogs-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

#restaurant-root .s03v2-stocktake-cogs-field--readonly {
  grid-column: 1 / -1;
}

#restaurant-root .s03v2-stocktake-cogs-field-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--rsc-ink, #17211d);
}

#restaurant-root .s03v2-stocktake-cogs-field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 40px;
}

@media (max-width: 480px) {
  #restaurant-root .s03v2-stocktake-cogs-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

#restaurant-root .s03v2-wc-table {
  max-width: 34rem;
  width: 100%;
  margin-top: 0.35rem;
  table-layout: fixed;
}

#restaurant-root .s03v2-wc-symbol {
  width: 1.35rem;
  padding: 0.25rem 0.2rem 0.25rem 0;
}

#restaurant-root .s03v2-wc-label {
  padding: 0.25rem 0.4rem 0.25rem 0;
}

#restaurant-root .s03v2-wc-amount {
  width: 42%;
  min-width: 9.5rem;
  padding: 0.25rem 0;
}

#restaurant-root .s03v2-wc-row--total .s03v2-wc-name,
#restaurant-root .s03v2-wc-row--total .s03v2-wc-amount {
  padding-top: 0.4rem;
}

/*
 * restaurant-desktop-working-capital-metrics-open-fix-001
 * Restaurant denser WCM card; keep details display:block (never grid) so desktop
 * and mobile share the same open/click path. No viewport fork of expand logic.
 */
#restaurant-root .s03v2-wcm {
  display: block;
  padding: 0.55rem 0.7rem;
  margin-top: 0.45rem;
}

#restaurant-root .s03v2-wcm.s03v2-tool > .s03v2-tool-summary {
  cursor: pointer;
  pointer-events: auto;
}

#restaurant-root .s03v2-wcm.s03v2-tool > .s03v2-tool-body {
  display: block;
  overflow: visible;
  pointer-events: auto;
}

#restaurant-root .s03v2-wcm.s03v2-tool:not([open]) > .s03v2-tool-body {
  display: none;
}

#restaurant-root .s03v2-wcm-block + .s03v2-wcm-block {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
}

#restaurant-root .s03v2-wcm-status[data-s03v2-wcm-compact-insufficient] {
  margin: 0.2rem 0 0.45rem;
  line-height: 1.35;
}

@media (max-width: 480px) {
  /*
   * restaurant-mobile-general-parity-001
   * + restaurant-mobile-side-gutter-nudge-001
   * Topbar and content shell share 8px side inset (was content 2px).
   * Do not re-inflate to 12–16px.
   */
  #restaurant-root .restaurant-topbar {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }

  #restaurant-root .restaurant-workspace-hero,
  #restaurant-root .restaurant-panel:not(.restaurant-panel--calculator) {
    margin-left: max(8px, env(safe-area-inset-left));
    margin-right: max(8px, env(safe-area-inset-right));
  }

  #restaurant-root .restaurant-panel.restaurant-panel--calculator {
    margin-left: max(8px, env(safe-area-inset-left));
    margin-right: max(8px, env(safe-area-inset-right));
    padding-left: 0;
    padding-right: 0;
  }

  #restaurant-root .restaurant-topbar-row--prefs {
    width: 100%;
  }

  #restaurant-root .restaurant-chrome-field {
    flex: 1 1 0;
    min-width: 0;
  }

  #restaurant-root .restaurant-chrome-field--currency {
    flex: 0 1 5.25rem;
    max-width: 6rem;
  }

  #restaurant-root .s02v2-rsc-meta-grid {
    grid-template-columns: 1fr;
  }

  #restaurant-root .s02v2-rsc-title-row--channel { order: 1; }
  #restaurant-root .s02v2-rsc-control--channel { order: 2; }
  #restaurant-root .s02v2-rsc-title-row--fulfillment { order: 3; }
  #restaurant-root .s02v2-rsc-control--fulfillment { order: 4; }

  #restaurant-root .restaurant-grid {
    grid-template-columns: 1fr;
  }

  #restaurant-root .s03v2-wc-table {
    max-width: none;
  }

  #restaurant-root .s03v2-wc-amount {
    min-width: 0;
    width: auto;
  }
}

/*
 * =============================================================================
 * INDUSTRY_FIXED_EXPENSE_AMOUNT_PERIOD_MOBILE_STANDARD
 * （未来行业可复制模板 — 住宿／零售等直接复制本块局部规则＋wrapper，勿另起一套）
 *
 * Phone ≤480 only — Fixed Operating Expenses “Amount | Period” rows:
 *   - local wrapper: `[data-industry-fixed-expense-amount-period-rows]`
 *     stays inside S02 content (no 50vw breakout). Parent `#operating-records`
 *     uses overflow:clip; viewport breakout was clipped to fragments like “ent”.
 *   - grid: minmax(0, 3fr) minmax(118px, 2fr)  → ~60% amount | ~40% period
 *   - column-gap: 8px
 *   - period min width: 118px
 *   - control height 40px (General QHC fixed-row chrome)
 *
 * Source of column ratio: General QHC
 *   `#quick-health-check [data-qhc-disclosure="fixed"] .qhc-fixed-controls`
 *
 * Scope: `#restaurant-root [data-s02v2-region="fixed_costs"]` only.
 * Does NOT apply 6:4 to date+category, purchase, biz-info, Sales,
 * General, QHC, or desktop/tablet (≥481).
 * =============================================================================
 */
@media (max-width: 480px) {
  #restaurant-root [data-s02v2-region="fixed_costs"] [data-industry-fixed-expense-amount-period-rows] {
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  #restaurant-root [data-s02v2-region="fixed_costs"] .qhc-fixed-controls {
    box-sizing: border-box;
    column-gap: 8px;
    gap: 8px;
    grid-template-columns: minmax(0, 3fr) minmax(118px, 2fr);
    justify-content: stretch;
    max-width: none;
    width: 100%;
  }

  #restaurant-root [data-s02v2-region="fixed_costs"] .qhc-fixed-amount,
  #restaurant-root [data-s02v2-region="fixed_costs"] .qhc-fixed-period {
    box-sizing: border-box;
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  /* Match General QHC fixed-row control chrome (not the S02 44px touch target). */
  #restaurant-root [data-s02v2-region="fixed_costs"] .qhc-fixed-amount input,
  #restaurant-root [data-s02v2-region="fixed_costs"] .qhc-fixed-period select {
    box-sizing: border-box;
    height: 40px;
    max-width: none;
    min-height: 40px;
    min-width: 0;
    width: 100%;
  }

  #restaurant-root [data-s02v2-region="fixed_costs"] .qhc-fixed-period select {
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }

  #restaurant-root [data-s02v2-region="fixed_costs"] .qhc-fixed-label {
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    overflow-wrap: break-word;
    white-space: normal;
    word-break: normal;
  }
}

/*
 * =============================================================================
 * restaurant-dpc-screenshot-consistency-polish-001
 * Phone ≤480 only — unify restaurant form card content edges + control chrome.
 *
 * Targets (computed against calculator host, not the screen edge):
 *   - same-level card content L/R inset ≈ 16px (align with 02/03 heading text)
 *   - input/select/date visual height 40px (match S01 + fixed-expense / QHC)
 *   - long dual pairs stack (product type|status); short pairs stay 2-col
 *   - Sales field labels (Entry method / Customer / Sales channel / Fulfilment)
 *     share one label tier; platform note uses full available width
 *
 * Does NOT change: outer panel↔screen position, desktop (≥481), General, QHC,
 * formulas, or Amount|Period 6:4 (that stays on fixed_costs only above).
 * =============================================================================
 */
@media (max-width: 480px) {
  /*
   * restaurant-mobile-general-parity-001
   * Stop widening past General: shared .s02v2-root ≤699 is already padding: 8px.
   * S01 uses General mobile input-panel pad (4px) instead of a restaurant-only 16px guided pad.
   */
  #restaurant-root .s02v2-root {
    padding-left: 8px;
    padding-right: 8px;
  }

  #restaurant-root #product-margin-form.input-panel.section01-flow {
    padding-left: 4px;
    padding-right: 4px;
  }

  #restaurant-root #product-margin .s01-guided-step {
    padding-left: 4px;
    padding-right: 4px;
  }

  /* Unify S02 control chrome with S01 / fixed-expense 40px (restaurant phone only). */
  #restaurant-root .s02v2-root.qhc-module input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
  #restaurant-root .s02v2-root.qhc-module select,
  #restaurant-root .s02v2-root .smp-field > input,
  #restaurant-root .s02v2-root .smp-input-affix input,
  #restaurant-root .s02v2-root .s02v2-bizinfo-save {
    box-sizing: border-box;
    height: 40px;
    min-height: 40px;
  }

  #restaurant-root .s02v2-root .primary-action,
  #restaurant-root .s02v2-root .secondary-action {
    box-sizing: border-box;
    min-height: 40px;
  }

  /*
   * polish-003: match General — product name full width; type|status share a row
   * when width allows. Stack only when a column would crush below ~148px
   * (covers long ES/PT labels without forcing a tall stack at 390/430).
   */
  #restaurant-root #product-margin .s01-product-fields {
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  }

  #restaurant-root #product-margin .s01-product-fields > .product-name-field {
    grid-column: 1 / -1;
  }

  /* Entry method / Sales channel / Fulfilment share one label tier. */
  #restaurant-root .s02v2-order-sources-label,
  #restaurant-root .s02v2-rsc-title {
    color: var(--rsc-ink, #17211d);
    font-size: 0.85rem;
    font-weight: 600;
  }

  #restaurant-root .s02v2-order-sources-wrap {
    margin-bottom: 0.75rem;
  }

  #restaurant-root .s02v2-entry-method-hint {
    margin: 0.35rem 0 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Customer optional: field-label weight, not a louder pill than peers. */
  #restaurant-root .s02v2-rsc-anonymous-badge {
    background: transparent;
    border-radius: 0;
    color: var(--rsc-ink, #17211d);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0;
  }

  /* Platform / Other supplement note: full available width, no nested squeeze. */
  #restaurant-root .s02v2-rsc-platform-note,
  #restaurant-root .s02v2-rsc-platform-note .qhc-field,
  #restaurant-root .s02v2-rsc-platform-note .s02v2-field,
  #restaurant-root .s02v2-rsc-platform-note input {
    box-sizing: border-box;
    max-width: none;
    min-width: 0;
    width: 100%;
  }
}

/*
 * =============================================================================
 * restaurant-mobile-obstruction-and-text-clipping-fix-001 (B)
 * Phone ≤480 only — undo real text/control clipping inside #restaurant-root.
 * Does not change DPC header column left geometry, copy, formulas, or General.
 * =============================================================================
 */
@media (max-width: 480px) {
  /* S01 heading description: section01.css clamps to 1 line with ellipsis. */
  #restaurant-root .restaurant-calculator-host #product-margin .section01-heading > p {
    -webkit-box-orient: unset;
    -webkit-line-clamp: unset;
    display: block;
    height: auto;
    max-height: none;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Payment / receipt status: wrap at words only — never mid-English-word. */
  #restaurant-root .s02v2-purchase-field--payment .s02v2-settlement-status .qhc-choice-option,
  #restaurant-root .s02v2-purchase-field--payment .s02v2-settlement-status .qhc-choice-option--compact {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  #restaurant-root .s02v2-purchase-field--payment .s02v2-settlement-status .qhc-choice-option > span {
    hyphens: none;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
  }

  /*
   * restaurant-purchase-label-align-and-howto-article-001 (phone)
   * Long purchase category option cannot wrap inside a native <select>.
   * Expand only the <select> into the S02 content pad (General-parity 8px).
   * Do NOT negative-margin the whole field — that pulled 「类别」left of peer
   * labels and cramped it against 「采购明细」.
   */
  #restaurant-root .s02v2-purchase-field--category {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  #restaurant-root .s02v2-purchase-field--category > .qhc-field {
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  #restaurant-root .s02v2-purchase-field--category > .qhc-field > select {
    box-sizing: border-box;
    margin-left: -8px;
    margin-right: -8px;
    max-width: none;
    min-width: 0;
    padding-left: 10px;
    padding-right: 28px;
    text-overflow: clip;
    width: calc(100% + 16px);
  }

  /* Purchase / order date: avoid overflow:hidden clipping year digits. */
  #restaurant-root .s02v2-purchase-row.s02v2-purchase-row--meta .s02v2-meta-date-wrap > input[type="date"] {
    overflow: visible;
    text-overflow: clip;
  }

  #restaurant-root .s02v2-purchase-row.s02v2-purchase-row--meta .s02v2-meta-date-wrap {
    min-width: 0;
    overflow: visible;
  }

  /*
   * Date | document on one row is too narrow for a full date + calendar control.
   * Stack on restaurant phone only so the date value stays fully readable.
   */
  #restaurant-root .s02v2-purchase-row.s02v2-purchase-row--meta {
    grid-template-columns: minmax(0, 1fr);
  }

  #restaurant-root .s02v2-purchase-row.s02v2-purchase-row--meta > .s02v2-meta-date-field,
  #restaurant-root .s02v2-purchase-row.s02v2-purchase-row--meta > .qhc-field.s02v2-field,
  #restaurant-root .s02v2-purchase-row.s02v2-purchase-row--meta > .s02v2-purchase-field--payment {
    grid-column: 1 / -1;
    max-width: none;
    width: 100%;
  }

  /* Supplier / customer selected value + hints: wrap, do not ellipsize. */
  #restaurant-root .bp-customer-combobox-value {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

  #restaurant-root .s02v2-root .qhc-hint,
  #restaurant-root .s02v2-root .smp-hint,
  #restaurant-root .s02v2-root .qhc-hint--compact {
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    overflow-wrap: break-word;
    text-overflow: unset;
    white-space: normal;
    word-break: normal;
  }

  /* Business Information: people → area → date → save (same order as desktop). */
  #restaurant-root .s02v2-bizinfo-row,
  #restaurant-root .s02v2-bizinfo-row--stable-order {
    align-items: stretch;
    display: grid;
    gap: 10px;
    grid-template-areas: none;
    grid-template-columns: minmax(0, 1fr);
  }

  #restaurant-root .s02v2-bizinfo-people,
  #restaurant-root .s02v2-bizinfo-area,
  #restaurant-root .s02v2-bizinfo-row > .smp-standalone-date,
  #restaurant-root .s02v2-bizinfo-actions {
    flex: none;
    grid-area: auto;
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  #restaurant-root .s02v2-bizinfo-people { order: 1; }
  #restaurant-root .s02v2-bizinfo-area { order: 2; }
  #restaurant-root .s02v2-bizinfo-row > .smp-standalone-date { order: 3; }
  #restaurant-root .s02v2-bizinfo-actions { order: 4; }

  #restaurant-root .s02v2-bizinfo-row > .smp-standalone-date > input[type="date"],
  #restaurant-root .qhc-module .s02v2-bizinfo-row .smp-standalone-date > input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]) {
    max-width: none;
    min-width: 0;
    overflow: visible;
    width: 100%;
  }

  /* Save on its own row — content-sized like General desktop save, not paired with area. */
  #restaurant-root .s02v2-bizinfo-actions {
    justify-self: start;
    width: auto;
  }

  #restaurant-root .s02v2-bizinfo-save {
    width: auto;
  }

  /* Keep m² glued to the area input (shared businessResourceFields.css + restaurant reinforce). */
  #restaurant-root .s02v2-bizinfo-area .smp-input-affix {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    position: relative;
  }

  #restaurant-root .s02v2-bizinfo-area .smp-input-affix input {
    box-sizing: border-box;
    min-width: 0;
    padding-right: 2rem;
    width: 100%;
  }

  #restaurant-root .s02v2-bizinfo-area .smp-affix {
    color: var(--muted, #64716b);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
  }

  #restaurant-root .s02v2-bizinfo-people .smp-hint--per-block,
  #restaurant-root .s02v2-bizinfo-area .smp-hint--per-block {
    display: block;
    margin-top: 2px;
  }

  /* Entry-method / long labels: wrap at words, not mid-letter via anywhere. */
  #restaurant-root .s02v2-entry-method-hint {
    overflow-wrap: break-word;
    word-break: normal;
  }
}

/*
 * restaurant-operating-details-general-parity-004
 * Phone／narrow ≤699: never inherit General's date-first flex reorder.
 * Keep people → area → date → save; Save alone; m² affixed to area input.
 * Desktop (≥700) keeps shared section02V2 people|area|date grid.
 */
@media (max-width: 699px) {
  #restaurant-root .s02v2-bizinfo-row,
  #restaurant-root .s02v2-bizinfo-row--stable-order {
    align-items: stretch;
    display: grid;
    gap: 10px;
    grid-template-areas: none;
    grid-template-columns: minmax(0, 1fr);
  }

  #restaurant-root .s02v2-bizinfo-people,
  #restaurant-root .s02v2-bizinfo-area,
  #restaurant-root .s02v2-bizinfo-row > .smp-standalone-date,
  #restaurant-root .s02v2-bizinfo-actions {
    flex: none;
    grid-area: auto;
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  #restaurant-root .s02v2-bizinfo-people { order: 1; }
  #restaurant-root .s02v2-bizinfo-area { order: 2; }
  #restaurant-root .s02v2-bizinfo-row > .smp-standalone-date { order: 3; }
  #restaurant-root .s02v2-bizinfo-actions {
    justify-self: start;
    order: 4;
    width: auto;
  }

  #restaurant-root .s02v2-bizinfo-save {
    width: auto;
  }

  #restaurant-root .s02v2-bizinfo-area .smp-input-affix {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    position: relative;
  }

  #restaurant-root .s02v2-bizinfo-area .smp-input-affix input {
    box-sizing: border-box;
    min-width: 0;
    padding-right: 2rem;
    width: 100%;
  }

  #restaurant-root .s02v2-bizinfo-area .smp-affix {
    color: var(--muted, #64716b);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
  }
}

/*
 * restaurant-purchase-label-align-and-howto-article-001 (all viewports)
 * Heading → first field gap under 采购明细; end-of-page shared howto guide.
 */
#restaurant-root .s02v2-purchase-details-block {
  display: grid;
  gap: 10px;
  min-width: 0;
}

/*
 * restaurant-section02-titles-and-footer-parity-001
 * restaurant-footer-and-data-tools-parity-001
 * specialized-workspace-no-own-clear-action-001
 * restaurant-workspace-ad-slot-parity-001
 * End-of-page: data tools → howto (inside specialized main column) → legal footer.
 * No industry clear action in this chain.
 */
#restaurant-root .specialized-workbench-main > .homepage-guide {
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 8px);
}

#restaurant-root .specialized-workbench-main > .data-tools-card,
#restaurant-root .specialized-workbench-main > .homepage-guide,
#restaurant-root > .site-footer {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 8px);
}

#restaurant-root .specialized-workbench-main > .data-tools-card {
  margin-top: 8px;
}

#restaurant-root > .site-footer {
  margin-bottom: 24px;
  max-width: none;
}

/*
 * =============================================================================
 * restaurant-section-01-mobile-layout-closeout-001 (phone ≤480)
 * Tighter S01 material cards; portion cost on one line; hide empty supplier
 * chrome; suppress browser autofill widgets on material fields.
 * Restaurant-scoped only — does not rewrite General section01.css / formulas.
 * =============================================================================
 */
@media (max-width: 480px) {
  #restaurant-root #product-margin .s01-recipe-item {
    gap: 3px 6px;
    margin: 0 0 4px;
    padding: 6px 8px;
  }

  #restaurant-root #product-margin .s01-recipe-name {
    font-size: 14px;
    line-height: 1.25;
  }

  /* Empty override (supplierUnspecified → "") collapses unused supplier chrome. */
  #restaurant-root #product-margin .s01-recipe-supplier:empty {
    display: none;
  }

  #restaurant-root #product-margin .s01-recipe-item:has(.s01-recipe-supplier:empty) .s01-recipe-usage,
  #restaurant-root #product-margin .s01-recipe-item:has(.s01-recipe-supplier:empty) .s01-recipe-unit {
    grid-row: 2;
  }

  #restaurant-root #product-margin .s01-recipe-item:has(.s01-recipe-supplier:empty) .s01-recipe-unit-price {
    grid-column: 1;
    grid-row: 3;
  }

  /*
   * Portion cost: label + amount on one line inside the metrics cell
   * (keeps card compact vs a full-width cost row).
   */
  #restaurant-root #product-margin .s01-recipe-item-cost {
    align-items: baseline;
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    grid-column: 2;
    grid-row: 4;
    justify-content: flex-start;
    min-width: 0;
    overflow: hidden;
    padding: 4px 6px;
    white-space: nowrap;
  }

  #restaurant-root #product-margin .s01-recipe-item:has(.s01-recipe-supplier:empty) .s01-recipe-item-cost {
    grid-row: 3;
  }

  #restaurant-root #product-margin .s01-recipe-usage::before,
  #restaurant-root #product-margin .s01-recipe-unit::before,
  #restaurant-root #product-margin .s01-recipe-unit-price::before {
    font-size: 10px;
    line-height: 1.15;
  }

  #restaurant-root #product-margin .s01-recipe-usage::after,
  #restaurant-root #product-margin .s01-recipe-unit::after,
  #restaurant-root #product-margin .s01-recipe-unit-price::after {
    font-size: 12px;
    line-height: 1.2;
  }

  #restaurant-root #product-margin .s01-recipe-item-cost::before,
  #restaurant-root #product-margin .s01-recipe-item-cost::after {
    flex: 0 1 auto;
    font-size: 11px;
    line-height: 1.15;
    min-width: 0;
    white-space: nowrap;
  }

  #restaurant-root #product-margin .s01-recipe-item-cost::after {
    color: var(--accent-dark);
    flex: 0 0 auto;
    font-weight: 800;
    overflow-wrap: normal;
    word-break: normal;
  }

  /* Suppress floating autofill chrome inside material / supplier fields. */
  #restaurant-root #product-margin input::-webkit-contacts-auto-fill-button,
  #restaurant-root #product-margin input::-webkit-credentials-auto-fill-button,
  #restaurant-root #product-margin input::-webkit-strong-password-auto-fill-button {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    visibility: hidden !important;
    width: 0 !important;
  }
}

/*
 * =============================================================================
 * restaurant-section01-supplier-selector-layout-fix-001
 * Compact supplier control in S01 ingredient row: closed = name/placeholder +
 * chevron only (no 更换／编辑资料／清除 in form flow). Menu is an overlay.
 * Restaurant-scoped — General selected-bar path unchanged.
 * =============================================================================
 */
#restaurant-root #product-margin .s01-material-supplier-field .bp-supplier-combobox-shell {
  box-sizing: border-box;
  grid-row: 2;
  height: 46px;
  max-width: 100%;
  min-height: 46px;
  min-width: 0;
  position: relative;
  width: 100%;
}

#restaurant-root #product-margin .s01-material-supplier-field .bp-supplier-combobox-toggle {
  box-sizing: border-box;
  height: 46px;
  min-height: 46px;
  padding: 0 28px 0 10px;
}

#restaurant-root #product-margin .s01-material-supplier-field .bp-supplier-combobox-menu {
  z-index: 50;
}

#restaurant-root #product-margin .s01-material-supplier-field .s01-supplier-save-flash,
#restaurant-root #product-margin .s01-material-supplier-field [data-bp-needs-contact],
#restaurant-root #product-margin .s01-material-supplier-field [data-bp-inline-editor] {
  grid-column: 1 / -1;
  grid-row: 3;
  min-width: 0;
}

/* Keep the closed control row fixed; overlay must not stretch the field group. */
#restaurant-root #product-margin .s01-material-editor > .s01-material-supplier-field:has(.bp-supplier-combobox) {
  grid-template-rows: auto 46px auto;
}

@media (max-width: 900px) {
  #restaurant-root #product-margin .s01-material-supplier-field .bp-supplier-combobox-shell,
  #restaurant-root #product-margin .s01-material-supplier-field .bp-supplier-combobox-toggle {
    height: 40px;
    min-height: 40px;
  }

  #restaurant-root #product-margin .s01-material-editor > .s01-material-supplier-field:has(.bp-supplier-combobox) {
    grid-template-rows: auto 40px auto;
  }
}