/* ==========================================================================
   SUBMIT A PROTOCOL — /submit-a-protocol and its confirmation page
   ==========================================================================

   The v6 design system has no form controls. Grepping home-v6.css and
   pages-v6.css for `input`, `textarea`, `select` returns nothing: every v6 page
   built so far ends in a mailto: button, so nobody had to draw a field yet. The
   older style.css does have `.field` / `.form-card`, but it belongs to the
   pre-v6 system and disagrees with v6 on --ink, --line and --maxw, so reusing
   its classes here would pull a second token set onto a v6 page.

   So these are new, drawn against Pia's tokens only: --hv-o for focus and
   accent, --hv-ink-2 for entered text, --hv-line for rest borders, Inter for
   controls and Inter Tight for headings. Everything is scoped under .pr6.

   NO HERO on either page. A sponsor who clicked "Submit a Protocol" has already
   decided; a full-height pitch above the form makes them scroll past an
   argument they accepted (client, 2026-09-05).
   ========================================================================== */

.pr6 { --pr6-gap: clamp(16px, 1.7vw, 22px) }

/* A tinted ground so the white cards read as sheets on a surface rather than
   as the page itself — the only structure the layout needs now the hero is gone. */
.pr6-page { background: var(--hv-paper-2); padding-block: clamp(28px, 3.4vw, 52px) clamp(48px, 6vw, 90px) }

/* --- Page head ------------------------------------------------------------ */
.pr6-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: clamp(20px, 2.2vw, 30px) }
.pr6-title { font-family: var(--hv-display); font-weight: 700; font-size: clamp(1.7rem, 2.8vw, 2.3rem); letter-spacing: -.035em; line-height: 1.05; color: var(--hv-ink) }
.pr6-sub { margin-top: 9px; max-width: 62ch; font-size: 15.2px; line-height: 1.6; color: var(--hv-body) }
.pr6-sub--tight { margin-top: 6px; font-size: 14px }
.pr6-sub a { color: var(--hv-o-ink); text-decoration: underline; text-underline-offset: 2px }
.pr6-sub strong { color: var(--hv-ink-2); font-weight: 600 }
/* Booked confirmation: the date and length sit between the title and the copy. */
.pr6-when { margin-top: 12px; font-family: var(--hv-display); font-weight: 700; font-size: clamp(1.1rem, 1.5vw, 1.3rem); letter-spacing: -.02em; line-height: 1.3; color: var(--hv-ink-2) }
.pr6-when__local { display: block; margin-top: 4px; font-family: var(--hv-sans); font-weight: 500; font-size: 14px; letter-spacing: 0; color: var(--hv-body) }
.pr6-when__len { margin-top: 4px; font-size: 15.2px; font-weight: 600; color: var(--hv-o-ink) }
.pr6-when + .pr6-when__len + .pr6-sub { margin-top: 14px }

/* The "rather talk now" affordance sits level with the title, not under the
   form, so someone who never wanted to type sees it first. */
