id: mobile-setting-row
category: mobile
difficulty: obvious
prompt: |
  Design ONLY one row of a phone settings menu — the "Notifications"
  preference. The row is full width on a 375-wide screen, ~56px
  tall, with 16px horizontal padding. Left to right:
    - a small bell icon at the leading edge
    - a vertical text stack with "Notifications" on top (15/600)
      and a muted secondary line "Push alerts on" below it
    - a trailing iOS-style switch in the ON position (knob to the
      right, track tinted blue)
  Do NOT render a surrounding settings page, neighboring rows,
  section headers, or a tab bar — just this single row.
expected:
  must_contain_roles:
    - setting-row
    - setting-row-icon
    - setting-row-title
    - setting-row-subtitle
    - setting-row-switch
    - setting-row-switch-knob
expected_tool_if_any: add_setting_row_v0
