/* ==========================================================================
   MY LIFE SPACE RESTRUCTURE (Oct 2026, her brief). Two jobs, both
   presentation. No module is rewritten, no id moves, no store is touched.

   1. REMINDERS & COMING UP
      The expiry reminders (#expMount, hu-exp-js) and the Reminder Calendar
      card (#calMount, hu-cal-js) were two separate white cards saying nearly
      the same thing. They are now drawn as ONE card under a single heading.

      Nothing is re-parented into a wrapper. hu-cal-js finds #expMount by id to
      place itself and hu-sm-js finds #calMount the same way, so a wrapper
      would drag Shared Money into the group. The heading is instead rendered
      INSIDE #expMount by hu-exp-js, which also makes it immune to hu-mon-js -
      that module keeps #monMount directly above #expMount and re-asserts the
      position on every tick, so a sibling heading could be separated from the
      list it titles. The borders below join the heading, this block and the
      calendar card into one shape.

      The reminder architecture is unchanged: hu_lv_dates_v1 is still the one
      store, still owned by hu-cal-js, and the reminders Gifted and Mail Lens
      write still land in it.

   2. PROJECT DETAIL FOCUS
      While a My Life Space panel is open, the landing furniture is hidden.
      Those three modules re-append themselves on their own timers, and
      hu-cal-js and hu-sm-js RESET style.display on every tick - so an inline
      style would be undone within a second. An !important rule in a
      stylesheet beats their non-important inline style, which is why the
      hiding lives here and the JavaScript only sets one attribute.
      Nothing is removed from the DOM: clearing the attribute restores the
      landing exactly as it was.
   ========================================================================== */

/* ---- 1. the merged section ---------------------------------------------- */
/* The heading is rendered by hu-exp-js INSIDE #expMount, so nothing can wedge
   between it and the list it titles. hu-mon-js keeps #monMount directly above
   #expMount and re-asserts that on every tick, which is exactly why a sibling
   heading was not used. */
#page-life-vault #expMount .lvx-rcu{
  display:block; margin:22px 0 0; padding:18px 20px 14px;
  background:#FFFFFF !important;
  border:1px solid #E8E4DC !important; border-bottom:0 !important;
  border-radius:20px 20px 0 0;
}
#page-life-vault #expMount .lvx-rcu .lvx-sech{ margin:0 !important; }
#page-life-vault #expMount .lvx-rcu-s{
  margin:5px 0 0; font-size:.88rem; line-height:1.55;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}

/* the blocks below the heading give up their own top and bottom chrome and
   butt together. Their left and right borders are kept - those are the card's
   sides now - and a hairline separates each one from the last. */
#page-life-vault #expMount .exp-sec{
  margin-top:0 !important;
  border-top:1px solid #EFEAE0 !important; border-bottom:0 !important;
  border-radius:0 !important;
}
#page-life-vault #calMount .cal-cta{
  margin-top:0 !important;
  border-top:1px solid #EFEAE0 !important;
  border-radius:0 0 20px 20px !important;
}

/* The group heading replaces the calendar card's own title and strapline.
   Everything else in that card stays: the month preview, the costs and the
   Open calendar button. */
#page-life-vault #calMount .cal-ctah,
#page-life-vault #calMount .cal-ctas{ display:none !important; }

/* "Reminders" and "Coming up" become sub-labels inside the group rather than
   two more section titles competing with it. The "View all expiries" and
   "Back" buttons that sit beside them are untouched. */
#page-life-vault #expMount .exp-sech{
  font-family:'Nunito',system-ui,sans-serif !important;
  font-size:.72rem !important; font-weight:800 !important;
  letter-spacing:.1em; text-transform:uppercase;
  color:#4E5A49 !important; -webkit-text-fill-color:#4E5A49 !important;
}

/* ---- 2. focus: hide the landing while a panel is open ------------------- */
#page-life-vault[data-lvxfocus="1"] #expMount{ display:none !important; }
#page-life-vault[data-lvxfocus="1"] #lifeVaultReact{ display:none !important; }
/* The calendar and Shared Money are hidden ONLY while they are showing their
   landing card. Both can be opened from inside a panel - the Money panel has
   an "Open Shared Money" button - and hiding a module that is showing its own
   panel would blank the screen. Each is its own rule so that a browser without
   :has() support simply keeps today's behaviour instead of dropping the lot. */
#page-life-vault[data-lvxfocus="1"] #calMount:not(:has(.cal-panel)){ display:none !important; }
#page-life-vault[data-lvxfocus="1"] #smMount:not(:has(.sm-panel)){ display:none !important; }