/* ════════════════════════════════════════════════════════════════════════
   ds/interactions.css  —  app-wide interaction, motion & a11y layer.

   NEW repo file. Load it in shell.html AFTER components.css and BEFORE
   shell.css / section CSS:
       <link rel="stylesheet" href="/ds/interactions.css?v=__ASSET_VERSION__">

   These are the cross-cutting "feel" rules that were missing: visible focus,
   themed scrollbars, selection color, tabular figures, hover/press feedback,
   and reduced-motion guards. Tokens only — nothing hard-coded.
   ════════════════════════════════════════════════════════════════════════ */

/* keyboard focus — visible + consistent, focus-visible only (never bare :focus) */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
.tcg-btn:focus-visible, .tcg-chip:focus-visible, .tcg-navlink:focus-visible,
.dk-railitem:focus-visible, .dk-viewbtn:focus-visible, .tab:focus-visible,
.rail-item:focus-visible, .dk-tile-cover:focus-visible, .dk-tile-name:focus-visible,
.htile-deckrow:focus-visible, .st-tile-link:focus-visible, .topbar-search:focus-visible,
.topbar-avatar:focus-visible, .tcg-search:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* selection + scrollbars */
::selection { background: var(--accent-soft); color: var(--text); }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-4); background-clip: padding-box; }

/* tabular figures so counts / handles / stats align */
.dk-mono, .dk-vtt, .dk-railitem-count, .dk-tagcount, .dk-grouphead-count,
.cl-recent-q, .htile-collection .count, .dk-table td, .footer-right,
.dk-listcount, .dk-stack-badge { font-variant-numeric: tabular-nums; }

/* inputs: accent caret + solid placeholder */
input, textarea { caret-color: var(--accent); }
::placeholder { color: var(--text-4); opacity: 1; }

/* topbar utility buttons + avatar */
.topbar-search { transition: background .14s, color .14s; }
.topbar-search:hover { background: var(--bg-elev-2); color: var(--text); }
.topbar-avatar { transition: box-shadow .14s, border-color .14s; }
.topbar-avatar:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* nav + rail + tab transitions */
.tcg-navlink, .rail-item, .dk-railitem, .tab,
.tcg-chip, .dk-viewbtn, .dk-ctl { transition: background .14s, color .14s, border-color .14s; }
.tcg-chip:active { transform: scale(.97); }

/* cover art lifts on hover (tiles + home thumbnails) */
.dk-tile-cover .cover-img, .htile-deckrow .thumb .cover-img,
.dk-listthumb .cover-img { transition: transform .35s ease-out; }
.dk-tile-cover:hover .cover-img { transform: scale(1.045); }
.htile-deckrow:hover .thumb .cover-img { transform: scale(1.06); }
/* deck editor slot tiles: subtle lift + art zoom on hover (P3) */
.dk-slot { transition: transform .14s ease; }
.dk-slot:hover { transform: translateY(-2px); }
.dk-slot .dk-slot-img { transition: transform .35s ease-out; }
.dk-slot:hover .dk-slot-img { transform: scale(1.05); }

/* list + table rows get a rounded hover surface */
.dk-listrow { border-radius: var(--r-sm); margin: 0 -8px; padding-left: 8px; padding-right: 8px; transition: background .14s; }
.dk-listrow:hover { background: var(--bg-elev-1); }
.dk-table tbody tr { transition: background .14s; }
.dk-table tbody tr:hover { background: var(--bg-elev-1); }

/* group headers: stronger hierarchy + frosted sticky bg */
.dk-grouphead-name { font-weight: 600; }
.dk-grouphead { background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: blur(6px); }

/* quieter VtT chip + interactive ask bar + tweening progress */
.dk-vtt { border: 1px solid var(--border-soft); background: color-mix(in oklab, var(--bg-elev-2) 70%, transparent); }
.htile-ask .askbar { transition: background .14s, border-color .14s, color .14s; }
.htile-ask .askbar:hover { border-color: var(--border); color: var(--text-2); background: var(--bg-elev-1); }
.ck-bar > i { transition: width .5s ease; }

/* ── styling pass 2: collection + cards library parity ─────────────────────
   The decks library got covers, row-hover surfaces and cover-zoom in pass 1;
   bring the collection + cards libraries up to the same feel. (Focus rings are
   already global on every <a>/<button> above, so these surfaces — all anchors
   and buttons — inherit the ring without re-listing them here.) ── */

/* list + table rows get the same rounded hover surface as .dk-listrow */
.cl-row, .cb-row, .cb-trow { transition: background .14s; }
.cl-row:hover, .cb-row:hover, .cb-trow:hover { background: var(--bg-elev-1); }

/* tabular figures so the collection/cards counts, prices and set codes align */
.cl-mono, .cb-mono { font-variant-numeric: tabular-nums; }

/* cover art lifts on hover — these tiles paint art as a CSS background on the
   .*-tile-art span, so the transform rides that span inside the clipped cover */
.cl-tile-art, .cb-tile-art { transition: transform .35s ease-out; }
.cl-tile-cover:hover .cl-tile-art, .cb-tile-cover:hover .cb-tile-art { transform: scale(1.045); }

/* ── styling pass 2: honest disabled state (spec F) ────────────────────────
   Anything disabled reads as disabled everywhere. :where() keeps specificity at
   zero so component color/style rules still win; only opacity + cursor land. ── */
:where(button, .tcg-btn, .tcg-chip, [role="button"], input, select, textarea)[disabled],
:where(button, .tcg-btn, .tcg-chip, [role="button"])[aria-disabled="true"],
.tcg-btn.disabled { opacity: .5; cursor: not-allowed; }

/* honor reduced motion for everything above */
@media (prefers-reduced-motion: reduce) {
  .dk-tile-cover:hover .cover-img,
  .htile-deckrow:hover .thumb .cover-img,
  .dk-listthumb .cover-img,
  .cl-tile-cover:hover .cl-tile-art,
  .cb-tile-cover:hover .cb-tile-art,
  .dk-slot:hover, .dk-slot:hover .dk-slot-img { transform: none; }
  * { scroll-behavior: auto; }
}