/* AQUAffection Leak Report — the page behind the QR code.
   Built for one situation: somebody standing in a bathroom, one hand, poor light, in a hurry.
   So everything is large, nothing is subtle, and the only control that matters is under the
   thumb at the bottom of the screen. The palette is the admin app's, so the two are visibly
   the same company. */
:root {
  --navy1: #142F5C;
  --navy2: #1b3e78;
  --cyan: #1CA3D6;
  --cyan-dark: #158ab8;
  --canvas: #eef2f7;
  --card: #ffffff;
  --ink: #16233b;
  --muted: #64748b;
  --line: #dbe3ee;
  --ok: #1a9e63;
  --bad: #d64545;
  --radius: 14px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font: 16px/1.45 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--canvas); color: var(--ink);
  min-height: 100dvh; display: flex; flex-direction: column;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.centre { text-align: center; }
h1 { line-height: 1.2; }

/* ---------- header ---------- */
.hdr {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(100deg, var(--navy1), var(--navy2));
  color: #fff; padding: 12px 18px;
  padding-top: calc(12px + env(safe-area-inset-top));
}
.hdr-logo { height: 30px; }
.hdr-title { font-size: 17px; font-weight: 600; letter-spacing: .3px; }

.wrap { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: 18px 16px 0; }

/* ---------- where you are ----------
   The first thing on screen, because the first question in the reporter's head is "did I scan
   the right one". It reads as a statement of fact, not a form field. */
.where {
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--cyan);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 18px;
}
.where-site { font-weight: 700; font-size: 17px; }
.where-loc { color: var(--muted); font-size: 15px; margin-top: 2px; }

.ask { font-size: 21px; margin: 0 0 12px; }

/* ---------- the choice ----------
   Two columns of large targets. 108px tall is above the 44px minimum by a wide margin on
   purpose: this is tapped by people who are not looking carefully. */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 108px; padding: 12px 8px;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
  font: inherit; font-weight: 600; color: var(--ink); text-align: center; cursor: pointer;
  transition: border-color .12s, background .12s, transform .06s;
}
.opt .o-ico { font-size: 30px; line-height: 1; }
.opt .o-label { font-size: 14.5px; line-height: 1.25; }
.opt:active { transform: scale(.97); }
/* The chosen one. Colour AND a tick AND a heavier border — a single cue in colour alone is
   invisible to a good number of the people who will use this. */
.opt[aria-checked="true"] {
  border-color: var(--cyan); background: #e2f3fb; color: #0d5a7a;
}
.opt[aria-checked="true"]::after {
  content: "✓"; position: absolute; top: 8px; right: 8px;
  color: #fff; background: var(--cyan); width: 24px; height: 24px; border-radius: 50%;
  font-size: 15px; line-height: 24px; font-weight: 700; text-align: center;
}

/* ---------- the optional extras ---------- */
.extras { margin-top: 18px; display: grid; gap: 8px; }
.extra {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; font: inherit; color: var(--ink); cursor: pointer;
}
.extra-ico { font-size: 22px; }
.extra strong { display: block; font-size: 15px; }
.extra small { color: var(--muted); font-size: 13px; }
.extra[aria-expanded="true"], .extra.filled { border-color: var(--cyan); }
#note-wrap textarea {
  width: 100%; margin-top: 8px; padding: 12px; font: inherit;
  border: 1px solid var(--line); border-radius: var(--radius); resize: vertical;
}
#thumb-wrap { margin-top: 12px; text-align: center; }
#thumb { border-radius: var(--radius); border: 1px solid var(--line); max-height: 220px; }
.linkish { background: none; border: 0; color: var(--cyan-dark); font: inherit; text-decoration: underline; cursor: pointer; padding: 8px; }

.err { color: var(--bad); background: #fdecec; border: 1px solid #f5c6c6; border-radius: 10px; padding: 10px 12px; }

/* ---------- the send bar ----------
   Fixed, full width, and the last thing between the person and being done. It says what it is
   waiting for while nothing is chosen, so a disabled button is never a dead end with no reason. */
.spacer-for-bar { height: 110px; }
.sendbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: rgba(238,242,247,.94); backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.send {
  display: block; width: 100%; max-width: 528px; margin: 0 auto;
  min-height: 58px; border: 0; border-radius: var(--radius);
  background: var(--cyan); color: #fff; font: inherit; font-size: 18px; font-weight: 700;
  cursor: pointer;
}
.send:disabled { background: #c3ccd8; color: #6b7686; cursor: default; }
.send:not(:disabled):active { background: var(--cyan-dark); }

/* ---------- done ---------- */
.done-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 22px; text-align: center; margin-top: 22px;
}
.tick {
  width: 68px; height: 68px; border-radius: 50%; background: var(--ok); color: #fff;
  font-size: 38px; line-height: 68px; margin: 0 auto 14px;
}
.done-card h1 { font-size: 24px; margin: 0 0 8px; }
.btn-ghost {
  margin-top: 20px; background: none; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 18px; font: inherit; color: var(--ink); cursor: pointer;
}

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card h1 { font-size: 20px; margin: 0 0 10px; }
.skeleton { height: 76px; border-radius: var(--radius); background: linear-gradient(90deg,#e4eaf2,#eef2f7,#e4eaf2); background-size: 200% 100%; animation: sk 1.2s linear infinite; margin-bottom: 14px; }
@keyframes sk { to { background-position: -200% 0; } }

.ftr {
  text-align: center; color: var(--muted); font-size: 12.5px;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
}
/* While the send bar is up it would sit on top of the footer, so the footer gets out of the way. */
body.reporting .ftr { padding-bottom: 130px; }

/* A phone in a bathroom is the whole audience, but a manager will open this on a laptop to see
   what their people see. Wider screens just get more room between the options. */
@media (min-width: 620px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}