/* ============================================================================
   M1 ICON SYSTEM — Build Plan §8.2
   One grid, one stroke width, multi-weight, animated, RTL-aware, no CDN.

   All motion here is CSS keyframes. Nothing depends on requestAnimationFrame:
   an environment that stalls the animation tick must degrade to a static icon,
   never to a half-drawn one.
   ========================================================================= */

.m1-icon {
  /* sizes with the text it sits beside — no per-icon pixel values */
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
  overflow: visible;
  /* Weights travel as INHERITED custom properties, not descendant selectors.
     `.m1-icon--duotone .i-solid {}` does NOT match into the shadow tree that
     <use> creates, so it would silently do nothing. Custom properties, like
     currentColor and the stroke-dash properties, DO inherit across it. */
  --m1-solid: 0;
}
.m1-icon .i-solid { fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------- SIZE */
.m1-icon--xs { inline-size: 0.875rem; block-size: 0.875rem; stroke-width: 1.75; }
.m1-icon--sm { inline-size: 1rem;     block-size: 1rem;     stroke-width: 1.6; }
.m1-icon--md { inline-size: 1.25rem;  block-size: 1.25rem; }
.m1-icon--lg { inline-size: 1.5rem;   block-size: 1.5rem; }
.m1-icon--xl { inline-size: 2rem;     block-size: 2rem;     stroke-width: 1.35; }
.m1-icon--2xl{ inline-size: 3rem;     block-size: 3rem;     stroke-width: 1.2; }
/* Stroke is compensated as size changes: a constant 1.5 looks heavy at 14px and
   spindly at 48px. This keeps optical weight constant, which is what "one stroke
   width" actually means in practice. */

/* ---------------------------------------------------------------- WEIGHT */
.m1-icon--light   { stroke-width: 1.25; }
.m1-icon--bold    { stroke-width: 2.25; }
.m1-icon--duotone { --m1-solid: .18; }
.m1-icon--filled  { --m1-solid: 1; }
/* On a filled icon the outline still draws, which keeps interior detail legible
   at 16px instead of collapsing into a blob. */

/* ---------------------------------------------------------------- INTENT */
.m1-icon--brand   { color: var(--intent-brand-text); }
.m1-icon--success { color: var(--intent-success-text); }
.m1-icon--warning { color: var(--intent-warning-text); }
.m1-icon--danger  { color: var(--intent-danger-text); }
.m1-icon--muted   { color: var(--text-muted); }

/* ---------------------------------------------------------------- RTL
   Opt in, never automatic. Arrows, chevrons, back/next, undo, logout and
   trending mirror. Search, clock, user, check, star must NOT — a mirrored
   magnifying glass or clock reads as broken to an Arabic speaker. */
[dir='rtl'] .m1-icon--directional { transform: scaleX(-1); }

/* ============================================================================
   MOTION — §8.2 "animated micro-interactions on key POS and status transitions"
   Each one is tied to a moment that actually matters at a till.
   ========================================================================= */

/* spinner — any pending operation */
.m1-icon--spin { animation: m1-icon-spin 900ms linear infinite; transform-origin: 50% 50%; }
@keyframes m1-icon-spin { to { transform: rotate(360deg); } }

/* draw-on tick — payment taken, shift closed, order accepted.
   The single most valuable animation in a POS: it reads as "done" without a
   toast, at arm's length. */
/* The dash values are set on the ICON element and inherited into the clone —
   the same boundary problem as duotone, solved the same way. */
.m1-icon--draw { --m1-dash: 26; animation: m1-icon-draw 420ms var(--ease-decelerate) forwards; }
@keyframes m1-icon-draw { from { --m1-dashoff: 26; } to { --m1-dashoff: 0; } }
@property --m1-dashoff { syntax: '<number>'; inherits: true; initial-value: 26; }

/* pop — item added to cart / quantity incremented */
.m1-icon--pop { animation: m1-icon-pop 260ms var(--ease-standard); transform-origin: 50% 50%; }
@keyframes m1-icon-pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* ring — a notification arrived. Rotation only; no translation, so it cannot
   nudge the layout of the bar it sits in. */
.m1-icon--ring { animation: m1-icon-ring 900ms var(--ease-standard); transform-origin: 50% 15%; }
@keyframes m1-icon-ring {
  0%,100% { transform: rotate(0); }
  10% { transform: rotate(14deg); } 20% { transform: rotate(-12deg); }
  30% { transform: rotate(9deg); }  40% { transform: rotate(-7deg); }
  50% { transform: rotate(4deg); }  60% { transform: rotate(-2deg); }
}

/* pulse — a device stopped reporting, a ticket breached SLA. Deliberately slow;
   an alert that flashes fast gets ignored or disabled. */
.m1-icon--pulse { animation: m1-icon-pulse 1.8s var(--ease-standard) infinite; transform-origin: 50% 50%; }
@keyframes m1-icon-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.92); } }

/* nudge — hover affordance on a directional control. Uses logical direction so
   it pushes the correct way in RTL. */
.m1-icon--nudge { transition: translate var(--motion-fast) var(--ease-standard); }
:where(a, button):hover > .m1-icon--nudge { translate: 3px 0; }
[dir='rtl'] :where(a, button):hover > .m1-icon--nudge { translate: -3px 0; }

/* sync — background job running; slower than the spinner so the two read as
   different states rather than the same thing at two speeds. */
.m1-icon--sync { animation: m1-icon-spin 2.2s linear infinite; transform-origin: 50% 50%; }

/* Reduced motion is already zeroed globally in tokens.css. Belt and braces:
   these must end in their FINISHED state, never mid-draw. */
@media (prefers-reduced-motion: reduce) {
  .m1-icon--draw { --m1-dashoff: 0; animation: none; }
  .m1-icon--spin, .m1-icon--sync, .m1-icon--pulse,
  .m1-icon--ring, .m1-icon--pop { animation: none; }
}

/* ---------------------------------------------------------------- COMPOSITION */
.m1-icon-badge { position: relative; display: inline-flex; }
.m1-icon-badge__dot {
  position: absolute; inset-block-start: -2px; inset-inline-end: -2px;
  min-inline-size: 1rem; block-size: 1rem; padding-inline: 3px;
  border-radius: var(--radius-full);
  background: var(--intent-danger); color: #fff;
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  display: grid; place-items: center; line-height: 1;
  border: 2px solid var(--surface-raised);
}