/* My Rhythm tabs (Today, Planner, Routines, …) as white rounded-square tabs.
   They were plain text with a coral underline; on the new #F0F0E4 background
   boxed white tabs read much better. Targets the tab signature classes, so
   "Quick capture" (a coral pill, not a tab) is left alone. */
#huRhythmRoot button.relative.pb-4{
  background:#ffffff !important;
  border:1px solid rgba(46,51,44,.12) !important;
  border-radius:14px !important;
  padding:10px 16px 12px !important;
  min-height:44px;
  box-shadow:0 1px 2px rgba(28,25,23,.05);
  transition:background-color .16s, border-color .16s, color .16s, box-shadow .16s, transform .16s;
}
/* hover: the whole tab goes navy. Needs !important and this specificity to beat
   the island's Tailwind `hover:text-stone-800` / `text-stone-950` colour rules. */
#huRhythmRoot button.relative.pb-4:hover,
#huRhythmRoot button.relative.pb-4:focus-visible{
  /* page background is the teal #5B8A8F, so the navy hover reads clearly against it */
  background:#243447 !important;
  border-color:#243447 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transform:translateY(-1px);
}
#huRhythmRoot button.relative.pb-4:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
/* the coral indicator stays visible on the navy fill */
/* the active tab's coral indicator turns WHITE on the navy hover fill rather than
   a lightened orange — she did not like the orange line on hover */
#huRhythmRoot button.relative.pb-4:hover > span.absolute,
#huRhythmRoot button.relative.pb-4:focus-visible > span.absolute{ background:#ffffff !important; }
/* the ACTIVE tab also kept a coral border while hovered — the second bit of orange.
   On hover it takes the navy of the fill, so the white bar alone marks the active
   tab and nothing orange shows. At rest the coral border and bar are unchanged. */
#huRhythmRoot button.relative.pb-4.text-stone-950:hover,
#huRhythmRoot button.relative.pb-4.text-stone-950:focus-visible{
  border-color:#243447 !important;
}
/* active: coral edge + the existing indicator tucked inside the tab */
#huRhythmRoot button.relative.pb-4.text-stone-950{
  border-color:#ee725f !important;
  box-shadow:0 6px 18px rgba(238,114,95,.18);
}
#huRhythmRoot button.relative.pb-4 > span.absolute{
  left:14px !important; right:14px !important; bottom:6px !important;
}
/* the row: drop the underline rule the text tabs needed, tighten the gap */
#huRhythmRoot .overflow-x-auto.border-b{ border-bottom:0 !important; padding-bottom:4px; }
#huRhythmRoot .flex.min-w-max.gap-7{ gap:10px !important; }
@media (prefers-reduced-motion:reduce){
  #huRhythmRoot button.relative.pb-4{ transition:none !important; }
  #huRhythmRoot button.relative.pb-4:hover{ transform:none; }
}