.pr6-callnow { display: flex; flex-direction: column; gap: 1px; text-decoration: none; padding: 9px 16px; border-radius: 11px; border: 1.5px solid var(--hv-line-2); background: #fff; transition: border-color .18s var(--hv-ease) }
.pr6-callnow:hover { border-color: var(--hv-o) }
.pr6-callnow__l { font-family: var(--hv-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: #97A3BA }
.pr6-callnow__n { font-family: var(--hv-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; color: var(--hv-ink) }
.pr6-callnow:hover .pr6-callnow__n { color: var(--hv-o) }

/* --- Cards ---------------------------------------------------------------- */
.pr6-card {
  background: #fff; border: 1px solid var(--hv-line); border-radius: 18px;
  padding: clamp(22px, 2.4vw, 34px);
  box-shadow: 0 22px 54px -46px rgba(11, 27, 58, .5);
}

/* Numbered rules between the form's two halves — cheap, legible sectioning
   that does not cost a second card. */
.pr6-sect { display: flex; align-items: center; gap: 12px; margin: 0 0 18px }
.pr6-sect + .pr6-fields { margin-top: 0 }
.pr6-fields + .pr6-sect { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--hv-line) }
.pr6-sect__n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--hv-o); color: #fff; font-family: var(--hv-display); font-weight: 700; font-size: 13.5px }
.pr6-sect__t { font-family: var(--hv-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.025em; color: var(--hv-ink) }

/* --- Fields --------------------------------------------------------------- */
.pr6-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pr6-gap) }
.pr6-field--full { grid-column: 1 / -1 }
.pr6-field { display: flex; flex-direction: column; gap: 6px; min-width: 0 }

.pr6-field label {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--hv-sans); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #5B6E93;
}
.pr6-opt { font-weight: 500; letter-spacing: .02em; text-transform: none; color: #A0AABC; font-size: 11.5px }
.pr6-hint { font-size: 12.5px; color: var(--hv-body-2) }

.pr6-field input,
.pr6-field select,
.pr6-field textarea {
  width: 100%; box-sizing: border-box;
  font-family: var(--hv-sans); font-size: 15.4px; line-height: 1.45; color: var(--hv-ink-2);
  background: #fff; border: 1.5px solid var(--hv-line); border-radius: 10px;
  padding: 12px 14px;
  transition: border-color .18s var(--hv-ease), box-shadow .18s var(--hv-ease);
  -webkit-appearance: none; appearance: none;
}
.pr6-field textarea { min-height: 92px; resize: vertical }

/* Caret drawn rather than native so the control matches the text inputs in
   every browser; appearance:none above removes the platform one. */
.pr6-field select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6E93' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 17px;
}
.pr6-field input::placeholder, .pr6-field textarea::placeholder { color: #AEB7C7 }
.pr6-field input:hover, .pr6-field select:hover, .pr6-field textarea:hover { border-color: var(--hv-line-2) }
.pr6-field input:focus, .pr6-field select:focus, .pr6-field textarea:focus {
  outline: none; border-color: var(--hv-o); box-shadow: 0 0 0 3px rgba(255, 106, 0, .16);
}

/* Error carries a colour AND a message, never colour alone. */
.pr6-field--err input, .pr6-field--err select, .pr6-field--err textarea { border-color: #C2410C; background: #FFF8F4 }
.pr6-field--err input:focus, .pr6-field--err select:focus, .pr6-field--err textarea:focus { box-shadow: 0 0 0 3px rgba(194, 65, 12, .15) }
.pr6-err { font-size: 12.8px; line-height: 1.45; color: #C2410C }

/* --- File input ----------------------------------------------------------- */
/* The native control cannot be styled, so it is visually hidden behind a label
   that is styled instead. The input keeps its real size and focus behaviour, so
   keyboard and screen-reader users get the standard control. */
.pr6-file input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.pr6-drop {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  padding: 15px 16px; border: 1.5px dashed var(--hv-line-2); border-radius: 11px;
  background: var(--hv-paper-3); transition: border-color .18s var(--hv-ease), background .18s var(--hv-ease);
}
.pr6-drop:hover { border-color: var(--hv-o); background: var(--hv-o-soft) }
.pr6-file input[type="file"]:focus-visible + .pr6-drop { border-color: var(--hv-o); box-shadow: 0 0 0 3px rgba(255, 106, 0, .16) }
.pr6-drop svg { flex: none; width: 24px; height: 24px; color: var(--hv-o) }
.pr6-drop__t { font-size: 14.4px; font-weight: 600; color: var(--hv-ink-2) }
.pr6-drop__s { display: block; margin-top: 2px; font-size: 12.6px; font-weight: 400; color: var(--hv-body) }

/* --- Consent + submit ----------------------------------------------------- */
.pr6-consent { display: flex; align-items: flex-start; gap: 11px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hv-line); font-size: 13.6px; line-height: 1.55; color: var(--hv-body) }
.pr6-consent input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--hv-o) }
.pr6-consent a { color: var(--hv-o-ink); text-decoration: underline; text-underline-offset: 2px }
.pr6-submit { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px }
.pr6-submit .hv6-btn { padding-inline: 28px }
.pr6-note { font-size: 12.8px; color: var(--hv-body-2) }

/* Off-screen rather than display:none — some bots skip hidden fields but
   happily fill a positioned one. */
.pr6-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

/* --- Confirmation page ---------------------------------------------------- */
.pr6-done { display: flex; align-items: flex-start; gap: 16px; margin-bottom: clamp(20px, 2.4vw, 32px) }
.pr6-done__tick { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--hv-o-soft); border: 1.5px solid var(--hv-o); color: var(--hv-o) }
.pr6-done__tick svg { width: 22px; height: 22px }

