/* ==========================================================
   Grievance Form  v1.0
   Scope: .intone-legal-page .legal-grievance-form

   Lives inside .legal-grievance-card (page-legal.css), which is a
   light #f4f6f9 panel with a gold left border in BOTH themes — that
   card has no [data-theme="dark"] override, by design of the original
   template. So every colour below is declared explicitly rather than
   inherited: the panel does not flip, therefore neither may the form
   sitting in it. Do not "fix" this by switching to --t-* tokens
   without also giving .legal-grievance-card a dark surface, or the
   form turns light-on-light in dark mode.

   Field conventions (labels, inputs, focus ring, .invalid, button,
   spinner, status colours) deliberately mirror
   staffing-simple-form.css so the two forms feel like one system.
   They are NOT shared: that file is scoped to .intone-staffing-page
   and nothing on a legal page can reach it.
   ========================================================== */

/* ── Form shell ─────────────────────────────────────────── */
.intone-legal-page .legal-grievance-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 8px;
  max-width: 1150px; /* matches .legal-grievance-card p measure */
}

/* ── Field grid ──────────────────────────────────────────
   auto-fit rather than fixed columns: 3-up on desktop, 2-up on tablet,
   1-up on phones, with no breakpoint of its own.

   The 280px floor is measured, not guessed. The form is capped at 1150px
   (matching the sibling paragraphs), and auto-fit packs
   floor((1150 + gap) / (floor + gap)) tracks — at a 240px floor that is FOUR,
   so the three fields sat in the left three-quarters with a dead track beside
   Phone while the textarea below them spanned the full width. At 280px it is
   three, and the row lines up with the textarea. Re-measure before changing
   either this value or the 1150px cap; they are coupled. */
.intone-legal-page .gf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.intone-legal-page .gf-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0; /* let inputs shrink inside the grid track */
}

.intone-legal-page .gf-group--full {
  grid-column: 1 / -1;
}

/* ── Labels ─────────────────────────────────────────────── */
.intone-legal-page .gf-group label {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #09101d;
}

.intone-legal-page .gf-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #5c6370;
}

.intone-legal-page .gf-req {
  color: #c62828;
  margin-left: 2px;
}

/* ── Inputs & textarea ──────────────────────────────────── */
.intone-legal-page .gf-group input,
.intone-legal-page .gf-group textarea {
  background: #ffffff;
  border: 1px solid transparent;
  border-bottom-color: #cdd2d9;
  border-radius: 0;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #09101d;
  padding: 12px 14px;
  width: 100%;
  outline: none;
  appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.intone-legal-page .gf-group input::placeholder,
.intone-legal-page .gf-group textarea::placeholder {
  color: #6b7280;
  font-weight: 400;
}

/* Focus is a 2px bar, not an outline removal: :focus-visible keeps a
   real keyboard ring for anyone tabbing through. */
.intone-legal-page .gf-group input:focus,
.intone-legal-page .gf-group textarea:focus {
  border-color: #09101d;
  box-shadow: 0 2px 0 0 #09101d;
}

.intone-legal-page .gf-group input:focus-visible,
.intone-legal-page .gf-group textarea:focus-visible {
  outline: 2px solid #09101d;
  outline-offset: 2px;
}

.intone-legal-page .gf-group input.invalid,
.intone-legal-page .gf-group textarea.invalid {
  border-bottom-color: #c62828;
  box-shadow: 0 2px 0 0 #c62828;
}

.intone-legal-page .gf-group textarea {
  resize: vertical;
  min-height: 132px;
}

/* ── Per-field error text ──────────────────────────────────
   Neither the Contact nor the Staffing form has per-field errors: they
   colour the border and put one generic sentence in the status region,
   so a screen-reader user is told "check the highlighted fields" with no
   way to discover which. Each control here owns an error node that is
   permanently in its aria-describedby, empty until the JS fills it. */
.intone-legal-page .gf-error {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: #8c1a26;
}
.intone-legal-page .gf-error:empty { display: none; }

/* ── Textarea counter + hint ────────────────────────────── */
.intone-legal-page .gf-textarea-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.intone-legal-page .gf-char-count {
  align-self: flex-end;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 12px;
  color: #5c6370;
}

.intone-legal-page .gf-hint {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 13px;
  line-height: 1.6;
  color: #4b5563;
  margin: 0;
}

/* ── Honeypot ───────────────────────────────────────────
   Off-screen rather than display:none — some bots skip fields that
   are display:none, and the lead-source hidden inputs live in here
   too and must stay in the form's submitted data. */
.intone-legal-page .gf-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* ── Actions ────────────────────────────────────────────── */
.intone-legal-page .gf-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding-top: 4px;
}

