/* ==========================================================================
   Contact — /contact, /contact/feedback, /contact/pharmacovigilance

   Three separate page designs (user's call) that share ONE set of form
   controls, because a text input should not look or behave three different
   ways on one site. The shared block is `.fld` / `.form-*`; the page shells
   are `.ct`, `.fb` and `.pv` and never reach into each other.

   Logical properties throughout — one set of rules serves fa (RTL) and en.
   ========================================================================== */

/* ==================================================== shared form controls */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}

.fld {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-inline-size: 0;   /* or a long value stretches the grid column */
}
.fld--wide {
  grid-column: 1 / -1;
}

/* A full-width sub-row of three. Used for groups of short controls that belong
   together — the three yes/no questions about one adverse reaction — which in
   the 2-column parent would otherwise split 2 + 1 across two rows and stop
   reading as a set. */
.form-row3 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

.fld__label {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-ink);
}
.fld__req {
  color: var(--c-crit);
  margin-inline-start: 3px;
}
.fld__opt {
  font-weight: 400;
  font-size: var(--t-xs);
  color: var(--c-muted);
}

.fld__input {
  inline-size: 100%;
  min-block-size: 44px;          /* a comfortable touch target */
  padding: 10px var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--t-sm);
  transition: border-color var(--dur-1, 0.15s), box-shadow var(--dur-1, 0.15s);
}
.fld__input:hover {
  border-color: var(--c-line-strong);
}
.fld__input:focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}
textarea.fld__input {
  resize: vertical;
  line-height: var(--lh-body);
}

/* ⚠️ The error state is a border colour AND a message, never colour alone —
   colour is invisible to a screen reader and to a colour-blind reader. The
   message carries aria-describedby from the control. */
.fld.has-error .fld__input {
  border-color: var(--c-crit);
}
.fld.has-error .fld__input:focus-visible {
  box-shadow: 0 0 0 3px rgba(168, 56, 42, 0.16);
}
.fld__err {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--c-crit);
}
.fld__hint {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--c-muted);
}

/* radios */
.fld__radios {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding-block-start: 2px;
}
.rad {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 9px var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: 22px;
  background: var(--c-surface);
  font-size: var(--t-sm);
  color: var(--c-body);
  cursor: pointer;
  transition: border-color var(--dur-1, 0.15s), background-color var(--dur-1, 0.15s);
}
.rad:hover {
  border-color: var(--c-primary);
}
.rad input {
  accent-color: var(--c-primary);
  margin: 0;
}
.rad:has(input:checked) {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
  color: var(--c-primary-deep);
}
.rad:has(input:focus-visible) {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Honeypot. ⚠️ Positioned off-screen rather than display:none — some bots skip
   anything the markup itself declares hidden, which defeats the trap. */
.hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ⚠️ THE SUBMIT BUTTON SITS AT THE INLINE-START, not the conventional end.
   The AI assistant launcher is `position:fixed` at `inset-inline-end: 22px`
   (assistant.css) — the LEFT in fa, the right in en — so a button at the row's
   inline-end lands underneath it at some scroll position, in both locales. On
   these pages that button is the entire point of the page. The stat bar hit the
   same launcher and solved it with `--sb-lift`; here the fix is horizontal.
   Putting the button first also puts it where the reader's eye starts.
   Verified against both locales; re-check if the launcher ever moves. */
.form-foot {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;   /* button (last in DOM) → inline-start */
  gap: var(--s-4);
  flex-wrap: wrap-reverse;
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--c-line);
}
.form-foot__note {
  margin: 0;
  margin-inline-end: auto;       /* pushes the note to the inline-end */
  font-size: var(--t-xs);
  color: var(--c-muted);
}
.form-foot .btn.is-busy {
  opacity: 0.6;
  cursor: progress;
}

.form-privacy {
  margin-block-start: var(--s-4);
  font-size: var(--t-xs);
  color: var(--c-muted);
}
/* The lock-marked variant, used where the button is full width and this line is
   the only note under it (/contact, /contact/feedback). */
