/* Drawn icons (js/icons.js). They inherit font-size and colour, so each place only sets those. */
.ic { width: 1em; height: 1em; flex: none; vertical-align: -0.16em; overflow: visible; }
.ic.ic-good { color: var(--good); }
.ic.ic-amber { color: var(--amber); }
.ic.ic-hot { color: var(--hot); }
[data-ic] { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

/* toasts and timeline notes: a leading icon that takes the tone of the message */
.toast .ic, .post.sys .ic { width: 1.2em; height: 1.2em; margin-right: 0.3em; vertical-align: -0.24em; }
.toast.good .ic { color: var(--good); }
.toast.bad .ic { color: var(--hot); }
.toast.info .ic { color: var(--cyan); }
.toast .ic.ic-good { color: var(--good); }
.toast .ic.ic-amber { color: var(--amber); }
.toast .ic.ic-hot { color: var(--hot); }

/* launch cards */
.card-icon { color: var(--violet); }
.card-icon .ic { width: 1em; height: 1em; vertical-align: top; stroke-width: 1.6; }
.card.r-legendary .card-icon { color: var(--amber); }
.card.dark .card-icon { color: var(--hot); }
.card.locked .card-icon { opacity: 0.55; }
.card-tip b .ic { width: 1.1em; height: 1.1em; margin-right: 0.15em; color: var(--violet); }
.tip-counter .ic { margin-right: 0.2em; }
.card-fly .card-icon .ic { width: 1em; height: 1em; }

/* bottom action bar */
.ab-icon, .op-icon, .agent-chip .agent-ico { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.ab-icon { color: var(--cyan); width: 1.2em; height: 1.2em; }
.op-icon { color: var(--text2); width: 1.15em; height: 1.15em; }
.op-deny .op-icon { color: var(--hot); }
.op-boost .op-icon { color: var(--violet); }
.op-poach .op-icon { color: var(--amber); }
.op-status:not(.honest) .op-icon { color: var(--good); }
.op-status.honest .op-icon { color: var(--amber); }
.op-icon .ic, .ab-icon .ic, .agent-ico .ic { width: 100%; height: 100%; }
.agent-chip .agent-ico { color: var(--cyan); width: 1.1em; height: 1.1em; }
.lv-btn [data-ic] { width: 14px; height: 14px; font-size: 14px; }

/* composer drafts, viral options, badges */
.draft-cat { display: inline-flex; align-items: center; }
.draft-cat .ic { width: 1.4em; height: 1.4em; margin-right: 0.4em; }
.vopt .ic { width: 1.15em; height: 1.15em; margin-right: 0.15em; }
.inc-badge .ic, .viral-badge .ic { width: 1.15em; height: 1.15em; vertical-align: -0.22em; margin-right: 0.1em; }
.promise-pill .ic { margin-right: 0.2em; }

/* achievements */
.trophy { color: var(--amber); }
.trophy .ic { width: 1em; height: 1em; }
.trophy:not(.got) { color: var(--dim2); }
.ach .ai { display: inline-flex; color: var(--amber); }
.ach .ai .ic { width: 1em; height: 1em; }
.av2 .ic { width: 1em; height: 1em; }

/* feed: avatars and the reply row */
.av.ceo-av .ic { width: 1em; height: 1em; }
.post .pm .ic { width: 1.1em; height: 1.1em; vertical-align: -0.2em; margin-right: 0.15em; }
.bt small .ic { width: 1em; height: 1em; vertical-align: -0.15em; }
.rp-head .ic, .tt-row .ic { width: 1em; height: 1em; vertical-align: -0.16em; }
.keys .ic { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }