/* that_day — wedding theme stylesheet.
 *
 * Palette tokens (warm cream paper, near-black ink, white surfaces,
 * monochrome accents). Semantic status colors (danger/success) are the only
 * additions beyond the supplied palette.
 */

:root {
  color-scheme: light;
  --td-bg: #ECE3D8;          /* BACKGROUND — warm cream page */
  --td-text: #0D0D0D;        /* TEXT */
  --td-navbar-bg: #FFFFFF;   /* NAVBARBACKGROUND */
  --td-navbar-text: #0D0D0D; /* NAVBARTEXT */
  --td-primary-1: #0D0D0D;   /* PRIMARY1 — primary buttons, active states, headings */
  --td-primary-2: #1A1A1A;   /* PRIMARY2 — hover */
  --td-primary-3: #666666;   /* PRIMARY3 — muted text, hairlines */
  --td-secondary-1: #2D2D2D; /* SECONDARY1 — dark surfaces */
  --td-secondary-2: #404040; /* SECONDARY2 — badges, chips */
  /* Derived constants (documented, not arbitrary restyling) */
  --td-line: #E0D5C6;        /* hairline mixed from background + text */
  --td-danger: #8A3324;
  --td-success: #3A5A40;
  /* Semantic aliases for component rules. */
  --td-surface: var(--td-navbar-bg);
  --td-ink: var(--td-text);
  --td-muted: var(--td-primary-3);
  --td-overlay: var(--td-secondary-1);
  --td-overlay-strong: var(--td-secondary-2);
  --td-radius-s: 10px;
  --td-touch: 44px;
  --td-radius: 14px;
  --td-shadow: 0 10px 30px rgba(13, 13, 13, 0.08);
  --td-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --td-font-display: Charter, "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  /* Gallery grid: target justified-row height and gutter. that_day_gallery.js
     reads both from computed style when packing rows. */
  --td-row-height: 220px;
  --td-gutter: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--td-bg);
  color: var(--td-text);
  font-family: var(--td-font-body);
  line-height: 1.6;
}

.container { max-width: 76rem; margin: 0 auto; padding-inline: 1.25rem; }

main.container { padding-block: 1.75rem 3.5rem; min-height: 65vh; }

/* Navbar */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--td-navbar-bg);
  border-bottom: 1px solid var(--td-line);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.9rem;
}
.nav-right { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.lang-switch a {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--td-primary-3);
  text-decoration: none;
  border: 1px solid var(--td-line);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
}
.lang-switch a:hover,
.lang-switch a:focus-visible {
  color: var(--td-text);
  border-color: var(--td-primary-3);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--td-font-display);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--td-navbar-text);
  text-decoration: none;
}
.brand-mark { width: 1.5rem; height: 1.5rem; flex: none; }
.nav-links { display: flex; gap: 1.35rem; flex-wrap: wrap; }
.nav-links a {
  color: var(--td-navbar-text);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.4rem 0.05rem;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--td-primary-3); }
.nav-links a[aria-current="page"] {
  font-weight: 600;
  border-bottom-color: var(--td-primary-1);
}

/* Typography */

