/* What makes it work: tile-native visuals (one focused card + one float).
   Built for a ~4:5 tile. The card spans the tile width minus a gutter and only
   ever bleeds off the bottom edge, so no text is cut sideways. */
.wmw-v { position: absolute; inset: 0; font-family: var(--font-sans, "Helvetica Neue", Helvetica, Arial, sans-serif); color: var(--color-text-primary); font-size: 12.5px; line-height: 1.35; }
.wmw-v__card {
  position: absolute; left: 11%; right: 11%; top: 22%;
  background: var(--color-surface, #fff); border-radius: 12px;
  box-shadow: 0 1px 0 rgba(38,37,30,.04), 0 24px 48px -28px rgba(38,37,30,.28);
  padding: 16px 16px 0;
}
.wmw-v[data-v="truth"] .wmw-v__card, .wmw-v[data-v="control"] .wmw-v__card { top: 12%; }
.wmw-v__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.wmw-v__eyebrow { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.wmw-v__meta { font-size: 11px; color: var(--color-text-muted); }
.wmw-v__list { list-style: none; margin: 0; padding: 0; }
.wmw-v__list li { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--color-border-subtle); }
.wmw-v__list li > :last-child { grid-column: 2; grid-row: 1 / span 2; }
.wmw-v__name { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wmw-v__sub { display: block; font-size: 11px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wmw-v__list--out li { grid-template-rows: auto; padding: 8px 0; }
.wmw-v__list--out li > :last-child { grid-row: 1; }
.wmw-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--color-text-faint); }
.wmw-dot--ok { background: var(--color-success); }
.wmw-dot--held { background: var(--color-accent); }

.wmw-v__float {
  position: absolute; display: flex; gap: 10px; align-items: center; z-index: 1;
  background: var(--color-surface, #fff); border-radius: 10px; padding: 10px 14px 10px 12px;
  box-shadow: 0 16px 32px -18px rgba(38,37,30,.35), 0 0 0 1px rgba(38,37,30,.05);
  white-space: nowrap;
}
.wmw-v__float b { display: block; font-weight: 500; font-size: 12px; }
.wmw-v__float small { display: block; font-size: 10.5px; color: var(--color-text-muted); }
.wmw-v__float--tl { top: 8%; left: 6%; }
.wmw-v__float--br { bottom: 9%; right: 6%; }

.wmw-v__product { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; }
.wmw-v__product img { width: 44px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--color-surface-muted); }
.wmw-v__src { padding: 10px 0; border-top: 1px solid var(--color-border-subtle); }
.wmw-v__val { display: block; margin-top: 3px; font-size: 13px; }
.wmw-v__src--flag .wmw-v__eyebrow { color: var(--color-accent); }
.wmw-v__src mark { background: var(--color-accent-subtle); color: var(--color-accent); padding: 1px 3px; border-radius: 3px; }

.wmw-seg { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--color-surface-muted); font-size: 10px; }
.wmw-seg i { font-style: normal; padding: 3px 7px; border-radius: 999px; color: var(--color-text-muted); }
.wmw-seg[data-on="auto"] i:first-child, .wmw-seg[data-on="review"] i:last-child { background: var(--color-surface, #fff); color: var(--color-text-primary); box-shadow: 0 1px 2px rgba(38,37,30,.12); }
.wmw-check { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--color-success); color: #fff; font-size: 11px; }

.wmw-v__big { font-size: 30px; letter-spacing: -.03em; line-height: 1; margin: 2px 0 14px; }
.wmw-v__big small { display: block; margin-top: 6px; font-size: 11px; letter-spacing: 0; color: var(--color-text-muted); }
.wmw-v__bars { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-bottom: 16px; }
.wmw-v__bars i { flex: 1; border-radius: 2px; background: var(--color-surface-strong, #DDDCD5); }
.wmw-v__bars i.is-now { background: var(--color-success); }
.wmw-v__list--out { margin-top: 6px; }

/* Gentle entrance: card rises, float follows. */
@media (prefers-reduced-motion: no-preference) {
  .wmw-card:not(.is-in) .wmw-v__card { transform: translateY(18px); opacity: 0; }
  .wmw-card:not(.is-in) .wmw-v__float { transform: translateY(10px); opacity: 0; }
  .wmw-v__card, .wmw-v__float { transition: transform .9s cubic-bezier(.32,.72,0,1), opacity .9s cubic-bezier(.32,.72,0,1); }
  .wmw-v__float { transition-delay: .18s; }
}
@media (max-width: 1100px) { .wmw-v__card { left: 16%; right: 16%; } }