/* ============================================================
   PARITY loft — web own/visited profile = iOS LoftProfileView
   Trinity banner (3 equal panels, 2px gaps, 180px) → khaki name band → master tabs → shared tab page.
   Palette (LoftProfileView): cream #FAF7F2, white, khaki #A9957A, ink #1A1A18 (muted .68, faint .40), divider khaki .18
   Every rule is scoped under html[data-theme="loft"]. Loaded by views/loft-view.js (ensureCss).
   ============================================================ */
html[data-theme="loft"] .bm-loftp {
  --lp-cream: #FAF7F2; --lp-white: #FFFFFF; --lp-khaki: #A9957A; --lp-khaki-text: #706453;
  --lp-ink: #1A1A18; --lp-muted: rgba(26,26,24,.68); --lp-faint: rgba(26,26,24,.55);
  --lp-divider: rgba(169,149,122,.18); --lp-placeholder: #EDEBE0;
  --lp-serif: "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --lp-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  background: var(--lp-cream); color: var(--lp-ink); font-family: var(--lp-sans);
  min-height: 100%; padding-bottom: 48px; box-sizing: border-box;
}
html[data-theme="loft"] .bm-loftp *, html[data-theme="loft"] .bm-loftp *::before, html[data-theme="loft"] .bm-loftp *::after { box-sizing: border-box; }
html[data-theme="loft"] .bm-loftp-col { width: 100%; }
html[data-theme="loft"] .bm-loftp button { font-family: inherit; }
html[data-theme="loft"] .bm-loftp button:focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 2px; }

/* 1. TRINITY BANNER ------------------------------------------ */
html[data-theme="loft"] .bm-loftp-trinity { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; height: 180px; background: var(--lp-cream); }
html[data-theme="loft"] .bm-loftp-panel { position: relative; display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; border-radius: 0;
  background: var(--lp-placeholder); overflow: hidden; cursor: pointer; }
html[data-theme="loft"] .bm-loftp-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
html[data-theme="loft"] .bm-loftp-empty-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 900 10px/1 var(--lp-sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--lp-faint); }
html[data-theme="loft"] .bm-loftp-live-dot { position: absolute; right: 10px; bottom: 10px; width: 10px; height: 10px; border-radius: 50%; background: #34C759; box-shadow: 0 0 0 2px var(--lp-white); }

/* 2. NAME BAND ----------------------------------------------- */
html[data-theme="loft"] .bm-loftp-band { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px 24px; background: var(--lp-khaki); color: var(--lp-ink); }
html[data-theme="loft"] .bm-loftp-band-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html[data-theme="loft"] .bm-loftp-name { margin: 0; font: 700 26px/1.15 var(--lp-serif); color: var(--lp-ink); letter-spacing: .2px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
html[data-theme="loft"] .bm-loftp-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font: 700 10px/1.5 var(--lp-sans); color: rgba(26,26,24,.78); }
html[data-theme="loft"] .bm-loftp-sub .dot { color: rgba(26,26,24,.55); font-weight: 400; }
html[data-theme="loft"] .bm-loftp-sub .loc { font-weight: 500; color: rgba(26,26,24,.70); }
html[data-theme="loft"] .bm-loftp-score { margin-top: 6px; }
html[data-theme="loft"] .bm-loftp-score .bm-score-badge { margin: 0; }
html[data-theme="loft"] .bm-loftp-band-right { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
html[data-theme="loft"] .bm-loftp-edit { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border: 1px solid rgba(26,26,24,.45); border-radius: 0;
  background: transparent; color: var(--lp-ink); font: 900 10px/1 var(--lp-sans); letter-spacing: 1.5px; cursor: pointer; }
html[data-theme="loft"] .bm-loftp-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid rgba(26,26,24,.30); border-radius: 50%; background: rgba(250,247,242,.35); color: var(--lp-ink); cursor: pointer; }
html[data-theme="loft"] .bm-loftp-icon.done { background: var(--lp-ink); color: var(--lp-cream); }
@media (hover: hover) {
  html[data-theme="loft"] .bm-loftp-edit:hover, html[data-theme="loft"] .bm-loftp-icon:hover { background: rgba(26,26,24,.08); }
}

/* Welcome Mat + Block ID inside the khaki band (left-aligned like ThemeWelcomeMat / ThemeBlockID) */
html[data-theme="loft"] .bm-loftp-wm { margin-top: 12px; }
html[data-theme="loft"] .bm-loftp-wm .bm-wm { font: 600 14px/1.45 var(--lp-sans); color: var(--lp-ink); text-align: left; margin: 0; }
html[data-theme="loft"] .bm-loftp-wm .bm-wm-empty { display: inline-flex; align-items: flex-start; margin: 0; padding: 8px 12px; border-radius: 0;
  border: 1px dashed rgba(26,26,24,.40); background: transparent; color: var(--lp-ink); font: 700 12px/1.3 var(--lp-sans); cursor: pointer; }
html[data-theme="loft"] .bm-loftp-wm .bm-wm-empty small { color: rgba(26,26,24,.62); font-weight: 500; }
html[data-theme="loft"] .bm-loftp-bid { margin-top: 12px; }
html[data-theme="loft"] .bm-loftp-bid .bm-bid-chips { justify-content: flex-start; gap: 6px; }
html[data-theme="loft"] .bm-loftp-bid .bm-bid-chip { background: rgba(26,26,24,.10); border: 0; color: var(--lp-ink); font-size: 12px; padding: 6px 11px; }
html[data-theme="loft"] .bm-loftp-bid .bm-bid-open { background: transparent; border: 1px solid rgba(26,26,24,.45); color: var(--lp-ink); font-size: 12px; padding: 5px 11px; }
html[data-theme="loft"] .bm-loftp-bid .bm-bid-card { margin: 10px 0 0; max-width: 520px; border-radius: 14px; background: rgba(250,247,242,.55);
  border: 1px solid rgba(26,26,24,.25); color: var(--lp-ink); }

/* 3. TABS — one scrolling row, master order, no label ever wraps --------- */
html[data-theme="loft"] .bm-loftp-tabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 0; margin: 0; padding: 0 12px;
  overflow-x: auto; scrollbar-width: none; background: var(--lp-cream); border-bottom: .5px solid var(--lp-divider); box-shadow: none; }
