/* Form styles. Only site token NAMES are used (IF-001 §5 contract). */
:root {
  --pv-error: #b3261e;
  --pv-muted: #5f6368;
  --pv-soft: #f4f6f8;
  /* URS-013: pink = still to fill; red after a submit attempt. */
  --pv-need: #c2185b;
  --pv-need-bg: #fff0f5;
  --pv-scale: 1; /* URS-016: font size chosen by the reader */
}
/* URS-016: font size (A / A+ / A++) — form text only, the site's tokens keep their values. */
html[data-font="2"] { --pv-scale: 1.25; }
html[data-font="3"] { --pv-scale: 1.5; }
/* URS-016: high contrast — black on white, thick borders and focus. Overrides
   the token values inside the form only (IF-001 §5: the site is untouched). */
html[data-contrast="high"] {
  --color-surface: #fff; --color-on-surface: #000; --color-primary: #000; --color-on-primary: #fff;
  --color-focus: #000; --pv-muted: #000; --pv-soft: #fff; --pv-need: #9b0040; --pv-error: #a00000;
}
html[data-contrast="high"] body { background: #fff; color: #000; }
html[data-contrast="high"] input, html[data-contrast="high"] select, html[data-contrast="high"] textarea { border-color: #000; }
html[data-contrast="high"] .item, html[data-contrast="high"] .contacts { border: 2px solid #000; }
html[data-contrast="high"] a { text-decoration: underline; }
html[data-contrast="high"] :focus-visible { outline: 4px solid #000; outline-offset: 2px; }
html[data-contrast="high"] .banner { background: #fff; border: 2px solid #000; }
* { box-sizing: border-box; }
/* `hidden` must win over component display rules (.check is flex): the
   representative confirmation was shown to every reporter (URS-013). */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-family-base);
  font-size: calc(max(var(--font-size-body), 18px) * var(--pv-scale)); /* readable for elderly reporters */
  line-height: var(--line-height-base);
}
.page { max-width: var(--prose-max-width); margin: 0 auto; padding: var(--space-md) 16px var(--space-xl); }
.page-head h1 { font-size: calc(var(--font-size-title-lg) * var(--pv-scale)); margin: 0 0 var(--space-sm); }
h2 { font-size: calc(var(--font-size-title) * var(--pv-scale)); margin: 0 0 var(--space-sm); }
.banner { background: #fff4ce; padding: var(--space-xs) var(--space-sm); border-radius: 6px; }
.contacts { border: var(--border-width-strong) solid var(--color-primary); border-radius: 8px;
  padding: var(--space-sm) var(--space-md); margin: var(--space-md) 0; }
.contacts h2 { font-size: calc(var(--font-size-lead) * var(--pv-scale)); }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-sm); }
.card { margin: var(--space-md) 0; }
.urgent { font-weight: var(--font-weight-semibold); }
.choice { display: block; padding: var(--space-md); border: var(--border-width-strong) solid var(--color-primary);
  border-radius: 8px; text-decoration: none; color: var(--color-primary); font-weight: var(--font-weight-semibold); }
fieldset { border: 0; border-top: var(--border-width) solid #d0d5da; padding: var(--space-md) 0; margin: 0; }
legend { font-size: calc(var(--font-size-lead) * var(--pv-scale)); font-weight: var(--font-weight-semibold); padding: 0; margin-bottom: var(--space-sm); }
.field { display: block; margin-bottom: var(--space-sm); }
.label { display: block; font-weight: var(--font-weight-medium); }
.hint { display: block; color: var(--pv-muted); font-size: calc(var(--font-size-small) * var(--pv-scale)); }
.opt { font-style: normal; font-weight: var(--font-weight-regular); color: var(--pv-muted); font-size: calc(var(--font-size-small) * var(--pv-scale)); }
.req { color: var(--pv-need); font-weight: var(--font-weight-semibold); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.required-note { display: flex; gap: var(--space-xs); align-items: center; }
.required-note .swatch { flex: none; width: 28px; height: 20px; border: var(--border-width-strong) solid var(--pv-need);
  background: var(--pv-need-bg); border-radius: 4px; }
.one-of { margin-bottom: var(--space-sm); }
.one-of > .label { margin: 0 0 var(--space-xs); }
/* URS-014: specialised drug fields of form 138/o, shown on request. */
form:not(.show-details) .details-only { display: none; }

input[type=text], input[type=tel], input[type=email], input[type=number], input[type=time], select, textarea {
  width: 100%; font: inherit; padding: 10px 12px; min-height: 48px;
  border: var(--border-width-strong) solid #8a949e; border-radius: 6px; background: #fff; color: inherit;
}
textarea { min-height: 96px; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
input.need, select.need, textarea.need { border-color: var(--pv-need); background-color: var(--pv-need-bg); }
.check.need, [data-group].need, fieldset.need { outline: 2px solid var(--pv-need); outline-offset: 4px; border-radius: 4px; }
form.attempted input.need, form.attempted select.need, form.attempted textarea.need { border-color: var(--pv-error); background-color: #fdecea; }
form.attempted .check.need, form.attempted [data-group].need, form.attempted fieldset.need { outline-color: var(--pv-error); }
.invalid { border-color: var(--pv-error) !important; background-color: #fdecea !important; }
[data-group].invalid { outline: 2px solid var(--pv-error); outline-offset: 4px; background: transparent !important; }
.check { display: flex; gap: var(--space-xs); align-items: flex-start; margin: var(--space-xs) 0; }
.check input { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.check p { margin: 0; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
/* CC-013: labels of different length in one row — the inputs line up at the bottom. */
.row > .field { display: flex; flex-direction: column; }
.row > .field > input, .row > .field > select { margin-top: auto; }
@media (max-width: 480px) { .row { grid-template-columns: 1fr; } }
.item { background: var(--pv-soft); border-radius: 8px; padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-sm); }
.pair { font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-xs); }
button { font: inherit; min-height: 48px; padding: 10px 20px; border-radius: 8px; cursor: pointer; }
button.primary { background: var(--color-primary); color: var(--color-on-primary); border: 0; font-weight: var(--font-weight-semibold); width: 100%; }
button.secondary { background: transparent; color: var(--color-primary); border: var(--border-width-strong) solid var(--color-primary); }
button.link { background: none; border: 0; color: var(--pv-error); text-decoration: underline; min-height: auto; padding: 4px 0; }
button:disabled { opacity: .6; cursor: progress; }
.error { background: #fdecea; color: var(--pv-error); padding: var(--space-sm); border-radius: 6px; font-weight: var(--font-weight-medium); }
.error p { margin: 0; }
.error ul { margin: var(--space-xs) 0 0; padding-left: 1.2em; }
.done { border: var(--border-width-strong) solid #1e7e34; border-radius: 8px; padding: var(--space-md); }
.number { font-size: calc(var(--font-size-display-sm) * var(--pv-scale)); font-weight: var(--font-weight-heavy); letter-spacing: .05em; margin: var(--space-xs) 0; }
.prose blockquote { border-left: 4px solid var(--color-primary); margin: var(--space-sm) 0; padding-left: var(--space-sm); }
.meta { color: var(--pv-muted); font-size: calc(var(--font-size-small) * var(--pv-scale)); }
/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media print {
  .contacts, .banner, #print, #again { display: none; }
}

/* URS-007: attached files */
.files { list-style: none; padding: 0; margin: 0 0 var(--space-sm); }
.files li { display: flex; gap: var(--space-sm); align-items: baseline; flex-wrap: wrap;
            background: var(--pv-soft); border-radius: 8px; padding: var(--space-xs) var(--space-md); margin-bottom: 4px; }
.files .name { overflow-wrap: anywhere; flex: 1 1 12em; }
.files .size { color: var(--pv-muted); font-size: calc(var(--font-size-small) * var(--pv-scale)); }

/* CC-013: suggestion list of free-text fields (static/suggest.js). The arrow
   says "there is a list here"; the field still accepts any text. */
input[data-suggest] {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235f6368' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.suggest { position: absolute; z-index: 20; margin: 0; padding: 4px 0; list-style: none;
  max-height: 260px; overflow-y: auto; background: #fff; color: inherit;
  border: var(--border-width-strong) solid #8a949e; border-top: 0; border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .15); }
.suggest li { padding: 10px 12px; cursor: pointer; }
.suggest li:hover, .suggest li[aria-selected="true"] { background: var(--pv-soft); }

/* URS-014 / CC-013: specialised drug fields of form 138/o, opened in place. */
.drug-details { margin: var(--space-sm) 0; padding-top: var(--space-xs); border-top: 1px dashed #b8c0c8; }
.drug-details > summary { display: block; list-style: none; cursor: pointer; padding: 8px 0; min-height: 44px; }
.drug-details > summary::-webkit-details-marker { display: none; }
.drug-details > summary .summary-title { color: var(--color-primary); font-weight: var(--font-weight-semibold); text-decoration: underline; }
.drug-details > summary .summary-title::before { content: "▸ "; display: inline-block; width: 1.2em; text-decoration: none; }
.drug-details[open] > summary .summary-title::before { content: "▾ "; }
.drug-details > summary .hint { margin-top: 2px; }

/* URS-016: reader settings under the contacts block. */
.a11y { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: calc(-1 * var(--space-xs)) 0 var(--space-md); }
.a11y-title { color: var(--pv-muted); font-size: calc(var(--font-size-small) * var(--pv-scale)); }
.a11y button { min-height: 44px; min-width: 44px; padding: 6px 12px; background: transparent; color: var(--color-primary);
  border: var(--border-width-strong) solid var(--color-primary); border-radius: 8px; font-weight: var(--font-weight-semibold); }
.a11y button[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.a11y [data-font="2"] { font-size: 1.15em; }
.a11y [data-font="3"] { font-size: 1.3em; }