:root {
  color-scheme: light;
  --site-bg: #f5f7fb;
  --site-surface: #ffffff;
  --site-surface-soft: #f8fafc;
  --site-surface-hover: #eef3f8;
  --site-border: #d9e1ea;
  --site-border-strong: #aebccc;
  --site-ink: #1b2430;
  --site-muted: #5f6b7a;
  --site-primary: #2f6fed;
  --site-primary-soft: #edf3ff;
  --site-accent: #0f8f6f;
  --site-warning-soft: #fff2eb;
  --site-warning-border: #efc2b5;
  --site-warning-ink: #8f3219;
  --site-success-bg: #eefaf6;
  --site-success-bg-hover: #dff5ec;
  --site-success-border: #b9ddd5;
  --site-success-ink: #1c6a58;
  --site-overlay-hover: rgba(27, 36, 48, 0.06);
  --site-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
  /* Horizontal page gutter; narrowed on phones so content is not squeezed. */
  --page-gutter: 1.5rem;
  --site-shadow-hover: 0 18px 42px rgba(15, 23, 42, 0.16);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --site-bg: #10141f;
  --site-surface: #171d2b;
  --site-surface-soft: #1c2333;
  --site-surface-hover: #232b3d;
  --site-border: #2b3345;
  --site-border-strong: #47536b;
  --site-ink: #e8ecf5;
  --site-muted: #98a4b8;
  --site-primary: #6c9bff;
  --site-primary-soft: #1c2740;
  --site-accent: #35d6a8;
  --site-warning-soft: #3a2318;
  --site-warning-border: #6b3822;
  --site-warning-ink: #ffab7a;
  --site-success-bg: #123c33;
  --site-success-bg-hover: #17493c;
  --site-success-border: #1f5c4c;
  --site-success-ink: #6fe6c4;
  --site-overlay-hover: rgba(255, 255, 255, 0.08);
  --site-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  --site-shadow-hover: 0 18px 42px rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--site-bg);
}

.navigation-progress {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}

.navigation-progress span {
  display: block;
  width: 35%;
  height: 100%;
  background: var(--site-primary);
  box-shadow: 0 0 12px rgba(23, 107, 89, 0.45);
  transform: translateX(-110%);
}

.is-navigating .navigation-progress {
  opacity: 1;
}

.is-navigating .navigation-progress span {
  animation: navigation-progress 900ms ease-in-out infinite;
}

.is-navigating body {
  cursor: progress;
}

@keyframes navigation-progress {
  0% { transform: translateX(-110%); }
  65% { transform: translateX(190%); }
  100% { transform: translateX(310%); }
}

@media (prefers-reduced-motion: reduce) {
  .is-navigating .navigation-progress span {
    width: 100%;
    animation: none;
    transform: none;
  }
}

body,
input,
textarea,
button,
select {
  font-family: "Manrope", sans-serif;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--site-ink);
  background:
    radial-gradient(circle at 0% 0%, rgba(47, 111, 237, 0.08), transparent 24%),
    radial-gradient(circle at 100% 0%, rgba(15, 143, 111, 0.08), transparent 20%),
    var(--site-bg);
}

.input,
.textarea,
.select select,
input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
textarea,
select {
  color: var(--site-ink);
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  border-radius: 14px;
  box-shadow: none;
}

.input::placeholder,
.textarea::placeholder,
input::placeholder,
textarea::placeholder {
  color: #8793a2;
  opacity: 1;
}

.input:hover,
.textarea:hover,
.select select:hover,
input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):hover,
textarea:hover,
select:hover {
  border-color: var(--site-border-strong);
}

.input:focus,
.textarea:focus,
.select select:focus,
input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):focus,
textarea:focus,
select:focus {
  border-color: var(--site-primary);
  box-shadow: 0 0 0 0.18rem rgba(47, 111, 237, 0.12);
}

.label {
  color: var(--site-ink);
  font-weight: 800;
}

h1,
h2,
h3,
h4,
.title {
  font-family: "Fraunces", serif;
  color: var(--site-ink);
}

a {
  color: var(--site-primary);
}

.site-main {
  padding-top: 2rem;
  padding-bottom: 3rem;
  /* Single source of truth for the page gutter. The full-bleed hero rules cancel
     it out by exactly this much, so the two can never drift apart. Matches
     Bulma's own .section padding on desktop. */
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

.site-narrow {
  max-width: 900px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(16px);
  background: rgba(245, 247, 251, 0.9);
  border-bottom: 1px solid rgba(217, 225, 234, 0.8);
}

:root[data-theme="dark"] .site-header {
  background: rgba(16, 20, 31, 0.85);
  border-bottom-color: rgba(43, 51, 69, 0.8);
}

.site-nav {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header-search {
  display: none;
  padding: 0 0 1rem;
}

.header-search.is-open {
  display: block;
}

.header-search-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-search-row .input {
  flex: 1 1 320px;
}

/* Brand mark — see views/partials/site-logo.ejs. Uses the Manrope body face on
   purpose; the icon is sized in em so a single font-size scales the whole mark. */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Manrope", sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  color: var(--site-ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-logo-sm {
  font-size: 1.25rem;
}

.site-logo-lg {
  font-size: 1.75rem;
}

.site-logo-icon {
  flex-shrink: 0;
  color: var(--site-primary);
}

.site-logo-overflow {
  color: var(--site-primary);
}

/* Wrapper for when the mark links somewhere (the header). */
.site-logo-link {
  display: inline-flex;
  text-decoration: none;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.nav-menu-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--site-border);
  border-radius: 12px;
  background: var(--site-surface);
  cursor: pointer;
}

.nav-menu-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--site-ink);
  transition: transform 160ms ease, opacity 160ms ease;
}

.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-menu-toggle[aria-expanded="true"] .nav-menu-toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.nav-links .button {
  border-radius: 12px;
  border-color: transparent;
  box-shadow: none;
  color: var(--site-ink);
  font-weight: 700;
}

.nav-links .button.is-white {
  background: var(--site-surface);
}

.nav-links .button:hover {
  background: var(--site-surface-hover);
}

.nav-links .button.is-active,
.nav-links .nav-search-toggle[aria-expanded="true"] {
  background: var(--site-success-bg);
  color: var(--site-success-ink);
}

.nav-links .button.is-active:hover,
.nav-links .nav-search-toggle[aria-expanded="true"]:hover {
  background: var(--site-success-bg-hover);
}

.nav-profile-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-profile-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 8px;
  object-fit: cover;
}

.signin-card {
  max-width: 680px;
  margin: 2rem auto 0;
  padding: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}

.signin-google-button {
  min-width: min(100%, 280px);
  min-height: 52px;
  margin-top: 0.75rem;
  font-size: 1.05rem;
}

.signin-note {
  margin-top: 1.25rem;
}

.section-card,
.profile-empty-state,
.item-card,
.gallery-tile,
.home-card {
  border: 1px solid var(--site-border);
  border-radius: 22px;
  box-shadow: var(--site-shadow);
}

.page-hero {
  padding: 0.25rem 0 1.25rem;
}

.detail-hero-grid {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

.detail-hero-grid.has-media {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
}

.detail-hero-copy {
  min-width: 0;
}

.detail-hero-media {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 180px;
  justify-self: end;
  overflow: hidden;
  border-radius: 20px;
  background: var(--site-surface-soft);
  color: inherit;
}

.detail-hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stand-in hero for lists with no cover. Only shown on mobile, where the hero
   slot is what the overlaid back arrow sits on; desktop keeps its existing
   single-column layout for these lists. */
.detail-hero-media-fallback {
  display: none;
}


.section-card {
  background: var(--site-surface);
}

.page-section {
  margin-top: 1.5rem;
}

.eyebrow {
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--site-accent);
}

.muted {
  color: var(--site-muted);
  margin: 0;
}

.small {
  font-size: 0.92rem;
}

.action-group,
.buttons.action-group {
  margin-top: 1.25rem;
}

.search-field .button,
.action-group .button,
.item-actions .button,
.gallery-tile-actions .button,
.button-row .button,
.save-form .button,
.post-actions .button {
  border-radius: 14px;
  min-height: 44px;
  font-weight: 700;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.section-heading .title,
.section-heading h2,
.section-heading h3,
.section-heading .label {
  margin-bottom: 0.35rem;
}

.meta-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.vote-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 0.8rem;
  border-radius: 14px;
  border: 1px solid var(--site-success-border);
  background: var(--site-success-bg);
  color: var(--site-success-ink);
  font-size: 0.88rem;
  font-weight: 800;
}

.item-rank {
  width: fit-content;
}

.card.home-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--site-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* "You are here" affordance. The card already has a 1px border, so recolouring
   it costs no layout shift — the card never moves or resizes its neighbours.
   Uses the muted border-strong token rather than the brand blue, which reads as
   far too saturated against the dark surface. */
.card.home-card:hover {
  border-color: var(--site-border-strong);
  box-shadow: var(--site-shadow-hover);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .card.home-card:hover {
    transform: none;
  }
}

/* A plain CSS grid: cards read left-to-right, top-to-bottom in vote order
   (10 9 8 / 7 6 5 / 4 3 2) and are laid out by the browser, so nothing is
   repositioned as images load or as infinite scroll appends more. */
/* Fallback (no JS): a plain grid in vote order. */
.home-grid {
  --home-grid-columns: 3;
  display: grid;
  grid-template-columns: repeat(var(--home-grid-columns), minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

/* With JS, cards are dealt round-robin into column stacks: the reading order
   across the top stays 10 9 8 / 7 6 5, and each column packs tight with no
   vertical gaps. Cards remain in normal flow, so nothing is repositioned. */
.home-grid.is-column-masonry {
  display: flex;
  align-items: flex-start;
}

.home-grid.is-column-masonry > .masonry-column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cover-image,
.hero-image,
.image-preview {
  display: block;
  width: 100%;
  object-fit: cover;
}

.cover-image-link {
  display: block;
  color: inherit;
}

.cover-image-link:focus-visible {
  outline: 3px solid var(--site-accent);
  outline-offset: -3px;
}

.cover-image {
  aspect-ratio: 16 / 9;
}

.hero-image {
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  margin-bottom: 1.2rem;
}

.home-card-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.card-heading-stack {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.card-header {
  min-width: 0;
  box-shadow: none;
}

.card-title {
  display: block;
  margin: 0;
  color: var(--site-ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-description {
  margin: 0;
  color: var(--site-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  gap: 0.5rem;
  color: var(--site-muted);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.user-badge:hover {
  color: var(--site-ink);
}

.user-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 8px;
  object-fit: cover;
}

.user-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--site-surface-soft);
  color: var(--site-ink);
  font-weight: 800;
}

.user-badge-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-user-badge,
.detail-user-badge {
  margin-top: 0.65rem;
}

/* Latest feed: link back to the list an item belongs to. */
.gallery-tile-list-link {
  display: block;
  margin-top: 0.15rem;
  color: var(--site-primary);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-tile-list-link:hover {
  text-decoration: underline;
}

.gallery-tile-author {
  margin-top: 0.15rem;
}

.lightbox-user-badge {
  margin-bottom: 0.35rem;
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0 1rem;
}

.profile-identity .title {
  margin-bottom: 0.2rem;
}

.profile-username {
  margin: 0 0 0.25rem;
  color: var(--site-muted);
  font-weight: 700;
}

.profile-avatar {
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  border-radius: 18px;
  object-fit: cover;
}

.profile-avatar-large {
  width: 112px;
  height: 112px;
  flex-basis: 112px;
  border-radius: 24px;
}

.profile-image-form {
  max-width: 560px;
}

.theme-toggle-form {
  display: grid;
  gap: 1rem;
  align-items: start;
}

.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  cursor: pointer;
}

.theme-switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.theme-switch-track {
  position: relative;
  width: 52px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--site-border);
  transition: background 160ms ease;
}

.theme-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--site-surface);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.3);
  transition: transform 160ms ease;
}

.theme-switch input:checked + .theme-switch-track {
  background: var(--site-accent);
}

.theme-switch input:checked + .theme-switch-track .theme-switch-thumb {
  transform: translateX(22px);
}

.theme-switch input:focus-visible + .theme-switch-track {
  outline: 3px solid var(--site-primary);
  outline-offset: 2px;
}

.theme-switch-label {
  color: var(--site-ink);
  font-weight: 700;
}

.profile-details-form {
  max-width: 680px;
}

.profile-image-preview-frame {
  width: 160px;
  height: 160px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--site-border);
  border-radius: 20px;
  background: var(--site-surface-soft);
}

.profile-image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-profile-list-meta {
  margin-top: 1rem;
}

.infinite-scroll-sentinel {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 1.25rem 0 0.5rem;
}

.infinite-scroll-sentinel.is-loading {
  opacity: 0.72;
}

.stacked-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.post-actions,
.item-actions,
.gallery-tile-actions,
.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}

.list-create-actions {
  margin-top: 1rem;
}

.post-actions {
  margin: 1rem 0 1.2rem;
}

.post-actions-compact {
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.post-actions-compact .vote-inline-button {
  width: 40px;
  height: 40px;
}

.post-actions-compact .vote-inline-count {
  min-width: 84px;
  height: 40px;
  padding: 0 0.85rem;
  font-size: 0.9rem;
}

.post-actions-compact .action-pill {
  min-height: 40px;
  padding: 0 0.85rem;
}

.post-actions-compact .vote-chip {
  min-height: 40px;
  padding: 0 0.75rem;
}

.post-actions-compact .button {
  min-height: 40px;
}

.vote-inline {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  border: 1px solid var(--site-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--site-surface-soft);
}

.vote-inline-button {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--site-ink);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.vote-inline-button:hover {
  background: var(--site-overlay-hover);
}

.vote-inline-button.is-selected[value="up"],
.gallery-tile-vote-button.is-selected[value="up"] {
  color: var(--site-success-ink);
  background: var(--site-success-bg);
}

.vote-inline-button.is-selected[value="down"],
.gallery-tile-vote-button.is-selected[value="down"] {
  color: var(--site-warning-ink);
  background: var(--site-warning-soft);
}

.vote-inline-button:disabled {
  opacity: 0.68;
  cursor: wait;
}

.vote-inline-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 0 1rem;
  height: 44px;
  border-left: 1px solid var(--site-border);
  border-right: 1px solid var(--site-border);
  font-size: 0.95rem;
  font-weight: 800;
  white-space: nowrap;
  color: var(--site-ink);
}

/* Shown only where the pill collapses to an icon (the mobile app bar). */
.action-pill-icon {
  display: none;
}

.action-pill,
.back-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--site-border);
  border-radius: 14px;
  background: var(--site-surface-soft);
  color: var(--site-ink);
  font-weight: 800;
  text-decoration: none;
}

