/* Album pages (/photos/<album>/): a collage of the album on black, a slider on the right, a full-size viewer, and
   select mode for downloading (gallery.js). Builds on styles.css. */

.gallery-page { background: var(--ink); color: var(--on-dark); --head: 3.4rem; --bottom: max(16px, calc(env(safe-area-inset-bottom) - 64px)); }
.gallery-page main { padding-top: var(--head); background: none; }
.site-header nav a[aria-current="page"] { background-size: 100% 3px; }

.album-head { padding-block: clamp(2.5rem, 8vw, 5.5rem) clamp(1.75rem, 4vw, 2.75rem); }
.album-head .kicker { color: var(--yellow); margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: baseline; }
.album-head .kicker a { text-decoration: none; }
.album-head .kicker a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.album-head .kicker i { font-style: normal; opacity: 0.5; margin-inline: 0.3em; }
.album-head h1 {
  font-size: clamp(2rem, 8.2vw, 7rem); font-weight: 900; font-stretch: 125%;
  line-height: 0.88; letter-spacing: -0.04em; text-transform: uppercase;
  max-width: 14ch; overflow-wrap: anywhere;
}
.album-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin-top: 1.5rem;
  font: 600 0.78rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-muted);
}
.album-meta a { color: var(--on-dark); text-decoration: none; }
.album-meta a:hover { color: var(--yellow); }

/* Collage: rows of photos at their own shapes, each row the full width. A tile starts at --h tall and grows by its
   shape (--r, width / height), so every photo in a row grows to the same height. The last row keeps --h (::after
   takes the leftover space). */
.shots { --h: 300px; display: flex; flex-wrap: wrap; gap: 6px; padding-inline: 6px; }
.shots::after { content: ""; flex: 1e9 1 0; }
@media (max-width: 640px) { .shots { --h: 120px; gap: 3px; padding-inline: 0; } }
.shot {
  position: relative; display: block; overflow: hidden;
  flex: var(--r) 1 calc(var(--r) * var(--h)); aspect-ratio: var(--r);
  background: var(--ink-2); cursor: zoom-in;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.shot img {
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none;
  transition: transform 0.5s cubic-bezier(.2, .7, .2, 1);
}
.shot:hover img { transform: scale(1.04); }
.shot:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; z-index: 1; }

.album-end { display: flex; flex-wrap: wrap; gap: 1rem; padding-block: clamp(3rem, 8vw, 5rem); }
.album-end .btn:not(.btn-big) { background: transparent; border-color: rgba(255, 255, 255, 0.3); }
.album-end .btn:not(.btn-big):hover { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }

/* Slider: a thin track down the right edge; drag the yellow thumb (or anywhere on the strip with a mouse) to move
   through the album. The bubble says which photo you're on. It ends above the Download button. */
