/* ============================================================================
   Wordle Solver — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels, tables,
   header, footer, focus rings. This file adds the accent and only what is
   unique to this tool.

   Accent — magenta/pink, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #ef61df  6.7:1 on --bg   6.2:1 on --surface   6.9:1 on --bg-sunk
     light #960886  7.5:1 on --bg   7.8:1 on --surface   6.9:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #ef61df; --accent-dim: rgba(239, 97, 223, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #960886; --accent-dim: rgba(150, 8, 134, 0.10); }
}

.brand svg .mark-bg { fill: var(--accent); }
.brand svg .mark-fg { fill: var(--on-accent); }

/* base has no visually-hidden helper; the live region needs one */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   Tile colours — these are FUNCTIONAL game feedback (correct / present /
   absent), not brand colour, so they stay a fixed green / amber / grey in
   both themes rather than tracking --accent. Colour is never the only cue:
   every state also gets a small glyph (see .tile::after) and is spelled out
   in each tile's aria-label, so the tool doesn't rely on colour perception
   alone (WCAG 1.4.1).

   White text on each background, measured against WCAG 2.x relative
   luminance, fixed regardless of theme:
     green  #1f7a3d  ~5.4:1
     yellow #a16207  ~4.9:1
     grey   #52525b  ~7.7:1
   ========================================================================= */
:root {
  --tile-green:  #1f7a3d;
  --tile-yellow: #a16207;
  --tile-grey:   #52525b;
}

.tool { background: var(--bg-sunk); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.5rem); margin-bottom: 2.5rem; }
.tool > h2 { margin: 0 0 0.6rem; }
.tool .hint { color: var(--text-dim); font-size: 0.9375rem; max-width: 62ch; margin: 0 0 1.2rem; }

.rows { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }

.guess-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.row-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  min-width: 4.5rem;
}

.tile-grid { display: flex; gap: 0.4rem; }

.tile {
  width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  position: relative;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.tile:hover { border-color: var(--text-faint); }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tile[data-state="grey"]   { background: var(--tile-grey);   border-color: var(--tile-grey);   color: #fff; }
.tile[data-state="yellow"] { background: var(--tile-yellow); border-color: var(--tile-yellow); color: #fff; }
.tile[data-state="green"]  { background: var(--tile-green);  border-color: var(--tile-green);  color: #fff; }

/* redundant, non-colour cue for each state, tucked in the corner */
.tile[data-state]::after {
  content: "";
  position: absolute;
  top: 1px; right: 3px;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.85;
}
.tile[data-state="grey"]::after   { content: "\00d7"; }   /* × */
.tile[data-state="yellow"]::after { content: "\2022"; }   /* • */
.tile[data-state="green"]::after  { content: "\2713"; }   /* ✓ */

/* plain letter tiles for the word-browser page — no colour states at all */
.tile-plain {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
  cursor: text;
}
.tile-plain::after { content: ""; }

.row-remove {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-dim);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.row-remove:hover { color: var(--err); border-color: var(--err); }

.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }

.result {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.stat { display: grid; gap: 0.2rem; }

.candidates-panel { margin-top: 1.5rem; }
.candidates-panel h3 {
  margin: 0 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.candidates-text {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

/* -------------------------------------------- word-browser page fields -- */

.fields {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  margin-top: 1.1rem;
}
.field .field-label { display: block; margin-bottom: 0.35rem; }

/* ============================================================================
   Article furniture (shared shape with the rest of the site)
   ========================================================================= */

.section { max-width: 74ch; }
.section table { max-width: none; }

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.example {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
  margin: 0 0 1rem;
}
.example h3 { margin-top: 0; }
.example p:last-child { margin-bottom: 0; }

.swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.9rem; }
.demo-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.875rem;
  color: #fff;
  border-radius: 4px;
}
.demo-tile.green  { background: var(--tile-green); }
.demo-tile.yellow { background: var(--tile-yellow); }
.demo-tile.grey   { background: var(--tile-grey); }

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.95rem 1.15rem; }
.pagelinks a:hover { border-color: var(--accent); }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span   { display: block; color: var(--text-dim); font-size: 0.875rem; }

.noscript {
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--err);
  font-size: 0.9375rem;
}

.note-warn { color: var(--warn); border-color: var(--warn); }