/* wf-widget.css — F2 widget styles (slice 3).
 *
 * TOKEN LAYER: the canonical reference token sheet (AA, S154 — source of
 * record: reports/wf-widget-reference-tokens-s154.css on branch
 * aa/wf-widget-reference-mockup @ 429286737, 👑 Emperor aesthetic gate) is
 * embedded verbatim below from wf-widget-tokens.css. Per-site skins override
 * ONLY tokens (typically --wf-color-accent-* / --wf-color-nav-*) — never the
 * component rules. No per-site templates in Rust (memo Sec. 2).
 *
 * COMPONENT LAYER (this file, after the tokens): maps the tokens onto the
 * server-rendered markup contract — .wf-widget · .wf-count · .results-area ·
 * .word-result[data-bp] · .word-link · .word-score · .wf-blank · .wf-pager ·
 * .wf-error. Consumes SEMANTIC tokens only (sheet Sec. 2+), never the raw
 * palette.
 *
 * Served at /render/assets/wf-widget.css?v={build} — immutable long-cache;
 * the ?v= build stamp is the ONLY cache buster (bump per deploy).
 */

/* ═══ TOKEN LAYER (verbatim reference sheet) ═══ */
/**
 * wf-widget-reference-tokens-s154.css
 * GWN Wordfinder Widget — Reference Design Token Sheet
 * Session S154 · F2 Aesthetic Gate · Emperor review mockup
 *
 * USAGE: This file is the ONE canonical source of design tokens for the
 * wf-widget render layer. Per-site skins override ONLY the tokens that
 * differ (typically --wf-color-accent-* and --wf-color-nav-*).
 * All other tokens inherit this file unchanged.
 *
 * TOKEN NAMING CONVENTION:
 *   --wf-<category>-<subcategory>-<variant>
 * Categories: color · space · radius · type · z · shadow · anim
 */

/* ─────────────────────────────────────────────────────────────────
   1  COLOR — PALETTE (raw values, not semantic — do not use directly)
   ───────────────────────────────────────────────────────────────── */

:root {
  /* Empire brand palette (decisions-log.md / EMPIRE-STATE) */
  --wf-palette-dark:        #1a1a2e; /* page/widget background — empire dark */
  --wf-palette-nav:         #538d4e; /* navbar / header background */
  --wf-palette-accent:      #6aaa64; /* primary accent — Wordle-green */
  --wf-palette-surface:     #121213; /* card / chip background — near-black */
  --wf-palette-surface-alt: #1f2937; /* alternate surface — hover + pagination bg */
  --wf-palette-border:      #3a3a3c; /* subtle dividers, chip outlines */
  --wf-palette-text-hi:     #ffffff; /* primary text — full white */
  --wf-palette-text-mid:    #d4d4d4; /* secondary text — word chips, labels */
  --wf-palette-text-lo:     #818384; /* muted text — counts, placeholders */
  --wf-palette-err:         #f87171; /* error messages — soft red */
  --wf-palette-warn:        #fbbf24; /* warnings, blank-tile highlight amber */
  --wf-palette-tile-bg:     #538d4e; /* score tile background (matches nav) */
  --wf-palette-tile-text:   #ffffff; /* score tile text */
  --wf-palette-blank-hi:    #fbbf24; /* blank-tile letter highlight */
  --wf-palette-blank-bg:    rgba(251, 191, 36, 0.18); /* blank chip background wash */
}

/* ─────────────────────────────────────────────────────────────────
   2  COLOR — SEMANTIC (use these in components, not palette vars)
   ───────────────────────────────────────────────────────────────── */