.slider {
  position: fixed; z-index: 15; right: 0; top: calc(var(--head) + 1.5rem); bottom: calc(var(--bottom) + 64px); width: 2.75rem;  /* top: below the header and any day row (gallery.js) */
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
  touch-action: none; cursor: ns-resize; user-select: none; -webkit-user-select: none;
}
.slider.on { opacity: 1; pointer-events: auto; }
.slider-track { position: absolute; right: 1rem; top: 0; bottom: 0; width: 3px; background: rgba(255, 255, 255, 0.18); }
.slider-track i { position: absolute; inset: 0 0 auto; background: var(--yellow); }
.slider-thumb {
  position: absolute; right: calc(1rem - 6.5px); top: -14px; width: 16px; height: 28px;
  background: var(--yellow); border: 3px solid var(--ink);
  transition: width 0.15s, right 0.15s;
}
.slider:hover .slider-thumb, .slider.dragging .slider-thumb { width: 20px; right: calc(1rem - 8.5px); }
.slider-bubble {
  position: absolute; right: calc(100% + 0.25rem); top: 50%; translate: 0 -50%;
  padding: 0.35rem 0.6rem; background: var(--yellow); color: var(--ink);
  font: 600 0.75rem/1 var(--mono); letter-spacing: 0.04em; white-space: nowrap;
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.slider.active .slider-bubble, .slider.dragging .slider-bubble, .slider:hover .slider-bubble { opacity: 1; }
/* the days, for an album over more than one day: labels left of the track at each day's first photo, shown while
   scrolling or pointing at the slider (like Google Photos); click one to jump there */
.slider-days { position: absolute; right: 2rem; top: 0; bottom: 0; }
.slider-days button {
  position: absolute; right: 0; translate: 0 -50%; white-space: nowrap; cursor: pointer;
  padding: 0.2rem 0.4rem; border: 0; background: rgba(14, 17, 20, 0.82); color: var(--on-dark-muted);
  font: 600 0.68rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, color 0.15s;
}
.slider.on:is(.active, .dragging, :hover) .slider-days button { opacity: 1; pointer-events: auto; }
.slider-days button:hover, .slider-days button.on { color: var(--yellow); }
.slider-thumb { z-index: 1; }

/* phones: only the thumb takes touches (the strip would get in the way of scrolling), with a bigger target */
@media (pointer: coarse) {
  .slider { pointer-events: none !important; }
  .slider-thumb { pointer-events: auto; }
  .slider-thumb::before { content: ""; position: absolute; inset: -12px -14px; }
  .slider:not(.active):not(.dragging) { opacity: 0; }
  .slider:not(.active):not(.dragging) .slider-thumb { pointer-events: none; }
}

/* the days as a row of buttons stuck under the site header (gallery.js sets its top); phones only, where the slider
   is too small for labels. It scrolls sideways and keeps the current day in view. */
.day-bar { display: none; }
@media (max-width: 760px) {
  .slider-days { display: none; }
  .day-bar {
    position: sticky; z-index: 12; top: 52px; display: flex; gap: 0.4rem;
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    padding: 0.5rem var(--gutter); background: var(--ink); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .day-bar::-webkit-scrollbar { display: none; }
  .day-bar button {
    flex: none; padding: 0.45rem 0.7rem; border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 999px;
    background: transparent; color: var(--on-dark); cursor: pointer; white-space: nowrap;
    font: 600 0.72rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase;
  }
  .day-bar button b { font-weight: 600; color: var(--on-dark-muted); margin-right: 0.15em; }
  .day-bar button.on { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
  .day-bar button.on b { color: var(--ink); opacity: 0.6; }
}

/* Buttons over the photos (viewer, floating Download, tray): square, dark, thin light edge; yellow on hover */
.viewer button, .viewer .vw-download, .fab {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 44px; min-width: 44px; padding: 0 0.9rem; box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.2); background: rgba(14, 17, 20, 0.85); color: var(--on-dark);
  font: 600 0.75rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.viewer button:hover, .viewer .vw-download:hover, .fab:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.viewer svg, .fab svg, .tray svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }

/* Viewer: one photo as big as the window allows, with its caption and camera details */
.viewer {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(6, 8, 10, 0.97); color: var(--on-dark); --vh: calc(100dvh - 150px);
}
.viewer::backdrop { background: rgba(6, 8, 10, 0.97); }
.viewer[open] { display: grid; place-items: center; animation: vw-in 0.2s ease; }
@keyframes vw-in { from { opacity: 0; } }
.viewer figure {
  outline: none; margin: 0; width: 100%; height: 100%; padding: 56px 88px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; cursor: zoom-out;
}
.viewer img { max-width: 100%; max-height: var(--vh); width: auto; height: auto; object-fit: contain; cursor: default; }
.viewer img[style*="--r"] { width: min(100%, var(--vh) * var(--r)); aspect-ratio: var(--r); }
.viewer img.wait { opacity: 0; }
.viewer figcaption { max-width: 46rem; text-align: center; text-wrap: balance; font-weight: 700; }
.vw-info { font: 400 0.75rem/1.4 var(--mono); color: var(--on-dark-muted); text-align: center; letter-spacing: 0.02em; }
.vw-info:empty, .viewer figcaption:empty { display: none; }
.viewer .vw-download { position: fixed; top: 16px; left: 16px; }
.viewer .vw-download[hidden] { display: none; }
.viewer .vw-top { position: fixed; top: 16px; right: 16px; display: flex; gap: 8px; }
.viewer .vw-prev, .viewer .vw-next { position: fixed; top: 50%; translate: 0 -50%; padding: 0; }
.viewer .vw-prev { left: 20px; }
.viewer .vw-next { right: 20px; }
.viewer .vw-count { position: fixed; bottom: 16px; left: 50%; translate: -50% 0; font: 600 0.72rem var(--mono); letter-spacing: 0.08em; color: var(--on-dark-muted); }
@media (max-width: 760px) {
  .viewer { --vh: calc(100dvh - 190px); }
  .viewer figure { padding: 64px 0 76px; }
  .viewer figcaption, .vw-info { padding-inline: var(--gutter); }
  .viewer .vw-prev, .viewer .vw-next { top: auto; bottom: 16px; translate: none; }
  .viewer .vw-count { bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) { .viewer[open] { animation: none; } .shot img { transition: none; } }

/* Select mode: the floating Download button turns it on; tap photos to pick them (a yellow frame and check),
   then the tray at the bottom downloads them */
.fab {
  position: fixed; z-index: 16; right: 16px; bottom: var(--bottom); height: 48px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.fab[hidden] { display: none; }
@media (max-width: 640px) { .fab { width: 48px; padding: 0; } .fab span { display: none; } .fab svg { width: 22px; height: 22px; } }

.shot::after, .shot::before { pointer-events: none; }
.selecting .shot { cursor: pointer; }
.selecting .shot:hover img { transform: none; }
.selecting .shot::after, .pick-dot .shot:hover::after {
  content: ""; position: absolute; z-index: 2; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(0, 0, 0, 0.3); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.selecting .shot.picked::after {
  border-color: var(--yellow);
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230E1114' stroke-width='3'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.selecting .shot.picked::before { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 0 4px var(--yellow); }
/* the circle takes the pointer (a hand, not the zoom cursor); a click on it still lands on the tile, which picks it */
.pick-dot .shot:hover::after, .selecting .shot::after { pointer-events: auto; cursor: pointer; }

.tray {
  position: fixed; z-index: 30; left: 50%; bottom: var(--bottom); translate: -50% 0; overflow: hidden;
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 1.1rem;
  background: var(--paper); color: var(--ink); border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--yellow); white-space: nowrap;
}
.tray[hidden] { display: none; }
.tray-count { margin-right: 0.5rem; font-weight: 800; }
.tray button {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.85rem; border: 2px solid var(--ink);
  background: transparent; color: var(--ink); cursor: pointer;
  font: 600 0.72rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
}
.tray button:hover { background: var(--ink); color: var(--paper); }
.tray button[hidden] { display: none; }
.tray .tray-down { background: var(--ink); color: #fff; }
.tray .tray-down:hover { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.tray .tray-down:disabled { opacity: 0.4; cursor: default; background: var(--ink); color: #fff; }
.tray svg { width: 15px; height: 15px; }
.tray-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0, 0, 0, 0.12); }
.tray-bar[hidden] { display: none; }
.tray-bar b { display: block; width: 0; height: 100%; background: var(--blue); transition: width 0.2s; }
@media (max-width: 640px) {
  .tray { left: 12px; right: 12px; translate: none; gap: 0.35rem; padding: 0.4rem 0.4rem 0.4rem 0.8rem; box-shadow: 5px 5px 0 var(--yellow); }
  .tray-count { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.85rem; }
  .tray button { flex: none; padding: 0.6rem 0.6rem; font-size: 0.68rem; letter-spacing: 0.04em; }
}
body.selecting-on .slider { display: none; }

/* ---------- /photos/: every album as a card, grouped by year when sorted by date. Folder chips, sort and search
   (albums.js) sit under the title. */
.albums-page main { padding-bottom: clamp(4rem, 10vw, 7rem); }
.albums-head { padding-top: clamp(2.5rem, 8vw, 5.5rem); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.albums-head .kicker { color: var(--yellow); }
.albums-head .kicker i { font-style: normal; opacity: 0.5; margin-inline: 0.3em; }
.albums-tools { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.albums-tools[hidden] { display: none; }
.albums-tools .filters { margin-top: 0; }
.albums-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.albums-search input {
  font: 600 0.78rem var(--mono); letter-spacing: 0.04em; color: var(--on-dark);
  background: transparent; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 999px;
  padding: 0.55rem 0.95rem 0.55rem 2.2rem; width: 13rem; max-width: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='%23A7AEB4' stroke-width='2.4'/%3E%3Cpath d='M15 15l5 5' stroke='%23A7AEB4' stroke-width='2.4'/%3E%3C/svg%3E") 0.8rem 50% / 0.95rem no-repeat;
  transition: border-color 0.2s;
}
.albums-search input::placeholder { color: var(--on-dark-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.albums-search input:focus { outline: none; border-color: var(--yellow); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.albums {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  margin-bottom: clamp(3rem, 7vw, 5rem);
}
.albums .year {
  grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 1rem;
  border-top: 3px solid var(--on-dark); padding-top: 1rem; margin-top: clamp(0.5rem, 2vw, 1.5rem);
}
.albums .year:first-child { margin-top: 0; }
.albums .year span {
  font-size: clamp(3rem, 8vw, 6rem); font-weight: 900; font-stretch: 125%; line-height: 0.8; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 2px var(--on-dark);
}
.albums .year[hidden], .album[hidden] { display: none; }
.album a { display: grid; gap: 0.45rem; text-decoration: none; }
.album-cover {
  display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-2); margin-bottom: 0.45rem;
  transition: transform 0.25s, box-shadow 0.25s;
}
.album-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2, .7, .2, 1); }
.album a:hover .album-cover, .album a:focus-visible .album-cover { transform: translate(-4px, -4px); box-shadow: 10px 10px 0 var(--yellow); }
.album a:hover .album-cover img { transform: scale(1.05); }
.album-info { font: 600 0.72rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); }
.album-info i { font-style: normal; opacity: 0.5; margin-inline: 0.2em; }
.album-title {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 900; font-stretch: 112%;
  line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase; overflow-wrap: anywhere;
}
.album a:hover .album-title { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 0.12em; }
.albums-empty { font-family: var(--mono); color: var(--on-dark-muted); margin-bottom: 3rem; }
@media (prefers-reduced-motion: reduce) { .album-cover, .album-cover img { transition: none; } }
/* phones: each row of chips scrolls sideways instead of wrapping, and search takes its own full-width line */
@media (max-width: 640px) {
  .albums-tools .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .albums-tools .filters::-webkit-scrollbar { display: none; }
  .albums-tools .filters button { flex: none; padding: 0.5rem 0.8rem; }
  .albums-sort { display: grid; gap: 0.75rem; }
  .albums-search input { width: 100%; }
  .albums .year span { font-size: 2.6rem; }
}

/* ---------- Hearts (gallery.js): a heart in a tile's corner (with a mouse, on hover; filled once hearted), a heart
   button in the viewer with a pop when you heart, and the Hearted filter in the album's header */
:root { --heart: #FF4D6D; }
.shot[hidden] { display: none; }
.shot .heart {
  position: absolute; z-index: 2; left: 4px; bottom: 4px; width: 32px; height: 32px;
  display: grid; place-items: center; color: #fff; cursor: pointer; opacity: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); transition: opacity 0.15s, transform 0.15s;
}
.shot .heart svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .shots:not(.selecting) .shot:hover .heart { opacity: 1; }
  .shots:not(.selecting) .shot .heart:hover { transform: scale(1.15); }
}
.shot.hearted .heart { opacity: 1; color: var(--heart); }
.shot.hearted .heart svg { fill: currentColor; }
@media (max-width: 640px) { .shot .heart { width: 24px; height: 24px; left: 2px; bottom: 2px; } .shot .heart svg { width: 15px; height: 15px; } }

.viewer .vw-heart { padding: 0; }
.viewer .vw-heart svg { width: 20px; height: 20px; fill: none; stroke-width: 2; stroke-linejoin: round; }
.viewer .vw-heart[aria-pressed="true"] { color: var(--heart); border-color: var(--heart); }
.viewer .vw-heart[aria-pressed="true"] svg { fill: currentColor; }
.viewer .vw-heart[aria-pressed="true"]:hover { background: var(--heart); color: #fff; }
/* zoom (gallery.js): double-tap / pinch zooms the photo, drag moves around; the page doesn't scroll or zoom itself */
.viewer { overflow: hidden; }
.viewer img { touch-action: none; transform-origin: 0 0; cursor: zoom-in; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.viewer img.zoom-anim { transition: transform 0.25s ease; }
.viewer.zoomed img { cursor: grab; }
.viewer.zoomed img.dragging { cursor: grabbing; }
.viewer.zoomed figcaption, .viewer.zoomed .vw-info { visibility: hidden; }
.vw-burst { position: fixed; left: 50%; top: 50%; z-index: 3; width: 120px; height: 120px; margin: -60px 0 0 -60px; color: var(--heart); opacity: 0; pointer-events: none; }
.vw-burst svg { width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5)); }
.vw-burst.pop { animation: heart-pop 0.7s ease-out; }
@keyframes heart-pop { 0% { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; transform: scale(1.1); } 60% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .vw-burst.pop { animation-duration: 0.01s; } }

.heart-filter {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  font: 600 0.75rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-dark); background: transparent; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 999px;
  padding: 0.45rem 0.8rem; margin: -0.3rem 0;
}
.heart-filter[hidden] { display: none; }
.heart-filter svg { width: 15px; height: 15px; fill: var(--heart); }
.heart-filter b { font-weight: 600; color: var(--on-dark-muted); }
.heart-filter:hover { border-color: var(--heart); }
.heart-filter[aria-pressed="true"] { background: var(--heart); border-color: var(--heart); color: #fff; }
.heart-filter[aria-pressed="true"] svg { fill: #fff; }
.heart-filter[aria-pressed="true"] b { color: #fff; }
/* filtering: no day / time marks (too few photos), but the phone row stays for its Hearted / Videos buttons */
.hearts-only .slider-days, .hearts-only .day-bar > button { display: none !important; }
.day-bar .day-filters {
  display: flex; gap: 0.4rem; flex: none; position: sticky; left: 0; z-index: 1; background: var(--ink);
  box-shadow: -1rem 0 0 var(--ink), 0.6rem 0 0.6rem -0.1rem var(--ink);  /* the days scroll under them */
}
.day-bar .day-filters:not(:has(button:not([hidden]))) { display: none; }
.day-bar .day-filters .heart-filter { margin: 0; flex: none; }
.day-bar .day-filters .heart-filter[hidden] { display: none; }
/* Videos: a play icon, yellow when on */
.video-filter svg { fill: currentColor; }
.video-filter[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.video-filter[aria-pressed="true"] svg, .video-filter[aria-pressed="true"] b { color: var(--ink); fill: var(--ink); }
.video-filter:hover { border-color: var(--yellow); }
@media (max-width: 760px) { .has-day-bar .album-meta .heart-filter { display: none; } }

/* /photos/: how many you've hearted in an album, on its cover */
.album-cover { position: relative; }
.album-hearts {
  position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.5rem; background: rgba(14, 17, 20, 0.85); color: #fff; font: 600 0.72rem/1 var(--mono);
}
.album-hearts svg { width: 13px; height: 13px; fill: var(--heart); }

/* an album whose SmugMug description links to Google Photos (fetch-album.py): a button beside the album's links */
.album-meta .album-google {
  display: inline-flex; align-items: center; gap: 0.35rem; margin: -0.3rem 0;
  padding: 0.45rem 0.8rem; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 999px;
}
.album-meta .album-google:hover { border-color: var(--yellow); color: var(--yellow); }

/* Download all (gallery.js): a pill like Google Photos, and the small form asking for an email address */
.album-meta .album-download {
  display: inline-flex; align-items: center; margin: -0.3rem 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--on-dark);
  background: transparent; padding: 0.45rem 0.8rem; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 999px;
}
.album-meta .album-download[hidden] { display: none; }
.album-meta .album-download:hover { border-color: var(--yellow); color: var(--yellow); }
.dl-dialog {
  width: min(28rem, calc(100vw - 2rem)); padding: 0; border: 3px solid var(--ink);
  background: var(--paper); color: var(--ink); box-shadow: 10px 10px 0 var(--yellow);
}
.dl-dialog::backdrop { background: rgba(6, 8, 10, 0.75); }
.dl-dialog form { display: grid; gap: 0.9rem; padding: 1.25rem 1.25rem 1.1rem; }
.dl-dialog h2 { font-size: 1.4rem; line-height: 1; letter-spacing: -0.02em; font-stretch: 112%; color: var(--ink); }
.dl-dialog p { font-size: 0.95rem; color: var(--muted); }
.dl-dialog label { display: grid; gap: 0.35rem; font: 600 0.72rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.dl-dialog input { font: 1rem var(--display); padding: 0.65rem 0.75rem; border: 2px solid var(--ink); background: #fff; color: var(--ink); text-transform: none; letter-spacing: 0; }
.dl-dialog input:focus { outline: 3px solid var(--yellow); outline-offset: 0; }
.dl-status:empty { display: none; }
.dl-dialog .dl-status { font: 0.85rem/1.45 var(--mono); color: var(--ink); }
.dl-dialog .dl-status.ok { color: #1f7a45; }
.dl-dialog .dl-status.bad { color: #b3261e; }
.dl-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.dl-actions button { font: 600 0.75rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.7rem 1rem; border: 2px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
.dl-actions button[hidden] { display: none; }
.dl-actions .dl-send { background: var(--ink); color: #fff; }
.dl-actions .dl-send:hover { background: var(--yellow); color: var(--ink); }
.dl-actions button:disabled { opacity: 0.5; cursor: default; }

/* home network only (gallery.js, albums.js): a link to the album manager */
.manage-link {
  display: inline-flex; align-items: center; margin: -0.3rem 0 -0.3rem 0.5rem; padding: 0.4rem 0.75rem;
  border: 2px dashed rgba(253, 197, 0, 0.6); border-radius: 999px; color: var(--yellow); text-decoration: none;
}
.album-meta .manage-link { margin-left: 0; color: var(--yellow); }
.manage-link:hover { border-style: solid; border-color: var(--yellow); }

/* videos (fetch-album.py, gallery.js): a ▶ and the length on the tile; in the viewer, a player where the photo goes */
.shot .vid-badge {
  position: absolute; right: 6px; bottom: 6px; z-index: 1; display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.45rem; background: rgba(14, 17, 20, 0.8); color: #fff; font: 600 0.68rem/1 var(--mono); pointer-events: none;
}
.shot .vid-badge::before { content: ""; border-style: solid; border-width: 0.3rem 0 0.3rem 0.5rem; border-color: transparent transparent transparent currentColor; }
@media (max-width: 640px) { .shot .vid-badge { right: 3px; bottom: 3px; font-size: 0.6rem; } }
.viewer video { display: block; max-width: 100%; max-height: var(--vh); width: min(100%, var(--vh) * var(--r, 1.778)); aspect-ratio: var(--r, 1.778); background: #000; }
.viewer video[hidden], .viewer img[hidden] { display: none; }