h1, h2, h3 { font-family: var(--td-font-display); font-weight: 600; line-height: 1.2; margin: 0; }
h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); }
h2 {
  font-size: 1.35rem;
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 3px double var(--td-primary-3);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
h3 { font-size: 1.1rem; }
.muted { color: var(--td-primary-3); }
a { color: var(--td-text); }

/* Buttons */

button { font: inherit; cursor: pointer; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  color: var(--td-text);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn.primary { background: var(--td-primary-1); color: var(--td-bg); }
.btn.primary:hover { background: var(--td-primary-2); }
.btn.ghost { border-color: var(--td-primary-3); color: var(--td-text); background: var(--td-surface); }
.btn.ghost:hover { border-color: var(--td-primary-1); background: var(--td-bg); }
.btn.danger { border-color: var(--td-danger); color: var(--td-danger); }
.btn.danger:hover { background: var(--td-danger); color: var(--td-surface); }
.btn.small { padding: 0.38rem 0.95rem; font-size: 0.87rem; }
.btn.wide { width: 100%; }

/* Forms */

form { display: grid; gap: 0.9rem; }
.inline-form { display: inline-flex; gap: 0; }
label { font-size: 0.88rem; font-weight: 600; }
input {
  font: inherit;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--td-primary-3);
  border-radius: 10px;
  background: var(--td-surface);
  color: var(--td-text);
  width: 100%;
}
input:focus-visible,
a:focus-visible,
button:focus-visible { outline: 2px solid var(--td-primary-1); outline-offset: 2px; }
input::placeholder { color: var(--td-primary-3); }

/* Cards and page scaffolding */

.card {
  background: var(--td-surface);
  border: 1px solid var(--td-line);
  border-radius: var(--td-radius);
  box-shadow: var(--td-shadow);
  padding: 1.6rem;
}
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.toolbar { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.6rem; }
.page-desc { margin: -0.4rem 0 1.1rem; }
.empty-card { margin-top: 1rem; }

/* Gallery masthead and sort row */

.gallery-masthead { padding: 0.4rem 0 1rem; }
.gallery-masthead h1 { margin-bottom: 0.3rem; }
.masthead-desc { margin: 0; max-width: 44rem; }
.gallery-sort { display: flex; justify-content: flex-end; margin: 1.3rem 0 1.1rem; }

/* Share composer and owner panel */

.share-block { padding: 0; overflow: hidden; }
.share-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.4rem;
  min-height: var(--td-touch);
  cursor: pointer;
  list-style: none;
}
.share-summary::-webkit-details-marker { display: none; }
.share-summary-text strong { font-family: var(--td-font-display); font-size: 1.15rem; }
.share-summary-text .share-hint { display: block; font-size: 0.8rem; }
.share-chevron { font-size: 1.35rem; color: var(--td-muted); transition: transform 0.15s ease; }
.share-details[open] > .share-summary .share-chevron { transform: rotate(45deg); }
.share-body { padding: 1.1rem 1.4rem 1.3rem; border-top: 1px solid var(--td-line); }
.upload-selection { margin: -0.45rem 0 0; font-size: 0.85rem; }
.upload-progress { margin: -0.25rem 0 0; }
.upload-progress progress {
  display: block;
  width: 100%;
  height: 0.65rem;
  accent-color: var(--td-primary-1);
}
.upload-progress p { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--td-muted); }
.upload-form[aria-busy="true"] .btn[type="submit"] { cursor: progress; opacity: 0.7; }
.upload-feedback { margin-top: 0.9rem; }
.owner-uploads { border-top: 1px solid var(--td-line); padding: 1rem 1.4rem 1.2rem; margin-top: 1.2rem; }
.owner-uploads h2 {
  border-top: 0;
  padding-top: 0;
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
}
.owner-note { margin: 0 0 0.75rem; font-size: 0.85rem; }
.owner-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.owner-item { display: grid; gap: 0.35rem; justify-items: center; }
.owner-item a {
  display: block;
  border-radius: var(--td-radius-s);
  overflow: hidden;
  border: 1px solid var(--td-line);
}
.owner-item img { width: 4.75rem; height: 4.75rem; object-fit: cover; display: block; }
.owner-item .badge { font-size: 0.6rem; padding: 0.12rem 0.45rem; }

/* Segmented sort control */

.segmented {
  display: inline-flex;
  border: 1px solid var(--td-primary-3);
  border-radius: 999px;
  overflow: hidden;
  background: var(--td-surface);
}
.segmented a { padding: 0.4rem 1.05rem; font-size: 0.9rem; text-decoration: none; color: var(--td-text); }
.segmented a + a { border-left: 1px solid var(--td-primary-3); }
.segmented a.active { background: var(--td-primary-1); color: var(--td-bg); }

/* Badges */

.badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--td-primary-3);
  color: var(--td-primary-3);
}
.badge-approved { background: var(--td-primary-1); border-color: var(--td-primary-1); color: var(--td-bg); }
.badge-rejected { border-color: var(--td-danger); color: var(--td-danger); }
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  background: var(--td-secondary-2);
  color: var(--td-surface);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.08rem 0.5rem;
}
.kind-badge {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: var(--td-secondary-2);
  color: var(--td-surface);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
}

/* Storage meter */

.meter {
  height: 0.55rem;
  border-radius: 999px;
  background: var(--td-bg);
  border: 1px solid var(--td-line);
  overflow: hidden;
}
.meter-fill { height: 100%; background: var(--td-primary-1); border-radius: 999px; }
.admin-summary p { margin: 0.6rem 0 1rem; }
.admin-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.admin-links a { text-decoration: underline; text-underline-offset: 3px; }
.share-link { margin-top: 0.9rem; }
.share-link label { display: block; margin-bottom: 0.35rem; }
.copy-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.copy-row input {
  flex: 1 1 16rem;
  min-width: 0;
  width: auto;
  font-size: 0.87rem;
  padding: 0.45rem 0.6rem;
}
.copy-row .copied { border-color: var(--td-primary-1); }