.form-privacy--lock {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  line-height: var(--lh-snug);
}
.form-privacy__lock {
  inline-size: 14px;
  block-size: 14px;
  flex: none;
  margin-block-start: 2px;   /* optically on the first line of text */
}

/* ---- consent checkbox (form_check) -------------------------------------- */

.chk__row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
  font-size: var(--t-sm);
  color: var(--c-body);
  line-height: var(--lh-snug);
}
.chk__box {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  margin: 0;
  margin-block-start: 1px;
  accent-color: var(--c-primary);
  cursor: pointer;
}
.chk__box:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.chk.has-error .chk__box {
  outline: 2px solid var(--c-crit);
  outline-offset: 2px;
}
.chk .fld__err {
  margin-block-start: var(--s-2);
}

/* ---- the full-bleed send button ----------------------------------------
   Shared by /contact and /contact/feedback. Full width is also what puts the
   button out of reach of the fixed assistant launcher — a full-bleed button
   cannot be pushed underneath it. */
.form-send {
  inline-size: 100%;
  margin-block-start: var(--s-5);
  padding-block: 15px;
  justify-content: center;
  gap: var(--s-3);
  letter-spacing: 0.04em;
}
.form-send .snd {
  inline-size: 17px;
  block-size: 17px;
  flex: none;
}
/* The plane points the way the locale reads, same convention as `.arw`. */
[dir="rtl"] .form-send .snd {
  transform: scaleX(-1);
}

/* alert + success */

.form-alert {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  margin-block-end: var(--s-6);
  border: 1px solid rgba(168, 56, 42, 0.35);
  border-inline-start: 4px solid var(--c-crit);
  border-radius: 10px;
  background: rgba(168, 56, 42, 0.06);
  color: var(--c-ink);
  font-size: var(--t-sm);
}
.form-alert:focus-visible {
  outline: 2px solid var(--c-crit);
  outline-offset: 2px;
}
.form-alert strong {
  color: var(--c-crit);
}

.form-ok {
  text-align: center;
  padding: var(--s-12) var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: var(--c-surface);
}
.form-ok__mark {
  display: block;
  inline-size: 56px;
  block-size: 56px;
  margin: 0 auto var(--s-5);
  border-radius: 50%;
  background: var(--c-green-soft);
  position: relative;
}
/* A drawn tick, so it needs no icon font and cannot 404. */
.form-ok__mark::after {
  content: "";
  position: absolute;
  inset-block-start: 17px;
  inset-inline-start: 20px;
  inline-size: 14px;
  block-size: 24px;
  border-inline-end: 3px solid var(--c-green);
  border-block-end: 3px solid var(--c-green);
  transform: rotate(45deg);
}
.form-ok__title {
  margin: 0 0 var(--s-3);
  font-size: var(--t-lg);
  color: var(--c-ink);
}
.form-ok__text {
  margin: 0 0 var(--s-6);
  color: var(--c-body);
}

/* ======================================================= shared page heads */

