/* bar.css — sticky glass bar, Projects | Journey switch, profile logos */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--bar-h);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: box-shadow 400ms ease;
}
.bar::after {               /* soft edge instead of a hard divider */
  content: '';
  position: absolute; left: 0; right: 0; top: 100%;
  height: 14px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--shadow-color) 60%, transparent), transparent);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.bar.is-stuck { box-shadow: 0 1px 0 var(--line); }
.bar.is-stuck::after { opacity: 0.5; }
.bar-sentinel { height: 0; }

.bar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Segmented control */
.segmented {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 3px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
}
.segmented__thumb {
  position: absolute;
  top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / 2);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
  will-change: transform;
}
.segmented__tab {
  position: relative;
  z-index: 1;
  min-width: 112px;
  height: 38px;
  padding: 0 var(--space-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-callout);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-2);
  transition: color 250ms ease;
}
.segmented__tab.is-current { color: var(--text); }
.segmented__tab:active { transform: scale(0.98); }

/* Dock of profile logos (wide screens) */
.profiles__dock { display: flex; align-items: center; gap: 2px; }
.profile {
  position: relative;
  display: grid; place-items: center;
  width: 40px; height: 44px;
  color: var(--text-2);
  transition: color 160ms ease, transform 280ms var(--ease-out);
}
.profile .icon, .profile .monogram { width: 19px; height: 19px; }
.profile:hover { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .profiles__dock li:hover .profile { transform: translateY(-3px) scale(1.18); }
  .profiles__dock li:hover + li .profile,
  .profiles__dock li:has(+ li:hover) .profile { transform: translateY(-1px) scale(1.07); }
  .profile::after {                       /* name on hover */
    content: attr(data-label);
    position: absolute; top: calc(100% + 4px); left: 50%;
    translate: -50% 0;
    padding: 4px 9px;
    border-radius: 8px;
    font-size: var(--fs-caption);
    font-weight: 500;
    white-space: nowrap;
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
    opacity: 0; transform: translateY(-4px) scale(0.96);
    transition: opacity 120ms ease, transform 220ms var(--ease-out);
    pointer-events: none;
  }
  .profile:hover::after, .profile:focus-visible::after { opacity: 1; transform: none; }
}
.profile:active { transform: scale(0.9) !important; transition-duration: 90ms; }

.monogram {
  display: inline-grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 10px; font-weight: 700; line-height: 1;
}

/* "Profiles" button and panel (phones) */
.profiles-menu { position: relative; display: none; }
.profiles-menu__btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 40px; padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-callout); font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
}
.profiles-menu__btn .icon { width: 16px; height: 16px; color: var(--accent); }
.profiles-pop {
  position: absolute;
  top: calc(100% + 10px); right: 0;
  width: min(320px, calc(100vw - 2 * var(--gutter)));
  padding: var(--space-2);
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--line);
  transform-origin: top right;
  opacity: 0;
}
.profiles-pop ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.profile-row {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 72px;
  border-radius: var(--r-md);
  font-size: var(--fs-caption); font-weight: 500;
  color: var(--text-2);
}
.profile-row .icon, .profile-row .monogram { width: 22px; height: 22px; color: var(--text); }
.profile-row:hover, .profile-row:focus-visible { background: color-mix(in srgb, var(--text) 6%, transparent); }

@media (max-width: 779px) {
  .profiles { display: none; }
  .profiles-menu { display: block; }
  .segmented__tab { min-width: 96px; }
}
@media (max-width: 360px) {
  .profiles-menu__btn span { display: none; }
  .segmented__tab { min-width: 84px; padding: 0 var(--space-3); }
}

@media (prefers-reduced-transparency: reduce) {
  .bar, .profiles-pop, .theme-toggle { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .bar { box-shadow: 0 1px 0 var(--line-strong); }
}