:root {
  /* Page shell */
  --wf-color-bg:            var(--wf-palette-dark);       /* widget/page background */
  --wf-color-header-bg:     var(--wf-palette-nav);        /* results header bar */
  --wf-color-header-text:   var(--wf-palette-text-hi);    /* header label text */

  /* Word chips */
  --wf-color-chip-bg:       var(--wf-palette-surface);    /* default chip background */
  --wf-color-chip-border:   var(--wf-palette-border);     /* chip border */
  --wf-color-chip-text:     var(--wf-palette-text-mid);   /* chip word text */
  --wf-color-chip-hover-bg: var(--wf-palette-surface-alt);/* chip hover state */

  /* Blank-tile chips (words containing blank-tile letters) */
  --wf-color-blank-chip-bg: var(--wf-palette-blank-bg);   /* blank-containing chip bg */
  --wf-color-blank-letter:  var(--wf-palette-blank-hi);   /* individual blank letter */

  /* Score tile (tile-math text: C·3+A·1+... = N pts) */
  --wf-color-score-bg:      var(--wf-palette-tile-bg);    /* score badge background */
  --wf-color-score-text:    var(--wf-palette-tile-text);  /* score badge text */

  /* Count / pagination bar */
  --wf-color-count-bg:      var(--wf-palette-surface-alt);/* "Showing N of M" bar bg */
  --wf-color-count-text:    var(--wf-palette-text-lo);    /* count bar text */
  --wf-color-count-accent:  var(--wf-palette-accent);     /* pagination active button */

  /* Accent-mode toggle (literal / fold) */
  --wf-color-toggle-bg:     var(--wf-palette-surface);    /* toggle pill background */
  --wf-color-toggle-active: var(--wf-palette-accent);     /* active mode highlight */
  --wf-color-toggle-text:   var(--wf-palette-text-mid);   /* toggle label text */

  /* Error partial */
  --wf-color-err-text:      var(--wf-palette-err);        /* error message text */
  --wf-color-err-border:    rgba(248, 113, 113, 0.35);    /* error box border */
  --wf-color-err-bg:        rgba(248, 113, 113, 0.08);    /* error box background */
}

/* ─────────────────────────────────────────────────────────────────
   3  SPACING + LAYOUT
   ───────────────────────────────────────────────────────────────── */

:root {
  --wf-space-xs:   4px;   /* micro gap — icon-to-label, score badge padding */
  --wf-space-sm:   8px;   /* small gap — chip internal padding vertical */
  --wf-space-md:   12px;  /* medium — chip internal padding horizontal */
  --wf-space-lg:   16px;  /* large — section vertical rhythm */
  --wf-space-xl:   24px;  /* extra-large — widget outer padding */

  /* Chip grid */
  --wf-chip-gap:   6px;   /* gap between chips in the results grid */
  --wf-chip-min-w: 72px;  /* minimum chip width (short words) */
}

/* ─────────────────────────────────────────────────────────────────
   4  BORDER RADIUS
   ───────────────────────────────────────────────────────────────── */

:root {
  --wf-radius-chip:   6px;   /* word chip pill rounding */
  --wf-radius-score:  4px;   /* score tile badge rounding */
  --wf-radius-toggle: 20px;  /* accent-mode toggle pill (fully rounded) */
  --wf-radius-err:    8px;   /* error partial box rounding */
  --wf-radius-widget: 10px;  /* outer widget container rounding (fragment mode) */
}

/* ─────────────────────────────────────────────────────────────────
   5  TYPOGRAPHY
   ───────────────────────────────────────────────────────────────── */

:root {
  /* Font stack — system-ui only, no external CDN (decisions-log.md) */
  --wf-font-family: system-ui, -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Sizes */
  --wf-font-size-chip:   0.95rem; /* word text inside chips */
  --wf-font-size-score:  0.72rem; /* tile-math score text (smaller badge) */
  --wf-font-size-count:  0.80rem; /* "Showing N of M" bar */
  --wf-font-size-toggle: 0.82rem; /* accent-mode toggle labels */
  --wf-font-size-header: 0.88rem; /* results-area header label */
  --wf-font-size-err:    0.88rem; /* error message body */

  /* Weights */
  --wf-font-weight-chip:  500;    /* word chips — medium weight */
  --wf-font-weight-score: 600;    /* score badge — slightly bolder */
  --wf-font-weight-count: 400;    /* count bar — regular */
  --wf-font-weight-head:  600;    /* header label */
}

/* ─────────────────────────────────────────────────────────────────
   6  COMPONENT — .wf-widget CONTAINER
   ───────────────────────────────────────────────────────────────── */

:root {
  /* Fragment / embedded-div mode */
  --wf-widget-bg:      var(--wf-color-bg);       /* container background */
  --wf-widget-padding: var(--wf-space-xl);        /* inner padding all sides */
  --wf-widget-radius:  var(--wf-radius-widget);   /* outer corner rounding */
  --wf-widget-max-w:   900px;                     /* max width in fragment mode */

  /* Standalone / page mode */
  --wf-page-bg:        var(--wf-color-bg);        /* full-page background */
  --wf-page-max-w:     960px;                     /* page content column width */
}

/* ─────────────────────────────────────────────────────────────────
   7  COMPONENT — WORD CHIP / WORD RESULT ROW
   ───────────────────────────────────────────────────────────────── */

