/* =========================================================================
   TODAY'S RHYTHM — redesign. She found it basic and uninviting: everything was
   12–14px DM Sans, a hairline spine and grey dots, with no hierarchy and nothing
   of HabituallyU in it.
   Direction is taken from the brand already in this file rather than a new one —
   Playfair for the display voice, Nunito for meta, sage/blush/navy on warm cream.
   THE SIGNATURE is the day's spine: a continuous sage thread with the time set on
   it as a pill, and a live "now" marker showing where you are in your own day.
   That encodes something true (the shape of the day and your place in it) rather
   than decorating the list.
   ========================================================================= */
#huRhythmRoot [data-trday]{
  background:#FBF8F2;
  border-radius:20px;
  padding:18px 16px 6px;
  margin-top:4px;
}
/* each entry becomes a soft tile on the cream, so the eye reads one thing at a time */
#huRhythmRoot [data-trrow]{
  position:relative;
  align-items:center !important;
  gap:12px !important;
  background:#FFFFFF;
  border:1px solid #EFEAE0;
  border-radius:16px;
  padding:14px 14px 14px 12px;
  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;
}
#huRhythmRoot [data-trrow]:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(36,52,71,.09);
  border-color:#DCE7D8;
}
/* the time, set ON the spine as a pill — the strongest change from the old
   grey 12px label */
#huRhythmRoot [data-trrow] > span:first-child{
  align-self:center !important;
  padding:6px 10px !important;
  border-radius:999px;
  background:#EEF4EC;
  font-family:'Nunito',system-ui,sans-serif;
  font-size:.72rem !important; font-weight:800 !important;
  letter-spacing:.04em;
  text-align:center;
  color:#4E6640 !important; -webkit-text-fill-color:#4E6640 !important;
}
/* the row's own grid is `66px 18px 1fr 24px`; the time pill needs a little more
   than 66px or "12:30 pm" breaks onto two lines inside it */
#huRhythmRoot [data-trrow]{
  grid-template-columns:78px 18px 1fr 32px !important;
}
#huRhythmRoot [data-trrow] > span:first-child{ white-space:nowrap; }

/* the spine: continuous sage thread rather than a broken grey hairline */
#huRhythmRoot [data-trrow] > div:nth-child(2){ position:relative; align-self:stretch; }
#huRhythmRoot [data-trrow] > div:nth-child(2) > span:last-child{
  display:none !important;                 /* the old per-row stub */
}
#huRhythmRoot [data-trday]::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
}
#huRhythmRoot [data-trrow] > div:nth-child(2)::before{
  content:""; position:absolute; left:50%; top:-24px; bottom:-24px;
  width:2px; transform:translateX(-50%);
  background:linear-gradient(#DCE7D8,#CFE0C8);
  border-radius:2px;
}
#huRhythmRoot [data-trrow]:first-of-type > div:nth-child(2)::before{ top:50%; }
#huRhythmRoot [data-trrow]:last-of-type > div:nth-child(2)::before{ bottom:50%; }
/* the dot sits on the thread */
#huRhythmRoot [data-trrow] > div:nth-child(2) > span:first-child{
  position:relative; z-index:1;
  width:12px !important; height:12px !important;
  margin-top:0 !important;
  box-shadow:0 0 0 4px #FBF8F2;
}
#huRhythmRoot [data-trrow][data-trdone="1"] > div:nth-child(2) > span:first-child{
  background:#5F7350 !important;
}

/* TITLE — the biggest change: Playfair, the site's display face, at a size that
   actually leads the row */
#huRhythmRoot [data-trrow] > div:nth-child(3) > p:first-child{
  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;
}
#huRhythmRoot [data-trrow] > div:nth-child(3) > p + p{
  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;
}
/* done entries settle back rather than shouting */
#huRhythmRoot [data-trrow][data-trdone="1"]{ background:#F6FAF4; border-color:#DCE7D8; }
#huRhythmRoot [data-trrow][data-trdone="1"] > div:nth-child(3) > p:first-child{
  color:#4E6640 !important; -webkit-text-fill-color:#4E6640 !important;
}

/* the tick, bigger and in the brand's sage */
#huRhythmRoot [data-trrow] > button{
  width:30px !important; height:30px !important;
  align-self:center !important; margin-top:0 !important;
  border-color:#CFE0C8 !important;
}
#huRhythmRoot [data-trrow] > button:hover{ border-color:#5F7350 !important; background:#EEF4EC !important; }

/* the island's done tick is bright emerald, which fights the sage everywhere else
   in this card — brought into the brand's own green */
#huRhythmRoot [data-trrow] > button[class*="bg-emerald"],
#huRhythmRoot [data-trrow][data-trdone="1"] > button{
  background:#5F7350 !important;
  border-color:#5F7350 !important;
  color:#ffffff !important;
}
#huRhythmRoot [data-trrow] > button[class*="bg-emerald"] svg{ color:#fff !important; }
/* and the card's coral link, the last thing still speaking the old accent */
#huRhythmRoot [data-trcard] button[class*="text-[#ee725f]"],
#huRhythmRoot [data-trcard] a[class*="text-[#ee725f]"]{
  color:#4E6640 !important; -webkit-text-fill-color:#4E6640 !important;
}

/* NOW — the live marker. Sits between the rows nearest the current time. */
#huRhythmRoot .tr-now{
  display:flex; align-items:center; gap:10px;
  margin:2px 0 12px 0; padding-left:2px;
}
#huRhythmRoot .tr-now span:first-child{
  font-family:'Nunito',system-ui,sans-serif;
  font-size:.62rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  /* the blush #C4707F reads 3.03 on its own #FCEAEA pill — too low for a 10px
     uppercase label, so it drops to the next step down in the same family */
  color:#98455E !important; -webkit-text-fill-color:#98455E !important;
  background:#FCEAEA; border-radius:999px; padding:4px 10px; flex:none;
}
#huRhythmRoot .tr-now span:last-child{
  flex:1; height:2px; border-radius:2px;
  background:linear-gradient(90deg,#F0C9CE,rgba(240,201,206,0));
}

/* the card heading and its links, in the same voice */
#huRhythmRoot [data-trcard] > div:first-child h2{
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:1.22rem !important; font-weight:700 !important;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
@media (prefers-reduced-motion:reduce){
  #huRhythmRoot [data-trrow]{ transition:none !important; }
  #huRhythmRoot [data-trrow]:hover{ transform:none !important; }
}
@media (max-width:560px){
  #huRhythmRoot [data-trday]{ padding:14px 12px 4px; }
  #huRhythmRoot [data-trrow]{ padding:12px 10px; gap:9px !important; }
  #huRhythmRoot [data-trrow] > div:nth-child(3) > p:first-child{ font-size:1rem !important; }
}