/* Stat readouts: the numbers on gear, pet and mount cards, in their lists and
   in the profile's stat grids. Built by statTile(), statTiles(), bonusTiles(),
   powerChips() and subChips() in js/07-render.js. One colour code throughout:
   damage orange, health green, bonus stats violet, power gold. Loaded after the
   sheet and destination styles it overrides. */

/* ---------- every stat grid in a sheet: larger, brighter, colour-coded ---------- */
.sheet .statgrid{font-size:14px;gap:6px 16px}
.sheet .statgrid>div{align-items:baseline}
.sheet .statgrid span{color:#c6cdeb;font-weight:500}
.sheet .statgrid b{font-size:16px;font-weight:800;color:#fff}
.sheet .statgrid .dmg b{color:#ffb35c}
.sheet .statgrid .hp b{color:#7ee6ac}
.sheet .statgrid .bonus b{color:#d6c2ff}
.sheet .statgrid .power b{color:#ffd86b}

/* ---------- the key numbers of a card as tiles ---------- */
.sheet .statgrid.cardStats{grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;margin:12px 0;font-size:14px}
.sheet .statgrid.cardStats>div{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:2px;
  padding:10px 12px 11px;border:1px solid #5a629b;border-radius:13px;background:#1a2043;text-align:left}
.sheet .statgrid.cardStats span{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#b9c1e8}
.sheet .statgrid.cardStats b{font-size:24px;line-height:1.1;font-weight:800;letter-spacing:-.01em}
.sheet .statgrid.cardStats small{font-size:12px;font-weight:600;color:#b9c1e8}
.sheet .statgrid.cardStats .dmg{border-color:#8a6a40;background:color-mix(in srgb,#ffb35c 11%,#1a2043)}
.sheet .statgrid.cardStats .hp{border-color:#3f8a64;background:color-mix(in srgb,#7ee6ac 10%,#1a2043)}
.sheet .statgrid.cardStats .bonus{border-color:#7a67bd;background:color-mix(in srgb,#b69cff 14%,#1a2043)}
.sheet .statgrid.cardStats .bonus b{font-size:22px}
.sheet .statgrid.cardStats.lead{grid-template-columns:1fr 1fr}
.sheet .statgrid.cardStats.lead>div:first-child{grid-column:1/-1}
.sheet .statgrid.cardStats.lead>div:first-child b{font-size:30px}
.mountDetail .tt{text-align:left}
.mountDetail>.mini{text-align:left}

/* a pet's rarity and level, above its tiles */
.cardLevel{display:flex;align-items:center;gap:10px;margin:2px 0 4px}
.cardLevel em{padding:3px 11px;border:1px solid var(--rar);border-radius:999px;background:color-mix(in srgb,var(--rar) 18%,transparent);
  color:var(--rar);font-size:12px;font-style:normal;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.cardLevel b{color:#fff;font-size:20px;font-weight:800}

/* XP: readable, and a bar thick enough to see */
.bondLine{align-items:baseline;font-size:11px;font-weight:600}
.bondBar{height:8px}
.sheet .bondLine{margin-top:8px;font-size:13px;font-weight:700;color:#e7e9ff}
.sheet .bondLine small{font-size:12px;font-weight:600;color:#b9c1e8}
.sheet .bondBar{height:10px;margin-top:5px}
.sheet .row .bondLine,.petStableCard .bondLine{margin-top:6px;font-size:11.5px}
.sheet .row .bondBar,.petStableCard .bondBar{height:8px}

/* ---------- list rows: damage and health, then the bonus stats as chips ---------- */
.pwLine{display:inline-flex;flex-wrap:wrap;gap:3px 12px;align-items:baseline}
.pwLine i{font-style:normal;font-size:12px;font-weight:600;color:#c6cdeb}
.pwLine b{font-size:15px;font-weight:800}
.pwLine .dmg b{color:#ffb35c}
.pwLine .hp b{color:#7ee6ac}
.subChips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.subChips i{text-transform:none;letter-spacing:0;padding:2px 9px;border:1px solid #6d5fb0;border-radius:999px;background:color-mix(in srgb,#b69cff 16%,#141a3a);
  color:#dcd3ff;font-size:12px;font-style:normal;font-weight:600;white-space:nowrap}
.subChips b{color:#fff;font-weight:800}
.sheet .row .statLine{display:flex;flex-direction:column;align-items:flex-start;color:#e7e9ff}
/* on the centred cards (team slots, mount stable, another player's companions) the chips centre too */
.petTeamSlot .subChips,.mountCard .subChips,.playerComp .subChips{justify-content:center}
.mountCard .subChips{gap:3px;margin-top:3px}
.mountCard .subChips i{padding:1px 5px;font-size:9.5px;white-space:normal;text-align:center;line-height:1.25}

/* pet and mount lists, which had these at 8-9px */
.petTeamSlot>span{font-size:11px}
.petTeamSlot b{font-size:14px}
.petTeamSlot small{font-size:11px}
.petTeamSlot .pwLine{justify-content:center;margin-top:2px}
.petTeamRarity{font-size:10.5px}
.petStableTitle span{font-size:10.5px}
.petStableTitle b,.petStableTitle strong{font-size:14px}
.petStableCard p{display:flex;flex-direction:column;align-items:flex-start;margin:4px 0 8px;color:#c6cdeb;font-size:12px}
.mountHeroCopy p{display:flex;flex-direction:column;align-items:flex-start;font-size:12px}
.mountCardMeta{font-size:11px;font-weight:600}
.mountRidingTag{font-size:9.5px}

/* ---------- gear: substat pills and the gem's stat, in your gear card and another player's ---------- */
.sheet[data-variant="gear-detail"] .subline .tag,.sheet[data-variant="player-gear"] .subline .tag{
  padding:6px 12px;border:1px solid #5a629b;border-radius:10px;background:#2b3263;color:#dfe3ff;font-size:14px;font-weight:600}
.sheet[data-variant="gear-detail"] .subline .tag b,.sheet[data-variant="player-gear"] .subline .tag b{color:#d6c2ff;font-weight:800}
.sheet .gemStat{font-size:13px;color:#c6cdeb}
.sheet .gemStat b{color:#d6c2ff;font-size:15px;font-weight:800}