/* =============================================================================
   NCRepairBench - form states (css/forms.css)
   -----------------------------------------------------------------------------
   Loaded by repair-request.html and check-status.html, on top of site.css.

   Everything in here exists because the CSP forbids inline styles: there is not
   one inline style attribute anywhere on either page, so every state a script
   needs to express (an error under a field, a hidden honeypot, a busy button, a
   success panel) has to be a class or the hidden attribute instead.

   Contrast: body text and every message colour on this sheet is at or above
   4.5:1 against the surface it sits on.
   ========================================================================== */

/* A script toggling [hidden] must win over any display rule below it. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   Focus. site.css turns the outline off on inputs and replaces it with a ring;
   these rules put a real, visible focus indicator back on everything a keyboard
   can reach, including on the dark surfaces where the accent colour disappears.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #0e7490;
  outline-offset: 2px;
  border-radius: 6px;
}
.site-footer a:focus-visible,
.cta a:focus-visible,
.form-submit:focus-visible,
.success-panel .btn-link:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: #0e7490;
  outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
   The honeypot.
   A real, visible-in-the-DOM text input that a person never sees and never
   tabs into. It is moved off screen rather than display:none or type=hidden,
   because the bots worth catching skip both of those and fill this one in.
   --------------------------------------------------------------------------- */
.hp-wrap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Layout: the success panel and the form share the left column of .form-wrap,
   so they need a wrapper, and a grid child needs min-width:0 or long words
   push the column wider than its track.
   --------------------------------------------------------------------------- */
.form-col { min-width: 0; }

/* A quiet explanatory line under a label. */
.field .hint,
.status-form .hint {
  font-size: .8rem;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-top: 6px;
}

/* ---------------------------------------------------------------------------
   Per-field errors
   --------------------------------------------------------------------------- */
.field-error {
  display: none;
  margin-top: 6px;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.45;
  color: #b3261e;
}
.field-error.is-shown { display: block; }

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #b3261e;
  background: #fff8f7;
}
.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .16);
}

/* The method radio group is a fieldset, so its error sits under the cards. */
.method-fieldset {
  border: 0;
  margin: 0 0 16px;
  padding: 0;
  min-width: 0;
}
.method-fieldset legend {
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  padding: 0;
}
.method-fieldset .method-opts { margin-bottom: 6px; }

/* ---------------------------------------------------------------------------
   Form-level notice (rate limits, network failures, server errors)
   --------------------------------------------------------------------------- */
.form-alert {
  border: 1px solid #f0c9c5;
  background: #fdf3f2;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.form-alert p {
  font-size: .9rem;
  line-height: 1.5;
  color: #7a1f19;
}
.form-alert p + p { margin-top: 8px; }
.form-alert a {
  color: #0e7490;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Submit button, busy state
   --------------------------------------------------------------------------- */
.form-submit:disabled,
.form-submit.is-busy {
  cursor: progress;
  opacity: .72;
  box-shadow: none;
  transform: none;
}
.form-note.pow-note {
  min-height: 1.1em;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   The success panel.

   This is the single most important moment on the site. If the ticket number
   does not land, nothing else about the page mattered: without it, and without
   the email address they used, nobody can look their own repair up again.
   So the number is the largest thing on the screen.
   --------------------------------------------------------------------------- */
.success-panel {
  background: #ffffff;
  border: 2px solid #1a7a4d;
  border-radius: 16px;
  padding: 30px 28px;
  box-shadow: 0 6px 26px rgba(20, 60, 40, .12);
}
.success-panel:focus { outline: none; }
.success-kicker {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #146c43;
}
.success-panel h2 {
  font-size: 1.35rem;
  margin: 6px 0 2px;
  color: var(--ink);
}
.ticket-big {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: clamp(2.6rem, 11vw, 4.4rem);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.1;
  color: #0e7490;
  margin: 10px 0 4px;
  word-break: break-word;
}
.ticket-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 10px 0 18px;
}
.btn-copy {
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  color: #0e7490;
  background: #e8f4f8;
  border: 1px solid #9fd0dd;
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
}
.btn-copy:hover { background: #d9edf4; }
.copy-note {
  font-size: .84rem;
  color: #146c43;
  font-weight: 600;
}
.success-panel .success-body {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 12px;
  max-width: 60ch;
}
.success-panel .success-body strong { color: var(--ink); }
.success-panel .btn-link {
  display: inline-block;
  margin-top: 6px;
  background: linear-gradient(135deg, #0e7490, #155e75);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  text-decoration: none;
  border-radius: 12px;
  padding: 13px 24px;
}
.success-panel .btn-link:hover { filter: brightness(1.06); }

/* ---------------------------------------------------------------------------
   Turnstile slot. Only ever unhidden when the server reports a site key.
   --------------------------------------------------------------------------- */
.turnstile-field { margin-bottom: 16px; }
.turnstile-widget { min-height: 65px; }

/* ---------------------------------------------------------------------------
   check-status.html
   --------------------------------------------------------------------------- */
.status-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: 26px;
  align-items: start;
  margin-bottom: 44px;
}
.status-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px;
  box-shadow: 0 2px 12px rgba(20, 40, 60, .06);
}
.ticket-input {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 1.15rem !important;
  letter-spacing: .08em;
}

.status-result {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid #0e7490;
  border-radius: 16px;
  padding: 24px 24px 22px;
  margin-bottom: 28px;
  box-shadow: 0 2px 12px rgba(20, 40, 60, .06);
}
.status-result:focus { outline: none; }
.status-ticket {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0e7490;
  letter-spacing: .05em;
}
.status-label {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  margin: 8px 0 14px;
  line-height: 1.35;
}
.status-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 18px;
  margin-bottom: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.status-meta div { min-width: 0; }
.status-meta dt {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.status-meta dd {
  font-size: .95rem;
  color: var(--ink);
  word-break: break-word;
}
.status-timeline-head {
  font-size: .95rem;
  font-weight: 800;
  color: var(--ink);
  margin: 4px 0 10px;
}
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative;
  padding: 0 0 14px 22px;
  border-left: 2px solid var(--line);
}
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #9fd0dd;
}
.timeline li:first-child::before { border-color: #0e7490; }
.timeline .t-label {
  display: block;
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink);
}
.timeline .t-at {
  display: block;
  font-size: .8rem;
  color: var(--ink-soft);
  margin-top: 1px;
}
.status-empty {
  font-size: .88rem;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   Responsive. Two columns down to one, and no horizontal scrolling at 320px.
   --------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .status-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .success-panel { padding: 24px 20px; }
  .ticket-big { letter-spacing: .04em; }
  .ticket-actions { gap: 10px; }
  .success-panel .btn-link { display: block; text-align: center; }
  .status-result { padding: 20px 18px; }
  /* 16px stops iOS zooming the page on focus. */
  .status-form input { font-size: 16px; }
  .ticket-input { font-size: 16px !important; }
}

/* ---------------------------------------------------------------------------
   Reduced motion. Nothing here animates by default, but site.css does scroll
   smoothly and lifts cards on hover, and the success panel is scrolled into
   view by script. Honour the preference for all of it.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .form-submit:hover,
  .btn-copy:hover,
  .success-panel .btn-link:hover {
    transform: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}