.fb-head,
.pv-head {
  border-block-end: 1px solid var(--c-line);
  padding-block: var(--s-12) var(--s-10);
}
.pv-head { background: linear-gradient(165deg, #f7f2f1 0%, var(--c-paper) 60%, var(--c-surface) 100%); }

.fb-head__crumb,
.pv-head__crumb {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: var(--t-sm);
  color: var(--c-muted);
  margin-block-end: var(--s-6);
}
.fb-head__crumb a,
.pv-head__crumb a { color: var(--c-muted); }
.fb-head__crumb a:hover,
.pv-head__crumb a:hover { color: var(--c-primary); }

.pv-head__eyebrow {
  display: inline-block;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 4px var(--s-4);
  border-radius: 20px;
  background: #fff;
  color: var(--c-primary-deep);
  margin: 0 0 var(--s-4);
}
.pv-head__eyebrow { color: var(--c-crit); }

.fb-head__title,
.pv-head__title {
  font-size: var(--t-2xl);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin: 0;
}

.fb-head__lede,
.pv-head__lede {
  max-inline-size: 62ch;
  margin-block: var(--s-4) 0;
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  color: var(--c-body);
}

/* ============================================================ /contact ====
   Rebuilt 2026-08-15 to a reference design the user supplied: one white panel
   floating on a tinted ground, form beside a map, a vertical follow rail down
   the outer edge, and a three-up channel strip along the bottom.

   There is deliberately **no `.ct-head` band** on this page any more — the
   title lives inside the panel, as in the reference. `/contact/feedback` and
   `/contact/pharmacovigilance` keep their own heads.
   ========================================================================== */

.ct {
  background: var(--c-wash);
  padding-block: var(--s-12) var(--sec-y);
}

.ct-panel {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(14, 31, 39, 0.07);
  padding: clamp(24px, 4vw, 64px);
}

/* The dot field that used to sit above this corner is gone (2026-08-15): the
   reference leaves that band empty, and the offset block behind the map is the
   page's one piece of decoration. Do not reintroduce it without a request. */

/* Form slightly wider than the map, as in the reference — the map is an
   orientation aid, the form is the job. */
.ct-panel__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

/* ---- follow rail ---------------------------------------------------------
   Pinned outside the panel on the inline-start edge. It is decoration plus a
   handful of real links, so the label is aria-hidden and the list is not. */

.ct-follow {
  position: absolute;
  inset-block-start: 96px;
  inset-inline-start: -30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.ct-follow__label {
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  color: var(--c-muted);
  white-space: nowrap;
  /* Reads bottom-to-top on both sides; `sideways-lr` is still unsupported in
     too many engines to rely on, so this is a rotation. */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.ct-follow__line {
  inline-size: 1px;
  block-size: 46px;
  background: var(--c-line-strong);
}

.ct-follow__list {
  position: absolute;
  inset-block-start: 250px;
  inset-inline-start: -42px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.ct-follow__link {
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 8px;
  color: var(--c-muted);
  transition: color var(--dur-1, 0.15s), background-color var(--dur-1, 0.15s);
}
.ct-follow__link:hover {
  color: var(--c-primary);
  background: var(--c-primary-soft);
}
.ct-follow__link svg {
  inline-size: 17px;
  block-size: 17px;
}

/* ---- the form column ---------------------------------------------------- */

.ct-crumb {
  display: flex;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-muted);
  margin-block-end: var(--s-6);
}
.ct-crumb a { color: var(--c-muted); }
.ct-crumb a:hover { color: var(--c-primary); }

.ct-title {
  font-size: var(--t-2xl);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin: 0;
}
/* The short rule directly under the title is the reference's signature. */
.ct-title__rule {
  display: block;
  inline-size: 44px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--c-primary);
  margin-block: var(--s-3) var(--s-4);
}
.ct-lede {
  margin: 0 0 var(--s-8);
  color: var(--c-muted);
  font-size: var(--t-sm);
  max-inline-size: 46ch;
}

.ct-form__grid {
  gap: var(--s-4);
}

/* Full-bleed primary action, as in the reference. It also puts the button
   completely out of reach of the fixed assistant launcher — a full-width
   button cannot be pushed underneath it. */
/* The send button and the lock-marked privacy line are shared — see
   `.form-send` and `.form-privacy--lock` in the controls section above. */

/* ---- the map column ----------------------------------------------------- */

.ct-map {
  position: relative;
  align-self: stretch;
  min-block-size: 380px;
  display: grid;
}

/* The block behind the map — the page's one strong accent, and the whole of
   the reference's depth. It is a FULL-SIZE copy of the map shifted up and
   toward the outer edge, not a corner patch: only the 20px that peeks out on
   two sides is ever seen, which is what makes it read as one framed object
   rather than a stray rectangle. Purely decorative.
   `inset-inline: 20px -20px` = inset at the start edge, outside at the end
   edge — the LEFT in fa, the right in en, i.e. always the outer edge. */
.ct-map__accent {
  position: absolute;
  inset-block: -20px 20px;
  inset-inline: 20px -20px;
  background: var(--c-primary);
  border-radius: 10px;
  pointer-events: none;
}

.ct-map__frame,
.ct-map__placeholder {
  position: relative;   /* above the accent block */
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 380px;
  border: 0;
  border-radius: 10px;
  background: var(--c-wash);
  box-shadow: 0 10px 30px rgba(14, 31, 39, 0.10);
}

.ct-map__frame {
  /* OSM's own tiles are colourful; a slight desaturation settles them next to
     the brand blue without making the map unreadable. */
  filter: saturate(0.82);
}

/* No coordinates on file: a real panel with the address, not a fake map. */
.ct-map__placeholder {
  position: relative;
  overflow: hidden;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-4);
  text-align: center;
  padding: var(--s-8);
  border: 1px solid var(--c-line);
  background: var(--c-paper);
}
.ct-map__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.5;
  pointer-events: none;
}
.ct-map__pin {
  position: relative;
  inline-size: 34px;
  block-size: 34px;
  color: var(--c-primary);
}
.ct-map__address {
  position: relative;
  margin: 0;
  max-inline-size: 34ch;
  color: var(--c-body);
  line-height: var(--lh-body);
}
.ct-map__placeholder .btn {
  position: relative;
}

/* ---- channel strip ------------------------------------------------------
   Three cells divided by hairlines, as in the reference. `--ct-strip-n` comes
   from the template so a site with only two channels on record still gets an
   even row instead of a gap where the third would have been. */

.ct-strip {
  list-style: none;
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding-block-start: clamp(24px, 3vw, 40px);
  border-block-start: 1px solid var(--c-line);
  display: grid;
  grid-template-columns: repeat(var(--ct-strip-n, 3), minmax(0, 1fr));
}

.ct-strip__cell {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-inline: clamp(12px, 2vw, 32px);
  min-inline-size: 0;
}
.ct-strip__cell + .ct-strip__cell {
  border-inline-start: 1px solid var(--c-line);
}

.ct-strip__icon {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  flex: none;
  color: var(--c-primary);
}
.ct-strip__icon svg {
  inline-size: 30px;
  block-size: 30px;
  stroke-width: 1.4;   /* the reference's icons are light outlines */
}

.ct-strip__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
.ct-strip__label {
  font-weight: 700;
  color: var(--c-ink);
  font-size: var(--t-sm);
}
.ct-strip__value {
  font-size: var(--t-sm);
  color: var(--c-muted);
  /* Addresses run long; the cell must not stretch the grid column. */
  overflow-wrap: anywhere;
}
a.ct-strip__value:hover {
  color: var(--c-primary);
}

/* Anything on record the three-up strip does not cover. */
.ct-extra {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-8);
}
.ct-extra__row {
  display: flex;
  gap: var(--s-2);
  font-size: var(--t-xs);
}
.ct-extra__label {
  color: var(--c-muted);
}
.ct-extra__value {
  color: var(--c-body);
  font-weight: 500;
}

