{
  "id": "ticket-stub-refund",
  "name": "Refund Request",
  "theme": "ticket-stub",
  "category": "Settings & Forms",
  "description": "A refund form that shows the actual stub being refunded and computes the entitlement in front of you, so nobody submits a claim on the wrong journey.",
  "layout": "A 620px form column with the affected stub rendered inline above the fields, and an entitlement calculation set as a plain ruled list.",
  "modules": [
    {
      "key": "head",
      "name": "Refund head",
      "html": "\n<header class=\"rh\"><span class=\"lb\">Refunds</span><h1>Claim for a delayed journey</h1><p>Delay Repay is calculated from the scheduled arrival time at your destination, not from the departure delay.</p></header>"
    },
    {
      "key": "stub",
      "name": "Affected stub",
      "html": "\n<article class=\"stub\" style=\"--px:68%\"><div class=\"lg\"><span class=\"lb\">04 June · Scheduled arrival 16:11</span><h2>Aberdeen → Inverness</h2><ul class=\"mt\"><li><span class=\"lb\">Passenger</span><b>K. Oyelaran</b></li><li><span class=\"lb\">Coach</span><b>C</b></li><li><span class=\"lb\">Seat</span><b>41A</b></li><li><span class=\"lb\">Paid</span><b>£38.40</b></li></ul></div>\n<div class=\"sm\"><span class=\"lb\">Reference</span><span class=\"cd\">QJ4 8LM 2210</span><span class=\"late\">Arrived 16:47</span></div></article>"
    },
    {
      "key": "calc",
      "name": "Entitlement",
      "html": "\n<section class=\"ec\"><h2>What you are entitled to</h2>\n<dl>\n  <div><dt>Scheduled arrival</dt><dd class=\"n\">16:11</dd></div>\n  <div><dt>Actual arrival</dt><dd class=\"n\">16:47</dd></div>\n  <div><dt>Delay</dt><dd class=\"n\">36 minutes</dd></div>\n  <div><dt>Band</dt><dd>30 to 59 minutes — 50% of the single fare</dd></div>\n  <div class=\"tot\"><dt>Refund due</dt><dd class=\"n\">£19.20</dd></div>\n</dl>\n<p class=\"fn\">This is calculated automatically from the operator's own arrival record. If you believe the recorded arrival time is wrong, say so in the notes and it will be checked against the signalling log.</p></section>"
    },
    {
      "key": "form",
      "name": "Claim fields",
      "html": "\n<form class=\"cf\">\n  <label>Pay to<select><option>The card ending 4417</option><option>Bank transfer</option><option>Rail travel voucher (+10%)</option></select></label>\n  <label>Notes<textarea rows=\"3\" placeholder=\"Only if something about the calculation above is wrong.\"></textarea></label>\n  <label class=\"chk\"><input type=\"checkbox\" checked> I was on this train and arrived at the destination shown.</label>\n  <div class=\"ac\"><button type=\"button\" class=\"pri\">Submit claim</button><button type=\"button\" class=\"sec\">Cancel</button></div>\n  <p class=\"fn\">Claims are settled within five working days. You will get an email either way, including if it is refused.</p>\n</form>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "ticket-stub-refund",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T23:46:02+09:00",
    "updatedAt": "2026-09-01T23:46:02+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/ticket-stub-refund.json",
  "structure": "A 620px form column with the affected stub rendered inline above the fields, and an entitlement calculation set as a plain ruled list.",
  "html": "<div class=\"dz dz-ticket-stub-refund\" data-design=\"ticket-stub-refund\" data-theme=\"ticket-stub\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Refund head\">\n<header class=\"rh\"><span class=\"lb\">Refunds</span><h1>Claim for a delayed journey</h1><p>Delay Repay is calculated from the scheduled arrival time at your destination, not from the departure delay.</p></header></section>\n<section class=\"dz-mod\" data-mod=\"stub\" aria-label=\"Affected stub\">\n<article class=\"stub\" style=\"--px:68%\"><div class=\"lg\"><span class=\"lb\">04 June · Scheduled arrival 16:11</span><h2>Aberdeen → Inverness</h2><ul class=\"mt\"><li><span class=\"lb\">Passenger</span><b>K. Oyelaran</b></li><li><span class=\"lb\">Coach</span><b>C</b></li><li><span class=\"lb\">Seat</span><b>41A</b></li><li><span class=\"lb\">Paid</span><b>£38.40</b></li></ul></div>\n<div class=\"sm\"><span class=\"lb\">Reference</span><span class=\"cd\">QJ4 8LM 2210</span><span class=\"late\">Arrived 16:47</span></div></article></section>\n<section class=\"dz-mod\" data-mod=\"calc\" aria-label=\"Entitlement\">\n<section class=\"ec\"><h2>What you are entitled to</h2>\n<dl>\n  <div><dt>Scheduled arrival</dt><dd class=\"n\">16:11</dd></div>\n  <div><dt>Actual arrival</dt><dd class=\"n\">16:47</dd></div>\n  <div><dt>Delay</dt><dd class=\"n\">36 minutes</dd></div>\n  <div><dt>Band</dt><dd>30 to 59 minutes — 50% of the single fare</dd></div>\n  <div class=\"tot\"><dt>Refund due</dt><dd class=\"n\">£19.20</dd></div>\n</dl>\n<p class=\"fn\">This is calculated automatically from the operator's own arrival record. If you believe the recorded arrival time is wrong, say so in the notes and it will be checked against the signalling log.</p></section></section>\n<section class=\"dz-mod\" data-mod=\"form\" aria-label=\"Claim fields\">\n<form class=\"cf\">\n  <label>Pay to<select><option>The card ending 4417</option><option>Bank transfer</option><option>Rail travel voucher (+10%)</option></select></label>\n  <label>Notes<textarea rows=\"3\" placeholder=\"Only if something about the calculation above is wrong.\"></textarea></label>\n  <label class=\"chk\"><input type=\"checkbox\" checked> I was on this train and arrived at the destination shown.</label>\n  <div class=\"ac\"><button type=\"button\" class=\"pri\">Submit claim</button><button type=\"button\" class=\"sec\">Cancel</button></div>\n  <p class=\"fn\">Claims are settled within five working days. You will get an email either way, including if it is refused.</p>\n</form></section>\n</div>",
  "css": "\n.dz-ticket-stub-refund { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 28px; max-width: 620px; margin: 0 auto; }\n.dz-ticket-stub-refund .lb { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); display: block; }\n.dz-ticket-stub-refund h1 { font-family: var(--pv-display); font-weight: 600; font-size: 34px; margin: 6px 0 8px; }\n.dz-ticket-stub-refund .rh p { margin: 0 0 22px; font-size: 14px; color: var(--muted-foreground); line-height: 1.55; }\n.dz-ticket-stub-refund .stub { display: grid; grid-template-columns: 68% 32%; border: 1px solid var(--border); border-radius: var(--pv-radius); background:\n  radial-gradient(circle 7px at var(--px) 0, transparent 98%, var(--card) 100%),\n  radial-gradient(circle 7px at var(--px) 100%, transparent 98%, var(--card) 100%),\n  var(--card); overflow: hidden; margin-bottom: 24px; }\n.dz-ticket-stub-refund .lg { padding: 18px 20px; }\n.dz-ticket-stub-refund .stub h2 { font-family: var(--pv-display); font-weight: 600; font-size: 21px; margin: 6px 0 14px; }\n.dz-ticket-stub-refund .mt { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; padding: 0; }\n.dz-ticket-stub-refund .mt b { font-family: var(--pv-mono); font-size: 14px; }\n.dz-ticket-stub-refund .sm { padding: 18px 20px; border-left: 1px dashed var(--border); display: grid; align-content: start; gap: 8px; }\n.dz-ticket-stub-refund .cd { font-family: var(--pv-mono); font-size: 13px; letter-spacing: .04em; }\n.dz-ticket-stub-refund .late { text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); color: var(--destructive); }\n.dz-ticket-stub-refund h2 { font-family: var(--pv-display); font-weight: 600; font-size: 21px; margin: 0 0 12px; }\n.dz-ticket-stub-refund dl { margin: 0 0 12px; }\n.dz-ticket-stub-refund dl div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; }\n.dz-ticket-stub-refund dt { color: var(--muted-foreground); margin: 0; }\n.dz-ticket-stub-refund dd { margin: 0; text-align: right; }\n.dz-ticket-stub-refund .n { font-family: var(--pv-mono); letter-spacing: .02em; }\n.dz-ticket-stub-refund .tot { border-bottom: 0; border-top: 2px solid var(--border); font-weight: 700; }\n.dz-ticket-stub-refund .tot dd { color: var(--primary); font-size: 17px; }\n.dz-ticket-stub-refund .fn { font-size: 12.5px; color: var(--muted-foreground); margin: 0 0 20px; line-height: 1.55; }\n.dz-ticket-stub-refund .cf { margin-top: 22px; }\n.dz-ticket-stub-refund .cf label { display: block; text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); margin-bottom: 16px; }\n.dz-ticket-stub-refund select, .dz-ticket-stub-refund textarea { display: block; width: 100%; margin-top: 6px; padding: 11px; font: inherit; font-size: 14px; background: var(--card); border: 1px solid var(--input); border-radius: var(--pv-radius-sm); color: var(--foreground); text-transform: none; letter-spacing: 0; font-weight: 400; resize: vertical; }\n.dz-ticket-stub-refund .chk { display: flex; gap: 10px; align-items: center; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--foreground); font-weight: 400; }\n.dz-ticket-stub-refund .ac { display: flex; gap: 10px; margin: 4px 0 16px; }\n.dz-ticket-stub-refund button { font: inherit; text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; color: var(--muted-foreground); padding: 13px 22px; border-radius: var(--pv-radius-sm); cursor: pointer; }\n.dz-ticket-stub-refund .pri { background: var(--primary); color: var(--primary-foreground); border: 0; }\n.dz-ticket-stub-refund .sec { background: transparent; color: var(--foreground); border: 1px solid var(--border); }\n",
  "requiredTheme": "/api/v1/themes/ticket-stub.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Khand:wght@400;500;600;700&family=Asap:wght@400;500;600;700&family=Overpass+Mono:wght@400;500;600;700&display=swap"
}