.back-pill {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  font-size: 1.4rem;
  line-height: 1;
  flex: 0 0 auto;
}

.detail-title-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.detail-title-row .title {
  margin: 0;
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.detail-hero-copy .subtitle {
  overflow-wrap: normal;
  word-break: normal;
}

.home-card-preview {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}

.home-card-preview .title {
  margin-bottom: 0.8rem;
}

.preview-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.8rem;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  height: 360px;
}

.preview-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  min-height: 0;
}

.preview-item-image {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
}

.preview-item-copy {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.preview-item-title,
.item-title-link,
.item-link {
  color: var(--site-ink);
  text-decoration: none;
}

.preview-item-title {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-preview-masonry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.gallery-preview-tile {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  min-height: 0;
  aspect-ratio: 4 / 3;
}

.gallery-preview-masonry .gallery-preview-tile:nth-child(1) {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.gallery-preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.gallery-preview-placeholder,
.preview-item-placeholder {
  border: 1px dashed #d6c5b8;
  background:
    linear-gradient(135deg, rgba(47, 111, 237, 0.05), rgba(15, 143, 111, 0.06)),
    var(--site-surface);
}

.gallery-preview-placeholder {
  display: grid;
  place-items: center;
}

.item-card-list,
.profile-list-stack,
.saved-items-list {
  display: grid;
  gap: 1rem;
}

.item-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1.25rem;
  margin: 0;
  background: var(--site-surface);
}

.item-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}

.item-copy {
  display: grid;
  gap: 0.55rem;
}

.item-title-inline {
  margin: 0;
}

.item-image {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  border-radius: 16px;
}

.item-video {
  width: 100%;
  min-height: 280px;
  border: 0;
  border-radius: 16px;
  background: #0f172a;
}

.item-link {
  word-break: break-word;
}

.gallery-page-shell {
  max-width: 1280px;
}

/* Fallback (no JS): a plain grid, read in rank order across each row. */
.gallery-grid {
  --gallery-grid-columns: 5;
  display: grid;
  grid-template-columns: repeat(var(--gallery-grid-columns), minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;
  width: 100%;
}

/* With JS, tiles are dealt round-robin into column stacks so they read across
   rows (1 2 / 3 4) instead of down columns, while still packing tight. */
.gallery-grid.is-column-masonry {
  display: flex;
  align-items: flex-start;
}

.gallery-grid.is-column-masonry > .masonry-column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.gallery-tile {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  border: 0;
  min-width: 0;
}

.gallery-tile-link {
  display: block;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: var(--site-surface-soft);
}

.gallery-tile-link:hover .gallery-image {
  transform: scale(1.02);
}

.gallery-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  object-fit: contain;
  transition: transform 180ms ease;
}

.gallery-tile-caption {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.65rem 0.15rem 0;
}

.gallery-tile-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.gallery-tile-title {
  margin: 0;
  color: var(--site-ink);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery-tile-submeta {
  margin: 0;
  color: var(--site-muted);
  font-size: 0.92rem;
}

.gallery-tile-vote-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.gallery-tile-vote-inline {
  display: inline-flex;
  align-items: center;
  margin: 0;
  width: auto;
  min-width: 0;
  border: 1px solid var(--site-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--site-surface-soft);
  white-space: nowrap;
  vertical-align: baseline;
}

.gallery-tile-vote-inline input[type="hidden"] {
  display: none;
}

.gallery-tile-vote-button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--site-ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.gallery-tile-vote-button:hover:not(.is-selected) {
  background: var(--site-overlay-hover);
}

.gallery-tile-vote-button:disabled {
  opacity: 0.68;
  cursor: wait;
}

.gallery-tile-vote-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 0.45rem;
  border-left: 1px solid var(--site-border);
  border-right: 1px solid var(--site-border);
  color: var(--site-ink);
  font-size: 0.92rem;
  font-weight: 800;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.gallery-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 17, 27, 0.74);
  backdrop-filter: blur(8px);
}

.gallery-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: calc(100vh - 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  gap: 1.25rem;
  padding: 1.25rem;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(217, 225, 234, 0.9);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.26);
}

:root[data-theme="dark"] .gallery-lightbox-panel {
  background: rgba(23, 29, 43, 0.98);
  border-color: rgba(43, 51, 69, 0.9);
}

.gallery-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--site-border);
  color: var(--site-ink);
  text-decoration: none;
  font-size: 1.7rem;
  line-height: 1;
}

:root[data-theme="dark"] .gallery-lightbox-close {
  background: rgba(35, 43, 61, 0.92);
}

.gallery-lightbox-media {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  border-radius: 24px;
  overflow: hidden;
  background: var(--site-surface-soft);
}

.gallery-lightbox-image {
  display: block;
  width: 100%;
  max-height: calc(100vh - 5.5rem);
  object-fit: contain;
}

.gallery-lightbox-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.2rem;
}

.gallery-lightbox-copy {
  display: grid;
  gap: 0.85rem;
}

.gallery-lightbox-copy .title {
  margin: 0;
}

.gallery-lightbox-actions {
  display: grid;
  gap: 1rem;
}

.gallery-lightbox-actions .vote-inline {
  justify-self: start;
}

.item-detail-grid {
  --item-grid-columns: 4;
  column-count: var(--item-grid-columns);
  column-gap: 20px;
  margin-bottom: 1.5rem;
}

.item-detail-grid.is-solo {
  column-count: 1;
  max-width: 720px;
}

.item-detail-grid.is-js-masonry {
  position: relative;
  column-count: initial;
  column-gap: 0;
}

.item-detail-grid.is-js-masonry > .item-detail-hero-card,
.item-detail-grid.is-js-masonry > .item-detail-tile {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  transition: transform 180ms ease;
}

.item-detail-hero-card {
  display: block;
  width: 100%;
  margin: 0 0 20px;
  border: 1px solid var(--site-border);
  border-radius: 22px;
  overflow: hidden;
  background: var(--site-surface);
  box-shadow: var(--site-shadow);
  break-inside: avoid;
}

.item-detail-media {
  position: relative;
  min-width: 0;
  display: block;
  background: var(--site-surface-soft);
}

.item-detail-back {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--site-border);
  color: var(--site-ink);
  text-decoration: none;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22);
  transition: background 0.15s ease, transform 0.15s ease;
}

.item-detail-back:hover {
  transform: scale(1.05);
}

:root[data-theme="dark"] .item-detail-back {
  background: rgba(35, 43, 61, 0.92);
}

/* Save + fullscreen sit together in the image's top-right corner so the save
   dropdown has room to expand downward. */
.item-detail-top-actions {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.item-detail-save {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 44px;
  padding: 0 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(23, 29, 43, 0.82);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(6px);
  transition: background 0.15s ease, transform 0.15s ease;
}

.item-detail-save:hover {
  transform: scale(1.04);
}

.item-detail-save.is-saved {
  background: var(--site-primary);
  border-color: var(--site-primary);
}

.item-detail-fullscreen {
  z-index: 1;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--site-border);
  color: var(--site-ink);
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22);
  transition: background 0.15s ease, transform 0.15s ease;
}

.item-detail-fullscreen:hover {
  transform: scale(1.05);
}

:root[data-theme="dark"] .item-detail-fullscreen {
  background: rgba(35, 43, 61, 0.92);
}

.item-detail-image {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.5s ease;
}

/* Branded image loader: the List Overflow logo bars pulsing in a wave over a
   soft shimmer. Only shown while JS has flagged the frame as still loading, so
   a cached image (or no-JS) never sees it. */
