/* Never Too Far -- Become a partner page, ticket T07.
   Operator decision D7: a PLAIN PRACTICAL FORM, every field visible at once,
   not a postcard -- the reference is his own current site's form (small
   upper-case sans labels, tall softly filled inputs with a hairline border,
   six availability choices as large square tick boxes in two columns, a big
   textarea, a consent tick line). This sheet renders that shape in this
   site's own tokens: paper ground/grain from body::before in site.css, no
   markup needed here; the .btn tape button and its focus ring are reused
   unmodified from site.css. Heading rhythm (padding, h1 treatment) is
   mirrored from css/faq.css -- T08's own sibling utility page -- so the two
   pages read as siblings, per the ticket. site.css itself is never edited or
   linked-into by this file; only its already-loaded custom properties
   (--serif/--sans/--hand, --ink/--verm/--indigo/--raised/--paper) are reused.

   Operator decision D1: the phone input renders in --sans so its digits read
   clearly; every other label is --sans; every other typed answer is --serif;
   --hand (the postcard voice) appears NOWHERE on this page -- grepped, not
   referenced anywhere below. */

main.partner{max-width:640px;margin:0 auto;
  padding:clamp(120px,18vh,168px) clamp(20px,5vw,60px) clamp(90px,14vh,150px)}
@media(max-width:640px){
  main.partner{padding-top:clamp(96px,16vh,140px)}
}

/* heading rhythm mirrors main.faq h1 (css/faq.css) so the two utility pages
   read as siblings, per the ticket's own instruction. */
main.partner h1{font-weight:300;font-size:clamp(30px,4.4vw,54px);line-height:1.14;
  margin:0 0 clamp(22px,3.2vh,30px);text-align:center;text-wrap:balance}

main.partner .intro{font-family:var(--serif);font-weight:400;color:#3b3934;
  font-size:clamp(16px,1.6vw,19px);line-height:1.74;text-align:center;text-wrap:balance;
  max-width:46em;margin:0 auto clamp(44px,6.5vh,60px)}

/* ── no-JS notice: visible only when scripting is unavailable, native
   <noscript>, no class toggling needed. Sans, a quiet vermillion frame --
   the same accent token every other alert-adjacent surface on this site
   already uses (site.css .meta-chip, faq.css's link underline), not a new
   colour. ── */
.noscript-note{font-family:var(--sans);font-size:13px;line-height:1.6;color:#5b2018;
  background:rgba(198,58,43,.08);border:1px solid rgba(198,58,43,.32);border-radius:4px;
  padding:14px 16px;margin:0 0 clamp(28px,4vh,36px);text-align:center}

/* ── the one status region: unconfigured / success / validation-failure /
   server-failure / rate-limit / loading / a field-error echo, one child
   visible at a time (js/partner.js toggles `hidden`), aria-live="polite" +
   role="status" declared once in the HTML so every one of those messages,
   and the validation-error announcement, shares the SAME single live
   region -- never a second one. Styled as a plain quiet panel, no drama;
   the state IS the message, not a colour. ── */
.form-status{margin:0 0 clamp(26px,4vh,34px);padding:18px 20px;border-radius:4px;
  border:1px solid rgba(43,42,38,.2);background:var(--raised)}
.form-status h2{font-family:var(--serif);font-weight:400;font-size:clamp(18px,2vw,22px);
  line-height:1.3;margin:0 0 8px;color:var(--ink)}
.form-status p{font-family:var(--serif);font-size:15px;line-height:1.68;color:#3b3934;margin:0}

/* ── the form itself: one column, every field visible at once (D7) ── */
.partner-form{display:block}
.partner-form .field{margin:0 0 clamp(24px,3.4vh,32px)}

/* small upper-case sans labels, per the operator's own reference. legend
   shares the exact same treatment as label so the fieldset heading reads
   as one more field label, not a different kind of text. Scoped to
   .field-label rather than the bare `label` element on purpose: the
   availability and consent rows are ALSO <label> elements (they wrap a
   checkbox so the whole row is one click/tap target), and a bare `label`
   type selector here would outrank .avail-item/.consent-label on
   specificity (class+type beats class alone) and silently collapse their
   own flex layout -- caught in QA (a zoomed screenshot showed the tick
   boxes missing entirely) and fixed by scoping instead of reaching for
   `!important`. */
.partner-form .field-label,.partner-form legend{display:block;font-family:var(--sans);
  font-weight:500;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);margin:0 0 10px;padding:0}
.partner-form legend{width:100%}

/* tall, softly filled inputs with a hairline border -- the operator's own
   words. --raised (pure white) at partial opacity over the page's own paper
   grain reads as "softly filled" rather than a hard white card; the hairline
   is a low-alpha ink border, same colour family as every quiet keyline this
   site already uses (faq.css's item rule, site.css's footer/veil hairlines). */
.partner-form input[type="text"],.partner-form input[type="email"],
.partner-form input[type="tel"],.partner-form textarea{
  display:block;width:100%;min-height:52px;
  font-family:var(--serif);font-weight:400;font-size:16px;color:var(--ink);
  background:rgba(255,255,255,.55);border:1px solid rgba(43,42,38,.24);border-radius:5px;
  padding:14px 16px;margin:0;outline:none}
/* D1: the phone field's digits render in the sans face. */
.partner-form input.sans-field{font-family:var(--sans);letter-spacing:.02em}
.partner-form input::placeholder,.partner-form textarea::placeholder{
  color:rgba(43,42,38,.46);font-style:italic;font-family:var(--serif)}
.partner-form input.sans-field::placeholder{font-family:var(--sans);font-style:normal}
.partner-form textarea{min-height:168px;line-height:1.65;resize:vertical}

