/* CALIBER signed-in identity badge on the public headers (v127; caliber-account.js). Sized and set like the header's
   Sign In button (same height, radius and mono caps) so it takes its place without crowding the nav: obsidian fill,
   violet hairline and a restrained glow, a green session dot, the first name, a chevron. Phones: the initial in a
   ring with the dot. Loaded in <head> so the pending rule is in place before the header paints. */

/* a stored sign-in is being checked: hold Sign In / Create Account invisible (space kept, no flash) */
html.cal-auth-pending header :is(.nx-nav-btn.signin, .nx-nav-btn.create) { visibility: hidden !important; }
html body header .cal-id-off { display: none !important; }

.cal-id { position: relative; display: inline-flex; flex: none; }
html body .cal-id__btn {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 40px; padding: 0 13px 0 12px; border-radius: 6px;
  background: linear-gradient(180deg, #14121C 0%, #0A090F 100%);
  border: 1px solid rgba(178, 120, 255, .55);
  box-shadow: 0 0 0 1px rgba(164, 92, 255, .08), 0 0 14px rgba(164, 92, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .05);
  color: var(--ds-ink, #F2EEF8);
  font: 700 14px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease;
}
html body .cal-id__btn:hover, html body .cal-id.is-open .cal-id__btn {
  border-color: rgba(198, 155, 255, .85);
  box-shadow: 0 0 0 1px rgba(164, 92, 255, .2), 0 0 20px rgba(164, 92, 255, .34), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html body .cal-id__btn:focus-visible { outline: 2px solid #C69BFF; outline-offset: 2px; }
.cal-id__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #3DDC84; box-shadow: 0 0 0 2px rgba(61, 220, 132, .16), 0 0 7px rgba(61, 220, 132, .65);
}
.cal-id__name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-id__init { display: none; }
.cal-id__chev { flex: none; color: var(--ds-ink-3, #A9A2BB); transition: transform .18s ease; }
.cal-id.is-open .cal-id__chev { transform: rotate(180deg); }

.cal-id__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 1000;
  min-width: 212px; padding: 6px; border-radius: 10px;
  background: linear-gradient(180deg, #15131D 0%, #0B0A10 100%);
  border: 1px solid rgba(178, 120, 255, .38);
  box-shadow: 0 0 22px rgba(164, 92, 255, .18), 0 18px 40px rgba(0, 0, 0, .55);
}
.cal-id__menu[hidden] { display: none; }
html body .cal-id__item {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; margin: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--ds-ink, #F2EEF8) !important; text-decoration: none !important; text-align: left;
  font: 600 14px/1.2 Inter, ui-sans-serif, system-ui, sans-serif !important; letter-spacing: .01em; text-transform: none;
  cursor: pointer;
}
html body .cal-id__item:is(:hover, :focus-visible) { background: rgba(164, 92, 255, .16); outline: none; }
html body .cal-id__item + .cal-id__item { margin-top: 2px; }
html body .cal-id__item[data-cal-signout] { color: var(--ds-ink-2, #CBC4DA) !important; }
.cal-id__wm { margin: 0 .3em; font-weight: 700; letter-spacing: .08em; }

/* phones: the initial in a violet ring with the dot on its shoulder, a 44px square (the menu still opens on tap) */
@media (max-width: 680px) {
  html body .cal-id__btn { position: relative; justify-content: center; gap: 0; min-width: 44px; min-height: 44px; padding: 0 7px; border-radius: 12px; }   /* the Menu button's height and radius */
  .cal-id__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cal-id__init {
    display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #2A2140 0%, #120F1A 70%); border: 1px solid rgba(198, 155, 255, .6);
    font: 700 13px/1 "Space Mono", ui-monospace, monospace;
  }
  .cal-id__dot { position: absolute; top: 6px; right: 5px; width: 8px; height: 8px; border: 2px solid #0B0A10; box-sizing: content-box; }
  .cal-id__chev { display: none; }
}
/* home on phones: signed out, Sign In / Create Account take a full row under the brand; signed in, the compact badge
   moves up into the brand row beside Menu and that second row goes away */
@media (max-width: 680px) {
  html.cal-signed-in body .nx-header #caliber-auth-v55r { order: 1 !important; flex: 0 0 auto !important; width: auto !important; margin-left: auto !important; }
  html.cal-signed-in body .nx-header > .caliber-menu-btn { order: 2; margin-left: 0; }
}
/* the other public pages on phones: the badge lives in the slide-down menu panel (where Sign In sits), so it keeps the
   full name across the panel and its menu opens in place below it */
@media (max-width: 680px) {
  .cp-auth .cal-id { flex: 1 1 100%; flex-direction: column; }
  html body .cp-auth .cal-id__btn { width: 100%; justify-content: flex-start; gap: 9px; padding: 0 13px 0 12px; }
  .cp-auth .cal-id__name { position: static; width: auto; height: auto; clip: auto; }
  .cp-auth .cal-id__init { display: none; }
  .cp-auth .cal-id__dot { position: static; width: 8px; height: 8px; border: 0; }
  .cp-auth .cal-id__chev { display: block; margin-left: auto; }
  .cp-auth .cal-id__menu { position: static; margin-top: 8px; min-width: 0; }
}
@media (max-width: 370px) { html.cal-signed-in body .nx-header { column-gap: 6px !important; } }
@media (prefers-reduced-motion: reduce) { html body .cal-id__btn, .cal-id__chev { transition: none; } }
@media (forced-colors: active) {
  html body .cal-id__btn, .cal-id__menu { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .cal-id__dot { background: Highlight; }
}