/* Today + Routines merged into one tab, "Daily Rhythm", keeping the Routines photo.
   The island renders ONE panel at a time and its source/build pipeline is no longer
   in the sandbox, so the two panels cannot be stacked into a single scroll without
   rebuilding the bundle. Instead the ROW shows one tab, and a segmented switch at
   the top of the panel moves between the two views. */
/* The hidden Routines tab must stay CLICKABLE — the in-panel switch activates it
   programmatically, and React does not register a click on a display:none element.
   So it is taken out of the layout the sr-only way instead of being display:none. */
/* needs button.relative.pb-4 weight — the tab-alignment rule out-specifies a bare
   attribute selector and was still giving it width and padding */
#huRhythmRoot button.relative.pb-4[data-mergehide],
#huRhythmRoot [data-mergehide]{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; border:0 !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important;
  pointer-events:auto !important;
}
/* the photo has no such requirement, so it is simply removed */
#rsStrip .rst-i[data-mergehide]{ display:none !important; }

/* six across on desktop now, down from seven */
@media (min-width:1101px){
  #huRhythmRoot .flex.min-w-max{ grid-template-columns:repeat(6, minmax(0,1fr)) !important; }
  #rsStrip .rst-row{ grid-template-columns:repeat(6, minmax(0,1fr)) !important; }
}

/* keep the merged tab looking active while the hidden Routines tab is the real one */
#huRhythmRoot button.relative.pb-4[data-mergeactive]{
  border-color:#C4707F !important; border-width:2px !important;
}
#huRhythmRoot button.relative.pb-4[data-mergeactive] > span.absolute{ display:block !important; }

/* the in-panel switch */
#mergeSwitch{
  display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px;
  font-family:'Nunito',system-ui,sans-serif;
}
#mergeSwitch button{
  cursor:pointer; font-family:inherit; font-size:.84rem; font-weight:800;
  border-radius:999px; padding:10px 18px; min-height:44px;
  background:#ffffff !important; border:1px solid rgba(36,52,71,.14);
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
  transition:background .16s, border-color .16s;
}
#mergeSwitch button:hover{ background:#FCEAEA !important; border-color:#C4707F; }
#mergeSwitch button[aria-pressed="true"]{
  background:#FCEAEA !important; border-color:#C4707F !important; border-width:2px;
}
#mergeSwitch button:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }