/* ============================================================
   BORG SITES, the portal's top bar (every signed-in page, and the public
   pages a signed-in customer opens from it)

   One look for the bar wherever it is drawn: on every portal page, loaded
   before portal.css, and on /explore, /hire, /help, /pricing, /cart and
   /email, added by portal.js the moment the visitor is known to be signed
   in (site.js's <borg-header data-portal-bar>). So it carries everything the
   bar needs and nothing else: the portal's color tokens, the bar, its menus,
   the credits meter, the plan badge, the avatar, the phone panel, the
   skeletons it shows while the account loads and the toasts the shell says
   things in. Its few resets are scoped to the bar, under :where() so they
   never outrank a class, which keeps a public page's own styles untouched.

   Every color pair here is measured in portal.css's contrast table.
   ============================================================ */

:root {
  --pt-bg: #F5F6FB;
  --pt-surface: #FFFFFF;
  --pt-ink: #0A0E27;
  --pt-ink-2: #4A5072;
  --pt-ink-3: #646A88;
  --pt-line: #E3E6F0;
  --pt-line-strong: #CDD2E1;
  --pt-control: #858BA4;
  --pt-sunk: #EEF0F6;
  --pt-tint: #EEF2FE;
  --pt-focus: #2E7DF6;
  --pt-link: #2668CC;
  --pt-danger: #B42318;
  --pt-danger-hover: #961C13;
  --pt-danger-tint: #FEF3F2;
  --pt-danger-line: #F3C7C1;
  --pt-ok: #0F7A34;
  --pt-ok-tint: #E7F6EC;
  --pt-ok-dot: #15803D;
  --pt-warn: #8A4B08;
  --pt-warn-tint: #FDF0DC;
  --pt-warn-dot: #B45309;
  --pt-info: #1F5FD0;
  --pt-info-tint: #E8F0FE;
  --pt-toast: #0A0E27;

  --pt-r-card: 12px;
  --pt-r-control: 10px;
  --pt-r-small: 8px;
  --pt-shadow: 0 1px 2px rgba(10, 14, 39, .05), 0 6px 20px -8px rgba(10, 14, 39, .10);
  --pt-shadow-hover: 0 2px 4px rgba(10, 14, 39, .06), 0 14px 32px -12px rgba(10, 14, 39, .16);
  --pt-shadow-pop: 0 2px 6px rgba(10, 14, 39, .08), 0 24px 48px -16px rgba(10, 14, 39, .24);

  /* the 8px spacing scale */
  --pt-1: 8px;
  --pt-2: 16px;
  --pt-3: 24px;
  --pt-4: 32px;
  --pt-5: 40px;
  --pt-6: 48px;
  --pt-8: 64px;

  --pt-bar-h: 60px;
  --pt-side-w: 248px;
  --pt-content: 880px;
  --pt-wide: 1200px;

  --pt-fast: .16s;
}

/* ---------- the bar's own base, the same on a public page ---------- */
.pbar {
  font-family: var(--font-body);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--pt-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:where(.pbar, .ptoasts) img, :where(.pbar, .ptoasts) svg { display: block; }
:where(.pbar, .ptoasts) svg { flex: none; }
:where(.pbar) p { margin: 0; }
:where(.pbar) button { font: inherit; color: inherit; }
:where(.pbar) :focus-visible { outline: 2px solid var(--pt-focus); outline-offset: 2px; }
.pbar [hidden] { display: none !important; }
/* the phone panel holds the page still while it is open */
body.is-locked { overflow: hidden; }

/* ============================================================
   TOP BAR
   ============================================================ */
.pbar {
  position: sticky; top: 0; z-index: 200;
  height: var(--pt-bar-h);
  background: var(--pt-surface);
  border-bottom: 1px solid var(--pt-line);
}
.pbar__in { height: 100%; display: flex; align-items: center; gap: var(--pt-1); padding: 0 var(--pt-3); }

.pbar__brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  margin-right: var(--pt-2); padding: 4px 6px 4px 2px; border-radius: var(--pt-r-small);
  color: var(--pt-ink); text-decoration: none;
  font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem; letter-spacing: -.02em; line-height: 1;
}
.pbar__mark { width: 28px; height: 28px; filter: drop-shadow(0 3px 8px rgba(123, 63, 228, .28)); }
.pbar__grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .pbar__grad { color: var(--brand-2); } }

