/* ---------- Colors ----------
   Every color lives in a variable, so light and dark mode only swap these.
   Dark mode applies when the device is set to dark (unless the visitor picked
   light with the header button), or when the visitor picked dark.
   js/theme.js sets data-theme on <html> when they pick. */
:root {
  color-scheme: light;
  --bg: #fafaf9;
  --text: #1c1917;
  --muted: #78716c;
  --card: #ffffff;
  --border: #e7e5e4;
  --focus: #2563eb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0c0a09;
    --text: #f5f5f4;
    --muted: #a8a29e;
    --card: #1c1917;
    --border: #292524;
    --focus: #60a5fa;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0a09;
  --text: #f5f5f4;
  --muted: #a8a29e;
  --card: #1c1917;
  --border: #292524;
  --focus: #60a5fa;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
/* "hidden" always wins, even over layout rules like display: flex below. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

a { color: inherit; }

/* A clear outline for keyboard users, so they always see where they are. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Hidden on screen but still read by screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.status { color: var(--muted); }

/* ---------- Header ---------- */
.site-header {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
}
.site-name {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* ---------- Home: grid of set cards ---------- */
/* auto-fill + minmax: as many 280 px columns as fit, so it works on any screen. */
.set-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 20px;
}
/* Each card is one big cover photo. The title, date, and photo count sit on a
   dark fade at the bottom, so they read well on any photo. */
.set-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: #fff;
  background: var(--card);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.set-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop to fill the box instead of stretching */
  transition: transform 0.6s ease;
}
.set-card:hover img { transform: scale(1.03); }
.set-card-text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 48px 20px 18px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
}
.set-card h2 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.set-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 4px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}
/* A set without photos: no picture, so plain text on the card color. */
.set-card.no-cover { border: 1px solid var(--border); color: var(--text); }
.set-card.no-cover .set-card-text { background: none; }
.set-card.no-cover h2 { text-shadow: none; }
.set-card.no-cover .set-card-meta { color: var(--muted); }

/* ---------- Home: hero ---------- */
/* The featured photo across the top, with the tagline and a link on it. */
.hero {
  position: relative;
  height: min(72vh, 640px);
  min-height: 320px;
  margin: 0 0 32px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  color: #fff;
}
.hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 96px clamp(20px, 4vw, 48px) clamp(20px, 4vw, 40px);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}
.hero-tagline {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 4.5vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.hero-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}
.hero-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 600px) {
  .hero { height: 60vh; margin-bottom: 24px; border-radius: 8px; }
}

/* ---------- Set page ---------- */
.back-link {
  color: var(--muted);
  font-size: 0.9rem;
}
.set-description {
  color: var(--muted);
  max-width: 65ch;
  white-space: pre-line; /* keep the line breaks you typed */
}

/* Justified rows: every photo in a row gets the same height, and each keeps
   its own shape (portrait stays tall, landscape stays wide).

   The shape comes from --ratio (width / height), which set.js copies from the
   database. Because the space for each photo is decided by that number alone,
   nothing moves when the images finish loading. (The previous CSS "columns"
   layout let the browser rebalance the columns as images arrived, which made
   photos jump between columns while scrolling.)

   How the trick works: each photo starts at a width proportional to its ratio
   (flex-basis) and grows by the same proportion (flex-grow). Growing every photo
   in a row by the same factor keeps their heights equal. */
.photo-grid {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  --row-height: 260px;
}
/* An invisible last item that soaks up the leftover space in the final row,
   so the last few photos are not stretched to fill the whole width. */
.photo-grid::after {
  content: "";
  flex-grow: 1000;
}
.photo-grid li {
  flex-grow: var(--ratio);
  flex-basis: calc(var(--ratio) * var(--row-height));
}
.photo-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio);
  object-fit: cover;
  border-radius: 4px;
  background: var(--border);
}
@media (max-width: 600px) {
  .photo-grid { --row-height: 160px; }
}

/* ---------- Admin ---------- */
.muted { color: var(--muted); }

