/* Praxa review form, the form vocabulary.

   The Praxa document system (style.css, vendored unchanged from
   /why-we-exist/) is a READING system. It has covers, sections, cards,
   callouts, chips and lists, and no form controls at all, because no
   document has ever needed one. This file adds the missing vocabulary and
   nothing else. style.css is not edited, so the canon stays one file and
   these additions stay visible as additions.

   Every rule below is built from the tokens already defined in style.css.
   No literal colour appears here, and nothing is defined only inside a
   media or [data-theme] block, so the form follows the page through all
   three theme states without a second palette.

   Tap targets are 44px minimum throughout. Focus is the shared
   :focus-visible ring from style.css, never removed. Motion is opt-in:
   every transition sits behind prefers-reduced-motion. */

/* ---------- progress ---------- */
/* Fixed to the top of the viewport so it is visible on a phone at any
   scroll position. It reports the four required answers, nothing else. */

.progress {
  position:fixed; inset:0 0 auto 0; z-index:30;
  height:3px; background:var(--border);
}
.progress span {
  display:block; height:100%; width:0;
  background:var(--accent);
}
@media (prefers-reduced-motion:no-preference) {
  .progress span { transition:width 220ms ease; }
}

/* ---------- question ---------- */

.q { display:flex; flex-direction:column; gap:13px; }
.q > .label {
  font-family:var(--display); font-size:17px; letter-spacing:-0.02em;
  font-weight:640; max-width:60ch;
}
.q .hint { font-size:14.5px; color:var(--text-muted); max-width:66ch; }
.q .req {
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent-strong);
}

/* ---------- the meter ---------- */
/* Five segments, not stars. Stars read as a consumer review site; segments
   read as an instrument panel. Built on real radio inputs, so a keyboard
   gets native arrow-key behaviour inside the group for free and a screen
   reader announces it as a radio group. The input is clipped rather than
   display:none, because display:none takes it out of the focus order. */

.meter { display:flex; flex-direction:column; gap:9px; }
.meter .segs {
  display:grid; grid-template-columns:repeat(5,1fr); gap:6px;
}
.meter input {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.meter label {
  display:flex; align-items:center; justify-content:center;
  min-height:52px; cursor:pointer;
  font-family:var(--mono); font-size:14px; letter-spacing:0.04em;
  background:var(--surface); color:var(--text-muted);
  border:1px solid var(--border); border-radius:10px;
}
.meter label:hover { background:var(--surface-2); color:var(--text); }
/* Filled up to and including the chosen segment, so it reads as a level
   rather than as one selected box out of five. The fill is applied in
   review.js, because :has() sibling filling is not reliable enough to be
   the only thing carrying the answer. */
.meter label.on {
  background:var(--accent-soft); color:var(--on-soft);
  border-color:color-mix(in srgb, var(--accent) 40%, var(--border));
}
.meter label.pick {
  background:var(--accent); color:var(--on-accent);
  border-color:var(--accent);
}
.meter input:focus-visible + label { outline:2px solid var(--accent); outline-offset:2px; }
.meter .ends {
  display:flex; justify-content:space-between; gap:12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-muted);
}

/* ---------- text inputs ---------- */

.f {
  width:100%; min-height:44px; padding:11px 13px;
  font-family:var(--body); font-size:16px; line-height:1.5; color:var(--text);
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px;
}
textarea.f { min-height:92px; resize:vertical; }
.f::placeholder { color:var(--text-muted); }
.f:hover { border-color:color-mix(in srgb, var(--text-muted) 40%, var(--border)); }

/* ---------- choice row (yes / maybe / no) ---------- */

.choice { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.choice input {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.choice label {
  display:flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 14px; cursor:pointer;
  font-family:var(--body); font-size:15.5px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:10px;
}
.choice label:hover { background:var(--surface-2); }
.choice input:checked + label {
  background:var(--accent); color:var(--on-accent); border-color:var(--accent);
}
.choice input:focus-visible + label { outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- checkbox ---------- */

.checks { display:flex; flex-direction:column; gap:8px; }
.check {
  display:flex; align-items:flex-start; gap:12px;
  min-height:44px; padding:11px 14px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
}
.check:hover { background:var(--surface-2); }
.check input {
  flex:none; width:20px; height:20px; margin:1px 0 0;
  accent-color:var(--accent);
}
.check span { font-size:15.5px; line-height:1.45; }
.check:has(input:checked) {
  background:var(--accent-soft);
  border-color:color-mix(in srgb, var(--accent) 34%, var(--border));
}

/* ---------- grid of fields ---------- */

.pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field > .label {
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--text-muted);
}

/* ---------- buttons ---------- */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:50px; padding:0 24px; cursor:pointer;
  font-family:var(--body); font-size:16px; font-weight:520;
  border-radius:10px; border:1px solid var(--accent);
  background:var(--accent); color:var(--on-accent);
}
.btn:hover { background:var(--accent-strong); border-color:var(--accent-strong); }
.btn[disabled] { opacity:0.5; cursor:not-allowed; }
.btn--quiet {
  background:var(--surface); color:var(--text); border-color:var(--border);
}
.btn--quiet:hover { background:var(--surface-2); border-color:var(--border); }
.btn--wide { width:100%; }
.btns { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }

.linkish {
  align-self:flex-start; padding:10px 0; min-height:44px;
  display:inline-flex; align-items:center;
  background:none; border:0; cursor:pointer;
  font-family:var(--body); font-size:15px; color:var(--text-muted);
  text-decoration:underline; text-underline-offset:3px;
}
.linkish:hover { color:var(--text); }

/* ---------- the honeypot ---------- */
/* Off-screen rather than display:none. A bot that reads computed styles
   skips a hidden field; it fills this one. A person never reaches it:
   tabindex -1, autocomplete off, and aria-hidden in the markup. */

.trap {
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* ---------- error ---------- */

.err {
  display:none; flex-direction:column; gap:9px;
  background:var(--danger-soft); border-radius:var(--r); padding:18px 20px;
  border:1px solid color-mix(in srgb, var(--danger) 34%, var(--border));
}
.err.on { display:flex; }
.err p { color:var(--on-danger); }
.err a { color:var(--on-danger); }

/* ---------- narrow ---------- */

@media (max-width:760px) {
  .pair, .btns { grid-template-columns:1fr; }
  .choice { grid-template-columns:1fr; }
  .meter label { min-height:56px; }
}

/* At 320px the five meter segments still have to fit, so the labels drop
   to the number alone and the gap tightens. Nothing is hidden. */
@media (max-width:360px) {
  .meter .segs { gap:4px; }
  .meter label { font-size:13px; }
}