/* wgf-data-table.css — Module M29: Canonical WGF table primitive.
   Sortable headers, zebra hairlines, right-aligned mono numbers, sticky head,
   and a full mobile fallback where rows collapse into stacked data cards.
   Used by M15, M18, M31, M33. Colours/type from _tokens.css only. */

/* ── Table shell ── */
.wgf-table-wrap{
  overflow-x:auto;
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-1);
  background:var(--wgf-panel-1);
}

.wgf-table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--font-ui);
  font-size:var(--text-sm);
}

/* ── thead ── */
.wgf-table thead{
  position:sticky;
  top:0;
  z-index:2;
}
.wgf-table__th{
  background:var(--wgf-panel-2);
  color:var(--wgf-muted);
  font-family:var(--font-display);
  font-size:var(--text-xs);
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:var(--space-2) var(--space-3);
  text-align:left;
  white-space:nowrap;
  border-bottom:1px solid var(--wgf-border-neutral);
  cursor:default;
  user-select:none;
  position:relative;
}
/* numeric header — right-aligned to match its column */
.wgf-table__th--num{
  text-align:right;
}
/* sortable indicator */
.wgf-table__th[aria-sort]{
  cursor:pointer;
  padding-right:calc(var(--space-3) + 14px);
}
.wgf-table__th[aria-sort]::after{
  content:'';
  position:absolute;
  right:var(--space-2);
  top:50%;
  transform:translateY(-50%);
  width:10px;
  height:10px;
  opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 2L2 6h6L5 2zm0 6L2 4h6L5 8z' fill='%23ece7dd'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:10px;
}
.wgf-table__th[aria-sort="ascending"]::after{
  opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 2L2 7h6L5 2z' fill='%23f0c040'/%3E%3C/svg%3E");
}
.wgf-table__th[aria-sort="descending"]::after{
  opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M5 8L2 3h6L5 8z' fill='%23f0c040'/%3E%3C/svg%3E");
}
/* active sort column — gold underline on th */
.wgf-table__th[aria-sort="ascending"],
.wgf-table__th[aria-sort="descending"]{
  color:var(--wgf-gold-muted);
  border-bottom:2px solid var(--wgf-gold-accent);
}

/* ── tbody ── */
.wgf-table__tr{
  border-bottom:1px solid var(--wgf-border-neutral-soft);
}
.wgf-table__tr:last-child{
  border-bottom:0;
}
/* zebra — even rows lifted one step */
.wgf-table__tr:nth-child(even){
  background:var(--wgf-panel-2);
}
.wgf-table__tr:hover{
  background:var(--wgf-panel-3);
}
@media(prefers-reduced-motion:no-preference){
  .wgf-table__tr{transition:background var(--motion-fast) var(--ease-standard);}
}

/* ── cells ── */
.wgf-table__td{
  padding:var(--space-2) var(--space-3);
  color:var(--wgf-text);
  vertical-align:middle;
}
/* numeric / money cells: right-aligned, mono, tabular */
.wgf-table__td--num{
  text-align:right;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}
/* muted secondary data */
.wgf-table__td--muted{
  color:var(--wgf-muted);
  font-size:var(--text-xs);
}
/* identity cell: icon + name inline */
.wgf-table__cell-identity{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  min-width:0;
}
.wgf-table__icon{
  flex:0 0 24px;
  width:24px;
  height:24px;
  border-radius:4px;
  object-fit:cover;
}
.wgf-table__name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-family:var(--font-ui);
}
/* highlight row — e.g. cheapest price, top rank */
.wgf-table__tr--highlight{
  background:color-mix(in srgb,var(--wgf-gold-accent) 8%,var(--wgf-panel-1)) !important;
  border-left:3px solid var(--wgf-gold-accent);
}
.wgf-table__tr--highlight td:first-child{
  padding-left:calc(var(--space-3) - 3px);
}

/* ── empty state (shown inside tbody) ── */
.wgf-table__empty{
  text-align:center;
  padding:var(--space-6) var(--space-4);
  color:var(--wgf-muted);
  font-style:italic;
  font-size:var(--text-sm);
}