/* the middle: the main menu, and on phones the full-height panel it folds into */
.pmenu { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.pmenu__plan { display: none; }
.pnav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.pnav__item { position: relative; }
.pnav__link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px; border: 0; border-radius: var(--pt-r-small);
  background: transparent; color: var(--pt-ink); cursor: pointer;
  font-family: var(--font-body); font-weight: 500; font-size: .875rem; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color var(--pt-fast) var(--ease);
}
.pnav__link:hover { background: var(--pt-sunk); text-decoration: none; }
.pnav__link[aria-expanded="true"] { background: var(--pt-sunk); }
.pnav__link[aria-current="page"],
.pnav__item:has(.pdrop [aria-current="page"]) > .pnav__link { background: var(--pt-tint); font-weight: 600; }
.pnav__chev { width: 16px; height: 16px; color: var(--pt-ink-2); transition: transform var(--pt-fast) var(--ease); }
.pnav__link[aria-expanded="true"] .pnav__chev { transform: rotate(180deg); }

/* the right side: credits, plan, avatar */
.pbar__right { display: flex; align-items: center; gap: var(--pt-1); margin-left: auto; flex: none; }
.pbar__slot { position: relative; }

/* ---------- dropdown panels (All Sites, Help, credits, avatar, a card's More) ---------- */
.pdrop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 260;
  min-width: 248px; max-width: min(340px, calc(100vw - 32px));
  padding: var(--pt-1);
  background: var(--pt-surface); border: 1px solid var(--pt-line); border-radius: var(--pt-r-card);
  box-shadow: var(--pt-shadow-pop);
  transition: opacity var(--pt-fast) var(--ease), transform var(--pt-fast) var(--ease-out);
}
@starting-style { .pdrop { opacity: 0; transform: translateY(-4px); } }
.pdrop--right { left: auto; right: 0; }
.pdrop__list { list-style: none; margin: 0; padding: 0; }
.pdrop__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 40px; padding: 8px 12px; border: 0; border-radius: var(--pt-r-small);
  background: transparent; color: var(--pt-ink); cursor: pointer; text-align: left; text-decoration: none;
  font-family: var(--font-body); font-size: .875rem; font-weight: 500; line-height: 1.3;
}
.pdrop__item:hover, .pdrop__item:focus-visible { background: var(--pt-sunk); text-decoration: none; }
.pdrop__item:focus-visible { outline-offset: -2px; }
.pdrop__item[aria-current="page"] { background: var(--pt-tint); font-weight: 600; }
.pdrop__item svg { width: 18px; height: 18px; color: var(--pt-ink-2); }
.pdrop__item--strong { font-weight: 600; }
.pdrop__item--danger, .pdrop__item--danger svg { color: var(--pt-danger); }
.pdrop__item--danger:hover, .pdrop__item--danger:focus-visible { background: var(--pt-danger-tint); }
.pdrop__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdrop__sep { height: 1px; margin: 6px 4px; background: var(--pt-line); border: 0; }
.pdrop__label { padding: 8px 12px 4px; font-family: var(--font-display); font-size: .75rem; font-weight: 600; color: var(--pt-ink-2); }
.pdrop__sites { max-height: 280px; overflow-y: auto; }
.pdrop__empty { padding: 8px 12px; font-size: .875rem; color: var(--pt-ink-2); }
.pdrop__skel { display: grid; gap: 8px; padding: 8px 12px; }

/* a site's status, as a dot (its words are beside it for screen readers) */
.pdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--pt-control); }
.pdot--published { background: var(--pt-ok-dot); }
.pdot--paused { background: var(--pt-warn-dot); }

/* ---------- AI credits chip ---------- */
.pcredits__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px 0 12px; border: 1px solid var(--pt-line); border-radius: 999px;
  background: var(--pt-surface); color: var(--pt-ink); cursor: pointer;
  font-family: var(--font-body); font-size: .8125rem; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: border-color var(--pt-fast) var(--ease), background-color var(--pt-fast) var(--ease);
}
.pcredits__btn:hover, .pcredits__btn[aria-expanded="true"] { border-color: var(--pt-line-strong); background: #FAFBFD; }
.pcredits__btn svg { width: 16px; height: 16px; color: var(--brand-2); }
.pcredits__drop { width: 300px; padding: var(--pt-2); }
.pcredits__title { font-size: .9375rem; font-weight: 700; margin-bottom: var(--pt-2); }
.pcredits__row + .pcredits__row { margin-top: var(--pt-2); }
.pcredits__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pt-1); margin-bottom: 8px; }
.pcredits__name { font-size: .875rem; font-weight: 600; color: var(--pt-ink); }
.pcredits__count { font-size: .8125rem; color: var(--pt-ink-2); white-space: nowrap; }
.pcredits__note { margin-top: var(--pt-2); padding-top: 12px; border-top: 1px solid var(--pt-line); font-size: .8125rem; color: var(--pt-ink-2); }