.image-loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  background: linear-gradient(
    110deg,
    var(--site-surface-soft) 30%,
    rgba(47, 111, 237, 0.10) 50%,
    var(--site-surface-soft) 70%
  );
  background-size: 220% 100%;
  animation: imageLoaderShimmer 1.6s linear infinite;
}

/* Reserve space so the absolutely-positioned loader is visible before the image
   has intrinsic dimensions (otherwise the frame collapses to 0 height). */
.item-detail-media.is-loading {
  min-height: min(60vh, 380px);
}

.item-detail-media.is-loading .image-loader {
  opacity: 1;
  visibility: visible;
}

.item-detail-media.is-loading .item-detail-image {
  opacity: 0;
}

.image-loader-bars {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 68px;
}

.image-loader-bars span {
  height: 11px;
  border-radius: 999px;
  background: var(--site-primary);
  transform-origin: left center;
  animation: imageLoaderWave 1.2s ease-in-out infinite;
}

.image-loader-bars span:nth-child(1) {
  width: 100%;
  animation-delay: 0s;
}

.image-loader-bars span:nth-child(2) {
  width: 72%;
  animation-delay: 0.16s;
}

.image-loader-bars span:nth-child(3) {
  width: 46%;
  animation-delay: 0.32s;
}

@keyframes imageLoaderWave {
  0%, 100% {
    transform: scaleX(0.35);
    opacity: 0.35;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes imageLoaderShimmer {
  to {
    background-position: -220% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-loader,
  .image-loader-bars span {
    animation: none;
  }
  .image-loader-bars span {
    opacity: 0.7;
  }
  /* Hold the thumbnails still for motion-sensitive users. */
  .gallery-tile-link:hover .gallery-image,
  .item-detail-tile-link:hover img {
    transform: none;
  }
}

.item-detail-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.item-detail-hero-body {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  padding: 1.25rem;
}

.item-detail-hero-body .title {
  margin: 0;
  overflow-wrap: anywhere;
}

.item-detail-hero-body .button-row {
  gap: 0.6rem;
}

.item-detail-inline-vote {
  margin: 0;
}

.item-detail-inline-vote .vote-inline-button {
  width: 32px;
  height: 32px;
  font-size: 0.95rem;
}

.item-detail-inline-vote .vote-inline-count {
  height: 32px;
  min-width: 52px;
  padding: 0 0.6rem;
  font-size: 0.88rem;
}

.item-detail-hero-overlay {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.item-detail-hero-overlay .item-rank {
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
}

.item-detail-hero-vote {
  background: rgba(23, 29, 43, 0.82);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(6px);
}

.item-detail-hero-vote .vote-inline-button,
.item-detail-hero-vote .vote-inline-count {
  color: #fff;
}

.item-detail-hero-vote .vote-inline-count {
  border-color: rgba(255, 255, 255, 0.16);
}

.item-detail-share-overlay {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(23, 29, 43, 0.82);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(6px);
  transition: background 0.15s ease, transform 0.15s ease;
}

.item-detail-share-overlay:hover {
  transform: scale(1.05);
}

/* QR code overlay — big enough for someone to scan across a table. */
.qr-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(9, 12, 20, 0.88);
  backdrop-filter: blur(4px);
}

.qr-overlay[hidden] {
  display: none;
}

body.qr-open {
  overflow: hidden;
}

.qr-panel {
  position: relative;
  width: min(92vw, 380px);
  padding: 1.75rem 1.5rem 1.4rem;
  border-radius: 22px;
  background: #ffffff;
  color: #111827;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.qr-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
}

.qr-close:hover {
  background: rgba(0, 0, 0, 0.06);
}

.qr-title {
  margin: 0 0 0.9rem;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 0 1.5rem;
}

/* The QR must stay pure black on white to scan reliably, so this panel keeps
   light colours in both themes rather than inheriting the dark surface. */
.qr-code {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  color: #6b7280;
  font-size: 0.9rem;
}

.qr-code svg {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
}

.qr-url {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  word-break: break-all;
  color: #374151;
}

.qr-hint {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: #6b7280;
}

.lightbox-overlay[hidden] {
  display: none;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background: rgba(9, 12, 20, 0.88);
  backdrop-filter: blur(4px);
}

body.lightbox-open {
  overflow: hidden;
}

.lightbox-image {
  max-width: min(92vw, 1100px);
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.lightbox-close {
  position: fixed;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}

.lightbox-close:hover {
  transform: scale(1.05);
}

.item-detail-tile {
  display: block;
  width: 100%;
  margin: 0 0 20px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--site-surface-soft);
  color: inherit;
  break-inside: avoid;
}

.item-detail-tile-media {
  position: relative;
}

.item-detail-tile-link {
  display: block;
  width: 100%;
}

.item-detail-tile img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 180ms ease;
}

/* Same subtle zoom the list-detail tiles use; the tile clips it via overflow. */
.item-detail-tile-link:hover img {
  transform: scale(1.02);
}

.item-detail-tile-vote {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  background: rgba(23, 29, 43, 0.82);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(6px);
}

.item-detail-tile-vote .gallery-tile-vote-button {
  color: #fff;
}

.item-detail-tile-vote .gallery-tile-vote-count {
  color: #fff;
}

.item-detail-tile-title {
  display: block;
  padding: 0.5rem 0.7rem 0.6rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--site-ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-popup {
  position: fixed;
  z-index: 120;
  width: min(340px, calc(100vw - 24px));
  padding: 1rem;
  border: 1px solid var(--site-border);
  border-radius: 18px;
  background: var(--site-surface);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.share-popup[hidden] {
  display: none;
}

.share-popup-title {
  margin: 0 0 0.85rem;
  text-align: center;
  font-weight: 800;
  color: var(--site-ink);
}

.share-popup-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
}

.share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.15rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--site-muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.share-option:hover {
  background: var(--site-overlay-hover);
}

.share-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--site-surface-soft);
  border: 1px solid var(--site-border);
  color: var(--site-ink);
}

.share-option-whatsapp .share-option-icon {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}

.share-option-facebook .share-option-icon {
  background: #1877f2;
  border-color: #1877f2;
  color: #fff;
}

.share-option-x .share-option-icon {
  background: #0f1419;
  border-color: #0f1419;
  color: #fff;
}

.share-option-label {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-popup-feedback {
  margin: 0.75rem 0 0;
  text-align: center;
  font-weight: 700;
  color: var(--site-success-ink);
}

.share-popup-feedback[hidden] {
  display: none;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 17, 27, 0.6);
  backdrop-filter: blur(6px);
}

.modal-panel {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 1.75rem;
  border-radius: 26px;
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.26);
}

.modal-title {
  margin: 0 0 0.35rem;
  padding-right: 2.5rem;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--site-border);
  background: var(--site-surface-soft);
  color: var(--site-ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

body.has-modal-open {
  overflow: hidden;
}

.save-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  width: 100%;
}

.save-form .select {
  flex: 1 1 220px;
}

