/* ============================================================
   PARITY sage — web own/visited profile = iOS SageProfileView
   Hero (cover + 55% scrim, Door/EDIT top-right, side | rounded main | side photos, italic serif name,
   ROLE · @HANDLE, Welcome Mat + Block ID, sage anthem capsule, 3-stat band) → capsule tabs → shared tab page.
   Palette: cream #F5F2EC, sage #7F806E, dark sage #3F4A44, ink #1C1C18, divider sage .18
   Every rule is scoped under html[data-theme="sage"]. Loaded by views/sage-view.js (ensureCss).
   ============================================================ */
html[data-theme="sage"] .bm-sagep {
  --sp-cream: #F5F2EC; --sp-white: #FFFFFF; --sp-sage: #7F806E; --sp-sage-text: #5F6052; --sp-dark: #3F4A44;
  --sp-ink: #1C1C18; --sp-muted: rgba(28,28,24,.68); --sp-faint: rgba(28,28,24,.55); --sp-divider: rgba(127,128,110,.18);
  --sp-serif: "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sp-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  background: var(--sp-cream); color: var(--sp-ink); font-family: var(--sp-sans); min-height: 100%; padding-bottom: 48px; box-sizing: border-box;
}
html[data-theme="sage"] .bm-sagep *, html[data-theme="sage"] .bm-sagep *::before, html[data-theme="sage"] .bm-sagep *::after { box-sizing: border-box; }
html[data-theme="sage"] .bm-sagep button { font-family: inherit; }
html[data-theme="sage"] .bm-sagep button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html[data-theme="sage"] .bm-sagep-col button:focus-visible { outline-color: var(--sp-dark); }

/* 1. HERO ---------------------------------------------------- */
html[data-theme="sage"] .bm-sagep-hero { position: relative; overflow: hidden; min-height: 470px; background: var(--sp-dark); color: #fff; }
html[data-theme="sage"] .bm-sagep-cover, html[data-theme="sage"] .bm-sagep-scrim { position: absolute; inset: 0; }
html[data-theme="sage"] .bm-sagep-cover-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
html[data-theme="sage"] .bm-sagep-scrim { background: rgba(0,0,0,.55); }
html[data-theme="sage"] .bm-sagep-hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; }

html[data-theme="sage"] .bm-sagep-topbar { align-self: stretch; display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 16px 20px 0; min-height: 16px; }
html[data-theme="sage"] .bm-sagep-edit { padding: 7px 14px; border: .5px solid rgba(255,255,255,.35); border-radius: 0; background: rgba(255,255,255,.12); color: #fff;
  font: 900 10px/1 var(--sp-sans); letter-spacing: 2px; cursor: pointer; }
html[data-theme="sage"] .bm-sagep-door { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%;
  border: .5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; cursor: pointer; }

html[data-theme="sage"] .bm-sagep-photos { align-self: stretch; display: flex; align-items: center; gap: 10px; padding: 10px 16px 0; }
html[data-theme="sage"] .bm-sagep-side, html[data-theme="sage"] .bm-sagep-main { position: relative; padding: 0; margin: 0; overflow: hidden; cursor: pointer; }
html[data-theme="sage"] .bm-sagep-side { flex: 1 1 0; min-width: 0; height: 130px; border-radius: 16px; border: 2px solid rgba(255,255,255,.4); background: rgba(255,255,255,.10); }
html[data-theme="sage"] .bm-sagep-main { flex: none; width: 150px; height: 190px; border-radius: 22px; border: 4px solid rgba(255,255,255,.7); background: var(--sp-sage);
  box-shadow: 0 0 24px rgba(0,0,0,.3); }