/* Administrator media inventory */

.admin-section-nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  margin: 1.2rem 0 0.75rem;
}
.admin-section-nav a { text-underline-offset: 3px; }
.admin-section-nav a[aria-current="page"] { font-weight: 700; }

/* View-stat timeline (per-media detail page) */

.timeline-link {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-underline-offset: 3px;
}
.timeline-head {
  display: flex;
  gap: 1.1rem;
  align-items: stretch;
  padding: 1rem;
  margin-top: 1rem;
}
.timeline-head .review-thumb {
  flex: 0 0 9.5rem;
  aspect-ratio: 1 / 1;
  border-radius: var(--td-radius-s);
  overflow: hidden;
}
.timeline-head-meta { display: grid; gap: 0.3rem; align-content: center; min-width: 0; }
.timeline-head-meta h2 { border: 0; margin: 0; padding: 0; font-size: 1.25rem; }
.timeline-head-facts { margin: 0; display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.range-nav {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin: 1.3rem 0 0.75rem;
}
.range-nav a {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--td-line);
  border-radius: 999px;
  background: var(--td-surface);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--td-ink);
}
.range-nav a:hover { border-color: var(--td-primary-3); }
.range-nav a[aria-current="page"] {
  background: var(--td-primary-1);
  border-color: var(--td-primary-1);
  color: var(--td-surface);
}
/* pixl-chart's auto-resize needs a fluid canvas inside a sized container. */
.view-timeline {
  position: relative;
  height: 22rem;
  padding: 0.75rem;
  margin-top: 0.9rem;
}
.view-timeline canvas { width: 100%; height: 100%; display: block; }
.timeline-status { margin: 0; padding: 0.75rem 0.5rem 0 0.5rem; font-size: 0.9rem; }

.empty-state { padding: 1.25rem; margin-top: 1.25rem; }
.uploader-groups { display: grid; gap: 1.4rem; margin-top: 1.4rem; }
.uploader-group { padding: 1rem; }
.uploader-group-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.uploader-group h2 { border: 0; margin: 0; padding: 0; }
.group-summary { margin: 0.35rem 0 0; font-size: 0.85rem; }
.group-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.55rem; }
.grouped-grid { margin-bottom: 0; }
.inventory-card { border: 1px solid var(--td-line); border-radius: var(--td-radius-s); }
.status-badge {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  border: 1px solid var(--td-primary-3);
  border-radius: 999px;
  background: var(--td-surface);
  color: var(--td-primary-3);
  padding: 0.15rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}
.status-badge.badge-approved { background: var(--td-primary-1); color: var(--td-bg); }
.status-badge.badge-rejected { border-color: var(--td-danger); color: var(--td-danger); }
.pinned-badge {
  position: absolute;
  right: 0.6rem;
  top: 0.6rem;
  border-radius: 999px;
  background: var(--td-primary-3);
  color: var(--td-bg);
  padding: 0.15rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Review cards */

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}
.review-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.review-thumb { display: block; position: relative; aspect-ratio: 4 / 3; background: var(--td-bg); }
.review-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-card.rejected .review-thumb img { filter: grayscale(1); opacity: 0.75; }
.review-meta { padding: 0.85rem 1rem 0.2rem; display: grid; gap: 0.2rem; }
.review-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.review-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0.8rem 1rem 1rem; margin-top: auto; }
.review-actions form { display: flex; }

/* Gallery stream and justified grid.
 *
 * The server renders every tile with its aspect ratio (--td-ratio). Without
 * JavaScript the flex fallback grows tiles proportionally inside wrapping
 * rows; with JavaScript that_day_gallery.js packs exact justified rows by
 * assigning each tile a flex-basis in pixels (see packChunk there). */

#gallery-stream { display: flex; flex-direction: column; align-items: center; gap: var(--td-gutter); }
#gallery-stream .gallery-chunk { width: 100%; }
/* Flat wrapping is the no-JavaScript fallback. Once packed, explicit rows
   prevent fractional flex widths from pushing the final tile onto a new line. */
