/* The Hub button and its menu. Shared by every public page. */

.hub { position: relative; }

.hub-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    background: var(--panel-2);
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}

.hub-btn:hover,
.hub-btn[aria-expanded="true"] {
    border-color: var(--accent);
    color: var(--accent);
}

.hub-mark { font-size: 0.95rem; }

.hub-menu {
    position: absolute;
    z-index: 60;
    top: calc(100% + 7px);
    left: 0;
    min-width: 244px;
    padding: 7px;
    border: 1px solid var(--panel-border);
    border-radius: 11px;
    background: var(--panel);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55);
}

.hub-pages { display: flex; flex-direction: column; }

.hub-link {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
}

.hub-link b { display: block; font-size: 0.88rem; font-weight: 600; }
.hub-link span { display: block; color: var(--muted); font-size: 0.74rem; }
.hub-link:hover { background: var(--panel-2); }

/* Where you already are. Still a link -- pressing it is a refresh, which is
   not surprising -- but it should not read as somewhere to go. */
.hub-link.is-here { background: var(--panel-2); }
.hub-link.is-here b { color: var(--accent); }

.hub-account {
    margin-top: 6px;
    padding-top: 7px;
    border-top: 1px solid var(--panel-border);
}

.hub-account button {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--panel-2);
    color: var(--text);
    font-size: 0.82rem;
    cursor: pointer;
}

.hub-account button:hover { border-color: var(--accent); color: var(--accent); }

/* Who is signed in, at the top of the account block. */
.hub-me { display: flex; align-items: center; gap: 8px; padding: 4px 10px 8px; font-size: 0.86rem; }
.hub-me img { width: 28px; height: 28px; border-radius: 50%; }
.hub-account .hub-link { margin-bottom: 2px; }
.hub-account button { margin-top: 6px; }

/* ----- What the calendar draws -------------------------------------------
   Per browser, not per account: it is a view preference, it should work
   signed out, and it should not follow somebody to a different machine and
   silently hide half the calendar there. */

.cal-settings-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 6px 0 0;
}

.cal-settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.cal-settings-row:hover { background: var(--panel-2); }
.cal-settings-row input { width: 16px; height: 16px; accent-color: var(--accent); }
.cal-settings-row b { display: block; font-size: 0.88rem; font-weight: 600; }
.cal-settings-row span { display: block; color: var(--muted); font-size: 0.74rem; }

/* ----- Always within reach -------------------------------------------------
   The Hub scrolled away with the top line, so getting anywhere from the
   bottom of the calendar meant scrolling back up first.

   The whole left group is fixed rather than the Hub alone. The top line is a
   three-column grid -- left, clocks, search -- so taking the left column out
   of flow leaves its space behind and the clocks stay centred where they
   were: nothing on the page moves, and there is no width to guess at. Fixing
   only the Hub would have dropped the name and the Dashboard button leftwards
   underneath it.

   Desktop only. The phone shows the Hub alone and lays the top line out its
   own way in styles.css, and this would fight it. */

@media (min-width: 761px) {
    .topline-left {
        position: fixed;
        /* The top line's own padding, so it lands exactly where it sat. */
        top: 14px;
        left: 22px;
        /* Above the page, and above the bunny that runs along the bottom. */
        z-index: 60;
    }

    /* Content passes underneath on a narrow window, and the Hub is the only
       one of these with a background of its own -- the name has none and the
       Dashboard button is transparent by design.
       Each gets its own rather than a panel behind the group: a flat tint
       over the page's gradient never quite matches it, so the group version
       read as a stray outline drawn around the Hub on every page. */
    .topline-left .who,
    .topline-left .dash { background: var(--panel-2); }

    .topline-left .who {
        padding: 4px 11px 4px 5px;
        border: 1px solid var(--panel-border);
        border-radius: 999px;
    }

    /* Its hover already fills with the accent, and that still wins. */
    .topline-left .dash:hover { background: var(--accent); }
}