/* The Forms page (CTN-16). No inline styles: the content policy allows only this file. The brand's colour arrives as
   --accent and its text colour as --on-accent, set by form.js. */
:root { --accent: #111111; --on-accent: #FFFFFF; --text: #111111; --muted: #48484A; --line: #C7C7CC; --soft: #F5F5F7; --error: #B3261E; --font: -apple-system, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #FFFFFF; color: var(--text); font: 16px/1.5 var(--font); }
a { color: #0A4DA8; }
a:hover { color: #063A80; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #0A4DA8; outline-offset: 2px; }
.bar { height: 56px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; padding: 0 20px; }
.bar img { height: 30px; width: auto; display: block; }
/* SYS-55: the bar under a logo made for a light background */
.bar.on-light { background: #FFFFFF; color: var(--text); border-bottom: 1px solid var(--line); }
.brand { font-weight: 800; letter-spacing: -0.02em; font-size: 18px; }
.wrap { max-width: 720px; margin: 0 auto; padding: 28px 20px 48px; }
.loading { color: var(--muted); }
.fallback h1, .screen h1 { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 12px; }
.banner { background: #FFF4E5; color: #6B3A00; border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 20px; }
.context { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.progress { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.progress span { font-size: 14px; color: var(--muted); }
.track { height: 6px; background: #E5E5EA; border-radius: 999px; overflow: hidden; }
.fill { height: 100%; background: var(--accent); border-radius: 999px; width: 0; transition: width 0.2s; }
.page-title { font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 8px; }
.page-title:focus { outline: none; }
.intro { color: #3A3A3C; margin: 0 0 20px; }
/* CTN-111: inside a website's page the site carries the brand and the heading, so the bar and the first page's own
   heading and intro are not repeated. The heading stays for screen readers. Later pages, thanks and Test mode are kept. */
.is-embedded .bar { display: none; }
/* CTN-151 (Matt, 12 Oct 2026): the intro is the form's; it shows on a website unless the form's setting is off */
.is-embedded:not(.show-intro) .intro.first { display: none; }
.is-embedded .page-title.first { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fields { display: flex; flex-direction: column; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field legend, .q { font-weight: 600; font-size: 15px; line-height: 1.4; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 10px; }
.optional { font-weight: 400; color: #6E6E73; }
.help { font-size: 14px; color: var(--muted); margin: 0; }
input[type=text], input[type=email], input[type=tel], input[type=date], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #FFFFFF; color: var(--text); }
textarea { resize: vertical; min-height: 96px; }
[aria-invalid=true] { border-color: var(--error) !important; }
.error { color: var(--error); font-size: 14px; margin: 0; }
.choices { display: flex; flex-direction: column; gap: 10px; }
.choice { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.choice input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--accent); }
.choice:has(input:checked) { border: 2px solid var(--accent); background: var(--soft); font-weight: 600; }
.consents { border-top: 1px solid #E5E5EA; padding-top: 16px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; cursor: pointer; }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--accent); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.note { font-size: 14px; color: var(--muted); margin: 22px 0 0; }
.actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
button { font: inherit; min-height: 50px; padding: 0 24px; border-radius: 10px; cursor: pointer; }
.primary { background: var(--accent); color: var(--on-accent); border: 0; font-weight: 700; }
.secondary { background: #FFFFFF; color: var(--text); border: 1px solid var(--line); }
button[disabled] { opacity: 0.6; cursor: default; }
.summary { border: 1px solid var(--error); border-radius: 10px; padding: 12px 14px; color: var(--error); margin-bottom: 18px; }
/* the rating grid: a grid on a wide screen, one row at a time as a card on a phone */
.grid { border: 1px solid #E5E5EA; border-radius: 12px; overflow: hidden; }
.grid-head, .grid-row { display: grid; grid-template-columns: 2fr repeat(var(--cols, 5), minmax(0, 1fr)); gap: 8px; align-items: center; padding: 12px 16px; }
.grid-head { background: var(--soft); font-size: 13px; color: var(--muted); text-align: center; }
.grid-head .q { text-align: left; color: var(--text); }
.grid-row { border-top: 1px solid #F0F0F4; }
.grid-row legend.sr { padding: 0; }
/* the row's visible name is the first grid cell (CTN-18: Safari keeps a legend out of the grid) */
.grid-row .row-name { font-size: 15px; font-weight: 500; }
.grid-row .cell { display: flex; justify-content: center; }
.grid-row .cell input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.grid-row .cell .opt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) {
  .wrap { padding: 22px 16px 40px; }
  .page-title { font-size: 23px; }
  .grid { border: 0; display: flex; flex-direction: column; gap: 14px; }
  .grid-head { display: none; }
  .grid-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; border: 1px solid #E5E5EA; border-radius: 12px; }
  .grid-row .row-name { font-weight: 600; margin-bottom: 4px; }
  .grid-row .cell { justify-content: flex-start; gap: 12px; min-height: 44px; align-items: center; padding: 4px 6px; border-radius: 8px; }
  .grid-row .cell .opt { position: static; width: auto; height: auto; clip: auto; }
  .actions button { flex: 1 1 auto; }
}