.ct-other {
  padding-block: var(--sec-y);
  background: var(--c-paper);
  border-block-start: 1px solid var(--c-line);
}
.ct-other__title {
  margin: 0 0 var(--s-6);
  font-size: var(--t-lg);
  color: var(--c-ink);
}
.ct-other__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-5);
}
/* ⚠️ A ROW, not a column. Stacked, these cards were ~570px wide holding two
   short lines, so most of each one was empty. Icon leading, text and link
   beside it, uses the width the grid actually gives them. */
.ct-other__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  align-items: center;
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  background: var(--c-surface);
  color: inherit;
  transition: border-color var(--dur-1, 0.15s), box-shadow var(--dur-1, 0.15s),
              transform var(--dur-1, 0.15s);
}
.ct-other__card:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-1);
  transform: translateY(-2px);
  text-decoration: none;
}
.ct-other__icon {
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--c-primary-soft);
  color: var(--c-primary-deep);
}
/* The adverse-event route is marked apart from the other two: it is the one
   that carries clinical weight. */
.ct-other__card--pv .ct-other__icon {
  background: rgba(168, 56, 42, 0.09);
  color: var(--c-crit);
}
.ct-other__icon svg {
  inline-size: 20px;
  block-size: 20px;
}
/* The icon spans both text rows at the leading edge. */
.ct-other__icon {
  grid-row: 1 / span 2;
}
.ct-other__text {
  color: var(--c-ink);
  line-height: var(--lh-snug);
  font-size: var(--t-sm);
  align-self: end;
}
.ct-other__go {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-primary-deep);
  font-size: var(--t-xs);
  font-weight: 500;
  word-break: break-word;
}
.ct-other__go .arw {
  inline-size: 15px;
  block-size: 15px;
}

