/* ============================================================================
   admin-hipster.css  ·  Hipster aesthetic overlay for pages/admin.html
   ----------------------------------------------------------------------------
   Loads AFTER pages/mobile-app.css + assets/design-system.css + the inline
   <style> block inside pages/admin.html. Wins specificity by either:
     (a) overriding :root vars with !important, OR
     (b) using `body <selector>` prefix to outrank single-class rules.

   Phase 1 scope (per dispatch brief):
     · Restyle :root tokens (palette + radius + shadow)
     · Sidebar: brand, nav-item (default / hover / active / inert), side-toggle,
       side-reveal, side-foot (refer + chat)
     · Top bar: title-row (H1), acct-trigger avatar
     · Clients view: action-bar, count-chip, btn-gold, btn-ghost,
       panel/table-wrap/th/td, empty-state row

   All other 12 sections inherit palette/typography automatically because
   they share the same primitive classes (.panel, .btn-gold, .btn-ghost,
   .count-chip, .nav-item, etc.) and consume :root --gold / --line / --bg vars.

   Aesthetic source-of-truth (matches verbatim):
     · pages/login.html
     · pages/signup.html
     · pages/reset-password.html
     · lib/email/forgot-password.js (COLORS object lines 14–25)
   ========================================================================= */


/* ---------- 1. FONTS ----------
   Loaded via <link> in the page head — admin.html already loads Montserrat +
   Libre Baskerville; Fraunces + DM Sans are added by the boot snippet at the
   bottom of admin.html (or by the preview.html in this folder). The CSS here
   only REFERENCES them. */


/* ---------- 2. TOKENS ----------
   Override admin.html's inline :root. We keep var names that other rules in
   admin.html depend on (--bg, --line, --ink, --muted, --primary, --gold,
   --gold-dim, --gold-border, --gold-dark, --panel, --beige, --deep) and we
   alias them to the Hipster palette. We ALSO declare new --hp-* tokens for
   anything Hipster-specific that we'll consume in the component overrides
   below. */
:root {
  /* HIPSTER PALETTE — canonical (matches lib/email/forgot-password.js) */
  --hp-cream:        #F4ECDD;
  --hp-cream-elev:   #FBF6EA;
  --hp-paper:        #FFFDF7;
  --hp-hair:         #E1D7C0;
  --hp-hair-2:       #EBE2CE;
  --hp-ink:          #2A1A0F;
  --hp-ink-2:        #5B4A3E;
  --hp-muted:        #9C8A7C;
  --hp-forest:       #1F3A2E;
  --hp-forest-deep:  #142822;
  --hp-forest-ink:   #E7EDD8;
  --hp-chartreuse:   #C9F25E;
  --hp-danger:       #9C2A2A;

  /* TYPE STACK */
  --hp-display: 'Fraunces','Reckless',Georgia,serif;
  --hp-body:    'DM Sans','Inter','Helvetica Neue',system-ui,sans-serif;
  --hp-ease:    cubic-bezier(0.16,1,0.3,1);

  /* SHADOW VOCABULARY (the signature "sticker" offset) */
  --hp-shadow-sticker:    4px 4px 0 var(--hp-forest-deep);
  --hp-shadow-sticker-sm: 3px 3px 0 var(--hp-forest-deep);
  --hp-shadow-card:       6px 8px 0 rgba(20,40,34,.06);

  /* ALIAS admin.html's legacy tokens onto the Hipster palette ----------
     !important is necessary because admin.html declares these inline at
     a lower-specificity origin but the inline declarations are not !important. */
  --bg:           var(--hp-cream)        !important;
  --panel:        var(--hp-cream-elev)   !important;
  --line:         var(--hp-hair)         !important;
  --ink:          var(--hp-ink)          !important;
  --muted:        var(--hp-muted)        !important;
  --primary:      var(--hp-forest)       !important;
  --primary-dark: var(--hp-forest-deep)  !important;
  --beige:        var(--hp-cream-elev)   !important;
  --gold:         var(--hp-forest)       !important;
  --gold-light:   var(--hp-forest)       !important;
  --gold-dark:    var(--hp-forest)       !important;
  --gold-dim:     rgba(31,58,46,0.06)    !important;
  --gold-border:  var(--hp-hair)         !important;
  --danger:       var(--hp-danger)       !important;
  --deep:         var(--hp-forest-deep)  !important;
  --ink-2:        var(--hp-ink-2)        !important;
}


/* ---------- 3. PAGE BACKGROUND ----------
   Replace admin.html's radial-gradient on body with flat cream so the
   editorial card hierarchy reads. */
body {
  background: var(--hp-cream) !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--hp-ink); color: var(--hp-paper); }
:focus-visible { outline: 2px solid var(--hp-chartreuse); outline-offset: 2px; }


/* ============================================================================
   4. SIDEBAR
   ========================================================================= */

body .side {
  background: var(--hp-cream-elev) !important;
  border-right: 1.5px solid var(--hp-hair) !important;
  padding: 22px 16px 22px 20px !important;
}

/* Brand block (top of sidebar) ------------------------------------------- */
body .side .brand-row { margin-bottom: 22px !important; }

body .side .brand {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 22px !important;
  line-height: 1.0 !important;
  letter-spacing: -0.03em !important;
  color: var(--hp-ink) !important;
  font-variation-settings: "opsz" 144 !important;
  padding: 4px 2px 0 !important;
}
body .side .brand small {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 10px !important;
  font-family: var(--hp-body) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
}
body .side .brand small::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hp-chartreuse);
  box-shadow: 0 0 0 2px rgba(201,242,94,0.20);
}

/* Sidebar collapse pill (top-right of brand row) ------------------------- */
body .side .side-toggle {
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  color: var(--hp-ink-2) !important;
  border-radius: 999px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  transition: background .14s var(--hp-ease), color .14s var(--hp-ease), border-color .14s var(--hp-ease), transform .12s var(--hp-ease) !important;
}
body .side .side-toggle:hover {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest) !important;
  transform: translateY(-1px);
}

/* Side reveal pill (collapsed-state floating button) --------------------- */
body .side-reveal {
  background: var(--hp-forest) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  color: var(--hp-chartreuse) !important;
  box-shadow: var(--hp-shadow-sticker-sm) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
}
body .side-reveal:hover {
  background: var(--hp-forest-deep) !important;
  color: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px);
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}

/* Nav items -------------------------------------------------------------- */
body .side .nav-item {
  background: transparent !important;
  color: var(--hp-ink-2) !important;
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.005em !important;
  border-radius: 10px !important;
  padding: 11px 12px !important;
  margin: 1px 0 !important;
  box-shadow: none !important;
  position: relative;
  transition: background .14s var(--hp-ease), color .14s var(--hp-ease), transform .12s var(--hp-ease) !important;
}
body .side .nav-item:hover {
  background: rgba(31,58,46,0.06) !important;
  color: var(--hp-ink) !important;
}
body .side .nav-item .nav-icon {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.85;
  color: currentColor;
}
body .side .nav-item .nav-icon svg { width: 16px !important; height: 16px !important; }

/* ACTIVE state — the signature editorial move:
   forest left bar (5px) + cream-elev pill + ink text + chartreuse dot. */
body .side .nav-item.active {
  background: var(--hp-paper) !important;
  color: var(--hp-ink) !important;
  font-weight: 700 !important;
  font-family: var(--hp-body) !important;
  box-shadow:
    inset 5px 0 0 var(--hp-forest),
    3px 3px 0 rgba(20,40,34,0.10) !important;
  border: 1.5px solid var(--hp-hair) !important;
  padding: 10.5px 12px 10.5px 16px !important;
}
body .side .nav-item.active .nav-icon {
  color: var(--hp-forest) !important;
  opacity: 1;
}
body .side .nav-item.active::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hp-chartreuse);
  box-shadow: 0 0 0 2px rgba(201,242,94,0.20);
}

/* Inert items (Community / Teams / Autoflow) ----------------------------- */
body .side .nav-item.inert {
  opacity: 0.4 !important;
  color: var(--hp-muted) !important;
  cursor: default !important;
  font-style: italic;
}
body .side .nav-item.inert::after {
  content: "Soon";
  margin-left: auto;
  font-family: var(--hp-body);
  font-style: normal;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp-muted);
  padding: 3px 8px;
  border: 1px solid var(--hp-hair);
  border-radius: 999px;
  background: transparent;
}
body .side .nav-item.inert:hover {
  background: transparent !important;
  color: var(--hp-muted) !important;
}

/* Sidebar foot — Refer & Earn + Chat with us ----------------------------- */
body .side .side-foot {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1.5px dashed var(--hp-hair) !important;
  gap: 14px !important;
}
body .side .side-refer {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 16px !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-forest) !important;
  border-radius: 999px !important;
  color: var(--hp-forest) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.06em !important;
  box-shadow: var(--hp-shadow-sticker-sm) !important;
  transition: transform .14s var(--hp-ease), box-shadow .14s var(--hp-ease) !important;
  text-transform: uppercase;
}
body .side .side-refer svg {
  color: var(--hp-chartreuse) !important;
  fill: var(--hp-chartreuse) !important;
  stroke: var(--hp-forest) !important;
  stroke-width: 1.6 !important;
  width: 14px !important;
  height: 14px !important;
}
body .side .side-refer:hover {
  transform: translate(-1px,-1px);
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}

body .side .side-chat {
  padding: 6px 4px !important;
  gap: 10px !important;
}
body .side .side-chat .av {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  font-variation-settings: "opsz" 144;
  display: grid;
  place-items: center;
}
body .side .side-chat .lbl {
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  color: var(--hp-ink-2) !important;
}


/* ============================================================================
   5. TOP BAR  (title-row + acct-trigger avatar)
   ========================================================================= */

body .main > .top {
  background: rgba(244,236,221,0.92) !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  padding: 14px 28px !important;
}

body .main > .top .title-row,
body .main > .top #pageTitle {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 36px !important;
  line-height: 1.0 !important;
  letter-spacing: -0.035em !important;
  color: var(--hp-ink) !important;
  font-variation-settings: "opsz" 144 !important;
}

/* Account avatar — forest fill, chartreuse initial, no gold ring --------- */
body .acct-trigger {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: var(--hp-forest) !important;
  background-image: none !important;
  color: var(--hp-chartreuse) !important;
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  box-shadow: var(--hp-shadow-sticker-sm) !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease) !important;
}
body .acct-trigger:hover {
  transform: translate(-1px,-1px);
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}
body .acct-trigger:active {
  transform: translate(2px,2px);
  box-shadow: 1px 1px 0 var(--hp-forest-deep) !important;
}


/* ============================================================================
   6. CLIENTS VIEW — action bar + table panel + empty state
   ========================================================================= */

body .main {
  background: var(--hp-cream) !important;
}

/* Above the action bar, render a magazine eyebrow + heading using
   the existing #clientsView ::before / ::after pseudo-elements. */
body #clientsView {
  padding: 24px 28px 36px !important;
}
body #clientsView::before {
  content: "Vol. 01 · Coach Studio";
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hp-body);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hp-muted);
  margin-bottom: 6px;
}
body #clientsView::after {
  /* a 2px ink rule beneath the action-bar's row to anchor the editorial feel */
  display: block;
  content: "";
  height: 0;
}

/* Action bar — search + count chip + 2 buttons --------------------------- */
body #clientsView .action-bar {
  gap: 12px !important;
  margin: 14px 0 22px !important;
  padding: 18px 18px !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 18px !important;
  box-shadow: 4px 6px 0 rgba(20,40,34,0.05);
}

/* Search input — cream-elev surface, hair border, forest focus ring */
body #clientsView #clientSearch.btn-ghost {
  height: 42px !important;
  padding: 0 16px !important;
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: border-color .14s var(--hp-ease), background .14s var(--hp-ease) !important;
}
body #clientsView #clientSearch.btn-ghost::placeholder {
  color: var(--hp-muted) !important;
  font-weight: 500;
}
body #clientsView #clientSearch.btn-ghost:focus {
  border-color: var(--hp-forest) !important;
  background: var(--hp-cream-elev) !important;
  outline: 0 !important;
}

/* Count chip — pill, hair border, cream-elev, ink text */
body #clientsView .count-chip {
  height: 42px !important;
  padding: 0 18px !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 999px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

/* Get Invite Link — secondary (cream-elev fill, forest text, hair border) */
body #clientsView .btn-ghost:not(#clientSearch) {
  height: 42px !important;
  padding: 0 18px !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-ink) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  box-shadow: var(--hp-shadow-sticker-sm) !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease) !important;
}
body #clientsView .btn-ghost:not(#clientSearch):hover {
  background: var(--hp-paper) !important;
  border-color: var(--hp-ink) !important;
  transform: translate(-1px,-1px);
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}
body #clientsView .btn-ghost:not(#clientSearch):active {
  transform: translate(2px,2px);
  box-shadow: 1px 1px 0 var(--hp-forest-deep) !important;
}

/* + Add Client — primary CTA (forest fill, chartreuse text, sticker shadow) */
body #clientsView .btn-gold {
  height: 42px !important;
  padding: 0 22px !important;
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  border-radius: 12px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  box-shadow: var(--hp-shadow-sticker) !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease) !important;
}
body #clientsView .btn-gold:hover {
  background: var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px);
  box-shadow: 5px 5px 0 var(--hp-forest-deep) !important;
}
body #clientsView .btn-gold:active {
  transform: translate(2px,2px);
  box-shadow: 2px 2px 0 var(--hp-forest-deep) !important;
}

/* Table panel ------------------------------------------------------------ */
body #clientsView .panel {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 18px !important;
  box-shadow: 6px 8px 0 rgba(20,40,34,0.05) !important;
  overflow: hidden;
}

body #clientsView .table-wrap table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--hp-body);
}

body #clientsView .table-wrap thead th {
  background: var(--hp-paper) !important;
  color: var(--hp-ink-2) !important;
  font-family: var(--hp-body) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 18px 22px !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
}

body #clientsView .table-wrap tbody td {
  padding: 18px 22px !important;
  font-family: var(--hp-body) !important;
  font-size: 14px !important;
  color: var(--hp-ink) !important;
  border-bottom: 1px solid var(--hp-hair-2) !important;
  background: var(--hp-cream-elev) !important;
}
body #clientsView .table-wrap tbody tr:last-child td { border-bottom: 0 !important; }
body #clientsView .table-wrap tbody tr:hover td {
  background: var(--hp-paper) !important;
}

/* Empty state ("No clients found.") — centered, magazine eyebrow + serif italic */
body #clientsView .table-wrap tbody td.muted {
  text-align: center !important;
  padding: 56px 22px 60px !important;
  background: var(--hp-cream-elev) !important;
  color: transparent !important;
  font-size: 0 !important;
  position: relative;
}
body #clientsView .table-wrap tbody td.muted::before {
  content: "Roster · Empty";
  display: block;
  font-family: var(--hp-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hp-muted);
  margin-bottom: 12px;
}
body #clientsView .table-wrap tbody td.muted::after {
  content: "No clients yet.";
  display: block;
  font-family: var(--hp-display);
  font-style: italic;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.025em;
  color: var(--hp-ink);
  font-variation-settings: "opsz" 144;
  line-height: 1.05;
}


/* ============================================================================
   7. SHARED PRIMITIVES — these classes appear across the OTHER 12 sections.
   Restyling them here means Phase 2 inherits Hipster look automatically.
   ========================================================================= */

/* Generic .panel (used in ALL sections) */
body .panel {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 18px !important;
  box-shadow: 6px 8px 0 rgba(20,40,34,0.05) !important;
}

/* Generic .btn-gold / .btn-ghost (used in tasks, packages, etc.) */
body .btn-gold {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  border-radius: 12px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  box-shadow: var(--hp-shadow-sticker-sm) !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease), background .14s var(--hp-ease) !important;
}
body .btn-gold:hover {
  background: var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px);
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}

body .btn-ghost {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  font-size: 12px !important;
  transition: border-color .14s var(--hp-ease), background .14s var(--hp-ease) !important;
}
body .btn-ghost:hover {
  background: var(--hp-paper) !important;
  border-color: var(--hp-ink) !important;
}

/* Generic .count-chip */
body .count-chip {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 999px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}


/* ============================================================================
   8. SCROLLBAR — subtle, on-palette
   ========================================================================= */
body ::-webkit-scrollbar { width: 10px; height: 10px; }
body ::-webkit-scrollbar-track { background: var(--hp-cream); }
body ::-webkit-scrollbar-thumb {
  background: var(--hp-hair);
  border-radius: 999px;
  border: 2px solid var(--hp-cream);
}
body ::-webkit-scrollbar-thumb:hover { background: var(--hp-muted); }


/* ============================================================================
   9. RESPONSIVE — keep desktop posture (admin is desktop-only)
   ========================================================================= */
@media (max-width: 900px) {
  body .main > .top .title-row,
  body .main > .top #pageTitle { font-size: 28px !important; }
  body #clientsView { padding: 20px 18px 32px !important; }
  body #clientsView .action-bar { padding: 14px !important; }
}


/* =================================================================================
   ========================================================================== A1 ===
   PHASE 2 · AGENT A1 · TABLE-DRIVEN SECTIONS + SHARED PRIMITIVES
   ---------------------------------------------------------------------------------
   Scope: Clients drilldown drawer + Check Ins + Tasks + Messages + Packages,
   plus the SHARED hub primitives (.hub-head / .hub-count / .search / .panel /
   .table-fill / .primary-btn / drawer family) that recur across 8+ sections.
   ---------------------------------------------------------------------------------
   Rule 44 ("no palette fusion") — every visible class with a hardcoded color
   token, font reference, gold accent, or Libre-Baskerville reference gets a
   `body <selector>` override that translates it to the Hipster grammar.
   ================================================================================= */


/* ============================================================================
   A1 · 0 — SECTION-SCOPED VAR ALIASING
   Messages + Packages each declare their own local `--mv2-*` / `--pv2-*`
   token suites inside `#messagesHubView` / `#packagesHubView` blocks. Override
   those root declarations FIRST so every downstream rule that consumes them
   picks up Hipster automatically.
   ========================================================================= */

body #messagesHubView {
  --mv2-page:          var(--hp-cream)              !important;
  --mv2-card:          var(--hp-cream-elev)         !important;
  --mv2-ink:           var(--hp-ink)                !important;
  --mv2-ink-2:         var(--hp-ink-2)              !important;
  --mv2-ink-3:         var(--hp-muted)              !important;
  --mv2-hair:          var(--hp-hair)               !important;
  --mv2-hair-2:        var(--hp-hair-2)             !important;
  --mv2-gold:          var(--hp-forest)             !important;
  --mv2-gold-soft:     rgba(31,58,46,0.10)          !important;
  --mv2-cream-tint:    var(--hp-paper)              !important;
  --mv2-outgoing:      var(--hp-forest)             !important;
  --mv2-outgoing-line: var(--hp-forest-deep)        !important;
  --mv2-presence:      var(--hp-chartreuse)         !important;
  --mv2-shadow-card:   0 1px 0 rgba(20,40,34,.02), 0 4px 14px -8px rgba(20,40,34,.08) !important;
  --mv2-shadow-lift:   0 1px 0 rgba(20,40,34,.02), 0 10px 30px -12px rgba(20,40,34,.18) !important;
}

body #packagesHubView {
  --pv2-cream:    var(--hp-cream)        !important;
  --pv2-white:    var(--hp-cream-elev)   !important;
  --pv2-gold:     var(--hp-forest)       !important;
  --pv2-gold-soft:rgba(31,58,46,0.10)    !important;
  --pv2-text:     var(--hp-ink)          !important;
  --pv2-muted:    var(--hp-muted)        !important;
  --pv2-line:     var(--hp-hair)         !important;
  --pv2-line-2:   var(--hp-hair-2)       !important;
  --pv2-pos:      #4D7A3E                !important; /* sage success (Hipster-flavored) */
  --pv2-warn:     #B58C2A                !important; /* amber kept for warn semantics */
  --pv2-shadow:   0 1px 0 rgba(20,40,34,.02), 0 8px 24px rgba(20,40,34,.06) !important;
}


/* ============================================================================
   A1 · 1 — SHARED HUB PRIMITIVES
   Used by Clients (recon) / Check Ins / Tasks / Onboarding / and more.
   Translate ONCE; cascades to all sections that consume them.
   ========================================================================= */

body .hub-head {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 18px !important;
  padding: 16px 16px !important;
  gap: 12px !important;
  box-shadow: 4px 6px 0 rgba(20,40,34,0.05) !important;
}

body .hub-head .search,
body .search {
  height: 42px !important;
  padding: 0 16px !important;
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: border-color .14s var(--hp-ease), background .14s var(--hp-ease) !important;
}
body .hub-head .search::placeholder,
body .search::placeholder { color: var(--hp-muted) !important; font-weight: 500; }
body .hub-head .search:focus,
body .search:focus {
  border-color: var(--hp-forest) !important;
  background: var(--hp-cream-elev) !important;
  outline: 0 !important;
}

body .hub-count {
  height: 42px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 999px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* `.primary-btn` is the standard primary CTA across Tasks / Onboarding / Forms / etc. */
body .primary-btn {
  height: 42px !important;
  padding: 0 22px !important;
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  border-radius: 12px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  box-shadow: var(--hp-shadow-sticker) !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease), background .14s var(--hp-ease) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}
body .primary-btn:hover {
  background: var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px);
  box-shadow: 5px 5px 0 var(--hp-forest-deep) !important;
}
body .primary-btn:active {
  transform: translate(2px,2px);
  box-shadow: 2px 2px 0 var(--hp-forest-deep) !important;
}

/* Generic `.table-fill` — recurs in checkins, tasks, packages-hub, coupons, habits,
   forms, resources, onboarding. */
body table.table-fill {
  border-collapse: collapse !important;
  font-family: var(--hp-body) !important;
}
body table.table-fill thead th {
  background: var(--hp-paper) !important;
  color: var(--hp-ink-2) !important;
  font-family: var(--hp-body) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 18px 22px !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  text-align: left !important;
}
body table.table-fill tbody td {
  padding: 18px 22px !important;
  font-family: var(--hp-body) !important;
  font-size: 14px !important;
  color: var(--hp-ink) !important;
  border-bottom: 1px solid var(--hp-hair-2) !important;
  background: var(--hp-cream-elev) !important;
}
body table.table-fill tbody tr:last-child td { border-bottom: 0 !important; }
body table.table-fill tbody tr:hover td { background: var(--hp-paper) !important; }
body table.table-fill tbody tr.click-row { cursor: pointer !important; }

/* Click-row hover (admin's base .click-row uses #f5efe9) */
body .click-row:hover,
body tbody tr.click-row:hover td { background: var(--hp-paper) !important; }


/* ============================================================================
   A1 · 2 — CLIENTS DRILLDOWN DRAWER (`.habits-v2-drawer*`)
   When you click a client row, this drawer slides in from the right. Same
   markup is reused as a generic drawer across Habits / Forms / Resources.
   Translate ONCE; benefits every reuse.
   ========================================================================= */

body .habits-v2-drawer {
  background: var(--hp-cream-elev) !important;
  border-left: 1.5px solid var(--hp-hair) !important;
  box-shadow: -12px 0 0 rgba(20,40,34,0.04), -1px 0 0 var(--hp-hair) !important;
  font-family: var(--hp-body) !important;
}
body .habits-v2-drawer-head {
  background: var(--hp-paper) !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  padding: 18px 28px 20px !important;
}
body .habits-v2-drawer-head .strip {
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--hp-forest), var(--hp-chartreuse)) !important;
  margin-bottom: 14px !important;
  width: 64px !important;
}
body .habits-v2-drawer-crumb {
  font-family: var(--hp-body) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
}
body .habits-v2-drawer-close {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  color: var(--hp-ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background .14s var(--hp-ease), border-color .14s var(--hp-ease), transform .12s var(--hp-ease) !important;
}
body .habits-v2-drawer-close:hover {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest) !important;
  transform: translate(-1px,-1px);
}
body .habits-v2-drawer-body {
  background: var(--hp-cream-elev) !important;
  color: var(--hp-ink) !important;
  padding: 24px 28px 28px !important;
  font-family: var(--hp-body) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
body .habits-v2-drawer-foot {
  background: var(--hp-paper) !important;
  border-top: 1.5px solid var(--hp-hair) !important;
  padding: 14px 28px !important;
  gap: 10px !important;
}

/* Sibling drawer twins — same look */
body .forms-v2-drawer,
body .resources-v2-drawer,
body .msgs-v2-drawer {
  background: var(--hp-cream-elev) !important;
  border-left: 1.5px solid var(--hp-hair) !important;
}
body .forms-v2-drawer-head,
body .resources-v2-drawer-head {
  background: var(--hp-paper) !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  padding: 18px 28px !important;
}
body .forms-v2-icon-btn,
body .resources-v2-icon-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  color: var(--hp-ink) !important;
}
body .forms-v2-icon-btn:hover,
body .resources-v2-icon-btn:hover {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest) !important;
}

/* Account-menu side-drawer (small drawer that opens on R-avatar click) */
body .side-drawer {
  background: var(--hp-cream-elev) !important;
  border-left: 1.5px solid var(--hp-hair) !important;
  font-family: var(--hp-body) !important;
}
body .side-drawer .drawer-header {
  background: var(--hp-paper) !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  padding: 20px 22px !important;
}
body .side-drawer .drawer-avatar {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
}
body .side-drawer .drawer-user-name {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  color: var(--hp-ink) !important;
}
body .side-drawer .drawer-user-role {
  color: var(--hp-muted) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
}
body .side-drawer .drawer-close-btn {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  color: var(--hp-ink) !important;
  border-radius: 10px !important;
}
body .side-drawer .drawer-close-btn:hover {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
}
body .side-drawer .drawer-section-label {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
}
body .side-drawer .drawer-link {
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
  color: var(--hp-ink-2) !important;
  background: transparent !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  transition: background .14s var(--hp-ease) !important;
}
body .side-drawer .drawer-link:hover {
  background: rgba(31,58,46,0.06) !important;
  color: var(--hp-ink) !important;
}
body .side-drawer .drawer-divider { background: var(--hp-hair) !important; }
body .side-drawer .drawer-signout-btn {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-danger) !important;
  color: var(--hp-danger) !important;
  border-radius: 12px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}
body .side-drawer .drawer-signout-btn:hover {
  background: var(--hp-danger) !important;
  color: var(--hp-cream) !important;
}


/* ============================================================================
   A1 · 3 — CHECK INS HUB (`#checkinsHubView`)
   ========================================================================= */

body #checkinsHubView {
  padding: 24px 28px 36px !important;
  background: var(--hp-cream) !important;
}
body #checkinsHubView::before {
  content: "Vol. 02 · Field Log";
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hp-body);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hp-muted);
  margin: 0 0 14px;
}

body #checkinsHubView .panel {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 18px !important;
  box-shadow: 6px 8px 0 rgba(20,40,34,0.05) !important;
  margin-top: 18px !important;
}

/* Header column "Submitted At" — soft date-y column gets a slight tint */
body #checkinsHubView .col-submitted {
  color: var(--hp-ink-2) !important;
  font-variant-numeric: tabular-nums !important;
  font-family: var(--hp-body) !important;
}

/* Empty-state magazine treatment */
body #checkinsHubView .table-wrap tbody td.muted,
body #checkinsHubView .table-fill tbody td.muted,
body #checkinsHubView td.muted {
  text-align: center !important;
  padding: 56px 22px 60px !important;
  background: var(--hp-cream-elev) !important;
  color: transparent !important;
  font-size: 0 !important;
  position: relative;
}
body #checkinsHubView .table-wrap tbody td.muted::before,
body #checkinsHubView .table-fill tbody td.muted::before,
body #checkinsHubView td.muted::before {
  content: "Check-ins · Empty";
  display: block;
  font-family: var(--hp-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hp-muted);
  margin-bottom: 12px;
}
body #checkinsHubView .table-wrap tbody td.muted::after,
body #checkinsHubView .table-fill tbody td.muted::after,
body #checkinsHubView td.muted::after {
  content: "No check-ins yet.";
  display: block;
  font-family: var(--hp-display);
  font-style: italic;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.025em;
  color: var(--hp-ink);
  font-variation-settings: "opsz" 144;
  line-height: 1.05;
}