:root {
  --wf-chip-bg:          var(--wf-color-chip-bg);      /* chip background */
  --wf-chip-border:      1px solid var(--wf-color-chip-border); /* chip border */
  --wf-chip-text:        var(--wf-color-chip-text);    /* chip word text */
  --wf-chip-hover-bg:    var(--wf-color-chip-hover-bg);/* hover */
  --wf-chip-transition:  background 0.12s ease;        /* hover transition */
  --wf-chip-padding:     var(--wf-space-sm) var(--wf-space-md); /* v h padding */
  --wf-chip-radius:      var(--wf-radius-chip);        /* chip border-radius */

  /* Blank-tile variant (word contains blank letter; data-bp attribute) */
  --wf-blank-chip-bg:    var(--wf-color-blank-chip-bg);   /* wash tint */
  --wf-blank-chip-border:1px solid var(--wf-palette-warn);/* warm border */
  --wf-blank-letter-col: var(--wf-color-blank-letter);    /* highlighted letter */
}

/* ─────────────────────────────────────────────────────────────────
   8  COMPONENT — WORD SCORE TILE (tile-math text)
   Example: "C·3+A·1+N·1+F·4+U·1+L·1 = 11 pts"
   ───────────────────────────────────────────────────────────────── */

:root {
  --wf-score-bg:      var(--wf-color-score-bg);   /* score badge fill */
  --wf-score-text:    var(--wf-color-score-text);  /* score badge text */
  --wf-score-padding: 2px var(--wf-space-xs);      /* tight inner padding */
  --wf-score-radius:  var(--wf-radius-score);      /* badge radius */
  --wf-score-font:    var(--wf-font-size-score);   /* smaller than chip word */
}

/* ─────────────────────────────────────────────────────────────────
   9  COMPONENT — COUNT / PAGINATION BAR ("Showing N of M")
   FIX-IN-V4 for A23: explicit count replaces v2.5 silent truncation
   ───────────────────────────────────────────────────────────────── */

:root {
  --wf-count-bg:      var(--wf-color-count-bg);   /* bar background */
  --wf-count-text:    var(--wf-color-count-text);  /* bar label text */
  --wf-count-padding: var(--wf-space-sm) var(--wf-space-lg); /* bar padding */
  --wf-count-radius:  var(--wf-radius-chip);       /* bar pill radius */

  /* Pagination buttons */
  --wf-page-btn-active-bg:   var(--wf-color-count-accent); /* active page fill */
  --wf-page-btn-active-text: var(--wf-palette-text-hi);    /* active page text */
  --wf-page-btn-idle-bg:     var(--wf-palette-surface);    /* inactive page fill */
  --wf-page-btn-idle-text:   var(--wf-palette-text-mid);   /* inactive page text */
}

/* ─────────────────────────────────────────────────────────────────
   10 COMPONENT — ACCENT-MODE TOGGLE (literal / fold)
   Decree XXIV / A1: shown ONLY for accent-language dicts (ES, FR, etc.)
   Default = literal. Toggle is consumer-selectable.
   ───────────────────────────────────────────────────────────────── */

:root {
  --wf-toggle-bg:          var(--wf-color-toggle-bg);     /* pill background */
  --wf-toggle-active-bg:   var(--wf-color-toggle-active); /* active option fill */
  --wf-toggle-active-text: var(--wf-palette-text-hi);     /* active option text */
  --wf-toggle-idle-text:   var(--wf-color-toggle-text);   /* inactive option text */
  --wf-toggle-radius:      var(--wf-radius-toggle);       /* pill fully rounded */
  --wf-toggle-padding:     var(--wf-space-xs) var(--wf-space-md); /* option padding */
  --wf-toggle-font:        var(--wf-font-size-toggle);    /* label font-size */
}

/* ─────────────────────────────────────────────────────────────────
   11 COMPONENT — HTML ERROR PARTIAL
   Rendered server-side when v4 returns an error for a query
   ───────────────────────────────────────────────────────────────── */

:root {
  --wf-err-bg:      var(--wf-color-err-bg);    /* error box background */
  --wf-err-border:  var(--wf-color-err-border);/* error box border color */
  --wf-err-text:    var(--wf-color-err-text);  /* error message text */
  --wf-err-padding: var(--wf-space-lg);        /* inner padding */
  --wf-err-radius:  var(--wf-radius-err);      /* box corner rounding */
  --wf-err-font:    var(--wf-font-size-err);   /* message font size */
}

/* ─────────────────────────────────────────────────────────────────
   12 Z-INDEX STACK
   ───────────────────────────────────────────────────────────────── */

:root {
  --wf-z-base:    0;    /* word chips, normal content */
  --wf-z-bar:     10;   /* count/pagination bar (sticky if used) */
  --wf-z-toggle:  20;   /* accent-mode toggle (floats above results) */
  --wf-z-overlay: 100;  /* future: modal overlays */
}

/* ─────────────────────────────────────────────────────────────────
   13 SHADOW + ANIMATION
   ───────────────────────────────────────────────────────────────── */

