/* Sizing here is measured off the live Prosperly page so the form matches what
   clients see today: full-bleed card, 64px icons, 48px pill buttons, Manrope.
   Every value marked below is overwritten at runtime from the layout config, so
   the admin page can change size without touching this file.

   The rating icons themselves are deliberately NOT Prosperly's -- see icons.js. */

:root {
  --accent: #152449;

  /* set from config.layout */
  --card-max: none;
  --logo-max: 420px;
  --face: 64px;
  --star: #c79a3c;
  --card-radius: 12px;
  --btn-radius: 24px;
  /* Quoted: an unquoted "Source Sans 3" is invalid CSS -- a family name
     token cannot start with a digit, and it invalidates the whole stack. */
  --font: "Source Sans 3";
  --heading-font: "Playfair Display";

  --ink: #16181d;
  --muted: #8d9299;
  --line: #e3e6ec;
  --bg: #f5f6f8;
  --surface: #fff;
  --shadow: 0 1px 2px rgba(16, 18, 23, .05), 0 12px 32px rgba(16, 18, 23, .07);
}

* { box-sizing: border-box; }

/* The `hidden` attribute must win over any display rule below, otherwise a
   panel with its own `display` stays on screen after being hidden. */
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 16px;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--font), system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.card {
  width: 100%;
  max-width: var(--card-max);
  padding: 24px 20px 32px;
  border-radius: var(--card-radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}

.logo {
  width: 100%;
  max-width: var(--logo-max);
  height: auto;
  margin: 8px auto 24px;
  display: block;
}

h1 {
  margin: 0 0 10px;
  font: 700 24px/1.25 var(--heading-font), var(--font), Georgia, serif;
  letter-spacing: -.01em;
}

.body {
  max-width: 52ch;
  margin: 0 auto 8px;
  color: var(--muted);
  font-size: 15px;
}

.body:empty { display: none; }

/* ---- rating picker ---------------------------------------------------- */

.ratings {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 30px 0 16px;
}

.rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 2px solid transparent;
  border-radius: 14px;
  background: none;
  /* One colour drives icon and label together, so every icon set themes itself
     without needing rules of its own. */
  color: #9aa0aa;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .12s;
}

.rating .ic { display: block; line-height: 0; }

.rating svg {
  width: var(--face);
  height: auto;   /* each set carries its own aspect; see icons.js */
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
}

/* Anything meant to be solid rather than outlined. */
.rating svg .f { fill: currentColor; stroke: none; }

/* Gold, regardless of the accent colour or selection state -- a star that turns
   grey when unselected stops reading as a rating. */
.rating svg .g { fill: var(--star); stroke: var(--star); }

.rating .lb { color: var(--ink); font-weight: 500; transition: color .15s; }

.rating:hover { transform: translateY(-2px); color: var(--ink); }

.rating[aria-checked="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, white);
  color: var(--accent);
}

.rating[aria-checked="true"] .lb { color: var(--accent); }

/* Words-only set: with no icon, the label carries the choice -- and needs a
   visible outline, or it does not read as something you can tap. */
.ratings.no-icons .rating { padding: 16px 22px; border-color: var(--line); }
.ratings.no-icons .rating:hover { border-color: #c8ccd6; }
.ratings.no-icons .rating[aria-checked="true"] { border-color: var(--accent); }
.ratings.no-icons .lb { font-size: 17px; font-weight: 650; }

.rating:focus-visible,
.primary:focus-visible,
.ghost:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

.primary {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
}

.primary:hover:not(:disabled) { filter: brightness(.93); }
.primary:disabled { opacity: .4; cursor: not-allowed; }

.ghost {
  display: inline-block;
  margin-top: 22px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.ghost:hover { color: var(--ink); }

/* ---- feedback form --------------------------------------------------- */

form {
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}

label {
  display: block;
  margin: 16px 0 6px;
  font-size: 14px;
  font-weight: 600;
}

.req { color: var(--accent); }
.opt { color: var(--muted); font-weight: 400; }

textarea, input {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* 16px stops iOS Safari zooming on focus */
  resize: vertical;
}

textarea:focus, input:focus { border-color: var(--accent); }

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

#submit-feedback { margin-top: 24px; }

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

.error {
  margin: 16px 0 0;
  padding: 11px 13px;
  border-radius: 9px;
  background: #fdecea;
  color: #99231a;
  font-size: 14px;
}

.hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.hint:empty { display: none; }

.alt {
  max-width: 560px;
  margin: 24px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.alt a { color: var(--accent); }

/* ---- done ------------------------------------------------------------ */

.tick {
  width: 60px;
  height: 60px;
  margin: 8px auto 20px;
  display: block;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tick circle { opacity: .28; }

.footer {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.footer:empty { display: none; border: 0; }

/* ---- responsive ------------------------------------------------------ */

/* Tablet and below: Prosperly widens the side padding here. */
@media (max-width: 768px) {
  .card { padding: 20px 24px 28px; }
  h1 { font-size: 22px; }
  .logo { max-width: min(var(--logo-max), 260px); }
}

@media (max-width: 460px) {
  body { padding: 12px; }
  .card { padding: 18px 16px 24px; }
  h1 { font-size: 20px; }
  .body { font-size: 14.5px; }

  /* Keep all three options on one row -- they are the whole interaction, and
     stacking them buries "Bad" below the fold. Shrink instead of wrap. */
  .ratings { gap: 6px; margin: 24px 0 14px; }
  .rating { padding: 8px 2px; gap: 6px; font-size: 14px; }
  .rating svg { width: min(var(--face), 56px); }

  .grid { grid-template-columns: 1fr; gap: 0; }
  .footer { margin-top: 26px; }
}

@media (max-width: 340px) {
  .rating svg { width: 46px; }
  .rating { font-size: 13px; }
}

/* Landscape phones: stop the card being taller than the screen. */
@media (max-height: 480px) and (orientation: landscape) {
  .logo { max-width: min(var(--logo-max), 180px); margin-bottom: 14px; }
  .ratings { margin: 18px 0 12px; }
}

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