/* ==========================================================================
   MY RHYTHM — ADD YOUR HABIT
   Prefix hb- (verified unused). Adds a primary add action, injects the user's
   habits INTO the existing Today's Rhythm card, and a compact My Habits list.
   ========================================================================== */
#hbAdd, #hbManage, .hb-sheet-bg, .hb-inline{
  --hb-navy:#243447; --hb-ink:#2B2B2B; --hb-muted:#657482; --hb-line:#E8E4DC;
  --hb-sage:#5F7350; --hb-sage-soft:#EEF4EC; --hb-leaf:#7D9E77; --hb-cream:#FBF8F2;
  --hb-blush:#F6EDE7; --hb-gold:#CF9E3F; --hb-coral:#ee725f;
  font-family:'Nunito',system-ui,-apple-system,sans-serif;
}
#hbAdd *, #hbManage *, .hb-sheet-bg *{ box-sizing:border-box; }
#hbAdd [hidden], #hbManage [hidden]{ display:none !important; }

/* ---------- the primary add card ---------- */
#hbAdd{
  background:#fff; border:1px solid var(--hb-line); border-radius:24px;
  padding:20px 22px; margin-bottom:16px;
  box-shadow:0 8px 35px rgba(28,25,23,.05);
}
.hb-add-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.hb-kicker{ font-size:.64rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin:0 0 6px;
  color:var(--hb-sage) !important; -webkit-text-fill-color:var(--hb-sage) !important; }
.hb-h{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:1.15rem; margin:0 0 5px;
  color:var(--hb-navy) !important; -webkit-text-fill-color:var(--hb-navy) !important; }
.hb-sub{ font-size:.86rem; line-height:1.6; margin:0; max-width:56ch;
  color:var(--hb-muted) !important; -webkit-text-fill-color:var(--hb-muted) !important; }
.hb-examples{ margin-top:10px; font-size:.8rem; min-height:1.4em;
  color:var(--hb-muted) !important; -webkit-text-fill-color:var(--hb-muted) !important; }
.hb-examples b{ font-weight:700; color:var(--hb-navy) !important; -webkit-text-fill-color:var(--hb-navy) !important; }

.hb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:inherit; font-size:.87rem; font-weight:800; border-radius:999px; padding:12px 20px;
  min-height:46px; border:1px solid rgba(18,33,58,.18); background:#fff; white-space:nowrap;
  color:var(--hb-navy) !important; -webkit-text-fill-color:var(--hb-navy) !important;
  transition:background .16s, border-color .16s, transform .16s; }