html[data-theme="loft"] .bm-loftp-tabs::-webkit-scrollbar { display: none; }
html[data-theme="loft"] .bm-loftp .bm-loftp-tab { flex: none; white-space: nowrap; padding: 14px 14px 12px; margin: 0; background: transparent; border: 0;
  border-bottom: 2px solid transparent; border-radius: 0; color: var(--lp-faint); font: 900 10px/1 var(--lp-sans); letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
html[data-theme="loft"] .bm-loftp .bm-loftp-tab.active { color: var(--lp-ink); border-bottom-color: var(--lp-khaki); }

/* 4. TAB PAGE ------------------------------------------------ */
html[data-theme="loft"] .bm-loftp-page { padding: 20px 24px 28px; background: var(--lp-cream); min-height: 240px; }
html[data-theme="loft"] .bm-loftp-label { font: 900 10px/1 var(--lp-sans); letter-spacing: 3px; color: var(--lp-khaki-text); }
html[data-theme="loft"] .bm-loftp-rule { height: 1px; background: var(--lp-divider); margin: 14px 0; }
html[data-theme="loft"] .bm-loftp-emptytext { font: italic 13px/1.5 var(--lp-serif); color: var(--lp-faint); padding: 12px 0; }
html[data-theme="loft"] .bm-loftp-bio { font: 15px/1.6 var(--lp-serif); color: var(--lp-ink); }
html[data-theme="loft"] .bm-loftp-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 14px; }
html[data-theme="loft"] .bm-loftp-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="loft"] .bm-loftp-person-img { width: 56px; height: 56px; border-radius: 50%; background: var(--lp-placeholder) center/cover no-repeat; border: 1.5px solid rgba(169,149,122,.40); }
html[data-theme="loft"] .bm-loftp-person-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 10px/1.2 var(--lp-sans); letter-spacing: .5px; color: var(--lp-muted); }
html[data-theme="loft"] .bm-loftp-porch { display: flex; flex-direction: column; gap: 12px; }
html[data-theme="loft"] .bm-loftp-post { background: var(--lp-white); border: .5px solid var(--lp-divider); padding: 14px 16px; }
html[data-theme="loft"] .bm-loftp-post p { margin: 0 0 8px; font: 15px/1.5 var(--lp-serif); color: var(--lp-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
html[data-theme="loft"] .bm-loftp-post-media { display: block; width: 100%; max-height: 420px; object-fit: cover; margin-bottom: 8px; background: var(--lp-placeholder); }
html[data-theme="loft"] .bm-loftp-post time { font: 900 9px/1 var(--lp-sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--lp-faint); }
html[data-theme="loft"] .bm-loftp-gb-entry { padding: 10px 0; border-bottom: .5px solid rgba(169,149,122,.12); }
html[data-theme="loft"] .bm-loftp-gb-author { font: 900 10px/1 var(--lp-sans); letter-spacing: 1.5px; color: var(--lp-khaki-text); margin-bottom: 5px; }
html[data-theme="loft"] .bm-loftp-gb-text { font: italic 14px/1.5 var(--lp-serif); color: var(--lp-muted); overflow-wrap: anywhere; }
html[data-theme="loft"] .bm-loftp-gb-meta { font: 10px/1 var(--lp-sans); color: var(--lp-faint); margin-top: 5px; }
html[data-theme="loft"] .bm-loftp-cardcta { margin-top: 14px; }
html[data-theme="loft"] .bm-loftp-cta { padding: 9px 16px; border: 1px solid var(--lp-ink); background: transparent; color: var(--lp-ink); border-radius: 0;
  font: 900 10px/1 var(--lp-sans); letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }

/* FOOTER ----------------------------------------------------- */
html[data-theme="loft"] .bm-loftp-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 24px;
  background: var(--lp-white); border-top: .5px solid var(--lp-divider); }
html[data-theme="loft"] .bm-loftp-footer-name { font: italic 400 16px/1.3 var(--lp-serif); color: var(--lp-khaki-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="loft"] .bm-loftp-signout { flex: none; padding: 6px 14px; border: .5px solid rgba(169,149,122,.45); background: transparent; color: var(--lp-faint); border-radius: 0; font: 11px/1 var(--lp-sans); cursor: pointer; }

/* Visitor bar sits on the cream canvas */
html[data-theme="loft"] .bm-par-visitor .bm-par-visitor-bar { background: #FAF7F2; }

/* RESPONSIVE --------------------------------------------------
   Phones: fill the width. Narrow phones: the button column drops under the name.
   Regular-width canvases (AdaptiveLayout): cap to a reading width and center. */
@container (max-width: 440px) {
  html[data-theme="loft"] .bm-loftp-band { flex-direction: column; padding: 14px 16px; }
  html[data-theme="loft"] .bm-loftp-band-right { flex-direction: row; align-self: stretch; }
  html[data-theme="loft"] .bm-loftp-name { font-size: 22px; }
  html[data-theme="loft"] .bm-loftp-trinity { height: 150px; }
  html[data-theme="loft"] .bm-loftp-page { padding: 16px; }
  html[data-theme="loft"] .bm-loftp-footer { padding: 18px 16px; }
}
@media (max-width: 440px) {
  html[data-theme="loft"] .bm-loftp-band { flex-direction: column; padding: 14px 16px; }
  html[data-theme="loft"] .bm-loftp-band-right { flex-direction: row; align-self: stretch; }
  html[data-theme="loft"] .bm-loftp-name { font-size: 22px; }
  html[data-theme="loft"] .bm-loftp-page { padding: 16px; }
}
@container (min-width: 640px) {
  html[data-theme="loft"] .bm-loftp-trinity { height: 220px; }
  html[data-theme="loft"] .bm-loftp-name { font-size: 28px; }
}
@container (min-width: 900px) {
  html[data-theme="loft"] .bm-loftp-col { max-width: none; margin-inline: auto; }
  html[data-theme="loft"] .bm-loftp-trinity { height: 240px; }
}
/* TVs: bigger focus targets, no hover dependence */
html.bm-tv[data-theme="loft"] .bm-loftp .bm-loftp-tab { padding: 18px 18px 14px; font-size: 13px; }
html.bm-tv[data-theme="loft"] .bm-loftp button:focus { outline: 3px solid var(--lp-ink); outline-offset: 3px; }
/* /PARITY loft */