/* ── skeleton rows ── */
.skeleton-bar{
  background:var(--wgf-panel-3);
  border-radius:4px;
  animation:sk-pulse 1.4s ease-in-out infinite alternate;
  display:inline-block;
}
@keyframes sk-pulse{from{opacity:.35}to{opacity:.75}}
@media(prefers-reduced-motion:reduce){
  .skeleton-bar{animation:none;opacity:.5;}
}

/* ── sort button hover ── */
@media(prefers-reduced-motion:no-preference){
  .wgf-table__th[aria-sort]{
    transition:color var(--motion-fast) var(--ease-standard),
               background var(--motion-fast) var(--ease-standard);
  }
}
.wgf-table__th[aria-sort]:hover{
  color:var(--wgf-text);
  background:var(--wgf-panel-3);
}

/* ══════════════════════════════════════════════════════════
   MOBILE DATA CARD  (shown when table is hidden at <680px)
   Each row becomes a stacked "card" with label:value pairs.
   ══════════════════════════════════════════════════════════ */
.wgf-card-list{
  display:none;
  flex-direction:column;
  gap:var(--space-2);
}
.wgf-card{
  background:var(--wgf-panel-1);
  border:1px solid var(--wgf-border-neutral);
  border-radius:var(--radius-card);
  padding:var(--space-3);
  box-shadow:var(--shadow-1);
}
.wgf-card--highlight{
  border-left:3px solid var(--wgf-gold-accent);
  background:color-mix(in srgb,var(--wgf-gold-accent) 8%,var(--wgf-panel-1));
}
.wgf-card__head{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  margin-bottom:var(--space-2);
  padding-bottom:var(--space-2);
  border-bottom:1px solid var(--wgf-border-neutral-soft);
}
.wgf-card__head-icon{
  flex:0 0 28px;
  width:28px;
  height:28px;
  border-radius:4px;
  object-fit:cover;
}
.wgf-card__head-name{
  font-family:var(--font-ui);
  font-size:var(--text-md);
  color:var(--wgf-text);
  font-weight:600;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wgf-card__rows{
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:var(--space-1) var(--space-3);
}
.wgf-card__label{
  font-family:var(--font-display);
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--wgf-muted);
  align-self:center;
  white-space:nowrap;
}
.wgf-card__value{
  font-family:var(--font-ui);
  font-size:var(--text-sm);
  color:var(--wgf-text);
  text-align:right;
}
.wgf-card__value--num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}

/* ── responsive: swap table → card list under 680px ── */
@media(max-width:680px){
  .wgf-table-wrap{display:none;}
  .wgf-card-list{display:flex;}
}

/* ══════════════════════════════════════════════════════════
   M33 — M+ RUNS TABLE (composes M29 base above)
   Key level pill, time, chests, score, date.
   Brand gold: #f0c040. NEVER #f4c45c / 244,196,92.
   Green/red NEVER used for chrome — market direction only.
   ══════════════════════════════════════════════════════════ */

/* Key level pill */
.key-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--text-xs);
  font-weight:500;
  min-width:2.4rem;
  padding:1px var(--space-2);
  border-radius:var(--radius-pill);
  border:1px solid var(--wgf-border-neutral);
  background:var(--wgf-panel-3);
  color:var(--wgf-text);
  white-space:nowrap;
}
/* High keys (>=10) get a gold tint */
.key-pill--high{
  border-color:var(--wgf-border);
  color:var(--wgf-gold-muted);
}

/* Time display — mono; depleted = muted (no strikethrough) */
.time-val{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}
.time-val--timed  { color:var(--wgf-text); }
.time-val--depleted{ color:var(--wgf-muted); }

/* Chest upgrade icons */
.chests          { font-size:.7rem; letter-spacing:-.1em; color:var(--wgf-gold-muted); }
.chests--depleted{ color:var(--wgf-muted); }

/* Raider.IO score contribution */
.mplus-score{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  color:var(--wgf-gold-muted);
}

/* Run date */
.run-date{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--text-xs);
  color:var(--wgf-muted);
}

/* Dungeon name */
.dungeon-name{ font-family:var(--font-ui); color:var(--wgf-text); }