.td-chunk { display: flex; flex-wrap: wrap; gap: var(--td-gutter); }
.td-chunk.td-packed { display: grid; gap: var(--td-gutter); }
.td-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--td-gutter);
  width: 100%;
  min-width: 0;
}
.td-row-sparse { justify-content: center; }
.td-tile {
  position: relative;
  flex: var(--td-ratio, 1.5) 1 10rem;
  min-width: 7rem;
  aspect-ratio: var(--td-ratio, 1.5);
  overflow: hidden;
  border-radius: 6px;
  background: var(--td-surface);
}
.td-tile[hidden] { display: none; }
.td-tile-link {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--td-text);
}
.td-tile-link:focus-visible {
  outline: 3px solid var(--td-primary-1);
  outline-offset: 2px;
}
.td-tile-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.td-tile-badge {
  position: absolute;
  left: 0.6rem;
  top: 0.6rem;
  border: 1px solid var(--td-primary-3);
  border-radius: 999px;
  background: color-mix(in srgb, var(--td-surface) 85%, transparent);
  color: var(--td-text);
  padding: 0.15rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Per-tile like and administrator trash controls. Server-rendered so they
   exist before any script runs; the tile link keeps its no-JS fallback. */
.tile-like,
.tile-trash {
  position: absolute;
  bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 2.2rem;
  padding: 0 0.6rem;
  border: 1px solid var(--td-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--td-surface) 92%, transparent);
  color: var(--td-text);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.tile-like { right: 0.5rem; }
.tile-like ~ .tile-trash { right: 3.1rem; }
.like-count { font-variant-numeric: tabular-nums; }
.tile-like[aria-pressed="true"] { border-color: var(--td-danger); }
.tile-like[aria-pressed="true"] .like-glyph { color: var(--td-danger); }
.tile-trash:hover,
.tile-like:hover { border-color: var(--td-primary-1); }
@media (hover: hover) {
  .tile-like,
  .tile-trash {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
  }
  .td-tile:hover .tile-like,
  .td-tile:focus-within .tile-like,
  .td-tile:hover .tile-trash,
  .td-tile:focus-within .tile-trash {
    opacity: 1;
    visibility: visible;
  }
}

/* The next keyset page remains a normal link when JavaScript is unavailable.
   The gallery adapter switches it to a passive HTMX intersection sentinel. */
.gallery-sentinel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--td-touch);
  padding: 0.5rem 1.3rem;
  border: 1px solid var(--td-primary-3);
  border-radius: 999px;
  background: var(--td-surface);
  color: var(--td-text);
  text-decoration: none;
  font-size: 0.92rem;
  margin-block: 1rem;
}
.gallery-sentinel:hover { border-color: var(--td-primary-1); background: var(--td-bg); }
.gallery-loading { display: none; }
.gallery-enhanced .gallery-sentinel {
  border-color: transparent;
  background: transparent;
  color: var(--td-primary-3);
}
.gallery-enhanced .gallery-sentinel:hover { border-color: transparent; background: transparent; }
.gallery-enhanced .gallery-load-fallback { display: none; }
.gallery-enhanced .gallery-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.gallery-loading-spinner {
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid var(--td-line);
  border-top-color: var(--td-primary-1);
  border-radius: 50%;
  animation: gallery-loading-spin 0.75s linear infinite;
}
@keyframes gallery-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gallery-loading-spinner { animation-duration: 1.8s; }
}

/* Alerts and results */

.alert { padding: 0.75rem 1rem; border-radius: 10px; border: 1px solid; font-size: 0.95rem; }
.alert-error { border-color: var(--td-danger); color: var(--td-danger); background: rgba(138, 51, 36, 0.07); }
.error { color: var(--td-danger); font-weight: 600; }
.result-list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.result-list li.success, .success { color: var(--td-success); }
.result-list li.failure, .failure { color: var(--td-danger); }

/* Unlock hero */

.unlock-hero { display: grid; place-items: center; padding: clamp(2rem, 8vh, 5rem) 0 3rem; }
.unlock-card {
  width: 100%;
  max-width: 26rem;
  text-align: center;
  padding: 2.6rem 2.2rem 2.2rem;
}
.unlock-card::before {
  content: "";
  display: block;
  width: 3.2rem;
  height: 2.4rem;
  margin: 0 auto 1.1rem;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Ccircle cx='24' cy='26' r='15' fill='none' stroke='%230D0D0D' stroke-width='4.5'/%3E%3Ccircle cx='40' cy='26' r='15' fill='none' stroke='%230D0D0D' stroke-width='4.5'/%3E%3C/svg%3E");
}
.eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--td-primary-3);
}
.unlock-card h1 { margin-bottom: 0.6rem; }
.unlock-card input { text-align: center; }
.unlock-help { margin: 1rem 0 0; font-size: 0.88rem; }
.unlock-admin { margin: 1.2rem 0 0; font-size: 0.88rem; }
.unlock-admin a { color: var(--td-primary-3); }

