/* Bricolage Grotesque — Stockholm Pride's display face, self-hosted.
   Variable weight axis 200–800; split into latin / latin-ext subsets so the
   Swedish å ä ö (latin) load without pulling the full glyph set. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/api/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/api/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --gap: 1rem;
  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Stockholm Pride 2026 palette — from the brand's "Färger 2026" guide.
     Only these colours plus pure white/black are on-brand ("endast dessa").
     --pride-green is the year colour (årsfärg 2026): the deliberate pop that
     sits outside the red↔purple base range. */
  --pride-green: #00fb75;
  --pride-lila: #9d00ff;
  --pride-lila-ljus: #ebccff;
  --pride-lila-mork: #270040;
  --pride-rod: #ff3c00;
  --pride-rod-ljus: #ffc4b2;
  --pride-svart: #1c1c1c;

  --bg: #fafafa;
  --fg: var(--pride-svart);
  --ink: var(--pride-lila-mork);   /* headings / display text */
  --muted: #6b6b72;
  --accent: var(--pride-lila);     /* interactive accent (links, focus) */
  --pop: var(--pride-green);       /* year-colour pop (CTAs, badges) */
  --border: #e6e2ea;
  --panel: #fff;
  --ok: #2e7d32;
  --fail: #c62828;
  --progress: #007acc;

  /* Let native controls (selects, inputs, scrollbars) follow the theme too. */
  color-scheme: light dark;
}

/* Dark mode — respect the visitor's OS preference, no switcher. The gradient
   hero and brand bar are unchanged; we only re-tone the light surfaces, text,
   and the few hardcoded neutral placeholders. Most of it rides on the tokens. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #150b1f;            /* near-black, mörklila-tinted */
    --fg: #ece7f2;
    --ink: #f4eefb;           /* headings/display text (light) */
    --muted: #a99fb5;
    --accent: #c98cff;        /* lighter lila so links/focus read on dark */
    --border: #372a4a;
    --panel: #21142f;         /* cards & forms sit just above --bg */
    --ok: #66bb6a;
    --fail: #ef5350;
    --progress: #5aa9e6;
  }
  /* Component-level overrides for hardcoded light neutrals live at the END of
     this file — a media query adds no specificity, so they must come *after*
     the rules they override in source order to win. */
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
}

/* Shared page shell (all pages) */
main { max-width: 960px; margin: 2rem auto; padding: 0 var(--gap); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }
h1 { font-size: 1.75rem; margin: 0 0 var(--gap); }
h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.empty {
  text-align: center;
  padding: 4rem 0;
  color: var(--muted);
}

