:root {
  color-scheme: light dark;
  --bg: #F0FDFA;
  --surface: #FFFFFF;
  --text: #134E4A;
  --muted: #475569;
  --line: #6F918C;
  --accent: #0F766E;
  --on-accent: #FFFFFF;
  --tint: #CCFBF1;
  --rec: #9A3412;
  --rec-bg: #FFEDD5;
  --bad: #B91C1C;
  font: 100%/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1413;
    --surface: #13201F;
    --text: #E6F4F1;
    --muted: #A3B8B5;
    --line: #5F827D;
    --accent: #2DD4BF;
    --on-accent: #042F2E;
    --tint: #134E4A;
    --rec: #FDBA74;
    --rec-bg: #431407;
    --bad: #FCA5A5;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); }
main {
  max-width: 34rem;
  margin: 0 auto;
  padding: max(1rem, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
header { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: .5rem; }
h1 { margin: 0; font-size: 1.5rem; }
h2 { margin: 0 0 .5rem; font-size: 1.125rem; line-height: 1.3; overflow-wrap: anywhere; white-space: pre-wrap; max-height: 40vh; overflow-y: auto; }
.lead { color: var(--muted); }
#status { min-height: 1.5rem; margin: 0 0 .5rem; color: var(--muted); }
#status.bad { color: var(--bad); }
#status:not(:empty) { position: sticky; top: env(safe-area-inset-top); z-index: 1; background: var(--bg); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 16px; margin-bottom: .75rem; }
.meta { margin: 0 0 .25rem; font-size: .875rem; color: var(--muted); overflow-wrap: anywhere; }
.ctx { margin: 0 0 .75rem; color: var(--muted); overflow-wrap: anywhere; white-space: pre-wrap; max-height: 40vh; overflow-y: auto; }
fieldset { border: 0; margin: .5rem 0 0; padding: 0; min-width: 0; }

.opt {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; min-height: 48px; padding: .5rem 12px; margin-top: .5rem;
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer; overflow-wrap: anywhere; touch-action: manipulation;
}
.opt:has(input:checked) { border-color: var(--accent); background: var(--tint); }
.opt:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.opt input { scroll-margin-top: 2rem; width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--accent); }
.opt-body { flex: 1 1 12rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; } /* label and tag share a line when they fit; a long label takes the column and the tag wraps below. 12rem: at 200% text the column drops under the radio and gets the full width */
.opt-body span { flex: 0 1 auto; min-width: 0; }
.tag { flex: none; max-width: 100%; white-space: nowrap; overflow-wrap: normal; font-style: normal; font-size: .8125rem; font-weight: 600; color: var(--rec); background: var(--rec-bg); border-radius: 999px; padding: .125rem .5rem; }

label[for] { display: block; margin: .5rem 0 .25rem; font-size: 1rem; color: var(--muted); }
input[type=text], input[type=number], input[type=url], input[type=password] {
  width: 100%; min-height: 48px; padding: .5rem .75rem; font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px;
}

button {
  min-height: 48px; min-width: 44px; padding: .5rem 1.25rem; font: inherit; font-weight: 600; border-radius: 12px; border: 1px solid transparent; cursor: pointer; touch-action: manipulation;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
button:disabled { opacity: .55; cursor: default; }
button.busy:disabled { opacity: 1; } /* Sending and Sent stay readable */
.primary { background: var(--accent); color: var(--on-accent); }
.quiet { background: transparent; color: var(--muted); border-color: var(--line); font-weight: 500; }
.small { min-height: 44px; padding: .25rem .75rem; font-size: .875rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.actions .primary { flex: 1 1 8rem; }
#setup button, #login { width: 100%; margin-top: 1rem; }
#setup .err + button { margin-top: .5rem; }

/* Pressed: colour only, so nothing moves. */
.primary:not(:disabled):active { background: color-mix(in srgb, var(--accent) 78%, var(--text)); }
.quiet:not(:disabled):active { background: var(--tint); border-color: var(--accent); color: var(--text); }
.opt:active { border-color: var(--accent); } /* no tint, so the unchecked ring keeps its 3:1 */
.opt:has(input:checked):active { background: color-mix(in srgb, var(--tint) 70%, var(--accent)); }
* { -webkit-tap-highlight-color: transparent; }

.err { margin: .5rem 0 0; color: var(--bad); font-weight: 600; overflow-wrap: anywhere; }
.err:empty { display: none; }
.card.sent { border-color: var(--accent); background: var(--tint); }
.card.leaving { opacity: 0; }
.icon { flex: none; }
.empty { text-align: center; padding: 2.5rem 1rem; }
.empty .icon { color: var(--accent); }
.empty p { margin: .25rem 0 0; }
.empty-title { font-size: 1.125rem; font-weight: 600; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.opt input:focus-visible { outline: none; }

@media (prefers-reduced-motion: no-preference) {
  .opt, button, input { transition: background-color .1s, border-color .1s, opacity .15s; }
  .card { transition: opacity .2s, background-color .1s, border-color .1s; }
}