/* The conversion game. Legend and reasoning: ../writing-test.md
 *
 * White background by specification, so the light palette is the only palette.
 * Two channels carry the verdict, because hue alone cannot: color is the
 * five-way state, and a wavy underline is the right/wrong binary that survives
 * color blindness and grayscale. Every color below clears WCAG AA on white —
 * the obvious #FFA500 and #FF0000 do not, at 1.97:1 and 4.00:1.
 *
 * There was a third channel: bold, marking the words that needed a reading
 * decided. It was removed. Before the player types anything it points at the
 * exact words the Hint button exists to reveal, so the puzzle arrives already
 * half-solved — and it was wrong about which words those were, bolding "minute"
 * and "motives".
 */
:root {
  --ink: #000000;
  --blue: #1D4ED8;   /* reading called right  6.70:1 */
  --green: #15803D;  /* correctly changed     5.02:1 */
  --orange: #B45309; /* should have changed   5.02:1 */
  --red: #B91C1C;    /* changed wrongly       6.47:1 */
  --rule: #d4d4d8;
  --muted: #52525b;
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--ink);
  font: 16px/1.6 Georgia, "Times New Roman", serif;
}

.game { max-width: 40rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

/* Help text, sharing the game's column so the two read as one page. Set smaller
   and muted: it is scaffolding for a first visit, and it must not compete with
   the passage, which is the thing to be read. The four color names carry their
   own colors, which is the shortest legend there is. */
.help {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
}
.help b { color: var(--ink); }
.help .blue { color: var(--blue); font-weight: 700; }
.help .green { color: var(--green); font-weight: 700; }
.help .orange { color: var(--orange); font-weight: 700; }
.help .red { color: var(--red); font-weight: 700; }

.passage {
  font-size: 1.25rem;
  line-height: 2.1;      /* room for the focus ring and the wavy underline */
  margin: 0 0 1.5rem;
}

/* A word, not a form field: no border until it has focus, so the paragraph
   still reads as a paragraph rather than as eighty input boxes. */
.w {
  /* inline-block, not inline: iOS Safari cannot place the caret inside a small
     INLINE contenteditable fragment embedded in non-editable text — it pins the
     caret to the end and refuses mid-word edits. Giving each word its own
     inline-block box fixes caret placement. (Chrome/Android edits inline fine.) */
  display: inline-block;
  -webkit-user-select: text;
  user-select: text;
  border-radius: 2px;
  padding: 0 1px;
  outline: none;
  white-space: pre;
}
/* The editable words are real <input>s (for iOS caret handling), stripped of
   native field chrome so they read as words set into the prose. */
input.w {
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  margin: 0;
  background: transparent;
  vertical-align: baseline;
  box-sizing: content-box;
}
input.w:hover { background: #f4f4f5; }
input.w:focus { background: #eef2ff; box-shadow: 0 0 0 2px var(--blue); }

/* Hint and Convert use a solid underline; the error marks below use a wavy one,
   so the two never mean the same thing. */
.w.hint { text-decoration: underline; text-underline-offset: 4px; }

.w.blue { color: var(--blue); }
.w.green { color: var(--green); }
.w.orange {
  color: var(--orange);
  text-decoration: underline wavy var(--orange);
  text-underline-offset: 4px;
}
.w.red {
  color: var(--red);
  text-decoration: underline wavy var(--red);
  text-underline-offset: 4px;
}

.bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.bar button {
  font: 600 .95rem/1 system-ui, sans-serif;
  padding: .6rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.bar button:hover { border-color: var(--muted); }
.bar button.toggle.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.readout {
  font: .9rem/1.7 ui-monospace, "Cascadia Code", Consolas, monospace;
  margin: 0 0 1rem;
  white-space: pre-wrap;
  color: var(--ink);
}

.panel {
  min-height: 3.2rem;
  padding: .75rem 1rem;
  border-left: 3px solid var(--rule);
  font-size: .95rem;
  color: var(--muted);
}

.attrib { font-size: .8rem; color: var(--muted); margin-top: 2rem; }

/* Masthead. The game is reachable on its own URL, so it needs a way back to the
   site; it matches the passage column rather than spanning the window. */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .6rem;
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 0;
}
.masthead .home {
  font: 600 1rem/1.4 Georgia, "Times New Roman", serif;
  /* Blue and underlined at rest, not only on hover: it reads as "Home", a word
     with no arrow in front of it any more, and a touch screen has no hover to
     reveal that it is a link at all. */
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Generous hit area: this is the one link on a page played with thumbs. */
  padding: .35rem 0;
}
/* The resting state already carries the color and the underline, so hover has
   to say something else. Thickening the rule is the quietest thing available
   that is not a second color. */
.masthead .home:hover,
.masthead .home:focus-visible { text-decoration-thickness: 2px; }
/* Kept next to the wordmark rather than pushed to the far edge: at this column
   width space-between left 400px of nothing between them, and they stopped
   reading as one header. The rule below is the join. */
.masthead .what { font-size: .85rem; color: var(--muted); }
.masthead .what::before { content: "/"; margin-right: .6rem; color: var(--rule); }