/* The calendar header. Laptop: ‹ Month ›, a gap, the sync pill, the date box and Month · Week, in one row.
   Phone: two lines, the greeting and the sync dot, then the month, the date box and the switch. */
.topbar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-greeting {
    font-family: var(--font-display);
    display: none;
    margin: 0;
}

.topbar-gap {
    flex: 1;
}

.nav-greeting {
    font-family: var(--font-display);
    margin: -8px 8px 16px;
    color: var(--color-text-muted);
    font-size: .9rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .topbar {
        display: grid;
        grid-template-areas: "greet greet sync" "title date switch";
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 2px 8px;
        padding: calc(10px + var(--safe-top)) 14px 10px;
    }

    .top-greeting {
        display: block;
        min-height: 1.3em;
        grid-area: greet;
        font-size: .82rem;
        line-height: 1.3;
    }

    #prevBtn,
    #nextBtn,
    .topbar-gap {
        display: none;
    }

    #monthYear {
        grid-area: title;
        min-width: 0;
        text-align: left;
    }

    .topbar .sync-pill {
        grid-area: sync;
        justify-self: end;
    }

    .date-box {
        grid-area: date;
    }

    .view-switch {
        grid-area: switch;
    }

    .view-switch button {
        min-width: 0;
    }

    .topbar[data-section="materials"] {
        grid-template-areas: "title title sync";
    }
}

.view-switch {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    padding: 3px;
    border-radius: 11px;
    background: var(--seg-bg);
}

.view-switch::before {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 8px;
    background: var(--seg-on-bg);
    content: "";
}

.view-switch[data-active="week"]::before {
    transform: translateX(100%);
}

.view-switch button {
    position: relative;
    z-index: 1;
    min-width: 64px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 7px;
    background: transparent;
    color: var(--seg-text);
    font-size: .85rem;
    font-weight: 600;
}

.view-switch button:hover {
    color: var(--color-text);
}

.view-switch button[aria-pressed="true"] {
    background: transparent;
    color: var(--seg-on-text);
}

/* Today: a calendar-icon box with a thin coloured cap. */
.date-box {
    font-family: var(--font-display);
    position: relative;
    display: grid;
    width: 34px;
    height: 34px;
    flex: none;
    place-items: center;
    margin: 5px;
    padding: 7px 0 0;
    border: 1px solid var(--datebox-border);
    border-radius: 10px;
    background: var(--datebox-bg);
    color: var(--datebox-text);
    font-size: .85rem;
    font-weight: 700;
}

.date-box::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 7px;
    border-radius: 9px 9px 0 0;
    background: var(--datebox-cap);
    content: "";
}

.date-box::after {
    position: absolute;
    inset: -6px;
    content: "";
}

/* On Calendar the header is the theme's hero surface (Glow: a red band that drifts; Ember and Paper: flat). */
.topbar[data-section="calendar"] {
    border-bottom-color: transparent;
    background: var(--hero-surface);
    background-size: 200% 200%;
    color: var(--hero-text);
    animation: var(--hero-animation);
}

.topbar[data-section="calendar"] .icon-button,
.topbar[data-section="calendar"] #monthYear {
    color: var(--hero-text);
}

.topbar[data-section="calendar"] .top-greeting {
    color: var(--hero-muted);
}

/* The band is red in Glow, so focus on the header is drawn in the header's own text colour. */
.topbar[data-section="calendar"] :focus-visible {
    outline-color: var(--hero-focus);
}

/* Materials: a plain header. */
.topbar[data-section="materials"] {
    background: var(--color-surface);
    color: var(--color-text);
}

@keyframes hero-drift {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 100% 50%;
    }
}