{
  "id": "quiet-clinic-intake",
  "name": "Intake Questions",
  "theme": "quiet-clinic",
  "category": "Settings & Forms",
  "description": "One question per screen, at 30px, with a progress line and an explicit \"I would rather not say\" on every sensitive question.",
  "layout": "A single centred question occupying the whole panel with answers as full-width 60px buttons; progress is a thin line at the very top and a \"saved\" note replaces any Next button.",
  "modules": [
    {
      "key": "progress",
      "name": "Progress line",
      "html": "\n<div class=\"pg\"><div class=\"pg-b\"><i style=\"width:38%\"></i></div><span>Question 5 of 13 · saved as you go</span></div>"
    },
    {
      "key": "question",
      "name": "The question",
      "html": "\n<div class=\"q\">\n  <h1>In the last two weeks, how often have you felt short of breath at rest?</h1>\n  <p class=\"hint\">At rest means sitting or lying down, not during activity. If you are not sure, choose the closest answer.</p>\n  <div class=\"ans\">\n    <button type=\"button\">Not at all</button>\n    <button type=\"button\">Several days</button>\n    <button type=\"button\" class=\"on\">More than half the days</button>\n    <button type=\"button\">Nearly every day</button>\n  </div>\n  <button type=\"button\" class=\"skip\">I would rather not answer this</button>\n</div>"
    },
    {
      "key": "nav",
      "name": "Back and pause",
      "html": "\n<div class=\"nv\"><button type=\"button\" class=\"bk\">Back</button><span class=\"sv\">Your answers are saved. You can close this and come back.</span><button type=\"button\" class=\"ps\">Pause and finish later</button></div>"
    },
    {
      "key": "aside",
      "name": "Why we ask",
      "html": "\n<aside class=\"wy\"><h2>Why we ask this</h2><p>Breathlessness at rest is scored differently from breathlessness on exertion, and the difference changes what Dr Sandhu checks first. Your answer is only visible to your care team.</p><a href=\"#\">How your answers are used</a></aside>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "quiet-clinic-intake",
    "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-intake.json",
  "structure": "A single centred question occupying the whole panel with answers as full-width 60px buttons; progress is a thin line at the very top and a \"saved\" note replaces any Next button.",
  "html": "<div class=\"dz dz-quiet-clinic-intake\" data-design=\"quiet-clinic-intake\" data-theme=\"quiet-clinic\">\n<section class=\"dz-mod\" data-mod=\"progress\" aria-label=\"Progress line\">\n<div class=\"pg\"><div class=\"pg-b\"><i style=\"width:38%\"></i></div><span>Question 5 of 13 · saved as you go</span></div></section><div class=\"cols\"><section class=\"dz-mod\" data-mod=\"question\" aria-label=\"The question\">\n<div class=\"q\">\n  <h1>In the last two weeks, how often have you felt short of breath at rest?</h1>\n  <p class=\"hint\">At rest means sitting or lying down, not during activity. If you are not sure, choose the closest answer.</p>\n  <div class=\"ans\">\n    <button type=\"button\">Not at all</button>\n    <button type=\"button\">Several days</button>\n    <button type=\"button\" class=\"on\">More than half the days</button>\n    <button type=\"button\">Nearly every day</button>\n  </div>\n  <button type=\"button\" class=\"skip\">I would rather not answer this</button>\n</div></section><section class=\"dz-mod\" data-mod=\"aside\" aria-label=\"Why we ask\">\n<aside class=\"wy\"><h2>Why we ask this</h2><p>Breathlessness at rest is scored differently from breathlessness on exertion, and the difference changes what Dr Sandhu checks first. Your answer is only visible to your care team.</p><a href=\"#\">How your answers are used</a></aside></section></div><section class=\"dz-mod\" data-mod=\"nav\" aria-label=\"Back and pause\">\n<div class=\"nv\"><button type=\"button\" class=\"bk\">Back</button><span class=\"sv\">Your answers are saved. You can close this and come back.</span><button type=\"button\" class=\"ps\">Pause and finish later</button></div></section>\n</div>",
  "css": "\n.dz-quiet-clinic-intake { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 0 30px; }\n.dz-quiet-clinic-intake .pg { padding: 0 0 26px; }\n.dz-quiet-clinic-intake .pg-b { height: 6px; background: var(--muted); }\n.dz-quiet-clinic-intake .pg-b i { display: block; height: 100%; background: var(--primary); transition: width var(--dur-slow) var(--ease); }\n.dz-quiet-clinic-intake .pg span { display: block; margin-top: 10px; padding: 0 30px; font-size: 14.5px; color: var(--muted-foreground); }\n.dz-quiet-clinic-intake .cols { display: grid; grid-template-columns: minmax(0, 34rem) 260px; gap: 40px; justify-content: center; padding: 0 30px; }\n.dz-quiet-clinic-intake .q h1 { font-size: 30px; line-height: 1.28; font-weight: 700; margin: 0 0 12px; }\n.dz-quiet-clinic-intake .hint { margin: 0 0 24px; font-size: 16.5px; line-height: 1.62; color: var(--muted-foreground); }\n.dz-quiet-clinic-intake .ans { display: flex; flex-direction: column; gap: 12px; }\n.dz-quiet-clinic-intake .ans button { font: inherit; font-size: 19px; text-align: left; min-height: 60px; padding: 0 24px; border: 2px solid var(--border); border-radius: var(--pv-radius); background: var(--card); color: var(--foreground); cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }\n.dz-quiet-clinic-intake .ans button:hover { background: var(--secondary); }\n.dz-quiet-clinic-intake .ans button.on { border-color: var(--primary); background: var(--accent); color: var(--accent-foreground); }\n.dz-quiet-clinic-intake .skip { margin-top: 18px; font: inherit; font-size: 16px; min-height: 48px; padding: 0 4px; background: none; border: 0; color: var(--primary); text-decoration: underline; cursor: pointer; }\n.dz-quiet-clinic-intake .nv { display: flex; align-items: center; gap: 20px; max-width: 34rem; margin: 30px auto 0; padding: 20px 30px 0; border-top: var(--pv-bw) solid var(--border); }\n.dz-quiet-clinic-intake .bk, .dz-quiet-clinic-intake .ps { font: inherit; font-size: 16px; min-height: 48px; padding: 0 22px; 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-intake .bk:hover, .dz-quiet-clinic-intake .ps:hover { background: var(--secondary); }\n.dz-quiet-clinic-intake .sv { font-size: 14px; color: var(--muted-foreground); }\n.dz-quiet-clinic-intake .wy { background: var(--muted); border-radius: var(--pv-radius); padding: 20px 22px; align-self: start; }\n.dz-quiet-clinic-intake .wy h2 { font-size: 17px; font-weight: 700; margin: 0 0 8px; }\n.dz-quiet-clinic-intake .wy p { margin: 0 0 12px; font-size: 15px; line-height: 1.66; color: var(--muted-foreground); }\n.dz-quiet-clinic-intake .wy a { font-size: 15px; color: var(--primary); }\n@media (prefers-reduced-motion: reduce) { .dz-quiet-clinic-intake *, .dz-quiet-clinic-intake *::before, .dz-quiet-clinic-intake *::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"
}