/* ==========================================================================
   report.css — the support form at /report, shared by every record site.

   STRUCTURE ONLY, same contract as pricing.css: colour, type and radius come from whichever
   brand stylesheet loaded before it, through the token bridge below. A brand that wants a
   different accent sets the GENERIC name in its own :root and wins the chain without touching
   this file.

   Layout: one question at a time, top to bottom, single column. A support form is read in one
   pass on a phone by someone who is already annoyed, so there are no side-by-side fields, no
   multi-column grid, and nothing that reflows between breakpoints.

   MOBILE OVERFLOW: <fieldset> does not shrink below its content's min-content width — it is one
   of the two elements that ignore the usual flex/grid minimums — so every fieldset here carries
   an explicit `min-width: 0`. Without it one long unbroken record URL in a placeholder scrolls
   the whole page sideways.
   ========================================================================== */

.rf {
  --rf-paper:  var(--paper,  var(--surface, #fff));
  --rf-ground: var(--ground, var(--bg, #f2f4f5));
  --rf-ink:    var(--ink,    #14181a);
  --rf-ink-2:  var(--ink-2,  #4a565e);
  --rf-ink-3:  var(--ink-3,  #6b7780);
  --rf-rule:   var(--rule,   var(--line, #ccd4d8));
  --rf-rule-2: var(--rule-2, var(--line-soft, #e2e7ea));
  --rf-accent: var(--accent, var(--brand, var(--blue, var(--down, #12503a))));
  --rf-bad:    var(--bad,    var(--danger, #a3261d));
  --rf-r:      var(--r, 2px);
  --rf-ui:     var(--ui, system-ui, -apple-system, sans-serif);

  font-family: var(--rf-ui);
  color: var(--rf-ink);
  max-width: 34rem;
  min-width: 0;
}

/* --- fieldsets ----------------------------------------------------------- */

.rf fieldset {
  min-width: 0;                 /* see the header note — fieldsets otherwise never shrink */
  border: 0;
  margin: 0 0 4px;
  padding: 12px 0 4px;
}

/* Only the contact block gets a dividing rule, and it gets one whatever topic is showing.
   Hanging the rule off :first-of-type instead put it above the billing fields but not above the
   record fields, because the record fieldset happens to come first in the markup — the divider
   moved depending on which question you asked. */
.rf fieldset.contact { border-top: 1px solid var(--rf-rule-2); padding-top: 20px; margin-top: 14px }

.rf legend {
  padding: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--rf-ink);
  line-height: 1.35;
}

/* The topic fieldsets are toggled with the `hidden` attribute so the page is correct before any
   script runs. With JavaScript off, the <noscript> block in the page reveals all of them and the
   server-side validation — which only ever reads the chosen topic's fields — still does the job. */
.rf fieldset[hidden] { display: none }

/* --- fields -------------------------------------------------------------- */

.rf .field { margin: 16px 0 0; display: flex; flex-direction: column; gap: 6px; min-width: 0 }

/* The topic question is the page's first and most important one, so it is sized like a legend
   rather than like a field label — it is what everything below it depends on. */
.rf .field.topic { margin-top: 20px }
.rf .field.topic > label { font-size: 1.05rem; font-weight: 600; color: var(--rf-ink) }

.rf label { font-weight: 600; font-size: 0.9rem; color: var(--rf-ink-2) }

.rf .hint { font-size: 0.85rem; color: var(--rf-ink-3); line-height: 1.4 }

.rf input[type="text"],
.rf input[type="email"],
.rf select,
.rf textarea {
  width: 100%;
  min-width: 0;                 /* so a long value cannot push the column wider than the page */
  box-sizing: border-box;
  padding: 11px 12px;
  font: inherit;
  font-size: 16px;              /* 16px or iOS zooms the page on focus */
  color: var(--rf-ink);
  background: var(--rf-paper);
  border: 1px solid var(--rf-rule);
  border-radius: var(--rf-r);
}
.rf textarea { resize: vertical; min-height: 7.5rem; line-height: 1.5 }

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

/* The signed-in note sits under the email field rather than replacing it: the address on the
   account is the right default, but the person reporting a record is not always the person who
   pays for the plan, so it stays editable. */
.rf .prefilled { font-size: 0.85rem; color: var(--rf-ink-3) }

/* --- honeypot ------------------------------------------------------------
   Off-screen rather than display:none — a bot that only skips hidden inputs still fills it,
   and a screen reader skips it because of the aria-hidden on the wrapper. */
.rf .skip {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- actions -------------------------------------------------------------- */

.rf .actions { margin: 24px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px }

.rf button[type="submit"] {
  font: inherit;
  font-weight: 600;
  padding: 12px 22px;
  color: var(--rf-paper);
  background: var(--rf-accent);
  border: 1px solid var(--rf-accent);
  border-radius: var(--rf-r);
  cursor: pointer;
}
.rf button[type="submit"]:hover { filter: brightness(1.08) }

.rf .cf-turnstile { min-height: 65px }

.rf .err {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-left: 3px solid var(--rf-bad);
  background: var(--rf-ground);
  color: var(--rf-ink);
  font-size: 0.92rem;
}

/* --- confirmation --------------------------------------------------------- */

.rf-done { max-width: 34rem }
.rf-done .ref {
  display: inline-block;
  margin: 2px 0;
  padding: 3px 8px;
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 0.9rem;
  background: var(--rf-ground);
  border: 1px solid var(--rf-rule-2);
  border-radius: var(--rf-r);
  word-break: break-all;
}