.pr6-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(18px, 2vw, 28px); align-items: start }
.pr6-card--call { display: flex; flex-direction: column }
.pr6-card--call .pr6-call__n { font-family: var(--hv-display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.035em; color: var(--hv-ink); text-decoration: none; margin-top: 2px }
.pr6-card--call .pr6-call__n:hover { color: var(--hv-o) }
.pr6-card--call .pr6-book { margin-top: auto }

.pr6-card--booked { display: flex; align-items: flex-start; gap: 16px }
.pr6-booked__when { margin-top: 6px; font-family: var(--hv-display); font-weight: 700; font-size: 1.16rem; letter-spacing: -.025em; color: var(--hv-o-ink) }

.pr6-book { margin-top: 20px; width: 100%; justify-content: center }
.pr6-book:disabled { opacity: .45; pointer-events: none }

/* --- Booking picker ------------------------------------------------------- */
.pr6-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 14px }
.pr6-cal__month { font-family: var(--hv-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; color: var(--hv-ink) }
.pr6-cal__nav { display: flex; gap: 6px }
.pr6-cal__nav button {
  display: grid; place-items: center; width: 32px; height: 32px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--hv-line); border-radius: 9px; color: var(--hv-ink-2);
  transition: border-color .18s var(--hv-ease), color .18s var(--hv-ease);
}
.pr6-cal__nav button:hover { border-color: var(--hv-o); color: var(--hv-o) }
.pr6-cal__nav svg { width: 15px; height: 15px }

