/* BOND icons (D158): white + orange solid icons from /icons/sprite.svg. Sizes 16/20/24; they sit on the text baseline.
   Contexts can swap the accent (states) or the cut-out colour (icons on a lighter surface). */
.ic{display:inline-block;flex:none;vertical-align:-.2em;overflow:visible;--icon-base:#fff;--icon-accent:#FF7F11;--icon-ink:#0d0d0f}
.ic-16{width:16px;height:16px}.ic-20{width:20px;height:20px}.ic-24{width:24px;height:24px}
.ic.up{--icon-accent:#22c27a}.ic.down{--icon-accent:#ef4d63}.ic.warn{--icon-accent:#ffb84d}.ic.done{--icon-accent:#2fbf71}
.ic.mute{--icon-base:#b0b0b8;--icon-accent:#8a8a93}
/* Icon after a label (CTA arrows, external links) and before one (chips, badges). */
.with-ic{display:inline-flex;align-items:center;gap:.4em;position:relative}
/* Screen-reader text stays inside its link (it used to widen the page from inside scrolling tables). */
a:has(>.sr-ext),button:has(>.sr-ext){position:relative}
.sr-ext{position:absolute;left:0;top:0;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* Old icon styles (outline strokes on any svg) must never draw rings around the solid icons. */
svg.ic{stroke:none!important}
/* Spacing next to text (icons inserted inline in templates). withIcon() containers use gap instead. */
svg.ic{margin-inline:.3em}
.with-ic>svg.ic,.th-back svg.ic,.sheet-close svg.ic,.peek-close svg.ic,.close-dialog svg.ic,#profile-menu svg.ic,#search-clear svg.ic,.choice-check svg.ic,.pair-mark svg.ic,.mode-icon svg.ic,.upload-symbol svg.ic,.account-toggle svg.ic,.state-ic{margin-inline:0}
.state-ic{display:block;margin:0 auto 8px}

/* D158 Part 4: spot illustrations */
.spot{display:block;margin:0 auto 12px;filter:drop-shadow(0 10px 24px #0008)}
.state-spot{display:block;margin:4px auto 10px}
.state .state-text{margin:0 0 10px}

/* D158 Part 4: one badge component (icon or monogram + label; S/M; tones) */
.bd{display:inline-flex;align-items:center;gap:5px;border-radius:999px;border:1px solid #2a2a2f;background:#ffffff08;color:var(--text-2,#c4c4cc);font-weight:650;white-space:nowrap;line-height:1;font-variant-numeric:tabular-nums}
.bd-s{font-size:11px;padding:3px 8px 3px 4px;min-height:22px}.bd-m{font-size:12.5px;padding:5px 11px 5px 6px;min-height:28px}
.bd:not(:has(.bd-mono,svg)){padding-left:8px}
.bd svg.ic{margin:0 0 0 2px}
.bd-accent{border-color:#ff7f1155;background:#ff7f1114;color:#ffb675}.bd-warn{border-color:#ffd54a55;background:#ffd54a14;color:#ffe08a}.bd-good{border-color:#5bd69a55;background:#5bd69a14;color:#8ff0bd}
.bd-mono{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:999px;background:#3e3e46;color:#0d0d0f;font-size:10px;font-weight:850}
.bd-m .bd-mono{width:18px;height:18px;font-size:11px}