/* Clarity: forms group (request an appointment, refer a patient, network gap exception letters).
   Loaded only by pages whose META has "css": ["forms"]. Controls follow the system's crisp
   shape: 4px radius, 1px borders, 48px tall, focus shown with an outline so nothing shifts.
   Field borders use a darker grey than --line so the boundary of every control reaches 3:1. */

.page-form{
  --field-line:#7F8C95; --placeholder:#6B7880;
  --err:#A3302A; --err-ink:#7E241B; --err-tint:#FBEFEC; --err-line:#D9A79E;
  --gold:#B58A1B; --gold-tint:#F5E6BC;
}

/* ---------- page head ---------- */
.page-form .page-head h1{font-size:clamp(44px,5.4vw,80px);line-height:1}
.form-call{margin-top:16px;font-size:15.5px;line-height:1.45;color:var(--ink-2);max-width:50ch}
.form-call a,.form-call strong{color:var(--ink);font-weight:500;white-space:nowrap}

/* ---------- layout: form or letter left, aside right (columns line up with the page head) ---------- */
.form-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px clamp(40px,6vw,96px);align-items:start;padding-top:8px;padding-bottom:clamp(88px,9vw,128px)}
.form-layout > .form,.form-layout > .form-status,.form-layout > .nge-main{grid-column:1;grid-row:1}
.form-aside,.ref-info,.nge-aside{grid-column:2;grid-row:1}
.form-aside,.nge-aside{position:sticky;top:24px;display:flex;flex-direction:column;gap:24px}

/* ---------- form structure ---------- */
.form{min-width:0}
.field{min-width:0;margin:0;padding:0;border:0}
.form-key{font-size:15px;color:var(--ink-2)}
.form-key .req{margin:0}
.form-sec{margin-top:28px}
.form-sec + .form-sec{margin-top:48px;padding-top:40px;border-top:1px solid var(--line)}
.form-sec > h2{font-size:clamp(27px,2.3vw,32px);line-height:1.12}
.form-sec > * + *{margin-top:24px}
.form-sec > h2 + *{margin-top:28px}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px;align-items:start}

/* labels: above the field, ink, with the required mark in blue and "optional" in grey */
.field > label,.field > legend{display:block;padding:0 0 8px;font-size:15.5px;font-weight:500;line-height:1.35;color:var(--ink)}
.req{margin-left:2px;color:var(--blue);font-weight:600}
.opt{margin-left:6px;font-size:14px;font-weight:400;color:var(--ink-2)}
.hint{margin-top:8px;font-size:14.5px;line-height:1.45;color:var(--ink-2);max-width:64ch}
.hint-above{margin:0 0 12px}
.hint a{color:var(--ink);text-decoration-color:rgba(37,75,105,.45)}
.hint a:hover{color:var(--blue);text-decoration-color:currentColor}

/* text inputs, selects, textareas */
.field input:not([type="radio"]):not([type="file"]),.field select,.field textarea{
  display:block;width:100%;height:48px;margin:0;padding:0 14px;
  font-family:var(--sans);font-size:17px;line-height:1.4;color:var(--ink);
  background-color:var(--white);border:1px solid var(--field-line);border-radius:var(--r-ui);
  -webkit-appearance:none;appearance:none;transition:border-color .15s ease-out}
.field input[type="date"]{padding-right:10px}
.field input::-webkit-date-and-time-value{text-align:left}
.field textarea{height:auto;min-height:148px;padding:12px 14px;line-height:1.45;resize:vertical}
.field select{padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230D1B24' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
.field select:invalid{color:var(--ink-2)}
.field select:has(option[value=""]:checked){color:var(--ink-2)}
.field select option{color:var(--ink)}
.field ::placeholder{color:var(--placeholder);opacity:1}
.field input:not([type="radio"]):not([type="file"]):hover,.field select:hover,.field textarea:hover{border-color:var(--ink-2)}
.field input:not([type="radio"]):not([type="file"]):focus,.field select:focus,.field textarea:focus{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue)}

