/* BBGMordle. Tile colors come from the theme tokens. */
.wd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.wd-help { margin: 0 0 12px; max-width: 900px; }
.wd-help summary { cursor: pointer; font-weight: 600; }
.wd-help ul { margin: 4px 0 0; padding-left: 18px; }
.wd-key { padding: 0 6px; border-radius: 4px; font-weight: 600; }
.wd-key.ok { background: color-mix(in srgb, var(--good) 28%, transparent); }
.wd-key.part { background: color-mix(in srgb, var(--warn) 28%, transparent); }
.wd-wrap { display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
.wd-input .picker { max-width: 420px; }
.wd-scroll { overflow-x: auto; }
.wd-grid { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wd-row { display: flex; flex-direction: column; gap: 3px; }
.wd-name { font-weight: 600; font-size: 14px; }
.wd-tiles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.wd-tile {
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px;
	min-height: 58px; padding: 4px 2px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
	font-variant-numeric: tabular-nums; overflow: hidden; position: relative;
}
.wd-lab { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
.wd-val { font-size: 13px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.wd-arrow { font-size: 13px; line-height: 1; font-weight: 700; }
.wd-tile.ok { background: color-mix(in srgb, var(--good) 30%, var(--panel)); border-color: var(--good); }
.wd-tile.part { background: color-mix(in srgb, var(--warn) 26%, var(--panel)); border-color: var(--warn); }
.wd-tile.no { background: var(--panel-2); }
.wd-tile.blank { background: transparent; border-style: dashed; opacity: .55; }
.wd-share { font-size: 20px; line-height: 1.25; letter-spacing: 1px; margin: 0 0 10px; font-family: inherit; white-space: pre; overflow-x: auto; }
@media (max-width: 640px) {
	.wd-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.wd-tile { min-height: 54px; }
}