/* Contributor intake — read once, on a phone, by someone doing a favour.
   Optimised for that: large touch targets, one column always, nothing clever.
   No hue carries meaning here (unlike the drill, where every colour is claimed by a
   grammar dimension) — this page is a form, and its only colour job is to separate
   what is required from what is not. */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #16181c;
  --muted: #5b6069;
  --line: #d9dce1;
  --card: #f6f7f9;
  --accent: #1f5f9e;
  --accent-fg: #ffffff;
  --error: #a3271f;
  --req: #6b4c00;
  --req-bg: #fdf3d8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --fg: #e9ebee;
    --muted: #a2a8b2;
    --line: #333941;
    --card: #1c1f25;
    --accent: #6ea8dc;
    --accent-fg: #10141a;
    --error: #ef8b82;
    --req: #f0d99a;
    --req-bg: #2c2617;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 1rem;
  background: var(--bg);
  color: var(--fg);
  font: 1.05rem/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 34rem; margin: 0 auto; }

h1 { font-size: 1.6rem; line-height: 1.2; margin: .4rem 0 .6rem; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
.intro { color: var(--muted); margin-top: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: .7rem;
  padding: 1rem;
  margin: 0 0 1rem;
}
fieldset.card { border: 1px solid var(--line); }
legend { font-weight: 600; padding: 0 .35rem; }

summary { cursor: pointer; padding: .4rem 0; font-weight: 600; }

.wordlist, .release {
  max-height: 21rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: .5rem;
  padding: .75rem;
  background: var(--bg);
}
.wordlist { white-space: pre-wrap; font-size: .92rem; font-family: ui-monospace, monospace; }

/* The release scrolls inside its own box because it is long and legal and nobody
   reads it top to bottom on a phone. The instructions do NOT scroll: they are the
   part that has to be read, and a scroll box is where content goes to be skipped. */
.prose h3 { font-size: 1rem; margin: 1.1rem 0 .3rem; }
.prose h3:first-child { margin-top: 0; }
.prose p, .prose li { margin: .5rem 0; }
.prose ul, .prose ol { padding-left: 1.35rem; margin: .5rem 0; }
.prose li { padding-left: .15rem; }
.prose code {
  font-family: ui-monospace, monospace;
  font-size: .9em;
  padding: .1rem .3rem;
  border-radius: .25rem;
  background: var(--bg);
  border: 1px solid var(--line);
}

/* The setup check. It sits between the reader and the word list and is the last thing
   read before recording starts, so it is the one block on the page allowed to shout. */
.notice {
  border: 1px solid var(--req);
  background: var(--req-bg);
  color: var(--fg);
  border-radius: .5rem;
  padding: .75rem .9rem;
  margin: 0 0 .9rem;
}
.notice h3 { color: var(--req); }
.notice code { background: transparent; }

/* Touch target first: the whole row is the label, not just the box. */
.check {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .7rem .2rem;
  border-radius: .5rem;
}
.check + .check { border-top: 1px solid var(--line); }
.check input { margin-top: .25rem; width: 1.35rem; height: 1.35rem; flex: 0 0 auto; }
.check em {
  font-style: normal;
  font-size: .78rem;
  margin-left: .4rem;
  padding: .1rem .4rem;
  border-radius: .3rem;
  color: var(--muted);
  border: 1px solid var(--line);
}
.check.required em { color: var(--req); background: var(--req-bg); border-color: transparent; }

.field { display: block; margin-bottom: 1rem; }
.field > span { display: block; font-weight: 600; margin-bottom: .3rem; }
.field input {
  width: 100%;
  padding: .7rem;
  font-size: 1rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: .5rem;
}
small { display: block; color: var(--muted); font-size: .85rem; margin-top: .35rem; }

input[type=file] { width: 100%; padding: .6rem 0; font-size: .95rem; }

button {
  width: 100%;
  padding: .95rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-fg);
  background: var(--accent);
  border: 0;
  border-radius: .6rem;
  cursor: pointer;
}
button[disabled] { opacity: .55; cursor: default; }

progress { width: 100%; margin-top: .8rem; height: 1rem; }

.error {
  color: var(--error);
  border: 1px solid currentColor;
  border-radius: .5rem;
  padding: .7rem;
  margin: 0 0 1rem;
}
.loading, .small { color: var(--muted); }
.done { font-size: 1.15rem; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

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