/* Referral forms (ENV-33, ENV-63): the form pages (/refer/<pathway>/), the confirmation page (/refer/sent/) and the
   short page api/referral.js shows visitors without JavaScript. Loaded after styles.css (front matter pageStyle), so
   it uses the redesign's tokens and buttons.

   The look follows the motion concept (concepts/motion-redesign/refer.html on concept/motion-redesign): white cards
   rising over the sky hero, a road with a car for progress, and a flag when the referral is sent. The patterns follow
   the GOV.UK Design System: labels above fields, hints under labels, errors with a summary at the top, and large radio
   buttons and tick boxes (a 40px box inside a 44px touch area). Text sizes are in rem, so the header's Larger text
   switch scales them. Motion lives in js/referral-form.js; the few CSS transitions here are off under Pause motion
   and reduced motion. */

.referral { --field: #6B7F95; --rise: clamp(32px, 5vw, 64px); }   /* field borders: 4.1:1 on white */
.referral [hidden] { display: none !important; }
.referral-form.is-enhanced .nojs-only { display: none; }   /* is-enhanced: set by js/referral-form.js once it runs */

/* ---------- The page: white cards rise over the bottom of the sky hero, on mist ---------- */
.referral-stage { position: relative; z-index: 1; margin-top: calc(var(--rise) * -1); padding-top: 0; background: linear-gradient(transparent var(--rise), var(--mist) var(--rise)); }
.referral-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 1120px; }
.flow-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (min-width: 1101px) {
  .referral-flow { grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
  .flow-side { position: sticky; top: 110px; }
}
@media (max-width: 1100px) {
  .referral-flow { max-width: 760px; }
  .flow-side { display: none; }
}

.side-card { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-sm); }
.path-chip { display: flex; align-items: center; gap: 12px; }
.path-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--navy); color: var(--sky); }
.path-ico .icon { width: 22px; height: 22px; }
.path-chip-text { display: flex; flex-direction: column; min-width: 0; }
.path-chip-text b { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: var(--navy); }
.chip-change { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; font-weight: 600; color: var(--eyebrow); text-decoration: underline; text-underline-offset: 3px; }
.chip-change:hover { color: var(--navy); }

