/* CSBA attribute chips (sheet colors) + green/red cap bars. Used with csba-attributes.js. */
.attr-chip{display:inline-flex;align-items:center;justify-content:center;min-width:38px;padding:2px 6px;background:var(--chip-bg);color:var(--chip-fg);font-size:10px;font-weight:900;letter-spacing:.04em;line-height:1.35;border-radius:2px;flex:0 0 auto;font-style:normal}
.attr-section-tag{display:inline-block;background:var(--sec-bg);color:var(--sec-fg);font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:2px}
.cap-bar{position:relative;display:block;height:7px;background:#25262d;border-radius:4px;overflow:visible}
.cap-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:#8a8c95}
.cap-bar.is-room i{background:linear-gradient(90deg,#16a34a,#22c55e)}
.cap-bar.is-maxed i{background:linear-gradient(90deg,#c8102e,#ff2d45)}
.cap-bar b{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:#f4f4f6;border-radius:1px;opacity:.85}
.cap-legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:11px;color:#c9cad1;margin:4px 0 12px}
.cap-legend span{display:inline-flex;align-items:center;gap:7px}
.cap-legend i{display:inline-block;width:22px;height:7px;border-radius:4px}
.cap-legend .room{background:#22c55e}.cap-legend .maxed{background:#ff2d45}
.cap-legend .tick{width:2px;height:13px;background:#f4f4f6;border-radius:1px}
.attr-name-colored{font-weight:800}