/* ============================================================
   MEMBER HUB CHROME
   Shared by the pages a member reaches from /members: /booth,
   /intros, /feedback and /activate-key.

   .hubbar    the way back to the hub. On a phone it is the small
              pill these pages have always carried. From 768px it
              becomes a bar across the top of the page, with the
              signed-in email and Sign out on the right.

   Phone layouts are the reference: nothing below 768px changes
   size or position. Wider screens only add.
   ============================================================ */

/* ---- the way back ---- */
.hubbar { display: block; margin: 0 0 18px; }
.hubbar__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--flow-0); text-decoration: none;
  padding: 7px 12px 7px 10px; border-radius: 999px;
  background: var(--open-3); border: 1px solid var(--open-subtle);
}
.hubbar__back:hover { border-color: var(--deep-4); background: var(--open-2); }
.hubbar__back:focus-visible { outline: 2px solid var(--flow-0); outline-offset: 3px; }
.hubbar__back > span { font-size: 15px; line-height: 1; }
.hubbar__mark { display: none; }
/* Sign out lives inside each page on a phone, so the bar does not repeat it. */
.hubbar__who { display: none; }

@media (min-width: 768px) {
  .hubbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin: 0 0 32px; padding: 0 0 16px; border-bottom: 1px solid var(--ground-3);
  }
  .hubbar__back { gap: 10px; padding: 6px 16px 6px 6px; font-size: 14.5px; }
  /* The club chair, cream on a teal disc: the same one-ink recolour the
     background chairs use (DESIGN.md "Recoloring technique"). */
  .hubbar__mark {
    display: block; flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%;
    background: var(--flow-0);
  }
  .hubbar__mark::before {
    content: ""; position: absolute; inset: 6px; background: var(--open-0);
    -webkit-mask: url("../svg/LogoChair.svg") center / contain no-repeat;
            mask: url("../svg/LogoChair.svg") center / contain no-repeat;
  }
  .hubbar__who {
    display: flex; align-items: center; gap: 10px; margin: 0; min-width: 0;
    font-size: 13.5px; line-height: 1.3; color: var(--deep-2);
  }
  .hubbar__who[hidden] { display: none; }
  .hubbar__who b {
    font-weight: 600; color: var(--deep-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .hubbar__who button {
    flex: none; font: inherit; font-weight: 600; color: var(--flow-0); cursor: pointer;
    background: none; border: 1px solid var(--deep-4); border-radius: 999px; padding: 6px 12px;
  }
  .hubbar__who button:hover { border-color: var(--deep-0); }
}