/* Hallmark · component: word tile · genre: playful · theme: brand · states: 8 · contrast: pass · redesign: full · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E5 S4 R5 V3 · weakest: V, the tile stays plain on purpose, it is a tool someone scans */
/* Hallmark · finish-review: subagent · 5 findings · 5 resolved · gap: source of a word stays in the tooltip, min-width 164px holds both buttons */

/* Список слов на #/words. Плитка шириной со слово (WaniKani Vocabulary), полоска прогресса и золото у выученного
   (Duolingo), звук всегда на виду (Oxford Word Lists). Цвета, кегли и радиусы - токены redesign.css и slots.css. */
.wd-wall { display: flex; flex-wrap: wrap; gap: 8px; }
.wd-tile { --wd-foot: 32px; --wd-act: 32px; --wd-say: 32px; display: flex; flex-direction: column; min-width: 164px; max-width: min(100%, 320px); padding: 8px 12px; border-radius: var(--sx-r-inner); border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: background-color var(--sx-dur) var(--sx-ease), border-color var(--sx-dur) var(--sx-ease), transform var(--sx-dur) var(--sx-ease); }
.wd-tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wd-tile b { font: 600 var(--sx-t-md)/1.25 var(--sans); overflow-wrap: anywhere; min-width: 0; }
.wd-tile-tr { margin-top: 2px; font-size: var(--sx-t-sm); line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.wd-tile .say-btn { display: grid; place-items: center; flex: none; width: var(--wd-say); height: var(--wd-say); min-width: 0; min-height: 0; margin: -4px -4px -4px 0; padding: 0; border: 0; border-radius: var(--sx-r-tag); background: none; color: var(--muted); }
.wd-tile .say-btn svg { width: 16px; height: 16px; margin: 0; }
.wd-tile .say-btn:hover { background: var(--surface-2); color: var(--ink); }
.wd-tile .say-btn.is-saying { color: var(--accent); }

/* Низ плитки: что дальше и сколько пройдено. Кнопки ложатся на то же место, высота не прыгает. */
.wd-tile-foot { position: relative; height: var(--wd-foot); margin-top: auto; padding-top: 8px; box-sizing: content-box; }
.wd-tile-state { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 100%; transition: opacity var(--sx-dur) var(--sx-ease); }
.wd-tile-status { display: flex; justify-content: space-between; gap: 4px; }
.wd-tile-state small { font-size: var(--sx-t-xs); line-height: 1.25; color: var(--muted); white-space: nowrap; }
.wd-tile-count { font-variant-numeric: tabular-nums; }
.wd-tile.is-due .wd-tile-status small:first-child { color: var(--accent); font-weight: 600; }
/* Выучено - награда: подпись плашкой и золотая полоска. */
.wd-tile.is-learned .wd-tile-status small:first-child { padding: 0 4px; border-radius: var(--sx-r-tag); background: var(--butter); color: var(--sx-on-butter); font-weight: 600; }
.wd-bar-line { height: 6px; border-radius: var(--sx-r-pill); background: color-mix(in oklab, var(--ink) 18%, var(--surface)); overflow: hidden; }
.wd-bar-line i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.wd-tile.is-learned .wd-bar-line i { background: var(--butter); }

.wd-tile-acts { position: absolute; inset: 8px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 8px; opacity: 0; pointer-events: none; transition: opacity var(--sx-dur) var(--sx-ease); }
.wd-act { height: var(--wd-act); padding: 0 8px; border: 1px solid var(--line); border-radius: var(--sx-r-tag); background: var(--surface); color: var(--ink); font: 600 var(--sx-t-xs)/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color var(--sx-dur) var(--sx-ease), border-color var(--sx-dur) var(--sx-ease); }
.wd-act:hover { border-color: var(--night); background: var(--night); color: var(--sx-on-night); }
.wd-act:active { transform: scale(0.97); }
.wd-act.is-busy { opacity: 0.6; cursor: progress; }
.wd-act[data-armed] { border-color: var(--night); background: var(--night); color: var(--sx-on-night); }
.wd-act:disabled { opacity: 0.5; cursor: not-allowed; }
.wd-act:focus-visible, .wd-tile .say-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.wd-tile-foot:has(:focus-visible) .wd-tile-state { opacity: 0; }
.wd-tile-foot:has(:focus-visible) .wd-tile-acts { opacity: 1; pointer-events: auto; }

/* Наведение и касание - как у карточки окна: один жёлтый на всём сайте. */
@media (hover: hover) {
  .wd-tile:hover { z-index: 1; border-color: var(--butter); background: var(--butter); color: var(--sx-on-butter); transform: scale(1.02); }
  .wd-tile:hover .wd-tile-tr, .wd-tile:hover .say-btn { color: var(--sx-on-butter); }
  .wd-tile:hover .say-btn:hover, .wd-tile:hover .say-btn.is-saying { background: var(--sx-on-butter-soft); }
  .wd-tile:hover .wd-tile-state { opacity: 0; }
  .wd-tile:hover .wd-tile-acts { opacity: 1; pointer-events: auto; }
}
@media (hover: none) {
  .wd-tile { --wd-foot: 40px; --wd-act: 40px; --wd-say: 40px; }
  .wd-tile .say-btn { margin: -8px -8px -8px 0; }
  .wd-tile.is-open .say-btn.is-saying { background: var(--sx-on-butter-soft); }
  .wd-tile.is-open .wd-tile-tr { display: block; }
  .wd-tile.is-open { border-color: var(--butter); background: var(--butter); color: var(--sx-on-butter); }
  .wd-tile.is-open .wd-tile-tr, .wd-tile.is-open .say-btn { color: var(--sx-on-butter); }
  .wd-tile.is-open .wd-tile-state { opacity: 0; }
  .wd-tile.is-open .wd-tile-acts { opacity: 1; pointer-events: auto; }
}
/* На телефоне ширина со слово оставляет дыры: ровно две плитки в ряд. */
@media (max-width: 560px) {
  .wd-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wd-tile { min-width: 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wd-tile, .wd-tile-state, .wd-tile-acts, .wd-act { transition: none; }
  .wd-tile:hover, .wd-act:active { transform: none; }
}