Morsel: component notes

A strip of up to three dish photos, then name, neighborhood and distance, then a coverage tag: "8 of 12 photographed", "4 photographed · partial menu" or "Menu not added yet". Cards without menu data explain that the menu is not available when activated. Coverage uses a count to show both the number photographed and the known menu size. On Home the cards sit in a horizontal rail; in the picker they stack as rows with the same strip.

Nearby, Menu, Compare, each with a visible label. A dark pill over reserved space at the bottom of every screen but the dish page, so content never sits under it. Menu opens the last restaurant, or the picker when none has been chosen. Compare carries a badge with the shortlist count, so no separate bar is needed above the menu.

• Thumbnail 104×104 with a short source tag: "Restaurant", "Diner", or "3 photos". The no-photo block keeps the thumbnail column and can grow to fit “No photo added yet: dish available.”
• Name, description (up to three lines), price. The description is the menu's own line, never a review.
• Compare toggle at the top right, a separate button so the row itself stays a single open action. aria-pressed reflects the shortlist; when the shortlist is full the toggle stays enabled and explains.
• The row's accessible name reads name, price and the photo note, including “No photo added yet: dish available.”

Two forms. Long on the photo itself: "Restaurant photo", "Diner photo". Short on thumbnails: "Restaurant", "Diner". With several photos the tag becomes a count and the dish page shows each source in turn. The source word carries the meaning. Photo labels use a dark backing and white text so the image beneath is not the only contrast surface.

One photo at a time, 320pt tall, with previous and next buttons as glass pills, a dot indicator and "2 of 3". Swipe also moves. The source label sits bottom left on every frame. The Back button floats over the top left, the same as on a dish without photos, where a 220pt no-photo block takes the photo's place.

• Photos: what exists and where from, then one line: appearance can vary between visits. A photo helps picture the food; it does not confirm ingredients or today's presentation.
• Ingredients: when the menu lists any of the tracked four, labeled chips (icon plus word) under "Menu lists"; otherwise "The menu lists none of nuts, gluten, dairy or shellfish." or "Ingredients aren't listed on the menu." Missing information stays visibly missing, and the tracked set is named so a short list is not read as a complete one.

• Count: the Compare tab carries a badge once anything is shortlisted; the toggle's toast says "added · Compare 2 of 3".
• Column: photo or no-photo block, name, restaurant, price, the full description, the ingredient chips or sentence, Remove. One column per dish, one to three, all equal width. Columns follow the width available: in a phone-sized view, a three-dish shortlist uses two columns, with the third dish on a second row. One "Add another from the menu" button below while there is room; with nothing shortlisted, the screen says so and offers "Go to the menu". The button opens the menu of whichever restaurant's menu or dish was opened last, or Nearby when none has been opened yet; with dishes from two restaurants in the columns it does not say which. Which menu it should open is still to be decided.
• Never a cart. No totals, no quantities, no next step past the menu. The subtitle is only the count: "2 of 3 dishes".

• Every action is a real button with a visible focus ring; rows, toggles and photo navigation work from the keyboard.
• Back returns focus to the row that opened the dish.
• Text scales to 140% through one custom property, and the compare grid drops from three columns to two. Menu-row descriptions are shortened to three lines; dish pages show them in full.
• Keyboard paths and photo-label contrast have been checked in browser review. Still to do: a screen-reader pass, physical-device touch checks, and a complete accessibility review.