.hb-btn:hover{ background:var(--hb-sage-soft); border-color:var(--hb-leaf); transform:translateY(-1px); }
.hb-btn--primary{ background:var(--hb-navy) !important; border-color:var(--hb-navy) !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important; }
.hb-btn--primary:hover{ background:#31465F !important; }
.hb-btn--sm{ min-height:44px; padding:9px 15px; font-size:.79rem; }
.hb-btn--ghost{ background:none; border:0; text-decoration:underline; padding:9px;
  color:var(--hb-sage) !important; -webkit-text-fill-color:var(--hb-sage) !important; }
.hb-btn:focus-visible,.hb-opt:focus-visible,.hb-chip:focus-visible,.hb-tick:focus-visible,
.hb-row-menu:focus-visible,.hb-mode:focus-visible{ outline:3px solid var(--hb-gold); outline-offset:2px; }

/* ---------- rows injected into Today's Rhythm ---------- */
.hb-group{ margin-top:14px; }
.hb-group-h{ font-size:.64rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 6px; color:var(--hb-muted) !important; -webkit-text-fill-color:var(--hb-muted) !important; }
.hb-row{ display:flex; align-items:center; gap:11px; padding:2px 0; }
.hb-row .hb-tick-hit{ margin-left:-9px; margin-right:-9px; }
/* The BUTTON is the full 44px tap target; the visible circle is drawn inside it.
   An earlier attempt expanded the hit area with a pseudo element on the wrapper —
   that hit-tests as the wrapper, so the taps never reached the button. */
.hb-tick-hit{ display:inline-flex; flex:none; }
.hb-tick{ position:relative; width:44px; height:44px; flex:none; cursor:pointer;
  background:none; border:0; padding:0; display:grid; place-items:center; }
.hb-tick::before{ content:""; position:absolute; left:9px; top:9px; width:26px; height:26px;
  border-radius:50%; background:#fff; border:2px solid #D9D5CC;
  transition:background .18s, border-color .18s; }
.hb-tick:hover::before{ border-color:var(--hb-leaf); }
.hb-tick svg{ position:relative; z-index:1; width:14px; height:14px; opacity:0; transform:scale(.5);
  transition:opacity .18s, transform .22s cubic-bezier(.3,1.4,.5,1); color:#fff; }
.hb-tick.is-done::before{ background:var(--hb-sage); border-color:var(--hb-sage); }
.hb-tick.is-done svg{ opacity:1; transform:scale(1); }
.hb-row-b{ flex:1; min-width:0; }
.hb-row-t{ font-size:.88rem; font-weight:500; margin:0;
  color:#1c1917 !important; -webkit-text-fill-color:#1c1917 !important; }
.hb-row.is-done .hb-row-t{ text-decoration:line-through; opacity:.55; }
.hb-row-m{ font-size:.72rem; margin:2px 0 0;
  color:var(--hb-muted) !important; -webkit-text-fill-color:var(--hb-muted) !important; }
.hb-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.hb-row-menu{ width:30px; height:30px; border-radius:50%; border:0; background:none; cursor:pointer;
  font-size:.9rem; flex:none; opacity:.5;
  color:var(--hb-muted) !important; -webkit-text-fill-color:var(--hb-muted) !important; }
.hb-row-menu:hover{ opacity:1; background:#F4F4F1; }
.hb-count{ font-size:.75rem; font-weight:700; margin:12px 0 0;
  color:var(--hb-muted) !important; -webkit-text-fill-color:var(--hb-muted) !important; }

/* inline quick-add at the foot of Today's Rhythm */
.hb-inline{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--hb-line); }
.hb-inline-open{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; background:none;
  border:0; font-family:inherit; font-size:.83rem; font-weight:800; padding:9px 2px; min-height:44px;
  color:var(--hb-sage) !important; -webkit-text-fill-color:var(--hb-sage) !important; }
.hb-inline-open:hover{ text-decoration:underline; }
.hb-inline-form{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.hb-in{ flex:1 1 180px; min-width:0; border:1.5px solid var(--hb-line); border-radius:13px;
  padding:11px 14px; font-family:inherit; font-size:.9rem; background:#FDFCFA; color:var(--hb-navy); min-height:46px; }
.hb-in:focus{ outline:none; border-color:var(--hb-leaf); background:#fff; }

/* ---------- My Habits ---------- */
#hbManage{ background:#fff; border:1px solid var(--hb-line); border-radius:24px; padding:20px 22px;
  margin-top:16px; box-shadow:0 8px 35px rgba(28,25,23,.05); }
.hb-filters{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 6px; }
.hb-chip{ cursor:pointer; font-family:inherit; font-size:.78rem; font-weight:700; border-radius:999px;
  padding:9px 14px; min-height:44px; border:1px solid var(--hb-line); background:#fff;
  color:var(--hb-navy) !important; -webkit-text-fill-color:var(--hb-navy) !important; }
.hb-chip:hover{ background:var(--hb-sage-soft); border-color:var(--hb-leaf); }
.hb-chip[aria-pressed="true"]{ background:var(--hb-navy); border-color:var(--hb-navy);
  color:#fff !important; -webkit-text-fill-color:#fff !important; }
.hb-mrow{ display:flex; align-items:center; gap:11px; padding:10px 0; border-top:1px solid #F2F0EB; }
.hb-mrow:first-of-type{ border-top:0; }
.hb-mrow-b{ flex:1; min-width:0; }
.hb-mrow-b b{ display:block; font-size:.88rem; font-weight:600;
  color:var(--hb-navy) !important; -webkit-text-fill-color:var(--hb-navy) !important; }
.hb-mrow-b span{ font-size:.74rem;
  color:var(--hb-muted) !important; -webkit-text-fill-color:var(--hb-muted) !important; }
.hb-ic{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-size:1rem; flex:none; }
.hb-status{ font-size:.64rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  border-radius:999px; padding:4px 10px; border:1px solid var(--hb-line);
  color:var(--hb-muted) !important; -webkit-text-fill-color:var(--hb-muted) !important; }
.hb-empty{ text-align:center; padding:22px 8px; }
.hb-empty-ic{ font-size:1.6rem; }

/* suggestion nudge */
.hb-nudge{ margin-top:12px; background:var(--hb-cream); border:1px solid #EDE4D4; border-radius:16px;
  padding:13px 15px; font-size:.84rem; line-height:1.55;
  color:var(--hb-navy) !important; -webkit-text-fill-color:var(--hb-navy) !important; }
.hb-nudge-acts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

/* ---------- add sheet ---------- */
.hb-sheet-bg{ position:fixed; inset:0; background:rgba(20,30,40,.46); z-index:200000;
  display:flex; align-items:center; justify-content:center; padding:20px; }
.hb-sheet{ background:#fff; border-radius:26px; width:100%; max-width:560px; max-height:88vh;
  overflow-y:auto; padding:24px; }
.hb-sheet-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.hb-x{ cursor:pointer; border:1px solid var(--hb-line); background:#fff; border-radius:50%;
  width:44px; height:44px; font-size:1.1rem; flex:none;
  color:var(--hb-navy) !important; -webkit-text-fill-color:var(--hb-navy) !important; }
.hb-big{ width:100%; border:1.5px solid var(--hb-line); border-radius:16px; padding:15px 17px;
  font-family:inherit; font-size:1.02rem; background:#FDFCFA; color:var(--hb-navy); min-height:56px; }
.hb-big:focus{ outline:none; border-color:var(--hb-leaf); background:#fff; }
.hb-err{ margin:6px 0 0; font-size:.8rem; font-weight:700;
  color:#A4453A !important; -webkit-text-fill-color:#A4453A !important; }
.hb-modes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0; }
.hb-mode{ cursor:pointer; font-family:inherit; text-align:left; background:#fff;
  border:1.5px solid var(--hb-line); border-radius:16px; padding:13px 14px; min-height:44px; }
.hb-mode[aria-pressed="true"]{ border-color:var(--hb-navy); background:var(--hb-sage-soft); }
.hb-mode b{ display:block; font-size:.9rem;
  color:var(--hb-navy) !important; -webkit-text-fill-color:var(--hb-navy) !important; }
.hb-mode span{ display:block; margin-top:3px; font-size:.78rem; line-height:1.45;
  color:var(--hb-muted) !important; -webkit-text-fill-color:var(--hb-muted) !important; }
.hb-fld{ margin-bottom:14px; }
.hb-lbl{ display:block; font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:7px; color:var(--hb-sage) !important; -webkit-text-fill-color:var(--hb-sage) !important; }
.hb-opts{ display:flex; gap:7px; flex-wrap:wrap; }
.hb-opt{ cursor:pointer; font-family:inherit; font-size:.79rem; font-weight:700; border-radius:999px;
  padding:9px 14px; min-height:44px; border:1px solid var(--hb-line); background:#fff;
  color:var(--hb-navy) !important; -webkit-text-fill-color:var(--hb-navy) !important; }
.hb-opt:hover{ background:var(--hb-sage-soft); border-color:var(--hb-leaf); }
.hb-opt[aria-pressed="true"]{ background:var(--hb-navy); border-color:var(--hb-navy);
  color:#fff !important; -webkit-text-fill-color:#fff !important; }
.hb-more{ margin-top:4px; }
.hb-more summary{ cursor:pointer; list-style:none; font-size:.84rem; font-weight:800; padding:10px 0;
  min-height:44px; display:flex; align-items:center; gap:7px;
  color:var(--hb-sage) !important; -webkit-text-fill-color:var(--hb-sage) !important; }
.hb-more summary::-webkit-details-marker{ display:none; }
.hb-more summary::after{ content:"\2193"; }
.hb-more[open] summary::after{ content:"\2191"; }
.hb-ta{ width:100%; border:1.5px solid var(--hb-line); border-radius:13px; padding:11px 14px;
  font-family:inherit; font-size:.9rem; background:#FDFCFA; color:var(--hb-navy); min-height:70px; resize:vertical; }
.hb-sug{ display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }
.hb-sug button{ cursor:pointer; font-family:inherit; font-size:.78rem; font-weight:700; border-radius:999px;
  padding:8px 13px; min-height:44px; border:1px dashed var(--hb-line); background:#FDFCFA;
  color:var(--hb-navy) !important; -webkit-text-fill-color:var(--hb-navy) !important; }
.hb-sug button:hover{ background:var(--hb-sage-soft); border-color:var(--hb-leaf); border-style:solid; }
.hb-sheet-foot{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }

@media (max-width:640px){
  .hb-sheet-bg{ padding:0; align-items:flex-end; }
  .hb-sheet{ max-width:none; border-radius:24px 24px 0 0; max-height:92vh; }
  .hb-modes{ grid-template-columns:minmax(0,1fr); }
  .hb-add-top{ flex-direction:column; }
  .hb-add-top .hb-btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .hb-tick, .hb-tick svg, .hb-btn{ transition:none !important; }
}

/* the sheet's scrim is lightened so Today's Rhythm stays readable behind it */
#hbSheet.hb-sheet-bg{ background:rgba(36,52,71,.34) !important; }
/* and the newly added habit is flashed when the sheet closes */
.hb-justadded{
  animation:hbJustAdded 2.4s ease-out 1;
  border-radius:14px;
}
@keyframes hbJustAdded{
  0%   { background:#DDEBD6; box-shadow:0 0 0 6px #DDEBD6; }
  70%  { background:#EEF4EC; box-shadow:0 0 0 6px #EEF4EC; }
  100% { background:transparent; box-shadow:0 0 0 6px transparent; }
}
@media (prefers-reduced-motion:reduce){
  .hb-justadded{ animation:none; background:#EEF4EC; box-shadow:0 0 0 6px #EEF4EC; }
}

/* While Add a habit is open, hide the tab row behind it — she asked for the six
   tabs gone from the background. `#rstWrap` is the photos+tabs wrapper; the tab
   strip itself is also targeted for the case where the wrapper is absent. */
body[data-hbopen="1"] #rstWrap,
body[data-hbopen="1"] #huRhythmRoot .flex.min-w-max,
body[data-hbopen="1"] #mergeSwitch{
  visibility:hidden !important;
}
/* …and they must STAY hidden after saving. Closing the sheet dropped the flag
   above, so the six tabs reappeared behind the result. On page-rhythm-dash the
   inline board is now ONLY ever opened by Add a habit — every other journey
   action goes to its own view page — so the tab row is hidden for the whole of
   that state, not just while the sheet is up. The view pages hide it separately. */
/* UNCONDITIONAL on this page. Gating on `data-rj-board` meant any route that
   showed the board WITHOUT setting that flag would bring the six tabs back. The
   tabs are not wanted here at all any more — every journey action opens its own
   view page, and the only thing that still uses the inline board is Add a habit.
   The view pages hide the row separately, so this cannot affect them. */
#page-rhythm-dash #rstWrap,
#page-rhythm-dash #huRhythmRoot .flex.min-w-max,
#page-rhythm-dash #mergeSwitch{
  /* COLLAPSED, not just hidden. `visibility:hidden` kept reserving the row's 60px,
     which left a large empty gap under Quick capture. Nothing here needs to hold
     its space any more — the tabs are gone from this page for good. */
  display:none !important;
}
/* Below 1100px an earlier rule (`#page-rhythm-dash #rstWrap .flex.min-w-max`)
   forces the row back to `display:grid !important` with THREE columns — same
   weight as mine and later in the file, so it won and left a 96px band on
   mobile. Matched here with the extra id so the row collapses at every width. */
#page-rhythm-dash #rstWrap,
#page-rhythm-dash #rstWrap .flex.min-w-max,
#page-rhythm-dash #rstWrap > .overflow-x-auto,
#page-rhythm-dash #rstWrap > #rsStrip{
  display:none !important;
}

/* the island's own top padding was sized for the tab row that is no longer there */
#page-rhythm-dash #huRhythmRoot > .min-h-screen{ padding-top:10px !important; }
#page-rhythm-dash #huRhythmRoot .mx-auto.max-w-\[1500px\]{ padding-top:8px !important; }
/* and the content block's own top margin, so the first card sits just under
   Quick capture rather than 50px below it. Scoped to the DIRECT child of <main>
   because `.mt-5` is used throughout the island. */
#page-rhythm-dash #huRhythmRoot main > .mt-5{ margin-top:14px !important; }
/* nothing should be clickable while invisible */
body[data-rj-board="1"] #page-rhythm-dash #rstWrap,
body[data-hbopen="1"] #rstWrap{ pointer-events:none; }