.pr6-dow, .pr6-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px }
.pr6-dow { margin-bottom: 6px }
.pr6-dow span { text-align: center; font-family: var(--hv-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #A0AABC }

.pr6-day {
  aspect-ratio: 1; display: grid; place-items: center; padding: 0;
  font-family: var(--hv-sans); font-size: 13.6px; font-weight: 600;
  background: #fff; border: 1.5px solid transparent; border-radius: 9px;
  color: var(--hv-ink-2); cursor: pointer;
  transition: background .16s var(--hv-ease), border-color .16s var(--hv-ease), color .16s var(--hv-ease);
}
.pr6-day--pad { visibility: hidden }
.pr6-day--off { color: #C7CEDB; cursor: default; background: transparent }
.pr6-day--free { border-color: var(--hv-o-line); color: var(--hv-o-ink) }
.pr6-day--free:hover { background: var(--hv-o-soft); border-color: var(--hv-o) }
.pr6-day--on { background: var(--hv-o); border-color: var(--hv-o); color: #fff }
.pr6-day:focus-visible { outline: 2px solid var(--hv-o); outline-offset: 2px }

.pr6-slots { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hv-line) }
.pr6-slots__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px }
.pr6-slots__d { font-family: var(--hv-display); font-weight: 700; font-size: 14.8px; letter-spacing: -.02em; color: var(--hv-ink) }
.pr6-slots__tz { font-family: var(--hv-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--hv-body-2); text-align: right }
.pr6-slots__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px }
.pr6-slot {
  padding: 11px 8px; cursor: pointer;
  font-family: var(--hv-sans); font-size: 13.8px; font-weight: 600; color: var(--hv-ink-2);
  background: #fff; border: 1.5px solid var(--hv-line); border-radius: 9px;
  transition: border-color .16s var(--hv-ease), background .16s var(--hv-ease), color .16s var(--hv-ease);
}
.pr6-slot:hover { border-color: var(--hv-o); color: var(--hv-o-ink) }
.pr6-slot--on { background: var(--hv-o); border-color: var(--hv-o); color: #fff }
.pr6-slot:focus-visible { outline: 2px solid var(--hv-o); outline-offset: 2px }
.pr6-slots__empty, .pr6-slots__load { font-size: 13.6px; line-height: 1.6; color: var(--hv-body) }

.pr6-chosen { display: none; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 13px 15px; border-radius: 11px; background: var(--hv-o-soft); border: 1px solid var(--hv-o-line) }
.pr6-chosen.is-on { display: flex }
.pr6-chosen svg { flex: none; width: 18px; height: 18px; color: var(--hv-o); margin-top: 1px }
.pr6-chosen__t { font-size: 14px; line-height: 1.5; color: var(--hv-ink-2) }
.pr6-chosen button { display: block; margin-top: 3px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 12.8px; color: var(--hv-o-ink); text-decoration: underline; text-underline-offset: 2px }

/* --- Flash ---------------------------------------------------------------- */
.pr6-flash { display: flex; gap: 12px; margin-bottom: 22px; padding: 15px 17px; border-radius: 12px; border: 1px solid #C2410C; background: #FFF8F4 }
.pr6-flash svg { flex: none; width: 19px; height: 19px; color: #C2410C; margin-top: 1px }
.pr6-flash p { font-size: 14px; line-height: 1.55; color: #7C2D12 }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .pr6-split { grid-template-columns: minmax(0, 1fr) }
  .pr6-card--call .pr6-book { margin-top: 18px }
}

@media (max-width: 620px) {
  .pr6-fields { grid-template-columns: minmax(0, 1fr) }
  .pr6-top { align-items: flex-start }
  .pr6-callnow { width: 100% }
  .pr6-slots__list { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)) }
  .pr6-slots__h { flex-direction: column; gap: 3px }
  .pr6-slots__tz { text-align: left }
}

@media (prefers-reduced-motion: reduce) {
  .pr6-day, .pr6-slot, .pr6-drop, .pr6-callnow,
  .pr6-field input, .pr6-field select, .pr6-field textarea { transition: none }
}

/* --- 2026-09-07 additions -------------------------------------------------- */
/* Section 1 is entirely optional now; one tag on the heading replaces six on
   the fields. */
.pr6-sect__opt { margin-left: 10px; font-family: var(--hv-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #A0AABC; vertical-align: 2px }
/* The top-right affordance now points at the calendar; give its label room
   for an arrow. */
.pr6-callnow__n { display: inline-flex; align-items: center; gap: 6px }
.pr6-callnow__n svg { width: 15px; height: 15px; color: var(--hv-o) }
/* The standalone schedule page carries a short contact strip above the
   calendar; it reuses the field styles and just needs its own spacing. */
.pr6-who { margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--hv-line) }
.pr6-who .pr6-fields { gap: 14px }
.pr6-who .pr6-consent { margin-top: 14px; padding-top: 0; border-top: 0 }

/* One calendar card, centred; the side call card is gone now the number sits
   top-right level with the title. */
.pr6-card--cal { max-width: 760px; margin-inline: auto }

/* ReEngage inquiry (2026-09-08): the follow-up-need choices and the required
   privacy warning that sits directly above the free-text field. */
fieldset.pr6-field { margin: 0; padding: 0; border: 0; min-width: 0 }
.pr6-field .pr6-legend { display: block; padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5B6E93 }
.pr6-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-top: 2px }
/* The option rows are labels too, so undo the field-label uppercase for them. */
.pr6-field label.pr6-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--hv-line); border-radius: 10px; background: #fff; font-size: 14.6px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.45; color: var(--hv-ink-2); cursor: pointer }
.pr6-check:hover { border-color: var(--hv-line-2) }
.pr6-check:has(input:checked) { border-color: var(--hv-o); background: #FFF9F4 }
.pr6-check:has(input:focus-visible) { outline: 2px solid var(--hv-o); outline-offset: 1px }
.pr6-check input { flex: none; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--hv-o) }
.pr6-warn { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid #FBD9BF; border-radius: 10px; background: #FFF6EE; font-size: 13.6px; line-height: 1.5; color: #7A3B0A }
.pr6-warn svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--hv-o-ink) }
@media (max-width: 760px) { .pr6-checks { grid-template-columns: minmax(0, 1fr) } }

/* ---- 2026-09-09 editorial audit ---------------------------------------- */
/* Screen-reader-only text: the weekday row shows Mon–Sun and reads Monday–Sunday. */
.pr6-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 }
/* The service the visitor arrived with, under the study form's opening line. */
.pr6-svc { display: block; margin-top: 8px; font-size: 13.5px; color: var(--hv-o-ink, #B84A00) }
/* A phase select beside text inputs: same box as .pr6-field input. */
.pr6-field select { width: 100%; font: inherit; color: var(--hv-ink); background: #fff; border: 1px solid var(--hv-line); border-radius: 10px; padding: 11px 12px }