.save-hint {
  width: 100%;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.option-card {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid var(--site-border);
  border-radius: 18px;
  background: var(--site-surface);
  cursor: pointer;
}

.option-card input[type="radio"] {
  width: auto;
  margin-top: 0.25rem;
}

.create-form {
  display: grid;
  gap: 1rem;
}

.upload-panel {
  padding: 1.25rem;
  border: 1px dashed var(--site-border);
  border-radius: 18px;
  background: var(--site-surface-soft);
}

.image-preview-frame {
  border: 1px solid var(--site-border);
  border-radius: 16px;
  min-height: 200px;
  padding: 0.9rem;
  background: var(--site-surface);
  display: grid;
  place-items: center;
}

.image-preview-frame.is-empty {
  background:
    linear-gradient(135deg, rgba(47, 111, 237, 0.04), rgba(15, 143, 111, 0.05)),
    var(--site-surface);
}

.image-preview {
  max-height: 360px;
  border-radius: 14px;
}

.cover-crop-editor {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.85rem;
}

.cover-crop-heading,
.cover-crop-controls,
.cover-crop-presets,
.cover-crop-arrows {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.cover-crop-heading,
.cover-crop-controls {
  justify-content: space-between;
}

.cover-crop-heading > div:first-child {
  display: grid;
  gap: 0.15rem;
}

.cover-crop-heading span,
.cover-crop-zoom span {
  color: var(--site-muted);
  font-size: 0.84rem;
}

.cover-crop-canvas-frame {
  position: relative;
  overflow: hidden;
  background: var(--site-surface-soft);
  border: 1px solid var(--site-border);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.cover-crop-canvas-frame canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  cursor: grab;
  touch-action: none;
}

.cover-crop-canvas-frame canvas.is-dragging {
  cursor: grabbing;
}

.cover-crop-canvas-frame > span {
  position: absolute;
  right: 0.75rem;
  bottom: 0.65rem;
  padding: 0.35rem 0.55rem;
  color: #fff;
  background: rgba(15, 23, 42, 0.72);
  border-radius: 9px;
  font-size: 0.74rem;
  pointer-events: none;
}

.cover-crop-arrows button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--site-ink);
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  border-radius: 10px;
  cursor: pointer;
}

.cover-crop-arrows button:hover {
  border-color: var(--site-border-strong);
}

.cover-crop-zoom {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: min(100%, 320px);
}

.cover-crop-zoom input {
  width: 100%;
  accent-color: var(--site-accent);
}

.error-banner,
.success-banner {
  border-radius: 14px;
  padding: 0.9rem 1rem;
  font-weight: 700;
}

.error-banner {
  background: var(--site-warning-soft);
  border: 1px solid var(--site-warning-border);
  color: var(--site-warning-ink);
}

.success-banner {
  background: var(--site-success-bg);
  border: 1px solid var(--site-success-border);
  color: var(--site-success-ink);
}

.profile-empty-state {
  display: grid;
  place-items: center;
  min-height: 180px;
  text-align: center;
}

.site-footer {
  margin-top: 3rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--site-border);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer-tagline {
  color: var(--site-muted);
  font-size: 0.95rem;
  margin: 0.35rem 0 0;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer-links a {
  color: var(--site-ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
}

.footer-links a:hover {
  color: var(--site-primary);
}

.footer-bottom {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--site-border);
}

.footer-copy {
  color: var(--site-muted);
  font-size: 0.95rem;
}

.footer-note {
  margin-top: 0.35rem;
  font-size: 0.85rem;
}

.footer-note a {
  color: var(--site-primary);
}

.legal-content h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 1.75rem 0 0.5rem;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p {
  color: var(--site-ink);
  line-height: 1.7;
  margin: 0 0 0.75rem;
}

.legal-content a {
  color: var(--site-primary);
}

.created-lists {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.created-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--site-border);
  border-radius: 14px;
  background: var(--site-surface-soft);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.created-list-row:hover {
  border-color: var(--site-primary);
  transform: translateY(-1px);
}

.created-list-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  /* Absorb the row's leftover width. Without this, space-between distributes the
     slack as a gap between the thumbnail and the title whenever the text is
     short, so rows looked inconsistently spaced. */
  flex: 1;
}

.created-list-title {
  font-weight: 700;
}

.created-list-desc {
  color: var(--site-muted);
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.created-list-meta {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.created-lists-empty {
  margin: 0;
}

/* Upvotes page: lists with their upvoted items nested underneath. */
.upvote-groups {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.upvote-group.is-orphan {
  /* Items whose list was not upvoted sit indented under a lighter heading. */
  padding-left: 1.1rem;
  border-left: 2px solid var(--site-border);
}

.upvote-orphan-heading {
  margin: 0 0 0.4rem;
  color: var(--site-muted);
  font-size: 0.85rem;
}

.upvote-orphan-heading a {
  color: var(--site-ink);
  font-weight: 700;
  text-decoration: none;
}

.upvote-orphan-heading a:hover {
  color: var(--site-primary);
}

.upvote-thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--site-surface-soft);
}

.upvote-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upvote-list-row {
  gap: 0.85rem;
}

.upvote-items {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.45rem;
  padding-left: 1.6rem;
}

.upvote-item-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.6rem;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}

.upvote-item-row:hover {
  background: var(--site-surface-soft);
}

.upvote-item-title {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Icon-only nav item (upvoted lists) — keeps the same pill styling as the
   text nav buttons, just squared up around the arrow. */
/* Icon-only nav items (search, upvoted lists) — same pill styling as the text
   nav buttons, just squared up around the icon. */
.nav-upvotes-button,
.nav-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

.nav-upvotes-button svg,
.nav-search-toggle svg {
  display: block;
}

/* Save-to-list dropdown (item detail) */
.save-popup {
  position: fixed;
  z-index: 1000;
  width: min(320px, calc(100vw - 24px));
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid var(--site-border);
  background: var(--site-surface);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.24);
}

.save-popup[hidden] {
  display: none;
}

.save-popup-title {
  margin: 0 0 0.6rem;
  text-align: center;
  font-weight: 800;
}

.save-popup-search,
.save-popup-create-input {
  width: 100%;
  height: 40px;
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--site-border);
  background: var(--site-surface-soft);
  color: var(--site-ink);
  font-size: 0.95rem;
}

.save-popup-list {
  max-height: 240px;
  overflow-y: auto;
  margin: 0.6rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* These rules set display, which would otherwise beat the [hidden] attribute
   and leave filtered rows / the collapsed create form visible. */
.save-popup-row[hidden],
.save-popup-create-form[hidden] {
  display: none;
}

.save-popup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--site-ink);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.save-popup-row:hover:not(:disabled) {
  background: var(--site-surface-soft);
}

.save-popup-row.is-saved {
  color: var(--site-muted);
  cursor: default;
}

.save-popup-row-state {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--site-primary);
}

.save-popup-empty,
.save-popup-feedback {
  margin: 0.4rem 0;
  font-size: 0.85rem;
  color: var(--site-muted);
}

.save-popup-feedback.is-error {
  color: #c0392b;
}

.save-popup-create {
  border-top: 1px solid var(--site-border);
  padding-top: 0.6rem;
}

.save-popup-create-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--site-ink);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.save-popup-create-toggle:hover {
  background: var(--site-surface-soft);
}

.save-popup-create-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--site-surface-soft);
  font-size: 1.1rem;
  line-height: 1;
}

.save-popup-create-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.save-popup-create-submit {
  flex-shrink: 0;
}

/* "How it compares" list on the item detail page */
.item-compare {
  margin-top: 0.25rem;
}

.item-compare-heading {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 0.6rem;
}

.item-compare-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.item-compare-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--site-border);
  border-radius: 14px;
  background: var(--site-surface-soft);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.item-compare-row:hover {
  border-color: var(--site-primary);
}

