/* Feedback form — page-specific styles. Colors, type, and spacing come from
   ../tokens.css. Shares its input/label/form-error/card rules with
   ../order/order.css by design (same values, not imported — each page
   keeps its own stylesheet, per the site's existing pattern). */

body { padding: 0 var(--space-4) var(--space-8); }

.hero {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--space-8) 0 var(--space-4);
  text-align: left;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-terracotta-dark);
  margin: 0 0 var(--space-2);
}

.hero h1 { font-size: var(--text-2xl); line-height: 1; margin-bottom: 0; color: var(--color-terracotta); }
.hero .logo-by { margin-top: -3px; }

.intro {
  font-size: var(--text-base);
  color: var(--color-ink);
  margin: var(--space-4) 0 0;
}

main {
  max-width: 700px;
  margin: 0 auto;
}

.card {
  background: var(--color-card);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.card h2 { font-size: var(--text-h2); margin-bottom: var(--space-3); }

/* Three named sections ("How was it?" / "In your words" / "One more
   thing") — same divider-between-groups device the order form uses for
   its own sections, so the feedback form reads as part of the same site
   instead of a bare, sectionless list of questions. Symmetric padding on
   both sides of every divider — a smaller one-sided version (padding
   only below each divider, none above) read as too tight right before
   the line. The earlier doubled-up spacing this replaced was a separate,
   already-fixed bug (#final-thoughts-question/#consent-question below),
   not a reason to make dividers this tight. */
#feedback-form > section {
  padding: var(--space-5) 0;
}
#feedback-form > section:first-child { border-top: var(--border-hairline); }
#feedback-form > section + section {
  border-top: var(--border-hairline);
}
#feedback-form > section h2 { font-size: var(--text-h2); margin-bottom: var(--space-4); }

/* The five scale questions inside "How was it?" — grouped under one
   heading, so a light gap between them (no divider) is enough. */
fieldset {
  border: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}
fieldset:last-child { margin-bottom: 0; }

legend {
  padding: 0;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
  color: var(--color-ink);
}

label:last-child { margin-bottom: 0; }

/* The final section's questions each live in their own wrapper div
   (#final-thoughts-question, #consent-question, #name-section) rather
   than as true label siblings the way "written questions" are — so
   label:last-child above (correctly) zeroes each wrapper's own single
   label, which otherwise left no gap at all between final-thoughts and
   the consent question right after it. Space them explicitly instead. */
#final-thoughts-question, #consent-question { margin-bottom: var(--space-4); }

.optional-hint { font-weight: 400; color: var(--color-ink-soft); }

input[type="text"],
textarea {
  display: block;
  width: 100%;
  margin-top: var(--space-1);
  padding: var(--space-3);
  font-family: inherit;
  font-size: var(--text-input);
  font-weight: 400;
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-ink);
}

input[type="text"]:focus,
textarea:focus {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 1px;
}

textarea { resize: vertical; min-height: 60px; }

.field-hint {
  font-size: var(--text-xs);
  color: var(--color-terracotta-dark);
  margin: var(--space-2) 0 0;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Scale questions: real radio buttons in a row, connected by a track
   line so the row reads as one ordered dimension, with each option's
   label underneath its own dot. Color-coded by what the answer actually
   means — reusing the same sage/mustard-dark/error vocabulary already
   used for order status in /admin (fulfilled/confirmed/cancelled), not a
   new color scheme — set per option via data-tier in the HTML rather
   than inferred from position, since "portion size" has its best answer
   in the middle (positive) with both ends negative, unlike the other
   four questions which run positive → neutral → negative left to right. */
.scale-options {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-1);
  /* Inset from the row's own edges — the first/last dot still spreads
     out further than sitting centered in an equal-width column (see
     .scale-option below), just not flush against the true edge. Wider
     than it looks like it needs to be: the label below an edge dot (see
     .scale-label) is centered on that dot, not on the whole column, so
     it needs real room on the outside of the dot to avoid crowding. */
  padding: 0 var(--space-4);
}

/* The connecting line, sitting behind the dots at their vertical center
   (half the dot's 22px height). Dotted, not solid — and inset to exactly
   where the first/last dot centers actually land (see .scale-option
   below): the row's own edge padding, plus 11px (half the dot's own
   width), since those two dots are edge-aligned within their column
   rather than centered in it. Getting this inset right matters — a
   mismatch between where this line assumes the end dots are and where
   they actually render is what makes the line visibly poke out past
   them. */
.scale-options::before {
  content: "";
  position: absolute;
  top: 11px;
  left: calc(var(--space-4) + 11px);
  right: calc(var(--space-4) + 11px);
  border-top: 2px dotted var(--color-border);
  z-index: 0;
}

