/* system/apps/wordflex/styles-test.css -- WordFlex Test's own styles
 *
 * Sept 22 2026. The multi-user test bench (app-test.js), registered as
 * its own app from the same folder as the real game -- this file is
 * linked by the build the same way styles.css is (see
 * scripts/generate-registry.ts). Raw and legible on purpose, not pretty:
 * this screen's job is making the room's behavior easy to watch.
 *
 * One base font size on the wrapper, plus `font: inherit` on native
 * controls from the start (start-here.md's "native form controls don't
 * inherit font-size" gotcha).
 */

.wordflex-test {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink);
}
.wordflex-test select,
.wordflex-test input,
.wordflex-test textarea,
.wordflex-test button {
  font: inherit;
}

.wft-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--slate);
}

.wft-buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wordflex-test button {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--brand);
  background: #fff;
  color: var(--brand);
  font-weight: 600;
  cursor: pointer;
}

.wft-inline { display: inline-flex; gap: 6px; align-items: center; }
.wft-toggle { color: var(--slate); }

.wft-status,
.wft-summary { color: var(--slate); margin: 0; }
.wft-error { color: #c0392b; font-weight: 600; margin: 0; }

.wft-seats { display: flex; flex-direction: column; gap: 10px; }
.wft-seat {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wft-seat.is-turn { border-color: #b5652a; }
.wft-seat.is-mine { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.wft-seat-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wft-seat-name { font-weight: 600; }
.wft-seat-score { color: var(--slate); }
.wft-open { color: var(--slate); font-weight: 400; font-style: italic; }

.wft-rack { display: flex; gap: 4px; flex-wrap: wrap; }
.wft-rack-hidden { color: var(--slate); font-style: italic; }
/* Tile text is always dark brown (Sept 22 2026, Ron): a tile's face is
 * light tan in BOTH themes, so its text can't follow var(--ink), which
 * turns near-white in dark mode (white on tan was hard to read). */
.wft-tile {
  color: #3b2410;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  background: #f1d9a6;
  border: 1px solid #c9a86a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wft-tile.is-blank { background: #f7e7b0; border: 2px solid #d4a017; }
.wft-tile-letter { font-weight: 700; font-size: 1.15em; }
.wft-tile-value { position: absolute; right: 3px; bottom: 1px; font-size: 0.6em; }

.wft-bag summary,
.wft-rules summary,
.wft-search summary,
.wft-place summary,
.wft-raw summary { cursor: pointer; color: var(--slate); }
.wft-rules-body,
.wft-search-body,
.wft-place-body { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
/* Sept 23 2026: the raw placement tester (place tiles / send / clear
   pending) -- same treatment as the other <details> sections above. */
.wft-pending { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 4px; }
.wft-pending button { margin-left: 4px; }
.wft-rules-label { margin: 4px 0 0; font-weight: 600; color: var(--slate); }
/* Sept 23 2026: the search-mode <select> had no explicit width -- Ron's
   real-device report of the page going wide once this section opened.
   `.wft-field` is a column flex container, and `<input>` naturally
   stretches to fill it (align-items: stretch), but a `<select>`'s
   content-based intrinsic width (its longest option's text) can win
   over that stretch in some browsers/OSes, forcing the field, and
   everything around it, wider than the screen. An explicit width beats
   that regardless of browser. */
.wft-field select {
  width: 100%;
  max-width: 100%;
}
.wft-categories { display: flex; flex-direction: column; gap: 4px; }
.wft-check-ok { color: #1a7f37; font-weight: 600; }
.wft-check-bad { color: #c0392b; font-weight: 600; }
.wft-word-chip {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.wft-search-results { max-height: 40vh; overflow: auto; }
.wft-bag-grid { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
.wft-bag-entry { display: inline-flex; align-items: center; gap: 3px; }
.wft-bag-count { color: var(--slate); }
.wft-raw pre {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 50vh;
  overflow: auto;
  /* Theme-aware (was a fixed #f6f5f2, which in dark mode put the
   * near-white --ink text on a near-white box -- same bug as the tiles). */
  background: color-mix(in srgb, var(--ink) 6%, var(--paper));
  padding: 8px;
  border-radius: 8px;
}