/* Logic2030 · Modus — component styles (pairs with modus.js) */

.logic-modus {
  --lm-ink: #a12652;
  --lm-plum: #4c2336;
  --lm-white: #fff8fa;
  --lm-blush: #f6dce7;
  --lm-size: 64px;
  --lm-aspect: 1;

  display: inline-block;
  position: relative;
  flex: none;
  width: calc(var(--lm-size) * var(--lm-aspect));
  height: var(--lm-size);
  line-height: 0;
  vertical-align: middle;
  -webkit-user-select: none;
  user-select: none;
}

.logic-modus > .lm-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;          /* rises and tilts may leave the box; never clip them */
  pointer-events: none;
}

/* Animated parts: transforms carry their own pivots, so the origin is user-space 0,0. */
.logic-modus .lm-part {
  transform-box: view-box;
  transform-origin: 0 0;
}

/* Palette via custom properties (the SVG attributes are fallbacks only). */
.logic-modus .lm-body,
.logic-modus .lm-ink { fill: var(--lm-ink); }
.logic-modus .lm-stroke { stroke: var(--lm-ink); }
.logic-modus .lm-eye-shade { fill: var(--lm-blush); }
.logic-modus .lm-eye-white,
.logic-modus .lm-glint { fill: var(--lm-white); }
.logic-modus .lm-pupil { fill: var(--lm-plum); }
.logic-modus .lm-lash { stroke: var(--lm-plum); }
.logic-modus .lm-glow { stroke: var(--lm-blush); }
.logic-modus .lm-sheen { fill: var(--lm-blush); stroke: none; }
.logic-modus .lm-shadow { fill: var(--lm-plum); }

/* Small optical cut (auto below 56px): hairlines thickened so the mark
   holds at 36px. modus.js also drops the glints, lash and sheen and
   enlarges the pupil for this cut. */
.logic-modus.lm--small .lm-body {
  stroke: var(--lm-ink);
  stroke-width: 5px;
  stroke-linejoin: round;
}