/* ============================================================
   Happy Chinese — icon + status-dot styling
   Pairs with assets/js/icons.js. Inline SVG icons inherit the
   current text colour and scale with font-size.
   ============================================================ */

.ic {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.14em;   /* optical baseline align with text */
  flex: none;
  stroke-width: 2;
  overflow: visible;
}

/* host span used by data-icon hydration sits inline with text */
[data-icon] {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

/* slightly heavier stroke reads better at very small sizes */
.ic.ic-thin { stroke-width: 1.6; }
.ic.ic-bold { stroke-width: 2.4; }

/* filled variants (e.g. star ratings) */
.ic.ic-fill { fill: currentColor; stroke: none; }

/* ---- status / mode dots (replaces 🟢 ⚪ ● ○) ---- */
.dot {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  vertical-align: 0.02em;
  background: currentColor;
  flex: none;
}
.dot-ring {                      /* ○ hollow — e.g. ONLINE */
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}
.dot-fill { background: currentColor; }   /* ● solid — e.g. OFFLINE */
.dot-green { background: #16a34a; }        /* 🟢 active */
.dot-grey  { background: #cbd5e1; }        /* ⚪ inactive */
.dot-red   { background: #dc2626; }
.dot-gold  { background: var(--gold, #c79a3a); }