/* =================================================== /contact/feedback ==== */

/* A form card beside a short sticky aside. The three contact pages must not
   converge — /contact is a floating panel with a map, /pv is six numbered
   clinical steps, this is form + guidance.

   The head stays on a cool grey wash. `/pv` keeps its red tint, which is the
   semantic distinction that matters — that page is the regulated one. */
.fb { }

.fb-head {
  background: linear-gradient(200deg, #eef1f7 0%, var(--c-paper) 58%, var(--c-surface) 100%);
}

/* Title + illustration side by side. `align-items: center` and NOT stretch:
   the drawing should sit against the middle of the text block, not be pulled
   to its full height. */
.fb-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.fb-head__rule {
  display: block;
  inline-size: 48px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--c-primary);
  margin-block: var(--s-4) var(--s-5);
}

/* ---- the head illustration (illus.php) ---------------------------------- */

/* The drawing's colours live in `illus.css` (loaded by this page's controller);
   this page owns only where it sits and how big it is. */
.fb-head__art {
  display: flex;
  justify-content: center;
}
.fb-head__art .il {
  max-inline-size: 420px;
}

.fb-body {
  padding-block: var(--s-12) var(--sec-y);
}
.fb-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
}

.fb-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 40px);
}

/* Each block is a labelled step down the form. Separated by SPACE, not a rule:
   the reference draws no line here, and the block's own heading already says
   where one section ends and the next begins. */
.fb-block + .fb-block {
  margin-block-start: var(--s-8);
}
.fb-block__title {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: 0 0 var(--s-4);
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--c-ink);
}
.fb-block__opt {
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--c-muted);
}
.fb-block__note {
  margin: -8px 0 var(--s-4);
  font-size: var(--t-xs);
  color: var(--c-muted);
  line-height: var(--lh-body);
}

/* ---- aside ---- */

.fb-aside {
  position: sticky;
  inset-block-start: calc(var(--header-h, 76px) + 16px);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.fb-aside__title {
  margin: 0 0 var(--s-1);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-muted);
}

.fb-aside__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  background: var(--c-surface);
  color: inherit;
}
a.fb-aside__item:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-1);
  text-decoration: none;
}

/* The adverse-event route is marked apart: it is the one item here that
   carries clinical weight, and sending a drug reaction to the wrong form is
   the failure this page cluster is arranged to prevent. */
.fb-aside__item--pv {
  border-inline-start: 3px solid var(--c-crit);
}
.fb-aside__item--pv .fb-aside__icon {
  background: rgba(168, 56, 42, 0.09);
  color: var(--c-crit);
}

.fb-aside__icon {
  inline-size: 34px;
  block-size: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--c-primary-soft);
  color: var(--c-primary-deep);
  flex: none;
}
.fb-aside__icon svg {
  inline-size: 17px;
  block-size: 17px;
}

.fb-aside__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-inline-size: 0;
}
.fb-aside__label {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-ink);
}
.fb-aside__text {
  font-size: var(--t-xs);
  line-height: var(--lh-body);
  color: var(--c-muted);
}
.fb-aside__arw {
  inline-size: 15px;
  block-size: 15px;
  color: var(--c-muted);
  align-self: center;
}

