/* Forms, shared by every rebuilt page that carries one.
   No page in this rebuild has a server to post to, so a form validates in the
   browser and WRITES THE COMPLETED MESSAGE OUT ON THE PAGE for the reader to
   copy. Nothing is sent and nothing is opened unless the reader chooses it —
   an earlier version set window.location to a mailto: on submit, which
   launches a mail client without being asked. */

.se-form{display:block;
  /* the browser's own parts of a control — an unchecked checkbox, a select's
     option list — follow the page's dark palette instead of painting a white
     square on a dark panel */
  color-scheme:dark}
.lf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;margin-bottom:22px}
.lf-group{display:flex;flex-direction:column;gap:8px;min-width:0}
.lf-group.full{grid-column:1/-1}
.lf-group label{font-size:14px;font-weight:600;color:var(--se-text-white);
  display:flex;align-items:center;gap:6px}
.lf-group .req{color:var(--accent);font-weight:700}
.lf-group .opt{font-weight:400;color:var(--se-text-dim);font-size:12.5px}
.se-form input,.se-form textarea,.se-form select{
  width:100%;box-sizing:border-box;padding:13px 15px;
  font-family:var(--font-secondary);font-size:15px;color:var(--se-text-white);
  background:var(--se-bg);border:1px solid rgba(var(--se-border-teal-rgb),.28);
  border-radius:var(--r-md);
  transition:border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease;
}
.se-form textarea{min-height:112px;line-height:1.6;resize:vertical}
.se-form input:focus,.se-form textarea:focus,.se-form select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14)}
/* Keyboard focus is the site's focus ring (styles.css :focus-visible), the
   same one every button and link wears. The fields used to switch it off with
   outline:none and lean on a 1px border change, and a checkbox has no border
   to change: tabbing onto the consent box showed nothing at all. */
.se-form input:focus-visible,.se-form textarea:focus-visible,
.se-form select:focus-visible{outline:2px solid var(--se-focus);outline-offset:2px}
.se-form ::placeholder{color:var(--se-text-caption)}
.se-form select{appearance:none;cursor:pointer;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),
                   linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.se-form select:disabled{opacity:.45;cursor:not-allowed}
/* #ec8a75, not #e2725b: these forms sit on --se-frame panels, where the old
   red measured 3.89:1 and failed AA. This is the same red, lifted to 4.84:1. */
.se-form [aria-invalid="true"]{border-color:var(--se-error,#ec8a75)}
.lf-error{font-size:12.5px;color:var(--se-error,#ec8a75);min-height:0}

/* one "what I do" selection: industry, then category, then speciality */
.lf-pick{background:var(--se-bg);border:1px solid rgba(var(--se-border-teal-rgb),.2);
  border-radius:var(--r-lg);padding:16px;margin-bottom:12px}
.lf-pick-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:12px}
.lf-pick-n{font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.08em;color:var(--se-text-caption)}
.lf-pick-drop{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.lf-remove{background:none;border:0;cursor:pointer;padding:4px 8px;
  font-family:var(--font-secondary);font-size:12px;letter-spacing:.04em;
  color:var(--se-text-caption);border-radius:var(--r-sm)}
.lf-remove:hover{color:var(--accent)}
.lf-count{font-family:var(--font-mono);font-size:11px;color:var(--se-text-dim)}
.lf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:16px}
.lf-submit{display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  margin-top:30px;padding-top:24px;
  border-top:1px solid rgba(var(--se-border-teal-rgb),.16)}
/* --se-text-dim, not --se-text-caption: caption is 4.31:1 on the --se-frame
   panel these forms sit on (tokens.css says so) and fails AA; dim is 5.46:1 */
.lf-hint{font-size:13.5px;color:var(--se-text-dim);max-width:52ch;margin:0}
.lf-status{font-size:14px;color:var(--accent);margin:14px 0 0;min-height:1em}


/* The completed application, written out on the page. Nothing is sent and no
   application is opened unless the reader chooses it — submitting used to set
   window.location to a mailto:, which launches a mail client unasked. */
.lf-out{margin-top:22px;padding-top:20px;
  border-top:1px solid rgba(var(--se-border-teal-rgb),.16)}
.lf-out label{display:block;font-size:14px;font-weight:600;
  color:var(--se-text-white);margin-bottom:8px}
.lf-out textarea{width:100%;box-sizing:border-box;font-family:var(--font-mono);
  font-size:13px;line-height:1.6;color:var(--se-text-secondary);
  background:var(--se-bg);border:1px solid rgba(var(--se-border-teal-rgb),.28);
  border-radius:var(--r-md);padding:14px;resize:vertical}
.lf-out .btn-row{margin-top:12px}

/* A consent checkbox is a row, not a grid cell: without this the box floated
   in the middle of the column and its label sat hard against the right edge. */
.lf-check label{display:flex;align-items:flex-start;gap:11px;font-weight:400;
  font-size:14px;line-height:1.5;color:var(--se-text-secondary);cursor:pointer}
.lf-check input[type=checkbox]{flex:none;width:18px;height:18px;margin-top:1px;
  accent-color:var(--accent);cursor:pointer}
.lf-check label a{color:var(--accent);text-decoration:underline;
  text-underline-offset:2px}