/* ============================================================================
   mity-ui.css · Shared UI polish.
   1) The branded "Mity Retail" 3-tier model control (.mity-model) + tier meter.
   2) A light animation pass (staggered entrances, press feedback) — all gated
      behind prefers-reduced-motion: no-preference.
   ========================================================================== */

/* ---------- Mity Retail model control ---------- */
.mity-model {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 5px 10px 5px 7px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  position: relative; cursor: pointer;
}
.mity-model:hover { border-color: var(--mint); box-shadow: 0 3px 12px rgba(4, 190, 140, .14); }
.mity-model:focus-within { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(4, 190, 140, .18); }
.mity-model__mark { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 6px; background: var(--mint-tint); flex: none; }
.mity-model__mark .mi { width: 13px; height: 13px; color: var(--mint-700); }
.mity-model__fam { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: -.01em; color: var(--text-1); white-space: nowrap; }
.mity-model__sel { border: none; background: transparent; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--mint-ink); cursor: pointer; padding: 2px 0; max-width: 96px; }
.mity-model__sel:focus { outline: none; }
/* 3-bar tier meter — fills up to the selected level */
.mity-model__tier { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; flex: none; padding-left: 1px; }
.mity-model__tier i { width: 3px; border-radius: 2px; background: var(--line); transform-origin: bottom; transition: background .3s ease; }
.mity-model__tier i:nth-child(1) { height: 5px; } .mity-model__tier i:nth-child(2) { height: 9px; } .mity-model__tier i:nth-child(3) { height: 13px; }
.mity-model__tier[data-tier="1"] i:nth-child(1),
.mity-model__tier[data-tier="2"] i:nth-child(-n+2),
.mity-model__tier[data-tier="3"] i { background: var(--mint); }

/* composer variant: lighter, sits inside the rounded input pill */
.copilot__input .mity-model { border: none; box-shadow: none; background: transparent; padding: 3px 4px; }
.copilot__input .mity-model:hover { box-shadow: none; }
.copilot__input .mity-model:focus-within { box-shadow: none; }
.copilot__input .mity-model__fam { color: var(--text-2); }

@media (prefers-reduced-motion: no-preference) {
  .mity-model.is-changed { animation: mity-model-glow .55s ease; }
  .mity-model.is-changed .mity-model__tier i { animation: mity-tier-pop .42s cubic-bezier(.16, 1, .3, 1); }
  .mity-model.is-changed .mity-model__tier i:nth-child(2) { animation-delay: .05s; }
  .mity-model.is-changed .mity-model__tier i:nth-child(3) { animation-delay: .1s; }
  @keyframes mity-model-glow { 0% { box-shadow: 0 0 0 0 rgba(4, 190, 140, .4); } 100% { box-shadow: 0 0 0 9px rgba(4, 190, 140, 0); } }
  @keyframes mity-tier-pop { 0% { transform: scaleY(.4); } 60% { transform: scaleY(1.18); } 100% { transform: scaleY(1); } }
}
@media (max-width: 560px) { .copilot__input .mity-model__fam { display: none; } }

/* ---------- Animation polish (entrances + press feedback) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* staggered entrance for dashboard grids */
  .exec__kpis .exec-kpi:nth-child(2) { animation-delay: .05s; }
  .exec__kpis .exec-kpi:nth-child(3) { animation-delay: .1s; }
  .exec__kpis .exec-kpi:nth-child(4) { animation-delay: .15s; }
  .exec__kpis .exec-kpi:nth-child(5) { animation-delay: .2s; }
  .rg__grid .rg-card:nth-child(2) { animation-delay: .04s; }
  .rg__grid .rg-card:nth-child(3) { animation-delay: .08s; }
  .rg__grid .rg-card:nth-child(4) { animation-delay: .12s; }
  .rg__grid .rg-card:nth-child(5) { animation-delay: .16s; }
  .rg__grid .rg-card:nth-child(6) { animation-delay: .2s; }
  .rg__grid .rg-card:nth-child(7) { animation-delay: .24s; }
  .rg__grid .rg-card:nth-child(8) { animation-delay: .28s; }
  .exec-heat__tiles .exec-tile { animation-delay: calc(var(--i, 0) * .012s); }
}

/* satisfying press feedback on the main interactive controls */
.exec-btn:active, .sim-scen:active, .fc-fac:active, .comp-chip:active,
.nlq-chip:active, .shift-inc__ask:active, .shift-inc__done:active,
.shift-reset:active, .rg-card:active, .pf-theme:active { transform: translateY(0) scale(.96); }