/* ============================================================
   CS Butcher — Lucide icon classes
   ------------------------------------------------------------
   Its own stylesheet, rather than a section of styles.css, because
   admin.html is a standalone page that loads neither site stylesheet
   (it carries its own inline CSS) and still needs the same icons.
   One mechanism for all seven surfaces beats a second copy.

   Regenerate the class list after adding or removing a file in this
   directory; tests/icons.test.js asserts the two stay in sync.
   ============================================================ */

/* ────────── Lucide icon set ──────────
   The site's only icon mechanism. Each glyph is a mask, not an <img>, so it
   paints in `currentColor` and inherits the colour of whatever it sits in —
   white on the charcoal nav, red on a CTA, muted on a card. An <img> can't do
   that, which is why the section divider used to reach for a
   `filter: sepia() saturate() hue-rotate()` approximation of the brand red.

   Usage: <i class="icon icon-truck" aria-hidden="true"></i>
   Size with font-size (the box is 1em square) or an explicit width/height.
   Icons are decorative by default — give the surrounding control the label. */
.icon {
  display: inline-block;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* One class per file in assets/icons/. tests/icons.test.js keeps the two in sync. */
.icon-arrow-right { --icon: url('/assets/icons/arrow-right.svg'); }
.icon-arrow-up-right { --icon: url('/assets/icons/arrow-up-right.svg'); }
.icon-axe { --icon: url('/assets/icons/axe.svg'); }
.icon-beef { --icon: url('/assets/icons/beef.svg'); }
.icon-calendar { --icon: url('/assets/icons/calendar.svg'); }
.icon-camera { --icon: url('/assets/icons/camera.svg'); }
.icon-check { --icon: url('/assets/icons/check.svg'); }
.icon-check-circle-2 { --icon: url('/assets/icons/check-circle-2.svg'); }
.icon-chef-hat { --icon: url('/assets/icons/chef-hat.svg'); }
.icon-chevron-down { --icon: url('/assets/icons/chevron-down.svg'); }
.icon-chevron-right { --icon: url('/assets/icons/chevron-right.svg'); }
.icon-circle { --icon: url('/assets/icons/circle.svg'); }
.icon-circle-check { --icon: url('/assets/icons/circle-check.svg'); }
.icon-circle-x { --icon: url('/assets/icons/circle-x.svg'); }
.icon-clock { --icon: url('/assets/icons/clock.svg'); }
.icon-drumstick { --icon: url('/assets/icons/drumstick.svg'); }
.icon-egg { --icon: url('/assets/icons/egg.svg'); }
.icon-eye { --icon: url('/assets/icons/eye.svg'); }
.icon-eye-off { --icon: url('/assets/icons/eye-off.svg'); }
.icon-fish { --icon: url('/assets/icons/fish.svg'); }
.icon-flame { --icon: url('/assets/icons/flame.svg'); }
.icon-hand-heart { --icon: url('/assets/icons/hand-heart.svg'); }
.icon-heart { --icon: url('/assets/icons/heart.svg'); }
.icon-home { --icon: url('/assets/icons/home.svg'); }
.icon-ice-cream-cone { --icon: url('/assets/icons/ice-cream-cone.svg'); }
.icon-lamb { --icon: url('/assets/icons/lamb.svg'); }
.icon-leaf { --icon: url('/assets/icons/leaf.svg'); }
.icon-lock { --icon: url('/assets/icons/lock.svg'); }
.icon-log-out { --icon: url('/assets/icons/log-out.svg'); }
.icon-mail { --icon: url('/assets/icons/mail.svg'); }
.icon-map-pin { --icon: url('/assets/icons/map-pin.svg'); }
.icon-menu { --icon: url('/assets/icons/menu.svg'); }
.icon-message-circle { --icon: url('/assets/icons/message-circle.svg'); }
.icon-minus { --icon: url('/assets/icons/minus.svg'); }
.icon-monitor { --icon: url('/assets/icons/monitor.svg'); }
.icon-package { --icon: url('/assets/icons/package.svg'); }
.icon-pencil { --icon: url('/assets/icons/pencil.svg'); }
.icon-phone { --icon: url('/assets/icons/phone.svg'); }
.icon-plus { --icon: url('/assets/icons/plus.svg'); }
.icon-pork { --icon: url('/assets/icons/pork.svg'); }
.icon-search { --icon: url('/assets/icons/search.svg'); }
.icon-shopping-bag { --icon: url('/assets/icons/shopping-bag.svg'); }
.icon-star { --icon: url('/assets/icons/star.svg'); }
.icon-trash-2 { --icon: url('/assets/icons/trash-2.svg'); }
.icon-triangle-alert { --icon: url('/assets/icons/triangle-alert.svg'); }
.icon-truck { --icon: url('/assets/icons/truck.svg'); }
.icon-user-round { --icon: url('/assets/icons/user-round.svg'); }
.icon-utensils-crossed { --icon: url('/assets/icons/utensils-crossed.svg'); }
.icon-wallet { --icon: url('/assets/icons/wallet.svg'); }
.icon-x { --icon: url('/assets/icons/x.svg'); }