.scale-option {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
  /* Reserves room below the dot for its label, which is positioned
     absolutely (see .scale-label) rather than left in normal flow —
     absolute positioning is what lets the label center on the dot's own
     position instead of the whole (much wider) equal-width column. Sized
     for two full lines of the label's own line-height (26px top offset +
     ~34px for two lines, plus a few px of real slack rather than cutting
     it exactly at the wire). */
  padding-bottom: 42px;
}

/* The first and last dots push out to the row's own edges instead of
   sitting centered in their own equal-width column — spreads the whole
   scale out to fill the row, rather than bunching every dot toward the
   middle third. */
.scale-option:first-child input { align-self: flex-start; }
.scale-option:last-child input { align-self: flex-end; }

.scale-option input {
  appearance: none;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-cream);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.scale-option input:focus-visible { outline: 2px solid var(--color-terracotta); outline-offset: 2px; }

/* Absolutely positioned and centered on its own dot's actual x-position
   (11px — half the dot's 22px width — for the two edge dots, which sit
   flush against their column's own start/end; 50% for every dot in
   between, which are centered in their column already). A fixed width
   narrow enough to force a genuine two-line wrap for a label like "Not
   for me" or "Could be better" (90px measured too close to a phone-width
   viewport's own edge — the right-edge label, centered on a dot that's
   already near the true edge, was bleeding past it) — 60px reliably
   wraps both onto two clean lines, each comfortably within the row's own
   edge padding on either side. A slightly open line-height gives the two
   lines real breathing room instead of sitting right on top of each other. */
.scale-label {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  font-size: var(--text-xs);
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-ink-soft);
  text-align: center;
  transition: color 0.15s;
}

.scale-option:first-child .scale-label { left: 11px; }
.scale-option:last-child .scale-label { left: calc(100% - 11px); }

/* Unchecked: a tinted ring previewing what this option means, so the
   scale's color logic reads even before choosing — an empty ring, not
   filled. Checked: a real radio-button look, not a solid filled circle —
   the ring stays, plus a smaller solid dot appears inside it with a gap
   between the two, via an inset box-shadow the exact color of the page
   background "punching" a ring-shaped gap out of an otherwise fully
   filled circle. One color set per tier, referenced by the three rules
   below it, rather than repeating the tier->color mapping three times. */
.scale-option[data-tier="positive"] { --tier-color: var(--color-sage); }
.scale-option[data-tier="neutral"] { --tier-color: var(--color-mustard-dark); }
.scale-option[data-tier="negative"] { --tier-color: var(--color-error); }

.scale-option input { border-color: color-mix(in srgb, var(--tier-color) 75%, var(--color-border)); }
.scale-option input:checked { background: var(--tier-color); border-color: var(--tier-color); box-shadow: inset 0 0 0 4px var(--color-cream); }
.scale-option input:checked ~ .scale-label { color: var(--tier-color); }

/* The consent question ("would you be okay with us sharing...") isn't a
   scale — it's a plain yes/no choice, not an ordered magnitude — so it
   gets real buttons instead of the dot-and-track treatment above. Sized
   to their own content, not stretched to fill the row — just two compact
   buttons side by side — and a smaller, squarer radius than the pills
   used elsewhere, so they read as distinct buttons rather than another
   pill control. */
.consent-options {
  display: flex;
  gap: var(--space-2);
}

.consent-option {
  position: relative;
  margin: 0;
  font-weight: 400;
}

.consent-option input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.consent-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-soft);
  background: var(--color-card);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.consent-option[data-tier="positive"] input:checked + span { color: var(--color-on-accent); background: var(--color-sage); border-color: var(--color-sage); }
.consent-option[data-tier="negative"] input:checked + span { color: var(--color-on-accent); background: var(--color-error); border-color: var(--color-error); }

.consent-option input:focus-visible + span { outline: 2px solid var(--color-terracotta); outline-offset: 2px; }

.form-error {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
  color: var(--color-error);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}

#submit-btn {
  display: block;
  width: 100%;
  padding: var(--space-4);
  font-size: var(--text-base);
  font-weight: 700;
  font-family: inherit;
  color: var(--color-on-accent);
  background: var(--color-terracotta);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-top: var(--space-5);
}

#submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
#submit-btn:not(:disabled):hover { background: var(--color-terracotta-dark); }
#submit-btn:focus-visible { outline: 2px solid var(--color-terracotta); outline-offset: 2px; }

.thank-you { text-align: left; margin-top: var(--space-5); }

/* Same values as ../order/order.css's .closed-banner — once feedback is
   closed, this is the main thing on the page, styled to actually read as
   a notice rather than another quiet card. */
.closed-banner {
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  background: color-mix(in srgb, var(--color-terracotta) 8%, transparent);
  border: 1.5px solid var(--color-terracotta);
  padding: var(--space-5);
  text-align: left;
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: 600;
}
.closed-banner a { color: inherit; text-decoration: underline; }