/* disabled */
.field input:disabled,.field select:disabled,.field textarea:disabled{background-color:var(--mist);border-color:var(--line);color:var(--ink-2);cursor:not-allowed}
.form-btn:disabled,.form-btn:disabled:hover{background:#6B7880;color:#fff;cursor:progress}

/* errors: a field the visitor has left invalid, or every invalid field after a submit attempt
   (site.js adds .form-tried). The browser's own message names the problem. */
.field input:not([type="radio"]):not([type="file"]):user-invalid,.field select:user-invalid,.field textarea:user-invalid{border-color:var(--err);background-color:var(--err-tint)}
.form-tried .field input:not([type="radio"]):not([type="file"]):invalid,.form-tried .field select:invalid,.form-tried .field textarea:invalid{border-color:var(--err);background-color:var(--err-tint)}
.form-tried .seg-opt input:invalid + span{border-color:var(--err);background-color:var(--err-tint)}
.form-tried .field:has(input:invalid) > legend,.form-tried .field:has(select:invalid) > label,.form-tried .field:has(> input:invalid) > label,.form-tried .field:has(> textarea:invalid) > label{color:var(--err)}

/* "Other, please specify" field that site.js adds under a select */
.field-other{margin-top:12px}
.field-other label{display:block;padding-bottom:6px;font-size:14.5px;color:var(--ink-2)}

/* ---------- segmented options (radio groups) ---------- */
.seg{display:flex;flex-wrap:wrap}
.seg-opt{position:relative;display:block;margin:0;cursor:pointer}
.seg-opt + .seg-opt{margin-left:-1px}
.seg-opt input{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg-opt span{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;padding:6px 20px;font-size:16px;line-height:1.25;text-align:center;color:var(--ink);background:var(--white);border:1px solid var(--field-line);transition:background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out}
.seg-opt:first-child span{border-radius:var(--r-ui) 0 0 var(--r-ui)}
.seg-opt:last-child span{border-radius:0 var(--r-ui) var(--r-ui) 0}
.seg-opt:hover span{z-index:1;border-color:var(--ink)}
.seg-opt input:checked + span{z-index:1;background:var(--ink);border-color:var(--ink);color:#fff}
.seg-opt input:focus-visible + span{z-index:1;outline:2px solid var(--blue);outline-offset:2px}
.seg-opt input:disabled + span{background:var(--mist);border-color:var(--line);color:var(--ink-2);cursor:not-allowed}

/* six options: a joined 3 x 2 grid (2 x 3 on phones) */
.seg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:1px 0 0 1px}
.seg-grid .seg-opt,.seg-grid .seg-opt + .seg-opt{margin:-1px 0 0 -1px}
.seg-grid .seg-opt span{border-radius:0}
.seg-grid .seg-opt:nth-child(1) span{border-top-left-radius:var(--r-ui)}
.seg-grid .seg-opt:nth-child(3) span{border-top-right-radius:var(--r-ui)}
.seg-grid .seg-opt:nth-child(4) span{border-bottom-left-radius:var(--r-ui)}
.seg-grid .seg-opt:nth-child(6) span{border-bottom-right-radius:var(--r-ui)}

/* ---------- attachments ---------- */
.drop{position:relative;display:flex;align-items:center;justify-content:center;min-height:96px;padding:20px 24px;text-align:center;background:var(--white);border:1px dashed var(--field-line);border-radius:var(--r-ui);transition:border-color .15s ease-out,background-color .15s ease-out}
.drop input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.drop:hover{border-color:var(--ink)}
.drop:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.drop-label{pointer-events:none;font-size:16px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.drop-label span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--field-line)}
.drop.is-filled{border-style:solid;border-color:var(--ink)}
.drop.is-filled .drop-label span,.drop.is-over .drop-label span{text-decoration:none}
.drop.is-over{border-style:solid;border-color:var(--err);background:var(--err-tint)}
.drop.is-over .drop-label{color:var(--err-ink)}

/* ---------- end of form: notes, consent, submit, status ---------- */
.form-end{margin-top:48px;padding-top:40px;border-top:1px solid var(--line)}
.form-note{background:var(--white);border-radius:var(--r-ui);padding:28px clamp(22px,3vw,32px)}
.form-note h2{margin-bottom:12px;font-size:24px;font-weight:400;line-height:1.2}
.form-note p{font-size:16px;line-height:1.45}
.form-note p + p{margin-top:12px}
.form-note strong{font-weight:600}
.form-note a{text-decoration-color:rgba(37,75,105,.45)}
.form-fine{margin-top:24px;font-size:14.5px;line-height:1.45;color:var(--ink-2);max-width:68ch}
.form-end > .form-fine:first-child{margin-top:0}
.form-fine p + p{margin-top:8px}
.form-btn{margin-top:28px;min-width:260px;padding:0 32px}
.form-status{margin-top:20px;border-radius:var(--r-ui);font-size:16px;line-height:1.45}
.form-status:empty{display:none}
.form-status.err{padding:16px 20px;background:var(--err-tint);border:1px solid var(--err-line);color:var(--err-ink)}
.form-status.ok{margin-top:0;padding:clamp(28px,4vw,48px);background:var(--white);font-size:18px;color:var(--ink)}
.form-status.ok strong{display:block;margin-bottom:12px;font-family:var(--serif);font-size:clamp(30px,2.8vw,40px);font-weight:300;line-height:1.08;letter-spacing:-0.015em}

/* ---------- honeypot: off screen, still fillable by bots ---------- */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- request page aside ---------- */
.form-aside .aside-block h3{margin-bottom:6px;font-size:21px;font-weight:400;line-height:1.25}
.form-aside .aside-phone{margin-top:12px;font-family:var(--serif);font-size:27px;line-height:1.2;color:var(--ink)}
.form-emergency{padding:20px 0 0;border-top:1px solid var(--ink);font-size:15.5px;line-height:1.45;color:var(--ink)}

/* ---------- referral page ---------- */
.ref-info{min-width:0}
.ref-info section + section{margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.ref-info h2{margin-bottom:10px;font-size:25px;font-weight:400;line-height:1.2}
.ref-info p{font-size:16.5px;line-height:1.45;max-width:66ch}
.ref-info a{text-decoration-color:rgba(37,75,105,.45)}
.ref-info a:hover{text-decoration-color:currentColor}
.form-layout-ref{padding-bottom:56px}
.ref-join{padding-bottom:clamp(88px,9vw,128px)}
.ref-join p{padding-top:24px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.ref-join a{color:var(--ink)}

/* ---------- network gap exception letters ---------- */
.nge-main{min-width:0}
.nge-aside .aside-block p{color:var(--ink)}
.nge-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.nge-actions .btn{flex:1 1 auto}
.nge-actions .btn[data-copy]{flex-basis:100%}
.btn-quiet{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-quiet:hover{background:var(--ink);color:#fff}
.btn-quiet:active{background:#091319;color:#fff}
.nge-tabs{display:flex;gap:0 32px;border-bottom:1px solid var(--line)}
.nge-tabs [role="tab"]{min-height:48px;margin:0 0 -1px;padding:12px 0;font-family:var(--sans);font-size:16px;font-weight:500;line-height:1.3;text-align:left;color:var(--ink-2);background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;transition:color .15s ease-out,border-color .15s ease-out}
.nge-tabs [role="tab"]:hover{color:var(--ink)}
.nge-tabs [role="tab"][aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.nge-tabs [role="tab"]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.nge-letter{margin-top:24px;padding:clamp(24px,4.5vw,56px);background:var(--white);border-radius:var(--r-ui);font-size:16.5px;line-height:1.45;color:var(--ink);overflow-wrap:break-word}
.nge-letter > * + *{margin-top:1em}
.nge-letter > .nge-gap,.nge-letter > .nge-re{margin-bottom:.6em}
.nge-letter > .nge-subhead{margin-top:1.6em}
.nge-letter > .nge-subhead + p{margin-top:.5em}
.nge-re,.nge-subhead{font-weight:600}
.nge-block{padding-left:16px;border-left:2px solid var(--line);font-size:.95em}
.nge-cc{font-size:.95em}
.nge-date{color:var(--ink-2)}
.nge-fill{padding:0 2px;background:var(--gold-tint);border-bottom:1px solid var(--gold);color:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.nge-note{margin-top:28px;font-size:14.5px;line-height:1.45;color:var(--ink-2);max-width:70ch}
.nge-note a{color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .form-layout{grid-template-columns:minmax(0,1fr)}
  .form-layout > .form,.form-layout > .form-status,.form-layout > .nge-main,.form-aside,.ref-info,.nge-aside{grid-column:1;grid-row:auto}
  .form-aside,.nge-aside{position:static}
  .form-layout-ref .ref-info{padding-bottom:40px;border-bottom:1px solid var(--ink)}
}
@media (max-width:760px){
  .page-form .page-head h1{font-size:46px}
}
@media (max-width:640px){
  .form-row{grid-template-columns:minmax(0,1fr)}
  .seg-col{flex-direction:column}
  .seg-col .seg-opt + .seg-opt{margin-left:0;margin-top:-1px}
  .seg-col .seg-opt span{justify-content:flex-start;padding:6px 16px;text-align:left}
  .seg-col .seg-opt:first-child span{border-radius:var(--r-ui) var(--r-ui) 0 0}
  .seg-col .seg-opt:last-child span{border-radius:0 0 var(--r-ui) var(--r-ui)}
  .seg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seg-grid .seg-opt span,.seg-grid .seg-opt:nth-child(n) span{border-radius:0}
  .seg-grid .seg-opt:nth-child(1) span{border-top-left-radius:var(--r-ui)}
  .seg-grid .seg-opt:nth-child(2) span{border-top-right-radius:var(--r-ui)}
  .seg-grid .seg-opt:nth-child(5) span{border-bottom-left-radius:var(--r-ui)}
  .seg-grid .seg-opt:nth-child(6) span{border-bottom-right-radius:var(--r-ui)}
  .form-btn{width:100%;min-width:0}
  .form-note{padding:24px 20px}
  .nge-tabs{gap:0 20px}
  .nge-tabs [role="tab"]{flex:1 1 0;font-size:15px}
  .nge-letter{font-size:16px}
}

/* ---------- print: the letter alone ---------- */
@media print{
  .page-form .site-foot,.page-form .skip,.no-print{display:none!important}
  .page-form .form-layout{display:block;padding:0}
  .nge-letter{margin:0;padding:0;border-radius:0;font-size:11.5pt;line-height:1.4}
  .nge-fill{background:none;border-bottom:1px solid #000}
}