/* ============================================================
   The Rhythm Method — page-specific styles.
   Everything common (tokens, header, nav, pb-*, .min chips,
   phases, milestones, tables, next-btn, figures, footer)
   comes from css/shared.css.
   ============================================================ */

/* header pattern flourish */
.hdr-strum{
  margin-top:20px; font-family:'IBM Plex Mono',monospace; font-size:15px;
  letter-spacing:.3em; color:var(--brass);
}

/* ---------------- strum pattern widget ---------------- */
.strum{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:16px 16px 14px; margin:20px 0;
}
.strum-title{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass); margin-bottom:12px;
}
.strum-row{display:flex; gap:6px;}
.strum-slot{flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0;}
.strum-count{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted);
}
.strum-count.onbeat{color:var(--brass); font-weight:600;}
.strum-cell{
  width:100%; max-width:46px; aspect-ratio:1/1;
  border:1px solid var(--line); border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel2); color:var(--ink);
  transition:box-shadow .08s ease;
}
.strum-cell svg{display:block; width:22px; height:22px;}
.strum-cell.chop{color:var(--sage);}
.strum-cell.miss{border-style:dashed; background:none; color:var(--muted); opacity:.7;}
.strum-cell.accent{background:var(--brass); border-color:var(--brass); color:var(--bg);}
.strum-cell.ghost{opacity:.35;}
.strum-cell.now{box-shadow:0 0 0 2.5px var(--brass); opacity:1;}
.strum-cell.miss.now{opacity:.9;}
.strum-cap{
  margin-top:12px; font-family:'IBM Plex Mono',monospace; font-size:12px;
  color:var(--muted); line-height:1.6;
}
.strum-cap b{color:var(--brass); font-weight:600;}

/* pattern legend */
.legend{
  display:flex; gap:16px 22px; flex-wrap:wrap; margin:14px 0 4px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted);
}
.legend span{display:flex; align-items:center; gap:8px;}
.legend .lg-cell{
  width:26px; height:26px; border:1px solid var(--line); border-radius:6px;
  background:var(--panel2); display:flex; align-items:center; justify-content:center;
  color:var(--ink); flex:none;
}
.legend .lg-cell svg{width:14px; height:14px; display:block;}
.legend .lg-cell.chop{color:var(--sage);}
.legend .lg-cell.miss{border-style:dashed; background:none; color:var(--muted);}
.legend .lg-cell.accent{background:var(--brass); border-color:var(--brass); color:var(--bg);}
.legend .lg-cell.ghost{opacity:.35;}