@keyframes spin-globe {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
.icon-globe {
    display: inline-block;
    animation: spin-globe 8s linear infinite;
    margin-right: 0.5rem;
    font-style: normal;
}

:root {
    --bg: #ffffff;
    --text-main: #1d1d1f;
    --text-muted: #6b7280;
    --card: rgba(242,242,247,0.76);
    --card-hover: rgba(229,229,234,0.88);
    --card-solid: #f2f2f7;
    --border: rgba(15,23,42,0.09);
    --timeline: rgba(15,23,42,0.11);
    --accent: #0A84FF;
    --accent-rgb: 10,132,255;
    --glass-strong: rgba(242,242,247,0.88);
    --glass-inset: rgba(229,229,234,0.56);
    --glass-highlight: rgba(255,255,255,0.92);
    --glass-rim-bottom: rgba(255,255,255,0.42);
    --glass-shadow: 0 14px 42px rgba(31,41,55,0.09), 0 2px 8px rgba(31,41,55,0.04), inset 0 1px 0 var(--glass-highlight), inset 0 -0.5px 0 var(--glass-rim-bottom);
    --glass-shadow-compact: 0 8px 26px rgba(31,41,55,0.075), 0 1.5px 5px rgba(31,41,55,0.035), inset 0 1px 0 var(--glass-highlight), inset 0 -0.5px 0 var(--glass-rim-bottom);
    --glass-shadow-hover: 0 18px 52px rgba(31,41,55,0.13), 0 4px 12px rgba(31,41,55,0.05), inset 0 1px 0 var(--glass-highlight), inset 0 -0.5px 0 var(--glass-rim-bottom);
    --glass-filter: blur(22px) saturate(165%);
    --spring-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --spring-bounce: cubic-bezier(0.34, 1.45, 0.64, 1);
    --radius-card: 0.75rem;
    --ls-wide: 0.15em;
    --ls-mid:  0.1em;
    --ls-tight: 0.05em;
}
:root.dark,
body.dark {
    --bg: #0a0a0a;
    --text-main: #ffffff;
    --text-muted: #a1a1aa;
    --card: rgba(27,28,32,0.58);
    --card-hover: rgba(39,41,47,0.74);
    --card-solid: #17181c;
    --border: rgba(255,255,255,0.10);
    --timeline: rgba(255,255,255,0.12);
    --glass-strong: rgba(22,23,27,0.76);
    --glass-inset: rgba(8,9,11,0.44);
    --glass-highlight: rgba(255,255,255,0.12);
    --glass-rim-bottom: rgba(255,255,255,0.04);
    --glass-shadow: 0 16px 48px rgba(0,0,0,0.32), 0 2px 10px rgba(0,0,0,0.20), inset 0 1px 0 var(--glass-highlight), inset 0 -0.5px 0 var(--glass-rim-bottom);
    --glass-shadow-compact: 0 8px 28px rgba(0,0,0,0.26), 0 2px 7px rgba(0,0,0,0.16), inset 0 1px 0 var(--glass-highlight), inset 0 -0.5px 0 var(--glass-rim-bottom);
    --glass-shadow-hover: 0 20px 58px rgba(0,0,0,0.40), 0 4px 14px rgba(0,0,0,0.24), inset 0 1px 0 var(--glass-highlight), inset 0 -0.5px 0 var(--glass-rim-bottom);
}

html {
    min-height: 100%;
    background-color: var(--bg);
}
body { min-height: 100vh; }

a { color: inherit; }
a, button, summary, input, select, textarea, label {
    -webkit-tap-highlight-color: transparent;
}
a, button, summary, .switch-row {
    touch-action: manipulation;
}

.nav-pill {
    display: inline-flex; align-items: center; gap: 0.45rem;
    min-height: 2rem; justify-content: center; line-height: 1;
    padding: 0.45rem 0.9rem; border-radius: 999px;
    background: var(--card); border: 1px solid var(--border);
    color: var(--text-muted); text-decoration: none;
    font-size: 0.75rem; font-weight: 500;
    letter-spacing: var(--ls-mid); text-transform: uppercase;
    transition: color 0.25s var(--spring-ease), border-color 0.25s var(--spring-ease), background 0.25s var(--spring-ease), transform 0.32s var(--spring-ease), box-shadow 0.32s var(--spring-ease);
    white-space: nowrap;
}
.nav-pill:visited { color: var(--text-muted); }
.nav-pill i,
.nav-pill svg { font-size: 0.75rem; }
.ui-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.125em;
}
.nav-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .nav-pill:hover {
        color: var(--accent);
        border-color: rgba(125,125,125,0.3);
        background: var(--card-hover);
    }
}
.nav-pill:active,
.nav-pill[data-pressed] { transform: scale(0.95); transition-duration: 0.08s; }

.bar-btn:focus-visible  { outline: 2px solid var(--accent); outline-offset: 2px; }
.bar-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; }

.badge {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    cursor: default;
}

.section-divider { height: 1px; background: var(--timeline); flex-grow: 1; }
.section-heading {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: var(--ls-wide);
    color: var(--text-muted); font-weight: 600;
    margin-bottom: 1rem;
    display: flex; align-items: center; gap: 1rem;
}
.section-heading .section-divider { margin-left: 0; }

