/* ===========================================================================
   HOST MODE — brightened.
   Was: full-screen navy gradient (#243447 -> #1A2836) with 7%-white translucent
   panels. Now: warm cream ground, solid white panels, navy text, sage + terracotta
   accents — same layout, same components, just the brand's light palette.
   Loaded after the original rules, so these win without touching the source block.
   =========================================================================== */
#hhHost{
  background:linear-gradient(160deg,#FFFCF7,#FBF6EC) !important;
  color:#243447 !important;
}
#hhHost .hh-hm-clock{
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#hhHost .hh-hm-close{
  background:#fff !important;
  border:1.5px solid #EAE2D4 !important;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
  box-shadow:0 2px 8px rgba(51,64,47,.06);
}
#hhHost .hh-hm-close:hover{ border-color:#7d9e77 !important; background:#FBF6EC !important; }

/* the Caveat sub-line: butter-on-navy was the only thing it could be. On cream it
   needs a real ink colour, so it becomes deep sage. */
#hhHost .hh-hm-count{
  color:#5E7E57 !important; -webkit-text-fill-color:#5E7E57 !important;
}

#hhHost .hh-hm-panel{
  background:#fff !important;
  border:1px solid #EAE2D4 !important;
  box-shadow:0 6px 20px rgba(51,64,47,.05);
}
/* h4 is caught by the global `h1–h5 { color: navy !important }`, so both properties
   are needed to land the sage. */
#hhHost .hh-hm-panel h4{
  color:#5E7E57 !important; -webkit-text-fill-color:#5E7E57 !important;
}

#hhHost .hh-hm-task{
  border-bottom:1px solid #F4F1E8 !important;
  color:#2b2b2b !important; -webkit-text-fill-color:#2b2b2b !important;
}
#hhHost .hh-hm-task:last-child{ border-bottom:none !important; }
#hhHost .hh-hm-task .n{
  background:#A85C36 !important;   /* same reason as the speak button */
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}

#hhHost .hh-timer{ border-bottom:1px solid #F4F1E8 !important; }
#hhHost .hh-timer:last-child{ border-bottom:none !important; }
#hhHost .hh-timer .d{
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#hhHost .hh-timer .d small{
  color:#78766c !important; -webkit-text-fill-color:#78766c !important;
}
#hhHost .hh-timer .t{
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#hhHost .hh-timer.done .t{
  color:#5E7E57 !important; -webkit-text-fill-color:#5E7E57 !important;   /* was butter — invisible on cream */
}

#hhHost .hh-hm-note{
  color:#5b5950 !important; -webkit-text-fill-color:#5b5950 !important;
}
#hhHost .hh-hm-diet{
  background:#FBF1DC !important;
  border:1px solid #E8D9AE !important;
  /* #8a6d2f only reached 4.34:1 on this butter background — under AA for 14px body */
  color:#7a5f28 !important; -webkit-text-fill-color:#7a5f28 !important;   /* 5.36:1 */
}
#hhHost .hh-hm-calm{
  background:#fff !important;
  border:1px solid #EAE2D4 !important;
  border-radius:20px;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#hhHost .hh-hm-speak{
  /* brand terracotta gives white text only 3.44:1 — fine on navy, under AA on this
     bright panel. Deepened just enough to pass at 4.94:1; still reads as terracotta. */
  background:#A85C36 !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
#hhHost .hh-hm-speak:hover{ background:#9C5330 !important; }

/* gold focus rings vanish on cream — use navy so they stay visible */
#hhHost button:focus-visible{
  outline:3px solid #243447 !important; outline-offset:3px;
}