id: dashboard-settings-page-composite
category: dashboard
difficulty: composite
prompt: |
  Design the body of a "Notifications" settings panel — a section
  inside a larger settings page. The panel is 720px wide. Contents
  top-to-bottom:
    - a section header "Notifications" (16/600) with a muted
      description "Choose what you want to be alerted about."
    - 4 settings rows, each ~56px tall with 16px horizontal padding,
      separated by hairline dividers. Each row has a leading icon,
      a title with optional subtitle, and a trailing iOS-style
      switch:
        - bell icon, "Email digest" / "Daily summary at 9am",
          switch ON
        - phone icon, "Push notifications" / "All channels",
          switch ON
        - message-circle icon, "Direct messages" / "Mentions only",
          switch OFF
        - alert-triangle icon, "Critical alerts" / "Always on",
          switch ON (and the row is visually slightly highlighted)
  Do NOT render the page's left sidebar, top app bar, or footer
  CTA — only the settings section described above.
expected:
  must_contain_roles:
    - section-header
    - setting-row
    - setting-row-icon
    - setting-row-title
    - setting-row-subtitle
    - setting-row-switch
  min_roles:
    setting-row: 4