html[data-theme="sage"] .bm-sagep-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
html[data-theme="sage"] .bm-sagep-empty-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 900 10px/1 var(--sp-sans); letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.8); }
html[data-theme="sage"] .bm-sagep-live-dot { position: absolute; right: 10px; bottom: 10px; width: 10px; height: 10px; border-radius: 50%; background: #34C759; box-shadow: 0 0 0 2px #fff; }

html[data-theme="sage"] .bm-sagep-name { margin: 12px 0 0; padding: 0 24px; font: italic 400 32px/1.15 var(--sp-serif); color: rgba(255,255,255,.95); text-align: center;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; overflow-wrap: anywhere; }
html[data-theme="sage"] .bm-sagep-role { margin-top: 4px; padding: 0 16px; font: 900 10px/1.4 var(--sp-sans); letter-spacing: 2px; color: rgba(255,255,255,.8); text-align: center; }

html[data-theme="sage"] .bm-sagep-wm { margin-top: 16px; padding: 0 16px; width: 100%; text-align: center; }
html[data-theme="sage"] .bm-sagep-wm .bm-wm { font: 600 14px/1.45 var(--sp-sans); color: #fff; margin: 0; }
html[data-theme="sage"] .bm-sagep-wm .bm-wm-empty { margin: 0 auto; border: 1px dashed rgba(255,255,255,.45); background: rgba(255,255,255,.06); color: #fff; font: 700 12px/1.3 var(--sp-sans); cursor: pointer; }
html[data-theme="sage"] .bm-sagep-wm .bm-wm-empty small { color: rgba(255,255,255,.7); }
html[data-theme="sage"] .bm-sagep-bid { margin-top: 12px; padding: 0 16px; width: 100%; }
html[data-theme="sage"] .bm-sagep-bid .bm-bid-chip { background: rgba(255,255,255,.10); border: 0; color: #fff; font-size: 12px; padding: 6px 11px; }
html[data-theme="sage"] .bm-sagep-bid .bm-bid-open { background: transparent; border: 1px solid rgba(255,255,255,.6); color: #fff; font-size: 12px; padding: 5px 11px; }
html[data-theme="sage"] .bm-sagep-bid .bm-bid-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.45); color: #fff; }

html[data-theme="sage"] .bm-sagep-anthem-row { margin-top: 10px; padding: 0 16px; max-width: 100%; }
html[data-theme="sage"] .bm-sagep-anthem { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 14px; border: 0; border-radius: 999px;
  background: var(--sp-sage); color: #fff; font: italic 13px/1.2 var(--sp-serif); cursor: pointer; }
html[data-theme="sage"] .bm-sagep-anthem.is-tag { cursor: default; }

html[data-theme="sage"] .bm-sagep-stats { align-self: stretch; display: flex; align-items: center; margin-top: 12px; padding: 12px 0; background: rgba(0,0,0,.35); }
html[data-theme="sage"] .bm-sagep-stat { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
html[data-theme="sage"] .bm-sagep-stat b { font: 700 20px/1.1 var(--sp-serif); color: #fff; }
html[data-theme="sage"] .bm-sagep-stat span { font: 900 9px/1 var(--sp-sans); letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.65); }
html[data-theme="sage"] .bm-sagep-stat-sep { flex: none; width: 1px; height: 28px; background: rgba(255,255,255,.18); }

/* 2. TABS — capsule pills, one scrolling row ------------------ */
html[data-theme="sage"] .bm-sagep-tabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; margin: 0; padding: 12px 14px; overflow-x: auto; scrollbar-width: none;
  background: var(--sp-cream); border: 0; box-shadow: none; }
html[data-theme="sage"] .bm-sagep-tabs::-webkit-scrollbar { display: none; }
html[data-theme="sage"] .bm-sagep .bm-sagep-tab { flex: none; white-space: nowrap; margin: 0; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(127,128,110,.45);
  background: transparent; color: var(--sp-dark); font: 700 13px/1 var(--sp-serif); letter-spacing: 0; text-transform: none; cursor: pointer; }
html[data-theme="sage"] .bm-sagep .bm-sagep-tab.active { background: var(--sp-sage); color: #fff; border-color: var(--sp-sage); }

/* 3. PAGE ---------------------------------------------------- */
html[data-theme="sage"] .bm-sagep-page { padding: 8px 20px 28px; min-height: 240px; background: var(--sp-cream); }
html[data-theme="sage"] .bm-sagep-emptytext { font: italic 13px/1.5 var(--sp-serif); color: var(--sp-faint); padding: 12px 0; }
html[data-theme="sage"] .bm-sagep-about-title { font: italic 400 34px/1.15 var(--sp-serif); color: var(--sp-sage-text); margin: 8px 0 14px; overflow-wrap: anywhere; }
html[data-theme="sage"] .bm-sagep-bio { font: 15px/1.6 var(--sp-serif); color: var(--sp-ink); }
html[data-theme="sage"] .bm-sagep-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 12px; }
html[data-theme="sage"] .bm-sagep-person { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; min-width: 0; }
html[data-theme="sage"] .bm-sagep-person-img { width: 56px; height: 56px; border-radius: 50%; background: #EDEBE0 center/cover no-repeat; border: 2px solid rgba(127,128,110,.40); }
html[data-theme="sage"] .bm-sagep-person-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 10px/1.2 var(--sp-sans); letter-spacing: .5px; color: var(--sp-muted); }
html[data-theme="sage"] .bm-sagep-porch { display: flex; flex-direction: column; gap: 12px; }
html[data-theme="sage"] .bm-sagep-post { background: var(--sp-white); border: .5px solid var(--sp-divider); border-radius: 16px; padding: 14px 16px; }
html[data-theme="sage"] .bm-sagep-post p { margin: 0 0 8px; font: 15px/1.5 var(--sp-serif); color: var(--sp-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
html[data-theme="sage"] .bm-sagep-post-media { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: 12px; margin-bottom: 8px; background: #EDEBE0; }
html[data-theme="sage"] .bm-sagep-post time { font: 900 9px/1 var(--sp-sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--sp-faint); }
html[data-theme="sage"] .bm-sagep-gb-entry { padding: 10px 0; border-bottom: .5px solid rgba(127,128,110,.12); }
html[data-theme="sage"] .bm-sagep-gb-author { font: 900 10px/1 var(--sp-sans); letter-spacing: 1.5px; color: var(--sp-sage-text); margin-bottom: 5px; }
html[data-theme="sage"] .bm-sagep-gb-text { font: italic 14px/1.5 var(--sp-serif); color: var(--sp-muted); overflow-wrap: anywhere; }
html[data-theme="sage"] .bm-sagep-gb-meta { font: 10px/1 var(--sp-sans); color: var(--sp-faint); margin-top: 5px; }
html[data-theme="sage"] .bm-sagep-cardcta { margin-top: 14px; }
html[data-theme="sage"] .bm-sagep-cta { padding: 9px 18px; border: 0; border-radius: 999px; background: var(--sp-sage); color: #fff; font: 700 13px/1 var(--sp-serif); cursor: pointer; }

html[data-theme="sage"] .bm-sagep-footer { display: flex; justify-content: flex-end; padding: 18px 20px; border-top: .5px solid var(--sp-divider); background: var(--sp-white); }
html[data-theme="sage"] .bm-sagep-signout { padding: 6px 14px; border: .5px solid rgba(127,128,110,.45); border-radius: 0; background: transparent; color: var(--sp-faint); font: 11px/1 var(--sp-sans); cursor: pointer; }

html[data-theme="sage"] .bm-par-visitor .bm-par-visitor-bar { background: #F5F2EC; }

/* RESPONSIVE --------------------------------------------------
   Phones fill the width; the cover stays full-bleed, the hero content and the page cap at a reading width on wide canvases. */
@container (max-width: 400px) {
  html[data-theme="sage"] .bm-sagep-main { width: 128px; height: 164px; }
  html[data-theme="sage"] .bm-sagep-side { height: 112px; }
  html[data-theme="sage"] .bm-sagep-photos { gap: 8px; padding: 10px 12px 0; }
  html[data-theme="sage"] .bm-sagep-name { font-size: 28px; }
  html[data-theme="sage"] .bm-sagep-page { padding: 8px 14px 24px; }
}
@container (min-width: 640px) {
  html[data-theme="sage"] .bm-sagep-main { width: 170px; height: 215px; }
  html[data-theme="sage"] .bm-sagep-side { height: 150px; }
  html[data-theme="sage"] .bm-sagep-photos { gap: 14px; padding: 12px 28px 0; }
  html[data-theme="sage"] .bm-sagep-name { font-size: 36px; }
}
@container (min-width: 900px) {
  html[data-theme="sage"] .bm-sagep-hero-in { max-width: none; margin-inline: auto; }
  html[data-theme="sage"] .bm-sagep-col { max-width: none; margin-inline: auto; }
  html[data-theme="sage"] .bm-sagep-stats { border-radius: 0; }
}
html.bm-tv[data-theme="sage"] .bm-sagep .bm-sagep-tab { padding: 14px 20px; font-size: 16px; }
html.bm-tv[data-theme="sage"] .bm-sagep button:focus { outline: 3px solid #fff; outline-offset: 3px; }
html.bm-tv[data-theme="sage"] .bm-sagep-col button:focus { outline-color: var(--sp-dark); }
/* /PARITY sage */