/**
 * BillGrid Gridmarks -- the one icon set (native 16px grid, sprite in fragments/bg-icons-sprite.html).
 * Tokens: --icon-size-*, --icon-stroke-*, --icon-gap-*, --icon-tint-* (tokens/bg-tokens.css).
 * Size by modifier (--xs 12, default 16, --lg 20, --xl 24); the fragment/JS helpers pick it from the requested size.
 * Reference page: docs/mocks/app/icons.html.
 */

/* The sprite is drawn once, so its stroke must not scale with the symbol: weight comes from --bg-icon-sw in screen px. */
.bg-icons-sprite symbol * {
  vector-effect: non-scaling-stroke;
}

/* Duotone: shapes marked .t fill with the icon color at --bg-icon-tint (0 = plain outline). Parents raise it on hover/active. */
.bg-icons-sprite .t {
  fill: currentColor;
  fill-opacity: var(--bg-icon-tint, 0);
}

.bg-icon {
  --bg-icon-size: var(--icon-size-md, 16px);
  --bg-icon-sw: var(--icon-stroke-md, 1.25px);
  display: inline-block;
  width: var(--bg-icon-size);
  height: var(--bg-icon-size);
  flex-shrink: 0;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--bg-icon-sw);
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--bg-icon-color, inherit);
  /* Optically centered on the x-height of adjacent text when not in a flex row. */
  vertical-align: -0.28em;
}

.bg-icon--xs { --bg-icon-size: var(--icon-size-xs, 12px); --bg-icon-sw: var(--icon-stroke-xs, 1.25px); vertical-align: -0.14em; }
.bg-icon--lg { --bg-icon-size: var(--icon-size-lg, 20px); --bg-icon-sw: var(--icon-stroke-lg, 1.5px); vertical-align: -0.45em; }
.bg-icon--xl { --bg-icon-size: var(--icon-size-xl, 24px); --bg-icon-sw: var(--icon-stroke-xl, 1.75px); vertical-align: -0.6em; }

/* Solid: shapes fully filled (timer start/stop). */
.bg-icon--solid { --bg-icon-tint: 1; }

/* Tone variants */
.bg-icon--muted {
  color: var(--bg-icon-color, var(--color-text-soft));
}

/* Breadcrumbs */
body.bg-app .breadcrumb .bg-icon {
  margin-right: var(--icon-gap-xs, 4px);
  color: var(--color-text-soft);
}

/* Buttons are flex rows: the gap to the label is the button's --icon-gap-sm, never a margin on the icon. */

/* Suppress legacy sprite on modern app shell where bg-icon is used */
body.bg-app svg.bg-icon {
  background: none;
}