/* YOUR OWN HABITS, inside Today's Rhythm, brought into the redesign.
   They render as `.hb-row` in `#hbRhythm` — a different component to the island's
   `[data-trrow]`, so the earlier restyle never reached them and they still looked
   like the old flat list (0.88rem, 8px dot, no tile). Same language applied:
   cream group headings as sage pills, white tiles, spine, Playfair titles. */
#hbRhythm .hb-group{ margin-top:2px !important; }
/* the group heading matches the full schedule's part markers exactly: a sage pill
   with a fading rule running off it. The label text has to be WRAPPED first —
   it sits as a bare text node, so the pill and the rule cannot be separated
   with CSS alone. */
#hbRhythm .hb-group-h{
  display:flex !important; align-items:center; gap:10px;
  margin:14px 0 10px !important; padding:0 !important; background:none !important;
}
#hbRhythm .hb-group-h .hbg-t{
  font-family:'Nunito',system-ui,sans-serif;
  font-size:.62rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:#4E6640 !important; -webkit-text-fill-color:#4E6640 !important;
  background:#EEF4EC; border-radius:999px; padding:4px 11px; flex:none;
}
#hbRhythm .hb-group-h .hbg-r{
  flex:1; height:1px; background:linear-gradient(90deg,#DCE7D8,rgba(220,231,216,0));
}

/* each habit becomes a tile, matching the island's rows exactly */
#hbRhythm .hb-row{
  position:relative;
  gap:12px !important;
  background:#FFFFFF;
  border:1px solid #EFEAE0;
  border-radius:16px;
  padding:12px 14px 12px 8px !important;
  margin-bottom:10px;
  box-shadow:0 2px 8px rgba(36,52,71,.05);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#hbRhythm .hb-row:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(36,52,71,.09);
  border-color:#DCE7D8;
}
#hbRhythm .hb-row.is-done{ background:#F6FAF4; border-color:#DCE7D8; }

/* title in the display face, like the entries above */
#hbRhythm .hb-row-t{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:1.06rem !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#hbRhythm .hb-row.is-done .hb-row-t{
  color:#4E6640 !important; -webkit-text-fill-color:#4E6640 !important;
  text-decoration:none !important; opacity:1 !important;
}
#hbRhythm .hb-row-m{
  font-family:'Nunito',system-ui,sans-serif !important;
  font-size:.82rem !important; margin-top:3px !important;
  color:#6A7380 !important; -webkit-text-fill-color:#6A7380 !important;
}
/* the little colour dot becomes the spine marker, sized like the island's */
#hbRhythm .hb-dot{
  width:12px !important; height:12px !important;
  box-shadow:0 0 0 4px #FBF8F2;
}
#hbRhythm .hb-row.is-done .hb-dot{ background:#5F7350 !important; }
#hbRhythm .hb-row-menu{ opacity:.65; }
@media (prefers-reduced-motion:reduce){
  #hbRhythm .hb-row{ transition:none !important; }
  #hbRhythm .hb-row:hover{ transform:none !important; }
}
@media (max-width:560px){
  #hbRhythm .hb-row{ padding:11px 10px 11px 6px !important; gap:9px !important; }
  #hbRhythm .hb-row-t{ font-size:1rem !important; }
}