/* ============================================================
   Eclosion Health — reservation request form and patient intake
   Loaded only on reserve.html and intake.html. Uses the tokens from site.css;
   the one addition is an error colour readable on the dark canvas.
   ============================================================ */
:root{--error:#F0A8A8}

/* the form reads best as a single column of comfortable width */
.reservecol.rnarrow{max-width:780px}
/* site.css removes the side padding on phones so the old Charm iframe could run edge to edge;
   a form needs the normal page margin back */
@media (max-width:600px){
  .reservesec{padding-left:var(--pad);padding-right:var(--pad)}
  .reservesec .finenote{padding-left:0;padding-right:0}
}

.rform{margin-top:clamp(20px,3vw,36px)}

/* ---------- sections ---------- */
.rset{border:0;margin:0;padding:clamp(46px,5.5vw,64px) 0 12px;border-top:1px solid var(--hairline);min-width:0}
.rset:first-of-type{margin-top:22px}
.rset legend{float:left;width:100%;padding:0;margin:0 0 clamp(28px,3.4vw,38px);
  font-family:var(--display);font-weight:300;font-size:clamp(24px,2.6vw,32px);line-height:1.15;
  letter-spacing:-.012em;color:var(--text-primary)}
.rset legend + *{clear:left}
.rnum{display:block;font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.12em;color:var(--accent);
  margin-bottom:12px}

/* ---------- fields ---------- */
.rfield{margin:0 0 32px;min-width:0}
/* short answers such as a ZIP code read better without a full-width box */
.rfield.rshort{max-width:260px}
.rgrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
@media (max-width:640px){.rgrid2{grid-template-columns:1fr}}

/* field labels: large, medium-weight and bright so each question is easy to find */
.rform label:not(.rchip):not(.rcheck),.rlabel{display:block;margin:0 0 12px;
  font-family:var(--body);font-size:18px;font-weight:500;letter-spacing:0;
  color:var(--text-primary);line-height:1.4}
/* "Optional" reads as a quiet note in the same face, not a label in a third one */
.ropt{font-family:var(--body);font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--text-secondary);margin-left:8px;white-space:nowrap}
.rhint{margin:-4px 0 14px;font-size:15.5px;line-height:1.6;color:var(--text-secondary)}

.rform input[type=text],.rform input[type=email],.rform input[type=tel],
.rform input[type=date],.rform select,.rform textarea{
  display:block;width:100%;min-height:54px;margin:0;padding:14px 16px;
  font-family:var(--body);font-size:18px;line-height:1.4;color:var(--text-primary);
  background:var(--panel);border:1px solid var(--hairline);border-radius:2px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
  -webkit-appearance:none;appearance:none}
.rform textarea{min-height:140px;resize:vertical}
.rform input[type=date]{color-scheme:dark}
.rform select{color-scheme:dark;padding-right:42px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--line-strong) 50%),
                   linear-gradient(135deg,var(--line-strong) 50%,transparent 50%);
  background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%;
  background-size:6px 6px;background-repeat:no-repeat}
.rform input::placeholder,.rform textarea::placeholder{color:var(--line-strong)}
.rform input:hover,.rform select:hover,.rform textarea:hover{border-color:var(--line-strong)}
.rform input:focus,.rform select:focus,.rform textarea:focus{outline:none;border-color:var(--accent);background:var(--panel-2)}
.rform input:focus-visible,.rform select:focus-visible,.rform textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
/* a locked box (the intake's family history while "Noncontributory" is ticked) must not look writable */
.rform textarea:disabled{opacity:.5;cursor:not-allowed}
.rform textarea:disabled:hover{border-color:var(--hairline)}

.rcount{margin:8px 0 0;text-align:right;font-family:var(--body);font-size:13px;letter-spacing:.02em;color:var(--line-strong)}

/* ---------- chip choices (radio and checkbox) ---------- */
.rchips{display:flex;flex-wrap:wrap;gap:10px 12px}
.rchip{position:relative;display:inline-flex;cursor:pointer}
.rchip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.rchip span{display:inline-flex;align-items:center;min-height:48px;padding:11px 18px;
  font-size:17px;line-height:1.3;color:var(--text-body);
  border:1px solid var(--hairline);border-radius:2px;background:transparent;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.rchip:hover span{border-color:var(--line-strong);color:var(--text-primary)}
.rchip input:checked + span{border-color:var(--accent);background:var(--accent-muted);color:var(--text-primary)}
.rchip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- acknowledgement checkboxes ---------- */
.rcheck{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;cursor:pointer;
  font-size:17px;line-height:1.6;color:var(--text-body)}
.rcheck input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--accent);cursor:pointer}
/* Archivo is loaded at 400 and 500 only, so emphasis uses 500 instead of a bold the browser fakes */
.rform strong{font-weight:500;color:var(--text-primary)}

/* ---------- errors ---------- */
.rerr{margin:9px 0 0;font-size:15px;line-height:1.5;color:var(--error)}
.rform [aria-invalid=true]{border-color:var(--error)}
.rfield.rbad .rchip span{border-color:rgba(240,168,168,.55)}

/* ---------- spam trap: off-screen, never focusable ---------- */
.rtrap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- submit ---------- */
.rsubmit{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:12px}
.rsubmit .btn{min-height:54px;padding:17px 34px}
.rsubmit .btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.rnext{margin:0;max-width:40ch;font-size:15px;line-height:1.55;color:var(--text-secondary)}
@media (max-width:640px){.rsubmit .btn{width:100%}}