/* the thin gradient meter: the bright brand gradient, one of its three accents */
.pmeter { height: 6px; border-radius: 999px; background: var(--pt-sunk); overflow: hidden; }
.pmeter__fill {
  height: 100%; width: var(--fill, 0%); border-radius: inherit; background: var(--grad-brand);
  transition: width .6s var(--ease-out);
}

/* ---------- plan badge ---------- */
.pplan { display: inline-flex; align-items: center; gap: 10px; }
.pplan__badge {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--pt-surface), var(--pt-surface)) padding-box, var(--grad-brand) border-box;
  color: var(--pt-ink); font-family: var(--font-display); font-size: .75rem; font-weight: 700; line-height: 1; white-space: nowrap;
}
.pplan__text { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pplan__upgrade { font-family: var(--font-display); font-size: .8125rem; font-weight: 700; color: var(--pt-link); text-decoration: none; white-space: nowrap; border-radius: 6px; }
.pplan__upgrade:hover { text-decoration: underline; }

/* ---------- avatar ---------- */
.pavatar__btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--grad-brand-deep); color: #FFFFFF;
  font-family: var(--font-display); font-size: .8125rem; font-weight: 700; line-height: 1; letter-spacing: .02em;
  box-shadow: 0 0 0 2px var(--pt-surface), 0 0 0 3px var(--pt-line);
}
.pavatar__btn:hover { box-shadow: 0 0 0 2px var(--pt-surface), 0 0 0 3px var(--pt-line-strong); }
/* the account photo (2026-10-18): drawn over the initials by portal.js once
   it has loaded, so a photo that cannot load leaves the initials showing */
.pavatar__btn { position: relative; overflow: hidden; }
.pavatar__img, .pavatar__face { object-fit: cover; border-radius: 50%; }
.pavatar__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity var(--pt-fast) var(--ease);
}
.pavatar__btn.has-photo .pavatar__img { opacity: 1; }
.pavatar__head { padding: 8px 12px 10px; }
.pavatar__head.has-face { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.pavatar__head.has-face > p { grid-column: 2; }
.pavatar__face { grid-column: 1; grid-row: 1 / span 2; width: 40px; height: 40px; }
.pavatar__name { font-weight: 600; font-size: .9375rem; overflow-wrap: anywhere; }
.pavatar__email { font-size: .8125rem; color: var(--pt-ink-2); overflow-wrap: anywhere; }

/* skeleton stand-ins in the bar while /api/me answers */
.pbar__skel { display: inline-block; height: 28px; border-radius: 999px; }
.pbar__skel--chip { width: 132px; }
.pbar__skel--plan { width: 72px; }
.pbar__skel--avatar { width: 36px; height: 36px; border-radius: 50%; }

/* ---------- phone menu button ---------- */
.pbar__burger {
  display: none; place-items: center; width: 40px; height: 40px; padding: 0; margin-left: 2px;
  border: 0; border-radius: var(--pt-r-control); background: transparent; color: var(--pt-ink); cursor: pointer;
}
.pbar__burger:hover { background: var(--pt-sunk); }
.pbar__burger svg { width: 22px; height: 22px; }
.pbar__burger .is-close { display: none; }
.pbar__burger[aria-expanded="true"] .is-open { display: none; }
.pbar__burger[aria-expanded="true"] .is-close { display: block; }

/* ============================================================
   SKELETONS (no spinners)
   ============================================================ */
.skel {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg, #ECEEF5 0%, #F6F7FB 50%, #ECEEF5 100%);
  background-size: 200% 100%; animation: pt-shimmer 1.4s ease-in-out infinite;
}
.skel--line { height: 12px; }
.skel--title { height: 18px; width: 55%; }
.skel--short { width: 35%; }
.skel--mid { width: 70%; }
.skel--block { height: 120px; }
.skel--btn { height: 34px; width: 100%; border-radius: var(--pt-r-control); }
.skel-stack { display: grid; gap: 12px; }
@keyframes pt-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ============================================================
   TOASTS
   ============================================================ */
.ptoasts {
  position: fixed; left: 50%; bottom: var(--pt-3); z-index: 500; transform: translateX(-50%);
  display: grid; gap: var(--pt-1); justify-items: center; width: min(480px, calc(100% - 32px)); pointer-events: none;
}
.ptoast {
  display: flex; align-items: center; gap: 10px; max-width: 100%;
  padding: 12px var(--pt-2); border-radius: var(--pt-r-control);
  background: var(--pt-toast); color: #FFFFFF; box-shadow: var(--pt-shadow-pop);
  font-size: .875rem; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; pointer-events: auto;
  transition: opacity .2s var(--ease), transform .24s var(--ease-out);
}
@starting-style { .ptoast { opacity: 0; transform: translateY(10px); } }
.ptoast.is-leaving { opacity: 0; transform: translateY(6px); }
.ptoast--error { background: var(--pt-danger); }
.ptoast svg { width: 18px; height: 18px; }

/* ============================================================
   NARROW DESKTOPS (900px to 1199px): the full bar is about 1,040px wide,
   so the credits chip shows its number only (its whole label stays its
   accessible name), the menu tightens a little, and a long plan name is
   cut with an ellipsis. Measured, so nothing overlaps at 900px.
   ============================================================ */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .pbar__in { padding: 0 var(--pt-2); }
  .pbar__brand { margin-right: var(--pt-1); }
  .pnav__link { padding: 0 10px; }
  .pcredits__btn { padding: 0 10px; }
  .pcredits__long { display: none; }
  .pbar__skel--chip { width: 56px; }
  .pplan__text { max-width: 132px; }
}