.item-compare-rival {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.item-compare-thumb {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.item-compare-thumb-empty {
  background: var(--site-border);
}

.item-compare-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.item-compare-vs {
  font-weight: 700;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-compare-meta {
  color: var(--site-muted);
  font-size: 0.78rem;
}

.item-compare-score {
  flex-shrink: 0;
  text-align: right;
  font-size: 0.78rem;
  color: var(--site-muted);
}

.item-compare-score strong {
  display: block;
  font-size: 1rem;
  color: var(--site-ink);
}

.item-compare-score.is-winning strong {
  color: var(--site-primary);
}

.item-compare-score.is-pending {
  font-style: italic;
}

.is-hidden {
  display: none;
}

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

input[type="file"] {
  display: block;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 1215px) {
  .home-grid {
    --home-grid-columns: 2;
  }

  .item-detail-grid {
    --item-grid-columns: 3;
  }
}

@media (max-width: 1023px) {
  .gallery-grid {
    --gallery-grid-columns: 3;
  }

  .gallery-lightbox-panel {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 2rem);
  }

  .gallery-lightbox-image {
    max-height: 60vh;
  }
}

@media (max-width: 768px) {
  .site-main {
    padding-top: 1.35rem;
  }

  /* Bulma sets 2.5rem, which is oversized on a phone. Our stylesheet loads after
     Bulma, so this equal-specificity rule wins. */
  .title.is-2 {
    font-size: 2rem;
  }

  .item-detail-grid {
    --item-grid-columns: 2;
  }

  .site-nav {
    flex-wrap: wrap;
    padding: 1rem 0;
  }

  /* Neither the header nor the footer container has horizontal padding of its
     own, so on a phone their contents sat flush against the screen edges. Match
     the page gutter (the section's 1.5rem) so everything lines up. */
  .site-header > .container,
  .site-footer > .container {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
  }

  /* --- App-style list page ------------------------------------------------
     Full-bleed cover at the very top with the back arrow over it, then the
     actions, then title and description. The header is hidden so the image can
     start at the top of the viewport. */
  /* Detail screens drop the header on mobile and rely on their overlaid back
     arrow, the way a native app's detail view does. */
  body.page-list-detail .site-header,
  body.page-item-detail .site-header {
    display: none;
  }

  body.page-list-detail .site-main,
  body.page-item-detail .site-main {
    padding-top: 0;
  }

  /* Break ONLY the hero out of the page gutter so the main image runs edge to
     edge; the masonry tiles below and the footer keep their normal spacing.
     `100%` resolves against the grid (the masonry makes it position: relative),
     so adding back the section's gutter on each side lands exactly on the
     viewport edges — no viewport units, which misreport under mobile emulation.
     !important is needed because the masonry sets an inline pixel width; it
     measures the rendered height afterwards, so column stacking stays correct. */
  body.page-item-detail .item-detail-hero-card {
    width: calc(100% + var(--page-gutter) * 2) !important;
    max-width: none;
    /* !important on both: the masonry sets an inline pixel width, and its
       `.item-detail-grid.is-js-masonry > .item-detail-hero-card { margin: 0 }`
       rule is more specific than this one. */
    margin-left: calc(var(--page-gutter) * -1) !important;
    border-radius: 0;
  }

  /* Flatten the hero: `display: contents` promotes the copy wrapper's children
     into the flex container so the media and the copy's parts become siblings
     that can be ordered. The wrapper is a plain non-semantic div, so this does
     not affect the accessibility tree. */
  body.page-list-detail .detail-hero-grid {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  body.page-list-detail .detail-hero-copy {
    display: contents;
  }

  /* "Add To This List" becomes a floating + button pinned bottom-right. The
     label is kept in the DOM but visually hidden, so the button still has its
     real accessible name instead of relying on a bare "+". z-index sits below
     .modal-overlay (95) so the add-item modal covers it when open. */
  body.page-list-detail .add-item-trigger {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 40;
    width: 58px;
    height: 58px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.38);
  }

  body.page-list-detail .add-item-trigger .add-item-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  body.page-list-detail .add-item-trigger::before {
    content: "+";
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
  }

  body.page-list-detail .detail-hero-media-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--site-surface-soft);
  }

  body.page-list-detail .detail-hero-media {
    order: 1;
    /* Break out of the padded container to run edge to edge. Scoped to mobile,
       where there is no scrollbar to make 100vw overshoot. */
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    height: 260px;
    border-radius: 0;
  }

  body.page-list-detail .post-actions {
    order: 2;
  }

  body.page-list-detail .detail-title-row {
    order: 3;
    margin-bottom: 0;
  }

  body.page-list-detail .detail-hero-description {
    order: 4;
    /* Bulma's .subtitle carries a 1.5rem bottom margin which, stacked on the
       badge's own top margin, made this gap noticeably bigger than the rest.
       Use the same 1.2rem the actions row uses so description -> author matches
       the actions -> title spacing. */
    margin-bottom: 1.2rem;
  }

  body.page-list-detail .detail-user-badge {
    order: 5;
    margin-top: 0;
  }

  /* Lift the back arrow out of the title row and onto the image. Taking it out
     of flow is also what stops it squeezing the title onto extra lines. */
  /* --- Auto-hiding app bar (list screen) ---------------------------------
     Back and Share are pinned to the top of the viewport as a matching pair of
     round buttons floating over the content. They are positioned with CSS
     rather than moved into a new toolbar element, so the existing delegated
     back-link and share handlers keep working on the same nodes.
     app-bar.js toggles .app-bar-hidden on <body> from the scroll direction. */
  body.page-list-detail .detail-title-row .back-pill,
  body.page-list-detail .post-actions [data-share] {
    position: fixed;
    top: 9px;
    z-index: 50;
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 999px;
    background: rgba(23, 29, 43, 0.82);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(6px);
    transition: transform 220ms ease, opacity 180ms ease;
  }

  /* Scrim behind the app bar so the buttons stay legible over busy photos once
     the user has scrolled into the grid. It is absent at the top of the page,
     where the buttons sit on the hero and a band would just obscure the cover
     image. A body pseudo-element avoids adding markup for a purely decorative
     layer. Rides just under the buttons (50) and above the FAB (40). */
  body.page-list-detail::before,
  body.page-item-detail::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    z-index: 49;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms ease;
    /* Page background rather than the surface colour, so the buttons — which
       use the surface tint — stay distinguishable against it in dark mode. */
    background: var(--site-bg);
    border-bottom: 1px solid var(--site-border);
  }

  /* Only while the bar is actually on screen and away from the top. */
  body.page-list-detail.app-bar-scrolled:not(.app-bar-hidden)::before,
  body.page-item-detail.app-bar-scrolled:not(.app-bar-hidden)::before {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    body.page-list-detail::before,
    body.page-item-detail::before {
      transition: none;
    }
  }

  body.page-list-detail .detail-title-row .back-pill {
    left: var(--page-gutter);
  }

  body.page-list-detail .post-actions [data-share] {
    right: var(--page-gutter);
  }

  body.page-list-detail .post-actions [data-share] .action-pill-label {
    display: none;
  }

  body.page-list-detail .post-actions [data-share] .action-pill-icon {
    display: block;
  }

  body.page-list-detail .detail-title-row .back-pill svg,
  body.page-list-detail .post-actions [data-share] svg {
    width: 17px;
    height: 17px;
  }

  /* Item screen: same bar, with the existing back arrow on the left and the
     save / QR / fullscreen cluster on the right. Pinning the cluster's flex
     container keeps the three buttons grouped and evenly spaced. */
  body.page-item-detail .item-detail-back,
  body.page-item-detail .item-detail-top-actions {
    position: fixed;
    top: 9px;
    z-index: 50;
    transition: transform 220ms ease, opacity 180ms ease;
  }

  body.page-item-detail .item-detail-back {
    left: var(--page-gutter);
    width: 38px;
    height: 38px;
  }

  body.page-item-detail .item-detail-top-actions {
    right: var(--page-gutter);
    gap: 0.4rem;
  }

  body.page-item-detail .item-detail-save,
  body.page-item-detail .item-detail-fullscreen {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }

  /* Icon-only in the bar; the accessible name comes from aria-label. */
  body.page-item-detail .item-detail-save-label {
    display: none;
  }

  body.page-item-detail .item-detail-back svg,
  body.page-item-detail .item-detail-save svg,
  body.page-item-detail .item-detail-fullscreen svg {
    width: 17px;
    height: 17px;
  }

  /* Scrolled down: slide the controls off the top edge. */
  body.page-list-detail.app-bar-hidden .detail-title-row .back-pill,
  body.page-list-detail.app-bar-hidden .post-actions [data-share],
  body.page-item-detail.app-bar-hidden .item-detail-back,
  body.page-item-detail.app-bar-hidden .item-detail-top-actions {
    transform: translateY(-170%);
    opacity: 0;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    body.page-list-detail .detail-title-row .back-pill,
    body.page-list-detail .post-actions [data-share] {
      transition: none;
    }
  }

  .nav-menu-toggle {
    display: inline-flex;
  }

  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .nav-links.is-open {
    display: flex;
  }

  .header-search-row {
    flex-direction: column;
  }

  .detail-title-row {
    align-items: flex-start;
  }

  .detail-hero-grid,
  .detail-hero-grid.has-media {
    grid-template-columns: 1fr;
  }

  .detail-hero-media {
    max-width: 100%;
    height: 160px;
    min-height: 0;
    justify-self: start;
  }

  .item-card {
    grid-template-columns: 1fr;
  }

  .home-grid {
    --home-grid-columns: 1;
  }

  .comparison-directory-grid {
    --comparison-grid-columns: 1;
    column-count: 1;
  }

  .item-image {
    min-height: 220px;
  }

  .item-video {
    min-height: 220px;
  }

  .gallery-grid {
    --gallery-grid-columns: 2;
  }

  .gallery-lightbox {
    padding: 0.75rem;
  }

  .gallery-lightbox-panel {
    padding: 0.9rem;
    gap: 0.9rem;
    border-radius: 22px;
  }

  .gallery-tile-link,
  .gallery-image {
    border-radius: 18px;
  }
}

