/* Write to me (Contact) · styles only this page uses, loaded after /shared/deep-dive.css. Like the
   Questions page it isn't a deep dive: no Contents menu and no shared script. The form posts to the
   Worker at /api/contact (worker/index.js). */

/* header: no Contents button, so the Kitchen Table link shows from 600px */
.c-page .home-link{display:none}
@media (min-width:600px){.c-page .home-link{display:flex}}

/* layout: on phones the introduction (which links to the help card), the form, then where to get
   help now. From 900px the introduction and form sit on the left and the help card beside them. */
.c-grid{display:grid;gap:32px;padding-block:24px 56px;grid-template-areas:"intro" "form" "help"}
.c-intro{grid-area:intro;gap:12px;max-width:62ch}
.help-now{grid-area:help}
.c-form,.c-done{grid-area:form}
@media (min-width:900px){
  .c-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"intro help" "form help";column-gap:72px;row-gap:32px;align-items:start;padding-block:40px 80px}
  .help-now{position:sticky;top:calc(var(--bar-h) + 24px)}
}
.c-intro .c-private{font-size:calc(16px*var(--ts,1));line-height:1.55;color:var(--ink-2)}

/* The help card itself (.help-now) is in /shared/deep-dive.css; the Questions page has it too. */

/* the form */
.c-form{display:flex;flex-direction:column;gap:24px;max-width:640px}
.c-about{margin:0;padding:0;border:0;min-width:0}
.c-about legend{padding:0;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chips span{min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--ink);font:500 calc(15px*var(--ts,1)) var(--sans);cursor:pointer}
.chips label:hover span{border-color:var(--accent);color:var(--accent)}
.chips input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chips input:focus-visible + span{outline:2px solid var(--focus);outline-offset:3px}

/* the page a link came from, with a way to drop it */
.c-ctx{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--band)}
.c-ctx p{display:flex;flex-direction:column;gap:2px;font:500 calc(16px*var(--ts,1))/1.4 var(--sans)}
.c-ctx button{min-height:44px;padding:0;border:0;background:none;color:var(--accent);font:600 calc(14px*var(--ts,1)) var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.c-ctx button:hover{color:var(--ink)}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font:600 calc(16px*var(--ts,1))/1.3 var(--sans);color:var(--ink)}
.field .opt{font-weight:400;color:var(--ink-2)}
.field .hint{font:400 calc(14px*var(--ts,1))/1.5 var(--sans);color:var(--ink-2);max-width:56ch}
.field textarea,.field input{width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--card);color:var(--ink);font:400 calc(17px*var(--ts,1))/1.5 var(--sans)}
.field textarea{min-height:180px;resize:vertical}
.field textarea:focus,.field input:focus{border-color:var(--accent)}
.field textarea:focus-visible,.field input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

.cf-turnstile{min-height:65px}
.c-status{font:500 calc(15px*var(--ts,1))/1.5 var(--sans);color:var(--ink-2)}
.c-status:empty{display:none}
.c-status.err{color:var(--accent)}
.c-form .btn{border:0;cursor:pointer;padding-inline:32px}
.c-form .btn:disabled{opacity:.6;cursor:default}

/* after sending */
.c-done{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--card);max-width:640px}
.c-done h2{margin:0;font:400 calc(clamp(30px,3.6vw,42px)*(1 + (var(--ts,1) - 1)*0.5))/1.08 var(--display)}
.c-done:focus{outline:none}
.c-done .btn{border:0;cursor:pointer;margin-top:8px}