:root {
  --wf-shadow-chip:  0 1px 3px rgba(0,0,0,0.4);  /* subtle chip elevation */
  --wf-shadow-score: 0 1px 2px rgba(0,0,0,0.5);  /* score badge shadow */

  --wf-anim-fast:    0.10s ease;  /* hover states, toggle swap */
  --wf-anim-mid:     0.20s ease;  /* chip expand, bar fade-in */
}

/* ═══ COMPONENT LAYER — markup contract, semantic tokens only ═══ */

.wf-widget {
  font-family: var(--wf-font-family);
  background: var(--wf-widget-bg);
  color: var(--wf-color-chip-text);
  padding: var(--wf-widget-padding);
  border-radius: var(--wf-widget-radius);
  max-width: var(--wf-widget-max-w);
  line-height: 1.5;
}

/* Count / pagination bar ("Found N words. Showing X–Y.") */
.wf-widget .wf-count {
  background: var(--wf-count-bg);
  color: var(--wf-count-text);
  font-size: var(--wf-font-size-count);
  font-weight: var(--wf-font-weight-count);
  padding: var(--wf-count-padding);
  border-radius: var(--wf-count-radius);
  margin: 0 0 var(--wf-space-lg);
}
.wf-widget .wf-count #resultsCount {
  color: var(--wf-page-btn-active-bg);
  font-weight: var(--wf-font-weight-head);
}

/* Results grid */
.wf-widget .results-area {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-chip-gap);
}

/* Word chip */
.wf-widget .word-result {
  background: var(--wf-chip-bg);
  border: var(--wf-chip-border);
  border-radius: var(--wf-chip-radius);
  padding: var(--wf-chip-padding);
  min-width: var(--wf-chip-min-w);
  box-shadow: var(--wf-shadow-chip);
  transition: var(--wf-chip-transition);
}
.wf-widget .word-result:hover {
  background: var(--wf-chip-hover-bg);
}

/* Blank-tile chip variant — the data-bp machine contract doubles as the
 * style hook: only chips where the USER plays a blank get the amber wash. */
.wf-widget .word-result[data-bp] {
  background: var(--wf-blank-chip-bg);
  border: var(--wf-blank-chip-border);
}
.wf-widget .wf-blank {
  color: var(--wf-blank-letter-col);
  font-weight: 800;
}

.wf-widget .word-link {
  color: var(--wf-chip-text);
  font-size: var(--wf-font-size-chip);
  font-weight: var(--wf-font-weight-chip);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.wf-widget .word-link:hover {
  text-decoration: underline;
}

/* Tile-math score badge */
.wf-widget .word-score {
  display: inline-block;
  background: var(--wf-score-bg);
  color: var(--wf-score-text);
  font-size: var(--wf-score-font);
  font-weight: var(--wf-font-weight-score);
  padding: var(--wf-score-padding);
  border-radius: var(--wf-score-radius);
  box-shadow: var(--wf-shadow-score);
  margin-left: var(--wf-space-xs);
  white-space: nowrap;
}

/* Pagination (server-rendered prev/next links + page info) */
.wf-widget .wf-pager {
  display: flex;
  align-items: center;
  gap: var(--wf-space-md);
  margin-top: var(--wf-space-lg);
  font-size: var(--wf-font-size-count);
  z-index: var(--wf-z-bar);
}
.wf-widget .wf-pager a {
  background: var(--wf-page-btn-idle-bg);
  color: var(--wf-page-btn-idle-text);
  border: var(--wf-chip-border);
  border-radius: var(--wf-count-radius);
  padding: var(--wf-space-xs) var(--wf-space-md);
  text-decoration: none;
  transition: var(--wf-anim-fast);
}
.wf-widget .wf-pager a:hover {
  background: var(--wf-page-btn-active-bg);
  color: var(--wf-page-btn-active-text);
}
.wf-widget .wf-pager-info {
  color: var(--wf-count-text);
}

/* Error partial (A18/A21 — HTML 4xx, no-store) */
.wf-widget.wf-error .wf-error-msg,
.wf-error .wf-error-msg {
  background: var(--wf-err-bg);
  border: 1px solid var(--wf-err-border);
  color: var(--wf-err-text);
  font-size: var(--wf-err-font);
  padding: var(--wf-err-padding);
  border-radius: var(--wf-err-radius);
  margin: 0;
}

/* Sanitize echo ("Searching with: CRANE.") — slice 5, A12 visible normalization */
.wf-widget .wf-echo {
  color: var(--wf-count-text);
  font-size: var(--wf-font-size-count);
  margin: 0 0 var(--wf-space-sm);
}