/* badge.css: owner lane A-core. The one badge component (CF-DS 2.2, DR-59, DR-66): S 20 / M 24 / L 28, numbers 600, words 500.
   Loaded after app.css. The old label classes below keep their own look and take the M or S height, so unswapped markup renders on the grid. */
.badge{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-1);flex:none;height:24px;padding:0 var(--s-2);border-radius:var(--pill);background:var(--raised);color:var(--text-2);box-shadow:var(--edge);font:500 var(--fs-1)/24px var(--font);white-space:nowrap;font-variant-numeric:tabular-nums}
.badge .i{width:12px;height:12px}
/* one size axis (FA-1004): S = .sm, M = default, L = .lg; the older .xs and .s map to S, .m to M */
.badge:is(.sm,.s,.xs){height:20px;padding:0 6px;line-height:20px}
.badge.lg{gap:6px;height:28px;padding:0 10px;font-size:var(--fs-2);line-height:28px}
.badge.lg .i{width:14px;height:14px}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.lg .dot{width:8px;height:8px}
.badge.num{font-weight:600}
.badge.mono{font-family:var(--mono);font-size:var(--fs-0);font-weight:500}
.badge.accent{background:var(--accent-soft);color:var(--accent);box-shadow:none}
.badge.green{background:var(--green-soft);color:var(--green);box-shadow:none}
.badge.amber{background:var(--amber-soft);color:var(--amber);box-shadow:none}
.badge.red{background:var(--red-soft);color:var(--red);box-shadow:none}
.badge.solid{background:var(--accent);color:var(--ink);box-shadow:none}
.badge.outline{background:transparent;box-shadow:var(--edge-strong)}
.badge.on-image{background:var(--on-image);color:var(--text);box-shadow:inset 0 0 0 1px var(--hl-2);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}
.badge.ghost{background:transparent;color:var(--text-3);box-shadow:none}
/* Counter (DR-59): .badge.count; a circle for one digit (min-width = height) */
.badge.count{min-width:24px;background:var(--count-bg);box-shadow:none;color:var(--text);font-weight:600}
.badge.count:is(.sm,.s,.xs){min-width:20px}.badge.count.lg{min-width:28px}
.badge.count.solid{background:var(--accent);color:var(--ink)}


/* old classes as aliases (A13): same height as the component, their own colours stay */
:is(.tag,.attempts,.comp-code,.rchip,.fstate,.sync-chip){box-sizing:border-box;height:var(--ctl-xs);line-height:1}
.pill{box-sizing:border-box;height:var(--ctl-xs);background:var(--on-image);box-shadow:inset 0 0 0 1px var(--hl-2)}
.me-pill{box-sizing:border-box;min-width:20px;height:20px;background:var(--count-bg);font:600 var(--fs-1)/20px var(--font)}
.me-pill.warn{background:var(--amber-soft);color:var(--amber)}