/*
 * The bet's stylesheet, owned by bet.js.
 *
 * Here rather than in a page's own file because the bet is the one widget more
 * than one tool has: it was written inside bestie.css first, where the offline
 * rung's pill row had grown a second, near-identical copy of the same rules, and
 * the two had already begun to drift (reading.css carries a third). A page that
 * mounts a bet links this file; a page that does not, does not.
 */

/* ------------------------------------------------------------------- guess */

/*
 * The bet, sitting between a tool's inputs and its answer.
 *
 * Deliberately not styled like a form field: no border, no background, just a
 * small line and the same pills the offline rung uses. It has to be visible
 * enough to be played and quiet enough that skipping it does not feel like
 * leaving something blank — the real input is the question above it, and a bet
 * that looked like a required field would put one more thing between a question
 * and its answer.
 */
.guess {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s2);
  padding: 0 var(--s2);
}

.guess-label {
  font-size: var(--t2);
  color: var(--text-dim);
}

/* The verdict of the bet, under the tool's own verdict. */
.guess-result {
  margin: 0;
  font-size: var(--t3);
  color: var(--text-dim);
}

.guess-result b {
  color: var(--text);
}

/* Called it. The only state that colours, because it is the only one worth
   being told apart at a glance — a miss and a tie both read as "not this time"
   and the sentence already says which. */
.guess-result[data-hit='true'] b {
  color: var(--brand);
}

/* --------------------------------------------------------- picking an answer */

/*
 * Tapping an answer rather than choosing one: pills, not a select, because the
 * tap *is* the whole interaction and a dropdown hides the options behind a tap
 * that does not look like the answer. Three things use this — the bet, 闺蜜团's
 * roster, and the rung where a tool asks the reader to answer for each item
 * herself because the model did not.
 *
 * Scoped to `.pick-row` because the reading family has a `.pick` of its own: one
 * inline <select> per line, styled narrow and square by reading.css. Same class
 * name, different element, different look — and those four pages link both
 * stylesheets. Unscoped, these pills would restyle every row's dropdown into a
 * capsule. Every user of these rules already sits inside a `.pick-row`; the
 * selects never do.
 */
.pick-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.pick-row .pick {
  padding: var(--s2) var(--s4);
  font-size: var(--t2);
  color: var(--text-dim);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  transition:
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease);
}

.pick-row .pick:hover {
  color: var(--text);
  border-color: var(--primary);
}

.pick-row .pick[aria-pressed='true'] {
  color: var(--primary-ink);
  background: var(--primary-soft);
  border-color: var(--primary);
}