/* THE TRIAL REQUEST PAGE.
 *
 * Loaded directly by dist/start/index.html alongside ks-home-v20.v1.css, whose
 * nav, footer, button and heading classes this page reuses. Only the form
 * itself is new, which is why this file is short.
 *
 * Registered in tests/repo/every-stylesheet-is-reachable.spec.ts.
 *
 * MOBILE FIRST. The base rules are the phone: one column, full-width controls,
 * and a 16px minimum on every input — anything smaller makes iOS Safari zoom
 * the viewport on focus, which on a form this long is a reader who loses their
 * place twice per field.
 *
 * NO COLOUR IS DEFINED HERE. Every value is a token.
 */

.su-main { padding-block: clamp(2rem, 6vw, 4rem) clamp(3rem, 8vw, 5rem); }

.su-shell { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: minmax(0, 1fr); }
/* The copy leads on a phone and sits beside the form on a desktop. Source order
   is copy-first either way, so the reading order needs no CSS to be right. */
@media (min-width: 940px) {
  .su-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(3rem, 6vw, 5rem); align-items: start; }
}

/* ── The copy ───────────────────────────────────────────────────────────── */

.su-h1 { margin: 0 0 var(--ks-s-4); }

.su-assure { list-style: none; margin: var(--ks-s-6) 0 0; padding: 0; display: grid; gap: var(--ks-s-3); }
.su-assure li {
  position: relative; padding-left: 1.6rem;
  color: var(--ink-2); font-size: var(--ks-t-sm); line-height: 1.55;
}
.su-assure b { color: var(--ink); }
.su-assure li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--primary);
}

.su-alt { margin: var(--ks-s-6) 0 0; font-size: var(--ks-t-sm); color: var(--ink-3); }
.su-alt a { color: var(--accent-on-surface); font-weight: 700; }

/* ── The form ───────────────────────────────────────────────────────────── */

.su-formwrap {
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--ks-r-lg);
  background: var(--surface-raised);
  box-shadow: var(--ks-e2);
}

.su-form { display: grid; gap: var(--ks-s-4); }
.su-row { display: grid; gap: var(--ks-s-2); }

/* THE [hidden] GUARD IS NOT DECORATION, and this page is the case that proves it.
 *
 * The form ships with the `hidden` attribute and is revealed by script, so that
 * a reader whose JavaScript never runs gets the noscript message and an email
 * address rather than a button that silently does nothing — which is exactly
 * what the page's own comment claims. `display: grid` above is an AUTHOR rule
 * and the `[hidden] { display: none }` it has to beat is a USER-AGENT rule, so
 * the author rule wins whatever its specificity, and the attribute did nothing:
 * measured on the live page 2026-09-10 as `display: grid` on a hidden .su-form.
 * So the noscript path showed the warning AND a complete, dead form.
 *
 * The same trap has now been met four times in this repository — the admin tab
 * strip, the Settings group panels, the calendar's idle card, and here. Every
 * one of them was a class with its own `display` over an element the product
 * toggles with `hidden`. */