.fb-aside__direct {
  padding: var(--s-4);
  border: 1px dashed var(--c-line-strong);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.fb-aside__direct .fb-aside__label {
  margin-block-end: var(--s-1);
}
.fb-aside__chan {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-primary-deep);
  overflow-wrap: anywhere;
}
.fb-aside__chan svg {
  inline-size: 15px;
  block-size: 15px;
  flex: none;
}

.fb-kind {
  border: 0;
  padding: 0;
  margin: 0 0 var(--s-8);
}
.fb-kind__title {
  padding: 0;
  margin-block-end: var(--s-4);
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--c-ink);
}
.fb-kind__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.fb-kind__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  background: var(--c-surface);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur-1, 0.15s), background-color var(--dur-1, 0.15s),
              transform var(--dur-1, 0.15s);
}
.fb-kind__card:hover {
  border-color: var(--c-primary);
  transform: translateY(-2px);
}
/* The native radio stays in the DOM for keyboard and screen readers; the card
   is only its styling. Never replace it with a click handler. */
.fb-kind__card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.fb-kind__card:has(input:checked) {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
}
.fb-kind__card:has(input:focus-visible) {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.fb-kind__icon {
  inline-size: 42px;
  block-size: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-wash);
  color: var(--c-primary-deep);
}
.fb-kind__card:has(input:checked) .fb-kind__icon {
  background: #fff;
}
.fb-kind__icon svg {
  inline-size: 20px;
  block-size: 20px;
}
.fb-kind__label {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-ink);
}
.fb-kind.has-error .fb-kind__card {
  border-color: var(--c-crit);
}

.fb-form__title {
  margin: 0 0 var(--s-4);
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--c-ink);
}

/* The consent tick sits directly above the button it gates. */
.fb-terms {
  margin-block-start: var(--s-8);
}

.fb-anon {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-block: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border-radius: 10px;
  background: var(--c-wash);
  font-size: var(--t-xs);
  color: var(--c-body);
  line-height: var(--lh-snug);
}
.fb-anon__icon {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  color: var(--c-muted);
}

/* ======================================== /contact/pharmacovigilance ==== */

.pv-body {
  padding-block: var(--s-10) var(--sec-y);
}

/* ⚠️ Pinned above the form on purpose — someone here may be looking at a
   person who is unwell. Do not move it below the fold. */
.pv-urgent {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  margin-block-start: var(--s-8);
  padding: var(--s-5) var(--s-6);
  border: 1px solid rgba(168, 56, 42, 0.3);
  border-inline-start: 5px solid var(--c-crit);
  border-radius: 12px;
  background: rgba(168, 56, 42, 0.05);
}
.pv-urgent__mark {
  inline-size: 30px;
  block-size: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-crit);
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
.pv-urgent__title {
  display: block;
  color: var(--c-crit);
  margin-block-end: var(--s-2);
}
.pv-urgent__text {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--c-body);
}

/* .pv-form {
  max-inline-size: 940px;
} */

.pv-step {
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: var(--c-surface);
  padding: var(--s-6);
  margin: 0 0 var(--s-6);
}
.pv-step__legend {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-3);
  margin-inline-start: calc(var(--s-3) * -1);
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--c-ink);
}
.pv-step__n {
  inline-size: 30px;
  block-size: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 700;
  flex: none;
}
.pv-step__n svg {
  inline-size: 15px;
  block-size: 15px;
}
.pv-step__note {
  margin: var(--s-3) 0 var(--s-5);
  font-size: var(--t-xs);
  color: var(--c-muted);
}
.pv-step .form-grid {
  margin-block-start: var(--s-5);
}

.pv-files__input {
  inline-size: 100%;
  padding: var(--s-5);
  border: 2px dashed var(--c-line-strong);
  border-radius: 12px;
  background: var(--c-paper);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--c-body);
  cursor: pointer;
}
.pv-files__input:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.pv-files__list {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.pv-files__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-paper);
  font-size: var(--t-xs);
}
.pv-files__name {
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pv-files__size {
  color: var(--c-muted);
  flex: none;
}

.pv-privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
}
.pv-privacy__icon {
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  color: var(--c-muted);
}

