/* Muscle Map — see msd-muscle-map.js for the geometry contract.
   Red, not gold, on purpose: red is the colour every PT chart uses for "this
   muscle is working", and gold already means "tap me" across CjunCo. */

.msd-mm {
    --mm-body:      var(--msd-bg-4, #1c1c1c);
    --mm-line:      var(--msd-bg-2, #0d0d0d);
    --mm-muscle:    #444444;
    --mm-primary:   var(--msd-red, #ff5252);
    --mm-secondary: #7a3434;
    color: var(--msd-text, #efefef);
}

.msd-mm .mm-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.msd-mm .mm-sil { fill: var(--mm-body); }

.msd-mm .mm-m {
    fill: var(--mm-muscle);
    stroke: var(--mm-line);
    stroke-width: 1.1;
    stroke-linejoin: round;
    transition: fill var(--msd-transition-fast, .15s ease);
}

.msd-mm .mm-m.mm-s { fill: var(--mm-secondary); }
.msd-mm .mm-m.mm-p { fill: var(--mm-primary); }
.msd-mm .mm-shade  { pointer-events: none; }

/* ── Card: figure + FRONT/BACK + legend ─────────────────────────────────── */

.msd-mm.mm-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 340px;
}
.msd-mm.mm-card.mm-compact { max-width: 260px; }

.msd-mm .mm-figs { width: 100%; }

.msd-mm .mm-views {
    display: flex;
    justify-content: space-around;
    font-family: var(--msd-font-cond, 'Barlow Condensed', sans-serif);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--msd-text-2, #7a7a7a);
    margin-top: -2px;
}

.msd-mm .mm-legend {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: var(--msd-font-sans, 'DM Sans', system-ui, sans-serif);
    font-size: var(--msd-text-sm, 13px);
    line-height: 1.35;
    text-align: left;
}
.msd-mm .mm-lg-row { display: flex; gap: 8px; align-items: baseline; }
.msd-mm .mm-dot {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: translateY(1px);
}
.msd-mm .mm-dot-p { background: var(--mm-primary); }
.msd-mm .mm-dot-s { background: var(--mm-secondary); }
.msd-mm .mm-lg-k  { flex: none; width: 66px; color: var(--msd-text-2, #7a7a7a); font-size: 12px; }
.msd-mm .mm-lg-v  { color: var(--msd-text, #efefef); }
.msd-mm .mm-lg-row:first-child .mm-lg-v { font-weight: 500; }

/* ── Mini: a front+back pair for list rows ─────────────────────────────── */

.msd-mm.mm-mini {
    display: inline-block;
    flex: none;
    vertical-align: middle;
    line-height: 0;
}

/* ── Picker (Drill Library editor) ─────────────────────────────────────── */

.msd-mm.mm-pick { max-width: 360px; }
.msd-mm.mm-pick .mm-m { cursor: pointer; }
@media (hover: hover) {
    .msd-mm.mm-pick .mm-m:hover { stroke: var(--msd-gold, #C9A84C); stroke-width: 1.4; }
}
.msd-mm .mm-empty {
    font-size: 12px;
    color: var(--msd-text-2, #7a7a7a);
}
.msd-mm .mm-pick-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 12px;
    color: var(--msd-text-2, #7a7a7a);
}
.msd-mm .mm-pick-hint { flex: 1 1 100%; }
.msd-mm .mm-pick-chk  { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--msd-text, #efefef); }
.msd-mm .mm-pick-clear {
    background: none;
    border: 1px solid var(--msd-border-2, #242424);
    color: var(--msd-text-2, #7a7a7a);
    border-radius: 8px;
    padding: 4px 10px;
    font: inherit;
    cursor: pointer;
}