/* ============================================================================
   A1 · 4 — TASKS HUB (`#tasksHubView`)
   ========================================================================= */

body #tasksHubView {
  padding: 24px 28px 36px !important;
  background: var(--hp-cream) !important;
}
body #tasksHubView::before {
  content: "Vol. 03 · Operations";
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hp-body);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hp-muted);
  margin: 0 0 14px;
}

body #tasksHubView .panel {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 18px !important;
  box-shadow: 6px 8px 0 rgba(20,40,34,0.05) !important;
  margin-top: 18px !important;
}

/* Empty-state magazine treatment */
body #tasksHubView .table-wrap tbody td.muted,
body #tasksHubView .table-fill tbody td.muted,
body #tasksHubView td.muted {
  text-align: center !important;
  padding: 56px 22px 60px !important;
  background: var(--hp-cream-elev) !important;
  color: transparent !important;
  font-size: 0 !important;
  position: relative;
}
body #tasksHubView .table-wrap tbody td.muted::before,
body #tasksHubView .table-fill tbody td.muted::before,
body #tasksHubView td.muted::before {
  content: "Tasks · Empty";
  display: block;
  font-family: var(--hp-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hp-muted);
  margin-bottom: 12px;
}
body #tasksHubView .table-wrap tbody td.muted::after,
body #tasksHubView .table-fill tbody td.muted::after,
body #tasksHubView td.muted::after {
  content: "No tasks yet.";
  display: block;
  font-family: var(--hp-display);
  font-style: italic;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.025em;
  color: var(--hp-ink);
  font-variation-settings: "opsz" 144;
  line-height: 1.05;
}


/* ============================================================================
   A1 · 5 — MESSAGES HUB (`#messagesHubView`) — 3-column inbox
   The local --mv2-* vars are already aliased above. Below: per-component
   overrides for things that hardcode colors / shadows / radii outside the
   var system, plus chat-bubble outgoing dial-in.
   ========================================================================= */

body #messagesHubView {
  background: var(--hp-cream) !important;
  /* DO NOT add padding here — the 3-column layout uses calc(100vh - 140px)
     and any extra padding breaks the bottom composer pinning. */
  padding: 0 !important;
}

/* The 3-column shell + its border. Bound to viewport height so middle
   composer stays pinned. */
body #messagesHubView .msgs-v2-layout {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
body #messagesHubView .messages-left.msgs-v2-left,
body #messagesHubView .messages-right.msgs-v2-thread {
  background: var(--hp-cream-elev) !important;
  border-right: 1.5px solid var(--hp-hair) !important;
}
body #messagesHubView .messages-right.msgs-v2-thread {
  background: var(--hp-paper) !important;
}
body #messagesHubView .msgs-v2-drawer {
  background: var(--hp-cream-elev) !important;
  border-left: 1.5px solid var(--hp-hair) !important;
}

/* Left column header — INBOX eyebrow + count + search + new-btn */
body #messagesHubView .msgs-v2-left-top {
  background: var(--hp-paper) !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  padding: 18px 18px 14px !important;
  gap: 12px !important;
}
body #messagesHubView .msgs-v2-eyebrow {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
}
body #messagesHubView .msgs-v2-dot {
  background: var(--hp-chartreuse) !important;
  box-shadow: 0 0 0 2px rgba(201,242,94,0.20) !important;
  width: 7px !important;
  height: 7px !important;
}
body #messagesHubView .msgs-v2-eb-label { color: var(--hp-muted) !important; }
body #messagesHubView .msgs-v2-eb-count {
  color: var(--hp-ink) !important;
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 13px !important;
}

body #messagesHubView .msgs-v2-search {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  padding: 9px 14px !important;
}
body #messagesHubView .msgs-v2-search:focus-within {
  border-color: var(--hp-forest) !important;
  box-shadow: 0 0 0 3px rgba(31,58,46,0.10) !important;
}
body #messagesHubView .msgs-v2-search input {
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-size: 13.5px !important;
}
body #messagesHubView .msgs-v2-search input::placeholder { color: var(--hp-muted) !important; }
body #messagesHubView .msgs-v2-search svg { color: var(--hp-ink-2) !important; }

body #messagesHubView .msgs-v2-newbtn {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  border-radius: 10px !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease) !important;
}
body #messagesHubView .msgs-v2-newbtn:hover {
  background: var(--hp-forest-deep) !important;
  color: var(--hp-chartreuse) !important;
  transform: translate(-1px,-1px);
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}

/* Conversation list — group headers, rows, avatars, name, preview, unread pill */
body #messagesHubView .conversation-list.msgs-v2-list {
  background: var(--hp-cream-elev) !important;
}
body #messagesHubView .msgs-v2-group-h {
  background: var(--hp-cream-elev) !important;
  border-bottom: 1px solid var(--hp-hair-2) !important;
  font-family: var(--hp-body) !important;
}
body #messagesHubView .msgs-v2-group-h .gh-label {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
}
body #messagesHubView .msgs-v2-group-h .gh-badge {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border-radius: 999px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
}

body #messagesHubView .conversation-row {
  background: transparent !important;
  border-bottom: 1px solid var(--hp-hair-2) !important;
  transition: background .14s var(--hp-ease) !important;
}
body #messagesHubView .conversation-row:hover {
  background: var(--hp-paper) !important;
}
body #messagesHubView .conversation-row.active {
  background: var(--hp-paper) !important;
  box-shadow: inset 4px 0 0 var(--hp-forest) !important;
}
body #messagesHubView .msgs-v2-avatar {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  border-radius: 11px !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
}
body #messagesHubView .msgs-v2-name {
  font-family: var(--hp-body) !important;
  color: var(--hp-ink) !important;
  font-weight: 600 !important;
}
body #messagesHubView .conversation-row.unread .msgs-v2-name { font-weight: 700 !important; }
body #messagesHubView .msgs-v2-preview {
  color: var(--hp-muted) !important;
  font-family: var(--hp-body) !important;
}
body #messagesHubView .conversation-row.unread .msgs-v2-preview { color: var(--hp-ink-2) !important; }
body #messagesHubView .msgs-v2-ts {
  color: var(--hp-muted) !important;
  font-family: var(--hp-body) !important;
  font-variant-numeric: tabular-nums !important;
}
body #messagesHubView .msgs-v2-unread-pill {
  background: var(--hp-chartreuse) !important;
  color: var(--hp-forest-deep) !important;
  border-radius: 999px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  border: 1.5px solid var(--hp-forest) !important;
}
body #messagesHubView .msgs-v2-typing-dots span { background: var(--hp-forest) !important; }

/* Empty placeholders ("Select a conversation" / "No conversation selected"
   / "Pick a conversation to see client context" / list-empty) — render in
   the muted serif italic Hipster voice. KEEP the original text — don't
   replace via pseudo-elements (4 different copies in the same DOM). */
body #messagesHubView .msgs-v2-empty {
  text-align: center !important;
  padding: 48px 22px 60px !important;
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
  color: var(--hp-muted) !important;
  line-height: 1.2 !important;
  font-variation-settings: "opsz" 144 !important;
}

/* Left foot — keyboard cues */
body #messagesHubView .msgs-v2-foot {
  background: var(--hp-paper) !important;
  border-top: 1.5px solid var(--hp-hair) !important;
  padding: 12px 16px !important;
  color: var(--hp-muted) !important;
  font-family: var(--hp-body) !important;
  font-size: 11px !important;
}
body #messagesHubView .msgs-v2-cue { color: var(--hp-muted) !important; }
body #messagesHubView .msgs-v2-kbd {
  background: var(--hp-cream-elev) !important;
  border: 1px solid var(--hp-hair) !important;
  border-radius: 6px !important;
  color: var(--hp-ink-2) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  padding: 1px 6px !important;
}

/* Middle column — thread head (when no conversation selected) + scroll area */
body #messagesHubView .messages-right-top.msgs-v2-thread-head {
  background: var(--hp-paper) !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  padding: 18px 24px !important;
}
body #messagesHubView .msgs-v2-th-name h2 {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 22px !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}
body #messagesHubView .msgs-v2-th-avatar {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
}
body #messagesHubView .msgs-v2-presence {
  background: var(--hp-chartreuse) !important;
  border: 1.5px solid var(--hp-cream-elev) !important;
}
body #messagesHubView .msgs-v2-presence.offline { background: var(--hp-muted) !important; }
body #messagesHubView .msgs-v2-th-status { color: var(--hp-muted) !important; font-family: var(--hp-body) !important; }
body #messagesHubView .msgs-v2-th-pill {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  color: var(--hp-ink-2) !important;
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  border-radius: 999px !important;
}
body #messagesHubView .msgs-v2-th-pill:hover {
  border-color: var(--hp-forest) !important;
  color: var(--hp-forest) !important;
  background: var(--hp-paper) !important;
}
body #messagesHubView .msgs-v2-th-iconbtn {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  color: var(--hp-ink-2) !important;
  border-radius: 10px !important;
}
body #messagesHubView .msgs-v2-th-iconbtn:hover {
  background: var(--hp-forest) !important;
  border-color: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
}

/* Thread scroll area */
body #messagesHubView .message-thread.msgs-v2-thread-scroll {
  background: var(--hp-paper) !important;
}
body #messagesHubView .msgs-v2-day-chip {
  color: var(--hp-muted) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
}
body #messagesHubView .msgs-v2-day-chip:before,
body #messagesHubView .msgs-v2-day-chip:after { background: var(--hp-hair) !important; }
body #messagesHubView .msgs-v2-burst-head {
  color: var(--hp-muted) !important;
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
}

/* Message bubbles — incoming (coach) cream-elev, outgoing (you) forest-fill */
body #messagesHubView .message-bubble.msgs-v2-bubble {
  border-radius: 14px !important;
  box-shadow: 2px 2px 0 rgba(20,40,34,0.05) !important;
  border: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-cream-elev) !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  padding: 11px 15px !important;
}
body #messagesHubView .message-bubble.msgs-v2-bubble.in {
  background: var(--hp-cream-elev) !important;
  border-color: var(--hp-hair) !important;
  color: var(--hp-ink) !important;
  border-bottom-left-radius: 4px !important;
}
body #messagesHubView .message-bubble.msgs-v2-bubble.out {
  background: var(--hp-forest) !important;
  border-color: var(--hp-forest-deep) !important;
  color: var(--hp-forest-ink) !important;
  border-bottom-right-radius: 4px !important;
  box-shadow: 2px 2px 0 var(--hp-forest-deep) !important;
}
body #messagesHubView .msgs-v2-bubble-time {
  color: var(--hp-muted) !important;
  font-family: 'DM Mono', ui-monospace, 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
}

/* Composer */
body #messagesHubView .messages-compose.msgs-v2-composer-wrap {
  background: transparent !important;
  border-top: 0 !important;
}
body #messagesHubView .msgs-v2-composer {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 16px !important;
  box-shadow: 4px 6px 0 rgba(20,40,34,0.06) !important;
  padding: 10px 12px !important;
}
body #messagesHubView .msgs-v2-composer:focus-within {
  border-color: var(--hp-forest) !important;
  box-shadow: 4px 6px 0 var(--hp-forest-deep) !important;
}
body #messagesHubView .compose-input.msgs-v2-compose-input,
body #messagesHubView textarea.msgs-v2-compose-input {
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-size: 14px !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  resize: none !important;
}
body #messagesHubView .compose-input.msgs-v2-compose-input::placeholder,
body #messagesHubView textarea.msgs-v2-compose-input::placeholder {
  color: var(--hp-muted) !important;
}
body #messagesHubView .msgs-v2-cbtn,
body #messagesHubView .icon-btn {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  color: var(--hp-ink-2) !important;
  border-radius: 10px !important;
  width: 36px !important;
  height: 36px !important;
  transition: background .14s var(--hp-ease), color .14s var(--hp-ease), border-color .14s var(--hp-ease) !important;
}
body #messagesHubView .msgs-v2-cbtn:hover,
body #messagesHubView .icon-btn:hover {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest) !important;
}
body #messagesHubView .msgs-v2-cbtn-ai {
  background: var(--hp-chartreuse) !important;
  color: var(--hp-forest-deep) !important;
  border-color: var(--hp-forest) !important;
}
body #messagesHubView .msgs-v2-cbtn-ai:hover {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest-deep) !important;
}
body #messagesHubView .msgs-v2-send {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  border-radius: 10px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 0 16px !important;
  height: 36px !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease) !important;
}
body #messagesHubView .msgs-v2-send:hover {
  background: var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px);
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}

/* Smart-reply chips */
body #messagesHubView .msgs-v2-sr-chip {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  color: var(--hp-ink-2) !important;
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  border-radius: 999px !important;
  padding: 7px 13px !important;
}
body #messagesHubView .msgs-v2-sr-chip:hover {
  border-color: var(--hp-forest) !important;
  color: var(--hp-forest) !important;
  background: var(--hp-paper) !important;
}
body #messagesHubView .msgs-v2-sr-chip svg { color: var(--hp-forest) !important; }

/* Collapse pills on the dividers */
body #messagesHubView .msgs-v2-collapse-btn {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  color: var(--hp-ink-2) !important;
  border-radius: 8px !important;
}
body #messagesHubView .msgs-v2-collapse-btn:hover {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest) !important;
}

/* Right column — client context drawer (when conversation is selected) */
body #messagesHubView #msgsClientContext {
  background: var(--hp-cream-elev) !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
}
body #messagesHubView #msgsClientContext * { color: inherit; }

/* Right-context drawer empty state — same as .msgs-v2-empty above */


/* ============================================================================
   A1 · 6 — PACKAGES HUB (`#packagesHubView`)
   The hardest section visually — has stats hero, tab strip, toolbar with
   selects, big create-card, table-grid mode, and "Connect Stripe" CTA.
   ========================================================================= */

body #packagesHubView {
  background: var(--hp-cream) !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
}
body #packagesHubView.packages-v2-root,
body .packages-v2-root {
  background: var(--hp-cream) !important;
  padding: 24px 28px 36px !important;
}
body .packages-v2-root::before {
  content: "Vol. 04 · Storefront";
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hp-body);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hp-muted);
  margin: 0 0 16px;
}

/* Stats hero — 3-up cards: ACTIVE PACKAGES / EST. MRR / ACTIVE SUBSCRIBERS */
body .packages-v2-stats {
  gap: 16px !important;
  margin-bottom: 28px !important;
}
body .packages-v2-stat {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 18px !important;
  padding: 20px 22px !important;
  box-shadow: 4px 6px 0 rgba(20,40,34,0.05) !important;
}
body .packages-v2-stat .label {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
body .packages-v2-stat .label svg {
  color: var(--hp-forest) !important;
  width: 14px !important;
  height: 14px !important;
}
body .packages-v2-stat .num {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 42px !important;
  line-height: 1.0 !important;
  letter-spacing: -0.035em !important;
  color: var(--hp-ink) !important;
  font-variation-settings: "opsz" 144 !important;
}
body .packages-v2-stat .delta {
  color: var(--hp-muted) !important;
  font-family: var(--hp-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-top: 8px !important;
}

/* Tab strip — Packages / Coupons / Subscribers / Revenue */
body .packages-v2-tabs {
  border-bottom: 1.5px solid var(--hp-hair) !important;
  margin-bottom: 22px !important;
  gap: 6px !important;
}
body .packages-v2-tab {
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  color: var(--hp-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2.5px solid transparent !important;
  padding: 12px 14px !important;
  letter-spacing: 0.01em !important;
  transition: color .14s var(--hp-ease), border-color .14s var(--hp-ease) !important;
}
body .packages-v2-tab:hover { color: var(--hp-ink-2) !important; }
body .packages-v2-tab.on {
  color: var(--hp-ink) !important;
  font-weight: 700 !important;
  border-bottom-color: var(--hp-forest) !important;
}
body .packages-v2-tab .count {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  color: var(--hp-muted) !important;
  border-radius: 999px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.04em !important;
  padding: 2px 8px !important;
  margin-left: 8px !important;
}
body .packages-v2-tab.on .count {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest-deep) !important;
}

/* Toolbar — search + filter selects */
body .packages-v2-toolbar { gap: 12px !important; margin-bottom: 22px !important; }
body .packages-v2-search {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  flex: 1 1 320px !important;
  min-width: 220px !important;
}
body .packages-v2-search:focus-within {
  border-color: var(--hp-forest) !important;
  box-shadow: 0 0 0 3px rgba(31,58,46,0.10) !important;
}
body .packages-v2-search input {
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-size: 14px !important;
}
body .packages-v2-search input::placeholder { color: var(--hp-muted) !important; }
body .packages-v2-search svg { color: var(--hp-muted) !important; width: 16px !important; height: 16px !important; }

body .packages-v2-select {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  padding: 10px 32px 10px 14px !important;
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--hp-ink) !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
}
body .packages-v2-select:focus {
  outline: 0 !important;
  border-color: var(--hp-forest) !important;
}

/* Generic packages-v2 button (used for "Connect Stripe" + "+ New" + table actions) */
body .packages-v2-btn {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-ink) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 10px 18px !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease) !important;
}
body .packages-v2-btn:hover {
  background: var(--hp-paper) !important;
  border-color: var(--hp-ink) !important;
  transform: translate(-1px,-1px);
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}
body .packages-v2-btn.primary {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest-deep) !important;
  box-shadow: var(--hp-shadow-sticker) !important;
}
body .packages-v2-btn.primary:hover {
  background: var(--hp-forest-deep) !important;
  color: var(--hp-chartreuse) !important;
  transform: translate(-1px,-1px);
  box-shadow: 5px 5px 0 var(--hp-forest-deep) !important;
}
body .packages-v2-btn svg { width: 14px !important; height: 14px !important; }

/* Connect Stripe call-to-action (the centered button at the bottom of empty state) */
body #packagesV2ConnectStripeBtn,
body button#packagesV2StripeBtn {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  border-radius: 12px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 12px 22px !important;
  box-shadow: var(--hp-shadow-sticker) !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease) !important;
}
body #packagesV2ConnectStripeBtn:hover,
body button#packagesV2StripeBtn:hover {
  background: var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px);
  box-shadow: 5px 5px 0 var(--hp-forest-deep) !important;
}

/* Packages grid + cards */
body .packages-v2-grid { gap: 18px !important; }
body .packages-v2-card {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 18px !important;
  box-shadow: 4px 6px 0 rgba(20,40,34,0.05) !important;
  overflow: hidden !important;
  transition: transform .14s var(--hp-ease), box-shadow .14s var(--hp-ease), border-color .14s var(--hp-ease) !important;
}
body .packages-v2-card:hover {
  border-color: var(--hp-forest) !important;
  transform: translate(-1px,-2px);
  box-shadow: 6px 8px 0 var(--hp-forest-deep) !important;
}
body .packages-v2-card .hero {
  background: linear-gradient(135deg, var(--hp-forest), var(--hp-forest-deep)) !important;
  height: 96px !important;
}
body .packages-v2-card .hero .pill {
  background: var(--hp-chartreuse) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  border-radius: 999px !important;
  color: var(--hp-forest-deep) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
}
body .packages-v2-card .hero .pill.draft {
  background: var(--hp-cream-elev) !important;
  color: var(--hp-ink-2) !important;
}
body .packages-v2-card .hero .pill .dot {
  background: var(--hp-forest) !important;
  width: 6px !important;
  height: 6px !important;
}
body .packages-v2-card .hero .pill.draft .dot { background: var(--hp-muted) !important; }
body .packages-v2-card .name {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 22px !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.02em !important;
}
body .packages-v2-card .desc {
  color: var(--hp-muted) !important;
  font-family: var(--hp-body) !important;
  font-size: 13px !important;
}
body .packages-v2-card .price {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.02em !important;
}
body .packages-v2-card .price .cadence {
  color: var(--hp-muted) !important;
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
body .packages-v2-card .meta {
  color: var(--hp-muted) !important;
  font-family: var(--hp-body) !important;
  font-size: 12px !important;
}
body .packages-v2-card .meta svg { color: var(--hp-forest) !important; }
body .packages-v2-card .feats li {
  color: var(--hp-ink-2) !important;
  font-family: var(--hp-body) !important;
  font-size: 13px !important;
}
body .packages-v2-card .feats svg { color: var(--hp-forest) !important; }

/* "Create package" empty-state card — the big tan placeholder */
body .packages-v2-card.add,
body #packagesV2AddCard {
  background: var(--hp-paper) !important;
  border: 1.5px dashed var(--hp-forest) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 36px 24px !important;
  min-height: 280px !important;
  transition: background .14s var(--hp-ease), border-color .14s var(--hp-ease), transform .14s var(--hp-ease) !important;
}
body .packages-v2-card.add:hover,
body #packagesV2AddCard:hover {
  background: var(--hp-cream-elev) !important;
  border-color: var(--hp-forest-deep) !important;
  transform: none;
}
body .packages-v2-card.add .ic,
body #packagesV2AddCard .ic {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  border-radius: 14px !important;
  width: 56px !important;
  height: 56px !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: var(--hp-shadow-sticker) !important;
  margin-bottom: 16px !important;
}
body .packages-v2-card.add .ic svg,
body #packagesV2AddCard .ic svg {
  color: var(--hp-chartreuse) !important;
  width: 22px !important;
  height: 22px !important;
}
body .packages-v2-card.add .name,
body #packagesV2AddCard .name {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 24px !important;
  letter-spacing: -0.025em !important;
  color: var(--hp-ink) !important;
  margin: 0 0 6px !important;
}
body .packages-v2-card.add .desc,
body #packagesV2AddCard .desc {
  color: var(--hp-muted) !important;
  font-family: var(--hp-body) !important;
  font-size: 13px !important;
  margin: 0 !important;
  max-width: 280px !important;
}

/* The serif italic helper class — already used for "Create package" text */
body .packages-v2-serif-it {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-variation-settings: "opsz" 144 !important;
}

/* Packages tables (Coupons / Subscribers tabs) */
body .packages-v2-table-wrap {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 18px !important;
  box-shadow: 6px 8px 0 rgba(20,40,34,0.05) !important;
  overflow: hidden !important;
}
body .packages-v2-table { border-collapse: collapse !important; font-family: var(--hp-body) !important; }
body .packages-v2-table th {
  background: var(--hp-paper) !important;
  color: var(--hp-ink-2) !important;
  font-family: var(--hp-body) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 18px 22px !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  text-align: left !important;
}
body .packages-v2-table td {
  padding: 18px 22px !important;
  font-family: var(--hp-body) !important;
  font-size: 14px !important;
  color: var(--hp-ink) !important;
  border-bottom: 1px solid var(--hp-hair-2) !important;
  background: var(--hp-cream-elev) !important;
}
body .packages-v2-table tr.row-clickable { cursor: pointer !important; }
body .packages-v2-table tr.row-clickable:hover { background: var(--hp-paper) !important; }
body .packages-v2-status-pill {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  color: var(--hp-ink-2) !important;
  border-radius: 999px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
body .packages-v2-status-pill .dot { background: var(--hp-forest) !important; }
body .packages-v2-status-pill.expired { color: var(--hp-muted) !important; }
body .packages-v2-status-pill.expired .dot { background: var(--hp-muted) !important; }

/* Stripe connect helper sentence above Connect-to-Stripe button */
body #packagesHubView p,
body #packagesHubView .packages-v2-hero-sub {
  color: var(--hp-muted) !important;
  font-family: var(--hp-body) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

/* Mini revenue stat tiles */
body .packages-v2-rev-mini .packages-v2-stat .num {
  font-size: 28px !important;
}


/* ============================================================================
   A1 · 7 — ACCT-MENU DROPDOWN (header avatar dropdown) — gets opened from any
   page so needs translating once.
   ========================================================================= */

body .acct-menu {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 14px !important;
  box-shadow: 6px 8px 0 rgba(20,40,34,0.08) !important;
  font-family: var(--hp-body) !important;
  padding: 8px !important;
}
body .acct-menu-head {
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 10px !important;
  padding: 12px !important;
  margin-bottom: 6px !important;
}
body .acct-menu-av {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
}
body .acct-menu-name {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  color: var(--hp-ink) !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
}
body .acct-menu-email {
  color: var(--hp-muted) !important;
  font-family: var(--hp-body) !important;
  font-size: 12px !important;
}
body .acct-item {
  color: var(--hp-ink-2) !important;
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 9px 11px !important;
  transition: background .14s var(--hp-ease) !important;
}
body .acct-item:hover {
  background: rgba(31,58,46,0.06) !important;
  color: var(--hp-ink) !important;
}
body .acct-item.danger { color: var(--hp-danger) !important; }
body .acct-item.danger:hover { background: rgba(156,42,42,0.06) !important; }
body .acct-divider { background: var(--hp-hair) !important; }


/* ============================================================================
   A1 · 8 — MISC: section-level body backgrounds + scroll behavior
   ========================================================================= */

body #checkinsHubView,
body #tasksHubView,
body #messagesHubView,
body #packagesHubView { background: var(--hp-cream) !important; }

/* Ensure long-form pages get a graceful bottom-padding for the side-foot pill */
body #checkinsHubView,
body #tasksHubView { min-height: calc(100vh - 80px) !important; }


/* ===== END · PHASE 2 · AGENT A1 ===== */


/* ============================================================================
   ============================================================================
   PHASE 2 · AGENT A2 · LIBRARY+WIZARD SECTIONS
   ----------------------------------------------------------------------------
   Scope: Forms, Habits, Resources, Onboarding Flow + every modal interior
   reachable from them (including the form-builder drawer's own sidebar of
   question cards — operator called this out by name).

   Original v2 modules hardcoded their palette as #252525 ink + #C9A96E gold +
   #6B6560 muted + #E8E2D6 hair + #FCFCFB / #FEFEFE surfaces + #9B958E subtle.
   :root var aliasing does not reach those — explicit body-prefixed overrides
   below, per Rule 44. Catch-all `.modal-box` + `.search` sweep at the end.
   ============================================================================
   ========================================================================= */


/* ============================================================================
   A2.1 — Shared "v2 hero" hero block (Forms · Habits · Resources)
   ========================================================================= */
body .forms-v2-hero,
body .habits-v2-hero,
body .resources-v2-hero {
  padding: 28px 8px 18px !important;
  background: transparent !important;
}
body .forms-v2-hero h1,
body .resources-v2-hero h1 {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 38px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em !important;
  color: var(--hp-ink) !important;
  margin: 0 0 10px !important;
}
body .forms-v2-hero p,
body .resources-v2-hero p {
  font-family: var(--hp-body) !important;
  font-size: 13px !important;
  color: var(--hp-ink-2) !important;
  max-width: 520px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* Stat cards across all three sections */
body .forms-v2-stat,
body .habits-v2-stat,
body .resources-v2-stat,
body .packages-v2-stat {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 14px !important;
  padding: 14px 18px 14px 32px !important;
  min-width: 140px !important;
  box-shadow: var(--hp-shadow-card) !important;
  position: relative !important;
}
body .forms-v2-stat::before,
body .habits-v2-stat::before,
body .resources-v2-stat::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--hp-chartreuse);
  box-shadow: 0 0 0 2px var(--hp-cream-elev), 0 0 0 3px var(--hp-forest);
}
body .forms-v2-stat .num,
body .resources-v2-stat .num,
body .packages-v2-stat .num {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 30px !important;
  letter-spacing: -0.01em !important;
  color: var(--hp-ink) !important;
  line-height: 1 !important;
}
body .forms-v2-stat .num small,
body .resources-v2-stat .num small {
  font-family: var(--hp-body) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--hp-ink-2) !important;
}
body .habits-v2-stat .val {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 30px !important;
  letter-spacing: -0.01em !important;
  color: var(--hp-ink) !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}
