id: mobile-event-card
category: mobile
difficulty: obvious
prompt: |
  Design ONLY a single upcoming-event tile on a phone agenda
  screen. The tile is full-width on a 375-wide screen with 16px
  outer margin, has rounded corners, and is laid out left-to-right:
    - a left date column: a colored band on top reading "OCT" (small
      uppercase white text) and a large dark day number "15" below
    - a vertical text stack on the right:
        - title "Design review with Sarah" (16/600)
        - a muted second line with a tiny clock glyph + "2:00 PM"
        - a muted third line with a tiny pin glyph + "Conference Room B"
  Do NOT render an agenda list, page header, day separators, or
  back button — only this one event card.
expected:
  must_contain_roles:
    - event-card
    - event-card-date
    - event-card-month-strip
    - event-card-month
    - event-card-day-strip
    - event-card-day
    - event-card-text
    - event-card-title
    - event-card-meta-row
    - event-card-time
    - event-card-time-icon
    - event-card-location
    - event-card-location-icon
expected_tool_if_any: add_event_card_v0