.rstatus{margin:26px 0 0;padding:18px 20px;border:1px solid rgba(240,168,168,.45);border-radius:2px;
  font-size:16px;line-height:1.6;color:var(--text-primary);background:rgba(240,168,168,.06)}
.rstatus a,.rnotice a,.rdone a:not(.btn){color:var(--accent)}

.rnotice{padding:18px 20px;border:1px solid var(--hairline);border-radius:2px;margin-top:20px;
  color:var(--text-body);font-size:16px}
.rnotice p{margin:0}

/* ---------- confirmation ---------- */
.rdone{margin-top:clamp(20px,3vw,36px);padding:clamp(30px,4vw,44px) 0;border-top:1px solid var(--hairline)}
.rdone h2{max-width:none;font-size:clamp(28px,3.4vw,42px)}
.rdone h2:focus{outline:none}
/* scrolled to on sending, a thank-you stops below the fixed bar (as sign.css), not under it */
.rdone{scroll-margin-top:96px}
/* once an intake is sent, its thank-you takes the place of the page header (hidden then): it starts where the
   header's text did, under the fixed bar, and its title is the page's heading, drawn as the h2 above */
.reservehead[hidden] + main #idone{margin-top:0;padding-top:clamp(112px,13vh,152px);border-top:0}
#idone h1{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(28px,3.4vw,42px);line-height:1.06;
  letter-spacing:-.019em}
#idone h1:focus{outline:none}
.rref{margin:22px 0 0;font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary)}
/* a reference stays in one piece, never split across two lines */
.rref span{color:var(--text-primary);white-space:nowrap}

/* ---------- save our contact ---------- */
.rcontact{margin:clamp(30px,4vw,44px) 0 0;padding:clamp(24px,3vw,34px);
  border:1px solid var(--hairline);border-radius:2px;background:var(--panel)}
.rcontact h3{font-family:var(--display);font-weight:400;font-size:clamp(21px,2vw,25px);letter-spacing:-.008em;margin:0}
.rcontact-why{margin:6px 0 20px;font-size:15.5px;line-height:1.55;color:var(--text-secondary)}
.rcontact .contactline{margin:0 0 4px;align-items:center}
.rcontact .contactline a{display:inline-flex;align-items:center;min-height:44px}
/* the one thing to do on this screen: a little larger than the form's own buttons (54px, 14px text) */
.rcontact .rsave{margin-top:16px;min-height:58px;padding:18px 38px;font-size:15px}
@media (max-width:640px){.rsave{width:100%}}

/* the QR is for computers: a phone cannot scan its own screen, so touch devices never see it */
.rqr{display:none;margin:0;max-width:220px}
.rqr img{display:block;width:220px;height:220px;border-radius:4px}
.rqr figcaption{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--text-secondary)}
@media (hover:hover) and (pointer:fine) and (min-width:640px){
  .rcontact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4vw,52px);align-items:center}
  .rqr{display:block}
}

/* ---------- intake additions ---------- */
.rform textarea.rsmall{min-height:96px}
.rhint-inline{display:block;margin-top:4px;font-size:15.5px;font-weight:400;line-height:1.55;color:var(--text-secondary)}
/* follow-up boxes ("If yes: ...") read as part of the question above them */
.rsub{margin-top:-8px}
.rfield .rsub{margin-top:16px}
.rform .rsub label:not(.rchip):not(.rcheck){font-size:16.5px;font-weight:400;color:var(--text-body)}
.rurgent{margin:16px 0 0;padding:16px 18px;border:1px solid rgba(240,168,168,.6);border-radius:2px;
  background:rgba(240,168,168,.08);color:var(--text-primary);font-size:16px;line-height:1.6}
.rdone .reservelead a{color:var(--accent)}
.rpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rhint.rafter{margin:-18px 0 32px}
/* long answers (the intake's question 14) read as a list: one per line, each the full width of the column, rather
   than chips wrapped into uneven rows */
.rchips.rlist{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.rlist .rchip{display:flex}
.rlist .rchip span{flex:1 1 auto;min-width:0}

/* the intake is long: questions sit 44px apart, and each follow-up box hangs 16px under its own
   question with a rule on its left, so it cannot be read as the start of the next one */
#iform .rset > .rfield{margin-bottom:44px}
/* the fields inside keep 32px, so a pair of fields also ends 44px above the next question;
   the name pair sits in #inames so it can be hidden, and its margin passes through that wrapper */
#iform .rset > .rgrid2,#iform #inames > .rgrid2{margin-bottom:12px}
/* collapses with the 44px above it: 44 - 28 = 16px */
#iform .rset > .rfield.rsub{margin-top:-28px}
#iform .rsub{padding-left:18px;border-left:2px solid var(--hairline)}
/* 32 + 12 - 30 = 14px under the fields it explains */
#iform .rhint.rafter{margin:-30px 0 44px}
/* a follow-up hidden until its answer is chosen takes no space at all */
#iform [hidden]{display:none}

/* the page-level fine print sits a little further from the form */
.reservesec > .reservecol > .finenote:first-of-type{margin-top:42px}
.reservesec .finenote a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--accent-muted)}