/* Support form. Loaded after doc.css + legal.css. */

.support-form{
  display:flex;
  flex-direction:column;
  gap:22px;
  margin-top:8px;
}
.support-form[hidden]{ display:none; }

.form-row{ display:flex; flex-direction:column; gap:7px; }
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

label{
  font-family:var(--font-mono);
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-dim);
}
label .optional{ text-transform:none; letter-spacing:0; opacity:.7; }

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

input[type="text"],
input[type="email"],
select,
textarea{
  background:var(--bg-inset);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 14px;
  color:var(--text);
  font-family:var(--font-display);
  font-size:14.5px;
  width:100%;
  transition:border-color .15s;
}
textarea{
  resize:vertical;
  min-height:120px;
  font-family:var(--font-mono);
  font-size:13.5px;
  line-height:1.55;
}
textarea#logs{ min-height:90px; }

input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
  border-color:var(--accent);
}

select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c4b5fd' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
}

.field-error{ color:var(--warn); font-size:12.5px; }

.cf-turnstile{ margin-top:4px; }

.btn-submit{
  align-self:flex-start;
  background:var(--accent-solid);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:13px 26px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:14.5px;
  cursor:pointer;
  transition:background .15s;
}
.btn-submit:hover{ background:var(--accent-strong); }
.btn-submit:disabled{ opacity:.55; cursor:not-allowed; }

.form-status{ margin-top:4px; }
.form-status:empty{ display:none; }

.callout.success{ background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.3); }
.callout.success .callout-icon{ color:var(--success); }

.callout .btn-mailto{
  display:inline-block;
  margin-top:10px;
  color:var(--accent);
  font-size:14px;
}

@media (max-width:640px){
  .form-grid{ grid-template-columns:1fr; }
}