button {
  font: inherit;
  padding: 10px 16px;
  border: 0;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  cursor: pointer;
}
button:disabled { opacity: 0.6; cursor: wait; }
.button-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

input {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
}

.login {
  max-width: 360px;
  padding-top: 15vh;
}
.card-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.form-error {
  margin: 0;
  min-height: 1.5em;
  color: #dc2626;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.admin-header nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-card {
  max-width: 480px;
  padding: 20px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.stat-card h2 { margin: 0 0 4px; font-size: 1rem; }
.meter {
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}
.meter-fill {
  width: 0;
  height: 100%;
  background: var(--focus);
}

.inline-form {
  display: flex;
  gap: 8px;
  max-width: 480px;
}
.inline-form input { flex: 1; min-width: 0; }

.admin-set-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-width: 480px;
}
.admin-set-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

/* ---------- Upload page ---------- */
.panel {
  margin: 0 0 24px;
  padding: 20px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.panel h2 { margin: 0 0 12px; font-size: 1rem; }
.panel > label:not(.drop-zone) { display: block; margin-bottom: 6px; }
.panel input[type="text"] { width: 100%; max-width: 360px; }
.panel > label.checkbox { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
input:disabled { opacity: 0.6; }

.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 40px 16px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
}
.drop-zone:hover,
.drop-zone.dragging { border-color: var(--focus); }
/* The file input itself is hidden, so show its focus ring on the box instead. */
.drop-zone:has(+ #file-input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

progress { width: 100%; height: 8px; }

.wm-preview { margin: 16px 0; }
.wm-preview img {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  border-radius: 4px;
}

.actions { display: flex; gap: 8px; margin: 16px 0; }

.queue {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.queue li { font-size: 0.85rem; }
.queue img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  background: var(--border);
}
.queue p { margin: 4px 0 0; overflow-wrap: anywhere; }
.queue-name { font-weight: 600; }
.queue li[data-status="error"] .queue-status { color: #dc2626; }
.queue li[data-status="done"] .queue-status { color: #16a34a; }


/* ---------- Deleting ---------- */
.button-danger {
  background: transparent;
  color: #dc2626;
  border: 1px solid currentColor;
  padding: 4px 10px;
  font-size: 0.85rem;
}
.button-danger:hover { background: #dc2626; color: #fff; }

.admin-set-list li { align-items: center; }
.admin-set-list a { flex: 1; }


.danger-zone {
  margin-top: 48px;
  padding: 20px 24px;
  border: 1px solid #dc2626;
  border-radius: 8px;
}
.danger-zone h2 { margin: 0 0 4px; font-size: 1rem; color: #dc2626; }

/* ---------- Tappable photos ---------- */
.thumb-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  cursor: zoom-in;
}
.thumb-button img { transition: opacity 0.15s; }
.thumb-button:hover img { opacity: 0.9; }

/* ---------- Full-screen viewer ---------- */
.no-scroll { overflow: hidden; }

.lightbox {
  /* <dialog> has a default box; make it cover the whole screen instead. */
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* "dynamic" height: correct on phones, where the address bar comes and goes */
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.94);
  color: #fff;
  /* Let our code see horizontal swipes, but keep two-finger pinch zoom working. */
  touch-action: pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.94); }

.lightbox-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Room for the counter at the top, without covering the photo. */
  padding: 48px 0;
}
/* "contain" = as big as possible while showing the whole photo. A portrait
   photo on a phone held upright fills the height; a landscape one fills the width. */
.lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  -webkit-touch-callout: none; /* no "Save Image" pop-up on long press in iOS Safari */
}

.lightbox-counter {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 14px 16px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}
.lightbox-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  text-align: center;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
}
.lightbox-info p { margin: 0; }
.lightbox-camera {
  margin-top: 2px !important;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
}

.lightbox-button {
  position: absolute;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}
.lightbox-button:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox-close { top: 4px; right: 8px; }
.lightbox-prev,
.lightbox-next { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }

