/*
==================================================================
Back and Forward
==================================================================
Binder's toolbar pair, on every page of the site (shared/js/history-nav.js):
a separated NSSegmentedControl in Tahoe's glass capsule. The metrics are
AppKit's, read off the live control in an off-screen NSToolbar on macOS 27.
The platter is 73×36pt, radius 18. The segments track 0–36 and 36–73. A
pressed segment lights a 30×28pt pill, radius 14, 4pt in from the capsule's
end, and hides the 1×20pt divider. The chevrons are chevron.left and
chevron.right at the cell's 13pt medium large, drawn from the symbols' own
outlines where the cell puts their 13×18pt images. Under the pointer a
segment lights the same pill at half the pressed strength and hides the
divider too; pressed, the pill takes the pressed strength alone. Measured on
Binder's live toolbar in light: rest 252, hovered 242, pressed 232.

The glass is the key window's (an inactive window frosts it and dims the
chevrons; a page can't tell, so that look isn't here): QuartzCore's
glassBackground filter with AppKit's parameters, fitted as a filter over the
backdrop and a white fill (within one level of AppKit's face on grey and
colour backdrops in light, three in dark up to mid grey). Its rim, lit top
and bottom, its hairline edge, darker at the ends, and its faint shadow 8pt
down are matched on the pages' own backgrounds, within two levels. Inside
it AppKit draws with vibrancy, a fixed offset from the glass behind (black
or white at −1/+0.95, disabled −0.3/+0.2, divider −0.205/+0.205, pressed
−0.08/+0.08, hovered half that), here as the colours those give on that
glass. Its lensing
can't be done in CSS; the blur stands in for it.

Sizes are CSS px, which are Binder's points. By default the pair sits where
the galleries' sidebar toggle does; a page can place it elsewhere (the
galleries, past their sidebar) with a later rule.
*/

:root {
    --history-nav-width: 73px;
    --history-nav-height: 36px;
}

.history-nav {
    --history-glass-fill: rgba(255, 255, 255, 0.14);
    --history-glass-filter: blur(12px) saturate(1.5) brightness(0.89);
    --history-glass-rim: rgba(255, 255, 255, 0.113);
    --history-glass-rim-inner: rgba(255, 255, 255, 0.085);
    --history-glass-glow-top: 0 5px 4px -4px;
    --history-glass-glow-bottom: 0 -5px 4px -4px;
    --history-glass-glow: rgba(255, 255, 255, 0.107);
    --history-glass-edge: transparent;
    --history-glass-edge-ends: rgba(0, 0, 0, 0.5);
    --history-chevron: #fff;
    --history-chevron-disabled: rgba(255, 255, 255, 0.244);
    --history-divider: rgba(255, 255, 255, 0.25);
    --history-pressed: rgba(255, 255, 255, 0.098);
    --history-hover: rgba(255, 255, 255, 0.049);
    position: fixed;
    top: calc((40pt - var(--history-nav-height)) / 2);
    left: 20px;
    z-index: 12;
    display: flex;
    width: var(--history-nav-width);
    height: var(--history-nav-height);
    border-radius: calc(var(--history-nav-height) / 2);
    background-color: var(--history-glass-fill);
    -webkit-backdrop-filter: var(--history-glass-filter);
    backdrop-filter: var(--history-glass-filter);
    box-shadow:
        inset 0 0.5px 0 var(--history-glass-rim),
        inset 0 1px 0 var(--history-glass-rim-inner),
        inset var(--history-glass-glow-top) var(--history-glass-glow),
        inset 0 -0.5px 0 var(--history-glass-rim),
        inset 0 -1px 0 var(--history-glass-rim-inner),
        inset var(--history-glass-glow-bottom) var(--history-glass-glow),
        0 0 0 0.5px var(--history-glass-edge),
        -0.5px 0 0 0 var(--history-glass-edge-ends),
        0.5px 0 0 0 var(--history-glass-edge-ends),
        0 8px 4px rgba(0, 0, 0, 0.012);
}

