/* Rinse Repeat Labs tester portal. Strict CSP: no inline styles or scripts. */

:root {
  --ink: #14212b;
  --ink-soft: #52636d;
  --surface: #f3f6f7;
  --panel: #ffffff;
  --rule: #d5dde1;
  --water: #1c6e8c;
  --water-ink: #ffffff;
  --wash: #e4eff3;
  --focus: #1c6e8c;
  --danger: #b3261e;
  --ok: #2e7d4f;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e3ecef;
    --ink-soft: #9fb1b9;
    --surface: #0f1a20;
    --panel: #16242c;
    --rule: #2a3a43;
    --water: #5fb3d1;
    --water-ink: #06141a;
    --wash: #1b2f38;
    --focus: #7cc6e0;
    --danger: #ff8a80;
    --ok: #7fd1a0;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--surface);
  color: var(--ink);
  font: 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: var(--water); }

.top {
  display: flex; align-items: center; gap: 12px;
  max-width: 760px; margin: 0 auto; padding: 18px 16px;
}
.top h1 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; }
.top h1 img { width: 22px; height: 22px; }
.top .spacer { flex: 1; }
.top .who { font-size: 14px; color: var(--ink-soft); overflow-wrap: anywhere; }

main { max-width: 760px; margin: 0 auto; padding: 0 16px 48px; }

.card {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 22px 24px; margin-bottom: 16px;
}
.narrow { max-width: 440px; margin: 8vh auto 0; }
.narrow h2 { margin: 0 0 6px; font-size: 22px; }
.narrow p { margin: 0 0 16px; color: var(--ink-soft); }

label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
input[type=email] {
  width: 100%; padding: 10px 12px; font-weight: 400;
  border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--panel);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--rule);
  background: var(--panel); cursor: pointer; text-decoration: none; color: var(--ink); font-weight: 600;
}
.btn.primary { background: var(--water); border-color: var(--water); color: var(--water-ink); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--ink-soft); font-weight: 500; }
.btn[disabled] { opacity: 0.6; cursor: default; }
.btn.small { padding: 5px 10px; font-size: 14px; }
.stack { display: grid; gap: 14px; }

.notice { border-radius: var(--radius-sm); padding: 10px 14px; font-size: 15px; background: var(--wash); }
.notice.error { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--panel)); }

.intro { margin: 8px 0 20px; }
.intro h2 { margin: 0 0 4px; font-size: 24px; }
.intro p { margin: 0; color: var(--ink-soft); }

.round header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; }
.round h3 { margin: 0; font-size: 19px; }
.round .app { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--water); }
.chip { font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 999px; background: var(--wash); white-space: nowrap; }
.chip.closed { color: var(--ink-soft); }
.facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 14px; color: var(--ink-soft); }
.instructions { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 16px; }
.round.closed { opacity: 0.8; }

.empty { text-align: center; color: var(--ink-soft); padding: 36px 20px; }
.empty strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }

@media (max-width: 560px) {
  .card { padding: 18px 16px; }
  .top .who { display: none; }
}