.su-form[hidden], .su-row[hidden] { display: none; }
.su-two { display: grid; gap: var(--ks-s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .su-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.su-form label { font-size: var(--ks-t-sm); font-weight: 700; color: var(--ink); }
.su-opt { font-weight: 500; color: var(--ink-3); font-size: var(--ks-t-xs); }

.su-form input,
.su-form textarea {
  width: 100%;
  padding: .8rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--ks-r-control-sm);
  background: var(--surface);
  color: var(--ink);
  /* 16px exactly. Below it, iOS Safari zooms the page on focus. */
  font: inherit; font-size: 1rem;
  transition: border-color var(--ks-fast) var(--ks-ease), box-shadow var(--ks-fast) var(--ks-ease);
}
.su-form textarea { resize: vertical; min-height: 5.5rem; }
.su-form input::placeholder,
.su-form textarea::placeholder { color: var(--ink-4); }
.su-form input:focus-visible,
.su-form textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* :invalid alone would paint every required field red before anybody typed.
   :user-invalid fires only after the reader has actually interacted. */
.su-form input:user-invalid { border-color: var(--ks-danger); }

/* The address field, with its prefix inside the control rather than beside it,
   so the whole thing reads as one address. */
.su-slug {
  display: flex; align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: var(--ks-r-control-sm);
  background: var(--surface);
  overflow: hidden;
}
.su-slug:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.su-slug-pre {
  display: flex; align-items: center;
  padding: 0 .2rem 0 .9rem;
  color: var(--ink-3); font-size: var(--ks-t-sm); white-space: nowrap;
}
.su-slug input { border: 0; border-radius: 0; background: transparent; padding-left: 0; }
.su-slug input:focus-visible { box-shadow: none; }
/* The prefix is long, and on a narrow phone it and a typed slug cannot both
   fit. Shrinking the prefix rather than the field keeps what the reader is
   TYPING fully visible, which is the half that matters. */
@media (max-width: 400px) {
  .su-slug-pre { font-size: var(--ks-t-xs); padding-left: .6rem; }
}

.su-help, .su-quote { margin: 0; font-size: var(--ks-t-xs); color: var(--ink-3); line-height: 1.5; }
.su-quote { min-height: 2.2em; }

/* ── The honeypot ───────────────────────────────────────────────────────────
   Off-screen, not display:none. A bot that parses CSS skips a hidden field;
   one positioned away is filled. Never focusable, and the markup carries
   aria-hidden so nothing announces it. */
.su-hp {
  position: absolute;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.su-submit { width: 100%; margin-top: var(--ks-s-2); }
.su-submit[aria-busy="true"] { opacity: .72; cursor: progress; }

.su-error {
  margin: 0;
  padding: var(--ks-s-3) var(--ks-s-4);
  border: 1px solid var(--ks-danger);
  border-radius: var(--ks-r-md);
  background: color-mix(in oklab, var(--ks-danger) 8%, var(--ks-white));
  color: var(--ks-danger);
  font-size: var(--ks-t-sm); font-weight: 600; line-height: 1.5;
}

.su-terms { margin: 0; font-size: var(--ks-t-xs); color: var(--ink-3); line-height: 1.55; }
.su-terms a { color: var(--accent-on-surface); font-weight: 700; }

.su-noscript {
  margin: 0;
  padding: var(--ks-s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--ks-r-md);
  background: var(--surface-sunken);
  color: var(--ink-2); font-size: var(--ks-t-sm); line-height: 1.6;
}

/* ── The done state ─────────────────────────────────────────────────────── */

.su-done { text-align: center; }
.su-done:focus-visible { outline: var(--ks-ring); outline-offset: 4px; border-radius: var(--ks-r-md); }
.su-done-mark {
  width: 3rem; height: 3rem; margin: 0 auto var(--ks-s-4);
  border-radius: 50%;
  background: var(--primary-soft);
  position: relative;
}
.su-done-mark::after {
  content: "";
  position: absolute; left: 50%; top: 46%;
  width: 1rem; height: .5rem;
  border-left: 3px solid var(--primary-deep);
  border-bottom: 3px solid var(--primary-deep);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.su-done-h { margin: 0 0 var(--ks-s-3); font-family: var(--ks-display); font-size: var(--ks-t-h3); font-weight: 800; color: var(--ink); }
.su-done > p { margin: 0; color: var(--ink-2); font-size: var(--ks-t-sm); }

.su-steps {
  margin: var(--ks-s-6) 0 0; padding: 0 0 0 1.25rem;
  text-align: left; display: grid; gap: var(--ks-s-3);
}
.su-steps li { color: var(--ink-2); font-size: var(--ks-t-sm); line-height: 1.55; }
.su-steps b { color: var(--ink); }

.su-done-alt { margin: var(--ks-s-6) 0 0; font-size: var(--ks-t-sm); color: var(--ink-3); }
.su-done-alt a { color: var(--accent-on-surface); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .su-form input, .su-form textarea { transition: none; }
}