/* ============================================================================
   house-pages.css  —  page-specific offenders found by qa/house_audit.py
   ----------------------------------------------------------------------------
   Companion to house.css, loaded straight after it. Every class below rendered
   square, mono or off-font on at least one page in the 5 Sep 2026 audit.
   Prefix H = html:root[data-design-mode][data-theme][data-palette] body#opt-house
   (the body id outranks the ID selectors used by editorial-final.css).
   ========================================================================== */

/* ---- cards and tiles that were still 0 to 12px ---------------------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-detailed-card__list,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .as-rail-card,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hwiz-float,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .apick__panel,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .myint-card__notice,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .manager-stats,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .scorecard,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .card.card-chart,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .card.ink {
  border-radius: var(--hs-radius-card) !important;
  overflow: hidden;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .inbox-stats {
  background: transparent !important; border: 0 !important; box-shadow: none !important; gap: 14px; overflow: visible; border-radius: 0 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .inbox-stat,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hg-kpi-tile,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-cell,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .stat,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .client-card {
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important;
  border-radius: var(--hs-radius-tile) !important; box-shadow: var(--hs-shadow-tile) !important;
}

/* ---- the slide-out bot activity panel (present on every page) -------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .bot-panel {
  background: var(--hs-paper) !important; border-left: 1px solid var(--hs-line) !important;
  border-radius: 22px 0 0 22px !important; box-shadow: -30px 0 80px -40px rgba(20,22,30,.35) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .bot-panel-header,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .bot-panel-filters {
  background: transparent !important; border-color: var(--hs-line) !important; border-radius: 0 !important; box-shadow: none !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .bot-filter-input-wrap { position: relative; flex: 1; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .bot-filter-input-wrap .bi-search {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--hs-ink-mute); pointer-events: none;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .bot-filter-input { width: 100%; padding: 8px 12px 8px 32px !important; font-size: 13px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .bot-filter-select { font-size: 13px !important; padding: 8px 32px 8px 12px !important; }

/* ---- tab strips built from bare buttons: pills ------------------------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comms-channel-tab,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .lo-tab-btn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .as-rail-tab,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-status-tab,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .gmb-tab,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hg-tab,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hwiz-search-tab,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .osx-tab,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-tab,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .inbox-view-mode-btn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-tab,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-tabs > button,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-tabs > a {
  font-family: var(--hs-font-body) !important; font-weight: 600 !important; font-size: 13.5px !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--hs-ink-soft) !important; background: transparent !important; border: 1px solid transparent !important;
  border-radius: var(--hs-radius-pill) !important; padding: 8px 14px !important; box-shadow: none !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comms-channel-tab:hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .lo-tab-btn:hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .as-rail-tab:hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-status-tab:hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .gmb-tab:hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hg-tab:hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hwiz-search-tab:hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .osx-tab:hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-tab:hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-tab:hover { background: #f1efe3 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comms-channel-tab.active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .lo-tab-btn.active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .as-rail-tab.is-active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-status-tab.active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .gmb-tab.active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hg-tab.is-active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hwiz-search-tab.is-active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .osx-tab.is-on,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .payments-tab.is-active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .inbox-view-mode-btn.is-active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-tab.active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-tabs > .active {
  background: var(--hs-yellow) !important; color: #1a1700 !important; border-color: var(--hs-yellow) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-tabs {
  flex-wrap: wrap !important; background: transparent !important; border: 0 !important; padding: 0 !important; gap: 6px !important; overflow: visible !important;
}

/* ---- icon-only buttons stay round ------------------------------------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sl-icon-btn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .iconbtn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .mnd-close,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .icon-btn {
  border-radius: 50% !important; border: 1px solid var(--hs-line-strong) !important; background: #fff !important; color: var(--hs-ink) !important;
}

/* ---- inputs with their own class names -------------------------------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-field__input,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .add-input,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pcf-input,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .input,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .clients-filter-input,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .inbox-page select,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .inbox-page input[type="text"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house .inbox-page input[type="search"] {
  font-family: var(--hs-font-body) !important; font-size: 14px !important; color: var(--hs-ink) !important; background: var(--hs-paper) !important;
  border: 1px solid var(--hs-line-strong) !important; border-radius: var(--hs-radius-input) !important; box-shadow: var(--hs-shadow-input) !important; padding: 10px 14px !important;
}

/* ---- labels that were still mono -------------------------------------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmov-header-bit-label,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmov-cell-label,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmov-kpi-row-label,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .eyebrow,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hero-kicker,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-label,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sh-kicker,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sc-label,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .stat-label,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .inbox-stat-label {
  font-family: var(--hs-font-body) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--hs-ink-mute) !important;
}

/* ---- badges ------------------------------------------------------------------ */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-badge,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .pill,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .tag { border-radius: var(--hs-radius-pill) !important; font-family: var(--hs-font-body) !important; }

