/* team-breakdown.css — the team "Breakdown" stat card (see js/team-breakdown.js).
   Shared by team.html (Overview tab) and drop.html (storyline team cards).
   Uses shared.css tokens only, so it follows the light/dark theme. */
.dsb{ clear:both; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); overflow:hidden; }
.dsb-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--color-border); background:var(--color-surface-2); }
.dsb-id{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; min-width:0; }
.dsb-crest{ width:44px; height:44px; border-radius:12px; flex:none; background:var(--color-surface-3); display:grid; place-items:center; font-size:22px; overflow:hidden; }
.dsb-crest img{ width:100%; height:100%; object-fit:cover; }
.dsb-nm{ font-weight:800; font-size:18px; line-height:1.1; letter-spacing:-.01em; }
.dsb-sub{ font-size:12px; color:var(--color-text-muted); margin-top:3px; }
.dsb-sub b{ color:var(--color-text); font-weight:700; }
/* #drop a{color:inherit} (drop.html) outranks a bare class, so the article card's
   button text went light-on-lime. Pin it black, with enough weight to win there. */
.dsb-cta, #drop a.dsb-cta{ flex:none; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#0e0e0e; background:var(--color-lime); padding:8px 14px; border-radius:9999px; text-decoration:none; }
.dsb-cta:hover{ background:var(--color-lime-hover); }
.dsb-grid{ display:grid; grid-template-columns:1.15fr 1fr; }
.dsb-grid--one{ grid-template-columns:1fr; }
.dsb-box{ padding:14px 16px 12px; min-width:0; }
.dsb-box+.dsb-box{ border-left:1px solid var(--color-border); }
@media(max-width:680px){ .dsb-grid{ grid-template-columns:1fr; } .dsb-box+.dsb-box{ border-left:none; border-top:1px solid var(--color-border); } }
.dsb-box h6{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-faint); font-weight:800; margin:0 0 10px; display:flex; justify-content:space-between; gap:8px; }
.dsb-box h6 span{ font-weight:600; letter-spacing:0; text-transform:none; color:var(--color-text-faint); }
/* roster DSR bars */
.dsb-bar{ display:grid; grid-template-columns:minmax(0,1fr) 44px; grid-template-rows:auto 6px; column-gap:10px; row-gap:3px; align-items:end; padding:4px 0; }
.dsb-bar__nm{ grid-column:1; grid-row:1; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--color-text); }
.dsb-bar__nm a{ color:inherit; text-decoration:none; }
.dsb-bar__nm a:hover{ color:var(--color-lime); }
.dsb-bar__nm small{ color:var(--color-text-faint); font-weight:500; margin-left:6px; font-size:11px; }
.dsb-bar__val{ grid-column:2; grid-row:1/3; font-size:13px; font-weight:800; text-align:right; color:var(--color-text); font-variant-numeric:tabular-nums; align-self:center; }
.dsb-bar__tr{ grid-column:1; grid-row:2; height:6px; border-radius:4px; background:var(--color-surface-3); overflow:hidden; }
.dsb-bar__fl{ height:100%; border-radius:4px; background:var(--color-lime-dim); }
.dsb-bar.top .dsb-bar__fl{ background:var(--color-lime); }
.dsb-more{ font-size:11.5px; color:var(--color-text-faint); margin-top:6px; line-height:1.5; }
.dsb-empty{ font-size:12px; color:var(--color-text-faint); }
/* games-by-type split */
.dsb-split{ padding:5px 0; }
.dsb-split__l{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:4px; }
.dsb-split__l b{ font-weight:700; color:var(--color-text); }
.dsb-split__l span{ color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.dsb-split__bar{ display:flex; height:10px; border-radius:4px; overflow:hidden; background:var(--color-surface-3); gap:2px; }
.dsb-split__w{ background:var(--color-lime); border-radius:4px 0 0 4px; }
.dsb-split__x{ background:var(--color-surface-4); border-radius:0 4px 4px 0; }
.dsb-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.dsb-tile{ background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:8px 10px; min-width:0; }
.dsb-tile__n{ font-size:17px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }
.dsb-tile__n.pos{ color:var(--color-lime); } .dsb-tile__n.neg{ color:var(--color-red); }
.dsb-tile__l{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-faint); font-weight:700; margin-top:3px; }
.dsb-foot{ font-size:11px; color:var(--color-text-faint); padding:8px 16px 10px; border-top:1px solid var(--color-border); }
.dsb-legend{ display:inline-flex; gap:12px; margin-left:8px; }
.dsb-legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; vertical-align:-1px; margin-right:4px; }
.dsb-legend i.w{ background:var(--color-lime); } .dsb-legend i.l{ background:var(--color-surface-4); }