.partner-form input:focus-visible,.partner-form textarea:focus-visible{
  outline:2px solid var(--indigo);outline-offset:2px;border-color:var(--indigo)}
.partner-form input[aria-invalid="true"],.partner-form textarea[aria-invalid="true"]{
  border-color:var(--verm)}

.partner-form .helper{font-family:var(--sans);font-weight:400;font-size:12.5px;
  letter-spacing:.02em;text-transform:none;color:#6b675f;margin:-2px 0 14px}

.partner-form .err{font-family:var(--sans);font-size:12.5px;line-height:1.5;
  color:var(--verm);margin:8px 0 0}

/* ── the availability fieldset: a native <fieldset>, border removed since
   the legend already carries the field-label look above. ── */
.partner-form fieldset.availability{border:0;padding:0;margin:0 0 clamp(24px,3.4vh,32px);min-width:0}

/* large square tick boxes, two columns where they fit, one column when two
   would crowd (360px, per the ticket's own instruction). The checkbox INPUT
   is visually hidden (opacity:0, 1x1px, kept in normal flow and the tab
   order -- never display:none/visibility:hidden, which would drop it from
   both) and the whole row is a <label>, so a click or tap ANYWHERE on the
   row -- not just on the drawn box -- toggles it: the tap target is the
   full row, comfortably over 44x44 even though the drawn glyph is smaller. */
.avail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:0}
@media(max-width:480px){
  .avail-grid{grid-template-columns:1fr}
}
.avail-item{position:relative;display:flex;align-items:flex-start;gap:12px;
  min-height:44px;padding:11px 14px;cursor:pointer;
  font-family:var(--serif);font-weight:400;font-size:15.5px;line-height:1.4;color:var(--ink);
  background:rgba(255,255,255,.4);border:1px solid rgba(43,42,38,.18);border-radius:5px}
.avail-item input[type="checkbox"]{position:absolute;left:14px;top:11px;
  width:1px;height:1px;opacity:0;margin:0;padding:0}
.avail-item .box{flex:0 0 auto;width:22px;height:22px;margin-top:1px;
  border:1.5px solid rgba(43,42,38,.42);border-radius:4px;background:var(--raised);
  position:relative;overflow:hidden;transition:border-color .15s ease}
/* AMEND1 (MISSION_BOARD_V2.md 3d, A3/W5): the drawn tick mark is now the
   site's own red hand-drawn STRIKE, "the same way we have on the menu
   titles" -- svg.strike, its path and var(--verm) fill copied verbatim
   from the veil nav's own .mi svg.strike (site.css:562-569), same draw-on
   manner (scaleX 0->1, transform-origin left, .28s ease, instant under
   reduced motion), gated on :checked, scoped to the box only. The box
   itself stays paper-filled (var(--raised)) at every state -- it no
   longer fills solid on check. */
.avail-item .box svg.strike{position:absolute;left:9%;top:50%;width:82%;height:24%;
  transform:translateY(-50%) rotate(-3.5deg) scaleX(0);transform-origin:left center;
  transition:transform .28s ease;pointer-events:none;overflow:visible}
.avail-item .box svg.strike path{fill:var(--verm);opacity:.9}
.avail-item input:checked + .box svg.strike{transform:translateY(-50%) rotate(-3.5deg) scaleX(1)}
.avail-item input:focus-visible + .box{outline:2px solid var(--indigo);outline-offset:3px}
.avail-item:has(input:checked){border-color:rgba(60,90,120,.4);background:rgba(60,90,120,.06)}
@media(prefers-reduced-motion:reduce){
  .avail-item .box{transition:none}
  .avail-item .box svg.strike{transition:none}
}

/* ── the consent line: same tick-box vocabulary as availability, one full-
   width row, unticked by default (no `checked` attribute in the markup). ── */
.consent-field{margin:0 0 clamp(28px,4vh,36px)}
.consent-label{position:relative;display:flex;align-items:flex-start;gap:12px;
  min-height:44px;padding:10px 2px;cursor:pointer;
  font-family:var(--serif);font-weight:400;font-size:15px;line-height:1.55;color:var(--ink)}
.consent-label input[type="checkbox"]{position:absolute;left:2px;top:10px;
  width:1px;height:1px;opacity:0;margin:0;padding:0}
.consent-label .box{flex:0 0 auto;width:22px;height:22px;margin-top:1px;
  border:1.5px solid rgba(43,42,38,.42);border-radius:4px;background:var(--raised);
  position:relative;overflow:hidden;transition:border-color .15s ease}
/* AMEND1 (MISSION_BOARD_V2.md 3d, A3/W5): same strike-mark treatment as
   .avail-item .box above -- see its own note for the full rationale. */
.consent-label .box svg.strike{position:absolute;left:9%;top:50%;width:82%;height:24%;
  transform:translateY(-50%) rotate(-3.5deg) scaleX(0);transform-origin:left center;
  transition:transform .28s ease;pointer-events:none;overflow:visible}
.consent-label .box svg.strike path{fill:var(--verm);opacity:.9}
.consent-label input:checked + .box svg.strike{transform:translateY(-50%) rotate(-3.5deg) scaleX(1)}
.consent-label input:focus-visible + .box{outline:2px solid var(--indigo);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .consent-label .box{transition:none}
  .consent-label .box svg.strike{transition:none}
}

/* the submit control: site.css's own .btn/.cta tape look (torn red strip,
   focus ring, disabled/blocked treatment) reused unmodified -- only layout
   here. type="button" on purpose (see js/partner.js): no native submit
   control exists on this form at all, so there is nothing for Enter to
   activate and nothing that can ever GET this page's own URL with the
   answers appended to it. */
.partner-form .btn{margin-top:4px}

@media(prefers-reduced-motion:reduce){
  .partner-form input,.partner-form textarea{transition:none}
}