/* Screens 020–024 use live food controls and result data; the desktop cascade is isolated. */
@layer fuuvo-mobile-design {
@media (max-width: 920px) {
    html body .food-app.fuuvo-mobile-food-prototype { --food-phone-paper: var(--mobile-paper, #fff); --food-phone-ink: var(--mobile-ink, #171821); --food-phone-muted: var(--mobile-muted, #786e83); --food-phone-line: var(--mobile-line, #dddfe6); --food-phone-soft: var(--mobile-surface, #f6f6f8); --food-phone-tint: var(--mobile-accent, #eeeafa); }
    html body .food-app.fuuvo-mobile-food-prototype .food-main { padding: 12px 20px calc(124px + env(safe-area-inset-bottom)) !important; background: radial-gradient(ellipse 100% 180px at 50% -50px, #ffdaeb55, transparent), var(--food-phone-paper) !important; }
    html body:is([data-ui-theme="dark"], [data-theme="dark"]) .food-app.fuuvo-mobile-food-prototype .food-main { background: radial-gradient(ellipse 100% 180px at 50% -50px, #5d365044, transparent), var(--food-phone-paper) !important; }
    html body .food-app.fuuvo-mobile-food-prototype[data-page="home"] :is(.food-heading:not(.food-empty-context), .food-content-grid, .food-filter-row, .food-prompt-box) { display: none !important; }
    html body .food-app.fuuvo-mobile-food-prototype .mobile-food-intro { margin: 0 0 20px !important; color: var(--food-phone-ink) !important; font-size: 27px !important; line-height: 1.13 !important; letter-spacing: -.7px !important; font-weight: 600 !important; }
    html body .mobile-food-home { display: block !important; }
    html body .food-app.fuuvo-mobile-food-prototype .mobile-food-presets .food-quick-grid { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; margin: 0 0 12px !important; padding: 0 !important; }
    html body .food-app.fuuvo-mobile-food-prototype .mobile-food-presets .food-quick-card { display: inline-flex !important; min-height: 36px !important; height: auto !important; width: auto !important; min-width: 0 !important; padding: 8px 11px !important; border: 1px solid var(--food-phone-line) !important; border-radius: 20px !important; background: var(--food-phone-paper) !important; color: var(--food-phone-muted) !important; font-size: 11px !important; box-shadow: none !important; }
    html body .food-app.fuuvo-mobile-food-prototype .mobile-food-presets .food-quick-card img { display: none !important; }
    html body .food-app.fuuvo-mobile-food-prototype .mobile-food-presets .food-quick-card span { font-size: 11px !important; font-weight: 400 !important; line-height: 1.4 !important; }
    html body .food-app.fuuvo-mobile-food-prototype .mobile-food-presets .food-quick-card.is-selected { background: var(--food-phone-tint) !important; color: var(--food-phone-ink) !important; }
    html body .food-app.fuuvo-mobile-food-prototype .mobile-food-presets .food-quick-card:last-child { display: none !important; }
    html body .mobile-food-location-row { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; min-height: 70px !important; margin: 10px 0 18px !important; padding: 13px 0 !important; border: 0 !important; border-top: 1px solid var(--food-phone-line) !important; border-bottom: 1px solid var(--food-phone-line) !important; background: transparent !important; color: var(--food-phone-ink) !important; text-align: left !important; }
    .mobile-food-location-row svg { width: 24px; height: 24px; color: var(--food-phone-muted); flex-shrink: 0; }
    .mobile-food-row-copy { flex: 1; min-width: 0; display: grid; gap: 5px; }
    .mobile-food-row-copy strong { font-size: 14px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
    .mobile-food-row-copy small { font-size: 11px; line-height: 1.4; color: var(--food-phone-muted); }
    .mobile-food-location-row > span:last-child svg { width: 17px; height: 17px; }
    .mobile-food-preference-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 2px; }
    .mobile-food-preference-head h3 { font-size: 16px; font-weight: 600; color: var(--food-phone-ink); margin: 0; }
    .mobile-food-preference-head button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; color: var(--food-phone-muted); }
    .mobile-food-preference-head svg { width: 22px; height: 22px; }
    .mobile-food-field { display: block; margin: 18px 0; }
    .mobile-food-field > span { display: block; margin-bottom: 8px; color: var(--food-phone-ink); font-size: 12px; line-height: 1.4; font-weight: 600; }
    html body .mobile-food-field :is(select, textarea) { display: block !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; min-height: 48px !important; border: 1px solid var(--food-phone-line) !important; border-radius: 12px !important; padding: 12px 13px !important; background: var(--food-phone-paper) !important; color: var(--food-phone-ink) !important; font-size: 16px !important; line-height: 1.5 !important; box-shadow: none !important; }
    .mobile-food-field textarea { min-height: 124px !important; resize: vertical; }
    .mobile-food-field textarea::placeholder { color: var(--food-phone-muted); opacity: .85; }
    html body .mobile-food-footer { position: fixed !important; z-index: 75 !important; left: 0 !important; right: 0 !important; bottom: var(--mobile-workspace-keyboard-inset, 0px) !important; padding: 12px 20px calc(26px + env(safe-area-inset-bottom)) !important; border-top: 1px solid var(--food-phone-line) !important; background: var(--food-phone-paper) !important; }
    html body .mobile-food-primary { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 48px !important; box-sizing: border-box !important; padding: 12px 15px !important; margin: 0 !important; border: 1px solid var(--food-phone-ink) !important; border-radius: 13px !important; background: var(--food-phone-ink) !important; color: var(--food-phone-paper) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; text-decoration: none !important; }
    html body .mobile-food-scrim { position: fixed !important; z-index: 10040 !important; inset: 0 !important; padding: 0 !important; border: 0 !important; background: #24202b60 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    html body .mobile-food-sheet { --food-phone-paper: var(--mobile-paper, #fff); --food-phone-ink: var(--mobile-ink, #171821); --food-phone-muted: var(--mobile-muted, #786e83); --food-phone-line: var(--mobile-line, #dddfe6); position: fixed !important; z-index: 10041 !important; inset: auto 0 var(--mobile-food-keyboard-inset, 0px) !important; display: flex !important; flex-direction: column !important; width: 100% !important; box-sizing: border-box !important; max-height: calc(var(--mobile-food-viewport-height, 100dvh) * .9) !important; padding: 10px 20px 0 !important; border-radius: 25px 25px 0 0 !important; background: var(--food-phone-paper) !important; color: var(--food-phone-ink) !important; overflow: hidden !important; }
    .mobile-food-handle { width: 40px; height: 4px; border-radius: 4px; background: var(--food-phone-line); margin: 0 auto 8px; flex-shrink: 0; }
    .mobile-food-sheet-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; gap: 12px; flex-shrink: 0; }
    .mobile-food-sheet-head h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--food-phone-ink); }
    .mobile-food-sheet-head button { display: grid; place-items: center; width: 44px; height: 44px; background: transparent; color: var(--food-phone-ink); border: 0; border-radius: 50%; flex-shrink: 0; }
    .mobile-food-sheet-head svg { width: 22px; height: 22px; }
    .mobile-food-sheet-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 12px; }
    .mobile-food-sheet-footer { padding: 12px 0 calc(26px + env(safe-area-inset-bottom)); background: var(--food-phone-paper); flex-shrink: 0; }
    html body .mobile-food-sheet .food-location-panel { padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
    html body .mobile-food-sheet .food-location-panel > h2 { display: none !important; }
    html body .mobile-food-sheet .food-location-controls { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; margin: 14px 0 !important; }
    html body .mobile-food-sheet .food-location-current { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; min-height: 48px !important; padding: 12px !important; border: 1px solid var(--food-phone-line) !important; border-radius: 13px !important; background: var(--food-phone-paper) !important; color: var(--food-phone-ink) !important; font-size: 14px !important; }
    .mobile-food-sheet .food-location-current img { width: 20px; height: 20px; }
    .mobile-food-sheet .food-location-status { color: var(--food-phone-muted); font-size: 12px; line-height: 1.6; margin: 0; }
    html body .mobile-food-sheet .food-address-picker { display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important; margin-top: 18px !important; }
    .mobile-food-sheet .food-address-picker label > span { display: block; font-size: 12px; font-weight: 600; margin: 0 0 8px; color: var(--food-phone-ink); }
    html body .mobile-food-sheet .food-address-picker :is(input, select, .food-mrt-trigger) { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 48px !important; padding: 12px 13px !important; border: 1px solid var(--food-phone-line) !important; border-radius: 12px !important; background: var(--food-phone-paper) !important; color: var(--food-phone-ink) !important; font-size: 16px !important; line-height: 1.5 !important; }
    html body .mobile-food-sheet .food-mrt-picker { position: static !important; width: 100% !important; max-height: 38dvh !important; margin: 8px 0 0 !important; padding: 10px !important; box-sizing: border-box !important; border: 1px solid var(--food-phone-line) !important; border-radius: 13px !important; background: var(--food-phone-paper) !important; box-shadow: none !important; }
    .mobile-food-sheet .food-mrt-tools { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .mobile-food-sheet .food-mrt-options { max-height: 25dvh; overflow-y: auto; }
    .mobile-food-sheet .food-mrt-option { min-height: 48px; background: transparent; color: var(--food-phone-ink); }
    .mobile-food-sheet .food-mrt-option.is-selected { background: var(--mobile-accent, #eeeafa); }
    html body .food-app.fuuvo-mobile-food-prototype .food-results-heading { margin: 0 0 12px !important; display: block !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-results-heading h1 { font-size: 14px !important; line-height: 1.5 !important; margin: 0 0 6px !important; color: var(--food-phone-muted) !important; font-weight: 500 !important; letter-spacing: 0 !important; }
    html body .food-app.fuuvo-mobile-food-prototype #food-results-meta { font-size: 12px !important; line-height: 1.6 !important; color: var(--food-phone-muted) !important; }
    html body .food-app.fuuvo-mobile-food-prototype #food-edit-filters { display: inline-flex !important; min-height: 40px !important; padding: 10px 0 !important; font-size: 12px !important; color: var(--food-phone-muted) !important; }
    .mobile-food-result-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
    .mobile-food-result-chips button { min-height: 36px; border: 1px solid var(--food-phone-line); border-radius: 20px; background: var(--food-phone-tint); padding: 8px 11px; color: var(--food-phone-ink); font-size: 11px; max-width: 100%; overflow-wrap: anywhere; }
    html body .food-app.fuuvo-mobile-food-prototype #food-results-list { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-restaurant-card { display: flex !important; flex-direction: column !important; gap: 0 !important; min-width: 0 !important; margin: 0 !important; padding: 14px !important; border: 1px solid var(--food-phone-line) !important; border-radius: 14px !important; background: var(--food-phone-paper) !important; box-shadow: none !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-restaurant-visual { width: 100% !important; height: 135px !important; min-height: 135px !important; border-radius: 10px !important; margin: 0 0 13px !important; flex: 0 0 auto !important; overflow: hidden !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-restaurant-visual img { max-width: 100% !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-restaurant-visual img:is(.food-restaurant-logo, .food-restaurant-logo-fit) { object-fit: contain !important; padding: 16px !important; box-sizing: border-box !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-restaurant-title-row { gap: 6px !important; align-items: baseline !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-restaurant-title-row h2 { font-size: 17px !important; line-height: 1.35 !important; font-weight: 600 !important; color: var(--food-phone-ink) !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-restaurant-copy p { font-size: 12px !important; color: var(--food-phone-muted) !important; line-height: 1.6 !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-tags span { font-size: 10px !important; padding: 5px 7px !important; border-radius: 6px !important; color: var(--food-phone-muted) !important; background: var(--food-phone-tint) !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-restaurant-reason { display: block !important; margin: 12px 0 !important; font-size: 12px !important; line-height: 1.65 !important; font-weight: 400 !important; color: var(--food-phone-ink) !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-restaurant-contact { margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid var(--food-phone-line) !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-restaurant-fact-line { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; font-size: 12px !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-restaurant-fact-line b { font-size: 11px !important; font-weight: 500 !important; color: var(--food-phone-muted) !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-restaurant-actions { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; gap: 8px !important; margin-top: 14px !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-restaurant-actions :is(a, button) { min-height: 44px !important; font-size: 12px !important; width: auto !important; }
    html body .food-app.fuuvo-mobile-food-prototype :is(.food-refine-panel, .food-detail-side) { position: static !important; border: 0 !important; background: transparent !important; padding: 0 !important; margin-top: 24px !important; }
    html body .food-app.fuuvo-mobile-food-prototype :is(.food-info-panel, .food-before-panel, .food-continue-card, .food-suggestion) { margin: 0 0 16px !important; padding: 16px !important; border: 1px solid var(--food-phone-line) !important; border-radius: 12px !important; background: var(--food-phone-paper) !important; color: var(--food-phone-ink) !important; box-shadow: none !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-detail-heading { margin: 0 0 20px !important; gap: 14px !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-detail-hero { width: 100% !important; height: 200px !important; border-radius: 10px !important; margin: 0 !important; background: var(--food-phone-tint) !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-detail-hero img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-detail-hero img.food-detail-logo { object-fit: contain !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-detail-heading h1 { margin: 0 0 6px !important; font-size: 27px !important; line-height: 1.2 !important; color: var(--food-phone-ink) !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-detail-heading p { margin: 0 !important; color: var(--food-phone-muted) !important; font-size: 13px !important; line-height: 1.6 !important; }
    html body .food-app.fuuvo-mobile-food-prototype :is(.food-info-panel, .food-before-panel, .food-continue-card) h2 { font-size: 16px !important; font-weight: 600 !important; color: var(--food-phone-ink) !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-info-panel p { font-size: 13px !important; color: var(--food-phone-muted) !important; line-height: 1.7 !important; }
    html body .food-app.fuuvo-mobile-food-prototype :is(.food-reference-grid, .food-live-contact-grid) > div { background: var(--food-phone-soft) !important; border-color: var(--food-phone-line) !important; color: var(--food-phone-ink) !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-live-action { min-height: 52px !important; color: var(--food-phone-ink) !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-ai-status { border: 1px solid var(--food-phone-line) !important; border-radius: 12px !important; background: var(--food-phone-soft) !important; color: var(--food-phone-ink) !important; padding: 14px !important; }
    html body .food-app.fuuvo-mobile-food-prototype .food-ai-status :is(strong, p) { font-size: 12px !important; line-height: 1.6 !important; color: var(--food-phone-muted) !important; }
    html body .mobile-food-sheet [hidden], html body .mobile-food-sheet[hidden], html body .mobile-food-scrim[hidden], html body .food-app.fuuvo-mobile-food-prototype [hidden] { display: none !important; }
    body.mobile-food-sheet-open { overflow: hidden !important; }
}
}