/* ---------- The road: a stop for each step, a flag for "Sent", and the car (drawn by js/referral-form.js) ---------- */
.road { position: relative; }
.road-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.road-base { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; }
.road-line { fill: none; stroke: var(--sky); stroke-width: 4; stroke-linecap: round; }
.road-stop { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 14px; transform: translate(-7px, -50%); font-size: 1rem; font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--muted); }
.road-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--field); }
.road-stop.is-done, .road-stop.is-now { color: var(--navy); }
.road-stop.is-done .road-dot { background: var(--blue); border-color: var(--blue); }
.road-stop.is-now .road-dot { border-color: var(--blue); }
.road-flag { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-left: -8px; border-radius: 50%; background: var(--navy); color: var(--sky); }
.road-flag .icon { width: 16px; height: 16px; }
.road-car { position: absolute; left: 0; top: 0; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: var(--navy); color: #fff; box-shadow: 0 0 0 5px rgba(91, 184, 240, .25), 0 8px 18px rgba(11, 42, 74, .3); }
.road-car .icon { width: 18px; height: 18px; }
.road-tall { height: 430px; margin-top: 14px; }
/* Phones and tablets: a strip across the top of the form card, without the names (each step's heading has it) */
.road-strip { height: 56px; margin: -4px 0 24px; }
.road-strip .road-name { display: none; }
.road-strip .road-dot { width: 12px; height: 12px; }
.road-strip .road-stop { transform: translate(-6px, -50%); }
.road-strip .road-flag { width: 26px; height: 26px; margin-left: -7px; }
.road-strip .road-car { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.road-strip .road-car .icon { width: 16px; height: 16px; }
@media (min-width: 1101px) { .road-strip { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) .road-stop { transition: color .3s; }
  html:not(.motion-off) .road-dot { transition: border-color .3s, background-color .3s; }
}

/* ---------- Before you start, and the note when sending is switched off ---------- */
.before-start { background: #fff; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-sm); }
.before-start > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 18px 24px; border-radius: 28px; list-style: none; cursor: pointer; font-size: 1.125rem; font-weight: 700; color: var(--navy); }
.before-start > summary::-webkit-details-marker { display: none; }
.before-start[open] > summary { padding-bottom: 6px; }
.before-start[open] > summary .icon { transform: rotate(180deg); }
.before-start-body { padding: 0 24px 22px; }
.before-start-list { margin: 8px 0 0; padding-left: 20px; font-size: 1rem; line-height: 1.6; color: var(--body); }
.before-start-list li + li { margin-top: 6px; }
.before-start-note { margin: 12px 0 0; font-size: 1rem; line-height: 1.6; color: var(--body); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) .before-start > summary .icon { transition: transform .3s var(--ease); }
}

.sending-off { padding: clamp(20px, 3vw, 28px); background: #FFF6E5; border: 2px solid #8A5A00; border-radius: 22px; }
.sending-off p { margin: 8px 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
.sending-off a { color: var(--eyebrow); }   /* the blue link colour is under 4.5:1 on this amber */

/* ---------- The form card and its steps ---------- */
.form-card { padding: 40px 44px 36px; background: #fff; border-radius: 34px; box-shadow: var(--shadow); }
/* Steps: separated by a line without JavaScript; one at a time with it */
.form-step + .form-step { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.referral-form.is-enhanced .form-step + .form-step { margin-top: 0; padding-top: 0; border-top: 0; }
.form-step-title { display: flex; flex-direction: column; gap: 6px; margin: 0 0 28px; font-family: var(--fb); font-size: 1rem; font-weight: 400; }
.form-step-title:focus { outline: none; }
.form-step-title:focus-visible { outline: 3px solid var(--navy); outline-offset: 6px; border-radius: 8px; }
.form-step-count { font-size: .9375rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--eyebrow); }
.form-step-name { font-family: var(--fd); font-weight: 300; font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1.08; letter-spacing: -.01em; color: var(--navy); }
.step-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--line); }
.step-nav-send { margin-top: 28px; }

/* ---------- Questions ---------- */
.question { margin: 0 0 30px; }
.fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.question-label { display: block; margin: 0 0 6px; padding: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.35; color: var(--navy); }
.question-hint { margin: 0 0 10px; font-size: 1rem; line-height: 1.5; color: var(--muted); }
.question-note { margin: 10px 0 0; font-size: 1rem; line-height: 1.5; color: var(--navy); }
.question-note:empty { display: none; }
.question-note:not(:empty) { padding: 10px 14px; background: var(--tint); border-radius: 12px; }
.input { display: block; width: 100%; min-height: 3.25rem; padding: .625rem .875rem; font: inherit; font-size: 1.0625rem; line-height: 1.4; color: var(--ink); background: #fff; border: 2px solid var(--field); border-radius: 12px; -webkit-appearance: none; appearance: none; }
.input:hover { border-color: var(--navy); }
.input:focus { border-color: var(--navy); outline: 3px solid var(--navy); outline-offset: 2px; }
.textarea { min-height: 7.5rem; resize: vertical; }
.w-2 { max-width: 4.6em; } .w-4 { max-width: 6.4em; } .w-10 { max-width: 14em; } .w-20 { max-width: 24em; } .w-30 { max-width: 34em; }

/* Dates: three boxes sized to what goes in them, so all three fit side by side on a 320px screen */
.date-input { display: flex; flex-wrap: wrap; gap: 12px; }
.date-part { display: flex; flex-direction: column; gap: 4px; }
.date-part-label { font-size: 1rem; font-weight: 600; color: var(--navy); }
.date-part .w-2 { width: calc(2ch + 2.25rem); }
.date-part .w-4 { width: calc(4ch + 2.25rem); }

/* Radio buttons and tick boxes: the real input sits invisibly over the drawn box, so it keeps working with every tool */
.choices-inline { display: flex; flex-wrap: wrap; gap: 0 24px; }
.choice { position: relative; min-height: 44px; margin-bottom: 10px; padding-left: 56px; }
.choice-input { position: absolute; top: 0; left: 0; z-index: 1; width: 44px; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
.choice-label { display: inline-block; padding: 9px 0 7px; font-size: 1.0625rem; line-height: 1.4; color: var(--ink); cursor: pointer; touch-action: manipulation; }
.choice-label::before { content: ''; position: absolute; top: 2px; left: 2px; box-sizing: border-box; width: 40px; height: 40px; background: #fff; border: 2px solid var(--field); }
.choice-radio .choice-label::before { border-radius: 50%; }
.choice-checkbox .choice-label::before { border-radius: 8px; }
.choice-label::after { content: ''; position: absolute; opacity: 0; }
/* The radio's dot is a border, not a background, so it still shows in Windows high contrast */
.choice-radio .choice-label::after { top: 12px; left: 12px; width: 0; height: 0; border: 10px solid var(--navy); border-radius: 50%; transform: scale(.3); }
.choice-checkbox .choice-label::after { top: 13px; left: 11px; width: 20px; height: 9px; border: solid var(--navy); border-width: 0 0 4px 4px; transform: rotate(-45deg) scale(.4); }
.choice-input:checked + .choice-label::before, .choice-input:hover + .choice-label::before { border-color: var(--navy); }
.choice-input:checked + .choice-label::after { opacity: 1; transform: scale(1); }
.choice-checkbox .choice-input:checked + .choice-label::after { transform: rotate(-45deg) scale(1); }
.choice-input:focus-visible + .choice-label::before { border-color: var(--navy); outline: 3px solid var(--navy); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(91, 184, 240, .35); }
.choice-consent { margin-top: 26px; }
.choice-consent .choice-label { font-weight: 600; color: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) .choice-label::before { transition: border-color .2s; }
  html:not(.motion-off) .choice-label::after { transition: opacity .15s, transform .25s var(--ease); }
}

/* Documents */
.file-zone { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px; background: var(--mist); border: 2px dashed var(--field); border-radius: 18px; }
.file-input { width: 100%; max-width: 100%; font: inherit; font-size: 1rem; color: var(--body); }
.file-input::file-selector-button { min-height: 44px; margin-right: 14px; padding: 0 20px; font: inherit; font-weight: 600; color: #fff; background: var(--navy); border: 0; border-radius: 999px; cursor: pointer; }
.file-input:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.file-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 1rem; color: var(--body); }
.file-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow-wrap: anywhere; }
.file-list li span:last-child { flex: none; color: var(--muted); white-space: nowrap; }
.file-list .file-total { padding: 2px 0; background: none; border: 0; font-weight: 600; color: var(--navy); }

/* ---------- Errors (GOV.UK: a summary at the top linking to each problem, and the message by its question) ---------- */
.question.has-error { padding-left: 16px; border-left: 5px solid var(--error); }
.question-error { margin: 0 0 10px; font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--error); }
.has-error .input, .input[aria-invalid="true"] { border-color: var(--error); }
.has-error .choice-label::before, .has-error .file-zone { border-color: var(--error); }
.error-summary { margin: 0 0 32px; padding: 22px 24px; background: #fff; border: 4px solid var(--error); border-radius: 18px; }
.error-summary:focus { outline: 3px solid var(--navy); outline-offset: 3px; }
.error-summary-title { margin: 0 0 10px; font-family: var(--fb); font-size: 1.25rem; font-weight: 700; color: var(--navy); }
.error-summary-list { margin: 0; padding-left: 20px; font-size: 1.0625rem; line-height: 1.5; }
.error-summary-list li + li { margin-top: 6px; }
.error-summary-list a { font-weight: 700; color: var(--error); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Check and send ---------- */
.check-answers { display: flex; flex-direction: column; gap: 16px; margin-bottom: 30px; }
.summary-section { padding: 18px 22px; background: var(--mist); border: 1px solid var(--line); border-radius: 22px; }
.summary-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.summary-title { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--navy); }
.summary-change { min-width: 44px; min-height: 44px; padding: 0 16px; font: inherit; font-size: 1rem; font-weight: 600; color: var(--eyebrow); background: #fff; border: 0; border-radius: 999px; box-shadow: var(--shadow-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.summary-change:hover { color: var(--navy); }
.summary-change:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.summary-list { margin: 10px 0 0; }
.summary-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4px 20px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.5; }
.summary-row:first-child { border-top: 0; }
.summary-row dt { font-weight: 600; color: var(--navy); }
.summary-row dd { margin: 0; color: var(--body); white-space: pre-line; overflow-wrap: anywhere; }
.summary-empty { margin: 8px 0 0; font-size: 1rem; color: var(--muted); }
.collection-notice { margin: 8px 0; padding: 18px 22px; font-size: 1rem; line-height: 1.6; color: var(--navy); background: var(--tint); border-radius: 18px; }
.collection-notice p { margin: 0; }
.collection-notice p + p { margin-top: 8px; }
.collection-notice a { color: var(--eyebrow); }   /* the blue link colour is under 4.5:1 on tint */
.collection-notice-title { margin: 0 0 6px; font-family: var(--fb); font-size: 1.0625rem; font-weight: 700; color: var(--navy); }
.form-status { margin: 14px 0 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.5; color: var(--navy); }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--error); }
.referral-form button[aria-disabled="true"] { opacity: .7; cursor: progress; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Referral sent ---------- */
.sent-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 980px; margin: 0 auto; padding: 44px; background: #fff; border-radius: 36px; box-shadow: var(--shadow); }
.sent-head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.sent-flag { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--navy); color: var(--sky); }
.sent-flag .icon { width: 30px; height: 30px; }
.sent-noscript { margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--body); }
.sent-panel { align-self: stretch; padding: 26px 28px; color: #fff; background: var(--navy); border-radius: 26px; }
.sent-label { margin: 0; font-size: .9375rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sky); }
/* Monospace, on one line: the widest code still fits a 320px screen */
.sent-ref { position: relative; margin: 8px 0 6px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: clamp(1.75rem, 8.5vw, 2.75rem); font-weight: 600; line-height: 1.2; letter-spacing: .08em; white-space: nowrap; }
.sent-ref-board { position: absolute; left: 0; top: 0; }
.sent-ref.is-settling #sent-ref { color: transparent; }
.sent-help { margin: 0; font-size: 1rem; color: #CFE3F3; }
.sent-next-title { margin: 0 0 14px; }
.next-steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: next; }
.next-steps li { position: relative; padding-left: 52px; font-size: 1.0625rem; line-height: 1.55; color: var(--body); counter-increment: next; }
.next-steps li::before { content: counter(next); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint); color: var(--blue); font-family: var(--fd); font-size: 1.25rem; }
.next-steps strong { color: var(--navy); }
.sent-note { padding: 18px 22px; font-size: 1.0625rem; line-height: 1.6; color: var(--body); background: var(--mist); border: 1px solid var(--line); border-radius: 20px; }
.sent-note p { margin: 0; }
.sent-note p + p { margin-top: 8px; }
.sent-note strong { color: var(--navy); }
.sent-note a { color: var(--eyebrow); }   /* the blue link colour is under 4.5:1 on mist */
.sent-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) {
  .sent-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 48px; align-items: start; }
  .sent-note, .sent-actions { grid-column: 1 / -1; }
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .form-card, .sent-card { padding: 26px 20px; border-radius: 26px; }
  .summary-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .step-nav .btn, .sent-actions .btn { flex: 1 1 auto; padding: 0 20px; }
}
@media (max-width: 400px) {
  .form-card, .sent-card, .before-start, .sending-off { margin-inline: -12px; }
  .form-card, .sent-card { padding: 22px 16px; }
  .before-start > summary { padding-inline: 18px; }
  .before-start-body { padding-inline: 18px; }
  .summary-section { padding: 16px; }
}

/* ---------- The short page api/referral.js shows visitors without JavaScript when something needs fixing ---------- */
.form-message-header { padding: 20px 24px 0; }
.form-message-header .logo img { height: 44px; width: auto; }
.form-message { max-width: 760px; display: flex; flex-direction: column; gap: 16px; padding-top: 48px; }
.form-message p, .form-message li { margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--body); }
.form-message ul { margin: 0; padding-left: 22px; }
.form-message li { color: var(--error); }
.form-message li strong { color: var(--navy); }