#sticky-bar {
    position: fixed; top: 1.1rem; left: 50%; transform: translate3d(-50%, 0, 0);
    z-index: 500; display: flex; align-items: center; gap: 0.35rem;
    background: var(--glass-strong); border: 1px solid var(--border);
    border-radius: 999px; padding: 0.3rem 0.55rem;
    box-shadow: var(--glass-shadow-compact);
    transition: background 0.35s var(--spring-ease), border-color 0.35s var(--spring-ease), box-shadow 0.35s var(--spring-ease);
    white-space: nowrap;
}
.pill-expand {
    display: inline-flex;
    align-items: center;
    width: 0;
    margin-left: calc(-1 * var(--pill-gap, 0.35rem));
    opacity: 0;
    overflow: hidden;
    overflow-x: clip;
    overflow-y: visible;
    pointer-events: none;
    transition:
        width 0.42s var(--spring-ease),
        margin-left 0.42s var(--spring-ease),
        opacity 0.28s var(--spring-ease);
    will-change: width, margin-left, opacity;
}
.pill-expand.is-open {
    width: var(--expand-w, 5.5rem);
    margin-left: 0;
    opacity: 1;
    pointer-events: auto;
}
.pill-expand-inner {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    transform: translate3d(-0.35rem, 0, 0) scale(0.92);
    transform-origin: left center;
    transition: transform 0.42s var(--spring-ease);
}
.pill-expand.is-open .pill-expand-inner {
    transform: translate3d(0, 0, 0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
    .pill-expand,
    .pill-expand-inner {
        transition: none !important;
    }
}

/* Shared liquid-glass material. Large surfaces get depth; compact surfaces keep a lighter edge. */
.nav-pill,
#sticky-bar,
.page-admin #admin-dock,
.page-admin header h1 .sub,
.page-admin .edit-banner,
.page-admin .photo-card.dragging,
.page-admin .post-row.dragging,
.page-home .glass,
.page-home .photo-card,
.page-blue .filter-reset-pill,
.page-blue .filter-toggle,
.page-blue .stack-toggle,
.page-blue .stack-dock,
.page-blue .filter-pop,
.page-oro .city-pop,
.page-oro .search-pill,
.page-oro .date-pill,
.page-oro .sun-card,
.page-oro #date-toast,
.page-oro .status-retry,
.page-admin .panel,
.page-admin details.posts-list {
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
}

.page-home .glass,
.page-home .photo-card,
.page-blue .filter-pop,
.page-oro .city-pop,
.page-oro .sun-card,
.page-admin .panel,
.page-admin details.posts-list {
    box-shadow: var(--glass-shadow);
}

.nav-pill,
.badge,
.page-admin #admin-dock,
.page-admin header h1 .sub,
.page-admin .edit-banner,
.page-blue .filter-reset-pill,
.page-blue .filter-toggle,
.page-blue .stack-toggle,
.page-blue .stack-dock,
.page-blue .select-wrap select,
.page-oro .search-pill,
.page-oro .date-pill,
.page-oro .hour-card,
.page-oro .day-cell,
.page-oro .status-retry,
.page-oro #date-toast,
.page-admin .btn-pill,
.page-admin .analytics-range {
    box-shadow: var(--glass-shadow-compact);
}

.page-oro .best-window {
    border: 1px solid rgba(255,255,255,0.24);
    box-shadow: 0 14px 36px rgba(147,72,10,0.16), inset 0 1px 0 rgba(255,255,255,0.32);
}

.page-post .lb-btn,
.page-post #lb-hud {
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--lb-border, rgba(255,255,255,0.16));
    box-shadow: 0 8px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.18);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    :root {
        --card: var(--card-solid);
        --card-hover: #eef0f3;
        --glass-strong: var(--card-solid);
    }
    :root.dark,
    body.dark {
        --card-hover: #23252a;
    }
}

@media (max-width: 700px) {
    :root { --glass-filter: blur(12px) saturate(135%); }
}

.bar-divider { width: 1px; height: 14px; background: var(--border); margin: 0 0.15rem; }
.bar-back {
    display: inline-flex; align-items: center; gap: 0.35rem;
    color: var(--text-muted); font-size: 0.75rem; text-decoration: none;
    padding: 0.2rem 0.3rem; border-radius: 999px;
    transition: color 0.2s var(--spring-ease), transform 0.28s var(--spring-ease);
}
.bar-back .back-arrow { transition: transform 0.2s var(--spring-ease); }
.bar-btn {
    background: none; border: none; border-radius: 999px;
    padding: 0.25rem 0.4rem; cursor: pointer; color: var(--text-muted);
    transition: color 0.2s var(--spring-ease), transform 0.28s var(--spring-ease);
    line-height: 1;
    display: flex; align-items: center; font-size: 0.85rem; font-family: inherit;
}
@media (hover: hover) and (pointer: fine) {
    .bar-back:hover { color: var(--accent); }
    .bar-back:hover .back-arrow { transform: translateX(-2px); }
    .bar-btn:hover { color: var(--accent); }
}
.bar-back:active,
.bar-back[data-pressed] { transform: scale(0.94); transition-duration: 0.08s; }
.bar-btn:active,
.bar-btn[data-pressed] { transform: scale(0.9); transition-duration: 0.08s; }

@media (prefers-reduced-motion: reduce) {
    .icon-globe { animation: none; }
    .bar-back .back-arrow,
    #sticky-bar,
    .pill-expand,
    .nav-pill,
    .bar-back,
    .bar-btn { transition: none; }
}

/* Shared spacing for pages with a gallery action in the header. */
body.page-with-gallery-link header {
    margin-bottom: 2.4rem;
}
body.page-with-gallery-link #page {
    padding: 3rem 1.5rem 0;
}