/* The feedback page, drawn from the Figma frame "C · Ten seconds" (104:382).
   Colours are trylo's own tokens, the same values Theme.swift uses, so the page
   inside the app looks like the app around it. */

:root {
  --canvas: #eef2fd;
  --ink: #14142b;
  --muted: #555964;
  --accent: #3b34f0;
  --surface: #ffffff;
  --hairline: #e6eaf6;
  --field: #f2f4fb;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 430px;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 24px var(--bottom-clearance);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

:root {
  /* Room for a browser's bottom toolbar.
     `env(safe-area-inset-bottom)` does NOT account for it - that inset describes
     the home indicator, and an in-app Safari sheet draws its back/share/reload bar
     over the web content on top of that. So Send sat underneath the toolbar with
     nothing in the page's own measurements to suggest it. 76px is the height of
     that bar; the max() keeps it correct on a device with a taller home indicator
     and in a plain tab where there is no bar at all. */
  --bottom-clearance: max(88px, calc(76px + env(safe-area-inset-bottom)));
}

/* Small phones - SE and below. Everything steps down together rather than the
   layout being allowed to overflow. */
@media (max-width: 360px) {
  .page { padding-left: 16px; padding-right: 16px; gap: 18px; }
  .heading { font-size: 24px; line-height: 30px; }
  .moods { gap: 8px; }
  .followup { padding: 16px; gap: 10px; }
}

/* Landscape, or anything short: the whole point is that it takes ten seconds, so
   nothing may push Send below the fold. */
@media (max-height: 620px) {
  .page { gap: 16px; }
  .heading { font-size: 24px; line-height: 30px; }
  textarea { min-height: 84px; }
}

/* ---------- Nav ---------- */

/* ---------- Heading ---------- */

.heading {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: -0.4px;
  white-space: pre-line;
}

/* ---------- Moods ---------- */

.moods { display: flex; gap: 12px; }

.mood {
  flex: 1 1 0;
  /* Sized from the VIEWPORT, not from a fixed number.
     A fixed 118pt tile is a third of a small iPhone's usable height for a control
     that answers one question, and it pushed the follow-up card and Send below the
     fold. `clamp` lets the three tiles shrink together on a narrow phone and stop
     growing on a wide one, so the same rule fits an SE and a Pro Max without a
     breakpoint for each. */
  min-width: 0;
  height: clamp(72px, 21vw, 92px);
  border-radius: 20px;
  border: 1.5px solid var(--hairline);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font: inherit;
  color: var(--muted);
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 500;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.mood-icon { display: block; width: clamp(26px, 7.5vw, 32px); height: clamp(26px, 7.5vw, 32px); color: var(--muted); }
.mood-icon svg { display: block; width: 100%; height: 100%; }
.mood[aria-pressed="true"] .mood-icon { color: var(--accent); }

.mood[aria-pressed="true"] {
  border: 2px solid var(--accent);
  background: rgba(255, 255, 255, 0.6);
  color: var(--accent);
  font-weight: 600;
}

/* ---------- Follow-up ---------- */

.followup {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(28, 25, 124, 0.05);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Hidden until a mood is chosen: the question depends on the answer, and asking
   "what made it great?" before anyone said it was great is a leading question. */
.followup[hidden] { display: none; }

.followup h2 { margin: 0; font-size: 17px; font-weight: 600; }

/* A GRID, not a wrapping row.
   Sizing chips to fit was chasing the text: "It heard me right" and "The
   reminders" pair happily, "Too many reminders" and "It was slow" do not, and the
   badges are editable from the dashboard so tomorrow's wording is unknown. Two
   equal columns means every row holds two whatever anyone types - no wrapping to
   predict and nothing to re-tune when the copy changes. */
.chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.chip {
  /* Sized so TWO fit on a row at 320pt, which is where they were stacking one per
     line and turning a four-option question into four paragraphs. "It heard me
     right" and "The reminders" together need about 250pt at the old size and the
     row is 232. */
  min-height: 36px;
  padding: 8px 12px;
  /* The cell decides the width; long text wraps inside its own badge rather than
     pushing the grid apart. */
  min-width: 0;
  overflow-wrap: break-word;
  border: 0;
  border-radius: 20px;
  background: var(--field);
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(13px, 3.6vw, 14px);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.chip[aria-pressed="true"] { background: var(--accent); color: #fff; font-weight: 600; }

textarea {
  width: 100%;
  /* Shorter on small screens so the Send button stays reachable without scrolling
     past the fold, taller where there is room. */
  min-height: clamp(88px, 15vh, 130px);
  resize: vertical;
  border: 0;
  border-radius: 14px;
  background: var(--field);
  padding: 14px 16px;
  color: var(--ink);
  /* MUST be at least 16px, or iOS Safari zooms the page when the field takes
     focus - and having zoomed, it does not zoom back.
     Longhands, never the `font:` shorthand: its family slot cannot be `inherit`,
     which makes the whole declaration invalid and silently drops the size with it.
     That is exactly how this field ended up at the browser default and zooming. */
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
}

textarea::placeholder { color: var(--muted); font-size: 15px; }
textarea:focus-visible, .chip:focus-visible, .mood:focus-visible, .send:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- CTA ---------- */

.cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.send {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 28px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(59, 52, 240, 0.28);
}

.send:disabled { opacity: 0.45; box-shadow: none; cursor: default; }
.error { margin: 0; font-size: 13px; color: #c0392b; min-height: 1em; }
.offline { margin: 0; font-size: 15px; color: var(--muted); }

/* ---------- Thanks ---------- */

.thanks {
  min-height: 60vh;
  padding-bottom: var(--bottom-clearance);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.thanks h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.3px; }
.thanks p { margin: 0; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}