/* app_15_contact: the one contact form (form.html, 0447) and the support window it lives in, the one
   contact door (Erik, 2026-09-24: no /contact/ page, a direct visit opens the window over home).
   Tokens only, no !important, no raw hex. The door's terminal language is copied here under ct- and
   cf-, never shared: the accounts app owns .ac- and redraws it on its own clock. Two looks are banned
   here (brand.css ANTI-PATTERNS, Erik 2026-09-16): the diagonal orange hatch as a fill, and a
   coloured bar down one side of a rounded card (test 17). */

/* ---------- the form component, base look (the window, the account tab) ---------- */
.cf-f{display:grid;gap:12px;margin:0;position:relative}
.cf-row{display:grid;gap:5px;min-width:0;margin:0}
.cf-lb{font:600 9px/1 var(--fm);letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.cf-in{width:100%;min-width:0;background:var(--s1);border:1px solid var(--hl2);border-radius:var(--rb);
  padding:9px 11px;font:400 13px/1.5 var(--fm);color:var(--ink);caret-color:var(--acc);outline:none;margin:0}
.cf-in:focus{border-color:var(--acc)}
.cf-in::placeholder{color:var(--faint)}
/* the address a signed-in person cannot change: quiet ink and a dashed edge, filled in for you, not broken */
.cf-in[readonly]{color:var(--faint);border-style:dashed;cursor:default}
.cf-in[readonly]:focus{border-color:var(--hl2)}
.cf-sel{appearance:auto;cursor:pointer}
/* the message grows with its text (inline Alpine sets the height); twelve lines is where it stops */
.cf-ta{min-height:120px;max-height:calc(12 * 1.7em);line-height:1.7;resize:none;overflow-y:auto}
/* the files row: Add a file, the (i) with the rules, Send at the right edge; the kept files under it */
.cf-att{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.cf-file{position:absolute;width:1px;height:1px;opacity:0}
.cf-add{position:relative;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;
  border:1px dashed var(--hl2);border-radius:var(--rb);cursor:pointer;font:600 11px/1 var(--fm);
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.cf-add:hover,.cf-add:focus-within{border-color:var(--hl3);color:var(--ink)}
.cf-plus,.cf-k{display:none}
.cf-go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:none;
  border:1px solid var(--hl2);border-radius:var(--rb);padding:8px 15px;cursor:pointer;
  font:600 11px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  transition:border-color .16s,color .16s}
.cf-go:hover{border-color:var(--hl3);color:var(--ink)}
/* one kept file per line, its remove at the end */
.cf-files{flex-basis:100%;display:grid;gap:2px;margin:0;padding:0;list-style:none;min-width:0}
.cf-fi{display:flex;align-items:center;gap:8px;min-width:0;font:400 12px/1.4 var(--fm);color:var(--dim)}
.cf-fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-rm{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border:none;
  border-radius:6px;background:none;color:var(--faint);cursor:pointer}
.cf-rm:hover{background:var(--s2);color:var(--ink)}
.cf-rm svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
/* the one line back: a send, a house rule (the cap, the files), a refused field. The refusals read in
   the accent and never the red of a broken thing: they are rules, not the writer's mistakes (0133) */
.cf-say,.cf-bad,.cf-note{font:500 12px/1.6 var(--fm);margin:0}
.cf-say{color:var(--dim2)}
.cf-bad,.cf-note{color:var(--acc)}
.cf-note{flex-basis:100%}

/* the honeypot: reachable for a bot that reads the markup, gone for everyone else */
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* a finger needs 40px (0382): Add a file and Send; touch screens under 1100px only */
@media (max-width:1100px) and (pointer:coarse){
  :is(.cf-add,.cf-go){min-height:40px;align-items:center}
}

/* ---------- the support window (0363, 0447): the one contact door for a member and a guest. Its frame,
   width, dock and float under 1100px are the shell's desk window (0576); this styles what is inside. */
.ct-winbody{flex:1;min-height:0;overflow:auto;padding:18px 16px}
/* focus inside this window is never the orange (Erik, 0447): a field lights its border one gray
   lighter and grows no ring (0480, the lab's 08); any other input keeps a light gray ring at the
   shell's own 2px, the rest of the site the shell's */
.ct-win :is(input,textarea,select):focus-visible{outline:2px solid var(--dim)}
.ct-win .cf-in:focus{border-color:var(--hl3)}
.ct-win .cf-in:focus-visible{outline:none}
@media (max-width:640px){.ct-winbody{padding:14px 12px}}

/* ---------- the messages under the form (0315, 0440): one line each, a row opens its card ---------- */
.ct-panel{display:block}
.ct-panel > .cf{margin:0 0 28px}
.ct-hh{font:600 9px/1 var(--fm);letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin:0 0 10px}
.ct-hl{display:grid;gap:2px}
.ct-hr{display:flex;align-items:baseline;gap:12px;width:calc(100% + 22px);padding:9px 11px;margin:0 -11px;
  border:none;border-radius:7px;background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.ct-hr:hover{background:var(--s2)}
.ct-hd{font:400 10px/1.6 var(--fm);letter-spacing:.04em;color:var(--faint);font-style:normal;flex:none;min-width:70px}
.ct-ht{flex:1 1 auto;font:400 13px/1.6 var(--fd);color:var(--dim2);min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ct-hn{flex:none;font:400 10px/1.6 var(--fm);color:var(--faint)}
.ct-hempty{font:400 13px/1.7 var(--fd);color:var(--dim);margin:0}
/* the message's card: a native modal dialog in the middle of the screen, the site's confirm look */
.ct-card{box-sizing:border-box;width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 64px);margin:auto;
  padding:18px 22px 22px;background:var(--s1);border:1px solid var(--hl3);border-radius:var(--rc);color:var(--ink);
  box-shadow:0 30px 70px rgb(0 0 0 / .6)}
.ct-card[open]{display:flex;flex-direction:column;gap:14px}
.ct-card::backdrop{background:rgb(0 0 0 / .6)}
.ct-card:focus{outline:none}
.ct-ch{display:flex;align-items:center;gap:12px;min-width:0}
.ct-ch form{margin:0 0 0 auto}
.ct-to{font:400 11px/1.4 var(--fm);color:var(--faint);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-cx{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;
  border-radius:6px;background:none;color:var(--faint);cursor:pointer}
.ct-cx:hover{background:var(--s2);color:var(--ink)}
.ct-cx svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ct-cbody{min-height:0;overflow:auto;font:400 14px/1.7 var(--fd);color:var(--dim2);white-space:pre-wrap;
  overflow-wrap:anywhere}
.ct-cfiles{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ct-cfl{display:inline-flex;align-items:center;height:28px;padding:0 10px;border:1px solid var(--hl2);
  border-radius:var(--rb);font:400 12px/1 var(--fm);color:var(--dim);text-decoration:none}
.ct-cfl:hover,.ct-cfl:focus-visible{border-color:var(--hl3);color:var(--ink);outline:none}