body .habits-v2-stat .val .unit {
  font-family: var(--hp-body) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--hp-ink-2) !important;
}
body .forms-v2-stat .lbl,
body .habits-v2-stat .lbl,
body .resources-v2-stat .lbl,
body .packages-v2-stat .label {
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: var(--hp-muted) !important;
  margin: 0 0 8px !important;
}
body .habits-v2-stat .lbl { margin: 0 0 6px !important; }


/* ============================================================================
   A2.2 — Shared "v2 tabs" segmented control (Forms · Habits · Resources · Packages)
   ========================================================================= */
body .forms-v2-tabs,
body .habits-v2-tabs,
body .resources-v2-tabs,
body .packages-v2-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  padding: 0 8px !important;
  margin-bottom: 6px !important;
  background: transparent !important;
}
body .habits-v2-tabs { justify-content: space-between !important; flex-wrap: wrap !important; gap: 12px !important; }
body .forms-v2-tab,
body .habits-v2-tab,
body .resources-v2-tab,
body .packages-v2-tab {
  font-family: var(--hp-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--hp-muted) !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  padding: 12px 14px !important;
  border-bottom: 2.5px solid transparent !important;
  margin-bottom: -1.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: color .14s var(--hp-ease), border-color .14s var(--hp-ease) !important;
  text-transform: uppercase !important;
}
body .forms-v2-tab:hover,
body .habits-v2-tab:hover,
body .resources-v2-tab:hover,
body .packages-v2-tab:hover { color: var(--hp-ink) !important; }
body .forms-v2-tab.on,
body .habits-v2-tab.active,
body .resources-v2-tab.on,
body .packages-v2-tab.active,
body .packages-v2-tab[aria-current="true"] {
  color: var(--hp-ink) !important;
  border-bottom-color: var(--hp-forest) !important;
}
body .forms-v2-tab .count,
body .resources-v2-tab .count,
body .habits-v2-tab-count {
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: rgba(31,58,46,0.08) !important;
  color: var(--hp-ink-2) !important;
  letter-spacing: 0.04em !important;
}
body .forms-v2-tab.on .count,
body .resources-v2-tab.on .count,
body .habits-v2-tab.active .habits-v2-tab-count {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
}

/* Search input pill (shared) */
body .forms-v2-search,
body .habits-v2-search,
body .resources-v2-search {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: none !important;
  transition: border-color .14s var(--hp-ease), box-shadow .14s var(--hp-ease) !important;
}
body .forms-v2-search:focus-within,
body .habits-v2-search:focus-within,
body .resources-v2-search:focus-within {
  border-color: var(--hp-forest) !important;
  box-shadow: 0 0 0 3px rgba(201,242,94,0.35) !important;
}
body .forms-v2-search svg,
body .habits-v2-search svg,
body .resources-v2-search svg { color: var(--hp-muted) !important; }
body .forms-v2-search input,
body .habits-v2-search input,
body .resources-v2-search input {
  font-family: var(--hp-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--hp-ink) !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
}
body .forms-v2-search input::placeholder,
body .habits-v2-search input::placeholder,
body .resources-v2-search input::placeholder { color: var(--hp-muted) !important; }


/* ============================================================================
   A2.3 — FORMS section
   ========================================================================= */
body #formsHubView .forms-v2-root {
  --fv2-cream: var(--hp-cream);
  --fv2-white: var(--hp-cream-elev);
  --fv2-ink: var(--hp-ink);
  --fv2-muted: var(--hp-ink-2);
  --fv2-subtle: var(--hp-muted);
  --fv2-gold: var(--hp-forest);
  --fv2-gold-light: var(--hp-forest);
  --fv2-gold-dim: rgba(31,58,46,0.10);
  --fv2-gold-border: var(--hp-hair);
  --fv2-border: var(--hp-hair);
  --fv2-border-strong: var(--hp-ink-2);
  --fv2-shadow-sm: 0 1px 0 rgba(20,40,34,.06);
  --fv2-shadow-md: 6px 8px 0 rgba(20,40,34,.10);
  --fv2-shadow-lg: 0 16px 48px rgba(20,40,34,.18);
  --fv2-serif: var(--hp-display);
  background: var(--hp-cream) !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
}

/* Forms grid cards */
body #formsV2PanelLibrary .forms-v2-card,
body #formsV2PanelDrafts .forms-v2-card {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 16px !important;
  box-shadow: var(--hp-shadow-card) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform .15s var(--hp-ease), box-shadow .15s var(--hp-ease), border-color .15s var(--hp-ease) !important;
}
body #formsV2PanelLibrary .forms-v2-card:hover,
body #formsV2PanelDrafts .forms-v2-card:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
  border-color: var(--hp-forest) !important;
}
body .forms-v2-card-hero { height: 96px !important; padding: 14px !important; position: relative !important; }
body .forms-v2-card-hero .qcount {
  background: rgba(251,246,234,0.92) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid var(--hp-hair) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--hp-ink) !important;
  text-transform: uppercase !important;
}
body .forms-v2-card-hero .type {
  background: rgba(251,246,234,0.92) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid var(--hp-hair) !important;
  border-radius: 10px !important;
  color: var(--hp-forest) !important;
  width: 34px !important;
  height: 34px !important;
}
body .forms-v2-card-body { padding: 16px 18px 14px !important; }
body .forms-v2-card-title {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 1.22 !important;
  letter-spacing: -0.01em !important;
  color: var(--hp-ink) !important;
}
body .forms-v2-card:hover .forms-v2-card-title { font-weight: 900 !important; }
body .forms-v2-card-desc {
  font-family: var(--hp-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--hp-ink-2) !important;
  line-height: 1.55 !important;
}
body .forms-v2-card-foot {
  padding: 12px 18px !important;
  border-top: 1.5px solid var(--hp-hair) !important;
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--hp-muted) !important;
}
body .forms-v2-card-foot .used { color: var(--hp-ink-2) !important; }

/* 6 hero-gradient palettes — Hipsterized */
body .forms-v2-palette-0 { background: linear-gradient(135deg, #F4ECDD 0%, #E1D7C0 100%) !important; }
body .forms-v2-palette-1 { background: linear-gradient(135deg, #E7EDD8 0%, #B7C5A1 100%) !important; }
body .forms-v2-palette-2 { background: linear-gradient(135deg, #FBF6EA 0%, #C9F25E 100%) !important; }
body .forms-v2-palette-3 { background: linear-gradient(135deg, #142822 0%, #1F3A2E 100%) !important; }
body .forms-v2-palette-3 .qcount,
body .forms-v2-palette-3 .type {
  color: var(--hp-forest-ink) !important;
  background: rgba(20,40,34,0.62) !important;
  border-color: rgba(231,237,216,0.30) !important;
}
body .forms-v2-palette-4 { background: linear-gradient(135deg, #C9F25E 0%, #1F3A2E 100%) !important; }
body .forms-v2-palette-5 { background: linear-gradient(135deg, #E1D7C0 0%, #9C8A7C 100%) !important; }

/* Draft pill */
body .forms-v2-draft-pill {
  background: var(--hp-chartreuse) !important;
  color: var(--hp-forest-deep) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  border-radius: 999px !important;
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 3px 9px !important;
}

/* "+ Create Form" / "+ Add Resource" sticker tile */
body .forms-v2-create-card,
body .resources-v2-create-card {
  background: var(--hp-cream-elev) !important;
  border: 2px dashed var(--hp-forest) !important;
  border-radius: 16px !important;
  color: var(--hp-forest) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  min-height: 280px !important;
  transition: transform .15s var(--hp-ease), box-shadow .15s var(--hp-ease), background .15s var(--hp-ease) !important;
  cursor: pointer !important;
}
body .forms-v2-create-card:hover,
body .resources-v2-create-card:hover {
  background: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest-deep) !important;
  border-style: solid !important;
  transform: translate(-3px, -3px) !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
}
body .forms-v2-create-card .lbl,
body .resources-v2-create-card .lbl {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: -0.01em !important;
  color: var(--hp-forest) !important;
}
body .forms-v2-create-card:hover .lbl,
body .resources-v2-create-card:hover .lbl { color: var(--hp-forest-deep) !important; }
body .forms-v2-create-card .sub,
body .resources-v2-create-card .sub {
  font-family: var(--hp-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--hp-muted) !important;
}

/* Responses table */
body .forms-v2-resp-list {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 14px !important;
  box-shadow: var(--hp-shadow-card) !important;
}
body .forms-v2-resp-head {
  background: var(--hp-cream) !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: var(--hp-muted) !important;
  font-weight: 700 !important;
}
body .forms-v2-resp-row {
  border-bottom: 1px solid var(--hp-hair) !important;
  background: var(--hp-cream-elev) !important;
  transition: background .14s var(--hp-ease) !important;
}
body .forms-v2-resp-row:hover { background: rgba(201,242,94,0.12) !important; }
body .forms-v2-resp-row .av {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  border-radius: 10px !important;
}
body .forms-v2-resp-row .client,
body .forms-v2-resp-row .formname {
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
  color: var(--hp-ink) !important;
}
body .forms-v2-resp-row .time { color: var(--hp-muted) !important; }
body .forms-v2-resp-row .bar { background: var(--hp-hair) !important; border-radius: 999px !important; }
body .forms-v2-resp-row .bar i {
  background: linear-gradient(90deg, var(--hp-forest) 0%, var(--hp-chartreuse) 100%) !important;
}
body .forms-v2-resp-row .pct {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  color: var(--hp-forest) !important;
}
body .forms-v2-resp-row .chev { color: var(--hp-muted) !important; }

/* Empty state */
body .forms-v2-empty { padding: 80px 20px !important; text-align: center !important; position: relative !important; }
body .forms-v2-empty::before {
  content: "FORMS · EMPTY";
  display: block;
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  color: var(--hp-muted) !important;
  margin-bottom: 14px !important;
}
body .forms-v2-empty h3 {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  color: var(--hp-ink) !important;
  margin: 0 0 6px !important;
}
body .forms-v2-empty p {
  font-family: var(--hp-body) !important;
  color: var(--hp-ink-2) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* Floating create menu */
body .forms-v2-create-menu {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 14px !important;
  box-shadow: 6px 8px 0 var(--hp-forest-deep) !important;
  padding: 8px !important;
}
body .forms-v2-create-menu button {
  font-family: var(--hp-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--hp-ink) !important;
  border-radius: 10px !important;
  background: none !important;
}
body .forms-v2-create-menu button:hover {
  background: var(--hp-chartreuse) !important;
  color: var(--hp-forest-deep) !important;
}
body .forms-v2-create-menu button svg { color: var(--hp-forest) !important; }


/* ============================================================================
   A2.4 — FORMS · Right slide-over drawer (form-builder)
   This is the surface operator called out by name: "if you click on create
   form, meaning checking a questionnaire, the sidebar must look like hipster."
   The "sidebar" in this builder pattern is the stacked column of question
   cards (each card = one step in the questionnaire).
   ========================================================================= */
body .forms-v2-scrim { background: rgba(20,40,34,0.45) !important; }
body .forms-v2-drawer {
  background: var(--hp-cream-elev) !important;
  box-shadow: -24px 0 60px rgba(20,40,34,0.22) !important;
  font-family: var(--hp-body) !important;
  color: var(--hp-ink) !important;
  border-left: 2px solid var(--hp-forest) !important;
}
body .forms-v2-drawer-head {
  background: var(--hp-cream) !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
}
body .forms-v2-drawer-head .left {
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
}
body .forms-v2-btn {
  font-family: var(--hp-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease) !important;
}
body .forms-v2-btn.ghost {
  color: var(--hp-ink) !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-ink) !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
}
body .forms-v2-btn.ghost:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
  background: var(--hp-paper) !important;
}
body .forms-v2-btn.primary,
body .forms-v2-btn.gold {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
}
body .forms-v2-btn.primary:hover,
body .forms-v2-btn.gold:hover {
  background: var(--hp-forest-deep) !important;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}
body .forms-v2-icon-btn {
  color: var(--hp-ink-2) !important;
  background: transparent !important;
  border-radius: 10px !important;
}
body .forms-v2-icon-btn:hover {
  background: var(--hp-chartreuse) !important;
  color: var(--hp-forest-deep) !important;
}
body .forms-v2-drawer-body { background: var(--hp-cream-elev) !important; }
body .forms-v2-drawer-hero { border-bottom: 1.5px solid var(--hp-hair) !important; }
body .forms-v2-drawer-title {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 36px !important;
  letter-spacing: -0.02em !important;
  color: var(--hp-ink) !important;
  line-height: 1.05 !important;
}
body .forms-v2-drawer-title:focus,
body .forms-v2-drawer-desc:focus { background: rgba(201,242,94,0.20) !important; }
body .forms-v2-drawer-desc {
  font-family: var(--hp-body) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--hp-ink-2) !important;
  line-height: 1.6 !important;
}
body .forms-v2-meta-pill {
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
}
body .forms-v2-meta-pill svg { color: var(--hp-forest) !important; }

/* Question cards — the questionnaire "sidebar steps" of the builder */
body .forms-v2-q-card {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 14px !important;
  transition: transform .14s var(--hp-ease), box-shadow .14s var(--hp-ease), border-color .14s var(--hp-ease) !important;
}
body .forms-v2-q-card:hover {
  border-color: var(--hp-forest) !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
  transform: translate(-1px, -1px) !important;
}
body .forms-v2-q-type-icon {
  background: var(--hp-forest) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  border-radius: 10px !important;
  color: var(--hp-chartreuse) !important;
}
body .forms-v2-q-num {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 14px !important;
  color: var(--hp-forest) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}
body .forms-v2-q-typename {
  font-family: var(--hp-body) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-forest-deep) !important;
  background: var(--hp-chartreuse) !important;
  border: 1px solid var(--hp-forest-deep) !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
}
body .forms-v2-q-required {
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--hp-danger) !important;
}
body .forms-v2-q-text {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--hp-ink) !important;
  line-height: 1.35 !important;
}
body .forms-v2-q-preview {
  font-family: var(--hp-body) !important;
  font-size: 12px !important;
  color: var(--hp-ink-2) !important;
  background: var(--hp-cream) !important;
  border: 1.5px dashed var(--hp-hair) !important;
  border-radius: 10px !important;
}
body .forms-v2-q-option {
  font-family: var(--hp-body) !important;
  font-size: 13px !important;
  color: var(--hp-ink-2) !important;
}
body .forms-v2-q-option .dot {
  border: 1.5px solid var(--hp-forest) !important;
  background: var(--hp-cream-elev) !important;
}
body .forms-v2-q-rating span {
  font-family: var(--hp-body) !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 10px !important;
  color: var(--hp-ink-2) !important;
  font-weight: 700 !important;
}
body .forms-v2-q-add-bottom {
  font-family: var(--hp-body) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--hp-forest) !important;
  background: var(--hp-cream-elev) !important;
  border: 2px dashed var(--hp-forest) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  transition: background .14s var(--hp-ease), border-style .14s var(--hp-ease) !important;
}
body .forms-v2-q-add-bottom:hover {
  background: var(--hp-chartreuse) !important;
  border-style: solid !important;
  color: var(--hp-forest-deep) !important;
}


/* ============================================================================
   A2.5 — FORMS · Add Question fd-drawer modal (slide-over when adding a Q)
   ========================================================================= */
body .modal.fd-drawer .modal-box {
  background: var(--hp-cream-elev) !important;
  border-left: 2px solid var(--hp-forest) !important;
  font-family: var(--hp-body) !important;
  border-radius: 0 !important;
}
body .fd-drawer__head {
  background: var(--hp-cream) !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
}
body .fd-drawer__eyebrow {
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
  margin: 0 0 4px !important;
}
body .fd-drawer__title {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
}
body .fd-drawer__close {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
}
body .fd-drawer__close:hover {
  background: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest-deep) !important;
  color: var(--hp-forest-deep) !important;
}
body .fd-drawer__tab {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  color: var(--hp-ink-2) !important;
  border: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-cream-elev) !important;
  border-radius: 12px !important;
}
body .fd-drawer__tab:hover { border-color: var(--hp-forest) !important; }
body .fd-drawer__tab.active {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest-deep) !important;
}
body .fd-drawer__label {
  font-family: var(--hp-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
}
body .modal.fd-drawer .fd-drawer__body input.search,
body .modal.fd-drawer .fd-drawer__body textarea.search,
body .modal.fd-drawer .fd-drawer__body select.search {
  font-family: var(--hp-body) !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  font-size: 13px !important;
  padding: 12px 14px !important;
}
body .modal.fd-drawer .fd-drawer__body input.search::placeholder,
body .modal.fd-drawer .fd-drawer__body textarea.search::placeholder { color: var(--hp-muted) !important; }
body .modal.fd-drawer .fd-drawer__body input.search:focus,
body .modal.fd-drawer .fd-drawer__body textarea.search:focus,
body .modal.fd-drawer .fd-drawer__body select.search:focus {
  border-color: var(--hp-forest) !important;
  box-shadow: 0 0 0 3px rgba(201,242,94,0.35) !important;
  outline: none !important;
}
body .fd-drawer__required { font-family: var(--hp-body) !important; font-size: 12px !important; color: var(--hp-ink-2) !important; }
body .fd-drawer__qtype-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
body .question-type-btn {
  font-family: var(--hp-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--hp-ink) !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  padding: 12px 8px !important;
  cursor: pointer !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease), background .12s var(--hp-ease) !important;
}
body .question-type-btn:hover {
  background: var(--hp-cream) !important;
  border-color: var(--hp-forest) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
}
body .question-type-btn.selected,
body .question-type-btn[aria-selected="true"] {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest-deep) !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
}
body .fd-drawer__foot {
  background: var(--hp-cream) !important;
  border-top: 1.5px solid var(--hp-hair) !important;
}
body .fd-drawer__msg { font-family: var(--hp-body) !important; font-size: 12px !important; color: var(--hp-ink-2) !important; }


/* ============================================================================
   A2.6 — HABITS section
   ========================================================================= */
body #habitsHubView {
  background: var(--hp-cream) !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
}
body #habitsHubView .habits-v2-shell { background: transparent !important; }
body #habitsHubView .habits-v2-shell::before {
  content: "VOL. 02 · HABITS LIBRARY";
  display: block;
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  color: var(--hp-muted) !important;
  padding: 18px 8px 0 !important;
}

/* Habit pack cards */
body #habitsHubView .habits-v2-card {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  box-shadow: var(--hp-shadow-card) !important;
  font-family: var(--hp-body) !important;
  transition: transform .14s var(--hp-ease), box-shadow .14s var(--hp-ease), border-color .14s var(--hp-ease) !important;
}
body #habitsHubView .habits-v2-card:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
  border-color: var(--hp-forest) !important;
}
body #habitsHubView .habits-v2-card-title {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}
body #habitsHubView .habits-v2-badge {
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--hp-forest-deep) !important;
  background: var(--hp-chartreuse) !important;
  border: 1px solid var(--hp-forest-deep) !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
}
body #habitsHubView .habits-v2-meta {
  font-family: var(--hp-body) !important;
  font-size: 13px !important;
  color: var(--hp-ink-2) !important;
  line-height: 1.55 !important;
}
body #habitsHubView .habits-v2-foot {
  border-top: 1px solid var(--hp-hair) !important;
  padding-top: 12px !important;
  margin-top: 12px !important;
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
}
body #habitsHubView .habits-v2-spark span { background: var(--hp-forest) !important; border-radius: 2px !important; }
body #habitsHubView .habits-v2-spark span:nth-child(7n) {
  background: var(--hp-chartreuse) !important;
  border: 1px solid var(--hp-forest-deep) !important;
}
body #habitsHubView .habits-v2-strip,
body #habitsHubView .habits-v2-body { background: transparent !important; }

/* "+ Create Pack/Habit" sticker tile */
body #habitsHubView .habits-v2-card.habits-v2-create {
  background: var(--hp-cream-elev) !important;
  border: 2px dashed var(--hp-forest) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-height: 200px !important;
  cursor: pointer !important;
  color: var(--hp-forest) !important;
  transition: background .14s var(--hp-ease), border-style .14s var(--hp-ease), transform .14s var(--hp-ease), box-shadow .14s var(--hp-ease) !important;
}
body #habitsHubView .habits-v2-card.habits-v2-create:hover {
  background: var(--hp-chartreuse) !important;
  border-style: solid !important;
  border-color: var(--hp-forest-deep) !important;
  transform: translate(-3px, -3px) !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
  color: var(--hp-forest-deep) !important;
}
body #habitsHubView .habits-v2-create .plus {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  border: 2px solid var(--hp-forest) !important;
  background: var(--hp-cream-elev) !important;
  color: var(--hp-forest) !important;
  display: grid !important;
  place-items: center !important;
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-size: 22px !important;
}
body #habitsHubView .habits-v2-create:hover .plus {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest-deep) !important;
}
body #habitsHubView .habits-v2-create .label {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: -0.005em !important;
}

/* Habits shared drawer (drilldown) */
body .habits-v2-drawer {
  background: var(--hp-cream-elev) !important;
  border-left: 2px solid var(--hp-forest) !important;
  box-shadow: -24px 0 60px rgba(20,40,34,0.22) !important;
  font-family: var(--hp-body) !important;
  color: var(--hp-ink) !important;
}
body .habits-v2-drawer-head {
  background: var(--hp-cream) !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
}
body .habits-v2-drawer-crumb {
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
}
body .habits-v2-drawer-close {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  width: 36px !important;
  height: 36px !important;
}
body .habits-v2-drawer-close:hover {
  background: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest-deep) !important;
  color: var(--hp-forest-deep) !important;
}
body .habits-v2-drawer-body { background: var(--hp-cream-elev) !important; padding: 28px 36px !important; }
body .habits-v2-drawer-foot { background: var(--hp-cream) !important; border-top: 1.5px solid var(--hp-hair) !important; }


/* ============================================================================
   A2.7 — HABITS · Habit detail modal interior (multi-tab builder)
   ========================================================================= */
body #habitDetailModal.modal .modal-box,
body #habitDetailModal.modal article.modal-box {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 18px !important;
  box-shadow: 6px 8px 0 var(--hp-forest-deep), 0 24px 60px rgba(20,40,34,0.22) !important;
  font-family: var(--hp-body) !important;
  color: var(--hp-ink) !important;
}
body #habitDetailModal #habitDetailModalTitle {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.015em !important;
}


/* ============================================================================
   A2.8 — RESOURCES section
   ========================================================================= */
body #resourcesHubView .resources-v2-root {
  --rv2-cream: var(--hp-cream);
  --rv2-white: var(--hp-cream-elev);
  --rv2-ink: var(--hp-ink);
  --rv2-muted: var(--hp-ink-2);
  --rv2-subtle: var(--hp-muted);
  --rv2-gold: var(--hp-forest);
  --rv2-gold-light: var(--hp-forest);
  --rv2-gold-dim: rgba(31,58,46,0.10);
  --rv2-gold-border: var(--hp-hair);
  --rv2-border: var(--hp-hair);
  --rv2-border-strong: var(--hp-ink-2);
  --rv2-shadow-sm: 0 1px 0 rgba(20,40,34,.06);
  --rv2-shadow-md: 6px 8px 0 rgba(20,40,34,.10);
  --rv2-shadow-lg: 0 16px 48px rgba(20,40,34,.18);
  --rv2-serif: var(--hp-display);
  background: var(--hp-cream) !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
}
body #resourcesV2Grid .resources-v2-card {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 16px !important;
  box-shadow: var(--hp-shadow-card) !important;
  overflow: hidden !important;
  transition: transform .15s var(--hp-ease), box-shadow .15s var(--hp-ease), border-color .15s var(--hp-ease) !important;
}
body #resourcesV2Grid .resources-v2-card:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
  border-color: var(--hp-forest) !important;
}
body .resources-v2-card-hero .type,
body .resources-v2-card-hero .icon {
  background: rgba(251,246,234,0.92) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid var(--hp-hair) !important;
  color: var(--hp-forest-deep) !important;
}
body .resources-v2-card-hero .type {
  font-family: var(--hp-body) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
}
body .resources-v2-card-hero .icon { border-radius: 10px !important; }
body .resources-v2-card-body { padding: 16px 18px 14px !important; }
body .resources-v2-card-title {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.22 !important;
}
body .resources-v2-card:hover .resources-v2-card-title { font-weight: 900 !important; }
body .resources-v2-card-desc {
  font-family: var(--hp-body) !important;
  font-size: 12.5px !important;
  color: var(--hp-ink-2) !important;
  line-height: 1.55 !important;
}
body .resources-v2-card-foot {
  border-top: 1.5px solid var(--hp-hair) !important;
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
}
body .resources-v2-card-foot .used { color: var(--hp-ink-2) !important; }