/* Forms and panels (upload, manage) */
form.settings, .panel {
  display: grid;
  gap: 0.75rem;
  padding: var(--gap);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: var(--gap);
}
form.settings label, .panel label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}
form.settings input, form.settings select,
.panel input, .panel textarea {
  padding: 0.5rem 0.6rem;
  font-size: 1rem;
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  font-family: inherit;
}
form.settings input:focus, form.settings select:focus,
.panel input:focus, .panel textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: transparent;
}
.actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.error {
  font-size: 0.85rem;
  color: var(--fail);
  min-height: 1.2em;
}
.thumb {
  width: 64px;
  height: 64px;
  background: #eee;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: #999;
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.name {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
button {
  padding: 0.4rem 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 4px;
  cursor: pointer;
  color: var(--fg);
}
button:hover { background: #f0f0f0; }
button.primary {
  background: var(--pop);
  color: var(--pride-lila-mork);
  border-color: var(--pop);
}
button.primary:hover { filter: brightness(0.95); background: var(--pop); }
/* In-flight "Saving…" state: muted year-colour + inline spinner. */
button.primary.is-saving {
  background: #9be7be;
  border-color: #9be7be;
  color: var(--pride-lila-mork);
  cursor: default;
}
button.primary.is-saving::before {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.45em;
  vertical-align: -0.1em;
  border: 2px solid rgba(39, 0, 64, 0.25);
  border-top-color: var(--pride-lila-mork);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Edit photo modal — photographer + focal-point picker (upload, manage) */
#edit-modal {
  border: none;
  border-radius: 8px;
  padding: 0;
  max-width: min(90vw, 640px);
  background: var(--panel);
  color: var(--fg);
}
#edit-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.edit-body {
  display: grid;
  gap: 0.75rem;
  padding: var(--gap);
}
.edit-photographer-label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.edit-photographer-label input {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}
.edit-photographer-label input:focus {
  outline: none;
  border-color: var(--accent);
}
.focal-hint {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}
.focal-frame {
  position: relative;
  cursor: crosshair;
  line-height: 0;
  background: #eee;
}
.focal-frame img {
  width: 100%;
  height: auto;
  display: block;
}
.focal-marker {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 2px white, 0 0 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  display: none;
}
.edit-error {
  font-size: 0.85rem;
  color: var(--fail);
  min-height: 1.2em;
}

/* ============================================================
   Index page — Stockholm Pride 2026 branded gallery
   ============================================================ */

/* Full-bleed hero: the poster gradient (mörklila → lila → coral) with a soft
   translucent "stjärna" glowing behind the wordmark and "wiggly" confetti. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  text-align: center;
  padding: calc(clamp(3.5rem, 9vw, 6.5rem) + env(safe-area-inset-top)) 1.25rem clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(120% 140% at 82% 4%, rgba(255, 60, 0, 0.55) 0%, rgba(255, 60, 0, 0) 46%),
    linear-gradient(135deg, #270040 0%, #4a0b86 30%, #9d00ff 58%, #c21c86 80%, #ff5a2a 100%);
}
.hero-inner { position: relative; z-index: 2; }

/* Glowing star behind the wordmark */
.hero .starburst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(680px, 118%);
  height: auto;
  transform: translate(-50%, -54%);
  z-index: 0;
  fill: #fff;
  opacity: 0.12;
  filter: blur(2px);
}

/* Wiggly confetti — the parade symbol raining down the hero. Each piece falls
   with its own speed/drift/delay; per the brand rule the angle never changes
   (no rotation — only a gentle horizontal sway), keeping them in unison. The
   hero's `overflow: hidden` clips them as they leave the bottom edge. */
.hero .wiggly {
  position: absolute;
  top: 0;
  /* Default (small) layer: BEHIND the wordmark (.hero-inner is z-index 2) with
     a touch of blur, so the little pieces read as the far/background layer. */
  z-index: 1;
  height: auto;
  fill: var(--pop);
  pointer-events: none;
  filter: blur(0.4px);
  will-change: transform, opacity;
  animation: confetti-fall var(--dur, 9s) linear var(--delay, 0s) infinite;
}
/* The larger pieces are the near layer: they fall in FRONT of the wordmark
   (and already fall faster), with a crisp drop-shadow that both lifts them off
   the text and stops a green piece melting into the green "2026"/"GALLERY". */
.hero .w1,
.hero .w4,
.hero .w7,
.hero .w10,
.hero .w13 {
  z-index: 3;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
@keyframes confetti-fall {
  0%   { transform: translate3d(0, -25vh, 0); opacity: 0; }
  8%   { opacity: var(--o, 0.9); }
  50%  { transform: translate3d(var(--drift, 12px), 40vh, 0); }
  92%  { opacity: var(--o, 0.9); }
  100% { transform: translate3d(0, 115vh, 0); opacity: 0; }
}
.hero .w1 { left: 7%;  width: 42px; --dur: 8s;   --delay: -1s;  --drift: 14px;  --o: 0.9; }
.hero .w2 { left: 21%; width: 30px; --dur: 11s;  --delay: -6s;  --drift: -12px; --o: 0.75; fill: var(--pride-lila-ljus); }
.hero .w3 { left: 34%; width: 34px; --dur: 9.5s; --delay: -3s;  --drift: 10px;  --o: 0.85; fill: var(--pride-rod-ljus); }
.hero .w4 { left: 48%; width: 48px; --dur: 7.5s; --delay: -5s;  --drift: -16px; --o: 0.95; }
.hero .w5 { left: 61%; width: 22px; --dur: 12s;  --delay: -2s;  --drift: 12px;  --o: 0.5;  fill: #fff; }
.hero .w6 { left: 73%; width: 26px; --dur: 10s;  --delay: -8s;  --drift: -10px; --o: 0.6;  fill: var(--pride-lila-ljus); }
.hero .w7 { left: 85%; width: 38px; --dur: 8.5s; --delay: -4s;  --drift: 16px;  --o: 0.85; }
.hero .w8 { left: 94%; width: 24px; --dur: 11.5s;--delay: -9s;  --drift: -8px;  --o: 0.6;  fill: var(--pride-rod-ljus); }
.hero .w9 { left: 15%; width: 20px; --dur: 13s;  --delay: -11s; --drift: 10px;  --o: 0.5;  fill: #fff; }
.hero .w10 { left: 28%; width: 36px; --dur: 8.8s; --delay: -7s;  --drift: -14px; --o: 0.9;  }
.hero .w11 { left: 42%; width: 22px; --dur: 12.5s;--delay: -2.5s;--drift: 12px;  --o: 0.6;  fill: var(--pride-lila-ljus); }
.hero .w12 { left: 55%; width: 30px; --dur: 9s;   --delay: -10s; --drift: -10px; --o: 0.8;  fill: var(--pride-rod-ljus); }
.hero .w13 { left: 67%; width: 40px; --dur: 7.8s; --delay: -5.5s;--drift: 14px;  --o: 0.9;  }
.hero .w14 { left: 78%; width: 20px; --dur: 13.5s;--delay: -3.5s;--drift: -12px; --o: 0.5;  fill: #fff; }
.hero .w15 { left: 4%;  width: 28px; --dur: 10.5s;--delay: -12s; --drift: 10px;  --o: 0.7;  fill: var(--pride-lila-ljus); }

/* Respect users who prefer less motion: pin the confetti as a static scatter. */
@media (prefers-reduced-motion: reduce) {
  .hero .wiggly { animation: none; opacity: var(--o, 0.8); }
  .hero .w1 { top: 14%; } .hero .w2 { top: 30%; } .hero .w3 { top: 55%; }
  .hero .w4 { top: 22%; } .hero .w5 { top: 68%; } .hero .w6 { top: 44%; }
  .hero .w7 { top: 60%; } .hero .w8 { top: 12%; } .hero .w9 { top: 74%; }
  .hero .w10 { top: 38%; } .hero .w11 { top: 8%; }  .hero .w12 { top: 50%; }
  .hero .w13 { top: 70%; } .hero .w14 { top: 26%; } .hero .w15 { top: 58%; }
}

/* Wordmark + year mark sit side by side as one lockup, the "2026" scaled to
   match the wordmark's height. Wraps to a second line on narrow screens. */
.hero-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 3vw, 2.25rem);
  flex-wrap: wrap;
}
/* Year mark (2026, in this year's colour) — as tall as the wordmark */
.hero-year {
  flex: none;
  width: auto;
  height: clamp(5rem, 20vw, 11rem);
  fill: var(--pop);
}

/* Wordmark: "STOCKHOLM / PRIDE" with a spärrat all-caps "GALLERY" tillägg,
   per the brand's logotype-addition rule. */
.hero .wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
  text-wrap: balance;
}
.wm-l1 { font-size: clamp(1.4rem, 4.6vw, 2.7rem); font-weight: 700; letter-spacing: 0.12em; }
.wm-l2 { font-size: clamp(3.4rem, 15vw, 8rem); letter-spacing: -0.01em; line-height: 0.82; }
.wm-add {
  margin-top: 0.7em;
  color: var(--pop);
  font-size: clamp(0.85rem, 2.6vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.55em;
  text-indent: 0.55em; /* offset trailing tracking so it stays optically centred */
}
.hero-sub {
  margin: 1.15rem auto 0;
  max-width: 36ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  line-height: 1.45;
}
/* Album grid */
main.gallery { max-width: 1080px; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0 0 1.25rem;
}
.section-head h2 { margin: 0; font-size: 1.5rem; color: var(--ink); }
.section-count { font-size: 0.85rem; color: var(--muted); }

.empty { display: grid; justify-items: center; gap: 1.1rem; }
.empty .starburst-sm { width: 76px; height: auto; fill: var(--pride-lila-ljus); }
.empty a { color: var(--accent); font-weight: 600; }

.albums { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
/* Off-screen holder for the reusable SVG clipPath definition. */
.svg-defs { position: absolute; width: 0; height: 0; pointer-events: none; }

/* Squircle (superellipse) corners for a friendlier vibe — a static SVG clipPath
   (#album-squircle), so it's identical and flicker-free in every browser. */
/* Two nested squircle clips give the card a border + shadow that both follow
   the curve — a plain border is cut off at the corners by the clip, and a
   box-shadow is clipped away entirely:
     - outer <a>:   the 1px border ring (its colour shows through `padding:1px`)
     - .card-inner: the panel fill, clipped to the same squircle 1px smaller
   The shadow uses filter: drop-shadow() so it renders outside the clip and
   traces the squircle silhouette. */
.albums a { display: block; padding: 1px; background: var(--border); clip-path: url(#album-squircle); text-decoration: none; color: inherit; filter: drop-shadow(0 2px 3px rgba(39, 0, 64, 0.10)); transition: transform 0.18s, filter 0.18s, background 0.18s; }
.albums a:hover { transform: translateY(-4px); filter: drop-shadow(0 12px 18px rgba(39, 0, 64, 0.22)); background: var(--pride-lila); }
.card-inner { display: grid; grid-template-rows: auto 1fr; height: 100%; background: var(--panel); clip-path: url(#album-squircle); overflow: hidden; }
.cover { aspect-ratio: 4 / 3; background: var(--pride-lila-ljus); display: flex; align-items: center; justify-content: center; color: var(--pride-lila); font-size: 0.85rem; overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meta { padding: 0.9rem 1.1rem 1.15rem; display: grid; gap: 0.3rem; }
.meta h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.meta .desc { margin: 0; color: var(--muted); font-size: 0.9rem; }
.meta .count { justify-self: start; margin: 0.5rem 0 0; padding: 0.2rem 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pride-lila-mork); background: var(--pop); border-radius: 999px; }

/* Thin branded bar for interior (album) pages — the identity in a slim strip
   so it never competes with the photos. Full-bleed, links home. */
.brandbar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  /* Horizontal padding matches main's `padding: 0 var(--gap)` so the mark's
     left edge lines up with the content below whenever the window is narrower
     than the content's max-width. The top inset keeps the wordmark clear of the
     iOS status bar (viewport-fit=cover) while the gradient bleeds behind it. */
  padding: calc(0.7rem + env(safe-area-inset-top)) var(--gap) 0.7rem;
  background: linear-gradient(135deg, #270040 0%, #4a0b86 30%, #9d00ff 58%, #c21c86 80%, #ff5a2a 100%);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s;
}
.brandbar:hover { filter: brightness(1.08); }
/* Make the home link discoverable: underline the wordmark on hover/focus. */
.brandbar:hover .bb-word,
.brandbar:focus-visible .bb-word { text-decoration: underline; text-underline-offset: 3px; }
.brandbar:focus-visible { outline: 2px solid var(--pop); outline-offset: -2px; }
/* Bigger than the bar and hanging past its bottom edge — the negative bottom
   margin keeps the bar itself thin while the star bleeds out below it. */
.bb-mark {
  flex: none;
  width: auto;
  height: 4rem;
  margin: -0.3rem 0 -2.2rem;
  position: relative;
  z-index: 1;
}
.bb-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
.bb-add {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--pop);
}
@media (max-width: 460px) {
  .bb-add { display: none; }
}

/* Album page */
main h1 { color: var(--ink); }
.back { display: inline-block; color: var(--muted); text-decoration: none; font-size: 0.9rem; margin-bottom: 1rem; }
.back:hover { color: var(--accent); }
.desc { margin: 0 0 1.5rem; color: var(--muted); }
.grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
.grid li { aspect-ratio: 1; background: #eee; border-radius: 4px; overflow: hidden; }
.grid a { all: unset; display: block; width: 100%; height: 100%; cursor: pointer; }
.grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.grid a:hover img { transform: scale(1.03); }
#lightbox { padding: 0; border: none; background: rgba(0, 0, 0, 0.95); color: white; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; overflow: hidden; }
#lightbox::backdrop { background: rgba(0, 0, 0, 0.95); }
.box { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; }
.image-area { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; }
#lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.caption { padding: 0.75rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); text-align: center; font-size: 0.9rem; color: rgba(255,255,255,0.8); }
.caption strong { color: white; font-weight: 600; }
.nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); color: white; border: none; width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.75rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.nav-btn:hover { background: rgba(0,0,0,0.7); }
.nav-btn:disabled { opacity: 0.2; cursor: default; }
.prev { left: 1rem; }
.next { right: 1rem; }
.close { position: absolute; top: calc(1rem + env(safe-area-inset-top)); right: calc(1rem + env(safe-area-inset-right)); background: rgba(0,0,0,0.4); color: white; border: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; z-index: 2; }
.close:hover { background: rgba(0,0,0,0.7); }

/* View Transitions API pseudo-elements are document-scoped */
::view-transition-old(hero),
::view-transition-new(hero) {
  animation-duration: 0.3s;
}

/* Upload page */
.album-row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
.dropzone { display: flex; align-items: center; justify-content: center; min-height: 8rem; padding: 2rem; border: 2px dashed var(--border); border-radius: 8px; background: var(--panel); cursor: pointer; text-align: center; color: var(--muted); transition: border-color 0.15s, background 0.15s; }
.dropzone.drag { border-color: var(--accent); background: var(--pride-lila-ljus); color: var(--accent); }
/* The `hidden` attribute (display:none) is lower specificity than the rule
   above, so it wouldn't otherwise hide the dropzone before an album is chosen. */
.dropzone[hidden] { display: none; }
.queue { list-style: none; padding: 0; margin: var(--gap) 0 0; display: grid; gap: 0.5rem; }
.queue li { display: grid; grid-template-columns: 64px 1fr auto auto auto; align-items: center; gap: 0.75rem; padding: 0.5rem; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
.queue li.needs-name, .photos li.needs-name { border-color: var(--fail); box-shadow: inset 0 0 0 1px var(--fail); }
.queue .del, .queue .edit { padding: 0.2rem 0.5rem; font-size: 1rem; line-height: 1; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; border-radius: 4px; }
.queue .del:hover { border-color: var(--fail); color: var(--fail); background: transparent; }
.queue .edit:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
#create-album { border: none; border-radius: 8px; padding: 0; max-width: min(90vw, 640px); background: var(--panel); color: var(--fg); }
#create-album::backdrop { background: rgba(0, 0, 0, 0.5); }
#create-album .panel { border: none; margin-bottom: 0; min-width: min(90vw, 420px); }
.status { font-size: 0.85rem; }
.status.pending { color: var(--muted); }
.status.uploading { color: var(--progress); }
.status.ok { color: var(--ok); }
.status.fail { color: var(--fail); }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-top: var(--gap); font-size: 0.9rem; color: var(--muted); }

/* Manage page */
.saved { font-size: 0.85rem; color: var(--ok); min-height: 1.2em; }
.photos { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.photos li { display: grid; grid-template-columns: 64px 1fr auto auto; align-items: center; gap: 0.75rem; padding: 0.5rem; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; }
.info { min-width: 0; }
.photo-meta { font-size: 0.78rem; color: var(--muted); }
.panel-empty { font-size: 0.9rem; color: var(--muted); padding: 1rem; text-align: center; }
.photos .del, .photos .edit { padding: 0.2rem 0.5rem; font-size: 1rem; line-height: 1; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; border-radius: 4px; }
.photos .del:hover { border-color: var(--fail); color: var(--fail); background: transparent; }
.photos .edit:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
.photos .edit.set { color: var(--accent); border-color: var(--accent); }

/* Site footer — centered Stockholm Pride wordmark + links on every page. */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2.5rem var(--gap) 3rem;
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}
.site-footer picture { display: contents; }
.footer-logo {
  width: 220px;
  max-width: 60%;
  height: auto;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
}
.footer-links a {
  color: var(--muted);
  text-decoration: none;
}
.footer-links a:hover { color: var(--accent); text-decoration: underline; }

/* Dark mode: re-tone the few hardcoded light neutrals. Placed at the end of the
   file (after the light definitions) so these win in source order — a media
   query adds no specificity of its own. */
@media (prefers-color-scheme: dark) {
  .cover { background: #271937; color: var(--pride-lila-ljus); }
  .grid li { background: #241933; }
  .thumb { background: #2a2036; color: #8f84a0; }
  .focal-frame { background: #2a2036; }
  button:hover { background: #2c1f3e; }
  .dropzone.drag { background: #2a1a3a; }
  .albums a:hover { filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.55)); }
}