/* On phones, swiping replaces the arrows, so they stop covering the photo. */
@media (hover: none) and (pointer: coarse) {
  .lightbox-prev,
  .lightbox-next { display: none; }
}

/* ---------- Managing sets and photos ---------- */
.small { font-size: 0.85rem; margin: 4px 0 12px; }

textarea {
  font: inherit;
  width: 100%;
  max-width: 560px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
}
.panel input[type="text"],
.panel textarea { margin-bottom: 12px; }
.slug-field { display: flex; align-items: baseline; gap: 4px; max-width: 360px; }
.slug-field input { flex: 1; min-width: 0; margin-bottom: 0 !important; }

.save-status { font-size: 0.85rem; color: #16a34a; }
.save-status[data-state="error"] { color: #dc2626; }
.actions .save-status { align-self: center; }

.icon-button {
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 1rem;
  line-height: 1;
}
.icon-button:hover { border-color: var(--text); }
.icon-button.active { color: #ca8a04; border-color: #ca8a04; }
.icon-button.danger { color: #dc2626; }
.icon-button.danger:hover { background: #dc2626; border-color: #dc2626; color: #fff; }

/* ---------- Drag to reorder (see js/sortable.js) ---------- */
.drag-handle,
.drag-surface {
  cursor: grab;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
/* "none": a finger on the handle drags the item instead of scrolling the page. */
.drag-handle { touch-action: none; color: var(--muted); font-size: 1.2rem; padding: 4px; }

/* Lets sortable.js read item positions relative to the list. */
.admin-set-list,
.photo-editor { position: relative; }

/* The empty slot that shows where the item will land. */
.drag-slot {
  outline: 2px dashed var(--focus);
  outline-offset: -2px;
  border-radius: 8px;
}
.drag-slot > * { visibility: hidden; }

/* The floating copy that follows the pointer. */
.drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  display: block !important;
  list-style: none;
  pointer-events: none; /* so we can see what is underneath it */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  background: var(--card);
  opacity: 0.95;
}
.drag-ghost > li { border-bottom: 0 !important; }
body.is-dragging,
body.is-dragging * { cursor: grabbing !important; user-select: none; }

.photo-grip {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}
.admin-set-list li { gap: 8px; }
.admin-set-list .muted { margin-right: 8px; }

.photo-editor {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.photo-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.photo-card.is-cover { border-color: #ca8a04; }
.photo-card-image { position: relative; }
.photo-card-image img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px;
  cursor: grab;
}
.cover-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #ca8a04;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}
.photo-card-field { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; color: var(--muted); }
.photo-card-field input { font-size: 0.9rem; padding: 6px 8px; }
.photo-card-tools { display: flex; gap: 6px; }
.photo-card-tools .danger { margin-left: auto; }

/* ---------- Storage by set ---------- */
.storage-details { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.storage-details summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.storage-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.storage-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  font-size: 0.9rem;
}
.storage-list a { overflow-wrap: anywhere; }
.storage-size { color: var(--muted); white-space: nowrap; }
.storage-list .meter { grid-column: 1 / -1; height: 6px; }

/* ---------- Footer ---------- */
.site-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 16px 48px;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}

/* ---------- Drafts ---------- */
.draft-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: middle;
}
.draft-banner {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fef3c7;
  color: #92400e;
}
.publish-panel .actions { align-items: center; margin-bottom: 0; }
.draft-badge.scheduled { background: #dbeafe; color: #1e40af; }
#set-title[data-state="scheduled"]::after {
  content: "Scheduled";
  margin-left: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1e40af;
  font-size: 0.9rem;
  vertical-align: middle;
}
.schedule-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.schedule-form label { display: block; margin-bottom: 6px; }
.schedule-form input[type="datetime-local"] { font: inherit; }
#set-title[data-state="draft"]::after {
  content: "Draft";
  margin-left: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.9rem;
  vertical-align: middle;
}

/* ---------- Not found page ---------- */
.not-found { text-align: center; padding-top: 10vh; min-height: 50vh; }
.not-found-code { font-size: 4rem; font-weight: 700; margin: 0; color: var(--border); }
.not-found h1 { margin-top: 0; }
.button-link {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
}

#queue-summary[data-state="error"] { color: #dc2626; font-weight: 600; }

/* ---------- Site navigation (Work / About) ---------- */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-nav { display: flex; gap: 20px; }
.site-nav a { text-decoration: none; color: var(--muted); }
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--text); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

/* ---------- About page ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding-top: 16px;
}
.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.about h1 { margin-top: 0; }
.about-bio { max-width: 62ch; }
.about-bio p { line-height: 1.7; }
.about h2 { font-size: 1.1rem; margin-top: 32px; }
.about-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.about-contact li { display: flex; gap: 12px; flex-wrap: wrap; }
.contact-label { min-width: 90px; color: var(--muted); }
/* The text-only layout when there is no portrait yet. */
.about:not(:has(.about-portrait)) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 700px) {
  .about { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ---------- Admin: About page editor ---------- */
.portrait-editor { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.portrait-editor img { width: 140px; height: 140px; object-fit: cover; border-radius: 8px; }
.portrait-editor .button-secondary { margin-left: 8px; }
.button-like {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  cursor: pointer;
}
.panel input[type="email"],
.panel input[type="url"] { width: 100%; max-width: 360px; margin-bottom: 12px; }
.panel h2 + label { margin-top: 0; }
.button-like:has(+ input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Home page tagline ---------- */
.site-tagline { margin: 0 0 24px; color: var(--muted); }

/* ---------- Categories (home page filter) ---------- */
.category-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.category-nav a {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.9rem;
}
.category-nav a:hover { color: var(--text); border-color: var(--text); }
.category-nav a[aria-current="page"] { background: var(--text); border-color: var(--text); color: var(--bg); }

/* ---------- Licensed downloads ---------- */
.license-panel {
  margin: 32px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: 560px;
}
.license-panel h2 { margin: 0 0 4px; font-size: 1rem; }
.license-panel.unlocked { border-color: #16a34a; }
.license-panel input { text-transform: uppercase; letter-spacing: 0.05em; }
.lightbox-download {
  position: absolute;
  top: 8px;
  right: 64px;
  padding: 12px 16px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.lightbox-download:hover { background: #e5e5e5; }

/* ---------- Admin: downloads and categories ---------- */
.download-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #16a34a;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}
.category-picker { border: 0; padding: 0; margin: 0 0 12px; }
.category-picker legend { margin-bottom: 6px; }
.category-picker .checkbox { display: inline-flex !important; margin: 0 16px 6px 0 !important; }
.admin-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 8px 0 0; padding: 0; }
.admin-tags li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.admin-tags button { width: 24px; height: 24px; padding: 0; border-radius: 50%; }
.license-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.9rem; }
.license-table th, .license-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.license-table code { font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; }
.license-table tr.is-off { opacity: 0.55; }
.license-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.license-actions button { padding: 4px 10px; font-size: 0.85rem; }
.set-checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; margin: 0 0 12px; }
.new-code { margin: 12px 0 0; padding: 12px 16px; border-radius: 8px; background: #dcfce7; color: #14532d; }
.new-code code { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.06em; }
@media (max-width: 700px) { .license-table .hide-small { display: none; } }
.panel input[type="date"],
.panel input[type="number"] { display: block; max-width: 220px; margin-bottom: 12px; }

/* ---------- Light / dark switch (see js/theme.js) ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.theme-toggle:hover { color: var(--text); border-color: var(--text); }
.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.theme-toggle .icon-moon { fill: currentColor; stroke: none; }
/* Show the moon in light mode (tap for dark), the sun in dark mode. */
.theme-toggle[data-showing="light"] .icon-sun,
.theme-toggle[data-showing="dark"] .icon-moon { display: none; }
.site-nav { align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .set-card img { transition: none; }
}

/* ---------- Admin: watermark style ---------- */
.wm-style { border: 0; padding: 0; margin: 0 0 12px; }
.wm-style legend { margin-bottom: 6px; }

/* ---------- Share buttons and menu (see js/share.js) ---------- */
.share-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.share-button:hover { border-color: var(--text); }
.share-button svg,
.share-item svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
/* The round icon-only version in the header, matching the light / dark switch. */
.share-button-icon {
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  color: var(--muted);
}
.share-button-icon:hover { color: var(--text); }

.set-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.set-heading h1 { margin-right: auto; }

.share-menu {
  position: absolute;
  z-index: 50;
  min-width: 200px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}
.share-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.share-item:hover,
.share-item:focus-visible { background: var(--border); outline: none; }

/* ---------- Admin: watermark toolkit ---------- */
.panel select {
  display: block;
  font: inherit;
  max-width: 360px;
  width: 100%;
  margin-bottom: 12px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
}
#tk-list .button-link { margin-top: 6px; padding: 6px 14px; font-size: 0.85rem; }

/* ---------- Upload page: duplicate warnings ---------- */
.queue-warning {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fef3c7;
  color: #78350f;
  font-size: 0.8rem;
}
.queue-warning[data-strength="weak"] { background: var(--border); color: var(--text); }
.queue-warning ul { margin: 4px 0 6px; padding-left: 18px; }
.queue-warning a { color: inherit; }
.queue-warning button { padding: 4px 10px; font-size: 0.8rem; }

/* ---------- Admin: activity log ---------- */
.activity-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.activity-filters button { padding: 6px 14px; font-size: 0.9rem; }
.activity-filters button[aria-pressed="false"] { background: transparent; color: var(--text); border: 1px solid var(--border); }
.activity-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.activity-table th,
.activity-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.activity-table th { color: var(--muted); font-weight: 500; }
.activity-table td:first-child { white-space: nowrap; color: var(--muted); }
.activity-group {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--border);
  font-size: 0.75rem;
  white-space: nowrap;
}
.activity-group[data-group="Deletion"] { background: #fee2e2; color: #991b1b; }
.activity-group[data-group="Download"] { background: #dcfce7; color: #166534; }
.activity-group[data-group="License"] { background: #ede9fe; color: #5b21b6; }
.activity-group[data-group="Publishing"] { background: #dbeafe; color: #1e40af; }
@media (max-width: 600px) {
  .activity-table thead { display: none; }
  .activity-table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .activity-table td { display: block; border: 0; padding: 2px 0; }
}

/* ---------- Set page: download all ---------- */
.license-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }

/* ---------- Hero choices, location, related sets ---------- */
.featured-badge { background: #ede9fe; color: #5b21b6; }
.month-boxes { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.month-boxes .checkbox { display: inline-flex !important; margin: 0 !important; }
.set-location { margin: -8px 0 8px; color: var(--muted); font-size: 0.95rem; }
.related-sets { margin: 56px 0 0; padding-top: 32px; border-top: 1px solid var(--border); }
.related-sets h2 { margin: 0 0 16px; font-size: 1.2rem; }
.related-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.related-grid .set-card h3 { margin: 0; font-size: 1.1rem; line-height: 1.25; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.related-grid .set-card-text { padding: 36px 16px 14px; }
#hero-mode .checkbox,
#hero-rotate-field .checkbox { display: flex; margin-bottom: 6px; }
section.panel[aria-labelledby="hero-heading"] { max-width: 720px; }

/* ---------- Photo protection (see js/protect.js) ----------
   iPhones and iPads ignore the script for long presses, so this does it:
   -webkit-touch-callout: none   no "Save to Photos / Copy / Share" pop-up
   user-select: none             a long press does not select the picture
   -webkit-user-drag: none       the picture cannot be dragged out (Safari)
   For pictures inside a link or button (grid thumbnails, cards), the picture
   also ignores touches entirely (pointer-events: none): a long press then
   lands on the button or link around it, which has no "Save Image" option.
   Tapping still works, because the tap reaches the button or link instead. */
main img,
.lightbox img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.thumb-button img,
.set-card img,
.hero img {
  pointer-events: none;
}
.thumb-button,
.set-card,
.hero {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}