/**
 * Wordle — tool styles
 *
 * Cards, tabs, tables, buttons and dialogs all come from frikwork untouched.
 * What is here is the board and keyboard geometry, the three tile states, and
 * the two keyframes frikwork has no equivalent for — both switched off in the
 * reduced-motion block at the foot of the file, matching what frikwork already
 * does for its own.
 *
 * THE ONE COLOUR DECISION WORTH READING
 * -------------------------------------
 * The state fills come from --fw-success and --fw-warning, and those tokens flip
 * lightness between themes: light theme ships a dark olive (#5c8a1e) and a dark
 * burnt orange (#b45309), dark theme ships a bright lime (#94c83e) and a bright
 * amber (#f59e0b). So one fixed text colour cannot work on both — and
 * --fw-on-primary, the obvious pick, is defined ONCE at :root and is near-black
 * in both themes, which is barely readable on the light theme's dark fills.
 *
 * Hence --wrd-ink: the knockout colour for text sitting on a saturated tile.
 * Near-black over the dark theme's bright fills, and the card surface (white)
 * over the light theme's dark ones.
 *
 * WHY THE INK NEEDS *BOTH* LIGHT SELECTORS BELOW
 * ----------------------------------------------
 * Because frikwork declares its light palette in both of them. Its dark values
 * live on bare :root, and light arrives twice: once from
 * [data-fw-theme="light"], and again from
 * `@media (prefers-color-scheme: light) { :root:not([data-fw-theme]) }` — and
 * that second block re-declares the whole palette, --fw-success, --fw-warning,
 * --fw-bg-card and --fw-text included. So when the theme is set to 'auto', which
 * REMOVES data-fw-theme entirely, an OS set to light still gets the light fills.
 * An ink that did not follow it there would be near-black on dark olive.
 *
 * Measured in all four states rather than reasoned about (probe:
 * scratchpad/theme_probe.mjs, output quoted in the task report). Dropping the
 * media block was tried and measured: it takes the attribute-absent state from
 * white ink on the light fills to near-black ink on them, and yellow falls from
 * 5.02:1 to 3.79:1. Keeping it makes that state identical to explicit light,
 * which is the point.
 *
 * The fills themselves are DEEPENED toward --fw-text rather than used raw. One
 * rule, both themes: --fw-text is by definition the end furthest from the ink
 * (near-black where the ink is white, white where the ink is near-black), so the
 * same mix raises contrast whichever theme is live. Raw tokens left the two worst
 * states at 4.11:1 (green) and 3.75:1 (absent), which clear the 3:1 large-text
 * floor but NOT the 4.5:1 normal-text one — and these letters are normal text:
 * a key is 16px bold and a tile bottoms out at 17.6px bold, both under the
 * 18.66px-bold large-text threshold. Every state now clears 4.5:1 in all four
 * theme states, so the size question no longer decides anything.
 *
 * --fw-bg-2 is deliberately NOT used to separate the tiles from the panel they
 * sit on: it resolves to the same #ffffff as --fw-bg-card in the light theme. An
 * unplayed tile is an outline on the panel's own background instead.
 */

:root {
  --wrd-ink: var(--fw-on-primary);
  --wrd-green: color-mix(in srgb, var(--fw-success) 86%, var(--fw-text));
  --wrd-yellow: var(--fw-warning);
  --wrd-grey: color-mix(in srgb, var(--fw-text-muted) 66%, var(--fw-text));
}

/* Light, chosen explicitly. */
[data-fw-theme="light"] {
  --wrd-ink: var(--fw-bg-card);
}
/* Light, inherited from the OS with no attribute to read — the 'auto' theme.
   This mirrors frikwork's own second light block; see the note above before
   deleting it. */
@media (prefers-color-scheme: light) {
  :root:not([data-fw-theme]) {
    --wrd-ink: var(--fw-bg-card);
  }
}

.wrd-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: var(--fw-space-lg);
  align-items: start;
}

.wrd-play {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-lg);
  min-width: 0;
}

/* --- Settings --------------------------------------------------------------
   .fw-tabs--segmented is an inline-flex track that scrolls when it runs out of
   room. In a 340px sidebar that would become a scroll strip, so the track is
   re-laid as a full-width grid and keeps its own chrome. */

.wrd-seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow-x: visible;
  width: 100%;
}

.wrd-actions {
  display: grid;
  gap: var(--fw-space-sm);
}

.wrd-keys {
  margin-top: var(--fw-space-md);
  line-height: 1.7;
}

/* --- The board ------------------------------------------------------------- */

.wrd-board {
  display: grid;
  gap: var(--fw-space-xs);
  width: 100%;
  max-width: 21rem;
  margin: 0 auto;
}

/* The perspective the tile flip is rotated in. On the row rather than the board
   so every tile turns about its own centre instead of sharing one vanishing
   point down the grid. */
.wrd-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--fw-space-xs);
  perspective: 700px;
}