/* Upload */

.upload-card { max-width: 34rem; }
.hint { margin: 1rem 0 0; font-size: 0.85rem; color: var(--td-primary-3); }

/* Footer */

.site-footer {
  border-top: 1px solid var(--td-line);
  padding: 1.4rem 0 1.8rem;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  text-align: center;
  color: var(--td-primary-3);
  font-size: 0.85rem;
  font-family: var(--td-font-display);
  letter-spacing: 0.06em;
}
.site-footer .lang-switch { margin-top: 0.85rem; }

/* Utilities */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* PhotoSwipe lightbox theme — app.css loads after the vendored
 * photoswipe.css (see base.html), so these overrides win the cascade and the
 * palette tokens stay the single source of truth. The like heart is wired by
 * that_day_gallery.js through PhotoSwipe's documented ui.registerElement. */

.pswp {
  --pswp-icon-color: var(--td-bg);
  --pswp-icon-color-secondary: var(--td-primary-3);
  --pswp-icon-stroke-color: var(--td-primary-3);
}
.pswp__bg {
  background: color-mix(in srgb, var(--td-secondary-1) 94%, transparent);
}
.pswp__top-bar {
  background: color-mix(in srgb, var(--td-secondary-1) 85%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--td-line) 25%, transparent);
}
.pswp__counter {
  font-family: var(--td-font-display);
  letter-spacing: 0.05em;
}
.pswp__button--like {
  width: auto;
  min-width: var(--td-touch);
  padding: 0 0.7rem;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.pswp__button--like.liked {
  color: color-mix(in srgb, var(--td-danger) 55%, var(--td-surface));
}
/* Slideshow play/pause: the two glyph spans swap on the .playing class.
 * The vendored stylesheet absolutely positions .pswp__icn inside the 44px
 * button, so each half-span provides the positioning context instead. */
.pswp__button--slideshow .td-ic,
.pswp__button--fullscreen .td-ic {
  position: absolute;
  inset: 0;
  display: block;
}
.pswp__button--slideshow .td-ic-pause { display: none; }
.pswp__button--slideshow.playing .td-ic-play { display: none; }
.pswp__button--slideshow.playing .td-ic-pause { display: block; }
.td-video {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.td-video video {
  max-width: 100%;
  max-height: 100%;
  background: transparent;
}

@media (max-width: 900px) {
  :root { --td-row-height: 180px; }
}

@media (max-width: 640px) {
  :root { --td-row-height: 140px; --td-gutter: 4px; }
  .container { padding-inline: 1rem; }
  main.container { padding-block: 1.25rem 2.5rem; }
  .nav-inner { flex-wrap: wrap; padding-block: 0.6rem; gap: 0.4rem; }
  .brand { font-size: 1.2rem; }
  .nav-right { gap: 0.8rem; }
  .gallery-masthead h1 { font-size: 1.9rem; }
  .gallery-sort { justify-content: stretch; margin: 1.1rem 0 1rem; }
  .segmented { display: flex; width: 100%; }
  .segmented a { flex: 1; text-align: center; }
  .share-summary { padding-inline: 1rem; }
  .share-body { padding-inline: 1rem; }
  .owner-uploads { padding-inline: 1rem; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .btn { min-height: var(--td-touch); }
  .btn.small { min-height: 38px; }
  input[type="file"] { width: 100%; }
  .review-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; }
  .timeline-head { flex-direction: column; }
  .timeline-head .review-thumb { flex-basis: auto; width: 9.5rem; }
  .view-timeline { height: 16rem; }
  .review-actions { padding: 0.7rem 0.85rem 0.9rem; }
  .review-actions .btn { flex: 1; }
  /* Touch devices keep tile controls visible, so use the shared minimum
     target rather than the compact pointer-oriented desktop size. */
  .tile-like,
  .tile-trash { min-width: var(--td-touch); height: var(--td-touch); justify-content: center; }
  /* Keep both administrator controls usable on narrow portrait tiles without
     squeezing two 44px targets onto the same edge. */
  .tile-like ~ .tile-trash { right: 0.4rem; bottom: auto; top: 0.4rem; }
  .uploader-group-head { flex-direction: column; }
  .group-actions { justify-content: flex-start; }
  .uploader-group-head > form,
  .uploader-group-head > form .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}