/* ============================================================
   ФитБаза — карта мышц: фигура спереди и сзади с подсветкой.
   Палитра общая с приложением; свои только состояния зон.
   ============================================================ */

.mm{display:flex;flex-direction:column;gap:12px;}

/* ---------- Панель над картой ---------- */
.mm-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mm-seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;}
.mm-seg button{border:none;background:none;padding:7px 14px;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:650;color:var(--mut);transition:.15s;white-space:nowrap;}
.mm-seg button.on{background:var(--accent);color:#fff;}
.mm-seg button:hover:not(.on){color:var(--ink);}
.mm-count{margin-left:auto;font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;}

/* ---------- Сцена ---------- */
.mm-stage{display:flex;gap:14px;justify-content:center;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--tr-r,16px);padding:14px 12px 10px;}
.mm-side{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;}
.mm-cap{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);}

.mm-fig{height:min(58vh,420px);width:auto;max-width:100%;display:block;touch-action:manipulation;}

/* Силуэт: тело, на котором лежат мышцы. */
.mm-shell path{fill:#241d38;stroke:#3a3157;stroke-width:2;vector-effect:non-scaling-stroke;}

/* Зоны. Невыбранная мышца видна как рельеф, выбранная горит акцентом. */
.mm-zone path{fill:#3b3358;stroke:#0f0b1a;stroke-width:1.4;vector-effect:non-scaling-stroke;
  transition:fill .16s ease,opacity .16s ease;}
.mm-zone.inert path{fill:#2b2442;stroke:#191330;}
.mm-zone[data-zone]{cursor:pointer;}
/* Обводка у нажимаемых зон толще: она же служит областью попадания,
   поэтому мелкие мышцы становится реально поймать пальцем.
   paint-order:stroke — заливка перекрывает половину обводки, вид почти не меняется. */
.mm-zone[data-zone] path{stroke-width:4;paint-order:stroke;stroke-linejoin:round;}
@media (hover:hover){
  .mm-zone[data-zone]:hover path{fill:#554a7d;}
  }
.mm-zone[data-zone]:focus{outline:none;}
.mm-zone[data-zone]:focus-visible path{stroke:var(--accent2,#a78bfa);stroke-width:2.5;}

/* Отмеченная зона горит одинаково — сколько бы мышц справочника в неё ни входило. */
.mm-zone.on path{fill:var(--accent,#8b5cf6);}
.mm-zone.on:hover path{fill:#a78bfa;}

.mm-hint{font-size:12px;color:var(--mut);line-height:1.5;}

/* ---------- Только для чтения: маленькая карта в карточке ---------- */
.mm-ro .mm-stage{padding:10px 8px 8px;gap:8px;background:transparent;border-color:transparent;}
.mm-ro .mm-fig{height:230px;}
.mm-ro .mm-zone path{stroke-width:1;}

/* ---------- Телефон ---------- */
@media (max-width:720px), (max-height:560px){
  .mm-stage{padding:10px 8px 8px;}
  /* 44vh, а не 52: карта не должна занимать всю шторку формы. */
  .mm-fig{height:min(44vh,340px);}
  .mm-count{margin-left:0;width:100%;order:3;}
  .mm-seg{padding:4px;}
  .mm-seg button{padding:11px 14px;font-size:13px;min-height:44px;}
  .mm-ro .mm-fig{height:170px;}
}

/* Пока грузится геометрия */
.mm-load{padding:26px 12px;text-align:center;font-size:13px;color:var(--mut);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--tr-r,16px);}