/* ============================================================
   sei.gg/support: the support form. Loaded on top of styles.css and
   docs.css, so the page shares the docs reading surface (white page,
   app-blue ink, Inter) and only the form pieces live here.
   Buttons are fills with no border lines (Shawn 261023).
   ============================================================ */

.support { max-width: 620px; margin: 0 auto; }
.docs__main.legal.support { margin: 0 auto; }

.support__quick {
  margin: 22px 0 30px; padding: 14px 18px; border-radius: 10px;
  background: var(--d-soft); border-left: 3px solid var(--d-sky);
}
.docs__main.legal .support__quick { font-size: 16px; line-height: 1.6; }

.sf { display: grid; gap: 22px; }
/* the form and panels set their own display, so [hidden] needs restating */
.sf[hidden], .support__done[hidden], .sf__err[hidden], .sf__clear[hidden] { display: none; }
.sf__field { display: grid; gap: 7px; min-width: 0; }
.sf__label { font-family: var(--d-body); font-size: 15px; font-weight: 600; color: var(--d-ink); }
.sf__opt { font-weight: 400; color: var(--d-text-2); }
.docs__main.legal .sf__hint, .sf__hint { font-size: 14px; line-height: 1.5; color: var(--d-text-2); margin: 0; }
.sf__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sf__count { font-size: 13px; color: var(--d-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf__count.is-over { color: #b3261e; font-weight: 600; }

.sf__input, .sf__select, .sf__textarea {
  width: 100%; font: inherit; font-family: var(--d-body); font-size: 16px; line-height: 1.5; color: var(--d-ink);
  background: var(--d-page); border: 1px solid var(--d-line-2); border-radius: 10px;
  padding: 11px 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sf__textarea { min-height: 170px; resize: vertical; }
.sf__select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--d-ink) 50%), linear-gradient(135deg, var(--d-ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.sf__select:invalid { color: var(--d-text-2); }
.sf__select option { color: var(--d-ink); }
.sf__input::placeholder, .sf__textarea::placeholder { color: #8a93a3; }
.sf__input:focus, .sf__select:focus, .sf__textarea:focus {
  outline: none; border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(63, 111, 196, 0.18);
}
.sf__field.is-invalid .sf__input, .sf__field.is-invalid .sf__select, .sf__field.is-invalid .sf__textarea { border-color: #b3261e; }
.sf__field.is-invalid .sf__input:focus, .sf__field.is-invalid .sf__select:focus, .sf__field.is-invalid .sf__textarea:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.16); }
.docs__main.legal .sf__err { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 500; color: #b3261e; }

/* file picker: a soft fill button + the chosen file name */
.sf__file { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.sf__file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.sf__pick {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 16px; border-radius: 10px; background: var(--d-soft);
  font-family: var(--d-body); font-size: 15px; font-weight: 600; color: var(--d-ink);
  transition: background 0.2s;
}
.sf__pick:hover { background: var(--d-soft-2); }
.sf__file input[type="file"]:focus-visible + .sf__pick { box-shadow: 0 0 0 3px rgba(63, 111, 196, 0.35); }
.sf__pick svg { width: 18px; height: 18px; flex: none; }
.sf__fname { font-size: 15px; color: var(--d-text-2); min-width: 0; overflow-wrap: anywhere; }
.sf__clear {
  border: 0; background: none; cursor: pointer; padding: 4px 2px;
  font: inherit; font-family: var(--d-body); font-size: 14px; color: var(--d-accent); text-decoration: underline; text-underline-offset: 3px;
}

/* honeypot: off screen, out of the tab order, hidden from assistive tech */
.sf__trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.sf__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 4px; }
.sf__submit, .support__again {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 26px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--d-body); font-size: 16px; font-weight: 700; color: var(--d-ink);
  background: var(--d-sky); box-shadow: 0 10px 24px -16px rgba(40, 70, 130, 0.7);
  transition: background 0.2s, transform 0.2s var(--ease);
}
.sf__submit:hover, .support__again:hover { background: var(--blue-deep); }
.sf__submit:active { transform: translateY(1px); }
.sf__submit:focus-visible, .support__again:focus-visible { outline: 3px solid rgba(63, 111, 196, 0.45); outline-offset: 2px; }
.sf__submit[disabled] { cursor: progress; opacity: 0.7; }
.sf__spin {
  width: 16px; height: 16px; border-radius: 50%; display: none;
  border: 2px solid rgba(4, 7, 15, 0.25); border-top-color: var(--d-ink);
  animation: sf-spin 0.8s linear infinite;
}
.sf__submit.is-busy .sf__spin { display: inline-block; }
@keyframes sf-spin { to { transform: rotate(360deg); } }
.docs__main.legal .sf__privacy { margin: 0; font-size: 14px; line-height: 1.5; color: var(--d-text-2); }
.docs__main.legal .sf__privacy a { color: var(--d-text-2); }

/* form-level error (network, rate limit, server) */
.sf__alert {
  padding: 13px 16px; border-radius: 10px;
  background: #fdeceb; border-left: 3px solid #b3261e; color: #5c1410;
}
.docs__main.legal .sf__alert { font-size: 15px; line-height: 1.55; }
.sf__alert[hidden] { display: none; }

/* success panel */
.support__done {
  padding: 26px 26px 28px; border-radius: 14px; background: var(--d-soft); border-left: 3px solid var(--d-sky);
}
.support__done:focus { outline: none; }
.docs__main.legal .support__done h2 { margin: 0 0 8px; font-size: clamp(21px, 2.2vw, 24px); }
.docs__main.legal .support__done p { font-size: 16.5px; margin: 0 0 10px; }
.support__done .support__note { color: var(--d-text-2); }
.support__again { margin-top: 10px; }

/* runtime messages live in the HTML so the i18n pipeline can translate them */
.support__msgs { display: none; }

@media (max-width: 600px) {
  .sf { gap: 20px; }
  .sf__actions { flex-direction: column; align-items: stretch; }
  .sf__submit { width: 100%; }
  .support__done { padding: 22px 18px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .sf__spin { animation-duration: 2.4s; }
}