/* ============================================================================
   home-muscles.css — the "Muscle Groups to Focus On" card on Home.aspx.

   Three nested levels: major muscle group -> its Targets -> up to 5 Methods each.

   Row metrics deliberately MATCH styles_shared.css §45 (.home-todo-row: a
   1.5rem | 1fr | auto grid with a .85rem column gap), so this card and the
   "Suggested ToDo's" card directly above it line their checkboxes and text up
   with each other. If that shared rule ever changes, change these to match.

   Colours come from the host theme's variables, so dark mode is automatic.
   Linked from Home.aspx's HeadContent via AssetUrl (mtime-versioned ?v=), which
   is why editing this file needs NO service-worker CACHE_VERSION bump.
   ========================================================================= */

/* ── Level 1: the major muscle group ───────────────────────────────────── */
.mf-grouprow {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 0.85rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--color-border, #e0e0e0);
}
.mf-grouprow:first-child { border-top: none; }
.mf-grouprow:hover { background: var(--color-hover-bg, rgba(0, 0, 0, 0.03)); }

.mf-gname {
    font-weight: var(--font-weight-bold, 700);
    font-size: 1.02rem;
    line-height: 1.35;
}
.mf-gsub {
    margin-top: 0.1rem;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-light, #667);
    line-height: 1.35;
}
/* The count the days-since chip hides. Deliberately the only red text in the row. */
.mf-stale { color: var(--color-danger, #c0392b); }
[data-theme="dark"] .mf-stale { color: #ff8a80; }

.mf-gmeta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: end;
    white-space: nowrap;
}
.mf-gmeta .button { margin: 0; }

/* The expanded body. The left rule ties the Targets visually to their group. */
.mf-gpanel {
    padding: 0 0 0.5rem 1rem;
    margin-left: 0.25rem;
    border-left: 2px solid var(--color-border, #e0e0e0);
}
.mf-gpanel[hidden] { display: none; }

/* ── Level 2: the Targets inside a group ───────────────────────────────── */
.mf-trow {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    align-items: center;
    column-gap: 0.85rem;
    padding: 0.5rem 0 0.35rem;
}
.mf-trow + .mf-trow,
.mf-exlist + .mf-trow,
.mf-empty + .mf-trow { border-top: 1px dashed var(--color-border, #e0e0e0); }

.mf-tname { font-weight: var(--font-weight-medium, 600); line-height: 1.3; }
.mf-tsub {
    margin-top: 0.05rem;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-light, #667);
}
.mf-tmeta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-self: end;
    white-space: nowrap;
}
/* Stands in for the checkbox on a Target whose ShowCheckbox is 0 — it renders on
   the checklist as a container row, so there is genuinely nothing to tick. Keeps
   the column width so the names below still line up. */
.mf-nocb {
    display: inline-block;
    width: 1.5rem;
    text-align: center;
    color: var(--color-text-light, #667);
}

/* ── Level 3: the Methods inside a Target ──────────────────────────────── */
.mf-exlist {
    list-style: none;
    margin: 0 0 0.35rem;
    padding: 0 0 0 2.35rem;   /* 1.5rem checkbox + 0.85rem gap = aligns under .mf-tname */
}
.mf-exlist li {
    display: grid;
    grid-template-columns: 1.15rem 1fr auto auto;
    align-items: center;
    column-gap: 0.5rem;
    padding: 0.22rem 0;
    font-size: var(--font-size-sm, 0.875rem);
}
.mf-exlist li input.checkbox { width: 1.05rem; height: 1.05rem; margin: 0; }
.mf-exname { min-width: 0; }
.mf-exdays {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-light, #667);
    white-space: nowrap;
}
.mf-empty { padding-left: 2.35rem; margin: 0 0 0.35rem; }

/* Why a Method the user toggled off or hid is being suggested: the list ran out of
   ones marked Show. Only the top-up rows are tagged — a plain row is a Show row. */
.mf-pool {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    white-space: nowrap;
}
.mf-pool-t { background: var(--color-warning, #e67e22); color: #fff; }
.mf-pool-h { background: var(--color-text-muted, #7a8699); color: #fff; }

/* Just checked off in this session. The "days since" text next to it was computed
   server-side and is now stale, so dim it rather than leave it reading confidently. */
.mf-justlogged .mf-exdays,
.mf-justlogged .mf-tmeta { opacity: 0.45; }

@media (max-width: 560px) {
    .mf-grouprow { grid-template-columns: 1fr; row-gap: 0.4rem; }
    .mf-gmeta { justify-self: start; }
    .mf-gpanel { padding-left: 0.6rem; }
    .mf-exlist { padding-left: 1.2rem; }
    /* Drop the days column onto its own line rather than squeezing the name. */
    .mf-exlist li { grid-template-columns: 1.15rem 1fr auto; }
    .mf-exdays { grid-column: 2 / -1; }
}