/* 6 hero-gradient palettes — Hipsterized */
body .resources-v2-palette-0 { background: linear-gradient(135deg, #F4ECDD 0%, #E1D7C0 100%) !important; }
body .resources-v2-palette-1 { background: linear-gradient(135deg, #E7EDD8 0%, #B7C5A1 100%) !important; }
body .resources-v2-palette-2 { background: linear-gradient(135deg, #FBF6EA 0%, #C9F25E 100%) !important; }
body .resources-v2-palette-3 { background: linear-gradient(135deg, #142822 0%, #1F3A2E 100%) !important; }
body .resources-v2-palette-3 .type,
body .resources-v2-palette-3 .icon {
  background: rgba(20,40,34,0.62) !important;
  color: var(--hp-forest-ink) !important;
  border-color: rgba(231,237,216,0.3) !important;
}
body .resources-v2-palette-4 { background: linear-gradient(135deg, #C9F25E 0%, #1F3A2E 100%) !important; }
body .resources-v2-palette-5 { background: linear-gradient(135deg, #E1D7C0 0%, #9C8A7C 100%) !important; }

/* Empty state */
body .resources-v2-empty { padding: 80px 20px !important; text-align: center !important; position: relative !important; }
body .resources-v2-empty::before {
  content: "RESOURCES · EMPTY";
  display: block;
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  color: var(--hp-muted) !important;
  margin-bottom: 14px !important;
}
body .resources-v2-empty h3 {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  color: var(--hp-ink) !important;
}
body .resources-v2-empty p {
  font-family: var(--hp-body) !important;
  color: var(--hp-ink-2) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}


/* ============================================================================
   A2.9 — RESOURCES · Slide-over drawer (detail + uploader)
   ========================================================================= */
body .resources-v2-scrim { background: rgba(20,40,34,0.45) !important; }
body .resources-v2-drawer {
  background: var(--hp-cream-elev) !important;
  box-shadow: -24px 0 60px rgba(20,40,34,0.22) !important;
  font-family: var(--hp-body) !important;
  color: var(--hp-ink) !important;
  border-left: 2px solid var(--hp-forest) !important;
}
body .resources-v2-drawer-head {
  background: var(--hp-cream) !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
}
body .resources-v2-drawer-head .left {
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
}
body .resources-v2-btn {
  font-family: var(--hp-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease) !important;
}
body .resources-v2-btn.ghost {
  color: var(--hp-ink) !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-ink) !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
}
body .resources-v2-btn.ghost:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
  background: var(--hp-paper) !important;
}
body .resources-v2-btn.primary,
body .resources-v2-btn.gold {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
}
body .resources-v2-btn.primary:hover,
body .resources-v2-btn.gold:hover {
  background: var(--hp-forest-deep) !important;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}
body .resources-v2-btn.danger {
  color: var(--hp-danger) !important;
  border: 1.5px solid var(--hp-danger) !important;
  background: var(--hp-cream-elev) !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
}
body .resources-v2-btn.danger:hover {
  background: rgba(156,42,42,0.10) !important;
  border-color: #771818 !important;
  color: #771818 !important;
}
body .resources-v2-icon-btn {
  color: var(--hp-ink-2) !important;
  background: transparent !important;
  border-radius: 10px !important;
}
body .resources-v2-icon-btn:hover {
  background: var(--hp-chartreuse) !important;
  color: var(--hp-forest-deep) !important;
}
body .resources-v2-drawer-body { background: var(--hp-cream-elev) !important; }
body .resources-v2-drawer-hero { border-bottom: 1.5px solid var(--hp-hair) !important; }
body .resources-v2-drawer-cover {
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 14px !important;
}
body .resources-v2-drawer-title {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 36px !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
}
body .resources-v2-drawer-title:focus { background: rgba(201,242,94,0.20) !important; }
body .resources-v2-meta-pill {
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
}
body .resources-v2-meta-pill svg { color: var(--hp-forest) !important; }
body .resources-v2-section h4 {
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
}
body .resources-v2-field {
  background: var(--hp-cream) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-size: 13px !important;
}
body .resources-v2-field a {
  color: var(--hp-forest) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-color: var(--hp-chartreuse) !important;
  text-decoration-thickness: 2px !important;
}
body .resources-v2-field a:hover {
  color: var(--hp-forest-deep) !important;
  background: rgba(201,242,94,0.18) !important;
}
body .resources-v2-field svg { color: var(--hp-forest) !important; }
body .resources-v2-iframe-wrap {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 14px !important;
}


/* ============================================================================
   A2.10 — ONBOARDING FLOW section
   ========================================================================= */
body #onboardingHubView {
  background: var(--hp-cream) !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
}
body #onboardingHubView::before {
  content: "VOL. 03 · ONBOARDING FLOWS";
  display: block;
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  color: var(--hp-muted) !important;
  padding: 18px 8px 8px !important;
}
body #onboardingHubView .hub-head {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
  box-shadow: var(--hp-shadow-card) !important;
}
body #onboardingHubView .hub-head .search,
body #onboardingHubView #onboardingHubSearch {
  font-family: var(--hp-body) !important;
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  color: var(--hp-ink) !important;
  font-size: 13px !important;
  flex: 1 1 320px !important;
}
body #onboardingHubView .hub-head .search::placeholder { color: var(--hp-muted) !important; }
body #onboardingHubView .hub-head .search:focus {
  outline: none !important;
  border-color: var(--hp-forest) !important;
  box-shadow: 0 0 0 3px rgba(201,242,94,0.35) !important;
}
body #onboardingHubView .hub-head .hub-count,
body #onboardingHubView #onboardingHubCount {
  font-family: var(--hp-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
}

/* Onboarding hub table */
body #onboardingHubView .panel {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 18px !important;
  box-shadow: var(--hp-shadow-card) !important;
  overflow: hidden !important;
}
body #onboardingHubView .onboarding-hub-table {
  background: transparent !important;
  font-family: var(--hp-body) !important;
  border-collapse: collapse !important;
  width: 100% !important;
}
body #onboardingHubView .onboarding-hub-table th {
  background: var(--hp-cream) !important;
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: var(--hp-muted) !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  text-align: left !important;
  padding: 14px 18px !important;
}
body #onboardingHubView .onboarding-hub-table td {
  background: var(--hp-cream-elev) !important;
  border-bottom: 1px solid var(--hp-hair) !important;
  padding: 16px 18px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-size: 13.5px !important;
  vertical-align: middle !important;
}
body #onboardingHubView .onboarding-hub-table tbody tr {
  cursor: pointer !important;
  transition: background .12s var(--hp-ease) !important;
}
body #onboardingHubView .onboarding-hub-table tbody tr:hover td {
  background: rgba(201,242,94,0.10) !important;
}
body #onboardingHubView .onboarding-hub-table td strong {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.005em !important;
}
body #onboardingHubView .onboarding-hub-table .muted {
  color: var(--hp-muted) !important;
  font-size: 12px !important;
}

/* Flow icon row */
body .onboarding-flow-icons {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
body .onboarding-flow-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  background: var(--hp-cream) !important;
  border: 1.5px solid var(--hp-hair) !important;
  color: var(--hp-forest) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 14px !important;
}

/* Row-action menu button */
body #onboardingHubView .menu-cell,
body #onboardingHubView .menu-btn {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 10px !important;
  color: var(--hp-ink-2) !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
body #onboardingHubView .menu-btn:hover {
  background: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest-deep) !important;
  color: var(--hp-forest-deep) !important;
}

/* Empty state for rows tbody */
body #onboardingHubRows:empty::before {
  content: "ONBOARDING · EMPTY";
  display: block;
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  color: var(--hp-muted) !important;
  text-align: center !important;
  padding: 60px 20px 6px !important;
}
body #onboardingHubRows:empty::after {
  content: "No flows yet.";
  display: block;
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  color: var(--hp-ink) !important;
  text-align: center !important;
  padding: 0 20px 60px !important;
}


/* ============================================================================
   A2.11 — ONBOARDING · Add / Edit Flow modal interior
   ========================================================================= */
body #addOnboardingFlowModal.modal .modal-box,
body #editOnboardingFlowModal.modal .modal-box,
body #addOnboardingFlowModal.modal article.modal-box,
body #editOnboardingFlowModal.modal article.modal-box {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 18px !important;
  box-shadow: 6px 8px 0 var(--hp-forest-deep), 0 24px 60px rgba(20,40,34,0.22) !important;
  font-family: var(--hp-body) !important;
  color: var(--hp-ink) !important;
  padding: 22px !important;
}
body #addOnboardingFlowModal strong,
body #editOnboardingFlowModal strong,
body #editOnboardingFlowModal #onboardingFlowEditTitle {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 28px !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.015em !important;
}
body #addOnboardingFlowModal label,
body #editOnboardingFlowModal label {
  font-family: var(--hp-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
}
body #addOnboardingFlowModal input.search,
body #editOnboardingFlowModal input.search,
body #addOnboardingFlowModal select.search,
body #editOnboardingFlowModal select.search,
body #addOnboardingFlowModal textarea.search,
body #editOnboardingFlowModal textarea.search {
  font-family: var(--hp-body) !important;
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  font-size: 13px !important;
  padding: 11px 14px !important;
}
body #addOnboardingFlowModal input.search:focus,
body #editOnboardingFlowModal input.search:focus,
body #addOnboardingFlowModal select.search:focus,
body #editOnboardingFlowModal select.search:focus,
body #addOnboardingFlowModal textarea.search:focus,
body #editOnboardingFlowModal textarea.search:focus {
  outline: none !important;
  border-color: var(--hp-forest) !important;
  box-shadow: 0 0 0 3px rgba(201,242,94,0.35) !important;
}

/* Flow-field "step" grid — the wizard's selectors of automations */
body .onboarding-field-grid {
  display: grid !important;
  gap: 12px !important;
  margin-top: 14px !important;
}
body .onboarding-field-row {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 12px 14px !important;
  background: var(--hp-cream) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 14px !important;
  transition: border-color .12s var(--hp-ease), background .12s var(--hp-ease) !important;
}
body .onboarding-field-row:hover {
  border-color: var(--hp-forest) !important;
  background: var(--hp-cream-elev) !important;
}
body .onboarding-field-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 16px !important;
  margin-top: 18px !important;
  box-shadow: 2px 2px 0 var(--hp-forest-deep) !important;
}
body .onboarding-field-label {
  font-family: var(--hp-body) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
}
body .onboarding-field-select {
  font-family: var(--hp-body) !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
}

/* Subtabs inside edit modal */
body #editOnboardingFlowModal .subtabs {
  display: flex !important;
  gap: 8px !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  margin-bottom: 14px !important;
  padding-bottom: 0 !important;
}
body #editOnboardingFlowModal .subtab {
  font-family: var(--hp-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 8px 14px !important;
  margin-bottom: -1.5px !important;
}
body #editOnboardingFlowModal .subtab:hover { border-color: var(--hp-forest) !important; }
body #editOnboardingFlowModal .subtab.active {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest-deep) !important;
}
body #editOnboardingFlowModal .subtab.inert {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  font-style: italic !important;
}


/* ============================================================================
   A2.12 — Catch-all `.modal-box` + `.subtab` (any leftover modal we missed)
   ========================================================================= */
body .modal { background: rgba(20,40,34,0.42) !important; }
body .modal-box {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 18px !important;
  box-shadow: 6px 8px 0 var(--hp-forest-deep), 0 24px 60px rgba(20,40,34,0.22) !important;
  font-family: var(--hp-body) !important;
  color: var(--hp-ink) !important;
}
body .subtab {
  font-family: var(--hp-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
}
body .subtab:hover { border-color: var(--hp-forest) !important; }
body .subtab.active {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest-deep) !important;
}

/* Inputs inside hub views + every modal */
body #formsHubView .search,
body #habitsHubView .search,
body #resourcesHubView .search,
body #onboardingHubView .search,
body .modal-box .search,
body .modal-box input[type="text"],
body .modal-box input[type="email"],
body .modal-box input[type="number"],
body .modal-box input[type="date"],
body .modal-box select,
body .modal-box textarea {
  font-family: var(--hp-body) !important;
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  font-size: 13px !important;
  padding: 11px 14px !important;
}
body .modal-box input::placeholder,
body .modal-box textarea::placeholder { color: var(--hp-muted) !important; }
body .modal-box input:focus,
body .modal-box select:focus,
body .modal-box textarea:focus {
  outline: none !important;
  border-color: var(--hp-forest) !important;
  box-shadow: 0 0 0 3px rgba(201,242,94,0.35) !important;
}

/* Catch-all buttons inside modals + onboarding hub head */
body .modal-box .primary-btn,
body #onboardingHubView .primary-btn {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  border-radius: 12px !important;
  font-family: var(--hp-body) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 10px 16px !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease), background .12s var(--hp-ease) !important;
  cursor: pointer !important;
}
body .modal-box .primary-btn:hover,
body #onboardingHubView .primary-btn:hover {
  background: var(--hp-forest-deep) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}
body .modal-box .ghost-btn {
  background: var(--hp-cream-elev) !important;
  color: var(--hp-ink) !important;
  border: 1.5px solid var(--hp-ink) !important;
  border-radius: 12px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease) !important;
  cursor: pointer !important;
}
body .modal-box .ghost-btn:hover {
  background: var(--hp-paper) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}
body .modal-box .danger-btn {
  background: var(--hp-cream-elev) !important;
  color: var(--hp-danger) !important;
  border: 1.5px solid var(--hp-danger) !important;
  border-radius: 12px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
}
body .modal-box .danger-btn:hover {
  background: rgba(156,42,42,0.10) !important;
  color: #771818 !important;
  border-color: #771818 !important;
}
body .modal-box .muted { color: var(--hp-muted) !important; font-family: var(--hp-body) !important; }


/* ============================================================================
   A2.13 — Final no-bleed sweep
   ========================================================================= */
body [class*="forms-v2-"][class*="-gold"],
body [class*="resources-v2-"][class*="-gold"] { color: var(--hp-forest) !important; }
body .forms-v2-drawer,
body .habits-v2-drawer,
body .resources-v2-drawer { scrollbar-color: var(--hp-hair) var(--hp-cream-elev); }


/* ============================================================================
   A2.14 — Patches caught by self-audit screenshots
   ----------------------------------------------------------------------------
   - `.habits-v2-btn.primary` hardcoded #C9A96E in admin.html — restyle to forest sticker
   - `.onboarding-flow-icon.<modifier>` per-color rules outranked my generic
     `.onboarding-flow-icon` — translate every modifier to a Hipster duo
   ========================================================================= */
body .habits-v2-btn {
  font-family: var(--hp-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-ink) !important;
  color: var(--hp-ink) !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease), background .12s var(--hp-ease) !important;
  cursor: pointer !important;
}
body .habits-v2-btn:hover {
  background: var(--hp-paper) !important;
  border-color: var(--hp-forest-deep) !important;
  color: var(--hp-ink) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}
body .habits-v2-btn.primary {
  background: var(--hp-forest) !important;
  border-color: var(--hp-forest-deep) !important;
  color: var(--hp-chartreuse) !important;
}
body .habits-v2-btn.primary:hover {
  background: var(--hp-forest-deep) !important;
  border-color: var(--hp-forest-deep) !important;
  color: var(--hp-chartreuse) !important;
}
body .habits-v2-btn.danger {
  background: var(--hp-cream-elev) !important;
  color: var(--hp-danger) !important;
  border-color: var(--hp-danger) !important;
}
body .habits-v2-btn.danger:hover {
  background: rgba(156,42,42,0.10) !important;
  color: #771818 !important;
  border-color: #771818 !important;
}
body .habits-v2-drawer-foot {
  background: var(--hp-cream) !important;
  border-top: 1.5px solid var(--hp-hair) !important;
  padding: 16px 28px !important;
}

/* Onboarding flow icon palette unification (9 modifiers → forest+cream system) */
body .onboarding-flow-icon.client_tags,
body .onboarding-flow-icon.questionnaires,
body .onboarding-flow-icon.checkins,
body .onboarding-flow-icon.workout_programs,
body .onboarding-flow-icon.nutrition_plans,
body .onboarding-flow-icon.habits,
body .onboarding-flow-icon.metrics,
body .onboarding-flow-icon.resources,
body .onboarding-flow-icon.resource_collections {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  color: var(--hp-forest) !important;
}
body .onboarding-flow-icon.questionnaires,
body .onboarding-flow-icon.habits,
body .onboarding-flow-icon.workout_programs {
  background: var(--hp-forest) !important;
  border-color: var(--hp-forest-deep) !important;
  color: var(--hp-chartreuse) !important;
}


/* ===== END · PHASE 2 · AGENT A2 ===== */


/* =================================================================================
   ========================================================================== A3 ===
   PHASE 2 · AGENT A3 · TRAINING (BIGGEST SECTION)
   ---------------------------------------------------------------------------------
   Scope owned: pages/admin.html Training section + program/workout/exercise builders.
   View: #trainingHubView   (sub-tabs: Programs / Workouts / Exercises)
   Drawers: #trainingProgramSheet (.tpb-dialog)
            #trainingWorkoutSheet (.tw-workout-dialog)
            #trainingExerciseSheet (.te-exercise-dialog)
   Shared chassis: .trainhub-drawer (overlay) · .thv2-side (stepper rail)
                   .te-step-card · .stepflow-foot · .sheet-actions
   Owner: rebrand-designer (A3) — RULE 44 no palette fusion.
   ============================================================================== */


/* ============================================================================
   A3 · 1 — TRAINING HUB (#trainingHubView)
   ============================================================================ */

body #trainingHubView { padding: 24px 28px 36px !important; }

/* magazine eyebrow above the hero (editorial signature) */
body #trainingHubView::before {
  content: "Vol. 03 · Training Annual";
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hp-body);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hp-muted);
  margin: 0 0 14px;
}

/* HERO — outer wrapper that holds stats + tabs + toolbar + content panel */
body #trainingHubView .trainhub-v2-hero {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 22px !important;
  box-shadow: 6px 8px 0 rgba(20,40,34,0.05) !important;
  padding: 24px 26px 26px !important;
  overflow: hidden;
}

/* STATS ROW — 3-stat magazine ledger */
body #trainingHubView .trainhub-v2-stats {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 6px 4px 22px !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  margin-bottom: 6px !important;
}
body #trainingHubView .trainhub-v2-stat {
  flex: 0 0 auto !important;
  padding: 0 32px 0 0 !important;
  margin-right: 32px !important;
  border-right: 1.5px solid var(--hp-hair) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
body #trainingHubView .trainhub-v2-stat:last-child {
  border-right: 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}
body #trainingHubView .trainhub-v2-stat .num {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 42px !important;
  line-height: 1.0 !important;
  letter-spacing: -0.035em !important;
  color: var(--hp-ink) !important;
  font-variation-settings: "opsz" 144 !important;
}
body #trainingHubView .trainhub-v2-stat .lbl {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
  margin-top: 6px !important;
}

/* HEAD + TABS — Programs / Workouts / Exercises */
body #trainingHubView .trainhub-head { padding: 14px 4px 0 !important; }
body #trainingHubView .trainhub-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 4px 14px !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  margin-bottom: 18px !important;
}
body #trainingHubView .trainhub-tab {
  background: transparent !important;
  border: 0 !important;
  padding: 10px 16px 12px !important;
  margin: 0 !important;
  color: var(--hp-ink-2) !important;
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.005em !important;
  border-radius: 0 !important;
  position: relative;
  cursor: pointer !important;
  transition: color .14s var(--hp-ease) !important;
}
body #trainingHubView .trainhub-tab:hover { color: var(--hp-ink) !important; }
body #trainingHubView .trainhub-tab.active {
  color: var(--hp-ink) !important;
  font-weight: 700 !important;
  padding-left: 22px !important;
}
body #trainingHubView .trainhub-tab.active::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px;
  bottom: -1.5px;
  height: 2.5px;
  background: var(--hp-forest);
  border-radius: 2px;
}
body #trainingHubView .trainhub-tab.active::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hp-chartreuse);
  box-shadow: 0 0 0 2px rgba(201,242,94,0.20);
}

/* TOOLBAR — search input row */
body #trainingHubView .trainhub-v2-toolbar { padding: 0 4px 16px !important; }
body #trainingHubView .trainhub-v2-toolbar .search,
body #trainingHubView #trainingHubSearch {
  height: 44px !important;
  padding: 0 18px !important;
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  width: 100% !important;
  outline: 0 !important;
  transition: border-color .14s var(--hp-ease), background .14s var(--hp-ease) !important;
}
body #trainingHubView .trainhub-v2-toolbar .search::placeholder,
body #trainingHubView #trainingHubSearch::placeholder {
  color: var(--hp-muted) !important;
  font-weight: 500 !important;
}
body #trainingHubView .trainhub-v2-toolbar .search:focus,
body #trainingHubView #trainingHubSearch:focus {
  border-color: var(--hp-forest) !important;
  background: var(--hp-cream-elev) !important;
}

/* CONTENT GRID — the .panel wrapper kills extra chrome */
body #trainingHubView #trainingHubContent { padding: 4px 4px 4px !important; }
body #trainingHubView .panel { background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* ---- CARDS — .training-media-row (programs + workouts + exercises) ------- */
body #trainingHubView .training-media-row {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 4px 5px 0 rgba(20,40,34,0.04) !important;
  transition: transform .14s var(--hp-ease), box-shadow .14s var(--hp-ease), border-color .14s var(--hp-ease) !important;
}
body #trainingHubView .training-media-row:hover {
  transform: translate(-1px,-1px) !important;
  box-shadow: 5px 6px 0 var(--hp-forest-deep) !important;
  border-color: var(--hp-forest) !important;
}

/* gradient cover (forest gradient, chartreuse "WORKOUT/EXERCISE/PROGRAM" text) */
body #trainingHubView .training-media-thumb {
  background: linear-gradient(135deg, var(--hp-forest) 0%, var(--hp-forest-deep) 100%) !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  position: relative;
  min-height: 150px !important;
}
body #trainingHubView .training-media-thumb.with-cover-text { padding: 18px !important; }
body #trainingHubView .training-cover-text {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  color: var(--hp-chartreuse) !important;
  font-size: 28px !important;
  line-height: 1.0 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  font-variation-settings: "opsz" 144 !important;
  text-shadow: 0 2px 0 rgba(20,40,34,0.20);
}

/* card body — title + meta */
body #trainingHubView .training-media-body {
  padding: 16px 18px 18px !important;
  background: var(--hp-cream-elev) !important;
}
body #trainingHubView .training-media-body .row-title {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 18px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em !important;
  color: var(--hp-ink) !important;
  font-variation-settings: "opsz" 144 !important;
  margin-bottom: 6px !important;
}
body #trainingHubView .training-media-body .row-meta {
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  color: var(--hp-muted) !important;
  letter-spacing: 0.02em !important;
  margin-top: 4px !important;
}

/* small "Exercise" badge on the exercise tab */
body #trainingHubView .badge,
body #trainingHubView .badge.gray {
  display: inline-block !important;
  padding: 4px 10px !important;
  background: var(--hp-paper) !important;
  border: 1px solid var(--hp-hair) !important;
  border-radius: 999px !important;
  color: var(--hp-ink-2) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 9.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

/* + Create new — dashed sticker tile */
body #trainingHubView .thv2-create-card {
  background: var(--hp-paper) !important;
  border: 2px dashed var(--hp-forest) !important;
  border-radius: 16px !important;
  min-height: 232px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--hp-forest) !important;
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 22px !important;
  letter-spacing: -0.02em !important;
  font-variation-settings: "opsz" 144 !important;
  transition: background .14s var(--hp-ease), border-color .14s var(--hp-ease), transform .14s var(--hp-ease) !important;
  box-shadow: none !important;
}
body #trainingHubView .thv2-create-card:hover {
  background: var(--hp-cream-elev) !important;
  border-color: var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}


/* ============================================================================
   A3 · 2 — DRAWER CHASSIS  (shared by program / workout / exercise sheets)
   ============================================================================ */

/* Scrim — the dim layer behind the open drawer */
body .modal.trainhub-drawer {
  background: rgba(42, 26, 15, 0.32) !important;
  backdrop-filter: blur(2px);
}

/* Sheet container — visuals only; preserve production's layout primitives
   (display:flex flex-direction:row with grid-template-columns hint). The
   .stepflow-foot is a sibling of .thv2-side and .tpb-cols; we position it
   absolutely so it doesn't compete with .tpb-cols for inline space. */
body .modal.trainhub-drawer .tpb-dialog,
body .modal.trainhub-drawer .tw-workout-dialog,
body .modal.trainhub-drawer .te-exercise-dialog {
  background: var(--hp-cream-elev) !important;
  border-left: 1.5px solid var(--hp-hair) !important;
  box-shadow: -8px 0 0 rgba(20,40,34,0.06) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Close X button */
body .modal.trainhub-drawer .sheet-close {
  position: absolute !important;
  top: 18px !important; right: 22px !important;
  width: 36px !important; height: 36px !important;
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 10px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--hp-shadow-sticker-sm) !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease) !important;
  z-index: 5 !important;
}
body .modal.trainhub-drawer .sheet-close:hover {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}

/* --------- LEFT RAIL — .thv2-side -----------------------------------------
   width preserves production (160px from grid-template-columns hint). We only
   restyle background + padding + gap + border. */
body .modal.trainhub-drawer .thv2-side {
  background: var(--hp-cream) !important;
  border-right: 1.5px solid var(--hp-hair) !important;
  padding: 24px 16px !important;
  gap: 10px !important;
}

/* "Program builder / Workout builder / Exercise builder" headline (h4) */
body .modal.trainhub-drawer .thv2-side > h4,
body .modal.trainhub-drawer .thv2-side > h2,
body .modal.trainhub-drawer .thv2-side > h3 {
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 18px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--hp-ink) !important;
  font-variation-settings: "opsz" 144 !important;
  padding: 0 0 10px !important;
  margin: 0 0 6px !important;
  border-bottom: 1.5px dashed var(--hp-hair) !important;
}

/* Stepper items — "1 Details", "2 Cover", "3 Schedule" etc. */
body .modal.trainhub-drawer .thv2-step {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--hp-ink-2) !important;
  cursor: pointer !important;
  position: relative;
  transition: background .14s var(--hp-ease), color .14s var(--hp-ease) !important;
}
body .modal.trainhub-drawer .thv2-step:hover {
  background: rgba(31,58,46,0.05) !important;
  color: var(--hp-ink) !important;
}
body .modal.trainhub-drawer .thv2-step .dot {
  width: 22px !important; height: 22px !important;
  border-radius: 50% !important;
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 11.5px !important;
  color: var(--hp-ink-2) !important;
  flex-shrink: 0 !important;
  font-variation-settings: "opsz" 144 !important;
}
body .modal.trainhub-drawer .thv2-step.is-step-active {
  background: var(--hp-paper) !important;
  color: var(--hp-ink) !important;
  font-weight: 700 !important;
  box-shadow:
    inset 4px 0 0 var(--hp-forest),
    2px 2px 0 rgba(20,40,34,0.08) !important;
  border: 1.5px solid var(--hp-hair) !important;
  padding-left: 14px !important;
}
body .modal.trainhub-drawer .thv2-step.is-step-active .dot {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest-deep) !important;
}
body .modal.trainhub-drawer .thv2-step .sub {
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  color: var(--hp-muted) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  display: block !important;
  margin-top: 2px !important;
}

/* --------- COLUMN AREA — .tpb-cols / .te-cols ----------------------------- */
body .modal.trainhub-drawer .tpb-cols,
body .modal.trainhub-drawer .te-cols {
  background: var(--hp-cream-elev) !important;
  /* leave display/flex from production; just visuals */
}
body .modal.trainhub-drawer .tpb-col,
body .modal.trainhub-drawer .te-col {
  padding: 26px 32px 80px !important;  /* bottom-padding for absolute stepflow-foot */
  overflow-y: auto !important;
}

/* Step header pill — "STEP 1 · DETAILS" + the floating "Name · Level" legend.
   Right padding leaves room for the absolute-positioned .sheet-close X (36px + 22px gap). */
body .modal.trainhub-drawer .te-step-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 18px !important;
  padding: 0 70px 12px 0 !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
}
body .modal.trainhub-drawer .te-step-label,
body .modal.trainhub-drawer .te-step-card > .te-step-label {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
}

/* "Name · Level" / "Description · Muscle" legend pills */
body .modal.trainhub-drawer .te-step-head > *:last-child {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
  padding: 5px 12px !important;
  background: var(--hp-paper) !important;
  border: 1px solid var(--hp-hair) !important;
  border-radius: 999px !important;
}

/* Step card body */
body .modal.trainhub-drawer .te-step-card {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Fields wrapper */
body .modal.trainhub-drawer .te-fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 0 !important;
}

/* Inputs / selects */
body .modal.trainhub-drawer .field,
body .modal.trainhub-drawer input[type=text].field,
body .modal.trainhub-drawer input.field {
  width: 100% !important;
  height: 46px !important;
  padding: 0 18px !important;
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  outline: 0 !important;
  transition: border-color .14s var(--hp-ease), background .14s var(--hp-ease) !important;
}
body .modal.trainhub-drawer .field::placeholder,
body .modal.trainhub-drawer input.field::placeholder {
  color: var(--hp-muted) !important;
}
body .modal.trainhub-drawer .field:focus,
body .modal.trainhub-drawer input.field:focus,
body .modal.trainhub-drawer .select:focus {
  border-color: var(--hp-forest) !important;
  background: var(--hp-cream-elev) !important;
}

/* SELECT — Level dropdown */
body .modal.trainhub-drawer .select,
body .modal.trainhub-drawer select.field,
body .modal.trainhub-drawer select.select,
body .modal.trainhub-drawer select {
  width: 100% !important;
  height: 46px !important;
  padding: 0 38px 0 18px !important;
  background-color: var(--hp-paper) !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--hp-ink) 50%),
                    linear-gradient(135deg, var(--hp-ink) 50%, transparent 50%) !important;
  background-position: calc(100% - 18px) center, calc(100% - 13px) center !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  outline: 0 !important;
  cursor: pointer !important;
}

/* Textareas */
body .modal.trainhub-drawer textarea.field,
body .modal.trainhub-drawer textarea {
  width: 100% !important;
  min-height: 120px !important;
  padding: 12px 18px !important;
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  outline: 0 !important;
  resize: vertical !important;
  transition: border-color .14s var(--hp-ease) !important;
}
body .modal.trainhub-drawer textarea:focus {
  border-color: var(--hp-forest) !important;
  background: var(--hp-cream-elev) !important;
}

/* --------- UPLOAD ROW + BANK RAIL (cover library) ------------------------- */
body .modal.trainhub-drawer .te-upload-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 0 12px !important;
}
body .modal.trainhub-drawer .te-upload-row .btn,
body .modal.trainhub-drawer .te-upload-row button {
  height: 42px !important;
  padding: 0 18px !important;
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  border-radius: 12px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: var(--hp-shadow-sticker-sm) !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease) !important;
}
body .modal.trainhub-drawer .te-upload-row .btn:hover,
body .modal.trainhub-drawer .te-upload-row button:hover {
  background: var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}
