{
  "id": "answer-sheet-intake",
  "name": "Clinic Intake Questionnaire",
  "theme": "answer-sheet",
  "category": "Settings & Forms",
  "description": "A pre-appointment questionnaire set as one printed sheet: comb boxes for numbers, baseline rules for words, and a frequency grid whose unanswered row says so in words before submit.",
  "layout": "One 760px sheet with a timing track down its left edge: a comb-box header, three numbered sections under 2px green rules, and a four-column oval grid whose column heads sit once above the rows.",
  "modules": [
    {
      "key": "head",
      "name": "Sheet header",
      "html": "\n<header class=\"hd\">\n  <span class=\"lb\">St Brendan’s Physiotherapy · Form PA-3</span>\n  <h1>Before your first appointment</h1>\n  <p class=\"ins\">Write numbers one digit per box. Mark one oval in each row. It takes about four minutes.</p>\n  <div class=\"cb\">\n    <label class=\"fd\"><span class=\"lb\">NHS number</span><input class=\"comb\" style=\"--n:10\" inputmode=\"numeric\" maxlength=\"10\" value=\"4857773456\" autocomplete=\"off\"></label>\n    <fieldset class=\"fd\"><legend class=\"lb\">Date of birth</legend><span class=\"dob\"><input class=\"comb\" style=\"--n:2\" inputmode=\"numeric\" maxlength=\"2\" value=\"14\" autocomplete=\"bday-day\" aria-label=\"Day (DD)\"><input class=\"comb\" style=\"--n:2\" inputmode=\"numeric\" maxlength=\"2\" value=\"03\" autocomplete=\"bday-month\" aria-label=\"Month (MM)\"><input class=\"comb\" style=\"--n:4\" inputmode=\"numeric\" maxlength=\"4\" value=\"1968\" autocomplete=\"bday-year\" aria-label=\"Year (YYYY)\"></span></fieldset>\n  </div>\n</header>"
    },
    {
      "key": "visit",
      "name": "About your visit",
      "html": "\n<section class=\"sc\" aria-labelledby=\"as-s1\">\n  <h2 id=\"as-s1\"><span class=\"no\">1</span>About your visit</h2>\n  <label class=\"bl\"><span class=\"lb\">Which part of you are we seeing?</span><input value=\"Left knee\"></label>\n  <label class=\"bl\"><span class=\"lb\">When did it start, and how?</span><input value=\"About six weeks ago, after missing a step on the stairs at work\"></label>\n  <label class=\"bl\"><span class=\"lb\">Referred by</span><input value=\"Dr H. Lindqvist, Meadowbank Surgery\"></label>\n</section>"
    },
    {
      "key": "scale",
      "name": "Frequency grid",
      "html": "\n<section class=\"sc\" aria-labelledby=\"as-s2\">\n  <h2 id=\"as-s2\"><span class=\"no\">2</span>Over the past week <span class=\"ins\">0 never · 3 every day</span></h2>\n  <div class=\"gh\" aria-hidden=\"true\"><span></span><span></span><span></span><span class=\"lb\">Never</span><span class=\"lb\">Some days</span><span class=\"lb\">Most days</span><span class=\"lb\">Every day</span></div>\n  <div class=\"grid\">\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"Pain wakes me at night\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">1</span><span class=\"st\">Pain wakes me at night</span><label class=\"o\"><input type=\"radio\" name=\"s1\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s1\" value=\"1\"><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s1\" value=\"2\" checked><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s1\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"I climb a flight of stairs without stopping\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">2</span><span class=\"st\">I climb a flight of stairs without stopping</span><label class=\"o\"><input type=\"radio\" name=\"s2\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s2\" value=\"1\" checked><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s2\" value=\"2\"><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s2\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"I can kneel and get up again\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">3</span><span class=\"st\">I can kneel and get up again</span><label class=\"o\"><input type=\"radio\" name=\"s3\" value=\"0\" checked><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s3\" value=\"1\"><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s3\" value=\"2\"><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s3\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"Pain stops me doing my job or chores\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">4</span><span class=\"st\">Pain stops me doing my job or chores</span><label class=\"o\"><input type=\"radio\" name=\"s4\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s4\" value=\"1\" checked><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s4\" value=\"2\"><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s4\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r miss\" role=\"radiogroup\" aria-label=\"I take pain relief for this\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">5</span><span class=\"st\">I take pain relief for this<em class=\"why\">Blank — needed before your appointment</em></span><label class=\"o\"><input type=\"radio\" name=\"s5\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s5\" value=\"1\"><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s5\" value=\"2\"><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s5\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"The knee gives way under me\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">6</span><span class=\"st\">The knee gives way under me</span><label class=\"o\"><input type=\"radio\" name=\"s6\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s6\" value=\"1\" checked><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s6\" value=\"2\"><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s6\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"It is swollen by the end of the day\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">7</span><span class=\"st\">It is swollen by the end of the day</span><label class=\"o\"><input type=\"radio\" name=\"s7\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s7\" value=\"1\"><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s7\" value=\"2\"><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s7\" value=\"3\" checked><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"I have stopped a sport or hobby because of it\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">8</span><span class=\"st\">I have stopped a sport or hobby because of it</span><label class=\"o\"><input type=\"radio\" name=\"s8\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s8\" value=\"1\"><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s8\" value=\"2\" checked><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s8\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n  </div>\n</section>"
    },
    {
      "key": "consent",
      "name": "Consent and submit",
      "html": "\n<footer class=\"ft\">\n  <h2><span class=\"no\">3</span>Sharing your answers</h2>\n  <label class=\"ck\"><span class=\"o\"><input type=\"checkbox\" checked><span class=\"ov\" aria-hidden=\"true\">✓</span></span><span>Share my answers with the physiotherapist who sees me. They are not sent to my employer.</span></label>\n  <div class=\"go\"><span class=\"en\">7 of 8 rows answered</span><button type=\"button\" class=\"btn ln\">Save and finish later</button><button type=\"button\" class=\"btn\">Submit questionnaire</button></div>\n</footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "answer-sheet-intake",
    "model": "Claude Opus 5.5",
    "author": "Claude Code",
    "createdAt": "2026-10-04T21:10:00+09:00",
    "updatedAt": "2026-10-04T21:10:00+09:00",
    "version": "1.0.0",
    "isNew": true
  },
  "link": "/api/v1/designs/answer-sheet-intake.json",
  "structure": "One 760px sheet with a timing track down its left edge: a comb-box header, three numbered sections under 2px green rules, and a four-column oval grid whose column heads sit once above the rows.",
  "template_source": {
    "id": "answer-sheet-intake",
    "name": "Clinic Intake Questionnaire",
    "html": "<div class=\"dz dz-answer-sheet-intake\" data-design=\"answer-sheet-intake\" data-theme=\"answer-sheet\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Sheet header\">\n<header class=\"hd\">\n  <span class=\"lb\">St Brendan’s Physiotherapy · Form PA-3</span>\n  <h1>Before your first appointment</h1>\n  <p class=\"ins\">Write numbers one digit per box. Mark one oval in each row. It takes about four minutes.</p>\n  <div class=\"cb\">\n    <label class=\"fd\"><span class=\"lb\">NHS number</span><input class=\"comb\" style=\"--n:10\" inputmode=\"numeric\" maxlength=\"10\" value=\"4857773456\" autocomplete=\"off\"></label>\n    <fieldset class=\"fd\"><legend class=\"lb\">Date of birth</legend><span class=\"dob\"><input class=\"comb\" style=\"--n:2\" inputmode=\"numeric\" maxlength=\"2\" value=\"14\" autocomplete=\"bday-day\" aria-label=\"Day (DD)\"><input class=\"comb\" style=\"--n:2\" inputmode=\"numeric\" maxlength=\"2\" value=\"03\" autocomplete=\"bday-month\" aria-label=\"Month (MM)\"><input class=\"comb\" style=\"--n:4\" inputmode=\"numeric\" maxlength=\"4\" value=\"1968\" autocomplete=\"bday-year\" aria-label=\"Year (YYYY)\"></span></fieldset>\n  </div>\n</header></section>\n<section class=\"dz-mod\" data-mod=\"visit\" aria-label=\"About your visit\">\n<section class=\"sc\" aria-labelledby=\"as-s1\">\n  <h2 id=\"as-s1\"><span class=\"no\">1</span>About your visit</h2>\n  <label class=\"bl\"><span class=\"lb\">Which part of you are we seeing?</span><input value=\"Left knee\"></label>\n  <label class=\"bl\"><span class=\"lb\">When did it start, and how?</span><input value=\"About six weeks ago, after missing a step on the stairs at work\"></label>\n  <label class=\"bl\"><span class=\"lb\">Referred by</span><input value=\"Dr H. Lindqvist, Meadowbank Surgery\"></label>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"scale\" aria-label=\"Frequency grid\">\n<section class=\"sc\" aria-labelledby=\"as-s2\">\n  <h2 id=\"as-s2\"><span class=\"no\">2</span>Over the past week <span class=\"ins\">0 never · 3 every day</span></h2>\n  <div class=\"gh\" aria-hidden=\"true\"><span></span><span></span><span></span><span class=\"lb\">Never</span><span class=\"lb\">Some days</span><span class=\"lb\">Most days</span><span class=\"lb\">Every day</span></div>\n  <div class=\"grid\">\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"Pain wakes me at night\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">1</span><span class=\"st\">Pain wakes me at night</span><label class=\"o\"><input type=\"radio\" name=\"s1\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s1\" value=\"1\"><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s1\" value=\"2\" checked><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s1\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"I climb a flight of stairs without stopping\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">2</span><span class=\"st\">I climb a flight of stairs without stopping</span><label class=\"o\"><input type=\"radio\" name=\"s2\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s2\" value=\"1\" checked><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s2\" value=\"2\"><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s2\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"I can kneel and get up again\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">3</span><span class=\"st\">I can kneel and get up again</span><label class=\"o\"><input type=\"radio\" name=\"s3\" value=\"0\" checked><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s3\" value=\"1\"><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s3\" value=\"2\"><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s3\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"Pain stops me doing my job or chores\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">4</span><span class=\"st\">Pain stops me doing my job or chores</span><label class=\"o\"><input type=\"radio\" name=\"s4\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s4\" value=\"1\" checked><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s4\" value=\"2\"><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s4\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r miss\" role=\"radiogroup\" aria-label=\"I take pain relief for this\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">5</span><span class=\"st\">I take pain relief for this<em class=\"why\">Blank — needed before your appointment</em></span><label class=\"o\"><input type=\"radio\" name=\"s5\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s5\" value=\"1\"><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s5\" value=\"2\"><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s5\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"The knee gives way under me\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">6</span><span class=\"st\">The knee gives way under me</span><label class=\"o\"><input type=\"radio\" name=\"s6\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s6\" value=\"1\" checked><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s6\" value=\"2\"><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s6\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"It is swollen by the end of the day\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">7</span><span class=\"st\">It is swollen by the end of the day</span><label class=\"o\"><input type=\"radio\" name=\"s7\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s7\" value=\"1\"><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s7\" value=\"2\"><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s7\" value=\"3\" checked><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"I have stopped a sport or hobby because of it\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">8</span><span class=\"st\">I have stopped a sport or hobby because of it</span><label class=\"o\"><input type=\"radio\" name=\"s8\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s8\" value=\"1\"><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s8\" value=\"2\" checked><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s8\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n  </div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"consent\" aria-label=\"Consent and submit\">\n<footer class=\"ft\">\n  <h2><span class=\"no\">3</span>Sharing your answers</h2>\n  <label class=\"ck\"><span class=\"o\"><input type=\"checkbox\" checked><span class=\"ov\" aria-hidden=\"true\">✓</span></span><span>Share my answers with the physiotherapist who sees me. They are not sent to my employer.</span></label>\n  <div class=\"go\"><span class=\"en\">7 of 8 rows answered</span><button type=\"button\" class=\"btn ln\">Save and finish later</button><button type=\"button\" class=\"btn\">Submit questionnaire</button></div>\n</footer></section>\n</div>",
    "css": ".dz, .dz * { box-sizing: border-box; }\n.dz { min-height: 100%; color: var(--foreground); background: var(--background); font-family: var(--pv-body); }\n.dz p, .dz h1, .dz h2, .dz h3, .dz h4, .dz ul, .dz ol, .dz dl, .dz figure, .dz blockquote { margin: 0; }\n.dz img { max-width: 100%; }\n.dz-mod { display: contents; }\n\n.dz-answer-sheet-intake { background: var(--background); color: var(--foreground); font-family: var(--pv-body); max-width: 760px; margin: 0 auto; padding: 32px 32px 36px 22px; border-left: 18px solid color-mix(in srgb, var(--accent) 10%, transparent); }\n.dz-answer-sheet-intake .lb { font-family: var(--pv-display); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; color: var(--accent); display: block; }\n.dz-answer-sheet-intake .en { font-family: var(--pv-mono); font-size: 15px; letter-spacing: .06em; color: var(--primary); font-size: 13px; }\n.dz-answer-sheet-intake h1 { font-family: var(--pv-display); font-weight: 700; letter-spacing: -.01em; font-size: 40px; line-height: 1; margin: 8px 0 8px; }\n.dz-answer-sheet-intake .ins { font-size: 14px; color: var(--accent); margin: 0; font-weight: 400; font-family: var(--pv-body); }\n.dz-answer-sheet-intake .cb { display: flex; flex-wrap: wrap; gap: 24px; margin: 20px 0 0; }\n.dz-answer-sheet-intake .fd { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }\n.dz-answer-sheet-intake .fd legend { padding: 0; margin-bottom: 6px; }\n.dz-answer-sheet-intake .dob { display: flex; gap: 8px; }\n.dz-answer-sheet-intake .comb { --cell: 26px; font-family: var(--pv-mono); font-size: 15px; letter-spacing: .06em; color: var(--primary); box-sizing: border-box; width: calc(var(--cell) * var(--n) + 1.5px); height: 36px; padding: 0 0 0 calc((var(--cell) - 1ch) / 2); letter-spacing: calc(var(--cell) - 1ch); border: 1.5px solid var(--accent); border-radius: var(--pv-radius); background: repeating-linear-gradient(90deg, transparent 0 calc(var(--cell) - 1.5px), var(--accent) calc(var(--cell) - 1.5px) var(--cell)), var(--card); overflow: hidden; }\n.dz-answer-sheet-intake .comb:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }\n.dz-answer-sheet-intake .sc, .dz-answer-sheet-intake .ft { margin-top: 28px; border-top: var(--pv-bw) solid var(--accent); padding-top: 12px; }\n.dz-answer-sheet-intake h2 { font-family: var(--pv-display); font-weight: 700; letter-spacing: -.01em; font-size: 22px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }\n.dz-answer-sheet-intake .no { font-family: var(--pv-mono); font-size: 14px; font-weight: 500; color: var(--accent); border: 1.5px solid var(--accent); padding: 1px 7px; }\n.dz-answer-sheet-intake .bl { display: grid; gap: 4px; padding: 10px 0; }\n.dz-answer-sheet-intake .bl input { font: 400 16px/1.4 var(--pv-body); color: var(--primary); border: 0; border-bottom: 1.5px solid var(--accent); background: transparent; padding: 4px 0 6px; border-radius: 0; }\n.dz-answer-sheet-intake .bl input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; background: var(--card); }\n.dz-answer-sheet-intake .gh, .dz-answer-sheet-intake .r { display: grid; grid-template-columns: 22px 22px minmax(0, 1fr) repeat(4, 64px); align-items: center; }\n.dz-answer-sheet-intake .gh .lb { font-size: 12px; text-align: center; line-height: 1.15; }\n.dz-answer-sheet-intake .r { min-height: 44px; border-top: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); }\n.dz-answer-sheet-intake .r .tb { justify-self: start; margin-left: -18px; }\n.dz-answer-sheet-intake .n { font-family: var(--pv-mono); font-size: 13px; color: var(--accent); }\n.dz-answer-sheet-intake .st { font-size: 15px; padding: 8px 10px 8px 0; }\n.dz-answer-sheet-intake .r .o { justify-self: center; }\n.dz-answer-sheet-intake .miss { box-shadow: inset 3px 0 0 var(--destructive); }\n.dz-answer-sheet-intake .why { display: block; font-style: normal; font-size: 13px; color: var(--destructive); margin-top: 2px; }\n.dz-answer-sheet-intake .ck { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 6px; font-size: 15px; max-width: 60ch; cursor: pointer; }\n.dz-answer-sheet-intake .ck .ov { font-size: 12px; color: transparent; }\n@media (forced-colors: active) { .dz-answer-sheet-intake .ck input:not(:checked) + .ov { forced-color-adjust: none; color: transparent; border-color: CanvasText; } }\n.dz-answer-sheet-intake .ck input:checked + .ov { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }\n.dz-answer-sheet-intake .go { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }\n.dz-answer-sheet-intake .go .en { margin-right: auto; }\n\n.dz-answer-sheet-intake .o { position: relative; display: inline-grid; place-items: center; min-width: 34px; min-height: 34px; cursor: pointer; }\n.dz-answer-sheet-intake .o input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }\n.dz-answer-sheet-intake .ov { display: inline-grid; place-items: center; width: 30px; height: 20px; border-radius: 9999px; border: 1.5px solid var(--accent); color: var(--accent); font: 700 11px/1 var(--pv-display); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }\n.dz-answer-sheet-intake .o input:checked + .ov { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }\n.dz-answer-sheet-intake .o input:focus-visible + .ov { outline: 2px solid var(--ring); outline-offset: 3px; }\n.dz-answer-sheet-intake .o:hover .ov { border-color: var(--primary); }\n.dz-answer-sheet-intake .tb { display: block; width: 10px; height: 4px; border: 1.5px solid var(--accent); }\n.dz-answer-sheet-intake .r:has(input:checked) .tb { background: var(--primary); border-color: var(--primary); }\n.dz-answer-sheet-intake .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n.dz-answer-sheet-intake .btn { font: 600 15px/1 var(--pv-body); padding: 12px 18px; border: var(--pv-bw) solid var(--primary); border-radius: var(--pv-radius); background: var(--primary); color: var(--primary-foreground); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }\n.dz-answer-sheet-intake .btn.ln { background: transparent; color: var(--primary); }\n.dz-answer-sheet-intake .btn.ln:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }\n.dz-answer-sheet-intake .btn:not(.ln):hover { background: color-mix(in srgb, var(--primary) 86%, var(--background)); }\n.dz-answer-sheet-intake .btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }\n@media (forced-colors: active) {\n  .dz-answer-sheet-intake .o input:checked + .ov, .dz-answer-sheet-intake .r:has(input:checked) .tb { forced-color-adjust: none; background: CanvasText; border-color: CanvasText; color: Canvas; }\n  .dz-answer-sheet-intake .r.cur { outline: 2px solid CanvasText; outline-offset: -2px; }\n}\n@media (max-width: 600px) {\n  .dz-answer-sheet-intake { padding: 24px 16px 28px 12px; border-left-width: 12px; }\n  .dz-answer-sheet-intake .gh { display: none; }\n  .dz-answer-sheet-intake .r { grid-template-columns: 22px minmax(0, 1fr) repeat(4, 40px); }\n  .dz-answer-sheet-intake .r .n { display: none; }\n  .dz-answer-sheet-intake .r .tb { margin-left: -12px; }\n}\n@media (prefers-reduced-motion: reduce) { .dz-answer-sheet-intake *, .dz-answer-sheet-intake *::before, .dz-answer-sheet-intake *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
    "theme": "answer-sheet",
    "theme_css": ":root {\n  --radius: 0px;\n  --font-sans: \"Public Sans\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  --font-display: \"Sofia Sans Condensed\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  --font-serif: ui-serif, Georgia, \"Times New Roman\", serif;\n  --font-mono: \"Spline Sans Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n  --ring-offset: 1px;\n  --pv-radius: 0px;\n  --pv-radius-md: 0px;\n  --pv-radius-sm: 0px;\n  --pv-radius-xl: 0px;\n  --pv-bw: 2px;\n  --pv-display: \"Sofia Sans Condensed\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  --pv-body: \"Public Sans\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n  --pv-mono: \"Spline Sans Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n  --dur: 90ms;\n  --dur-fast: 54ms;\n  --dur-slow: 162ms;\n  --ease: cubic-bezier(0.2, 0, 0, 1);\n  --img-filter: none;\n  --background: #E5F5E7;\n  --foreground: #24262A;\n  --card: #DDEADF;\n  --card-foreground: #24262A;\n  --popover: #DDEADF;\n  --popover-foreground: #24262A;\n  --primary: #2A2E34;\n  --primary-foreground: #F5FDF6;\n  --secondary: #CFE1D2;\n  --secondary-foreground: #24262A;\n  --muted: #CFE1D2;\n  --muted-foreground: #5D6066;\n  --accent: #0B7643;\n  --accent-foreground: #F5FDF6;\n  --destructive: #5D0004;\n  --destructive-foreground: #F5FDF6;\n  --border: #BFCEC1;\n  --input: #BFCEC1;\n  --ring: #2A2E34;\n  --chart-1: #2A446F;\n  --chart-2: #61450A;\n  --chart-3: #383665;\n  --chart-4: #5D5316;\n  --chart-5: #003B5A;\n  --sidebar: #DDEADF;\n  --sidebar-foreground: #24262A;\n  --sidebar-primary: #2A2E34;\n  --sidebar-primary-foreground: #F5FDF6;\n  --sidebar-accent: #CFE1D2;\n  --sidebar-accent-foreground: #24262A;\n  --sidebar-border: #BFCEC1;\n  --sidebar-ring: #2A2E34;\n}\n\n.dark {\n  --background: #15181E;\n  --foreground: #E0E7E1;\n  --card: #1D2229;\n  --card-foreground: #E0E7E1;\n  --popover: #1D2229;\n  --popover-foreground: #E0E7E1;\n  --primary: #CDD1D8;\n  --primary-foreground: #080D17;\n  --secondary: #262D37;\n  --secondary-foreground: #E0E7E1;\n  --muted: #262D37;\n  --muted-foreground: #8F9790;\n  --accent: #6AC48C;\n  --accent-foreground: #080D17;\n  --destructive: #FFBFB6;\n  --destructive-foreground: #080D17;\n  --border: #343A43;\n  --input: #343A43;\n  --ring: #CDD1D8;\n  --chart-1: #A3C3F6;\n  --chart-2: #D2B27C;\n  --chart-3: #C3C4FD;\n  --chart-4: #BAB074;\n  --chart-5: #A3D9FF;\n  --sidebar: #1D2229;\n  --sidebar-foreground: #E0E7E1;\n  --sidebar-primary: #CDD1D8;\n  --sidebar-primary-foreground: #080D17;\n  --sidebar-accent: #262D37;\n  --sidebar-accent-foreground: #E0E7E1;\n  --sidebar-border: #343A43;\n  --sidebar-ring: #CDD1D8;\n}\n\n/* Keyboard focus. Zero specificity — override it with any plain selector. */\n@layer base {\n  :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex=\"-1\"])):focus-visible {\n    outline: 2px solid var(--ring);\n    outline-offset: var(--ring-offset, 2px);\n  }\n}",
    "default_mode": "light",
    "googleFontsHref": "https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600;700&display=swap",
    "modules": [
      {
        "key": "head",
        "name": "Sheet header"
      },
      {
        "key": "visit",
        "name": "About your visit"
      },
      {
        "key": "scale",
        "name": "Frequency grid"
      },
      {
        "key": "consent",
        "name": "Consent and submit"
      }
    ],
    "reorderable": true,
    "source": {
      "revision": "catalog-v1",
      "fingerprint": "v1-c0caf87c4d23c130"
    }
  },
  "html": "<div class=\"dz dz-answer-sheet-intake\" data-design=\"answer-sheet-intake\" data-theme=\"answer-sheet\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Sheet header\">\n<header class=\"hd\">\n  <span class=\"lb\">St Brendan’s Physiotherapy · Form PA-3</span>\n  <h1>Before your first appointment</h1>\n  <p class=\"ins\">Write numbers one digit per box. Mark one oval in each row. It takes about four minutes.</p>\n  <div class=\"cb\">\n    <label class=\"fd\"><span class=\"lb\">NHS number</span><input class=\"comb\" style=\"--n:10\" inputmode=\"numeric\" maxlength=\"10\" value=\"4857773456\" autocomplete=\"off\"></label>\n    <fieldset class=\"fd\"><legend class=\"lb\">Date of birth</legend><span class=\"dob\"><input class=\"comb\" style=\"--n:2\" inputmode=\"numeric\" maxlength=\"2\" value=\"14\" autocomplete=\"bday-day\" aria-label=\"Day (DD)\"><input class=\"comb\" style=\"--n:2\" inputmode=\"numeric\" maxlength=\"2\" value=\"03\" autocomplete=\"bday-month\" aria-label=\"Month (MM)\"><input class=\"comb\" style=\"--n:4\" inputmode=\"numeric\" maxlength=\"4\" value=\"1968\" autocomplete=\"bday-year\" aria-label=\"Year (YYYY)\"></span></fieldset>\n  </div>\n</header></section>\n<section class=\"dz-mod\" data-mod=\"visit\" aria-label=\"About your visit\">\n<section class=\"sc\" aria-labelledby=\"as-s1\">\n  <h2 id=\"as-s1\"><span class=\"no\">1</span>About your visit</h2>\n  <label class=\"bl\"><span class=\"lb\">Which part of you are we seeing?</span><input value=\"Left knee\"></label>\n  <label class=\"bl\"><span class=\"lb\">When did it start, and how?</span><input value=\"About six weeks ago, after missing a step on the stairs at work\"></label>\n  <label class=\"bl\"><span class=\"lb\">Referred by</span><input value=\"Dr H. Lindqvist, Meadowbank Surgery\"></label>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"scale\" aria-label=\"Frequency grid\">\n<section class=\"sc\" aria-labelledby=\"as-s2\">\n  <h2 id=\"as-s2\"><span class=\"no\">2</span>Over the past week <span class=\"ins\">0 never · 3 every day</span></h2>\n  <div class=\"gh\" aria-hidden=\"true\"><span></span><span></span><span></span><span class=\"lb\">Never</span><span class=\"lb\">Some days</span><span class=\"lb\">Most days</span><span class=\"lb\">Every day</span></div>\n  <div class=\"grid\">\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"Pain wakes me at night\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">1</span><span class=\"st\">Pain wakes me at night</span><label class=\"o\"><input type=\"radio\" name=\"s1\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s1\" value=\"1\"><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s1\" value=\"2\" checked><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s1\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"I climb a flight of stairs without stopping\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">2</span><span class=\"st\">I climb a flight of stairs without stopping</span><label class=\"o\"><input type=\"radio\" name=\"s2\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s2\" value=\"1\" checked><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s2\" value=\"2\"><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s2\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"I can kneel and get up again\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">3</span><span class=\"st\">I can kneel and get up again</span><label class=\"o\"><input type=\"radio\" name=\"s3\" value=\"0\" checked><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s3\" value=\"1\"><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s3\" value=\"2\"><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s3\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"Pain stops me doing my job or chores\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">4</span><span class=\"st\">Pain stops me doing my job or chores</span><label class=\"o\"><input type=\"radio\" name=\"s4\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s4\" value=\"1\" checked><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s4\" value=\"2\"><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s4\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r miss\" role=\"radiogroup\" aria-label=\"I take pain relief for this\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">5</span><span class=\"st\">I take pain relief for this<em class=\"why\">Blank — needed before your appointment</em></span><label class=\"o\"><input type=\"radio\" name=\"s5\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s5\" value=\"1\"><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s5\" value=\"2\"><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s5\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"The knee gives way under me\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">6</span><span class=\"st\">The knee gives way under me</span><label class=\"o\"><input type=\"radio\" name=\"s6\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s6\" value=\"1\" checked><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s6\" value=\"2\"><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s6\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"It is swollen by the end of the day\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">7</span><span class=\"st\">It is swollen by the end of the day</span><label class=\"o\"><input type=\"radio\" name=\"s7\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s7\" value=\"1\"><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s7\" value=\"2\"><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s7\" value=\"3\" checked><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n    <div class=\"r\" role=\"radiogroup\" aria-label=\"I have stopped a sport or hobby because of it\"><span class=\"tb\" aria-hidden=\"true\"></span><span class=\"n\">8</span><span class=\"st\">I have stopped a sport or hobby because of it</span><label class=\"o\"><input type=\"radio\" name=\"s8\" value=\"0\"><span class=\"ov\" aria-hidden=\"true\">0</span><span class=\"sr\">Never</span></label><label class=\"o\"><input type=\"radio\" name=\"s8\" value=\"1\"><span class=\"ov\" aria-hidden=\"true\">1</span><span class=\"sr\">Some days</span></label><label class=\"o\"><input type=\"radio\" name=\"s8\" value=\"2\" checked><span class=\"ov\" aria-hidden=\"true\">2</span><span class=\"sr\">Most days</span></label><label class=\"o\"><input type=\"radio\" name=\"s8\" value=\"3\"><span class=\"ov\" aria-hidden=\"true\">3</span><span class=\"sr\">Every day</span></label></div>\n  </div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"consent\" aria-label=\"Consent and submit\">\n<footer class=\"ft\">\n  <h2><span class=\"no\">3</span>Sharing your answers</h2>\n  <label class=\"ck\"><span class=\"o\"><input type=\"checkbox\" checked><span class=\"ov\" aria-hidden=\"true\">✓</span></span><span>Share my answers with the physiotherapist who sees me. They are not sent to my employer.</span></label>\n  <div class=\"go\"><span class=\"en\">7 of 8 rows answered</span><button type=\"button\" class=\"btn ln\">Save and finish later</button><button type=\"button\" class=\"btn\">Submit questionnaire</button></div>\n</footer></section>\n</div>",
  "css": "\n.dz-answer-sheet-intake { background: var(--background); color: var(--foreground); font-family: var(--pv-body); max-width: 760px; margin: 0 auto; padding: 32px 32px 36px 22px; border-left: 18px solid color-mix(in srgb, var(--accent) 10%, transparent); }\n.dz-answer-sheet-intake .lb { font-family: var(--pv-display); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; color: var(--accent); display: block; }\n.dz-answer-sheet-intake .en { font-family: var(--pv-mono); font-size: 15px; letter-spacing: .06em; color: var(--primary); font-size: 13px; }\n.dz-answer-sheet-intake h1 { font-family: var(--pv-display); font-weight: 700; letter-spacing: -.01em; font-size: 40px; line-height: 1; margin: 8px 0 8px; }\n.dz-answer-sheet-intake .ins { font-size: 14px; color: var(--accent); margin: 0; font-weight: 400; font-family: var(--pv-body); }\n.dz-answer-sheet-intake .cb { display: flex; flex-wrap: wrap; gap: 24px; margin: 20px 0 0; }\n.dz-answer-sheet-intake .fd { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }\n.dz-answer-sheet-intake .fd legend { padding: 0; margin-bottom: 6px; }\n.dz-answer-sheet-intake .dob { display: flex; gap: 8px; }\n.dz-answer-sheet-intake .comb { --cell: 26px; font-family: var(--pv-mono); font-size: 15px; letter-spacing: .06em; color: var(--primary); box-sizing: border-box; width: calc(var(--cell) * var(--n) + 1.5px); height: 36px; padding: 0 0 0 calc((var(--cell) - 1ch) / 2); letter-spacing: calc(var(--cell) - 1ch); border: 1.5px solid var(--accent); border-radius: var(--pv-radius); background: repeating-linear-gradient(90deg, transparent 0 calc(var(--cell) - 1.5px), var(--accent) calc(var(--cell) - 1.5px) var(--cell)), var(--card); overflow: hidden; }\n.dz-answer-sheet-intake .comb:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }\n.dz-answer-sheet-intake .sc, .dz-answer-sheet-intake .ft { margin-top: 28px; border-top: var(--pv-bw) solid var(--accent); padding-top: 12px; }\n.dz-answer-sheet-intake h2 { font-family: var(--pv-display); font-weight: 700; letter-spacing: -.01em; font-size: 22px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }\n.dz-answer-sheet-intake .no { font-family: var(--pv-mono); font-size: 14px; font-weight: 500; color: var(--accent); border: 1.5px solid var(--accent); padding: 1px 7px; }\n.dz-answer-sheet-intake .bl { display: grid; gap: 4px; padding: 10px 0; }\n.dz-answer-sheet-intake .bl input { font: 400 16px/1.4 var(--pv-body); color: var(--primary); border: 0; border-bottom: 1.5px solid var(--accent); background: transparent; padding: 4px 0 6px; border-radius: 0; }\n.dz-answer-sheet-intake .bl input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; background: var(--card); }\n.dz-answer-sheet-intake .gh, .dz-answer-sheet-intake .r { display: grid; grid-template-columns: 22px 22px minmax(0, 1fr) repeat(4, 64px); align-items: center; }\n.dz-answer-sheet-intake .gh .lb { font-size: 12px; text-align: center; line-height: 1.15; }\n.dz-answer-sheet-intake .r { min-height: 44px; border-top: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); }\n.dz-answer-sheet-intake .r .tb { justify-self: start; margin-left: -18px; }\n.dz-answer-sheet-intake .n { font-family: var(--pv-mono); font-size: 13px; color: var(--accent); }\n.dz-answer-sheet-intake .st { font-size: 15px; padding: 8px 10px 8px 0; }\n.dz-answer-sheet-intake .r .o { justify-self: center; }\n.dz-answer-sheet-intake .miss { box-shadow: inset 3px 0 0 var(--destructive); }\n.dz-answer-sheet-intake .why { display: block; font-style: normal; font-size: 13px; color: var(--destructive); margin-top: 2px; }\n.dz-answer-sheet-intake .ck { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 6px; font-size: 15px; max-width: 60ch; cursor: pointer; }\n.dz-answer-sheet-intake .ck .ov { font-size: 12px; color: transparent; }\n@media (forced-colors: active) { .dz-answer-sheet-intake .ck input:not(:checked) + .ov { forced-color-adjust: none; color: transparent; border-color: CanvasText; } }\n.dz-answer-sheet-intake .ck input:checked + .ov { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }\n.dz-answer-sheet-intake .go { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }\n.dz-answer-sheet-intake .go .en { margin-right: auto; }\n\n.dz-answer-sheet-intake .o { position: relative; display: inline-grid; place-items: center; min-width: 34px; min-height: 34px; cursor: pointer; }\n.dz-answer-sheet-intake .o input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }\n.dz-answer-sheet-intake .ov { display: inline-grid; place-items: center; width: 30px; height: 20px; border-radius: 9999px; border: 1.5px solid var(--accent); color: var(--accent); font: 700 11px/1 var(--pv-display); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }\n.dz-answer-sheet-intake .o input:checked + .ov { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }\n.dz-answer-sheet-intake .o input:focus-visible + .ov { outline: 2px solid var(--ring); outline-offset: 3px; }\n.dz-answer-sheet-intake .o:hover .ov { border-color: var(--primary); }\n.dz-answer-sheet-intake .tb { display: block; width: 10px; height: 4px; border: 1.5px solid var(--accent); }\n.dz-answer-sheet-intake .r:has(input:checked) .tb { background: var(--primary); border-color: var(--primary); }\n.dz-answer-sheet-intake .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n.dz-answer-sheet-intake .btn { font: 600 15px/1 var(--pv-body); padding: 12px 18px; border: var(--pv-bw) solid var(--primary); border-radius: var(--pv-radius); background: var(--primary); color: var(--primary-foreground); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }\n.dz-answer-sheet-intake .btn.ln { background: transparent; color: var(--primary); }\n.dz-answer-sheet-intake .btn.ln:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }\n.dz-answer-sheet-intake .btn:not(.ln):hover { background: color-mix(in srgb, var(--primary) 86%, var(--background)); }\n.dz-answer-sheet-intake .btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }\n@media (forced-colors: active) {\n  .dz-answer-sheet-intake .o input:checked + .ov, .dz-answer-sheet-intake .r:has(input:checked) .tb { forced-color-adjust: none; background: CanvasText; border-color: CanvasText; color: Canvas; }\n  .dz-answer-sheet-intake .r.cur { outline: 2px solid CanvasText; outline-offset: -2px; }\n}\n@media (max-width: 600px) {\n  .dz-answer-sheet-intake { padding: 24px 16px 28px 12px; border-left-width: 12px; }\n  .dz-answer-sheet-intake .gh { display: none; }\n  .dz-answer-sheet-intake .r { grid-template-columns: 22px minmax(0, 1fr) repeat(4, 40px); }\n  .dz-answer-sheet-intake .r .n { display: none; }\n  .dz-answer-sheet-intake .r .tb { margin-left: -12px; }\n}\n@media (prefers-reduced-motion: reduce) { .dz-answer-sheet-intake *, .dz-answer-sheet-intake *::before, .dz-answer-sheet-intake *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/answer-sheet.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600;700&display=swap"
}