/* /feedback — the report slip.

   Layout only. Every colour resolves from a main.css token, so the four kind
   accents follow whichever theme the visitor picked instead of carrying a
   second palette to keep in sync.

   The form is a real front plane, the same rule First Class follows: an
   opaque --paper base with the theme's --surface composited above it as a
   wash, written as background longhands. A later `background:` shorthand on
   these selectors would silently let the fixed ambient grid and the petals
   move through a form someone is typing into. */

.feedback-page {
  --fb-front-base: var(--paper);
  --fb-front-wash: var(--surface);
  /* Replaced per kind below. Until one is chosen the card wears the theme's
     own accent, so the page never looks broken before the first click. */
  --fb-kind: var(--accent);
  --fb-tint: color-mix(in srgb, var(--fb-kind) 10%, transparent);
  --fb-edge: color-mix(in srgb, var(--fb-kind) 42%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .feedback-page {
    --fb-tint: var(--accent-soft);
    --fb-edge: var(--line-strong);
  }
}

/* The form carries the chosen kind and each chip carries its own, so an
   unpicked chip still shows the colour it would bring while the card wears
   whichever one is selected. One attribute, both jobs. */
.feedback-page [data-kind="bug"] { --fb-kind: var(--yuzu, #cf9a4c); }
.feedback-page [data-kind="idea"] { --fb-kind: var(--ume, #7a6aa4); }
.feedback-page [data-kind="lesson"] { --fb-kind: var(--matcha, #7f9a74); }
.feedback-page [data-kind="other"] { --fb-kind: var(--aqua, #5a97a0); }

.fb-main {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) clamp(16px, 4vw, 28px) clamp(56px, 9vw, 96px);
}

/* ---- hero ---- */

.fb-hero { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }

.fb-hero__eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 10px;
}

.fb-hero h1 {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.6rem, 4.6vw, 2.5rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 14px;
}

.fb-hero p { color: var(--muted); margin: 0 auto 8px; max-width: 56ch; line-height: 1.7; }
.fb-hero__anon { font-weight: 600; color: var(--ink); }

/* ---- the slip ---- */

.fb-card,
.fb-context,
.fb-thanks {
  background-color: var(--fb-front-base);
  background-image: linear-gradient(var(--fb-front-wash), var(--fb-front-wash));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  background-attachment: scroll;
  background-origin: border-box;
  background-clip: border-box;
  background-blend-mode: normal;
}

.fb-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 34px);
  overflow: hidden;
}

/* The kind's colour as a rule across the top of the slip, so choosing a kind
   changes the whole card rather than only the chip that was clicked. */
.fb-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--fb-kind);
  transition: background-color 200ms ease;
}

.fb-field { margin-bottom: clamp(20px, 3.4vw, 30px); }
.fb-field:last-of-type { margin-bottom: 0; }

.fb-label {
  display: block;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.fb-hint {
  display: block;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 10px;
}

.fb-legend {
  display: block;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  padding: 0;
}

.fb-fieldset { border: 0; padding: 0; margin: 0 0 clamp(20px, 3.4vw, 30px); }

/* ---- kind chips ---- */

.fb-kinds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 520px) {
  .fb-kinds { grid-template-columns: minmax(0, 1fr); }
}

.fb-kind {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  text-align: left;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background-color: var(--fb-front-base);
  background-image: linear-gradient(var(--fb-front-wash), var(--fb-front-wash));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

/* The input stays in the accessibility tree and in the tab order; only its
   own box is taken out of the layout, because the label is the control the
   eye sees. */
.fb-kind__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.fb-kind:hover { border-color: var(--fb-edge); transform: translateY(-1px); }
.fb-kind:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }

/* :has() carries the selected state with scripting off; .is-active is what
   feedback.js sets, so a browser without :has() still shows the choice. */
.fb-kind:has(.fb-kind__input:checked),
.fb-kind.is-active {
  border-color: var(--fb-kind);
  border-width: 2px;
  padding: 11.5px 13.5px;
  background-image:
    linear-gradient(var(--fb-tint), var(--fb-tint)),
    linear-gradient(var(--fb-front-wash), var(--fb-front-wash));
  box-shadow: 0 6px 18px var(--fb-tint);
}

.fb-kind__mark {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  border-radius: 9px;
  background: var(--fb-tint);
}

.fb-kind__text { display: block; min-width: 0; }
.fb-kind__title { display: block; font-weight: 700; line-height: 1.35; }
.fb-kind__hint {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 2px;
}

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

.fb-input,
.fb-select,
.fb-textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background-color: var(--fb-front-base);
  background-image: linear-gradient(var(--fb-front-wash), var(--fb-front-wash));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 1.5px solid var(--line-strong);
  border-radius: 11px;
  padding: 12px 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.fb-textarea { min-height: 190px; resize: vertical; line-height: 1.7; }

.fb-input:focus,
.fb-select:focus,
.fb-textarea:focus {
  outline: none;
  border-color: var(--fb-kind);
  box-shadow: 0 0 0 3px var(--fb-tint);
}

.fb-input::placeholder,
.fb-textarea::placeholder { color: var(--muted); opacity: 1; }

.fb-count {
  display: block;
  text-align: right;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.fb-count.is-full { color: var(--accent-ink); font-weight: 700; }

/* The decoy. Removed from view, from the tab order, and from the accessibility
   tree, so no person is ever asked to leave it alone. */
.fb-decoy {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- the disclosure ---- */

.fb-context {
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  padding: 4px 16px;
  margin-bottom: clamp(20px, 3.4vw, 30px);
}

.fb-context > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  padding: 12px 0;
  list-style: none;
}

.fb-context > summary::-webkit-details-marker { display: none; }

.fb-context > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--fb-kind);
  transition: transform 160ms ease;
}

.fb-context[open] > summary::before { transform: rotate(90deg); }
.fb-context:focus-within > summary { outline: none; }
.fb-context > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.fb-context__body { padding-bottom: 14px; }
.fb-context__lead { font-size: 0.86rem; color: var(--muted); line-height: 1.65; margin: 0 0 12px; }

.fb-preview {
  margin: 0 0 14px;
  padding: 12px 14px;
  max-height: 260px;
  overflow: auto;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 9px;
  /* Wrapped, not scrolled sideways. The panel promises to show exactly what
     is sent; a long body line disappearing off the right edge would make it
     show most of it. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fb-switch {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.fb-switch input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--fb-kind); }
.fb-switch__text { display: block; }
.fb-switch__title { display: block; font-weight: 600; color: var(--ink); }
.fb-switch__hint { display: block; font-size: 0.8rem; color: var(--muted); line-height: 1.5; margin-top: 2px; }

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

.fb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.fb-submit {
  font: inherit;
  font-weight: 700;
  color: var(--btn-fg);
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  padding: 13px 30px;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.fb-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 24px var(--accent-soft); }
.fb-submit:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.fb-submit[aria-busy="true"] { opacity: 0.72; cursor: progress; }

.fb-note { font-size: 0.82rem; color: var(--muted); }

.fb-status {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 10px;
  font-weight: 600;
  color: var(--ink);
  background: var(--accent-soft);
  border: 1px solid var(--line-strong);
}

.fb-status.is-error { border-color: var(--accent); }

/* ---- the receipt ---- */

.fb-thanks {
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow);
  padding: clamp(30px, 6vw, 52px) clamp(20px, 4vw, 34px);
}

.fb-thanks:focus { outline: none; }
.fb-thanks:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.fb-thanks h2 {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.35rem, 3.6vw, 1.9rem);
  color: var(--ink);
  margin: 0 0 10px;
}

.fb-thanks__body { color: var(--muted); margin: 0 0 26px; line-height: 1.7; }

.fb-reference {
  display: inline-block;
  padding: 14px 26px;
  border: 2px dashed var(--accent);
  border-radius: 12px;
  background: var(--accent-soft);
}

.fb-reference__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--accent-ink);
  margin-bottom: 6px;
}

