/* Kriegswerk — stat bars (statbars.js): what an upgrade changes. One row per stat: icon, name, the numbers now → after
   and the difference, a bar under them — the present value light, a gain green, a loss red; a part that goes away is
   hatched. Used inside the themed tooltip, on cards and in the wiki (all dark fields). */
.kw-stb { --stb-base: #e6dfc6; --stb-gain: #8fd45e; --stb-loss: #e0584c; --stb-shift: #d4b064; --stb-track: #0b0a07; --stb-edge: #4a4734;
    display: grid; gap: 5px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(201, 164, 82, .35); white-space: normal; font-size: 13px; line-height: 1.2; }
.kw-stb.is-compact { margin-top: 4px; padding-top: 0; border-top: 0; gap: 4px; }
.kw-stb-cap { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #a79f86; }
.kw-stb-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-rows: auto 6px; column-gap: 6px; row-gap: 2px; align-items: center; min-width: 0; }
.kw-stb-row > .bi { grid-row: 1 / 3; font-size: 14px; color: #f0cf7e; text-align: center; }
.kw-stb-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #d8d0b6; }
.kw-stb-num { white-space: nowrap; text-align: right; color: #ece4cb; font-variant-numeric: tabular-nums; }
.kw-stb-num b { font-weight: 700; display: inline; margin: 0; font-size: inherit; letter-spacing: 0; }
.kw-stb-num em { font-style: normal; font-weight: 600; }
.kw-stb-row.is-gain .kw-stb-num em, .kw-stb-row.is-gain .kw-stb-num b { color: var(--stb-gain); }
.kw-stb-row.is-loss .kw-stb-num em, .kw-stb-row.is-loss .kw-stb-num b { color: var(--stb-loss); }
.kw-stb-row.is-shift .kw-stb-num em, .kw-stb-row.is-shift .kw-stb-num b { color: var(--stb-shift); }
.kw-stb-row.is-same { opacity: .62; }
.kw-stb-row .kw-stb-bar { grid-column: 2 / 4; }
.kw-stb-bar { position: relative; display: block; height: 6px; min-width: 0; background: var(--stb-track); box-shadow: inset 0 0 0 1px var(--stb-edge); overflow: hidden; }
.kw-stb-bar i { position: absolute; top: 1px; bottom: 1px; left: 1px; }
.kw-stb-a { background: var(--stb-base); }
.kw-stb-d { background: var(--stb-shift); }
.is-gain > .kw-stb-bar .kw-stb-d, .is-gain .kw-stb-bar .kw-stb-d { background: var(--stb-gain); }
.is-loss > .kw-stb-bar .kw-stb-d, .is-loss .kw-stb-bar .kw-stb-d { background: var(--stb-loss); }
.kw-stb-d.is-cut { background: repeating-linear-gradient(135deg, var(--stb-c, var(--stb-shift)) 0 2px, transparent 2px 4px) !important; box-shadow: inset 0 0 0 1px var(--stb-c, var(--stb-shift)); }
.is-gain .kw-stb-d.is-cut { --stb-c: var(--stb-gain); }
.is-loss .kw-stb-d.is-cut { --stb-c: var(--stb-loss); }
.kw-stb-unl { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 6px; align-items: start; color: #ece4cb; }
.kw-stb-unl > .bi { font-size: 13px; color: #8fd45e; text-align: center; line-height: 1.2; }
.kw-stb-unl b { display: inline; margin: 0; font-size: inherit; color: #8fd45e; letter-spacing: 0; }
.kw-stb-unl.is-none, .kw-stb-unl.is-none > .bi { color: #a79f86; }
.kw-stb-unl > .bi-info-circle { color: #f0cf7e; }
.kw-stb-note { font-size: 12px; color: #a79f86; }
/* the tooltip is a little wider with bars in it (tooltip.js has-stb) */
.kw-tooltip.has-stb .kw-tooltip-in > span:empty { display: none; }

/* a card's one line: the headline stat's bar and its difference (fleet upgrade cards) */
.kw-stb-mini { --stb-base: #e6dfc6; --stb-gain: #8fd45e; --stb-loss: #e0584c; --stb-shift: #d4b064; --stb-track: #0b0a07; --stb-edge: #4a4734;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 4px; align-items: center; min-width: 0; height: 12px; }
.kw-stb-mini .kw-stb-bar { height: 5px; }
.kw-stb-mini > b { font-size: 11px; line-height: 1; font-weight: 600; white-space: nowrap; color: #a79f86; font-variant-numeric: tabular-nums; }
.kw-stb-mini.is-gain > b { color: var(--stb-gain); }
.kw-stb-mini.is-loss > b { color: var(--stb-loss); }

/* in the wiki: a fleet upgrade's levels */
.kw-stb.is-levels { max-width: 360px; border-top: 0; padding-top: 0; }