/* Top bar: [esc] on the left, calendar/profile/rolodex on the right
   (index, calendar, contacts, account). */

.page-nav {
    position: absolute;
    top: var(--page-nav-inset, var(--page-esc-inset, 16px));
    left: var(--page-nav-inset, var(--page-esc-inset, 16px));
    right: var(--page-nav-inset, var(--page-esc-inset, 16px));
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    color: var(--page-nav-fg, var(--secondary));
    /* The bar spans the full width so [esc] keeps its top-left position;
       only the controls themselves should catch pointer events. */
    pointer-events: none;
}

.page-nav > * {
    flex: 0 0 auto;
    pointer-events: auto;
}

/* [esc] comes first in the DOM but stays pinned to the left edge. */
.page-nav .page-esc {
    margin-right: auto;
}

.page-nav__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.page-nav__link:visited {
    color: inherit;
}

.page-nav__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.page-nav__icon {
    display: block;
    width: 24px;
    height: 24px;
}

.page-nav__link--current {
    color: var(--page-nav-fg-muted, rgb(255 255 255 / 45%));
    cursor: default;
    pointer-events: none;
}

.title-page-body {
    --page-nav-fg: #f6d935;
    --page-nav-fg-muted: rgb(246 217 53 / 45%);
}

#calendar-page-body {
    --page-nav-fg: var(--secondary);
    --page-nav-fg-muted: rgb(255 255 255 / 45%);
}

.contacts-page-body {
    --page-nav-fg: var(--ink, rgba(255, 255, 255, 0.92));
    --page-nav-fg-muted: var(--text-muted, #6b6b6b);
}

.contacts-page-body:has(#contacts-right[data-pane="profile"]),
.contacts-page-body:has(#contacts-right[data-pane="Photographer"]) {
    --page-nav-fg: #000;
    --page-nav-fg-muted: rgb(0 0 0 / 45%);
}

.auth-page {
    --page-nav-fg: var(--auth-fg, #000);
    --page-nav-fg-muted: var(--auth-fg-muted, rgb(0 0 0 / 45%));
}