.fb-reference__code {
  display: block;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink);
}

.fb-thanks__hint { font-size: 0.86rem; color: var(--muted); margin: 18px auto 26px; max-width: 44ch; line-height: 1.65; }

.fb-again {
  font: inherit;
  font-weight: 600;
  color: var(--accent-ink);
  background: transparent;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 10px 24px;
  cursor: pointer;
}

.fb-again:hover { border-color: var(--accent); }
.fb-again:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* A small ring of petals, drawn once when the receipt arrives. Decorative, so
   it is behind the copy and hidden from assistive technology. */
.fb-thanks__petals { position: absolute; inset: 0; pointer-events: none; }
.fb-thanks__petals span {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 10px 0 10px 0;
  background: var(--petal, #ff9dc0);
  opacity: 0;
}

.fb-thanks.is-arriving { animation: fb-rise 460ms cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.fb-thanks.is-arriving .fb-thanks__petals span { animation: fb-scatter 1500ms ease-out both; }

.fb-thanks__petals span:nth-child(1) { --fb-dx: -150px; --fb-dy: -90px; animation-delay: 40ms; }
.fb-thanks__petals span:nth-child(2) { --fb-dx: 160px; --fb-dy: -70px; animation-delay: 90ms; }
.fb-thanks__petals span:nth-child(3) { --fb-dx: -110px; --fb-dy: 110px; animation-delay: 150ms; }
.fb-thanks__petals span:nth-child(4) { --fb-dx: 130px; --fb-dy: 120px; animation-delay: 60ms; }
.fb-thanks__petals span:nth-child(5) { --fb-dx: -190px; --fb-dy: 30px; animation-delay: 200ms; }
.fb-thanks__petals span:nth-child(6) { --fb-dx: 200px; --fb-dy: 20px; animation-delay: 120ms; }

@keyframes fb-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes fb-scatter {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
  18% { opacity: 0.85; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--fb-dx)), calc(-50% + var(--fb-dy))) scale(1) rotate(220deg);
  }
}

/* ---- the way out ---- */

.fb-elsewhere { margin-top: clamp(26px, 4vw, 38px); text-align: center; }
.fb-elsewhere p { color: var(--muted); margin: 0 0 8px; }
/* Padded to clear the 28px tap minimum the viewport auditor enforces; a bare
   inline link measured 20px tall. */
.fb-elsewhere a {
  display: inline-block;
  padding: 6px 10px;
  color: var(--accent-ink);
  font-weight: 600;
}

/* ---- the page /api/feedback returns when scripting is off ---- */

.receipt {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background: var(--paper, #faf5ef);
  color: var(--ink, #26201d);
}

.receipt__card {
  max-width: 44rem;
  padding: clamp(24px, 5vw, 40px);
  border: 1px solid var(--line, rgba(38, 32, 29, 0.11));
  border-radius: 14px;
  background: var(--surface, #ffffff);
  line-height: 1.75;
}

.receipt__card h1 {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  margin: 0 0 16px;
}

.receipt__links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
.receipt__links a { color: var(--accent-ink, #8c3556); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .fb-kind,
  .fb-submit,
  .fb-card::before,
  .fb-input,
  .fb-select,
  .fb-textarea,
  .fb-context > summary::before { transition: none; }
  .fb-kind:hover,
  .fb-submit:hover { transform: none; }
  .fb-thanks.is-arriving { animation: fb-fade 200ms ease both; }
  .fb-thanks.is-arriving .fb-thanks__petals span { animation: none; }
}

@keyframes fb-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}