body .modal.trainhub-drawer .te-upload-row .sub,
body .modal.trainhub-drawer .te-upload-row > span:not(.btn),
body .modal.trainhub-drawer .te-upload-row > div:not(.btn) {
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  color: var(--hp-muted) !important;
  font-style: italic !important;
}

body .modal.trainhub-drawer .te-bank-rail {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 4px 0 16px !important;
  border-bottom: 1.5px dashed var(--hp-hair) !important;
  margin-bottom: 16px !important;
}
body .modal.trainhub-drawer .te-bank-rail > * {
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1.5px solid var(--hp-hair) !important;
  transition: transform .12s var(--hp-ease), border-color .12s var(--hp-ease), box-shadow .12s var(--hp-ease) !important;
}
body .modal.trainhub-drawer .te-bank-rail > *:hover {
  border-color: var(--hp-forest) !important;
  transform: translate(-1px,-1px) !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
}

/* --------- COMPOSER (live preview) ---------------------------------------- */
body .modal.trainhub-drawer .te-composer {
  position: relative !important;
  background: linear-gradient(135deg, var(--hp-forest) 0%, var(--hp-forest-deep) 100%) !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  overflow: hidden !important;
  margin: 8px 0 16px !important;
  min-height: 220px !important;
  box-shadow: var(--hp-shadow-sticker) !important;
}
body .modal.trainhub-drawer .te-composer-image,
body .modal.trainhub-drawer #trainingProgramComposerImage,
body .modal.trainhub-drawer #trainingExerciseComposerImage {
  width: 100% !important;
  display: block !important;
  border-radius: 14px !important;
}
body .modal.trainhub-drawer .te-composer-text,
body .modal.trainhub-drawer #trainingProgramComposerText,
body .modal.trainhub-drawer #trainingExerciseComposerText {
  position: absolute !important;
  inset: auto 18px 18px 18px !important;
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  color: var(--hp-chartreuse) !important;
  font-size: 30px !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  font-variation-settings: "opsz" 144 !important;
  text-shadow: 0 2px 0 rgba(20,40,34,0.30);
  pointer-events: none;
}

/* --------- LOCK GRID — "Pic Fixed / Text Fixed / Done" rows --------------- */
body .modal.trainhub-drawer .te-lock-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 4px 0 12px !important;
}
body .modal.trainhub-drawer .te-lock-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--hp-ink-2) !important;
  transition: border-color .14s var(--hp-ease), background .14s var(--hp-ease) !important;
}
body .modal.trainhub-drawer .te-lock-item:hover {
  border-color: var(--hp-forest) !important;
  background: var(--hp-cream-elev) !important;
}
body .modal.trainhub-drawer .te-lock-item.locked {
  border-color: var(--hp-forest) !important;
  background: rgba(31,58,46,0.04) !important;
  color: var(--hp-ink) !important;
  font-weight: 700 !important;
}

/* Checkbox at right of each lock item */
body .modal.trainhub-drawer .te-lock-item input[type=checkbox] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important; height: 20px !important;
  border-radius: 6px !important;
  border: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-paper) !important;
  cursor: pointer !important;
  transition: background .14s var(--hp-ease), border-color .14s var(--hp-ease) !important;
  position: relative !important;
}
body .modal.trainhub-drawer .te-lock-item input[type=checkbox]:checked {
  background: var(--hp-forest) !important;
  border-color: var(--hp-forest-deep) !important;
}
body .modal.trainhub-drawer .te-lock-item input[type=checkbox]:checked::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hp-chartreuse);
  font-weight: 900;
  font-size: 12px;
}

/* --------- SHEET ACTIONS (Reset Draft · Save Program) --------------------- */
body .modal.trainhub-drawer .sheet-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 14px 32px !important;
  background: var(--hp-paper) !important;
  border-top: 1.5px solid var(--hp-hair) !important;
}
body .modal.trainhub-drawer .sheet-actions .btn,
body .modal.trainhub-drawer .sheet-actions button {
  height: 42px !important;
  padding: 0 18px !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  color: var(--hp-ink-2) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .14s var(--hp-ease), border-color .14s var(--hp-ease), color .14s var(--hp-ease) !important;
}
body .modal.trainhub-drawer .sheet-actions .btn:hover,
body .modal.trainhub-drawer .sheet-actions button:hover {
  background: var(--hp-paper) !important;
  border-color: var(--hp-ink) !important;
  color: var(--hp-ink) !important;
}
body .modal.trainhub-drawer .sheet-actions .btn-primary {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  box-shadow: var(--hp-shadow-sticker-sm) !important;
}
body .modal.trainhub-drawer .sheet-actions .btn-primary:hover {
  background: var(--hp-forest-deep) !important;
  color: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}

/* --------- STEPFLOW FOOT (Back · Step 1 of 3 · Continue) ------------------
   The .stepflow-foot is a SIBLING of .thv2-side + .tpb-cols inside .tpb-dialog;
   in production it sits at the bottom-LEFT under the rail. We pin it absolutely
   so it doesn't steal flex width from the content column. */
body .modal.trainhub-drawer .stepflow-foot {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 22px !important;
  background: var(--hp-cream) !important;
  border-top: 1.5px solid var(--hp-hair) !important;
  z-index: 3 !important;
}

body .modal.trainhub-drawer .sf-back {
  background: transparent !important;
  border: 0 !important;
  padding: 6px 10px !important;
  color: var(--hp-ink-2) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: background .14s var(--hp-ease), color .14s var(--hp-ease) !important;
}
body .modal.trainhub-drawer .sf-back:hover {
  background: rgba(31,58,46,0.06) !important;
  color: var(--hp-ink) !important;
}

body .modal.trainhub-drawer .sf-pos {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 9.5px !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
  text-align: center !important;
  flex: 0 0 auto !important;
}
body .modal.trainhub-drawer .sf-pos strong {
  display: block !important;
  font-family: var(--hp-display) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: 15px !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.01em !important;
  margin-top: 2px !important;
  font-variation-settings: "opsz" 144 !important;
}

body .modal.trainhub-drawer .sf-next {
  height: 40px !important;
  padding: 0 18px !important;
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  border-radius: 10px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: var(--hp-shadow-sticker-sm) !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease), background .14s var(--hp-ease) !important;
}
body .modal.trainhub-drawer .sf-next:hover {
  background: var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}
body .modal.trainhub-drawer .sf-next:active {
  transform: translate(2px,2px) !important;
  box-shadow: 1px 1px 0 var(--hp-forest-deep) !important;
}

/* Inputs that are id'd directly (catch any not classed .field) ------------- */
body .modal.trainhub-drawer input[type=text],
body .modal.trainhub-drawer input[type=number],
body .modal.trainhub-drawer input[type=email] {
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  height: 46px !important;
  padding: 0 18px !important;
  outline: 0 !important;
}
body .modal.trainhub-drawer input[type=text]:focus,
body .modal.trainhub-drawer input[type=number]:focus,
body .modal.trainhub-drawer input[type=email]:focus {
  border-color: var(--hp-forest) !important;
  background: var(--hp-cream-elev) !important;
}

/* Form labels */
body .modal.trainhub-drawer label {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
  margin-bottom: 6px !important;
  display: block !important;
}


/* ============================================================================
   A3 · 3 — RESPONSIVE / EDGE CASES
   ============================================================================ */
@media (max-width: 1180px) {
  body #trainingHubView { padding: 20px 18px 28px !important; }
  body #trainingHubView .trainhub-v2-hero { padding: 20px 18px !important; }
  body #trainingHubView .trainhub-v2-stat .num { font-size: 34px !important; }
  body .modal.trainhub-drawer .thv2-side { width: 180px !important; min-width: 180px !important; padding: 22px 16px !important; }
  body .modal.trainhub-drawer .tpb-col,
  body .modal.trainhub-drawer .te-col { padding: 22px 22px 16px !important; }
}


/* ===== END · PHASE 2 · AGENT A3 ===== */


/* ============================================================================
   ============================================================================
   PHASE 2 · AGENT A4 · NUTRITION
   ----------------------------------------------------------------------------
   Scope (per operator no-fusion brief — Rule 44):
     · Hub shell + 3 sub-tabs (Preset plans / Recipes / Foods)
     · Filter chip row (changes per sub-tab)
     · Preset Plan cards (.sc-preset) + macro bar + meals list
     · Recipe cards (.sc-recipe) with photo thumbnails + macros
     · Food category cards (.sc-foods-card) + grouped food rows
     · Preset detail overlay (#scdPresetOverlay / .scd-*)
   Wire-compat preserved: #nutritionHubView, #nutritionHubContent,
     #nutritionHubSearch, #nutritionHubQuickPresetBtn, every .sc-* class,
     every data-* attribute, every #scd* id. No JS bindings touched.
   Recon evidence: /tmp/admin-compare/A4/recon-*.png + audit.json
   ============================================================================
   ========================================================================= */


/* ===== A4 · Nutrition hub shell + page padding ===== */
body #nutritionHubView {
  padding: 22px 28px 40px !important;
  background: transparent !important;
}
body #nutritionHubView .sc-nut-shell {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

/* Magazine eyebrow above hub bar — matches Clients view treatment */
body #nutritionHubView::before {
  content: 'VOL. 01 · NUTRITION LIBRARY' !important;
  display: block !important;
  font-family: var(--hp-body) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
  padding: 6px 4px 10px !important;
  opacity: .9 !important;
}


/* ===== A4 · Top action bar (sub-tabs + search + add CTA) ===== */
body #nutritionHubView .sc-nut-bar {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 18px !important;
  box-shadow: 4px 5px 0 rgba(20,40,34,.05) !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Sub-tabs container (Preset plans / Recipes / Foods) */
body #nutritionHubView .sc-nut-tabs {
  display: inline-flex !important;
  gap: 4px !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

/* Individual sub-tab — Hipster pill */
body #nutritionHubView .sc-nut-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 16px !important;
  background: transparent !important;
  border: 1.5px solid transparent !important;
  border-radius: 999px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
  color: var(--hp-ink-2) !important;
  cursor: pointer !important;
  transition: background .14s var(--hp-ease), border-color .14s var(--hp-ease), color .14s var(--hp-ease) !important;
  text-transform: none !important;
}
body #nutritionHubView .sc-nut-tab:hover {
  background: var(--hp-paper) !important;
  border-color: var(--hp-hair) !important;
  color: var(--hp-ink) !important;
}
body #nutritionHubView .sc-nut-tab.active {
  background: var(--hp-forest) !important;
  border-color: var(--hp-forest) !important;
  color: var(--hp-forest-ink) !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
}
body #nutritionHubView .sc-nut-tab .ct {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  padding: 2px 7px !important;
  background: var(--hp-hair) !important;
  border-radius: 999px !important;
  color: var(--hp-ink-2) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
}
body #nutritionHubView .sc-nut-tab.active .ct {
  background: var(--hp-chartreuse) !important;
  color: var(--hp-forest-deep) !important;
}

/* Search input inside the bar */
body #nutritionHubView .sc-nut-search,
body #nutritionHubView input.sc-nut-search,
body #nutritionHubView #nutritionHubSearch {
  flex: 1 1 220px !important;
  min-width: 200px !important;
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--hp-ink) !important;
  outline: none !important;
  transition: border-color .14s var(--hp-ease), background .14s var(--hp-ease) !important;
}
body #nutritionHubView .sc-nut-search::placeholder,
body #nutritionHubView #nutritionHubSearch::placeholder {
  color: var(--hp-muted) !important;
  font-weight: 500 !important;
}
body #nutritionHubView .sc-nut-search:focus,
body #nutritionHubView #nutritionHubSearch:focus {
  border-color: var(--hp-forest) !important;
  background: var(--hp-paper) !important;
  box-shadow: 0 0 0 3px rgba(31,58,46,.10) !important;
}

/* "+ Preset" / quick-add CTA — sticker primary */
body #nutritionHubView .sc-nut-add,
body #nutritionHubView #nutritionHubQuickPresetBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 20px !important;
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease), background .14s var(--hp-ease) !important;
}
body #nutritionHubView .sc-nut-add:hover,
body #nutritionHubView #nutritionHubQuickPresetBtn:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 5px 5px 0 var(--hp-forest-deep) !important;
}
body #nutritionHubView .sc-nut-add:active,
body #nutritionHubView #nutritionHubQuickPresetBtn:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--hp-forest-deep) !important;
}


/* ===== A4 · Filter chip row (changes per sub-tab) ===== */
body #nutritionHubView .sc-nut-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 4px 0 2px !important;
  background: transparent !important;
}
body #nutritionHubView .sc-nut-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 14px !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 999px !important;
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.03em !important;
  color: var(--hp-ink-2) !important;
  cursor: pointer !important;
  transition: background .14s var(--hp-ease), border-color .14s var(--hp-ease), color .14s var(--hp-ease), box-shadow .12s var(--hp-ease) !important;
}
body #nutritionHubView .sc-nut-chip:hover {
  background: var(--hp-paper) !important;
  border-color: var(--hp-ink-2) !important;
  color: var(--hp-ink) !important;
}
body #nutritionHubView .sc-nut-chip.active {
  background: var(--hp-forest) !important;
  border-color: var(--hp-forest) !important;
  color: var(--hp-forest-ink) !important;
  box-shadow: 2px 2px 0 var(--hp-forest-deep) !important;
}


/* ===== A4 · Hub content container ===== */
body #nutritionHubView #nutritionHubContent {
  background: transparent !important;
  padding: 0 !important;
}


/* ===== A4 · Preset Plans grid ===== */
body #nutritionHubView .sc-nut-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  gap: 20px !important;
  background: transparent !important;
  padding: 4px 0 !important;
}

/* === Preset Plan card === */
body #nutritionHubView .sc-preset {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 22px 22px 18px !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 18px !important;
  box-shadow: 4px 5px 0 rgba(20,40,34,.05) !important;
  cursor: pointer !important;
  transition: transform .14s var(--hp-ease), box-shadow .14s var(--hp-ease), border-color .14s var(--hp-ease) !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
}
body #nutritionHubView .sc-preset:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 6px 7px 0 rgba(20,40,34,.08) !important;
  border-color: var(--hp-ink-2) !important;
}

/* Preset header block */
body #nutritionHubView .sc-preset .sc-preset-head {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Eyebrow goal label ("BODY RECOMPOSITION" etc.) — kills GOLD fusion */
body #nutritionHubView .sc-preset .sc-preset-goal {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

/* Preset name — Fraunces italic display */
body #nutritionHubView .sc-preset .sc-preset-name {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  line-height: 1.12 !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.005em !important;
  margin: 2px 0 0 !important;
}

/* Preset description */
body #nutritionHubView .sc-preset .sc-preset-desc {
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--hp-ink-2) !important;
  margin: 0 !important;
}

/* Calorie block (big Fraunces number + small-caps label) */
body #nutritionHubView .sc-preset .sc-preset-cal {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  padding: 12px 0 10px !important;
  border-top: 1.5px solid var(--hp-hair) !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  background: transparent !important;
}
body #nutritionHubView .sc-preset .sc-preset-cal-num {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 38px !important;
  line-height: 1 !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.01em !important;
}
body #nutritionHubView .sc-preset .sc-preset-cal-lbl {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
}

/* Macro bar (3-segment progress P/C/F) */
body #nutritionHubView .sc-macro-bar {
  display: flex !important;
  height: 8px !important;
  width: 100% !important;
  background: var(--hp-hair-2) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin: 2px 0 6px !important;
}
body #nutritionHubView .sc-macro-seg {
  height: 100% !important;
  transition: width .2s var(--hp-ease) !important;
}
body #nutritionHubView .sc-macro-seg.p { background: var(--hp-forest) !important; }
body #nutritionHubView .sc-macro-seg.c { background: var(--hp-chartreuse) !important; }
body #nutritionHubView .sc-macro-seg.f { background: var(--hp-ink-2) !important; }

/* Macro legend (P/C/F labels + colored dots) */
body #nutritionHubView .sc-macro-legend {
  display: flex !important;
  gap: 14px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
}
body #nutritionHubView .sc-macro-legend span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
body #nutritionHubView .sc-macro-dot {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
}
body #nutritionHubView .sc-macro-dot.p { background: var(--hp-forest) !important; }
body #nutritionHubView .sc-macro-dot.c { background: var(--hp-chartreuse) !important; }
body #nutritionHubView .sc-macro-dot.f { background: var(--hp-ink-2) !important; }

/* Preset meals stack (Breakfast / Lunch / Snack / Dinner rows) */
body #nutritionHubView .sc-preset .sc-preset-meals {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background: transparent !important;
  padding: 8px 0 4px !important;
  border-top: 1px dashed var(--hp-hair) !important;
}
body #nutritionHubView .sc-preset .sc-preset-meal {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  background: transparent !important;
  padding: 4px 0 !important;
  border-bottom: none !important;
}
body #nutritionHubView .sc-preset .sc-preset-meal .slot {
  flex: 0 0 78px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
}
body #nutritionHubView .sc-preset .sc-preset-meal .name {
  flex: 1 1 auto !important;
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1.32 !important;
  color: var(--hp-ink) !important;
}

/* Preset actions footer */
body #nutritionHubView .sc-preset .sc-preset-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 8px 0 0 !important;
  border-top: 1.5px solid var(--hp-hair) !important;
  background: transparent !important;
}
body #nutritionHubView .sc-preset .sc-preset-actions .meta {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
}
body #nutritionHubView .sc-preset-actions-btns,
body #nutritionHubView .sc-recipe .sc-preset-actions-btns {
  display: inline-flex !important;
  gap: 6px !important;
}

/* Icon buttons (Duplicate / Delete) — used on presets, recipes, foods, overlay */
body #nutritionHubView .sc-icon-btn,
body #scdPresetOverlay .sc-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 9px !important;
  color: var(--hp-ink-2) !important;
  cursor: pointer !important;
  transition: background .14s var(--hp-ease), border-color .14s var(--hp-ease), color .14s var(--hp-ease) !important;
}
body #nutritionHubView .sc-icon-btn:hover,
body #scdPresetOverlay .sc-icon-btn:hover {
  background: var(--hp-cream-elev) !important;
  border-color: var(--hp-ink-2) !important;
  color: var(--hp-ink) !important;
}
body #nutritionHubView .sc-icon-btn svg,
body #scdPresetOverlay .sc-icon-btn svg {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 1.8 !important;
}
body #nutritionHubView .sc-icon-btn.danger,
body #scdPresetOverlay .sc-icon-btn.danger { color: var(--hp-danger) !important; }
body #nutritionHubView .sc-icon-btn.danger:hover,
body #scdPresetOverlay .sc-icon-btn.danger:hover {
  background: rgba(156,42,42,.06) !important;
  border-color: var(--hp-danger) !important;
}


/* ===== A4 · Recipes library ===== */
body #nutritionHubView .sc-recipe {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 4px 5px 0 rgba(20,40,34,.05) !important;
  cursor: pointer !important;
  transition: transform .14s var(--hp-ease), box-shadow .14s var(--hp-ease), border-color .14s var(--hp-ease) !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
}
body #nutritionHubView .sc-recipe:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 6px 7px 0 rgba(20,40,34,.08) !important;
  border-color: var(--hp-ink-2) !important;
}

/* Recipe thumbnail block (photo + dark overlay + name) */
body #nutritionHubView .sc-recipe .sc-recipe-thumb {
  height: 160px !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 14px !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-hair-2) !important;
}
body #nutritionHubView .sc-recipe .sc-recipe-thumb-name {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.005em !important;
  color: #FEFEFE !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55) !important;
}

/* Recipe body */
body #nutritionHubView .sc-recipe .sc-recipe-body {
  padding: 14px 16px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: transparent !important;
}
body #nutritionHubView .sc-recipe .sc-recipe-name {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  line-height: 1.18 !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.005em !important;
}
body #nutritionHubView .sc-recipe .sc-recipe-desc {
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: var(--hp-ink-2) !important;
  margin: 0 !important;
}
body #nutritionHubView .sc-recipe .sc-recipe-macros {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 2px !important;
}

/* Macro chip — used on recipe cards AND on preset detail meal heads */
body #nutritionHubView .sc-macro-chip,
body #scdPresetOverlay .scd-preset-chip,
body .scd-preset-overlay .scd-preset-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 9px !important;
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 999px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
  color: var(--hp-ink) !important;
  text-transform: none !important;
}

/* Recipe footer (serving + actions) */
body #nutritionHubView .sc-recipe .sc-recipe-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 10px 16px 12px !important;
  border-top: 1.5px solid var(--hp-hair) !important;
  background: transparent !important;
}
body #nutritionHubView .sc-recipe .sc-recipe-foot .serving {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
}


/* ===== A4 · Foods library ===== */
body #nutritionHubView .sc-foods-card {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 18px !important;
  padding: 18px 20px 14px !important;
  margin-bottom: 16px !important;
  box-shadow: 4px 5px 0 rgba(20,40,34,.05) !important;
}

/* Category section heading inside a foods-card ("Protein · 25") */
body #nutritionHubView .sc-food-cat-head {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: var(--hp-ink) !important;
  padding: 4px 0 10px !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.005em !important;
}
body #nutritionHubView .sc-food-cat-head .ct {
  font-family: var(--hp-body) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
  margin-left: 6px !important;
}

/* Each food row */
body #nutritionHubView .sc-food-row {
  display: grid !important;
  grid-template-columns: 14px 56px 1.4fr 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 11px 4px !important;
  border-bottom: 1px solid var(--hp-hair-2) !important;
  transition: background .14s var(--hp-ease) !important;
}
body #nutritionHubView .sc-food-row:last-child { border-bottom: none !important; }
body #nutritionHubView .sc-food-row:hover { background: var(--hp-paper) !important; }

/* Category-color dot (left of row) */
body #nutritionHubView .sc-food-cat-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  justify-self: center !important;
}
body #nutritionHubView .sc-food-cat-dot.protein   { background: var(--hp-forest) !important; }
body #nutritionHubView .sc-food-cat-dot.carb      { background: var(--hp-chartreuse) !important; }
body #nutritionHubView .sc-food-cat-dot.fat       { background: var(--hp-ink-2) !important; }
body #nutritionHubView .sc-food-cat-dot.vegetable { background: #4A7A3B !important; }
body #nutritionHubView .sc-food-cat-dot.fruit     { background: #B8804A !important; }
body #nutritionHubView .sc-food-cat-dot.dairy     { background: var(--hp-muted) !important; }

/* Food thumbnail inline image wrapper — kill rgba(201,169,110,0.10) gold fusion */
body #nutritionHubView .sc-food-row > div[style*="border-radius"] {
  border-radius: 10px !important;
  border: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-paper) !important;
}
body #nutritionHubView .sc-food-row > div[style*="201,169,110"] {
  background: var(--hp-paper) !important;
}

/* Food name + serving */
body #nutritionHubView .sc-food-name {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.005em !important;
}
body #nutritionHubView .sc-food-name .ser {
  font-family: var(--hp-body) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  color: var(--hp-muted) !important;
  margin-top: 1px !important;
}

/* Food macros row (kcal + P/C/F) */
body #nutritionHubView .sc-food-macros {
  display: flex !important;
  gap: 14px !important;
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.04em !important;
  color: var(--hp-ink-2) !important;
  text-transform: uppercase !important;
  justify-self: end !important;
}
body #nutritionHubView .sc-food-macros .m-num {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: var(--hp-ink) !important;
  margin-right: 2px !important;
  letter-spacing: -0.005em !important;
}

/* Food row action buttons (Duplicate / Delete) */
body #nutritionHubView .sc-food-actions {
  display: inline-flex !important;
  gap: 6px !important;
  justify-self: end !important;
}


/* ===== A4 · Preset Detail Overlay (#scdPresetOverlay / .scd-*) ===== */
body #scdPresetOverlay,
body .scd-preset-overlay {
  background: rgba(20,40,34,0.32) !important;
  backdrop-filter: blur(4px) !important;
  font-family: var(--hp-body) !important;
}

body #scdPresetOverlay .scd-preset-card,
body .scd-preset-overlay .scd-preset-card {
  background: var(--hp-paper) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 22px !important;
  box-shadow: 8px 10px 0 rgba(20,40,34,.10) !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
}

body #scdPresetOverlay .scd-preset-head,
body .scd-preset-overlay .scd-preset-head {
  background: transparent !important;
  padding: 26px 30px 14px !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
}
body #scdPresetOverlay .scd-preset-head-row,
body .scd-preset-overlay .scd-preset-head-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

/* Eyebrow ("BODY RECOMPOSITION") — kills GOLD fusion */
body #scdPresetOverlay .scd-preset-eyebrow,
body .scd-preset-overlay .scd-preset-eyebrow {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
  margin-bottom: 6px !important;
}

/* Title — Fraunces italic */
body #scdPresetOverlay .scd-preset-title,
body .scd-preset-overlay .scd-preset-title {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 36px !important;
  line-height: 1.05 !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.012em !important;
  margin: 0 !important;
}

body #scdPresetOverlay .scd-preset-sub,
body .scd-preset-overlay .scd-preset-sub {
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: var(--hp-ink-2) !important;
  margin: 10px 0 0 !important;
  max-width: 560px !important;
}

/* Close button */
body #scdPresetOverlay .scd-preset-close,
body .scd-preset-overlay .scd-preset-close {
  width: 38px !important;
  height: 38px !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 999px !important;
  color: var(--hp-ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background .14s var(--hp-ease), border-color .14s var(--hp-ease), transform .12s var(--hp-ease) !important;
  flex-shrink: 0 !important;
}
body #scdPresetOverlay .scd-preset-close:hover,
body .scd-preset-overlay .scd-preset-close:hover {
  background: var(--hp-paper) !important;
  border-color: var(--hp-ink) !important;
  transform: translate(-1px,-1px) !important;
}
body #scdPresetOverlay .scd-preset-close svg,
body .scd-preset-overlay .scd-preset-close svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2 !important;
}