/* ---- topbar search: ONE pill (the wrapper), the input inside it is naked ------ */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar-search-field {
  border: 1px solid var(--hs-line-strong) !important; border-radius: var(--hs-radius-pill) !important; background: #fff !important; box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar-search-field:focus-within { border-color: var(--hs-yellow) !important; box-shadow: 0 0 0 4px var(--hs-yellow-ring) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar-search-field input,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .topbar-search-field input:focus {
  border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
}

/* ---- Client Brain > Overview: snapshot rows and cells ------------------------------ */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmov-kpi-row { border-radius: 14px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmov-cell-value { border-radius: 9px !important; }

/* ---- Client Brain > Offices tab: sub-tabs, panels, link-buttons ------------------ */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmof-subtabs { display: flex; flex-wrap: wrap; gap: 6px; border: 0 !important; background: transparent !important; padding: 0 !important; margin-bottom: 14px; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmof-subtab {
  font-family: var(--hs-font-body) !important; font-weight: 600 !important; font-size: 13.5px !important; color: var(--hs-ink-soft) !important;
  background: transparent !important; border: 1px solid transparent !important; border-radius: var(--hs-radius-pill) !important; padding: 8px 14px !important; box-shadow: none !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmof-subtab:hover { background: #f1efe3 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmof-subtab.is-on { background: var(--hs-yellow) !important; color: #1a1700 !important; border-color: var(--hs-yellow) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmof-subtab-n { font-family: var(--hs-font-body) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmof-panel { background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: var(--hs-radius-card) !important; box-shadow: var(--hs-shadow-tile) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmof-empty { color: var(--hs-ink-soft); }
html:root[data-design-mode][data-theme][data-palette] body#opt-house a.cmof-btn, html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmof-btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--hs-font-body) !important; font-weight: 600 !important; font-size: 14px !important;
  background: var(--hs-ink) !important; color: #ffffff !important; border: 1px solid var(--hs-ink) !important; border-radius: var(--hs-radius-pill) !important; padding: 11px 18px !important; text-decoration: none !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmof-btn:hover { background: var(--hs-ink-soft) !important; color: #ffffff !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmof-btn--ghost { background: #ffffff !important; color: var(--hs-ink) !important; border-color: var(--hs-line-strong) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmof-btn--ghost:hover { background: #fdfcf6 !important; color: var(--hs-ink) !important; border-color: var(--hs-line-hover) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmof-btn[disabled] { opacity: .5; }
/* any dark-filled control must keep light text */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-dark, html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-ink,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="btn--dark"], html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="btn-ink"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-btn--dark { color: #ffffff !important; }

/* ---- segmented controls (By client / By status, Ledger / Activity, List / Board): pill groups ---- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .gbp-segmented,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="segmented"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="-seg-group"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="view-toggle"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="view-switch"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-group:not(.dropdown) {
  display: inline-flex; gap: 6px; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; overflow: visible !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .gbp-segmented > button,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="segmented"] > button,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="segmented"] > a,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="view-toggle"] > button,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="view-toggle"] > a,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="view-switch"] > button,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="view-switch"] > a {
  font-family: var(--hs-font-body) !important; font-weight: 600 !important; font-size: 14px !important; color: var(--hs-ink) !important;
  background: #fff !important; border: 1px solid var(--hs-line-strong) !important; border-radius: var(--hs-radius-pill) !important; min-height: 40px !important; padding: 0 16px !important; box-shadow: var(--hs-shadow-input) !important; text-transform: none !important; letter-spacing: 0 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .gbp-segmented > .active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="segmented"] > .active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="segmented"] > .is-active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="view-toggle"] > .active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="view-toggle"] > .is-active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="view-switch"] > .active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="view-switch"] > .is-active {
  background: var(--hs-yellow) !important; border-color: var(--hs-yellow) !important; color: #1a1700 !important; box-shadow: 0 8px 20px -10px rgba(244,197,24,.9) !important;
}

/* ---- count badges inside tabs and filters: pills, yellow on the active tab --------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .lo-tab-count,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="tab-count"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="-tab__count"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="filter-count"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-status-tab .cnt,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comms-channel-tab .cnt,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .comms-channel-tab [class*="count"] {
  border-radius: var(--hs-radius-pill) !important; font-family: var(--hs-font-body) !important; font-weight: 700 !important; font-size: 11.5px !important;
  min-width: 22px; padding: 2px 8px !important; background: #f1efe3 !important; color: var(--hs-ink-soft) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .active .lo-tab-count,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .is-active [class*="tab-count"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house .active [class*="tab-count"] { background: #1a1700 !important; color: var(--hs-yellow) !important; }

/* ---- bot registry filter strips: no grey rectangles around pill groups ---------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-board-filters,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .br-status-tabs {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; gap: 6px;
}

/* ---- map containers (address picker, offices, heat grid): rounded like a card ---------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .apick__map,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="__map"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="-map-wrap"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house .leaflet-container,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .maplibregl-map { border-radius: var(--hs-radius-card) !important; overflow: hidden !important; border: 1px solid var(--hs-line) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .apick__result, html:root[data-design-mode][data-theme][data-palette] body#opt-house .apick__placeholder { border-radius: 14px !important; }

/* ---- profile signature banner and any yellow callout strip -------------------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .prof-signature,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="callout"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="-notice"] { border-radius: 14px !important; }

/* ---- Web & Hosting category chips ------------------------------------------------ */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-cat {
  border-radius: var(--hs-radius-pill) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .02em !important; text-transform: none !important; padding: 3px 9px !important;
}

/* ---- admin settings table of contents chips ------------------------------------------ */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-toc { display: flex; flex-wrap: wrap; gap: 6px; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-toc__link {
  border-radius: var(--hs-radius-pill) !important; border: 1px solid var(--hs-line-strong) !important; background: #fff !important; color: var(--hs-ink-soft) !important;
  font-family: var(--hs-font-body) !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 7px 13px !important; text-decoration: none !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-toc__link:hover { border-color: var(--hs-line-hover) !important; background: #fdfcf6 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-toc__link.is-active { background: var(--hs-yellow) !important; border-color: var(--hs-yellow) !important; color: #1a1700 !important; }

/* ---- admin buttons (.adm-btn): pills; primary is yellow like everywhere else ---- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px !important; height: 40px !important; padding: 0 16px !important;
  font-family: var(--hs-font-body) !important; font-size: 14px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important;
  background: #fff !important; color: var(--hs-ink) !important; border: 1px solid var(--hs-line-strong) !important; border-radius: var(--hs-radius-pill) !important; box-shadow: var(--hs-shadow-input) !important; text-decoration: none !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-btn:hover { border-color: var(--hs-line-hover) !important; background: #fdfcf6 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-btn--primary { background: var(--hs-yellow) !important; border-color: var(--hs-yellow) !important; color: #1a1700 !important; box-shadow: 0 8px 20px -10px rgba(244,197,24,.9) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-btn--primary:hover { background: var(--hs-yellow-deep) !important; border-color: var(--hs-yellow-deep) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-btn--danger { color: var(--hs-bad) !important; border-color: rgba(224,86,30,.5) !important; }

/* ---- admin section tab strip (Overview / Team & Users / Invites ...) ----------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-tab {
  font-family: var(--hs-font-body) !important; font-weight: 600 !important; font-size: 13.5px !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--hs-ink-soft) !important; background: #fff !important; border: 1px solid var(--hs-line-strong) !important; border-radius: var(--hs-radius-pill) !important;
  padding: 8px 14px !important; box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-tab:hover { border-color: var(--hs-line-hover) !important; background: #fdfcf6 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-tab.adm-tab--active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-tab.active { background: var(--hs-yellow) !important; border-color: var(--hs-yellow) !important; color: #1a1700 !important; }

/* ---- small score and count chips: pills, never squares ------------------------ */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .health-mini,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .results-mini,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .score-dot,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .score-chip,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .health-badge,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .results-badge,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .count-chip,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .mini-count,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="health-mini"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="results-mini"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="score-val"] {
  border-radius: var(--hs-radius-pill) !important; font-family: var(--hs-font-body) !important; font-weight: 700 !important; min-width: 28px;
}
/* calendar day cells: square, so the rounding reads as a soft tile, never an oval */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .drp-day { border-radius: 10px !important; aspect-ratio: 1 / 1; display: inline-flex; align-items: center; justify-content: center; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .bot-filter-date { flex: 1; font-size: 13px !important; padding: 8px 12px !important; }

/* ---- inbox filter buttons that are rendered with inline styles ---------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .inbox-page button[style*="border-radius"] { border-radius: var(--hs-radius-pill) !important; padding: 8px 14px !important; }

/* ============================================================================
   Inline-style offenders moved to classes (5 Sep 2026 audit, items 1 to 12)
   ========================================================================== */

/* ---- generic house button and its variants ------------------------------------ */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-btn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-filter-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none !important;
  font-family: var(--hs-font-body) !important; font-weight: 600 !important; font-size: 13.5px !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--hs-ink) !important; background: #fff !important; border: 1px solid var(--hs-line-strong) !important;
  border-radius: var(--hs-radius-pill) !important; padding: 10px 20px !important; box-shadow: var(--hs-shadow-input) !important;
  transition: background .15s, border-color .15s, color .15s;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-btn:hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-filter-btn:hover { border-color: var(--hs-line-hover) !important; background: #fffdf0 !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-btn:focus-visible,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-filter-btn:focus-visible { outline: 0 !important; box-shadow: 0 0 0 4px var(--hs-yellow-ring) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-btn--sm,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-filter-btn { padding: 7px 14px !important; font-size: 12.5px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-btn--primary,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-filter-btn.is-active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-filter-btn.is-active:hover {
  background: var(--hs-yellow) !important; border-color: var(--hs-yellow) !important; color: #1a1700 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-btn--primary:hover { background: var(--hs-yellow-deep) !important; border-color: var(--hs-yellow-deep) !important; color: #1a1700 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-btn--dark,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-btn--dark:hover { background: var(--hs-ink) !important; border-color: var(--hs-ink) !important; color: #fff !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-btn:disabled,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-filter-btn:disabled { opacity: .55; cursor: not-allowed; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-filter-btn .bi { font-size: 12px; }

/* ---- plain house input (staging import form) ---------------------------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-input {
  display: block; font-family: var(--hs-font-body) !important; font-size: 14px !important; color: var(--hs-ink) !important; background: var(--hs-paper) !important;
  border: 1px solid var(--hs-line-strong) !important; border-radius: var(--hs-radius-input) !important; box-shadow: var(--hs-shadow-input) !important; padding: 10px 14px !important; outline: 0 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-input:hover { border-color: var(--hs-line-hover) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-input:focus { border-color: var(--hs-yellow) !important; box-shadow: 0 0 0 4px var(--hs-yellow-ring) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-input::placeholder { color: #b7b3a6 !important; }

/* ---- callouts and notes ------------------------------------------------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-callout {
  background: #fffdf0 !important; border: 1px solid var(--hs-line-strong) !important; border-left: 4px solid var(--hs-yellow) !important;
  border-radius: var(--hs-radius-input) !important; padding: 14px 18px; font-family: var(--hs-font-body) !important; font-size: 14.5px; line-height: 1.5; color: var(--hs-ink-soft) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-note {
  background: var(--hs-yellow-soft) !important; border: 1px solid var(--hs-line-strong) !important; border-left: 4px solid var(--hs-yellow) !important;
  border-radius: var(--hs-radius-input) !important; padding: 8px 12px; font-family: var(--hs-font-body) !important; font-size: 12px; line-height: 1.5; color: var(--hs-ink-soft) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .fd-note {
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: var(--hs-radius-input) !important; box-shadow: var(--hs-shadow-input) !important;
  padding: 12px 16px; font-family: var(--hs-font-body) !important; font-size: 12.5px; line-height: 1.5; color: var(--hs-ink-mute) !important;
}

/* ---- white panels (settings template editor, lifecycle tables) ---------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-panel {
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: var(--hs-radius-card) !important; box-shadow: var(--hs-shadow-tile) !important; overflow: hidden;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-int-drawer {
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line) !important; border-radius: var(--hs-radius-tile) !important; box-shadow: var(--hs-shadow-input) !important; overflow: hidden;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .adm-int-drawer > summary {
  font-family: var(--hs-font-body) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--hs-ink-mute) !important;
}

/* ---- small identifier chip (client id on the content map) --------------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-id-chip {
  display: inline-block; font-family: var(--hs-font-body) !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .04em !important;
  color: var(--hs-ink-mute) !important; background: #fff !important; border: 1px solid var(--hs-line-strong) !important; border-radius: var(--hs-radius-pill) !important; padding: 2px 10px !important; line-height: 1.4;
}

/* ---- GMB page: connected-accounts bar and foundry env switcher ---------------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .gbp-accounts-bar,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .fd-env-switcher {
  background: var(--hs-paper) !important; border: 1px solid var(--hs-line-strong) !important; border-radius: var(--hs-radius-input) !important; box-shadow: var(--hs-shadow-input) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .gbp-accounts-bar { padding: 8px 16px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .fd-env-switcher { padding: 6px 10px !important; }

/* ---- GMB schedule fields (replaces the old inline paintField() writer) -------- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .gs-modal input:not([type="checkbox"]),
html:root[data-design-mode][data-theme][data-palette] body#opt-house .gs-modal textarea,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .gsfwrap input,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .gsdwrap input {
  font-family: var(--hs-font-body) !important; font-size: 14px !important; color: var(--hs-ink) !important; background: var(--hs-paper) !important;
  border: 1px solid var(--hs-line-strong) !important; border-radius: var(--hs-radius-input) !important; box-shadow: var(--hs-shadow-input) !important;
  padding-top: 9px !important; padding-bottom: 9px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .gsfwrap input,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .gsdwrap input { width: 100% !important; display: block !important; margin: 0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .gsfwrap input { padding-left: 30px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .gsdwrap input { padding-right: 34px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .gsfwrap,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .gsdwrap { padding: 0 !important; }

/* ---- Round 2 (Ben, 5 Sep): dashboard section toggles, lone panels, AM Assignments ---- */
/* Collapsible section headers (Key Metrics, Financial KPIs) are <button>s: no pill, no border, no card behind the label */
html:root[data-design-mode][data-theme][data-palette] body#opt-house button.nx-collapse-toggle:not(#hs-bump):not(#hs-bump2),
html:root[data-design-mode][data-theme][data-palette] body#opt-house button.nx-collapse-toggle:not(#hs-bump):not(#hs-bump2):hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house button.nx-collapse-toggle:not(#hs-bump):not(#hs-bump2):focus {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 0 10px !important; height: auto !important; min-height: 0 !important;
  border-radius: 0 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; width: auto !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .nx-collapse-toggle .dv2-section-title { margin: 0 !important; }
/* A two-column row with a single panel left in it (Hosting Clients hidden) spans the full width instead of leaving an empty half */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-two-col-equal > .dv2-panel:only-child { grid-column: 1 / -1 !important; }
/* Lifecycle and other secondary link-buttons: white pill like every other .btn */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-opt-secondary {
  border-radius: var(--hs-radius-pill) !important; height: 40px !important; padding: 0 18px !important; font-family: var(--hs-font-body) !important; font-size: 13.5px !important; font-weight: 600 !important;
  background: #fff !important; color: var(--hs-ink) !important; border: 1px solid var(--hs-line-strong) !important; display: inline-flex !important; align-items: center !important; gap: 8px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .btn-opt-secondary:hover { border-color: #d8cfac !important; color: var(--hs-ink) !important; background: #fffdf3 !important; }
/* Segmented toggles: the active yellow pill sits flat, no glow dropping onto the content below */
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="segmented"] > .is-active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="segmented"] > .active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="view-toggle"] > .active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="view-toggle"] > .is-active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="view-switch"] > .active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house [class*="view-switch"] > .is-active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .as-rail-tab.active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-seg .is-active,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ah-seg .active { box-shadow: none !important; }
/* AM Assignments team column: say which pill is the account manager and which the specialist */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .as-page .pill-wrap[data-role] { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .as-page .pill-wrap[data-role]::before {
  content: attr(data-role); font-family: var(--hs-font-body); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hs-ink-mute);
  min-width: 26px; text-align: right; flex-shrink: 0;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .as-page .pill-wrap[data-role="am"]::before { content: "AM"; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .as-page .pill-wrap[data-role="seo"]::before { content: "SEO"; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .as-page .pill-wrap[data-role] .role-dot { display: none !important; }

/* Dashboard metric grids: fit six tiles on one row on a wide screen instead of orphaning the sixth */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dash-v2 .dv2-sec-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; gap: 14px !important; }

/* Account Managers cards: the three stat boxes are tiles, not squares, and their labels wrap instead of truncating */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .am-dashboard .manager-stats { gap: 10px !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .am-dashboard .manager-stats .stat-box {
  border-radius: 16px !important; border: 1px solid var(--hs-line) !important; background: #fbfaf5 !important; padding: 12px 10px !important; box-shadow: none !important; overflow: visible !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .am-dashboard .manager-stats .stat-label {
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: 10px !important; letter-spacing: .06em !important; line-height: 1.25 !important;
}

/* Client Brain snapshot rail: each metric is its own small tile with air between, not rows divided by hairlines */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmov-kpi-stack { display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 12px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmov-kpi-row,
html:root[data-design-mode][data-theme][data-palette] body#opt-house button.cmov-kpi-row {
  border: 1px solid var(--hs-line) !important; border-top: 1px solid var(--hs-line) !important; border-radius: 16px !important; background: #fbfaf5 !important; padding: 14px 16px !important; gap: 14px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house button.cmov-kpi-row:hover { background: #fffbe6 !important; border-color: #ead98a !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .ce2-stage-hint { margin: 8px 2px 0 !important; font-size: 12.5px !important; font-weight: 600 !important; color: #6b5a00 !important; }

/* ---- Round 4 (Ben, 5 Sep): scrim, icon indicators, Client Brain more-menu ---- */
/* Bot panel scrim: a light neutral veil, not a grey wash that turns the yellow olive */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .bot-panel-overlay { background: rgba(251, 251, 249, .55) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important; }
/* KPI tile "open" indicator is a bare arrow, no box or ring around it */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dash-v2 .dv2-kpi__arrow,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dash-v2 .dv2-kpi--primary .dv2-kpi__arrow,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .am-card-arrow {
  background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--hs-ink-mute) !important; width: auto !important; height: auto !important; padding: 0 !important; font-size: 15px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dash-v2 .dv2-kpi--clickable:hover .dv2-kpi__arrow { color: var(--hs-ink) !important; transform: translate(1px, -1px); }
/* Client Brain header more-menu: house dropdown card */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmw-dropdown-menu {
  background: #fff !important; border: 1px solid var(--hs-line) !important; border-radius: 18px !important; box-shadow: var(--hs-shadow-card) !important; padding: 6px !important; min-width: 220px !important; margin-top: 8px !important; overflow: hidden !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmw-dropdown-item,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmw-dropdown-menu a,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmw-dropdown-menu button {
  display: flex !important; align-items: center !important; gap: 10px !important; width: 100% !important; padding: 10px 12px !important; border-radius: 12px !important; border: 0 !important; background: transparent !important;
  font-family: var(--hs-font-body) !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--hs-ink) !important; text-decoration: none !important; cursor: pointer !important; height: auto !important; min-height: 0 !important; justify-content: flex-start !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmw-dropdown-item:hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmw-dropdown-menu a:hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmw-dropdown-menu button:hover { background: #f4f2ea !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmw-dropdown-item i { color: var(--hs-ink-mute) !important; font-size: 14px !important; width: 18px !important; text-align: center !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmw-dropdown-item.danger, html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmw-dropdown-item.text-danger,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmw-dropdown-item.danger i, html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmw-dropdown-item.text-danger i { color: var(--hs-bad) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmw-dropdown-menu hr,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmw-dropdown-divider { border: 0 !important; border-top: 1px solid var(--hs-line) !important; margin: 6px 4px !important; opacity: 1 !important; height: 0 !important; }
/* Login card: no beige inner panel behind the form, the Login/Register switch is a plain pill pair, display title */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .login-card .tab-content,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .login-card .tab-pane { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .login-card .nav-tabs { border: 0 !important; gap: 6px !important; margin-bottom: 18px !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .login-card .nav-tabs .nav-link { border: 1px solid transparent !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .login-card .nav-tabs .nav-link:not(.active) { border-color: var(--hs-line) !important; background: #fff !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .login-header h1, html:root[data-design-mode][data-theme][data-palette] body#opt-house .login-header h2,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .login-header h4, html:root[data-design-mode][data-theme][data-palette] body#opt-house .login-header .h4 { font-family: var(--hs-font-display) !important; font-weight: 400 !important; font-size: 30px !important; letter-spacing: .01em !important; margin: 6px 0 0 !important; }
/* Client Brain header: the three-dots menu trigger is a bare icon, not a pill */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmw-dropdown > button.cm-extend-btn[title="More actions"]:not(#hs-bump):not(#hs-bump2) {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important; min-width: 40px !important; width: 40px !important; padding: 0 !important; color: var(--hs-ink) !important; font-size: 18px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmw-dropdown > button.cm-extend-btn[title="More actions"]:not(#hs-bump):not(#hs-bump2):hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cmw-dropdown.open > button.cm-extend-btn[title="More actions"]:not(#hs-bump):not(#hs-bump2) { background: #f4f2ea !important; }

/* Client Brain loading: one calm fade, no spinner-then-cards-popping-in-at-different-times */
/* :not([style*="display"]) is load-bearing. The page hides these spinners with
   document.getElementById("cmLoading").style.display = "none", and a bare
   `display: flex !important` here pinned "Loading client brain..." on screen forever
   even though the page had finished loading and rendered underneath it.
   Ben, 6 Sep 2026. Never force `display` on something the page toggles. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-loading:not([style*="display"]) {
  min-height: 280px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 12px !important;
  font-family: var(--hs-font-body) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--hs-ink-mute) !important; padding: 2rem 1rem !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-loading .spinner {
  width: 28px !important; height: 28px !important; border: 2.5px solid #eee9d6 !important; border-top-color: var(--hs-yellow) !important; margin: 0 !important; animation: cm-spin .9s linear infinite !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-page .nx-stagger > *,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-page .nx-stagger-grid > *,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #cmOverview .nx-stagger > *,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #cmOverview .nx-stagger-grid > *,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-tab-content .nx-stagger > *,
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-tab-content .nx-stagger-grid > * { animation: none !important; opacity: 1 !important; transform: none !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-tab-content.active { animation: hsPanelIn .18s ease-out both !important; }
@keyframes hsPanelIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html:root[data-design-mode][data-theme][data-palette] body#opt-house .cm-tab-content.active { animation: none !important; } }
/* The bot panel and its scrim sit above the sticky topbar (z 1100), so the panel header is not dimmed under it */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .bot-panel-overlay { z-index: 1200 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .bot-panel { z-index: 1201 !important; }

/* ---- Round 5 (Ben, 6 Sep): Web & Hosting, dashboard hosting panel, GMB ---- */
/* Category pills were saturated dark-theme colours (#58c896, #f08080) on a cream page: harsh.
   Soft tinted pills in the house palette instead, one weight, readable ink. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-cat {
  padding: 4px 10px !important; border-radius: 999px !important; font-family: var(--hs-font-body) !important;
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .02em !important; line-height: 1.5 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-cat-paying { background: #eaf6ee !important; color: #1f6f43 !important; border-color: #cfe7d8 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-cat-overdue { background: #fdf0e6 !important; color: #99521c !important; border-color: #f0d9c4 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-cat-not-paying { background: #fdecea !important; color: #992f21 !important; border-color: #f2cfc9 !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-cat-retainer-free { background: #f2f1ea !important; color: #55575e !important; border-color: var(--hs-line) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-cat-own-site { background: var(--hs-yellow-soft) !important; color: #6b5a00 !important; border-color: #ead98a !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-cat-cancelled { background: #f4f3ee !important; color: var(--hs-ink-mute) !important; border-color: var(--hs-line) !important; }
/* Row actions: round targets with a soft hover, and a red hover only on the destructive one */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-action-icon {
  width: 28px !important; height: 28px !important; border-radius: 999px !important; border: 1px solid transparent !important;
  color: var(--hs-ink-mute) !important; font-size: 12px !important; transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-action-icon:hover { background: #f2f1ea !important; border-color: var(--hs-line) !important; color: var(--hs-ink) !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-action-icon.hs-action-delete:hover { background: #fdecea !important; border-color: #f2cfc9 !important; color: var(--hs-bad) !important; }
/* Dashboard "Hosting Clients" panel: the per-client rows were raw inline-styled divs with a
   hairline under each. Make them read like the rest of the dashboard. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-panel .pipeline-summary-row {
  display: flex !important; gap: 10px !important; margin-bottom: 4px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-panel .pipeline-summary-row .summary-item {
  flex: 1 1 0 !important; background: #fbfaf5 !important; border: 1px solid var(--hs-line) !important; border-radius: 16px !important;
  padding: 12px 14px !important; display: flex !important; flex-direction: column !important; gap: 4px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-panel .summary-label {
  font-family: var(--hs-font-body) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; color: var(--hs-ink-mute) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dv2-panel .summary-value {
  font-family: var(--hs-font-display) !important; font-size: 22px !important; color: var(--hs-ink) !important; line-height: 1.1 !important;
}
/* Office Search hidden from the nav, Ben 6 Sep 2026 ("hide the page for office search").
   Done here rather than in base.html because that <li> sits inside a Jinja block and
   editing it is how the template got broken once already. The blueprint stays registered,
   so /company/office-search still resolves for anyone with a bookmark; say the word and
   the route can be retired properly. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .sidebar .sidebar-item:has(> a[href^="/company/office-search"]) { display: none !important; }
/* "Floors by Tomorrow" was cut off at the bottom of the Gross Margin / Client card.
   The card is overflow:hidden, so any height cap from another sheet crops the last row.
   I could not reproduce it on seeded data (the grid rows are `auto` and the card grows),
   so this neutralises the cap wherever it comes from rather than guessing at the source. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dash-v2 .dv2-detailed-card {
  height: auto !important; max-height: none !important; min-height: 0 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .dash-v2 .dv2-detailed-card__list {
  min-height: 0 !important; max-height: none !important; overflow: visible !important;
}
/* Keep the two row actions side by side: at 32px they wrapped onto two lines and the
   extra column width squeezed the dates into wrapping. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-table td:last-child,
html:root[data-design-mode][data-theme][data-palette] body#opt-house table td:has(> .hs-action-icon) {
  white-space: nowrap !important; text-align: right !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-action-icon + .hs-action-icon { margin-left: 4px !important; }
/* Hosting table: dates and money were wrapping onto two lines. Only the domain wraps. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-table tbody td { white-space: nowrap !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-table tbody td:first-child { white-space: normal !important; word-break: break-word !important; }
html:root[data-design-mode][data-theme][data-palette] body#opt-house .hs-table th { white-space: nowrap !important; }

/* Client Brain payment banner: the two actions were different shapes.
   Ben, 6 Sep 2026, on the overdue banner: "you also need to change this to not
   have that square in it".
   editorial-final.css squares every .payment-alert-action off at 2px and sets
   them in uppercase mono; the house button rule then re-rounded only the
   <button> ("Mark as paid") because it matches `button`, and never touched the
   <a> ("Reconcile"), which stayed a square mono box next to a pill. Both are
   the same control, so both get the house pill here. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .payment-alert-banner .payment-alert-action,
html:root[data-design-mode][data-theme][data-palette] body#opt-house a.payment-alert-action {
  border-radius: var(--hs-radius-pill) !important;
  font-family: var(--hs-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  border: 1px solid currentColor !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house .payment-alert-banner .payment-alert-action:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}
/* The banner itself is a card, so it takes the card radius. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house .payment-alert-banner {
  border-radius: var(--hs-radius-card) !important;
}