/* Word-game text tools: bars, chips and small helpers. Uses the shared --tool-* tokens. */
.wg-note { margin: 10px 0 0; }
.wg-sub { margin: 20px 0 6px; font-size: 1rem; }
.wg-bar { display: grid; grid-template-columns: minmax(3.2em, 8em) 1fr minmax(4.5em, auto); gap: 8px; align-items: center; margin: 4px 0; font-size: 14px; }
.wg-bar__label { overflow-wrap: anywhere; font-family: var(--font-mono, monospace); }
.wg-bar__track { display: block; background: var(--tool-accent-tint); border-radius: var(--tool-radius-sm); height: 14px; overflow: hidden; }
.wg-bar__fill { display: block; height: 100%; background: var(--tool-accent); }
.wg-bar__value { text-align: right; color: var(--tool-text-soft); white-space: nowrap; }
.wg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; padding: 0; }
.wg-chip { display: inline-block; padding: 3px 9px; border: 1px solid var(--tool-border-strong); border-radius: var(--tool-radius-sm); background: var(--tool-surface); font-size: 14px; overflow-wrap: anywhere; }
.wg-pass { color: var(--tool-success); font-weight: 600; }
.wg-fail { color: var(--tool-accent-deep); font-weight: 600; }
.wg-warn { color: var(--tool-warn); font-weight: 600; }
.wg-line { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--tool-border); }
.wg-line__text { overflow-wrap: anywhere; min-width: 0; }
.wg-line__n { white-space: nowrap; font-family: var(--font-mono, monospace); }
.wg-est { text-decoration: underline dotted; }
.wg-check-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0; }
.wg-check-row label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.wg-tiles { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.wg-tile { display: inline-flex; flex-direction: column; align-items: center; min-width: 2.6em; padding: 4px 6px; border: 1px solid var(--tool-border-strong); border-radius: var(--tool-radius-sm); background: var(--tool-surface); }
.wg-tile b { font-size: 1.2rem; text-transform: uppercase; }
.wg-tile small { color: var(--tool-text-mute); }
.wg-tile select { margin-top: 4px; max-width: 5.5em; font-size: 13px; }
@media (max-width: 480px) { .wg-bar { grid-template-columns: minmax(2.6em, 5em) 1fr auto; } }