/* Stats row (2050 KCAL / 165g PROTEIN / 210g CARBS / 75g FAT / 4 MEALS) */
body #scdPresetOverlay .scd-preset-stats,
body .scd-preset-overlay .scd-preset-stats {
  display: flex !important;
  gap: 32px !important;
  padding: 14px 30px 22px !important;
  background: transparent !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  flex-wrap: wrap !important;
}
body #scdPresetOverlay .scd-preset-stat,
body .scd-preset-overlay .scd-preset-stat {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
body #scdPresetOverlay .scd-preset-stat > *:first-child,
body #scdPresetOverlay .scd-preset-stat strong,
body .scd-preset-overlay .scd-preset-stat > *:first-child,
body .scd-preset-overlay .scd-preset-stat strong {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 26px !important;
  color: var(--hp-ink) !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
}
body #scdPresetOverlay .scd-preset-stat > *:last-child,
body .scd-preset-overlay .scd-preset-stat > *:last-child {
  font-family: var(--hp-body) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
}

/* Day picker (Mon..Sun pills) */
body #scdPresetOverlay .scd-preset-days,
body .scd-preset-overlay .scd-preset-days {
  display: flex !important;
  gap: 8px !important;
  padding: 18px 30px !important;
  background: transparent !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  flex-wrap: wrap !important;
}
body #scdPresetOverlay .scd-preset-day,
body .scd-preset-overlay .scd-preset-day {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  padding: 9px 14px !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: background .14s var(--hp-ease), border-color .14s var(--hp-ease), color .14s var(--hp-ease) !important;
  min-width: 92px !important;
  font-family: var(--hp-body) !important;
  color: var(--hp-ink-2) !important;
}
body #scdPresetOverlay .scd-preset-day > *:first-child,
body #scdPresetOverlay .scd-preset-day strong,
body .scd-preset-overlay .scd-preset-day > *:first-child {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.03em !important;
  color: inherit !important;
}
body #scdPresetOverlay .scd-preset-day > *:last-child,
body .scd-preset-overlay .scd-preset-day > *:last-child {
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  color: var(--hp-muted) !important;
}
body #scdPresetOverlay .scd-preset-day:hover,
body .scd-preset-overlay .scd-preset-day:hover {
  border-color: var(--hp-ink-2) !important;
  background: var(--hp-paper) !important;
}
/* Active day — forest fill (replaces previous black square treatment) */
body #scdPresetOverlay .scd-preset-day.is-active,
body .scd-preset-overlay .scd-preset-day.is-active {
  background: var(--hp-forest) !important;
  border-color: var(--hp-forest) !important;
  color: var(--hp-forest-ink) !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
}
body #scdPresetOverlay .scd-preset-day.is-active > *:last-child,
body .scd-preset-overlay .scd-preset-day.is-active > *:last-child {
  color: var(--hp-chartreuse) !important;
}

/* Body container */
body #scdPresetOverlay .scd-preset-body,
body .scd-preset-overlay .scd-preset-body {
  background: var(--hp-cream) !important;
  padding: 22px 30px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Day totals strip (1860 KCAL / 144g PROTEIN / 184g CARBS / 60g FAT) */
body #scdPresetOverlay .scd-preset-day-totals,
body .scd-preset-overlay .scd-preset-day-totals {
  display: flex !important;
  gap: 22px !important;
  padding: 14px 18px !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 14px !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
}
body #scdPresetOverlay .scd-tot,
body .scd-preset-overlay .scd-tot {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
}
body #scdPresetOverlay .scd-tot > *:first-child,
body #scdPresetOverlay .scd-tot strong,
body .scd-preset-overlay .scd-tot > *:first-child,
body .scd-preset-overlay .scd-tot strong {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  color: var(--hp-ink) !important;
}

/* Each meal card inside body */
body #scdPresetOverlay .scd-preset-meal,
body .scd-preset-overlay .scd-preset-meal {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 16px !important;
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  box-shadow: 3px 4px 0 rgba(20,40,34,.04) !important;
}

body #scdPresetOverlay .scd-preset-meal-head,
body .scd-preset-overlay .scd-preset-meal-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

/* Meal slot label ("BREAKFAST" eyebrow — kills GOLD fusion) */
body #scdPresetOverlay .scd-preset-meal-slot,
body .scd-preset-overlay .scd-preset-meal-slot {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
  display: block !important;
  margin-bottom: 2px !important;
}

/* Meal name — Fraunces italic */
body #scdPresetOverlay .scd-preset-meal-name,
body .scd-preset-overlay .scd-preset-meal-name {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.005em !important;
}

/* Meal kcal (right side big number) */
body #scdPresetOverlay .scd-preset-meal-kcal,
body .scd-preset-overlay .scd-preset-meal-kcal {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--hp-muted) !important;
  flex-shrink: 0 !important;
}
body #scdPresetOverlay .scd-preset-meal-kcal > *:first-child,
body #scdPresetOverlay .scd-preset-meal-kcal strong,
body .scd-preset-overlay .scd-preset-meal-kcal > *:first-child,
body .scd-preset-overlay .scd-preset-meal-kcal strong {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  color: var(--hp-ink) !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
}

/* Macro chip stack inside meal head */
body #scdPresetOverlay .scd-preset-chips,
body .scd-preset-overlay .scd-preset-chips {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

/* Foods list inside meal */
body #scdPresetOverlay .scd-preset-foods,
body .scd-preset-overlay .scd-preset-foods {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  border-top: 1.5px solid var(--hp-hair) !important;
  padding-top: 10px !important;
}
body #scdPresetOverlay .scd-preset-food,
body .scd-preset-overlay .scd-preset-food {
  display: grid !important;
  grid-template-columns: 1.4fr auto auto !important;
  align-items: baseline !important;
  gap: 18px !important;
  padding: 8px 0 !important;
  border-bottom: 1px dashed var(--hp-hair) !important;
}
body #scdPresetOverlay .scd-preset-food:last-child,
body .scd-preset-overlay .scd-preset-food:last-child { border-bottom: none !important; }

body #scdPresetOverlay .scd-preset-food-name,
body .scd-preset-overlay .scd-preset-food-name {
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  color: var(--hp-ink) !important;
}
body #scdPresetOverlay .scd-preset-food-qty,
body .scd-preset-overlay .scd-preset-food-qty {
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.04em !important;
  color: var(--hp-muted) !important;
  text-align: right !important;
}
body #scdPresetOverlay .scd-preset-food-macros,
body .scd-preset-overlay .scd-preset-food-macros {
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.04em !important;
  color: var(--hp-ink-2) !important;
  text-align: right !important;
  text-transform: uppercase !important;
}


/* ===== A4 · Mobile/narrow viewport safety ===== */
@media (max-width: 900px) {
  body #nutritionHubView { padding: 16px 16px 28px !important; }
  body #nutritionHubView .sc-nut-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  body #nutritionHubView .sc-preset { padding: 18px 16px !important; }
  body #nutritionHubView .sc-recipe .sc-recipe-thumb { height: 130px !important; }
  body #nutritionHubView .sc-food-row {
    grid-template-columns: 14px 48px 1fr auto !important;
    gap: 10px !important;
  }
  body #nutritionHubView .sc-food-macros { font-size: 10.5px !important; gap: 8px !important; }
  body #scdPresetOverlay .scd-preset-head,
  body #scdPresetOverlay .scd-preset-stats,
  body #scdPresetOverlay .scd-preset-days,
  body #scdPresetOverlay .scd-preset-body { padding-left: 18px !important; padding-right: 18px !important; }
  body #scdPresetOverlay .scd-preset-title { font-size: 26px !important; }
  body #scdPresetOverlay .scd-preset-stats { gap: 18px !important; }
}


/* ===== END · PHASE 2 · AGENT A4 ===== */


/* ============================================================================
   PHASE 2 · A1·CONTINUED · 3 FUSION GAPS (operator review 2026-05-25)
   ----------------------------------------------------------------------------
   Operator caught 3 surfaces still in old palette after A1-A4 ship:
     (1) Coaches section (super-admin only) — cards + drilldown to a coach's clients
     (2) Clients populated rows (admin + regular) — row bg, avatar, status pill, "..."
     (3) Client Details drilldown — bento overview (Direction C) + bcal calendar + Nutrition Lab
   ----------------------------------------------------------------------------
   Rule 44 (NO PALETTE FUSION) — every visible pixel must be Hipster.
   Specificity wins: `body #view .selector`, last-loaded stylesheet, !important
   on every property that fights an inline-<style> rule from admin.html.
   Tokens already exist at top of this file (--hp-*) — DO NOT redeclare.
   ========================================================================= */


/* ============================================================================
   FIX1·A · COACHES SECTION (#coachesView) — super-admin only
   admin.html source: lines 531-581 (legacy CSS), 8971-8978 (grid override),
                      12965-12980 (markup), 52123 (JS card render)
   ========================================================================= */

/* Section padding + magazine eyebrow (sibling of #clientsView pattern) */
body #coachesView {
  padding: 16px 24px 28px !important;
  background: var(--hp-cream) !important;
  position: relative !important;
}
body #coachesView::before {
  content: "Vol. 01 · Coaches Index" !important;
  display: block !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
  margin: 4px 0 14px !important;
}

body #coachesView .coaches-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  padding: 4px 0 !important;
}

/* Coach card — cream-elev sticker with forest hover lift */
body #coachesView .coach-card {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 16px !important;
  padding: 18px 20px 20px !important;
  cursor: pointer !important;
  box-shadow: 0 0 0 transparent, 0 1px 2px rgba(20,40,34,0.04) !important;
  transition: transform .15s var(--hp-ease), box-shadow .15s var(--hp-ease), border-color .15s var(--hp-ease) !important;
  position: relative !important;
}
body #coachesView .coach-card:hover {
  border-color: var(--hp-forest) !important;
  transform: translate(-2px,-2px) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}

body #coachesView .coach-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

/* Avatar — forest squircle with chartreuse Fraunces initial */
body #coachesView .coach-card-avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: var(--hp-forest) !important;
  background-image: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  color: var(--hp-chartreuse) !important;
  flex-shrink: 0 !important;
  box-shadow: 2px 2px 0 var(--hp-forest-deep) !important;
}

body #coachesView .coach-card-name {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  color: var(--hp-ink) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.005em !important;
}

body #coachesView .coach-card-ws {
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  color: var(--hp-muted) !important;
  margin-top: 2px !important;
  letter-spacing: 0.01em !important;
}

/* Stat row — magazine eyebrow labels + Fraunces values via JS markup */
body #coachesView .coach-card-meta {
  display: flex !important;
  gap: 18px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid var(--hp-hair) !important;
  flex-wrap: wrap !important;
}
body #coachesView .coach-card-meta span {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  color: var(--hp-ink-2) !important;
}
/* The numeric/value bits inside span (e.g. "1", "Mar 16", "Starter") render as
   text nodes, so we tint them Fraunces via a slightly heavier weight pass — but
   without a wrapper we have to settle for the eyebrow look. JS renders these as
   "CLIENTS 1" / "JOINED Mar 16" / "TIER Starter" inline-flexed text, so the
   numeric token visually pops against the uppercase label letter-spacing. */

/* "View workspace →" CTA — forest sticker primary */
body #coachesView .coach-card-btn {
  margin-top: 14px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: var(--hp-forest) !important;
  background-image: none !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  color: var(--hp-chartreuse) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease) !important;
}
body #coachesView .coach-card-btn:hover {
  transform: translate(-1px,-1px) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}
body #coachesView .coach-card-btn:active {
  transform: translate(2px,2px) !important;
  box-shadow: 1px 1px 0 var(--hp-forest-deep) !important;
}

body #coachesView .coaches-empty {
  text-align: center !important;
  padding: 48px 20px !important;
  color: var(--hp-muted) !important;
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-size: 15px !important;
}

/* ===== Coaches → drilldown (clicking "View workspace" on a card) ===== */
body #coachesView .coaches-client-panel {
  padding: 4px 0 !important;
  background: transparent !important;
}
body #coachesView .coaches-client-panel .panel-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-forest) !important;
  cursor: pointer !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  width: fit-content !important;
  transition: border-color .12s var(--hp-ease), background .12s var(--hp-ease) !important;
}
body #coachesView .coaches-client-panel .panel-back:hover {
  opacity: 1 !important;
  border-color: var(--hp-forest) !important;
  background: var(--hp-cream) !important;
}

body #coachesView .coaches-client-title {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  color: var(--hp-ink) !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.01em !important;
}
body #coachesView .coaches-client-sub {
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--hp-ink-2) !important;
  margin-bottom: 18px !important;
}

body #coachesView .coach-client-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  transition: border-color .12s var(--hp-ease), background .12s var(--hp-ease) !important;
}
body #coachesView .coach-client-row:hover {
  border-color: var(--hp-forest) !important;
  background: var(--hp-paper) !important;
}
body #coachesView .coach-client-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 11px !important;
  background: var(--hp-forest) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  color: var(--hp-chartreuse) !important;
  flex-shrink: 0 !important;
  box-shadow: 2px 2px 0 var(--hp-forest-deep) !important;
}
body #coachesView .coach-client-name {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  color: var(--hp-ink) !important;
}
body #coachesView .coach-client-email {
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  color: var(--hp-muted) !important;
  margin-top: 1px !important;
}
body #coachesView .coach-client-status {
  margin-left: auto !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  background: var(--hp-cream) !important;
  color: var(--hp-forest) !important;
  border: 1.5px solid var(--hp-hair) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}


/* ============================================================================
   FIX1·B · CLIENTS POPULATED ROWS (#clientsView)
   Kills the dark-gradient admin row + the gold-tinted "regular" row + the
   greenish "active" pill + the cream/hair "..." button. All forest/cream.
   admin.html source: lines 878-1010 (legacy CSS), 10168-10211 (override CSS),
                      19697-19725 (JS row render)
   ========================================================================= */

body #clientsView .panel {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 4px 6px 0 rgba(20,40,34,0.04) !important;
}
body #clientsView table {
  background: var(--hp-cream-elev) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Both row variants — admin + regular — cream-elev base, no dark gradient */
body #clientsView .client-row--admin td,
body #clientsView .client-row--regular td {
  background: var(--hp-cream-elev) !important;
  border-bottom: 1px solid var(--hp-hair) !important;
  color: var(--hp-ink) !important;
  padding: 14px 16px !important;
  font-family: var(--hp-body) !important;
  background-image: none !important;
}
body #clientsView .client-row--admin:hover td,
body #clientsView .client-row--regular:hover td {
  background: var(--hp-paper) !important;
}
body #clientsView .client-row--admin:last-child td,
body #clientsView .client-row--regular:last-child td {
  border-bottom: none !important;
}

/* Avatar — forest squircle with chartreuse Fraunces initial */
body #clientsView .client-row--admin .avatar,
body #clientsView .client-row--regular .avatar,
body #clientsView .avatar {
  background: var(--hp-forest) !important;
  background-image: none !important;
  color: var(--hp-chartreuse) !important;
  border-radius: 11px !important;
  width: 36px !important;
  height: 36px !important;
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  box-shadow: 2px 2px 0 var(--hp-forest-deep) !important;
  display: grid !important;
  place-items: center !important;
}

/* Client name — Fraunces italic ink (override admin's white-on-dark) */
body #clientsView .client-row--admin .client-name,
body #clientsView .client-row--regular .client-name,
body #clientsView .client-name {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.005em !important;
}
body #clientsView .client-row--admin .client-meta-line,
body #clientsView .client-row--regular .client-meta-line,
body #clientsView .client-meta-line {
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  color: var(--hp-muted) !important;
  margin-top: 2px !important;
}

/* Status pill — cream-elev fill, hair border, forest text */
body #clientsView .status-pill,
body #clientsView .client-row--admin .status-pill,
body #clientsView .client-row--regular .status-pill {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-cream) !important;
  color: var(--hp-ink-2) !important;
}
body #clientsView .status-pill.active,
body #clientsView .client-row--admin .status-pill.active,
body #clientsView .client-row--regular .status-pill.active {
  background: var(--hp-cream) !important;
  border: 1.5px solid var(--hp-forest) !important;
  color: var(--hp-forest) !important;
}
body #clientsView .status-pill.paused {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  color: var(--hp-muted) !important;
}

/* "..." menu button — cream-elev sticker with ink icon */
body #clientsView .client-row--admin .dots,
body #clientsView .client-row--regular .dots,
body #clientsView .dots {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-cream-elev) !important;
  background-image: none !important;
  color: var(--hp-ink) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color .12s var(--hp-ease), background .12s var(--hp-ease) !important;
}
body #clientsView .client-row--admin .dots:hover,
body #clientsView .client-row--regular .dots:hover,
body #clientsView .dots:hover {
  background: var(--hp-cream) !important;
  border-color: var(--hp-forest) !important;
  color: var(--hp-forest) !important;
}

/* In-row pills (.pill.inperson / .pill.online) — Hipster chip grammar */
body #clientsView .pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 999px !important;
  padding: 5px 11px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  background: var(--hp-cream-elev) !important;
  color: var(--hp-ink-2) !important;
  line-height: 1 !important;
}
body #clientsView .pill.inperson {
  color: var(--hp-forest) !important;
  border-color: var(--hp-hair) !important;
  background: var(--hp-cream) !important;
}
body #clientsView .pill.online {
  color: var(--hp-ink-2) !important;
  border-color: var(--hp-hair) !important;
  background: var(--hp-cream-elev) !important;
}


/* ============================================================================
   FIX1·C · CLIENT DETAILS DRILLDOWN (slide-in panel + Bento overview)
   admin.html source: lines 6555-6569 (panel), 8980-9275 (bento direction C),
                      9276-9670 (bcal calendar), 9672-10110 (Nutrition Lab),
                      15488-15670 (markup), 48087-48160 (Nutrition Lab markup)
   ========================================================================= */

/* Panel surface — cream page bg */
body .client-detail-panel {
  background: var(--hp-cream) !important;
}

/* Bento topbar (Workspace Preview · CLIENT OVERVIEW · DIRECTION C · Today · Mon, May 25) */
body .bento-topbar {
  border-bottom: 1.5px solid var(--hp-hair) !important;
  padding: 10px 0 16px !important;
  margin-bottom: 20px !important;
  background: transparent !important;
}
body .bento-back {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-cream-elev) !important;
  color: var(--hp-ink) !important;
  box-shadow: 2px 2px 0 var(--hp-forest-deep) !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease) !important;
}
body .bento-back:hover {
  background: var(--hp-cream) !important;
  border-color: var(--hp-forest) !important;
  color: var(--hp-forest) !important;
  transform: translate(-1px,-1px) !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
}

body .bento-tb-name {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  color: var(--hp-ink) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
}
body .bento-tb-divider {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: var(--hp-chartreuse) !important;
  flex-shrink: 0 !important;
}
body .bento-tb-eyebrow {
  font-family: var(--hp-body) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
}
body .bento-tb-date {
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  color: var(--hp-ink-2) !important;
}
body .bento-tb-stat .num {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  color: var(--hp-ink) !important;
  line-height: 1 !important;
}
body .bento-tb-stat .lbl {
  font-family: var(--hp-body) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
  margin-top: 4px !important;
}

/* Legacy bento-intro (if it ever renders alongside bento-topbar) */
body .bento-intro {
  border-bottom: 1.5px solid var(--hp-hair) !important;
}
body .bento-eyebrow {
  font-family: var(--hp-body) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
}
body .bento-h1 {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 32px !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.01em !important;
}
body .bento-sub {
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  color: var(--hp-ink-2) !important;
}
body .bento-stat .num {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  color: var(--hp-ink) !important;
}
body .bento-stat .lbl {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
}
body .bento-stat .delta {
  color: var(--hp-forest) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
}

/* === Bento heroes (3 cards: Nutrition / Training / Habits) === */
/* Re-scope the per-track accent vars to Hipster palette */
body #bentoPanel {
  --nutri: var(--hp-forest) !important;
  --nutri-bg: rgba(31,58,46,0.08) !important;
  --nutri-line: rgba(31,58,46,0.30) !important;
  --train: var(--hp-ink) !important;
  --train-bg: rgba(42,26,15,0.08) !important;
  --train-line: rgba(42,26,15,0.25) !important;
  --habit: var(--hp-ink-2) !important;
  --habit-bg: rgba(91,74,62,0.08) !important;
  --habit-line: rgba(91,74,62,0.28) !important;
}

body .bento-hero {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 18px !important;
  padding: 20px 22px 22px !important;
  box-shadow: 0 1px 2px rgba(20,40,34,0.04) !important;
  transition: transform .15s var(--hp-ease), box-shadow .15s var(--hp-ease), border-color .15s var(--hp-ease) !important;
}
body .bento-hero:hover {
  border-color: var(--hp-forest) !important;
  transform: translate(-2px,-2px) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}
body .bento-hero::before {
  background: var(--hp-hair) !important;
  width: 4px !important;
}
body .bento-hero[data-bento-track="nutrition"]::before { background: var(--hp-chartreuse) !important; }
body .bento-hero[data-bento-track="training"]::before  { background: var(--hp-forest) !important; }
body .bento-hero[data-bento-track="habits"]::before    { background: var(--hp-ink-2) !important; }

body .bh-title {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: 19px !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.005em !important;
}
body .bh-ic {
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  background: var(--hp-cream) !important;
  color: var(--hp-forest) !important;
  border: 1.5px solid var(--hp-hair) !important;
}
body .bento-hero[data-bento-track="nutrition"] .bh-ic { background: rgba(201,242,94,0.20) !important; color: var(--hp-forest) !important; border-color: rgba(31,58,46,0.30) !important; }
body .bento-hero[data-bento-track="training"]  .bh-ic { background: rgba(31,58,46,0.10) !important; color: var(--hp-forest) !important; border-color: rgba(31,58,46,0.30) !important; }
body .bento-hero[data-bento-track="habits"]    .bh-ic { background: var(--hp-cream) !important; color: var(--hp-ink-2) !important; border-color: var(--hp-hair) !important; }

body .bh-status {
  font-family: var(--hp-body) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  background: var(--hp-cream) !important;
  border: 1.5px solid var(--hp-hair) !important;
  color: var(--hp-ink-2) !important;
}
body .bh-status.on {
  color: var(--hp-forest) !important;
  background: rgba(201,242,94,0.18) !important;
  border-color: var(--hp-forest) !important;
}
body .bh-status.warn {
  color: var(--hp-ink) !important;
  background: var(--hp-cream-elev) !important;
  border-color: var(--hp-ink-2) !important;
}

body .bh-stat .big {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 36px !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.015em !important;
}
body .bh-stat .unit {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  color: var(--hp-ink-2) !important;
}
body .bh-stat .goal {
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  color: var(--hp-muted) !important;
}

body .bh-bar {
  background: var(--hp-cream) !important;
  border: 1px solid var(--hp-hair) !important;
  height: 8px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
body .bento-hero[data-bento-track="nutrition"] .bh-bar > i { background: var(--hp-chartreuse) !important; }
body .bento-hero[data-bento-track="training"]  .bh-bar > i { background: var(--hp-forest) !important; }
body .bento-hero[data-bento-track="habits"]    .bh-bar > i { background: var(--hp-ink-2) !important; }

body .bh-mini .pair .v {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: var(--hp-ink) !important;
}
body .bh-mini .pair .k {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
}

body .bh-cta {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-forest) !important;
  margin-top: 14px !important;
}

/* === Bento widgets (Check-ins / etc — secondary stat cards) === */
body .bw {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  box-shadow: 0 1px 2px rgba(20,40,34,0.03) !important;
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease), border-color .12s var(--hp-ease) !important;
}
body .bw:hover {
  border-color: var(--hp-forest) !important;
  transform: translate(-1px,-1px) !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
}
body .bw-head { color: var(--hp-ink) !important; }
body .bw-ic {
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  background: var(--hp-cream) !important;
  color: var(--hp-forest) !important;
  border: 1px solid var(--hp-hair) !important;
}
body .bw-title {
  font-family: var(--hp-body) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink) !important;
}
body .bw-stat .big {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 26px !important;
  color: var(--hp-ink) !important;
}
body .bw-stat .unit {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  color: var(--hp-ink-2) !important;
}
body .bw-line {
  font-family: var(--hp-body) !important;
  color: var(--hp-ink-2) !important;
}
body .bw-bar {
  background: var(--hp-cream) !important;
  border: 1px solid var(--hp-hair) !important;
  height: 5px !important;
}
body .bw-bar > i { background: var(--hp-forest) !important; }
body .bw-foot {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-forest) !important;
}

/* === Bento accordion (collapsible sections below widgets) === */
body .bento-accordion {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 14px !important;
}
body .bacc-item { border-bottom: 1px solid var(--hp-hair) !important; }
body .bacc-head { padding: 16px 20px !important; }
body .bacc-head:hover { background: var(--hp-cream) !important; }
body .bacc-ic {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  background: var(--hp-cream) !important;
  color: var(--hp-forest) !important;
  border: 1px solid var(--hp-hair) !important;
}
body .bacc-meta .title {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--hp-ink) !important;
}
body .bacc-meta .sub {
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  color: var(--hp-ink-2) !important;
}
body .bacc-chev { color: var(--hp-ink-2) !important; }
body .bacc-item.open .bacc-chev { color: var(--hp-forest) !important; }

/* ===== bcal calendar (the Day/Week/Month surface inside Client Details) ===== */
body .bcal {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(20,40,34,0.04) !important;
}
body .bcal-head {
  border-bottom: 1.5px solid var(--hp-hair) !important;
}
body .bcal-close {
  border: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-cream-elev) !important;
  color: var(--hp-ink) !important;
  border-radius: 10px !important;
  width: 30px !important;
  height: 30px !important;
}
body .bcal-close:hover {
  background: var(--hp-cream) !important;
  color: var(--hp-forest) !important;
  border-color: var(--hp-forest) !important;
}
body .bcal-title {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: 19px !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.005em !important;
}
body .bcal-nav button {
  border: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-cream-elev) !important;
  color: var(--hp-ink) !important;
  border-radius: 9px !important;
  width: 30px !important;
  height: 30px !important;
}
body .bcal-nav button:hover {
  background: var(--hp-cream) !important;
  border-color: var(--hp-forest) !important;
  color: var(--hp-forest) !important;
}
body .bcal-today-btn {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink) !important;
  width: auto !important;
  padding: 0 14px !important;
  height: 30px !important;
}

/* Day/Week/Month segmented control — cream-elev container, forest active */
body .bcal-views {
  border: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-cream) !important;
  border-radius: 999px !important;
  padding: 3px !important;
}
body .bcal-views button {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
  padding: 6px 14px !important;
}
body .bcal-views button.active {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  box-shadow: none !important;
}
body .bcal-views button:hover:not(.active) {
  color: var(--hp-forest) !important;
}

/* Track filter pills (Nutrition / Training / Habits) */
body .bcal-trk {
  border: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-cream-elev) !important;
  color: var(--hp-ink-2) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
}
body .bcal-trk .dot {
  background: var(--hp-hair) !important;
  width: 7px !important;
  height: 7px !important;
}
body .bcal-trk.active {
  color: var(--hp-ink) !important;
  background: var(--hp-cream) !important;
  border-color: var(--hp-forest) !important;
}
body .bcal-trk[data-bcal-track="nutrition"].active {
  color: var(--hp-forest) !important;
  background: rgba(201,242,94,0.18) !important;
  border-color: var(--hp-forest) !important;
}
body .bcal-trk[data-bcal-track="nutrition"].active .dot { background: var(--hp-chartreuse) !important; }
body .bcal-trk[data-bcal-track="training"].active {
  color: var(--hp-forest) !important;
  background: rgba(31,58,46,0.10) !important;
  border-color: var(--hp-forest) !important;
}
body .bcal-trk[data-bcal-track="training"].active .dot { background: var(--hp-forest) !important; }
body .bcal-trk[data-bcal-track="habits"].active {
  color: var(--hp-ink) !important;
  background: rgba(91,74,62,0.10) !important;
  border-color: var(--hp-ink-2) !important;
}
body .bcal-trk[data-bcal-track="habits"].active .dot { background: var(--hp-ink-2) !important; }

body .bcal-collapse {
  border: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-cream-elev) !important;
  color: var(--hp-ink) !important;
  border-radius: 10px !important;
  width: 32px !important;
  height: 32px !important;
}
body .bcal-collapse:hover {
  background: var(--hp-cream) !important;
  border-color: var(--hp-forest) !important;
  color: var(--hp-forest) !important;
}

body .bcal-foot {
  border-top: 1.5px solid var(--hp-hair) !important;
  font-family: var(--hp-body) !important;
  font-size: 11px !important;
  color: var(--hp-muted) !important;
}

/* Day view interior */
body .bcal-day {
  border: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-cream-elev) !important;
  border-radius: 12px !important;
}
body .bcal-day .hours {
  background: var(--hp-cream) !important;
  border-right: 1px solid var(--hp-hair) !important;
}
body .bcal-day .hour {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  color: var(--hp-muted) !important;
  border-bottom: 1px solid var(--hp-hair) !important;
}
body .bcal-day .col {
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 55px, var(--hp-hair) 55px, var(--hp-hair) 56px) !important;
}

/* Week view interior */
body .bcal-week {
  border: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-cream-elev) !important;
  border-radius: 12px !important;
}
body .bcal-week .wk-head {
  background: var(--hp-cream) !important;
  border-bottom: 1px solid var(--hp-hair) !important;
}
body .bcal-week .wk-head > div {
  border-right: 1px solid var(--hp-hair) !important;
}
body .bcal-week .wk-head > div.lh-cell {
  background: var(--hp-cream-elev) !important;
}
body .bcal-week .wk-head .dow {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: var(--hp-ink-2) !important;
}
body .bcal-week .wk-head .dom {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  color: var(--hp-ink) !important;
}
body .bcal-week .wk-head > div.today .dom {
  color: var(--hp-forest) !important;
}
body .bcal-week .hours {
  background: var(--hp-cream) !important;
  border-right: 1px solid var(--hp-hair) !important;
}
body .bcal-week .hour {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  color: var(--hp-muted) !important;
  border-bottom: 1px solid var(--hp-hair) !important;
}
body .bcal-week .col {
  border-right: 1px solid var(--hp-hair) !important;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, var(--hp-hair) 47px, var(--hp-hair) 48px) !important;
}
body .bcal-week .col.today {
  background-color: rgba(201,242,94,0.10) !important;
}

