/* ⭐⭐ THE PARTNER SHELL — F-201 / F-177 / F-175 / F-170, which are one complaint said four ways.
   Christa, 9/4: "it's kind of all just very choppy and not placed together… you can have that bar
   up top and then click into the different sections… it feels very clunky between the whole
   realtor interface right now."

   Before this file there were THREE different top bars (/partner/ had one, /contacts had another,
   /settings a third) and /partner/buyer had NONE — which is exactly what F-177 caught: "it kind of
   loses the branding of like what they're in and what they're working on."

   One bar. Every signed-in realtor screen. Two rows, and the two rows are the point:

     ROW 1 — the co-brand.  Agent on one side, loan officer on the other, CLEAR in the middle.
             F-170: "it just needs to be more like one officer one side agent on the other…
             that has to be more visual up top." A realtor should never have to wonder whose
             software this is or who her lender is.
     ROW 2 — the nav.  My buyers · My people · My settings, and Sign out at the far end. The
             current screen is marked, so "where am I" is answered without reading.

   Desktop-first sizing here, because every one of these rows arrived at 1440×900 — but the phone
   layout is not an afterthought: below 720px the pair compresses to one line and the nav scrolls. */

.pbar{position:sticky;top:0;z-index:60;background:linear-gradient(165deg,#14324f 0%,#153c4d 70%,#0f2d34 100%);
  color:#fff;box-shadow:0 2px 18px rgba(11,32,48,.22)}
.pbar a{color:inherit;text-decoration:none}

/* ── ROW 1 · the co-brand strip ────────────────────────────────────────────── */
/* ⛔ Every class in this file is prefixed `pbar-`, including the two side markers. `.lo` and
   `.agent` were the obvious names and both are ALREADY DEFINED by pages this bar mounts on —
   /partner/ styles `.lo` as a padded card, so the loan officer silently grew a box inside the
   masthead on that one page and nowhere else. A shared shell that inherits each page's CSS is
   not a shared shell. */
.pbar-brand{max-width:1180px;margin:0 auto;padding:11px 22px 10px;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}
.pbar-logo{justify-self:center}
.pbar-logo img{height:22px;display:block}

.pbar-id{display:flex;align-items:center;gap:10px;min-width:0}
.pbar-id.pbar-lo{justify-self:end;flex-direction:row-reverse;text-align:right}
/* ⭐ F-203 · "initials in a circle next to Christa's photo feels uneven — she should feel as real
   on the page as Christa does." Two fixes, and both are needed. The payload now carries her
   headshot so a real face wins whenever she has set one. When she has NOT, the fallback is a
   solid, confident teal disc with white letters — a monogram that reads as designed, rather than
   the pale washed-out placeholder that made her look like a missing image beside a photograph. */
.pbar-face{width:38px;height:38px;border-radius:50%;flex:none;object-fit:cover;
  background:linear-gradient(150deg,#1FABAA,#0F6F6E);color:#fff;display:grid;place-items:center;
  font:800 13.5px/1 system-ui;letter-spacing:.02em;border:2px solid rgba(255,255,255,.34);
  box-shadow:0 2px 10px rgba(0,0,0,.22)}
img.pbar-face{background:#EAF8F8}
.pbar-id b{display:block;font:750 14px/1.2 system-ui;letter-spacing:-.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pbar-id span{display:block;font:500 11.5px/1.35 system-ui;color:#a8c9cd;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pbar-role{font:800 9.5px/1 system-ui;letter-spacing:.13em;text-transform:uppercase;color:#7fd6d5;
  margin-bottom:3px;display:block}

/* the two little actions on the loan officer — a realtor's whole job is reaching her lender fast */
.pbar-acts{display:flex;gap:6px;flex:none}
.pbar-acts a{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16)}
.pbar-acts a:hover{background:rgba(31,171,170,.34)}
.pbar-acts svg{width:15px;height:15px;display:block;fill:none;stroke:#fff;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* ── ROW 2 · the nav strip ─────────────────────────────────────────────────── */
.pbar-navwrap{border-top:1px solid rgba(255,255,255,.13);background:rgba(0,0,0,.15)}
.pbar-nav{max-width:1180px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:4px}
.pbar-nav a,.pbar-nav button{font:730 13px system-ui;color:#c6dcdd;background:none;border:0;
  padding:11px 13px;cursor:pointer;border-bottom:2.5px solid transparent;white-space:nowrap;
  font-family:inherit;display:inline-flex;align-items:center;gap:7px}
.pbar-nav a:hover,.pbar-nav button:hover{color:#fff}
.pbar-nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--teal,#1FABAA)}
.pbar-nav svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.pbar-out{margin-left:auto;color:#8fb3b8 !important}

/* ── phone ─────────────────────────────────────────────────────────────────── */
@media (max-width:720px){
  /* ⭐ F-170 · "I don't mind it so much on the phone version" — so the phone must NOT pay for the
     desktop co-brand. Stacking the two identity blocks cost ~215px before the first buyer card.
     Here they share one grid: the CLEAR mark and the agent on the top line, the loan officer on a
     thin second line with her call/email buttons at the far end. ~104px, and both names still show. */
  .pbar-brand{grid-template-columns:auto minmax(0,1fr) auto;gap:9px;padding:8px 13px 7px}
  .pbar-logo{grid-row:1;grid-column:1;justify-self:start}
  .pbar-logo img{height:16px}
  .pbar-id.pbar-agent{grid-row:1;grid-column:2/-1;gap:8px}
  .pbar-id.pbar-lo{grid-row:2;grid-column:1/-1;justify-self:stretch;flex-direction:row;text-align:left;
    gap:8px;padding-top:7px;border-top:1px solid rgba(255,255,255,.11)}
  .pbar-id.pbar-lo .pbar-acts{margin-left:auto}
  .pbar-face{width:28px;height:28px;font-size:10.5px;border-width:1.5px}
  .pbar-id b{font-size:13px}
  .pbar-id span{font-size:11px}
  /* the eyebrow survives only on the loan officer — that is the one a realtor has to be sure of */
  .pbar-id.pbar-agent .pbar-role{display:none}
  .pbar-id.pbar-lo .pbar-role{display:inline;font-size:8.5px;margin-bottom:1px}
  .pbar-acts a{width:28px;height:28px;border-radius:8px}
  .pbar-nav{padding:0 8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pbar-nav::-webkit-scrollbar{display:none}
  .pbar-nav a,.pbar-nav button{padding:10px 10px;font-size:12.5px}
  .pbar-out{margin-left:8px;padding-right:16px}
}

/* Pages built before the shell existed set their own top padding for a bar that no longer exists.
   `.pbar-host` on <body> is how a page says "the shell owns the top of me". */
.pbar-host{margin-top:0}