/* ============================================================================
   Tile Word Finder — 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: the rack field, the scoring toggle, the board-hook
   filters and the results table.

   Accent — rose-pink, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #ef619c  6.2:1 on --bg   5.7:1 on --surface   6.4:1 on --bg-sunk
     light #960843  8.3:1 on --bg   8.7:1 on --surface   7.6:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root {
  --accent: #ef619c;
  --accent-dim: rgba(239, 97, 156, 0.14);
}
@media (prefers-color-scheme: light) {
  :root {
    --accent: #960843;
    --accent-dim: rgba(150, 8, 67, 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 and table caption need 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;
}

/* ============================================================================
   The tool bay
   ========================================================================= */

.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 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.fields {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.field-rack { grid-column: 1 / -1; }

.field-rack input {
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.field-rack input[aria-invalid="true"] { border-color: var(--err); }

.hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--text-dim);
}
.hint strong { color: var(--text); font-family: var(--mono); }

.err {
  display: block;
  min-height: 1.2em;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  color: var(--err);
}

/* ------------------------------------------------------------- filters -- */
/* Nested inside the tool console; base's default <details> border-bottom
   reads fine standing alone in an article, but here it needs to sit flush
   inside the sunk panel instead of drawing a stray divider under itself. */

.filters {
  margin-top: 1.25rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.filters summary {
  padding: 0.65rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}
.filters[open] summary { border-bottom: 1px solid var(--line); }
.filters .details-body { margin: 0; padding: 0.9rem; }
.filters-fields { gap: 0.85rem 1rem; }
.filters-fields .field { gap: 0.3rem; }
.filters-fields label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

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

/* ------------------------------------------------------------- results -- */

.result {
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}

.summary {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--text);
}

#results-table th.num, #results-table td.num { text-align: right; }
#results-table .word-cell { font-weight: 600; }
#results-table td, #results-table th { white-space: nowrap; }

.cap-note {
  margin: 0.9rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-dim);
}

/* ============================================================================
   Article furniture
   ========================================================================= */

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

.formula, .callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
}
.formula {
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre;
}
.callout {
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  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; }

.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; }

.tag-pass { color: var(--ok);  font-weight: 600; }
.tag-fail { color: var(--err); font-weight: 600; }
td .mono, th .mono { white-space: nowrap; }

.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;
}