/* Month view interior */
body .bcal-month {
  border: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-cream-elev) !important;
  border-radius: 12px !important;
}
body .bcal-month .dow-hd {
  background: var(--hp-cream) !important;
  border-right: 1px solid var(--hp-hair) !important;
  border-bottom: 1px solid var(--hp-hair) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: var(--hp-ink-2) !important;
}
body .bcal-month .cell {
  background: var(--hp-cream-elev) !important;
  border-right: 1px solid var(--hp-hair) !important;
  border-bottom: 1px solid var(--hp-hair) !important;
}
body .bcal-month .cell:hover {
  background: var(--hp-cream) !important;
}
body .bcal-month .cell.other-month {
  background: var(--hp-cream) !important;
}
body .bcal-month .cell.other-month .dnum {
  color: var(--hp-muted) !important;
}
body .bcal-month .cell.today .dnum {
  color: var(--hp-forest) !important;
  font-weight: 900 !important;
}
body .bcal-month .cell .dnum {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  color: var(--hp-ink) !important;
}
body .bcal-month .cell .dots .d { background: var(--hp-hair) !important; }
body .bcal-month .cell .dots .d.n { background: var(--hp-chartreuse) !important; }
body .bcal-month .cell .dots .d.t { background: var(--hp-forest) !important; }
body .bcal-month .cell .dots .d.h { background: var(--hp-ink-2) !important; }

/* Event pills inside cells */
body .bcal-month .cell .ev-pill {
  background: var(--hp-cream) !important;
  border-left: 3px solid var(--hp-hair) !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
}
body .bcal-month .cell .ev-pill.nutri {
  background: rgba(201,242,94,0.18) !important;
  border-left-color: var(--hp-chartreuse) !important;
  color: var(--hp-forest) !important;
}
body .bcal-month .cell .ev-pill.train {
  background: rgba(31,58,46,0.10) !important;
  border-left-color: var(--hp-forest) !important;
  color: var(--hp-forest) !important;
}
body .bcal-month .cell .ev-pill.habit {
  background: rgba(91,74,62,0.10) !important;
  border-left-color: var(--hp-ink-2) !important;
  color: var(--hp-ink-2) !important;
}
body .bcal-month .cell .ev-pill.checkin {
  background: rgba(201,242,94,0.12) !important;
  border-left-color: var(--hp-chartreuse) !important;
  color: var(--hp-forest) !important;
}

/* Day/Week absolute-positioned events */
body .bcal-ev {
  background: var(--hp-cream) !important;
  border-left: 3px solid var(--hp-hair) !important;
  border-radius: 8px !important;
  box-shadow: 2px 2px 0 var(--hp-forest-deep) !important;
}
body .bcal-ev.nutri {
  background: rgba(201,242,94,0.18) !important;
  border-left-color: var(--hp-chartreuse) !important;
}
body .bcal-ev.train {
  background: rgba(31,58,46,0.10) !important;
  border-left-color: var(--hp-forest) !important;
}
body .bcal-ev.habit {
  background: rgba(91,74,62,0.10) !important;
  border-left-color: var(--hp-ink-2) !important;
}
body .bcal-ev.checkin {
  background: rgba(201,242,94,0.12) !important;
  border-left-color: var(--hp-chartreuse) !important;
}
body .bcal-ev.checkin .ev-title { color: var(--hp-forest) !important; }
body .bcal-ev .ev-time {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--hp-ink-2) !important;
}
body .bcal-ev .ev-title {
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
  color: var(--hp-ink) !important;
}
body .bcal-ev.nutri .ev-title { color: var(--hp-forest) !important; }
body .bcal-ev.train .ev-title { color: var(--hp-forest) !important; }
body .bcal-ev.habit .ev-title { color: var(--hp-ink) !important; }

/* nutri/habit event interior text colors */
body .bcal-ev.nutri .ev-nut-label { color: var(--hp-forest) !important; font-family: var(--hp-body) !important; font-weight: 700 !important; }
body .bcal-ev.nutri .ev-nut-macros { color: var(--hp-ink-2) !important; }
body .bcal-ev.nutri .ev-nut-macros .m-sep { color: var(--hp-hair) !important; }
body .bcal-ev.nutri .ev-nut-items li { color: var(--hp-ink) !important; font-family: var(--hp-body) !important; }
body .bcal-ev.nutri .ev-nut-items li.more { color: var(--hp-forest) !important; font-style: italic !important; }
body .bcal-ev.nutri .ev-nut-check {
  border: 1.5px solid var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border-radius: 4px !important;
}
body .bcal-ev.nutri .ev-nut-check.logged {
  background: var(--hp-forest) !important;
  border-color: var(--hp-forest) !important;
}
body .bcal-ev.habit .ev-nut-label { color: var(--hp-ink) !important; font-family: var(--hp-body) !important; font-weight: 700 !important; }
body .bcal-ev.habit .ev-nut-macros { color: var(--hp-ink-2) !important; }
body .bcal-ev.habit .ev-nut-items li { color: var(--hp-ink) !important; font-family: var(--hp-body) !important; }
body .bcal-ev.habit .ev-nut-items li.more { color: var(--hp-ink-2) !important; font-style: italic !important; }
body .bcal-ev.habit .ev-nut-check {
  border: 1.5px solid var(--hp-ink-2) !important;
  border-radius: 4px !important;
}
body .bcal-ev.habit .ev-nut-check.logged {
  background: var(--hp-ink-2) !important;
  border-color: var(--hp-ink-2) !important;
}

/* "+ add" hover affordance (the small circular button on cell hover) */
body .bcal-day .col:hover, body .bcal-week .col:hover {
  background-color: rgba(31,58,46,0.04) !important;
}
body .bcal-cell-add {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  box-shadow: 2px 2px 0 var(--hp-forest-deep) !important;
}
body .bcal-cell-add:hover {
  background: var(--hp-forest-deep) !important;
}

/* Selected-day indicator */
body .bcal-month .cell.sel-day { box-shadow: inset 0 0 0 2px var(--hp-forest) !important; }
body .bcal-week .col.sel-day { box-shadow: inset 0 0 0 2px var(--hp-forest) !important; }

/* Add-event popover (when "+" clicked) */
body .bcal-addmenu {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 14px !important;
  box-shadow: 6px 8px 0 var(--hp-forest-deep), 0 10px 32px rgba(20,40,34,0.12) !important;
}
body .bcal-addmenu-head {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
  border-bottom: 1px solid var(--hp-hair) !important;
}
body .bcal-addmenu button {
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
  color: var(--hp-ink) !important;
  border-radius: 8px !important;
}
body .bcal-addmenu button:hover { background: var(--hp-cream) !important; }
body .bca-dot { background: var(--hp-hair) !important; }
body .bca-dot.n { background: var(--hp-chartreuse) !important; }
body .bca-dot.t { background: var(--hp-forest) !important; }
body .bca-dot.h { background: var(--hp-ink-2) !important; }
body .bca-dot.c { background: var(--hp-chartreuse) !important; }

/* ===== Nutrition Lab right pane (bcal-pane + lab-*) ===== */
body .bcal-pane {
  background: var(--hp-cream) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 14px !important;
  padding: 16px !important;
}

body .lab-head {
  border-bottom: 1.5px solid var(--hp-hair) !important;
  padding-bottom: 12px !important;
}
body .lab-head h3 {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: 19px !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.005em !important;
}

/* "Voice plan" gold-ish button — kill the gold */
body .lab-voice {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-style: solid !important;
  color: var(--hp-forest) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
}
body .lab-voice:hover {
  background: var(--hp-cream) !important;
  border-color: var(--hp-forest) !important;
  color: var(--hp-forest) !important;
}
body .lab-voice.listening {
  background: rgba(156,42,42,0.10) !important;
  border-color: var(--hp-danger) !important;
  color: var(--hp-danger) !important;
}

/* "Daily target: 2,000 kcal · 150g P · 200g C · 65g F" + meal-count selector */
body .lab-targets {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  font-family: var(--hp-body) !important;
  color: var(--hp-ink-2) !important;
  padding: 12px 14px !important;
}
body .lab-targets strong {
  color: var(--hp-ink) !important;
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
}
body .lab-meal-select {
  background: var(--hp-cream) !important;
  border: 1.5px solid var(--hp-hair) !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
}

/* Each meal card (Breakfast / Lunch / etc) */
body .meal {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  padding: 12px 14px 14px !important;
}
body .meal-head h4 {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--hp-ink) !important;
  letter-spacing: -0.005em !important;
}
body .meal-tgt {
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
}
body .meal-actual {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  color: var(--hp-ink-2) !important;
}
body .meal-actual.over { color: var(--hp-danger) !important; }

/* Macro chips: "P 0 /38g", "C 0 /50g", "F 0 /16g" */
body .meal-actual-macros .ma-chip {
  background: var(--hp-cream) !important;
  border: 1.5px solid var(--hp-hair) !important;
  color: var(--hp-ink-2) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-family: var(--hp-body) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
}
body .meal-actual-macros .ma-chip .ma-k {
  color: var(--hp-forest) !important;
  font-weight: 700 !important;
}
body .meal-actual-macros .ma-chip strong {
  color: var(--hp-ink) !important;
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
}
body .meal-actual-macros .ma-chip .ma-tgt {
  color: var(--hp-muted) !important;
}

/* Food rows inside a meal */
body .meal-food {
  background: var(--hp-cream) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 9px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
}
body .meal-food .qty {
  border: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-cream-elev) !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
}
body .meal-food .unit {
  color: var(--hp-ink-2) !important;
  font-family: var(--hp-body) !important;
}
body .meal-food .kcal {
  color: var(--hp-forest) !important;
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
}
body .meal-food .rm {
  color: var(--hp-danger) !important;
}
body .meal-food .rm:hover { background: rgba(156,42,42,0.10) !important; }
body .meal-food-macros { color: var(--hp-ink-2) !important; font-family: var(--hp-body) !important; }
body .meal-food-macros .mfm strong { color: var(--hp-ink) !important; }
body .meal-food.logged {
  background: rgba(201,242,94,0.14) !important;
  border-color: var(--hp-forest) !important;
}
body .meal-food.logged .name { color: var(--hp-forest) !important; font-weight: 700 !important; }
body .meal-food.logged .unit { color: var(--hp-forest) !important; }
body .meal-food.logged .kcal { color: var(--hp-forest) !important; }
body .meal-food.logged .meal-food-macros .mfm strong { color: var(--hp-forest) !important; }
body .meal-food.logged .qty-static {
  background: rgba(201,242,94,0.20) !important;
  border: 1.5px solid var(--hp-forest) !important;
  color: var(--hp-forest) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
}

/* "+ Add food (type to search)" input */
body .add-food {
  border: 1.5px dashed var(--hp-forest) !important;
  background: rgba(31,58,46,0.04) !important;
  color: var(--hp-forest) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 9px !important;
  padding: 6px 12px !important;
}
body .add-food:hover { background: rgba(31,58,46,0.10) !important; }

body .food-picker-input {
  border: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-cream-elev) !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  border-radius: 9px !important;
  padding: 7px 11px !important;
}
body .food-picker-input::placeholder { color: var(--hp-muted) !important; }
body .food-picker-input:focus {
  outline: 2px solid var(--hp-chartreuse) !important;
  outline-offset: 1px !important;
  border-color: var(--hp-forest) !important;
}

body .food-picker-list {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  box-shadow: 4px 6px 0 var(--hp-forest-deep), 0 6px 20px rgba(20,40,34,0.10) !important;
}
body .food-picker-list button {
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  border-bottom: 1px solid var(--hp-hair) !important;
}
body .food-picker-list button:hover { background: var(--hp-cream) !important; }
body .food-picker-list button .macros { color: var(--hp-ink-2) !important; }

/* "+ Combination" toggle button */
body .meal-preset-toggle {
  border: 1.5px dashed var(--hp-forest) !important;
  background: rgba(31,58,46,0.04) !important;
  color: var(--hp-forest) !important;
  border-radius: 9px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 0 14px !important;
}
body .meal-preset-toggle:hover { background: rgba(31,58,46,0.10) !important; }

body .meal-presets { border-top: 1px dashed var(--hp-hair) !important; }
body .meal-preset {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 10px !important;
}
body .meal-preset:hover {
  border-color: var(--hp-forest) !important;
  background: var(--hp-paper) !important;
}
body .meal-preset .mp-name {
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 600 !important;
}
body .meal-preset .mp-mac { color: var(--hp-ink-2) !important; }
body .meal-preset .mp-kcal {
  color: var(--hp-forest) !important;
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
}

/* meal-totals row at bottom of each meal */
body .meal-totals {
  border-top: 1px dashed var(--hp-hair) !important;
  color: var(--hp-ink-2) !important;
  font-family: var(--hp-body) !important;
}
body .meal-totals strong {
  color: var(--hp-ink) !important;
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
}

/* Day-total summary band */
body .lab-day-total {
  background: rgba(201,242,94,0.16) !important;
  border: 1.5px solid var(--hp-forest) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
}
body .lab-day-total strong {
  color: var(--hp-forest) !important;
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
}
body .lab-day-total.over strong { color: var(--hp-danger) !important; }

/* "Save day" sticker button (replaces drag handle) — make it primary CTA */
body .lab-save-day {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  border-radius: 10px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
}
body .lab-save-day:hover {
  background: var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}
body .lab-save-day:active {
  transform: translate(2px,2px) !important;
  box-shadow: 1px 1px 0 var(--hp-forest-deep) !important;
}

/* Drag handles (training library) — same Hipster sticker treatment */
body .drag-plan-handle, body .drag-workout-handle {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  border-radius: 10px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
}
body .drag-plan-handle:hover, body .drag-workout-handle:hover {
  background: var(--hp-forest-deep) !important;
}

/* Library-add button (small dashed) — Hipster dashed ghost */
body .lib-add-ex {
  border: 1.5px dashed var(--hp-forest) !important;
  background: rgba(31,58,46,0.04) !important;
  color: var(--hp-forest) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 9px !important;
}
body .lib-save-custom {
  border: 1.5px solid var(--hp-hair) !important;
  background: var(--hp-cream-elev) !important;
  color: var(--hp-ink) !important;
  border-radius: 9px !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
}

/* Library row track-color pills */
body .lib-item[data-track="nutrition"] .lib-head .pill-track { background: var(--hp-chartreuse) !important; }
body .lib-item[data-track="habits"]    .lib-head .pill-track { background: var(--hp-ink-2) !important; }


/* ===== END · PHASE 2 · A1·CONTINUED · 3 FUSION GAPS ===== */


/* ============================================================ */
/* PHASE 2 · OPERATOR-DIRECTED FIXES · fix2                     */
/* (1) Remove Client App from sidebar — Workshop covers it      */
/* (2) Habits Edit Pack modal interior — kill remaining fusion  */
/* ============================================================ */

/* (1) Hide Client App sidebar item completely. JS handlers preserved
       (button still exists in DOM, just not visible). Workshop covers this. */
body #sideClientAppBtn { display: none !important; }

/* (2) Habits Edit Pack modal interior
       Triggered by clicking a habit pack card (`.habits-v2-card[data-hv2-pack-id]`)
       which calls openHabitPackDrawer(). Renders inside the drawer with this markup
       (see admin.html lines 22287-22295):
         <div class="habits-v2-field serif">
           <label>Pack name</label>
           <input id="hv2PackName" ...>
         </div>
         <div class="habits-v2-field"><textarea id="hv2PackDesc" ...></textarea></div>
         <div class="habits-v2-section-title">Habits in this pack · drag to reorder</div>
         <div id="hv2PackHabits">.habits-v2-row × N (draggable, with .h-rm × button)</div>
         <button class="habits-v2-add-inline" id="hv2PackAddBtn">+ Add habit from library</button>
*/

/* "EDIT PACK" eyebrow + section labels (e.g. "HABITS IN THIS PACK · DRAG TO REORDER") */
body .habits-v2-section-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
  margin: 22px 0 12px !important;
}

/* Field labels (PACK NAME, DESCRIPTION) — magazine eyebrow grammar */
body .habits-v2-field { margin-bottom: 18px !important; }
body .habits-v2-field > label {
  display: block !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
  margin-bottom: 8px !important;
}

/* Pack name input — Fraunces italic display treatment */
body #hv2PackName {
  width: 100% !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  color: var(--hp-ink) !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  font-style: italic !important;
  font-variation-settings: "opsz" 96 !important;
  transition: border-color .14s ease, box-shadow .14s ease !important;
}

/* Description textarea — DM Sans body */
body #hv2PackDesc {
  width: 100% !important;
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  color: var(--hp-ink) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  min-height: 78px !important;
  resize: vertical !important;
  transition: border-color .14s ease, box-shadow .14s ease !important;
}

body #hv2PackName:focus,
body #hv2PackDesc:focus {
  border-color: var(--hp-forest) !important;
  box-shadow: 0 0 0 3px rgba(31,58,46,.12) !important;
  outline: none !important;
}

body #hv2PackName::placeholder,
body #hv2PackDesc::placeholder {
  color: var(--hp-muted) !important;
  font-style: italic !important;
}

/* Habit rows (draggable list inside #hv2PackHabits) */
body #hv2PackHabits .habits-v2-row {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  color: var(--hp-ink) !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease !important;
  cursor: grab !important;
}
body #hv2PackHabits .habits-v2-row:hover {
  border-color: var(--hp-forest) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
  transform: translate(-1px, -1px) !important;
}
body #hv2PackHabits .habits-v2-row:active { cursor: grabbing !important; }

/* Habit name inside row — Fraunces italic */
body #hv2PackHabits .habits-v2-row > div:not(.h-rm),
body #hv2PackHabits .habits-v2-row .habit-name,
body #hv2PackHabits .habits-v2-row > span:not([class*="drag"]):not(.h-rm) {
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: var(--hp-ink) !important;
}
/* Time/meta sub-label under habit name (e.g. "at 08:00") */
body #hv2PackHabits .habits-v2-row .habit-meta,
body #hv2PackHabits .habits-v2-row .habit-time,
body #hv2PackHabits .habits-v2-row small {
  font-family: 'DM Sans', sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--hp-muted) !important;
}

/* Remove (X) button per row */
body #hv2PackHabits .habits-v2-row .h-rm,
body .h-rm[data-hv2-pack-rm] {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 10px !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--hp-ink-2) !important;
  cursor: pointer !important;
  margin-left: auto !important;
  transition: all .12s ease !important;
}
body #hv2PackHabits .habits-v2-row .h-rm:hover,
body .h-rm[data-hv2-pack-rm]:hover {
  border-color: #9C2A2A !important;
  color: #9C2A2A !important;
  background: rgba(156,42,42,0.06) !important;
}

/* "+ Add habit from library" CTA — dashed forest, fills on hover */
body .habits-v2-add-inline,
body #hv2PackAddBtn {
  width: 100% !important;
  background: transparent !important;
  border: 2px dashed var(--hp-forest) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  color: var(--hp-forest) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all .14s ease !important;
  margin-top: 14px !important;
}
body .habits-v2-add-inline:hover,
body #hv2PackAddBtn:hover {
  background: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest) !important;
  border-style: solid !important;
  color: var(--hp-forest) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
  transform: translate(-1px, -1px) !important;
}

/* EDIT PACK drawer eyebrow at top — already styled by A2 .habits-v2-drawer-crumb override, reinforce here */
body .habits-v2-drawer .habits-v2-drawer-crumb,
body #habitsV2Drawer .habits-v2-drawer-crumb {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
}

/* Empty state inside pack picker */
body #hv2PackHabits > div[style*="color"]:not(.habits-v2-row) {
  background: transparent !important;
  border: 1.5px dashed var(--hp-hair) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  text-align: center !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--hp-muted) !important;
}

/* ===== END · PHASE 2 · fix2 ===== */


/* ============================================================ */
/* PHASE 2 · OPERATOR-DIRECTED FIXES · fix3                     */
/* DIRECTION CHANGE: sidebar + table headers should match       */
/* Content Engine (forest bg + chartreuse active + cream-ink),  */
/* NOT the cream-on-cream login.html pattern.                   */
/* Aesthetic source = vault/00_Brain/content-dashboard.html.    */
/* ============================================================ */

/* ===== Sidebar — FOREST GREEN ===== */

body aside.side,
body .side {
  background: var(--hp-forest) !important;
  color: var(--hp-forest-ink) !important;
  border-right: 1.5px solid var(--hp-forest-deep) !important;
}

/* Logo/brand at top of sidebar */
body .side .brand,
body .side-brand {
  color: var(--hp-forest-ink) !important;
}
body .side .brand,
body .brand {
  color: var(--hp-forest-ink) !important;
}
/* Wordmark "Superhuman Code" — Fraunces italic on cream-ink */
body .side .brand > div:first-child,
body .brand > div:first-child,
body .side .brand-name {
  color: var(--hp-forest-ink) !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
}
/* "COACH STUDIO" subtitle */
body .side .brand > div:last-child,
body .brand > div:last-child,
body .side .brand-sub {
  color: var(--hp-chartreuse) !important;
  opacity: 0.85 !important;
}

/* Sidebar collapse toggle button */
body .side-toggle,
body #sideCollapseBtn {
  background: rgba(231,237,216,0.10) !important;
  border: 1px solid rgba(231,237,216,0.20) !important;
  color: var(--hp-forest-ink) !important;
}
body .side-toggle:hover,
body #sideCollapseBtn:hover {
  background: rgba(231,237,216,0.18) !important;
  border-color: var(--hp-chartreuse) !important;
  color: var(--hp-chartreuse) !important;
}

/* Nav items — default state (cream-ink on forest) */
body .side .nav-item,
body aside.side .nav-item {
  background: transparent !important;
  color: var(--hp-forest-ink) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin: 2px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  transition: background-color .14s ease, color .14s ease !important;
}
body .side .nav-item .nav-icon,
body aside.side .nav-item .nav-icon {
  color: var(--hp-forest-ink) !important;
  opacity: 0.7 !important;
}

/* Hover */
body .side .nav-item:not(.active):not(.inert):hover,
body aside.side .nav-item:not(.active):not(.inert):hover {
  background: rgba(231,237,216,0.12) !important;
  color: var(--hp-forest-ink) !important;
}
body .side .nav-item:not(.active):not(.inert):hover .nav-icon {
  opacity: 1 !important;
}

/* Active state — chartreuse pill + forest text + chartreuse dot remains */
body .side .nav-item.active,
body aside.side .nav-item.active {
  background: var(--hp-chartreuse) !important;
  color: var(--hp-forest) !important;
  font-weight: 700 !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
}
body .side .nav-item.active .nav-icon,
body aside.side .nav-item.active .nav-icon {
  color: var(--hp-forest) !important;
  opacity: 1 !important;
}
body .side .nav-item.active::after,
body aside.side .nav-item.active::after {
  display: none !important; /* kill the chartreuse-on-cream dot from earlier — pill itself is the marker */
}

/* Inert items (Community / Teams / Autoflow + "SOON" pills) */
body .side .nav-item.inert,
body aside.side .nav-item.inert {
  background: transparent !important;
  color: rgba(231,237,216,0.42) !important;
  cursor: default !important;
}
body .side .nav-item.inert .nav-icon {
  color: rgba(231,237,216,0.42) !important;
  opacity: 0.5 !important;
}
body .side .nav-item.inert::after {
  background: transparent !important;
  border: 1px solid rgba(231,237,216,0.32) !important;
  color: rgba(231,237,216,0.65) !important;
}

/* Bottom-pinned: Refer & Earn + Chat with us */
body .side-foot,
body .side .side-foot {
  border-top: 1px solid rgba(231,237,216,0.16) !important;
  padding-top: 12px !important;
  background: transparent !important;
}
body .side-refer {
  background: transparent !important;
  border: 1.5px solid var(--hp-chartreuse) !important;
  color: var(--hp-chartreuse) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
body .side-refer:hover {
  background: var(--hp-chartreuse) !important;
  color: var(--hp-forest) !important;
}
body .side-chat {
  color: var(--hp-forest-ink) !important;
}
body .side-chat .av,
body .side-chat .avatar {
  background: var(--hp-chartreuse) !important;
  color: var(--hp-forest) !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
}

/* Account avatar pill in top-right (was forest squircle from Phase 1 — keep) */
/* (no change — already correct) */

/* ===== Table headers — FOREST GREEN BAR ===== */

body .table-wrap thead,
body .table-wrap thead tr,
body table.table-fill thead,
body table.checkins-hub-table thead,
body table.tasks-hub-table thead,
body #clientsView table thead,
body #checkinsHubView table thead,
body #tasksHubView table thead,
body #coachesView table thead {
  background: var(--hp-forest) !important;
}

body .table-wrap thead th,
body table.table-fill thead th,
body table.checkins-hub-table thead th,
body table.tasks-hub-table thead th,
body #clientsView table thead th,
body #checkinsHubView table thead th,
body #tasksHubView table thead th,
body #coachesView table thead th {
  background: var(--hp-forest) !important;
  color: var(--hp-forest-ink) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 14px 12px !important;
  border-bottom: 1.5px solid var(--hp-forest-deep) !important;
  text-align: left !important;
}

body .table-wrap thead th:first-child,
body table.table-fill thead th:first-child {
  border-top-left-radius: 14px !important;
  padding-left: 18px !important;
}
body .table-wrap thead th:last-child,
body table.table-fill thead th:last-child {
  border-top-right-radius: 14px !important;
  padding-right: 18px !important;
}

/* Sort indicators on table headers */
body .table-wrap thead th:hover:not(.nosort),
body table.table-fill thead th:hover:not(.nosort) {
  color: var(--hp-chartreuse) !important;
  cursor: pointer !important;
}
body .table-wrap thead th.sorted,
body .table-wrap thead th[aria-sort],
body table.table-fill thead th.sorted,
body table.table-fill thead th[aria-sort] {
  color: var(--hp-chartreuse) !important;
}
body .table-wrap thead th .sar,
body .table-wrap thead th .sort-arrow,
body .table-wrap thead th svg.sort {
  color: var(--hp-chartreuse) !important;
  fill: var(--hp-chartreuse) !important;
}

/* Round the table-wrap top corners so the forest header bar sits flush */
body .table-wrap,
body .panel .table-wrap {
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* ===== END · PHASE 2 · fix3 ===== */


/* ============================================================ */
/* PHASE 2 · OPERATOR-DIRECTED FIXES · fix3c                    */
/* Specificity hardening — beat A1's per-view ID-prefixed       */
/* table-header rules so the forest bar wins.                   */
/* Also chartreuse the "Coach Studio" subtitle.                 */
/* ============================================================ */

/* Brand subtitle "Coach Studio" — chartreuse on forest */
body .side .brand small,
body aside.side .brand small {
  color: var(--hp-chartreuse) !important;
}
body .side .brand small::before,
body aside.side .brand small::before {
  background: var(--hp-chartreuse) !important;
  box-shadow: 0 0 0 2px rgba(201,242,94,0.30) !important;
}

/* Table headers across all sections — FOREST BAR with cream-ink uppercase */
body #clientsView .table-wrap thead,
body #checkinsHubView .table-wrap thead,
body #tasksHubView .table-wrap thead,
body #coachesView .table-wrap thead,
body #packagesHubView .table-wrap thead,
body #habitsHubView .table-wrap thead,
body #formsHubView .table-wrap thead,
body #resourcesHubView .table-wrap thead,
body #onboardingHubView .table-wrap thead,
body #trainingHubView .table-wrap thead,
body #nutritionHubView .table-wrap thead {
  background: var(--hp-forest) !important;
}