/* ============================================================
   PHONES AND TABLETS (under 900px): the bar folds its middle into a panel
   ============================================================ */
@media (max-width: 899.98px) {
  .pbar__in { padding: 0 var(--pt-2); gap: 6px; }
  .pbar__brand { margin-right: auto; }
  .pbar__burger { display: inline-grid; }
  .pbar__right { margin-left: 0; gap: 6px; }

  /* the middle items fold into a full-height panel, in the same order */
  .pmenu {
    position: fixed; top: var(--pt-bar-h); left: 0; right: 0; bottom: 0; z-index: 240;
    display: none; flex-direction: column; align-items: stretch;
    padding: var(--pt-2); overflow-y: auto; overscroll-behavior: contain;
    background: var(--pt-surface); border-top: 1px solid var(--pt-line);
  }
  .pmenu.is-open { display: flex; }
  @starting-style { .pmenu.is-open { opacity: 0; transform: translateY(-6px); } }
  .pmenu.is-open { transition: opacity var(--pt-fast) var(--ease), transform .22s var(--ease-out); }
  .pmenu__plan { display: flex; align-items: center; justify-content: space-between; gap: var(--pt-2); padding: 4px 4px var(--pt-2); margin-bottom: var(--pt-1); border-bottom: 1px solid var(--pt-line); }
  .pmenu__plan-label { font-size: .8125rem; color: var(--pt-ink-2); }
  .pnav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .pnav__link { width: 100%; height: 52px; padding: 0 12px; font-size: 1rem; justify-content: space-between; }
  .pnav__item .pdrop { position: static; min-width: 0; max-width: none; padding: 0 0 var(--pt-1) var(--pt-1); border: 0; box-shadow: none; }
  .pnav__item .pdrop__item { min-height: 44px; font-size: .9375rem; }
  .pnav__item .pdrop__sites { max-height: none; }

  /* the plan badge lives in the panel; the credits chip keeps its number */
  .pbar__right .pplan, .pbar__right .pbar__skel--plan { display: none; }
  .pcredits__btn { padding: 0 10px; }
  .pcredits__long { display: none; }
  .pbar__skel--chip { width: 56px; }
  /* the credits and avatar menus span the screen under the bar, so neither
     can run off its left edge */
  .pbar__right .pdrop { position: fixed; top: calc(var(--pt-bar-h) + 6px); left: var(--pt-2); right: var(--pt-2); width: auto; min-width: 0; max-width: none; }
}

@media (max-width: 420px) {
  .pbar__word { font-size: 1rem; }
  .pbar__brand { gap: 8px; padding-right: 2px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :where(.pbar, .ptoasts) *, .ptoasts, .pdrop, .pmenu.is-open { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .skel { animation: none; background: #ECEEF5; }
}