{
  "id": "quiet-clinic-care-plan",
  "name": "Care Plan",
  "theme": "quiet-clinic",
  "category": "Data & Reports",
  "description": "A shared plan written in the first person, where each step names who is responsible — you, the practice, or nobody yet.",
  "layout": "Vertical plan with generous 28px gaps between steps; each step carries an owner chip on the left and a plain sentence, and completed steps stay visible rather than collapsing.",
  "modules": [
    {
      "key": "head",
      "name": "Plan header",
      "html": "\n<header class=\"ph\"><h1>Marion’s plan</h1><p>Agreed with Dr Sandhu on 12 July. This is written in your words where we could manage it.</p><div class=\"mt\"><span>Next review · September</span><span>Shared with · you, Dr Sandhu, respiratory nurse</span></div></header>"
    },
    {
      "key": "steps",
      "name": "Plan steps",
      "html": "\n<ol class=\"pl\">\n  <li class=\"done\"><span class=\"ow me\">Me</span><div><b>Take the brown inhaler every morning, whether or not I feel breathless.</b><p>Started 12 July. Doing this most days.</p></div></li>\n  <li class=\"done\"><span class=\"ow us\">Practice</span><div><b>Send Marion a text when the September blood test is due.</b><p>Scheduled for 8 September.</p></div></li>\n  <li><span class=\"ow me\">Me</span><div><b>Write down anything that makes the breathlessness worse.</b><p>A note on the phone is fine. Bring it to the September appointment.</p></div></li>\n  <li><span class=\"ow us\">Practice</span><div><b>Refer Marion to pulmonary rehabilitation.</b><p>Waiting list is about 10 weeks. We will write when a place comes up.</p></div></li>\n  <li class=\"open\"><span class=\"ow no\">Not yet</span><div><b>Decide whether to change the preventer inhaler.</b><p>We agreed to leave this until we see the September results.</p></div></li>\n</ol>"
    },
    {
      "key": "flare",
      "name": "If things get worse",
      "html": "\n<section class=\"fl\"><h2>If things get worse</h2><ol><li><b>Use the blue inhaler</b> and sit upright. Wait ten minutes.</li><li><b>If it does not settle</b>, take the rescue steroids in the kitchen drawer and call the practice.</li><li><b>If you cannot finish a sentence</b>, call 999. Do not wait to see if it passes.</li></ol></section>"
    },
    {
      "key": "print",
      "name": "Plan actions",
      "html": "\n<footer class=\"pa\"><button type=\"button\" class=\"pri\">Print this plan</button><button type=\"button\">Share with a family member</button><button type=\"button\">Ask to change something</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "quiet-clinic-care-plan",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:59:53+09:00",
    "updatedAt": "2026-08-29T18:59:53+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/quiet-clinic-care-plan.json",
  "structure": "Vertical plan with generous 28px gaps between steps; each step carries an owner chip on the left and a plain sentence, and completed steps stay visible rather than collapsing.",
  "html": "<div class=\"dz dz-quiet-clinic-care-plan\" data-design=\"quiet-clinic-care-plan\" data-theme=\"quiet-clinic\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Plan header\">\n<header class=\"ph\"><h1>Marion’s plan</h1><p>Agreed with Dr Sandhu on 12 July. This is written in your words where we could manage it.</p><div class=\"mt\"><span>Next review · September</span><span>Shared with · you, Dr Sandhu, respiratory nurse</span></div></header></section>\n<section class=\"dz-mod\" data-mod=\"steps\" aria-label=\"Plan steps\">\n<ol class=\"pl\">\n  <li class=\"done\"><span class=\"ow me\">Me</span><div><b>Take the brown inhaler every morning, whether or not I feel breathless.</b><p>Started 12 July. Doing this most days.</p></div></li>\n  <li class=\"done\"><span class=\"ow us\">Practice</span><div><b>Send Marion a text when the September blood test is due.</b><p>Scheduled for 8 September.</p></div></li>\n  <li><span class=\"ow me\">Me</span><div><b>Write down anything that makes the breathlessness worse.</b><p>A note on the phone is fine. Bring it to the September appointment.</p></div></li>\n  <li><span class=\"ow us\">Practice</span><div><b>Refer Marion to pulmonary rehabilitation.</b><p>Waiting list is about 10 weeks. We will write when a place comes up.</p></div></li>\n  <li class=\"open\"><span class=\"ow no\">Not yet</span><div><b>Decide whether to change the preventer inhaler.</b><p>We agreed to leave this until we see the September results.</p></div></li>\n</ol></section>\n<section class=\"dz-mod\" data-mod=\"flare\" aria-label=\"If things get worse\">\n<section class=\"fl\"><h2>If things get worse</h2><ol><li><b>Use the blue inhaler</b> and sit upright. Wait ten minutes.</li><li><b>If it does not settle</b>, take the rescue steroids in the kitchen drawer and call the practice.</li><li><b>If you cannot finish a sentence</b>, call 999. Do not wait to see if it passes.</li></ol></section></section>\n<section class=\"dz-mod\" data-mod=\"print\" aria-label=\"Plan actions\">\n<footer class=\"pa\"><button type=\"button\" class=\"pri\">Print this plan</button><button type=\"button\">Share with a family member</button><button type=\"button\">Ask to change something</button></footer></section>\n</div>",
  "css": "\n.dz-quiet-clinic-care-plan { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 28px 30px 30px; max-width: 48rem; margin: 0 auto; }\n.dz-quiet-clinic-care-plan .ph h1 { font-size: 32px; font-weight: 700; margin: 0 0 8px; }\n.dz-quiet-clinic-care-plan .ph p { margin: 0 0 14px; font-size: 17px; line-height: 1.62; color: var(--muted-foreground); max-width: 54ch; }\n.dz-quiet-clinic-care-plan .mt { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }\n.dz-quiet-clinic-care-plan .mt span { background: var(--muted); border-radius: var(--pv-radius-xl); font-size: 14.5px; padding: 7px 16px; color: var(--muted-foreground); }\n.dz-quiet-clinic-care-plan .pl { list-style: none; margin: 0; padding: 0; }\n.dz-quiet-clinic-care-plan .pl li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 20px 0 20px; border-top: var(--pv-bw) solid var(--border); }\n.dz-quiet-clinic-care-plan .ow { align-self: start; text-align: center; font-size: 14px; font-weight: 600; padding: 7px 0; border-radius: var(--pv-radius-xl); }\n.dz-quiet-clinic-care-plan .ow.me { background: var(--primary); color: var(--primary-foreground); }\n.dz-quiet-clinic-care-plan .ow.us { background: var(--secondary); color: var(--secondary-foreground); }\n.dz-quiet-clinic-care-plan .ow.no { background: var(--muted); color: var(--muted-foreground); }\n.dz-quiet-clinic-care-plan .pl b { display: block; font-size: 18px; font-weight: 600; line-height: 1.45; }\n.dz-quiet-clinic-care-plan .pl p { margin: 7px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--muted-foreground); }\n.dz-quiet-clinic-care-plan .pl .done b { color: var(--muted-foreground); }\n.dz-quiet-clinic-care-plan .pl .done b::before { content: \"✓ \"; color: var(--primary); }\n.dz-quiet-clinic-care-plan .pl .open b { color: var(--muted-foreground); font-style: italic; }\n.dz-quiet-clinic-care-plan .fl { margin-top: 26px; background: var(--card); border-radius: var(--pv-radius); padding: 22px 26px; box-shadow: 0 2px 10px color-mix(in srgb, var(--foreground) 6%, transparent); border-left: 5px solid var(--destructive); }\n.dz-quiet-clinic-care-plan .fl h2 { font-size: 20px; font-weight: 700; margin: 0 0 12px; }\n.dz-quiet-clinic-care-plan .fl ol { margin: 0; padding-left: 22px; }\n.dz-quiet-clinic-care-plan .fl li { font-size: 17px; line-height: 1.7; margin-bottom: 9px; color: var(--muted-foreground); }\n.dz-quiet-clinic-care-plan .fl b { color: var(--foreground); }\n.dz-quiet-clinic-care-plan .pa { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }\n.dz-quiet-clinic-care-plan .pa button { font: inherit; font-size: 16px; min-height: 52px; padding: 0 24px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); background: var(--card); color: var(--foreground); cursor: pointer; transition: background var(--dur) var(--ease); }\n.dz-quiet-clinic-care-plan .pa button:hover { background: var(--secondary); }\n.dz-quiet-clinic-care-plan .pa .pri { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }\n.dz-quiet-clinic-care-plan .pa .pri:hover { background: var(--primary); opacity: .9; }\n@media (prefers-reduced-motion: reduce) { .dz-quiet-clinic-care-plan *, .dz-quiet-clinic-care-plan *::before, .dz-quiet-clinic-care-plan *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/quiet-clinic.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}