/* Shared by Champion and Item mode: one comparison table, one look. */

/* The comparison table itself */
#comparisonTableWrap {
  overflow-x: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

/* `separate` with border-spacing is what makes each result its own rounded
   tile: the gap between cells replaces the row divider, so no border is needed
   to tell two neighbouring results of the same colour apart. Shared by Champion
   and Item — one table, one look.
   `table-layout: fixed` is what makes every data column the same width instead
   of Species stretching out to its longest value while Gender sits mostly
   empty — the browser reads column widths from the first row's cells (the
   header) rather than sizing each column to its content. The name column is
   the one exception, sized explicitly below so the data columns can split the
   rest evenly. */
#comparisonTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
  min-width: 640px;
}
#comparisonTable th,
#comparisonTable td {
  padding: 6px 4px;
  text-align: center;
  font-size: var(--text-sm);
  /* Dense, single-line data. Without this the cells inherit the body's prose
     leading and every row carries half a line of air it has no use for. */
  line-height: var(--leading-snug);
  /* Equal-width columns mean some values (Regions, Species) no longer have
     room to stay on one line the way they did under content-sized columns —
     wrapping inside the tile reads better than the column stretching to fit
     its longest possible value again. */
  white-space: normal;
  word-break: break-word;
}

/* No fill on the header: with the cells separated, a background here would
   read as another row of tiles rather than a label. */
#comparisonTable th {
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-sm);
  font-weight: 700;
  color: var(--text-muted);
  font-size: var(--text-xs);
  padding-bottom: 2px;
}

/* The status tiles are opaque, so only the champion column takes this — it
   gives the tiles a surface to sit against instead of the page background. */
#comparisonTable tbody tr { background: var(--surface); }
#comparisonTable tbody tr:hover { background: var(--surface-hover); }

/* Fixed instead of content-sized like the data columns: a name (item mode)
   would otherwise force this column as wide as its longest possible value,
   the way Species used to. Narrower still when there's no name to fit —
   toggled by table.js via .name-col-icon-only on the table itself, because
   table-layout:fixed reads column widths off the header row, and the header
   row doesn't know per-row content. */
#comparisonTable th:first-child,
#comparisonTable td:first-child {
  width: 220px;
}
/* Icon + the cell's own horizontal padding, exactly — no slack left over for
   the icon to float in. A wider column here read as a gap to the right of the
   icon, since a single flex child with nowhere to go just leaves the rest of
   the cell empty. */
#comparisonTable.name-col-icon-only th:first-child,
#comparisonTable.name-col-icon-only td:first-child {
  width: 80px;
}

/* The header row has no per-mode class to key off — table.js only toggles
   name-col-icon-only on the table, and CHAMPION/ITEM is plain text in a <th>
   with none of the flex/nowrap treatment .comparison-subject-cell gets below. Without
   this, "Champion" hit the shared word-break:break-word rule and split mid-word
   ("Champio" / "n") the moment the icon-only column got narrow. Sized to fit
   comfortably now, but the ellipsis is a safety net for any font/zoom that
   doesn't. */
#comparisonTable th:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comparison-subject-cell {
  text-align: start !important;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  /* Guards a single unbreakable token (no spaces to wrap at) from forcing the
     column wider — .comparison-subject-name below overrides this for the name
     itself, which does wrap. */
  white-space: nowrap;
  overflow: hidden;
}
.comparison-subject-cell img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  object-fit: cover;
  flex-shrink: 0;
}
/* Full name, always — wraps across lines instead of truncating with an
   ellipsis, the same way the data columns already wrap Regions/Species
   rather than cutting them off. The row grows to fit. */
.comparison-subject-name {
  white-space: normal;
}

/* Status classes are named for the colour the server sends (green/yellow/red),
   so the names stay put even though the fills below are tuned separately. */
.comparison-attr-green,
.comparison-attr-yellow,
.comparison-attr-red {
  color: var(--tile-text);
  font-weight: 700;
  border-radius: var(--radius-tile);
}

/* Riot's stat icons carry their own colours — a red heart for health, an amber
   shield for armor — which is the same palette the tiles use. These are PNGs
   with real transparency, so the separation comes from drop-shadow, which
   follows the icon's own silhouette: a tight dark rim to lift it off a
   same-coloured tile, over a softer shadow for depth. A box or disc behind
   them would sit on the tile as a visible plate instead. */
.item-stat-icon {
  width: 17px;
  height: 17px;
  margin: 0 2px;
  vertical-align: middle;
  filter:
    drop-shadow(0 0 1px rgba(0, 0, 0, 0.95))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.item-component {
  width: 34px;
  height: 34px;
  margin: 0 2px;
  vertical-align: middle;
  border-radius: var(--radius-sm);
  border: 1px solid var(--tile-edge);
}

/* Fallback for a stat or component with no icon to show. */
.item-text {
  font-size: var(--text-xs);
  margin: 0 3px;
}

.comparison-attr-green { background: var(--tile-hit); }
.comparison-attr-yellow { background: var(--tile-near); }
.comparison-attr-red { background: var(--tile-miss); }

@media (max-width: 640px) {
    #comparisonTable th,
    #comparisonTable td {
      padding: 4px 3px;
      font-size: var(--text-xs);
    }

    #comparisonTable th:first-child,
    #comparisonTable td:first-child {
      width: 150px;
    }
    #comparisonTable.name-col-icon-only th:first-child,
    #comparisonTable.name-col-icon-only td:first-child {
      width: 58px;
    }

    .comparison-subject-cell img {
      width: 52px;
      height: 52px;
    }
}