/* ─── Crucible Penances (Difficulty tab) ───────────────────────────────────────
   Rows reuse .config-list-item + .toggle from combo-analysis.css; this file adds
   the icon, the tier headers and the "<Class> only" chip, and swaps the two
   penance columns in for the two modifier columns. Loaded after combo-analysis.css. */

/* The pane shows either the two modifier columns or the two penance columns
   (Shared Penances, Class Penances), never both pairs: the game does not combine
   them. updateModifiersEnabled sets .diff-mode-crucible on the grid while
   Crucible is selected. Applies at every width; on mobile it backs up the
   tab bar, which hides the same tabs. */
.diff-pane-grid:not(.diff-mode-crucible) .diff-pane-col-pen,
.diff-pane-grid.diff-mode-crucible .diff-pane-col-pos,
.diff-pane-grid.diff-mode-crucible .diff-pane-col-neg {
  display: none;
}

/* Desktop: the grid keeps its three equal tracks (combo-analysis.css) in both
   modes. Long names in any column wrap (hyphenated where possible) instead of
   being cut off with an ellipsis. */
@media (min-width: 769px) {
  .diff-pane-col .config-item-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    hyphens: auto;
    text-wrap: balance; /* "Martyr's / Burden I", not "Martyr's Burden / I" */
  }
}

/* Tier band header: white, 1rem, gold rule underneath. One per tier, across both
   penance columns. */
.penance-tier-header {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  padding: 10px 10px 6px;
  border-bottom: 1px solid var(--gold-dim);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Row: icon, name (+ chip underneath), toggle pushed to the right */
.config-list-item.penance-item {
  justify-content: flex-start;
  gap: 10px;
}
.penance-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  object-fit: contain;
}
/* Name and "<Class> only" chip sit on one line (owner): with the chip under the name it
   was hard to tell which name it belonged to. It drops below only if the row is too narrow. */
.penance-text {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  flex: 1 1 auto;
  min-width: 0;
}
/* Long names wrap instead of being cut off */
.penance-item .config-item-label {
  color: #fff;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-wrap: balance;
}
.penance-item .toggle {
  margin-left: auto;
}
/* Team penance: how many squad members picked it (0 to 3), where the toggle would be */
.penance-count-group {
  margin-left: auto;
  flex-shrink: 0;
  gap: 4px;
}
.penance-count-btn { font-size: 1rem; color: #fff; min-width: 30px; padding: 2px 0; }
.penance-count-btn:hover { color: #fff; }
.penance-count-btn.active { color: #fff; font-weight: 700; }
/* 0 selected reads as off, like Block Charges' None */
.penance-count-btn.active[data-count="0"] { background: var(--surface3); border-color: #888; }
/* Wired penance (WIRED_PENANCES, config-data.js): the modifier lists' gold star
   (.config-item-wired, combo-analysis.css) right after the name, on its first line */
.penance-name {
  display: flex;
  align-items: baseline;
  max-width: 100%;
}

/* Tier bands: the header sticks only while its own band scrolls past */
.penance-tier-group + .penance-tier-group {
  margin-top: 4px;
}

/* "Sniper only" chip: shown only when no class is selected */
.penance-class-chip {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 1px 6px;
  max-width: 100%;
  overflow-wrap: anywhere;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Desktop: the two penance columns are ONE grid item across the two modifier
   tracks, so they share a single scroll area and a tier lines up across both.
   The header row repeats the pane grid's own two tracks and gap, which puts
   Shared Penances and Class Penances exactly where Positive Modifiers and
   Negative Modifiers sit. */
@media (min-width: 769px) {
  .diff-pane-col-pen {
    grid-column: span 2;
  }
  .penance-col-headers,
  .penance-tier-cells {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px;
  }
  .penance-col-headers {
    flex-shrink: 0;
  }
  /* The shared scrollbar sits at the right edge, inside the Class Penances track
     (as each modifier column keeps its own), so in a band the left cell takes
     the whole first track and the right cell what is left of the second. The
     gutter is always reserved, so the split never moves; renderPenanceList
     measures it into --penance-gutter (6px is the site's own scrollbar width,
     style.css). */
  .diff-pane-col-pen .config-scroll-list {
    scrollbar-gutter: stable;
  }
  .penance-tier-cells {
    grid-template-columns: calc((100% + var(--penance-gutter, 6px) - 16px) / 2) minmax(0, 1fr);
    align-items: start; /* cell tops line up; the band is as tall as its taller cell */
  }
}

/* Narrow desktops (769-1023px): a penance column (a third of the pane) is too
   narrow for icon, name and toggle on one line, so the row stacks: icon and
   toggle on top, the name (and class chip) underneath at the full row width. */
@media (min-width: 769px) and (max-width: 1023px) {
  .config-list-item.penance-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon . toggle"
      "text text text";
    row-gap: 6px;
    column-gap: 0; /* the empty middle cell already separates icon and toggle */
    align-items: center;
  }
  .penance-item .penance-icon { grid-area: icon; }
  .penance-item .penance-text { grid-area: text; }
  .penance-item .toggle { grid-area: toggle; margin-left: 0; }
  .penance-item .penance-count-group { grid-area: toggle; margin-left: 0; }
}

/* Mobile: one Penances tab. The two cells of a band stack (shared first), and the
   list scrolls with the page there, so a sticky tier header would pin under the
   mobile chrome. */
@media (max-width: 768px) {
  .penance-tier-header { position: static; }
  /* The last row of a cell has no rule under it; keep one between the stacked cells */
  .penance-tier-cell + .penance-tier-cell:not(:empty) {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
}