@media (prefers-color-scheme: light) {

    .history-nav {
        --history-glass-fill: rgba(255, 255, 255, 0.515);
        --history-glass-filter: blur(12px) saturate(1.95) brightness(0.96);
        --history-glass-rim: rgba(255, 255, 255, 0.72);
        --history-glass-rim-inner: rgba(255, 255, 255, 0.632);
        --history-glass-glow-top: 0 7px 6px -6px;
        --history-glass-glow-bottom: 0 -7px 6px -6px;
        --history-glass-glow: rgba(255, 255, 255, 0.86);
        --history-glass-edge: rgba(0, 0, 0, 0.09);
        --history-glass-edge-ends: rgba(0, 0, 0, 0.2);
        --history-chevron: #000;
        --history-chevron-disabled: rgba(0, 0, 0, 0.31);
        --history-divider: rgba(0, 0, 0, 0.213);
        --history-pressed: rgba(0, 0, 0, 0.083);
        --history-hover: rgba(0, 0, 0, 0.04);
    }

}

/* The divider, between the segments. */
.history-nav::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 36px;
    width: 1px;
    height: 20px;
    border-radius: 0.5px;
    background-color: var(--history-divider);
    pointer-events: none;
}

.history-nav:has(.history-nav-button:active, .history-nav-button.is-pressed)::after {
    visibility: hidden;
}

/* The galleries' template styles every button, and its hover, pressed and
   disabled rules (button:hover and the like) outweigh a class alone: they
   lit the segment's square box and dimmed a disabled one. Two classes
   outweigh them. The template's colour is !important, so the chevrons take
   their colour as a fill, not from currentColor. */
.history-nav .history-nav-button {
    position: relative;
    flex: 0 0 auto;
    width: 36px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    line-height: normal;
    opacity: 1;
    cursor: default;
    -webkit-appearance: none;
    appearance: none;
    -moz-transition: none;
    -webkit-transition: none;
    -ms-transition: none;
    transition: none;
}

#history-forward {
    width: 37px;
}

/* The pressed pill. */
.history-nav-button::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 30px;
    height: 28px;
    border-radius: 14px;
    pointer-events: none;
}

#history-forward::before {
    left: 3px;
}

.history-nav-button svg {
    position: absolute;
    top: 8.5px;
    left: 13px;
    width: 13px;
    height: 18px;
    display: block;
    fill: var(--history-chevron);
}

#history-forward svg {
    left: 12px;
}

/* Lit at half strength under the pointer, without the divider, as
   Binder's segments are. */
@media (hover: hover) {

    .history-nav-button:hover::before {
        background-color: var(--history-hover);
    }

    .history-nav:has(.history-nav-button:hover)::after {
        visibility: hidden;
    }

}

/* Lit while pressed, and while its menu of places is open: the pressed
   strength replaces the hovered one rather than adding to it. */
.history-nav-button:active::before, .history-nav-button.is-pressed::before, .history-nav-button:focus-visible::before {
    background-color: var(--history-pressed);
}

.history-nav-button:focus {
    outline: none;
}

.history-nav-button:disabled {
    pointer-events: none;
}

.history-nav-button:disabled svg {
    fill: var(--history-chevron-disabled);
}

/* No room for them on a phone: its own Back and Forward gestures walk the
   same places. */
@media screen and (max-width: 736px) {

    .history-nav {
        display: none;
    }

}

/* Held, a button lists the places that way, nearest first, under itself,
   in the look of the galleries' context menus. */
.history-menu {
    display: none;
    position: fixed;
    z-index: 2000;
    max-width: min(448pt, calc(100vw - 16px));
    overflow-y: auto;
    background-color: rgba(var(--panel-rgb), 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--ink-rgb), 0.1);
    border-radius: 8px;
    padding: 5px 0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 300;
    font-size: 10.4pt;
    line-height: 1.65;
    color: var(--ink);
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.history-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.history-menu ul li {
    padding: 8px 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

.history-menu ul li:hover {
    background-color: rgba(var(--ink-rgb), 0.1);
}