@media (max-width: 520px) {
  .gallery-grid {
    --gallery-grid-columns: 1;
  }

  .cover-crop-heading,
  .cover-crop-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .cover-crop-presets,
  .cover-crop-arrows {
    flex-wrap: wrap;
  }

  .cover-crop-zoom {
    min-width: 0;
  }
}

.compare-directory-heading {
  align-items: end;
  margin-bottom: 1.5rem;
}

.comparison-directory-grid {
  --comparison-grid-columns: 2;
  column-count: 2;
  column-gap: 1.25rem;
}

.comparison-directory-grid.is-js-masonry {
  position: relative;
  column-count: initial;
  column-gap: 0;
}

.comparison-directory-grid.is-js-masonry > .comparison-preview-card {
  position: absolute;
  margin: 0;
  transition: transform 180ms ease;
}

.comparison-preview-card {
  display: inline-block;
  width: 100%;
  padding: 1.15rem;
  margin: 0 0 1.25rem;
  color: var(--site-ink);
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  border-radius: 24px;
  box-shadow: var(--site-shadow);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  transition: border-color 160ms ease;
}

.comparison-directory-grid:not(.is-js-masonry) .comparison-preview-card:hover {
  color: var(--site-ink);
  border-color: var(--site-border-strong);
  transform: translateY(-3px);
}

.comparison-directory-grid.is-js-masonry .comparison-preview-card:hover {
  border-color: var(--site-border-strong);
}

.comparison-preview-items {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
}

.comparison-preview-items > div {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
}

.comparison-preview-items > div:last-child {
  text-align: right;
}

.comparison-preview-items img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.comparison-preview-items strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-vs-mark,
.comparison-vs-divider {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--site-warning-ink);
  background: var(--site-warning-soft);
  border: 1px solid var(--site-warning-border);
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.comparison-preview-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  color: var(--site-muted);
  border-top: 1px solid var(--site-border);
  font-size: 0.9rem;
}

.comparison-create-hero {
  margin-bottom: 1.25rem;
}

.comparison-picker-form {
  width: min(100%, 920px);
  margin-inline: auto;
}

.comparison-picker-steps {
  display: grid;
  gap: 1.25rem;
}

.comparison-picker-step {
  padding: 1.25rem;
  background: var(--site-surface-soft);
  border: 1px solid var(--site-border);
  border-radius: 20px;
}

.comparison-picker-step-heading {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.comparison-picker-step-heading h2,
.comparison-picker-step-heading p {
  margin: 0;
}

.comparison-picker-step-heading h2 {
  font-size: 1.3rem;
}

.comparison-step-number {
  flex: 0 0 auto;
  padding: 0.35rem 0.6rem;
  color: var(--site-success-ink);
  background: var(--site-success-bg);
  border: 1px solid var(--site-success-border);
  border-radius: 9px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.comparison-picker-search > .label {
  margin-bottom: 0.45rem;
}

.comparison-search-control .input {
  width: 100%;
}

.comparison-picker-status {
  min-height: 1.4em;
  margin: 0.5rem 0 0;
}

.comparison-search-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  max-height: 430px;
  margin-top: 0.75rem;
  overflow-y: auto;
}

.comparison-search-result {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  padding: 0.6rem;
  color: var(--site-ink);
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
}

.comparison-search-result:hover,
.comparison-search-result:focus-visible {
  border-color: var(--site-success-border);
  box-shadow: 0 0 0 3px rgba(23, 107, 89, 0.1);
}

.comparison-result-media,
.comparison-selected-media {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--site-muted);
  background: var(--site-surface-soft);
  border-radius: 10px;
  font-weight: 800;
}

.comparison-result-media {
  width: 72px;
  height: 60px;
}

.comparison-result-media img,
.comparison-selected-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comparison-result-copy,
.comparison-selected-copy {
  display: grid;
  min-width: 0;
}

.comparison-result-copy strong,
.comparison-result-copy span,
.comparison-selected-copy strong,
.comparison-selected-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-result-copy span {
  color: var(--site-muted);
  font-size: 0.82rem;
}

.comparison-selected-item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem;
  background: var(--site-surface);
  border: 1px solid var(--site-success-border);
  border-radius: 16px;
}

.comparison-selected-media {
  width: 104px;
  height: 78px;
}

.comparison-selected-copy strong {
  font-size: 1.15rem;
}

.comparison-picker-step[hidden],
.comparison-picker-search[hidden],
.comparison-search-results[hidden],
.comparison-selected-item[hidden],
.comparison-create-actions[hidden] {
  display: none;
}

.comparison-create-actions {
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.comparison-hero {
  position: relative;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--site-border);
  border-radius: 28px;
  box-shadow: var(--site-shadow);
}

:root[data-theme="dark"] .comparison-hero {
  background: rgba(23, 29, 43, 0.72);
}

.comparison-hero > .back-pill {
  position: static;
  margin-bottom: 0.75rem;
}