.wrd-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-width: 0;
  border: 2px solid var(--fw-border);
  border-radius: var(--fw-radius-sm);
  background: transparent;
  color: var(--fw-text);
  font-size: clamp(1.1rem, 5.5vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

/* Typed but not submitted: a stronger outline, no fill. The letter is yours to
   change until you press Enter, so it must not look scored. */
.wrd-tile.is-filled { border-color: var(--fw-text-muted); }

.wrd-tile.is-green,
.wrd-key.is-green {
  background: var(--wrd-green);
  border-color: var(--wrd-green);
  color: var(--wrd-ink);
}

.wrd-tile.is-yellow,
.wrd-key.is-yellow {
  background: var(--wrd-yellow);
  border-color: var(--wrd-yellow);
  color: var(--wrd-ink);
}

.wrd-tile.is-absent,
.wrd-key.is-absent {
  background: var(--wrd-grey);
  border-color: var(--wrd-grey);
  color: var(--wrd-ink);
}

/* --- Keyboard -------------------------------------------------------------- */

.wrd-keyboard {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-xs);
  margin-top: var(--fw-space-lg);
}

.wrd-keyboard__row {
  display: flex;
  justify-content: center;
  gap: var(--fw-space-xs);
}

.wrd-key {
  flex: 1 1 0;
  min-width: 0;
  max-width: 2.9rem;
  min-height: 3rem;
  padding: 0;
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-sm);
  /* --fw-bg-hover, not --fw-bg-2: the keys sit on a card, and --fw-bg-2 is the
     same #ffffff as --fw-bg-card in the light theme, so the whole keyboard
     would disappear into the panel. */
  background: var(--fw-bg-hover);
  color: var(--fw-text);
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--fw-dur-fast) ease, border-color var(--fw-dur-fast) ease;
}

.wrd-key:hover { border-color: var(--fw-brand-text); }

.wrd-key--wide {
  flex: 1.6 1 0;
  max-width: 4.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* --- Status, stats -------------------------------------------------------- */

.wrd-status {
  margin: var(--fw-space-lg) 0 0;
  padding: var(--fw-space-sm) var(--fw-space-md);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
  background: var(--fw-bg-2);
  color: var(--fw-text-2);
  text-align: center;
  min-height: 2.75rem;
}

.wrd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--fw-space-md);
}

/* Each tile is wrapped so script.js has an id to hang off; the wrapper must not
   shrink the ccm_stat() card it holds. */
.wrd-stat { display: flex; }
.wrd-stat > .fw-card { flex: 1 1 auto; }

.wrd-stats__note { margin: var(--fw-space-md) 0 0; }

/* --- Leaderboard ---------------------------------------------------------- */

.wrd-board__scope {
  margin-top: 0;
  font-weight: 600;
  color: var(--fw-brand-text);
}

.wrd-board__rank { width: 3rem; color: var(--fw-text-muted); }
.wrd-board__initials { font-weight: 700; letter-spacing: 0.06em; }
.wrd-board__num { text-align: right; font-variant-numeric: tabular-nums; }
.wrd-board__note { margin-bottom: 0; }

/* --- Dialog content ------------------------------------------------------- */

.wrd-verdict {
  margin: 0 0 var(--fw-space-md);
  padding: var(--fw-space-md);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
  background: var(--fw-bg-2);
  line-height: 1.5;
}

.wrd-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: var(--fw-space-sm);
  margin: 0 0 var(--fw-space-md);
  padding: var(--fw-space-md);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
  background: var(--fw-bg-2);
}

.wrd-facts__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
}

.wrd-facts dt {
  font-size: 0.8rem;
  color: var(--fw-text-muted);
}

.wrd-facts dd {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fw-brand-text);
}

/* The three-state legend in the rules dialog. Same fills as the board, so what
   you are told matches what you see. */
.wrd-rules {
  display: grid;
  gap: var(--fw-space-sm);
  margin: 0 0 var(--fw-space-md);
  padding: 0;
  list-style: none;
}

.wrd-rules li {
  display: flex;
  align-items: center;
  gap: var(--fw-space-sm);
}

.wrd-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--fw-radius-sm);
  font-weight: 700;
  color: var(--wrd-ink);
}

.wrd-chip--green { background: var(--wrd-green); }
.wrd-chip--yellow { background: var(--wrd-yellow); }
.wrd-chip--absent { background: var(--wrd-grey); }

.wrd-initials {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
}

/* --- Motion ---------------------------------------------------------------- */

/* A scored tile turns to face you already coloured: the keyframe starts edge-on
   and the colour class is applied at the same moment, so there is no second
   timer per tile and no half-animation showing the old face.
   The duration and the per-tile stagger are mirrored by FLIP_MS and
   FLIP_STAGGER in script.js — it waits for this to finish before colouring the
   keyboard, so change both together. */
@keyframes wrd-flip {
  from { transform: rotateX(-90deg); }
  to   { transform: rotateX(0); }
}
.wrd-tile.is-flip { animation: wrd-flip 320ms ease-out both; }

/* A guess the server would not take wobbles rather than silently doing nothing. */
@keyframes wrd-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.wrd-row.is-shake { animation: wrd-shake 0.42s ease-in-out; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 960px) {
  .wrd-layout { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .wrd-board { max-width: 100%; }
  .wrd-key { min-height: 2.7rem; max-width: 2.4rem; }
  .wrd-key--wide { max-width: 3.6rem; font-size: 0.65rem; }
  .wrd-keys { display: none; }
}

/* Same contract frikwork honours for its own animations: no motion, but every
   colour state still reads — the states are classes, not keyframes, so nothing
   below costs a player information. */
@media (prefers-reduced-motion: reduce) {
  .wrd-key { transition: none; }
  .wrd-tile.is-flip,
  .wrd-row.is-shake { animation: none; }
}