.intone-legal-page .btn-grievance-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #09101d;
  color: #ffffff;
  border: 1px solid #09101d;
  border-radius: 0;
  padding: 14px 32px;
  min-width: 190px;
  min-height: 48px; /* >=44px touch target */
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.intone-legal-page .btn-grievance-submit:hover {
  background: #1e2e4c;
  border-color: #1e2e4c;
}

.intone-legal-page .btn-grievance-submit:focus-visible {
  outline: 2px solid #09101d;
  outline-offset: 3px;
}

.intone-legal-page .btn-grievance-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Spinner */
.intone-legal-page .gf-btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: gf-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.intone-legal-page .btn-grievance-submit.loading .gf-btn-spinner {
  display: block;
}

@keyframes gf-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .intone-legal-page .gf-btn-spinner { animation-duration: 2.4s; }
}

/* ── Status message ─────────────────────────────────────── */
.intone-legal-page .gf-status {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  padding: 0;
  color: #09101d;
}

.intone-legal-page .gf-status:empty { display: none; }

.intone-legal-page .gf-status.success {
  color: #14522f;
  padding: 14px 16px;
  background: rgba(31, 193, 107, 0.12);
  border-left: 3px solid #1fc16b;
}

.intone-legal-page .gf-status.error {
  color: #8c1a26;
  padding: 14px 16px;
  background: rgba(198, 40, 40, 0.08);
  border-left: 3px solid #c62828;
}

/* The reference number shown after a successful submission. */
.intone-legal-page .gf-status strong {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 760px) {
  .intone-legal-page .legal-grievance-form {
    gap: 24px;
  }
  .intone-legal-page .gf-grid {
    grid-template-columns: 1fr;
  }
  .intone-legal-page .gf-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .intone-legal-page .btn-grievance-submit {
    width: 100%;
    min-width: 0;
  }
}

/* ── Dark mode ──────────────────────────────────────────
   Intentionally minimal. .legal-grievance-card keeps its light
   surface in dark mode (page-legal.css ships no override for it),
   so the form must stay light too. The only thing that needs
   restating is the gold underline on links inside the card, which
   some global dark rules would otherwise recolour. */
[data-theme="dark"] .intone-legal-page .legal-grievance-form,
[data-theme="dark"] .intone-legal-page .gf-group label,
[data-theme="dark"] .intone-legal-page .gf-status {
  color: #09101d;
}
[data-theme="dark"] .intone-legal-page .gf-group input,
[data-theme="dark"] .intone-legal-page .gf-group textarea {
  background: #ffffff;
  color: #09101d;
  border-bottom-color: #cdd2d9;
}
[data-theme="dark"] .intone-legal-page .gf-group input::placeholder,
[data-theme="dark"] .intone-legal-page .gf-group textarea::placeholder {
  color: #6b7280;
}
[data-theme="dark"] .intone-legal-page .btn-grievance-submit {
  background: #09101d;
  color: #ffffff;
  border-color: #09101d;
}
[data-theme="dark"] .intone-legal-page .gf-status.success { color: #14522f; }
[data-theme="dark"] .intone-legal-page .gf-status.error   { color: #8c1a26; }