.comparison-identity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.comparison-identity {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  min-height: 170px;
  padding: 1rem;
  background: var(--site-surface-soft);
  border-radius: 20px;
}

.comparison-identity-right {
  grid-template-columns: minmax(0, 1fr) 150px;
  text-align: right;
}

.comparison-identity img {
  width: 150px;
  height: 138px;
  object-fit: cover;
  border-radius: 16px;
}

.comparison-identity h1 {
  margin: 0.25rem 0;
  font-family: "Fraunces", serif;
  font-size: clamp(1.55rem, 2.4vw, 2.35rem);
  line-height: 1.05;
}

.comparison-identity p {
  margin: 0;
  color: var(--site-muted);
}

.comparison-scoreboard {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.75rem;
  text-align: center;
}

.comparison-scoreboard strong {
  font-size: 1.55rem;
}

.comparison-scoreboard small,
.comparison-scoreboard > span:last-child {
  color: var(--site-muted);
  font-size: 0.78rem;
}

.comparison-creator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.8rem;
  color: var(--site-muted);
  font-size: 0.85rem;
}

.comparison-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 1.5rem;
  align-items: start;
}

.comparison-criteria-heading {
  margin-bottom: 1rem;
}

.comparison-criteria-list {
  display: grid;
  gap: 1rem;
}

.comparison-criterion-card {
  padding: 1.15rem;
  background: var(--site-surface);
  border: 1px solid var(--site-border);
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

.comparison-criterion-card > header,
.comparison-criterion-card > footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.comparison-criterion-card > header > div {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.comparison-criterion-card h3 {
  margin: 0;
  font-size: 1.35rem;
}

.criterion-rank,
.criterion-participation,
.comparison-criterion-card > footer {
  color: var(--site-muted);
  font-size: 0.82rem;
}

.criterion-choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
  align-items: stretch;
  gap: 0.45rem;
  margin: 1rem 0 0.75rem;
}

.criterion-choice {
  display: grid;
  gap: 0.35rem;
  min-height: 116px;
  padding: 1rem;
  color: var(--site-ink);
  background: var(--site-surface-soft);
  border: 1px solid var(--site-border);
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
}

.criterion-choice-right {
  text-align: right;
}

.criterion-choice:hover,
.criterion-choice.is-selected {
  background: var(--site-success-bg);
  border-color: var(--site-success-border);
}

.criterion-choice > span,
.criterion-choice small {
  color: var(--site-muted);
  font-size: 0.78rem;
}

.criterion-choice strong {
  align-self: center;
  font-size: 1.08rem;
}

.criterion-choice-divider {
  display: grid;
  place-items: center;
  color: var(--site-muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.criterion-result-track {
  height: 7px;
  margin-bottom: 0.85rem;
  overflow: hidden;
  background: var(--site-border);
  border-radius: 999px;
}

.criterion-result-track span {
  display: block;
  height: 100%;
  background: var(--site-accent);
  transition: width 220ms ease;
}

.comparison-criterion-card > footer {
  justify-content: flex-start;
}

.comparison-criterion-card > footer > *:last-child:not(:first-child) {
  margin-left: auto;
}

.comparison-contribute-panel {
  position: sticky;
  top: 112px;
}

.comparison-contribute-card .create-form {
  margin-top: 1rem;
}

@media (max-width: 1023px) {
  .comparison-identity-grid {
    grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr);
  }

  .comparison-identity,
  .comparison-identity-right {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .comparison-identity-right img {
    grid-row: 1;
  }

  .comparison-identity img {
    justify-self: center;
  }

  .comparison-content-grid {
    grid-template-columns: 1fr;
  }

  .comparison-contribute-panel {
    position: static;
  }
}

@media (max-width: 700px) {
  .comparison-search-results {
    grid-template-columns: 1fr;
  }

  .comparison-selected-item {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .comparison-selected-media {
    width: 76px;
    height: 64px;
  }

  .comparison-selected-item .button {
    grid-column: 1 / -1;
  }

  .comparison-identity-grid {
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
    gap: 0.4rem;
  }

  .comparison-identity {
    min-height: 0;
    padding: 0.65rem;
  }

  .comparison-identity img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .comparison-identity h1 {
    font-size: 1.15rem;
  }

  .comparison-identity p,
  .comparison-identity .eyebrow {
    display: none;
  }

  .comparison-scoreboard strong,
  .comparison-scoreboard > span:last-child {
    display: none;
  }

  .comparison-creator {
    flex-wrap: wrap;
  }

  .criterion-choice-grid {
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  }

  .criterion-choice {
    min-height: 130px;
    padding: 0.75rem;
  }
}

/* PWA install banner. Sits above the mobile add-item FAB (z-index 40) but below
   the modal overlay (95) so an open dialog is never obscured. */
.pwa-install-banner {
  position: fixed;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.85rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: 18px;
  border: 1px solid var(--site-border);
  background: var(--site-surface);
  box-shadow: var(--site-shadow-hover);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}

.pwa-install-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.pwa-install-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex: 0 0 auto;
}

.pwa-install-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}

.pwa-install-copy strong {
  font-size: 0.95rem;
  color: var(--site-ink);
}

.pwa-install-copy span {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--site-muted);
}

.pwa-install-accept {
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: var(--site-primary);
  border: 0;
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  cursor: pointer;
}

.pwa-install-dismiss {
  flex: 0 0 auto;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--site-muted);
  background: transparent;
  border: 0;
  padding: 0 0.15rem;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .pwa-install-banner {
    transition: none;
  }
}

@media (max-width: 768px) {
  /* The install banner is fixed to the bottom edge, right where the add-item FAB
     lives. Lift the button above it for as long as the banner is on screen. */
  body.has-install-banner .add-item-trigger {
    bottom: 7.2rem;
  }
}

/* Back-arrow icon: block so it centres cleanly as a flex item in the round
   button, with no inline baseline offset. pointer-events:none keeps the click
   target the <a> itself, so taps never resolve to the inner <path>. */
.back-pill svg,
.item-detail-back svg {
  display: block;
  pointer-events: none;
}

/* --- Mobile: give content the width back ---------------------------------
   On a phone the page gutter, the card padding and the upload panel's own
   padding stacked up to ~132px of the 412px viewport — a third of the screen
   spent on nested chrome. Narrow the gutter and flatten the nesting so the
   forms and grids read like an app screen rather than a boxed-in web page. */
@media (max-width: 768px) {
  :root {
    --page-gutter: 0.75rem;
  }

  .section-card {
    padding: 0.9rem;
    border-radius: 18px;
  }

  /* The upload panel is a bordered, tinted box sitting inside an already
     bordered card. On a phone that second frame costs 40px of width and adds
     nothing, so drop it and let the fields use the card's own padding. */
  .section-card .upload-panel,
  .modal-panel .upload-panel {
    padding: 0;
    /* The removed padding was also the only separation from the text above it. */
    margin-top: 0.9rem;
    border: 0;
    background: transparent;
  }

  .image-preview-frame {
    padding: 0.6rem;
    min-height: 150px;
  }

  /* Add-item dialog becomes a bottom sheet: full width, anchored to the bottom
     edge, rounded only at the top — the standard app pattern, and it stops the
     form from being squeezed into the middle of the screen. */
  .modal-overlay {
    padding: 0;
    place-items: end stretch;
  }

  .modal-panel {
    width: 100%;
    max-height: 92vh;
    padding: 1.15rem 0.9rem calc(1.15rem + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
  }
}