/* ============================================================ responsive */

@media (max-width: 1000px) {
  /* The follow rail hangs outside the panel; below this there is no gutter
     left to hang it in, and the panel itself needs the width more. */
  .ct-follow,
  .ct-follow__list {
    display: none;
  }
  .ct-panel__grid {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
  /* Map above the form: it is the smaller commitment and orients the reader
     before the form asks anything. Source order stays form-first, which is the
     better tab order, so this is an `order` flip only. */
  .ct-map {
    order: -1;
    min-block-size: 300px;
  }
  .ct-map__frame,
  .ct-map__placeholder {
    min-block-size: 300px;
  }
  /* The aside stops being a sidebar and becomes a preamble — it routes people
     to the right form, so it must come BEFORE the form they might not need. */
  .fb-body__grid {
    grid-template-columns: 1fr;
  }
  /* Below this the drawing would be either tiny or taller than the title it
     decorates, and it carries no information — so it goes. */
  .fb-head__grid {
    grid-template-columns: 1fr;
  }
  .fb-head__art {
    display: none;
  }
  .fb-aside {
    position: static;
    order: -1;
  }
  .ct-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6) 0;
  }
  /* The hairline is per-column now, not per-cell: with two per row the third
     cell starts a new row and must not carry a divider on its inline-start. */
  .ct-strip__cell + .ct-strip__cell {
    border-inline-start: 0;
  }
  .ct-strip__cell:nth-child(2n) {
    border-inline-start: 1px solid var(--c-line);
  }
}

@media (max-width: 720px) {
    .fb-head__title,
  .pv-head__title {
    font-size: var(--t-xl);
  }
    .fb-head__lede,
  .pv-head__lede {
    font-size: var(--t-md);
  }
  /* One column: a 2-up grid at this width leaves both fields too narrow to
     read what you typed. */
  .form-grid {
    grid-template-columns: 1fr;
  }
  /* Three yes/no pills side by side do not survive a phone; stacked they still
     read as the set they are. */
  .form-row3 {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .pv-step {
    padding: var(--s-5) var(--s-4);
  }
  .form-foot {
    flex-direction: column;
    align-items: stretch;
  }
  .form-foot .btn {
    inline-size: 100%;
  }
  .ct-panel {
    border-radius: 14px;
  }
  /* A smaller offset: 20px of colour outside the map is a quarter of the
     panel's padding at this width, and it would break out of the card. */
  .ct-map__accent {
    inset-block: -12px 12px;
    inset-inline: 12px -12px;
  }
  .ct-title {
    font-size: var(--t-xl);
  }
  /* One channel per row, each with a rule above it — a 2-up strip at this
     width truncates the address to nothing. */
  .ct-strip {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ct-strip__cell {
    padding-inline: 0;
    padding-block: var(--s-4);
  }
  .ct-strip__cell + .ct-strip__cell,
  .ct-strip__cell:nth-child(2n) {
    border-inline-start: 0;
    border-block-start: 1px solid var(--c-line);
  }
}

@media (max-width: 520px) {
  /* Three cards side by side stop being readable; stacked they still work. */
  .fb-kind__grid {
    grid-template-columns: 1fr;
  }
  .fb-kind__card {
    flex-direction: row;
    justify-content: flex-start;
    text-align: start;
    padding: var(--s-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ct-other__card,
  .fb-kind__card,
  .fld__input {
    transition: none;
  }
  .ct-other__card:hover,
  .fb-kind__card:hover {
    transform: none;
  }
}

/* ---- justified body copy · centred blocks keep their centring ------------
   The `:where(p, blockquote, dd)` rule in hitco.css declares alignment ON the
   paragraph, and a direct declaration outranks the `text-align: center` these
   containers pass DOWN to it by inheritance. Re-inheriting restores them.
   Add a centred container that holds a paragraph and it belongs in this list. */
.form-ok :where(p, blockquote, dd),
.ct-map__placeholder :where(p, blockquote, dd),
.fb-kind__card :where(p, blockquote, dd) {
  text-align: inherit;
}