body #clientsView .table-wrap thead th,
body #checkinsHubView .table-wrap thead th,
body #tasksHubView .table-wrap thead th,
body #coachesView .table-wrap thead th,
body #packagesHubView .table-wrap thead th,
body #habitsHubView .table-wrap thead th,
body #formsHubView .table-wrap thead th,
body #resourcesHubView .table-wrap thead th,
body #onboardingHubView .table-wrap thead th,
body #trainingHubView .table-wrap thead th,
body #nutritionHubView .table-wrap thead th {
  background: var(--hp-forest) !important;
  color: var(--hp-forest-ink) !important;
  font-family: var(--hp-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  padding: 14px 18px !important;
  border-bottom: 1.5px solid var(--hp-forest-deep) !important;
  text-align: left !important;
}

/* First/last cell radius for the forest bar to sit flush */
body #clientsView .table-wrap thead th:first-child,
body #checkinsHubView .table-wrap thead th:first-child,
body #tasksHubView .table-wrap thead th:first-child,
body #coachesView .table-wrap thead th:first-child,
body #packagesHubView .table-wrap thead th:first-child {
  border-top-left-radius: 14px !important;
}
body #clientsView .table-wrap thead th:last-child,
body #checkinsHubView .table-wrap thead th:last-child,
body #tasksHubView .table-wrap thead th:last-child,
body #coachesView .table-wrap thead th:last-child,
body #packagesHubView .table-wrap thead th:last-child {
  border-top-right-radius: 14px !important;
}

/* Sort indicator chartreuse */
body #clientsView .table-wrap thead th:hover:not(.nosort),
body #checkinsHubView .table-wrap thead th:hover:not(.nosort),
body #tasksHubView .table-wrap thead th:hover:not(.nosort),
body #coachesView .table-wrap thead th:hover:not(.nosort),
body #packagesHubView .table-wrap thead th:hover:not(.nosort) {
  color: var(--hp-chartreuse) !important;
  cursor: pointer !important;
}

body #clientsView .table-wrap thead th.sorted,
body #checkinsHubView .table-wrap thead th.sorted,
body #tasksHubView .table-wrap thead th.sorted,
body #coachesView .table-wrap thead th.sorted,
body #packagesHubView .table-wrap thead th.sorted,
body #clientsView .table-wrap thead th[aria-sort],
body #checkinsHubView .table-wrap thead th[aria-sort],
body #tasksHubView .table-wrap thead th[aria-sort],
body #coachesView .table-wrap thead th[aria-sort],
body #packagesHubView .table-wrap thead th[aria-sort] {
  color: var(--hp-chartreuse) !important;
}

/* ===== END · PHASE 2 · fix3c ===== */


/* ============================================================ */
/* PHASE 2 · OPERATOR-DIRECTED FIXES · fix4                     */
/* Root cause: prior agents styled phantom classes (.coach-card-* */
/* which is dead template CSS; JS renders .cc-* instead).         */
/* Also fixing library-card interiors (.lib-item, .training-      */
/* library-item, .habit-library-item, metric/habit ghost-btns),  */
/* settings rows, Today button sizing, title chartreuse accent,  */
/* and Training section bg fusion.                               */
/* ============================================================ */

/* ===== Coaches grid — REAL .cc-* classes (not phantom .coach-card-*) ===== */

body #coachesView .cc-card {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 16px !important;
  padding: 18px 18px 14px !important;
  box-shadow: 4px 4px 0 rgba(20,40,34,0.04) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}
body #coachesView .cc-card:hover {
  border-color: var(--hp-forest) !important;
  box-shadow: 6px 6px 0 var(--hp-forest-deep) !important;
  transform: translate(-2px,-2px) !important;
}

body #coachesView .cc-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

/* Coach avatar — render as forest squircle with chartreuse Fraunces initial */
body #coachesView .cc-card .row-avatar {
  background: var(--hp-forest) !important;
  background-image: none !important;
  color: var(--hp-chartreuse) !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 17px !important;
  box-shadow: 2px 2px 0 var(--hp-forest-deep) !important;
  flex-shrink: 0 !important;
}

body #coachesView .cc-name {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  color: var(--hp-ink) !important;
  line-height: 1.15 !important;
}

body #coachesView .cc-handle {
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  color: var(--hp-muted) !important;
  margin-top: 2px !important;
}

body #coachesView .cc-stats {
  display: flex !important;
  gap: 0 !important;
  padding: 12px 0 14px !important;
  border-top: 1px solid var(--hp-hair) !important;
  border-bottom: 1px solid var(--hp-hair) !important;
  margin-bottom: 14px !important;
}
body #coachesView .cc-stat {
  flex: 1 !important;
  border-right: 1px solid var(--hp-hair) !important;
  padding: 0 12px !important;
}
body #coachesView .cc-stat:last-child { border-right: 0 !important; }

body #coachesView .cc-stat-label {
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--hp-ink-2) !important;
  margin-bottom: 4px !important;
}
body #coachesView .cc-stat-val {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: var(--hp-ink) !important;
}

/* "View workspace →" → forest sticker primary */
body #coachesView .cc-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  background: var(--hp-forest) !important;
  background-image: none !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  border-bottom-color: var(--hp-forest-deep) !important;
  border-radius: 10px !important;
  color: var(--hp-chartreuse) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}
body #coachesView .cc-link:hover {
  transform: translate(-1px,-1px) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
  border-bottom-color: var(--hp-forest-deep) !important;
}

body #coachesView .overflow-btn {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 8px !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--hp-ink-2) !important;
  cursor: pointer !important;
  font-size: 16px !important;
  margin-left: auto !important;
}
body #coachesView .overflow-btn:hover {
  border-color: var(--hp-forest) !important;
  color: var(--hp-forest) !important;
}

body #coachesView .cc-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body #coachesView .cc-menu {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}
body #coachesView .cc-menu button {
  font-family: var(--hp-body) !important;
  color: var(--hp-ink) !important;
  padding: 8px 12px !important;
}
body #coachesView .cc-menu button.danger {
  color: var(--hp-danger) !important;
}

/* ===== Training Library cards (Workout Library inside Client Detail) ===== */

body .training-library-list {
  background: transparent !important;
}
body .training-library-item {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-left: 5px solid var(--hp-forest) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}
body .training-library-item:hover {
  border-color: var(--hp-forest) !important;
  border-left-color: var(--hp-chartreuse) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px) !important;
  cursor: pointer !important;
}
body .training-library-item.active {
  background: var(--hp-cream-elev) !important;
  border-color: var(--hp-forest) !important;
  border-left-color: var(--hp-chartreuse) !important;
  border-left-width: 5px !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}
body .training-library-item:last-child { margin-bottom: 0 !important; }

body .training-library-thumb {
  background: var(--hp-cream) !important;
  border: 1px solid var(--hp-hair) !important;
  border-radius: 8px !important;
}

/* ===== Habit Library cards (inside Client Detail right pane) ===== */

body .habit-library-list { background: transparent !important; }
body .habit-library-item {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-left: 5px solid var(--hp-forest) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  cursor: grab !important;
  transition: all .14s ease !important;
}
body .habit-library-item:hover {
  border-color: var(--hp-forest) !important;
  border-left-color: var(--hp-chartreuse) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px) !important;
}
body .habit-library-item.active {
  background: var(--hp-cream-elev) !important;
  border-left-color: var(--hp-chartreuse) !important;
}
body .habit-library-item-title {
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--hp-ink) !important;
}
body .habit-library-item-sub {
  font-family: var(--hp-body) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--hp-muted) !important;
  margin-top: 2px !important;
}

/* ===== Metric/Habit library ghost buttons (data-{metric|habit}-lib-id) ===== */

body button.ghost-btn[data-metric-lib-id],
body button.ghost-btn[data-habit-lib-id] {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-left: 5px solid var(--hp-forest) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
  width: 100% !important;
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--hp-ink) !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all .14s ease !important;
}
body button.ghost-btn[data-metric-lib-id]:hover,
body button.ghost-btn[data-habit-lib-id]:hover {
  border-color: var(--hp-forest) !important;
  border-left-color: var(--hp-chartreuse) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px) !important;
}
body button.ghost-btn.primary-btn[data-metric-lib-id],
body button.ghost-btn.primary-btn[data-habit-lib-id] {
  background: var(--hp-cream-elev) !important;
  border-left-color: var(--hp-chartreuse) !important;
}

/* ===== Generic .lib-item (used inside many drill-downs) ===== */

body .lib-item {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-left: 5px solid var(--hp-forest) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  transition: all .14s ease !important;
}
body .lib-item:hover {
  border-color: var(--hp-forest) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px) !important;
}
body .lib-item[data-track="nutrition"] { border-left-color: var(--hp-chartreuse) !important; }
body .lib-item[data-track="training"]  { border-left-color: var(--hp-forest) !important; }
body .lib-item[data-track="habits"]    { border-left-color: var(--hp-ink-2) !important; }
body .lib-item .lib-head { color: var(--hp-ink) !important; font-family: var(--hp-display) !important; font-style: italic !important; }
body .lib-item .lib-head .pill-track {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}
body .lib-item[data-track="nutrition"] .lib-head .pill-track { background: var(--hp-chartreuse) !important; color: var(--hp-forest) !important; }
body .lib-item.open .expand-btn { color: var(--hp-forest) !important; }

/* ===== Metric rows (.metric-row) ===== */

body .metric-row {
  background: var(--hp-cream-elev) !important;
  border-bottom: 1px solid var(--hp-hair) !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  padding: 10px 14px !important;
}
body .metric-row span.muted {
  color: var(--hp-muted) !important;
  font-family: var(--hp-display) !important;
  font-style: italic !important;
}

/* ===== Settings rows (Profile & contact / Plan & billing / Notifications) ===== */

body .mob-drawer-link {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 14px 18px !important;
  margin-bottom: 8px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  transition: all .14s ease !important;
}
body .mob-drawer-link:hover,
body .mob-drawer-link:active,
body .mob-drawer-link.active {
  background: var(--hp-cream-elev) !important;
  border-color: var(--hp-forest) !important;
  color: var(--hp-ink) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px) !important;
}
body .mob-drawer-link .dicon {
  color: var(--hp-forest) !important;
  font-size: 16px !important;
}
/* "Open →" link inside settings row */
body .mob-drawer-link::after {
  content: "Open →" !important;
  margin-left: auto !important;
  color: var(--hp-forest) !important;
  font-family: var(--hp-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

/* ===== Today button (#bcalToday) — make it big enough for "TODAY" text ===== */

body #bcalToday,
body .bcal-today-btn {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 10px 18px !important;
  min-width: 90px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body #bcalToday:hover,
body .bcal-today-btn:hover {
  border-color: var(--hp-forest) !important;
  color: var(--hp-forest) !important;
}

/* ===== Section titles — chartreuse highlighter accent (Image 16 reference) ===== */
/* Apply a chartreuse highlight stripe across the lower portion of every section title,
   mimicking "The swipe FILE." editorial accent without requiring markup changes. */

body .title-row,
body #pageTitle {
  display: inline-block !important;
  width: fit-content !important;
  max-width: max-content !important;
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 64%,
    var(--hp-chartreuse) 64%,
    var(--hp-chartreuse) 86%,
    transparent 86%,
    transparent 100%
  ) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  padding: 0 12px !important;
  margin-left: -12px !important;
}
  -webkit-box-decoration-break: clone !important;
}

/* ===== Training section — kill the white-on-cream fusion (Image 18) ===== */
/* The trainhub-v2-hero etc. were styled cream-elev by A3, but a wrapping element
   somewhere has white bg making the section look like white-inside-cream sandwich.
   Force the outer #trainingHubView and nested wrappers to cream. */

body #trainingHubView,
body #trainingHubView > div,
body #trainingHubView .trainhub-v2-shell,
body #trainingHubView .trainhub-v2-content {
  background: var(--hp-cream) !important;
}
body #trainingHubView .trainhub-v2-hero,
body #trainingHubView .trainhub-v2-stats {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
}

/* ===== END · PHASE 2 · fix4 ===== */


/* ============================================================ */
/* PHASE 2 · OPERATOR-DIRECTED FIXES · fix5                     */
/* Fusion still inside Client Details drilldown:                */
/*  (1) Settings rows — render with INLINE bg:#FEFEFE (white)   */
/*      for unchecked + gold tints for checked. Inline styles   */
/*      beat external CSS unless we use !important + attribute  */
/*      selectors. Both Branding/Integrations rows looked white.*/
/*  (2) Vault items — same inline bg:#FEFEFE on every file row. */
/*  (3) Open → buttons inside settings rows have inline gold.   */
/*  (4) Photo cards similar inline cream + gold-border.         */
/* Source: admin.html JS templates at lines 46973 (settings),   */
/*         47099 (vault items), 47266 (photo cards), 47081      */
/*         (vault filter chips).                                */
/* ============================================================ */

/* (1) Settings rows — label[data-bs-id] */
body label[data-bs-id] {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-family: var(--hp-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--hp-ink) !important;
  transition: border-color .14s ease, box-shadow .14s ease !important;
  margin-bottom: 6px !important;
}
body label[data-bs-id]:hover {
  border-color: var(--hp-forest) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px) !important;
}
/* Checkbox inside the row — forest+chartreuse accent (replaces gold accent-color) */
body label[data-bs-id] input[type="checkbox"][data-bs-toggle] {
  accent-color: var(--hp-forest) !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
}
/* The label text */
body label[data-bs-id] span {
  font-family: var(--hp-body) !important;
  color: var(--hp-ink) !important;
  font-weight: 600 !important;
}
/* Open → button inside row — forest sticker mini */
body button[data-bs-open] {
  background: var(--hp-forest) !important;
  border: 1.5px solid var(--hp-forest-deep) !important;
  border-radius: 8px !important;
  color: var(--hp-chartreuse) !important;
  font-family: var(--hp-body) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 5px 10px !important;
  cursor: pointer !important;
  box-shadow: 2px 2px 0 var(--hp-forest-deep) !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}
body button[data-bs-open]:hover {
  transform: translate(-1px,-1px) !important;
  box-shadow: 3px 3px 0 var(--hp-forest-deep) !important;
}

/* (2) Vault items — div.vault-item[data-v-id] */
body div.vault-item[data-v-id],
body .vault-item {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-left: 4px solid var(--hp-forest) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-family: var(--hp-body) !important;
  color: var(--hp-ink) !important;
  transition: border-color .14s ease, box-shadow .14s ease !important;
  margin-bottom: 8px !important;
}
body div.vault-item[data-v-id]:hover,
body .vault-item:hover {
  border-color: var(--hp-forest) !important;
  border-left-color: var(--hp-chartreuse) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
  transform: translate(-1px,-1px) !important;
}
/* File name inside vault item */
body div.vault-item > div {
  font-family: var(--hp-body) !important;
  color: var(--hp-ink) !important;
}
/* Size + type sub-label */
body div.vault-item div[style*="9B958E"],
body div.vault-item div[style*="margin-top:2px"] {
  color: var(--hp-muted) !important;
  font-family: var(--hp-body) !important;
  font-size: 11px !important;
}

/* (3) Vault filter chips (.bcal-trk inside vault) — active state has inline gold */
body button[data-v-filter].bcal-trk.active,
body button[data-v-filter][style*="rgba(201,169,110"] {
  background: var(--hp-forest) !important;
  color: var(--hp-chartreuse) !important;
  border-color: var(--hp-forest-deep) !important;
}

/* (4) Photo cards — div.photo-card[data-p-id] with inline #FBF8F1 cream + #E8E2D6 hair */
body div.photo-card[data-p-id],
body .photo-card {
  background: var(--hp-cream-elev) !important;
  border: 1.5px solid var(--hp-hair) !important;
  border-radius: 12px !important;
  transition: border-color .14s ease, box-shadow .14s ease !important;
}
body div.photo-card[data-p-id]:hover,
body .photo-card:hover {
  border-color: var(--hp-forest) !important;
  box-shadow: 4px 4px 0 var(--hp-forest-deep) !important;
}

/* (5) Progress photo row inside Client Details (.photo-row) */
body .photo-row {
  background: var(--hp-cream-elev) !important;
  border-bottom: 1.5px solid var(--hp-hair) !important;
  color: var(--hp-ink) !important;
  font-family: var(--hp-body) !important;
}
body .photo-row.active {
  background: var(--hp-cream-elev) !important;
  border-left: 4px solid var(--hp-chartreuse) !important;
}
body .photo-row-main { color: var(--hp-ink) !important; font-family: var(--hp-body) !important; }
body .photo-row-meta { color: var(--hp-muted) !important; font-family: var(--hp-body) !important; font-size: 11px !important; }

/* (6) Drop-files zone (the "Drop files here — or tap '+ Upload'" box) */
body .vault-drop-zone,
body [class*="vault"][style*="dashed"],
body div[style*="border:2px dashed"][style*="vault"],
body div[style*="Drop files here"] {
  border: 2px dashed var(--hp-hair) !important;
  background: transparent !important;
  border-radius: 14px !important;
  color: var(--hp-ink-2) !important;
}

/* ===== END · PHASE 2 · fix5 ===== */


/* ============================================================ */
/* PHASE 2 · OPERATOR-DIRECTED FIXES · fix6                     */
/* Operator screenshot 2026-05-26: #trainingHubContent.panel    */
/* was rendering rgb(252,252,251) (off-white) while sidebar +   */
/* hero card around it were cream — clear fusion. fix4 styled   */
/* trainhub-v2-shell/content but missed the literal             */
/* #trainingHubContent ID wrapper.                              */
/* ============================================================ */

body #trainingHubContent,
body #trainingHubContent.panel {
  background: var(--hp-cream) !important;
}

/* Defensive — every section's inner content wrapper that follows the
   "#<view>Content" pattern. If any other section has the same wrapper
   issue, this catches it without needing per-section fixes. */
body [id$="HubContent"],
body [id$="HubContent"].panel {
  background: var(--hp-cream) !important;
}

/* ===== END · PHASE 2 · fix6 ===== */

/* Patch fix6b — admin.html uses #trainingHubView #trainingHubContent (2-ID
   specificity) setting --thv2-cream which renders as off-white #FCFCFB.
   Match the 2-ID specificity to override. */
body #trainingHubView #trainingHubContent,
body #trainingHubView #trainingHubContent.panel {
  background: var(--hp-cream) !important;
}
/* Also re-alias --thv2-cream itself so any other rule using it picks up Hipster */
:root {
  --thv2-cream: var(--hp-cream) !important;
  --thv2-white: var(--hp-cream-elev) !important;
  --thv2-border: var(--hp-hair) !important;
  --thv2-border-strong: var(--hp-forest) !important;
  --thv2-muted: var(--hp-muted) !important;
  --thv2-gold: var(--hp-forest) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   VAULT LAB — "Client Archive" editorial redesign (renderVaultLab)
   Original layout: masthead + table-of-contents filter rail + ledger groups.
   Replaces the old gold chip/dropzone/card-list. Hipster tokens only.
   ══════════════════════════════════════════════════════════════════════ */
.vlab {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 920px;
  font-family: var(--hp-body);
  color: var(--hp-ink);
}

/* ── Masthead ──────────────────────────────────────────────────────── */
.vlab-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--hp-hair);
}
.vlab-head-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vlab-eyebrow {
  font: 700 10px/1 var(--hp-body);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hp-forest);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.vlab-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hp-chartreuse);
  box-shadow: 0 0 0 2px rgba(31,58,46,0.08);
}
.vlab-title {
  margin: 0;
  font: 900 italic 31px/0.98 var(--hp-display);
  letter-spacing: -0.01em;
  color: var(--hp-ink);
  font-variant-ligatures: no-common-ligatures;
}
.vlab-sub { margin: 0; font: 500 12.5px/1.3 var(--hp-body); color: var(--hp-muted); }

/* Sticker CTA — the Hipster signature offset shadow */
.vlab-upload {
  flex-shrink: 0;
  font: 700 13px/1 var(--hp-body);
  letter-spacing: 0.01em;
  color: var(--hp-chartreuse);
  background: var(--hp-forest);
  border: 1.5px solid var(--hp-forest-deep);
  border-radius: 12px;
  padding: 12px 18px;
  cursor: pointer;
  box-shadow: var(--hp-shadow-sticker);
  transition: transform .12s var(--hp-ease), box-shadow .12s var(--hp-ease), background .12s var(--hp-ease);
}
.vlab-upload::before { content: "↑ "; opacity: 0.9; }
.vlab-upload:hover { background: #244435; }
.vlab-upload:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--hp-forest-deep); }
.vlab-upload:disabled { opacity: 0.6; cursor: progress; transform: none; box-shadow: var(--hp-shadow-sticker-sm); }

/* ── Filter rail (table of contents) ──────────────────────────────── */
.vlab-index { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: baseline; }
.vlab-idx {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 0 6px;
  cursor: pointer;
  font: 600 14px/1 var(--hp-body);
  color: var(--hp-muted);
  border-bottom: 2px solid transparent;
  transition: color .12s var(--hp-ease), border-color .12s var(--hp-ease);
}
.vlab-idx:hover { color: var(--hp-ink-2); }
.vlab-idx-n {
  font: 700 10px/1 var(--hp-body);
  vertical-align: super;
  margin-left: 3px;
  color: var(--hp-muted);
}
.vlab-idx.is-active { color: var(--hp-ink); border-bottom-color: var(--hp-chartreuse); }
.vlab-idx.is-active .vlab-idx-n { color: var(--hp-forest); }

/* ── Drop affordance (slim, integrated) ───────────────────────────── */
.vlab-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 16px;
  background: var(--hp-cream-elev);
  border: 1.5px dashed var(--hp-hair);
  border-radius: 12px;
  cursor: pointer;
  font: 500 12.5px/1 var(--hp-body);
  color: var(--hp-muted);
  transition: background .15s var(--hp-ease), border-color .15s var(--hp-ease);
}
.vlab-drop-cta { font-weight: 700; color: var(--hp-forest); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.vlab-drop:hover { border-color: var(--hp-forest); }
.vlab-drop.is-drag { background: rgba(201,242,94,0.18); border-color: var(--hp-forest); border-style: solid; color: var(--hp-ink); }

/* ── Archive groups (ledger pages) ────────────────────────────────── */
.vlab-archive { display: flex; flex-direction: column; gap: 16px; }
.vlab-group {
  background: var(--hp-paper);
  border: 1.5px solid var(--hp-hair);
  border-radius: 14px;
  padding: 6px 16px 8px;
  box-shadow: var(--hp-shadow-card);
}
.vlab-date { display: flex; align-items: center; gap: 12px; padding: 12px 0 8px; }
.vlab-date-t { font: 400 italic 15px/1 var(--hp-display); color: var(--hp-ink); white-space: nowrap; }
.vlab-date-rule { flex: 1; height: 1px; background: var(--hp-hair); }
.vlab-date-n { font: 700 9.5px/1 var(--hp-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hp-muted); white-space: nowrap; }

.vlab-rows { list-style: none; margin: 0; padding: 0; }
.vlab-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  transition: background .12s var(--hp-ease);
}
.vlab-row + .vlab-row { border-top: 1px solid var(--hp-hair-2); }
.vlab-row:hover { background: var(--hp-cream); border-top-color: transparent; }

/* Typographic file stamp instead of an emoji */
.vlab-tag {
  flex-shrink: 0;
  width: 44px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hp-forest);
  color: var(--hp-chartreuse);
  border-radius: 9px;
  font: 800 10.5px/1 ui-monospace, 'SF Mono', 'DM Mono', monospace;
  letter-spacing: 0.03em;
}
.vlab-tag[data-type="images"] { background: #2C4A3A; }
.vlab-tag[data-type="media"]  { background: #3A2C1F; color: var(--hp-forest-ink); }
.vlab-tag[data-type="forms"]  { background: var(--hp-forest-deep); }
.vlab-tag[data-type="other"]  { background: #4A4034; color: var(--hp-forest-ink); }

.vlab-file { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.vlab-name {
  font: 600 14px/1.25 var(--hp-body);
  color: var(--hp-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vlab-meta { font: 500 11.5px/1 var(--hp-body); color: var(--hp-muted); }

.vlab-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.vlab-open {
  font: 700 11px/1 var(--hp-body);
  color: var(--hp-ink-2);
  background: var(--hp-cream-elev);
  border: 1.5px solid var(--hp-hair);
  border-radius: 8px;
  padding: 6px 12px;
  text-decoration: none;
  transition: border-color .12s var(--hp-ease), color .12s var(--hp-ease);
}
.vlab-open:hover { border-color: var(--hp-forest); color: var(--hp-forest); }
.vlab-del {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent;
  color: var(--hp-muted);
  font-size: 19px; line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s var(--hp-ease), color .12s var(--hp-ease);
}
.vlab-del:hover { background: rgba(156,42,42,0.10); color: var(--hp-danger); }

/* ── Empty state ──────────────────────────────────────────────────── */
.vlab-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  padding: 48px 24px;
  background: var(--hp-cream-elev);
  border: 1.5px solid var(--hp-hair);
  border-radius: 14px;
}
.vlab-empty-h { margin: 4px 0 0; font: 400 italic 22px/1.1 var(--hp-display); color: var(--hp-ink); }
.vlab-empty-p { margin: 0; font: 500 13px/1.4 var(--hp-body); color: var(--hp-muted); max-width: 42ch; }

@media (max-width: 560px) {
  .vlab-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .vlab-upload { align-self: stretch; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════════
   PHOTOS LAB — "Progress Gallery" (renderPhotosLab). Sibling of the Vault
   lab: shares the .vlab masthead/index/date grammar, adds a gallery grid.
   ══════════════════════════════════════════════════════════════════════ */
.vlab-head-r { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Voice-note pill (secondary, sits left of the Upload sticker) */
.vlab-voice {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 11.5px/1 var(--hp-body);
  color: var(--hp-ink-2);
  background: var(--hp-cream-elev);
  border: 1.5px solid var(--hp-hair);
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
  transition: border-color .12s var(--hp-ease), color .12s var(--hp-ease);
}
.vlab-voice svg { width: 13px; height: 13px; }
.vlab-voice:hover { border-color: var(--hp-forest); color: var(--hp-forest); }
.vlab-voice.listening { border-color: var(--hp-danger); color: var(--hp-danger); }

/* Time-range segmented control */
.plab-range {
  display: inline-flex; gap: 3px; align-self: flex-start;
  background: var(--hp-cream-elev);
  border: 1.5px solid var(--hp-hair);
  border-radius: 999px;
  padding: 3px;
}
.plab-range-btn {
  appearance: none; border: 0; cursor: pointer;
  background: transparent;
  color: var(--hp-muted);
  font: 700 10.5px/1 var(--hp-body);
  letter-spacing: 0.06em;
  padding: 7px 14px;
  border-radius: 999px;
  transition: background .12s var(--hp-ease), color .12s var(--hp-ease);
}
.plab-range-btn:hover { color: var(--hp-ink-2); }
.plab-range-btn.is-active { background: var(--hp-paper); color: var(--hp-ink); box-shadow: var(--hp-shadow-card); }

/* Gallery */
.plab-gallery { display: flex; flex-direction: column; gap: 16px; }
.plab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; padding-bottom: 4px; }
.plab-card {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--hp-cream);
  border: 1.5px solid var(--hp-hair);
  transition: transform .14s var(--hp-ease), box-shadow .14s var(--hp-ease), border-color .14s var(--hp-ease);
}
.plab-card:hover { transform: translateY(-2px); box-shadow: var(--hp-shadow-card); border-color: var(--hp-forest); }
.plab-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.plab-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--hp-cream-elev);
  color: var(--hp-muted);
  font: 400 italic 14px/1 var(--hp-display);
}
.plab-badge {
  position: absolute; top: 7px; left: 7px;
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--hp-forest);
  color: var(--hp-chartreuse);
  font: 800 8.5px/1 ui-monospace, 'SF Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.plab-del {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px;
  display: none; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(20,40,34,0.62);
  color: var(--hp-forest-ink);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .12s var(--hp-ease);
}
.plab-card:hover .plab-del { display: inline-flex; }
.plab-del:hover { background: var(--hp-danger); }

@media (max-width: 560px) {
  .vlab-head-r { width: 100%; }
  .vlab-voice { flex: 1; justify-content: center; }
}