/* ============================================================================
   Fotoplatsen — visual system
   A private family photo album. Chrome recedes, photographs lead.
   Palette: birch-paper ground, spruce ink, lingonberry accent, ochre safelight.
   Type: Fraunces (display, used sparingly) + Hanken Grotesk (UI/body).
   Signature: photos are mounted like prints in a physical album (corner mounts).
   ============================================================================ */

/* The typefaces (Fraunces, Hanken Grotesk) are declared in Pages/Shared/_Fonts.cshtml, linked by their
   fingerprinted names so a published site's browsers keep them for a year. */

:root {
  --paper:      #E9E6DD;   /* birch album page */
  --paper-2:    #F1EFE8;   /* raised surfaces  */
  --paper-edge: #DAD5C7;   /* hairline borders */
  --ink:        #23312B;   /* spruce, near-black */
  /* Both secondary inks read at 4.5:1 or better on the paper and the cards (WCAG AA) — dates and hints are small,
     and some of the family read them without their glasses. */
  --ink-soft:   #4F5852;   /* secondary text   */
  --ink-faint:  #626861;   /* meta / captions  */
  --lingon:     #A6273B;   /* accent — deep berry red */
  --lingon-deep:#851E30;
  --ochre:      #B98B3A;   /* safelight — one warm secondary */
  --spruce-dk:  #16201C;

  --shadow-mount: 0 1px 2px rgba(30,40,34,.10), 0 8px 22px rgba(30,40,34,.10);
  --shadow-lift:  0 6px 14px rgba(30,40,34,.16), 0 20px 44px rgba(30,40,34,.18);

  --radius: 3px;           /* prints have crisp corners, not rounded cards */
  --gap: clamp(10px, 1.4vw, 18px);
  --maxw: 1240px;

  --bg: var(--paper);
  --surface: var(--paper-2);
  --border: var(--paper-edge);
  --text: var(--ink);
  --text-2: var(--ink-soft);
  --text-3: var(--ink-faint);
  --accent: var(--lingon);
  /* What white text sits on (buttons, the chosen chip, the current page): the deep berry in both themes, where white
     reads at 7:1 — the dark theme's lighter accent is for text on the dark ground. */
  --accent-fill: var(--lingon);

  /* Signals beyond the berry: a green for "family" and "done", an orange for "lots going on", and the medals. Fills
     carry white text; the -text colours are for words on the page and lighten in the dark theme. */
  --success: #3B7A57;
  --success-text: #2E6144;
  --warn: #C9522B;
  --medal-gold: #C79A3A;
  --medal-silver: #9AA0A6;
  --medal-bronze: #B07A50;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141A17;
    --surface: #1C2420;
    --border: #2C3630;
    --text: #E7E3DA;
    --text-2: #A9B0A8;
    --text-3: #8E958D;
    --accent: #DE7286;         /* lighter berry for contrast on dark */
    --success-text: #7CC49A;   /* lighter green for words on the dark ground */
    --shadow-mount: 0 1px 2px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.40);
    --shadow-lift:  0 8px 18px rgba(0,0,0,.45), 0 26px 54px rgba(0,0,0,.55);
  }
}

/* Explicit theme override via [data-theme] for the manual toggle */
[data-theme="dark"] {
  --bg: #141A17; --surface: #1C2420; --border: #2C3630;
  --text: #E7E3DA; --text-2: #A9B0A8; --text-3: #8E958D; --accent: #DE7286; --success-text: #7CC49A;
  --shadow-mount: 0 1px 2px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.40);
  --shadow-lift:  0 8px 18px rgba(0,0,0,.45), 0 26px 54px rgba(0,0,0,.55);
}
[data-theme="light"] {
  --bg: var(--paper); --surface: var(--paper-2); --border: var(--paper-edge);
  --text: var(--ink); --text-2: var(--ink-soft); --text-3: var(--ink-faint); --accent: var(--lingon);
  --success-text: #2E6144;
  /* Back to the light shadows too, or a device set to dark keeps its heavy ones on the light pages. */
  --shadow-mount: 0 1px 2px rgba(30,40,34,.10), 0 8px 22px rgba(30,40,34,.10);
  --shadow-lift:  0 6px 14px rgba(30,40,34,.16), 0 20px 44px rgba(30,40,34,.18);
}

* { box-sizing: border-box; }

/* `hidden` must always win. The browser's own [hidden] rule is weaker than any class that sets `display`
   (.btn, .lightbox__cat, .comment-form, ...), so without this an element the script hides stays on screen —
   e.g. "Lås upp" on a photo that isn't locked, or edit buttons for someone who may not edit. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* subtle paper grain behind everything */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(rgba(90,80,60,.06) 1px, transparent 1px);
  background-size: 4px 4px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { opacity: .25; } }
[data-theme="dark"] body::before { opacity: .25; }

/* On a touch screen, a field whose text is smaller than 16px makes iOS zoom the page in when it is tapped. */
@media (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1em) !important; }
}

/* ---------- Header ------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 14px clamp(16px, 3vw, 28px);
  display: flex; align-items: center; gap: 20px;
}
.wordmark {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  letter-spacing: -.01em;
  line-height: 1;
  display: inline-flex; align-items: baseline; gap: .5ch;
}
.wordmark .dot { color: var(--accent); }
.wordmark small {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 500; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3);
}
/* A crowded menu wraps onto a second line rather than pushing the page sideways, and never splits an item
   ("Ladda / upp") across lines. */
.site-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-left: auto; }
.site-nav .btn { white-space: nowrap; }
.navlink {
  white-space: nowrap;
  padding: 8px 12px; border-radius: var(--radius);
  color: var(--text-2); font-weight: 500; font-size: .92rem;
  transition: background .15s, color .15s;
}
.navlink:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }

/* ---------- Phone menu: a bar at the thumb, and the whole menu in a sheet ------
   Shown instead of the header's menu below 820px (see the media block further down). */
.tabbar {
  display: none; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; /* under the lightbox (100) */
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--border);
}
.tabbar__tab {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .7rem; font-weight: 600; color: var(--text-2);
}
.tabbar__tab svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.tabbar__tab.is-active { color: var(--accent); }
/* Uploading is what the phone is for: a raised berry button in the middle. */
.tabbar__tab--upload svg {
  width: 46px; height: 46px; padding: 11px; margin-top: -20px; border-radius: 999px;
  background: var(--accent-fill); stroke: #fff; box-shadow: var(--shadow-mount);
}
.tabbar__tab .nav-badge { position: absolute; top: 0; left: calc(50% + 6px); margin: 0; }

.menu-sheet {
  width: 100%; max-width: 520px; max-height: 85dvh; margin: auto auto 0; padding: 0; overflow: auto;
  border: 0; border-radius: 14px 14px 0 0; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lift);
}
.menu-sheet::backdrop { background: color-mix(in srgb, var(--spruce-dk) 55%, transparent); }
.menu-sheet__inner { padding: 12px 18px calc(18px + env(safe-area-inset-bottom)); }
.menu-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.menu-sheet__title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.3rem; }
.menu-sheet__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.menu-sheet__item {
  display: flex; align-items: center; gap: 6px; padding: 13px 12px; border-radius: var(--radius);
  font-weight: 600; color: var(--text-2);
}
.menu-sheet__item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.menu-sheet__item.is-active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.menu-sheet__foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.navlink.is-active { color: var(--text); }
.navlink.is-active::after {
  content: ""; display: block; height: 2px; margin-top: 5px; border-radius: 2px;
  background: var(--accent);
}

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  --btn-bg: var(--surface);
  display: inline-flex; align-items: center; gap: .5ch;
  font: inherit; font-weight: 600; font-size: .9rem;
  padding: 9px 15px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--btn-bg); color: var(--text);
  cursor: pointer; transition: transform .12s, box-shadow .15s, background .15s;
}
.btn:hover { box-shadow: var(--shadow-mount); }
.btn:active { transform: translateY(1px); }
.btn--primary { --btn-bg: var(--accent-fill); color: #fff; border-color: transparent; }
.btn--primary:hover { --btn-bg: var(--lingon-deep); }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--icon { padding: 8px; }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---------- Layout shell ------------------------------------------------- */
.shell { max-width: var(--maxw); margin: 0 auto; padding: clamp(18px, 3vw, 34px) clamp(16px, 3vw, 28px) 80px; }

.page-intro { margin: 4px 0 24px; }
.page-intro h1 {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.05; letter-spacing: -.015em;
  margin: 0 0 6px;
}
.page-intro p { color: var(--text-2); margin: 0; max-width: 60ch; }
.page-intro h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.5rem; line-height: 1.1; margin: 0 0 6px; }
.page-intro__actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }

/* Small helpers: a form that is just a button in a line of others, a column of numbers, and a password shown once. */
.inline-form { display: inline-flex; }
.num { font-variant-numeric: tabular-nums; }
.temp-password { font-family: ui-monospace, monospace; font-size: 1.25rem; letter-spacing: .04em; }

/* ---------- Filter / sort bar ------------------------------------------- */
.controlbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 22px;
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-size: .85rem; font-weight: 500; color: var(--text-2);
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  cursor: pointer; transition: all .14s;
}
.chip .count { color: var(--text-3); margin-left: .4ch; font-variant-numeric: tabular-nums; }
.chip:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); color: var(--text); }
.chip.is-active {
  background: var(--accent-fill); border-color: transparent; color: #fff;
}
.chip.is-active .count { color: rgba(255,255,255,.75); }

.searchbox {
  flex: 1 1 300px;
  min-width: min(100%, 260px);
  display: flex; align-items: center; gap: 7px;
}
.searchbox input[type=search] {
  width: 100%; min-width: 0;
  font: inherit; color: var(--text);
  padding: 8px 11px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
}

.sort {
  margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px;
  color: var(--text-2); font-size: .88rem;
}
.sort__label { margin-right: 1px; }
.sort__arrow { margin-left: .35ch; font-weight: 600; }

/* ---------- The gallery: mounted prints --------------------------------- */
.gallery {
  columns: 4 260px;
  column-gap: var(--gap);
}
.gallery__item { break-inside: avoid; margin-bottom: var(--gap); }

.print {
  position: relative; display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 10px 12px;
  box-shadow: var(--shadow-mount);
  cursor: zoom-in;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}
.print:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.print__frame { position: relative; overflow: hidden; border-radius: 1px; background: var(--paper-edge); }
.print__frame img { width: 100%; height: auto; display: block; }

/* album mounting corners — the signature detail */
.print__frame::before, .print__frame::after,
.print__mounts::before, .print__mounts::after {
  content: ""; position: absolute; width: 16px; height: 16px; z-index: 2;
  border: 0 solid color-mix(in srgb, var(--ink) 30%, transparent);
  pointer-events: none;
}
.print__frame::before { top: 5px; left: 5px; border-top-width: 2px; border-left-width: 2px; }
.print__frame::after  { top: 5px; right: 5px; border-top-width: 2px; border-right-width: 2px; }
.print__mounts { position: absolute; inset: 10px 10px 12px; pointer-events: none; }
.print__mounts::before { bottom: 5px; left: 5px; border-bottom-width: 2px; border-left-width: 2px; }
.print__mounts::after  { bottom: 5px; right: 5px; border-bottom-width: 2px; border-right-width: 2px; }

.print__meta { display: flex; align-items: baseline; gap: 8px; padding: 9px 3px 1px; }
.print__owner { font-weight: 600; font-size: .85rem; }
.print__date  { color: var(--text-3); font-size: .76rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.print__caption {
  padding: 2px 3px 0; color: var(--text-2); font-size: .84rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Badges: little enamel pins ---------------------------------- */
.badges { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.badge {
  width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 2px 5px rgba(30,40,34,.25);
}
.badge--new  { background: var(--ochre); color: #fff; border-color: transparent; }
.badge--hot  { background: var(--lingon); color: #fff; border-color: transparent; }
.badge--warn { background: var(--warn); color: #fff; border-color: transparent; }
.badge--lock { background: var(--spruce-dk); color: #fff; border-color: transparent; }
.badge--kin  { background: var(--success); color: #fff; border-color: transparent; } /* 👪 family-only, distinct from the near-black lock */

.comment-tag {
  position: absolute; left: 16px; top: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--spruce-dk) 78%, transparent); color: #fff;
  font-size: .74rem; font-weight: 600; backdrop-filter: blur(2px);
}

/* A video on its still: a play sign and its length, in the middle, clear of the badges and mounting corners. */
.play-tag {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; pointer-events: none;
  background: color-mix(in srgb, var(--spruce-dk) 72%, transparent); color: #fff;
  font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; backdrop-filter: blur(2px);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.mini-photo .play-tag { padding: 3px 8px; font-size: .7rem; }

/* ---------- Empty state -------------------------------------------------- */
.empty {
  text-align: center; padding: 70px 20px; color: var(--text-2);
  border: 1px dashed var(--border); border-radius: var(--radius);
}
.empty h2 { font-family: 'Fraunces', serif; font-weight: 500; color: var(--text); margin: 0 0 6px; }
.empty--compact { padding: 28px 16px; }

/* Spacing that used to sit in style attributes (the content security policy allows no inline style). */
.auth__card--center { text-align: center; }
.photo-list--spaced { margin-top: 10px; }
.panel--spaced { margin-top: 28px; }
.empty .btn { margin-top: 14px; }

/* ---------- Home --------------------------------------------------------- */
.home { display: flex; flex-direction: column; gap: 30px; }
.home-intro {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
}
.home-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.home-section { display: flex; flex-direction: column; gap: 14px; }
.section-head {
  display: flex; align-items: end; justify-content: space-between; gap: 14px;
  border-bottom: 1px solid var(--border); padding-bottom: 10px;
}
.section-head h2 {
  font-family: 'Fraunces', serif; font-weight: 500;
  font-size: 1.35rem; line-height: 1.1; margin: 0 0 3px;
}
.section-head p { color: var(--text-3); font-size: .88rem; margin: 0; }
.section-link { color: var(--accent); font-weight: 700; font-size: .86rem; white-space: nowrap; }
.section-link:hover { text-decoration: underline; }
.gallery--home { columns: 4 230px; }
.home-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.mini-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini-photo {
  position: relative;
  aspect-ratio: 1; padding: 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); cursor: zoom-in; overflow: hidden;
}
.mini-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .15s; }
.mini-photo:hover img { transform: scale(1.04); }
.activity-list, .comment-stream { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.activity-row {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center;
  padding: 8px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); cursor: pointer;
}
.activity-row:hover { border-color: var(--accent); }
.activity-row img { width: 56px; height: 56px; object-fit: cover; border-radius: 2px; }
.activity-row__text { min-width: 0; display: flex; flex-direction: column; }
.activity-row__text strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-row__text small { color: var(--text-3); font-size: .76rem; }
.activity-row__score { color: var(--accent); font-weight: 700; white-space: nowrap; }

/* ---------- Pagination --------------------------------------------------- */
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 34px; }
.pager a, .pager span {
  min-width: 38px; height: 38px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius); border: 1px solid var(--border);
  color: var(--text-2); font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums;
}
.pager a:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.pager .is-current { background: var(--accent-fill); border-color: transparent; color: #fff; }
.pager .is-disabled { opacity: .4; pointer-events: none; }
.pager .pager__gap { min-width: 0; padding: 0 2px; border-color: transparent; color: var(--text-3); }

/* ---------- Lightbox ----------------------------------------------------- */
.lightbox { position: fixed; inset: 0; z-index: 100; display: none; }
.lightbox.is-open { display: block; }
.lightbox__scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--spruce-dk) 88%, transparent);
  backdrop-filter: blur(4px);
  animation: fade .2s ease;
}
.lightbox__panel {
  position: absolute; inset: 0; margin: auto;
  width: min(1100px, calc(100vw - 32px)); height: min(760px, calc(100vh - 32px));
  /* Give the stage row a definite height (not content-sized): without it, max-height:100% on the
     image can't resolve, so tall portrait photos overflow and get clipped to their top half. */
  display: grid; grid-template-columns: minmax(0,1fr) 340px; grid-template-rows: minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift);
  animation: rise .24s cubic-bezier(.2,.7,.3,1);
}
.lightbox__stage {
  background:
    repeating-conic-gradient(from 0deg, #0000 0deg 90deg, color-mix(in srgb, var(--ink) 4%, transparent) 90deg 180deg)
    0 0/26px 26px,
    var(--spruce-dk);
  display: grid; place-items: center; padding: 22px; min-height: 0;
}
/* min-width/height: 0 is essential: as a grid item the image otherwise keeps its intrinsic
   min-size, which overrides max-height:100% and lets tall portraits overflow and get clipped. */
.lightbox__stage img,
.lightbox__stage video { max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.5); border-radius: 1px; }
.lightbox__stage video { background: #000; }

.lightbox__side { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); }
.lightbox__head { padding: 18px 18px 12px; border-bottom: 1px solid var(--border); }
.lightbox__owner { font-weight: 700; }
.lightbox__sub { color: var(--text-3); font-size: .82rem; margin-top: 2px; }
.lightbox__presence { color: var(--accent); font-size: .78rem; font-weight: 600; margin-top: 4px; }
.lightbox__caption { margin: 10px 0 0; color: var(--text-2); }
.lightbox__locknote {
  margin-top: 8px; padding: 6px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  font-size: .82rem; font-weight: 600;
}
.lightbox__visbadge { font-size: .8rem; color: var(--text-2); font-weight: 600; align-self: center; }
.lightbox__vis { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-3); }
.lightbox__vis select {
  font: inherit; padding: 2px 6px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.lightbox__cat {
  display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
  font-size: .76rem; font-weight: 600;
}

.comments { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.comment { }
.comment__top { display: flex; align-items: center; gap: 8px; }
.comment__who { font-weight: 600; font-size: .86rem; }
.comment__when { color: var(--text-3); font-size: .74rem; }
.comment__edited { color: var(--text-3); font-size: .74rem; }
.comment__lock { font-size: .78rem; }
/* The comment's own buttons, pushed to the right of its line. */
.comment__actions { margin-left: auto; display: inline-flex; gap: 10px; }
.comment__del { color: var(--text-3); font-size: .74rem; background: none; border: 0; cursor: pointer; padding: 0; }
.comment__del:hover { color: var(--accent); }
.comment__mod { color: var(--text-3); font-size: .74rem; background: none; border: 0; cursor: pointer; padding: 0; }
.comment__mod:hover { color: var(--accent); }
.comment__body { color: var(--text); font-size: .92rem; margin-top: 2px; white-space: pre-wrap; }
.comment__reply { color: var(--accent); font-size: .74rem; background: none; border: 0; cursor: pointer; padding: 3px 0 0; }
.comment__replies {
  margin: 8px 0 0 12px; padding-left: 12px; border-left: 2px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
}
.comment__replies:empty { display: none; margin: 0; border: 0; }
.comment-reply { margin: 6px 0; display: flex; flex-direction: column; gap: 6px; }
.comment-reply textarea {
  font: inherit; padding: 6px 8px; border-radius: 8px; resize: vertical; min-height: 46px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.comment-reply__row { display: flex; justify-content: flex-end; gap: 6px; }

/* ---------- Emoji reactions --------------------------------------------- */
.reactions { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 6px; }
.reactions:empty { display: none; }
.reaction {
  font: inherit; font-size: .82rem; line-height: 1; cursor: pointer;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.reaction:hover { border-color: var(--accent); }
.reaction.is-mine {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: transparent; color: var(--accent); font-weight: 600;
}
.reaction--add { color: var(--text-3); }
.reaction-picker { display: inline-flex; gap: 3px; }
.lightbox__reactions { margin-top: 10px; }
.comments__empty { color: var(--text-3); font-size: .88rem; text-align: center; padding: 24px 0; }

.comment-form { border-top: 1px solid var(--border); padding: 12px 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.comment-form textarea {
  font: inherit; resize: vertical; min-height: 58px;
  padding: 9px 11px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.comment-form__row { display: flex; gap: 8px; align-items: center; }
.comment-form__row .spacer { margin-left: auto; }

.lightbox__close {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 40px; height: 40px; border-radius: 999px;
  background: color-mix(in srgb, var(--spruce-dk) 60%, transparent); color: #fff;
  border: 0; cursor: pointer; font-size: 20px; line-height: 1;
  display: grid; place-items: center;
}
.lightbox__close:hover { background: var(--spruce-dk); }
.lightbox__nav {
  position: absolute; top: 50%; z-index: 5; transform: translateY(-50%);
  width: 44px; height: 58px; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  background: color-mix(in srgb, var(--spruce-dk) 62%, transparent);
  color: #fff; cursor: pointer; font-size: 34px; line-height: 1;
}
.lightbox__nav:hover { background: var(--spruce-dk); }
.lightbox__nav--prev { left: 18px; }
.lightbox__nav--next { right: 358px; }

/* ---------- Upload ------------------------------------------------------- */
.upload-grid { display: grid; gap: 22px; grid-template-columns: 1fr; max-width: 760px; }
.dropzone {
  border: 2px dashed var(--border); border-radius: var(--radius);
  background: var(--surface);
  padding: 46px 24px; text-align: center; color: var(--text-2);
  transition: border-color .15s, background .15s;
  cursor: pointer;
}
.dropzone.is-drag { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.dropzone strong { color: var(--text); font-weight: 600; }
.dropzone .hint { display: block; margin-top: 6px; font-size: .84rem; color: var(--text-3); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.field label { font-weight: 600; font-size: .9rem; }
.field label .optional { color: var(--text-3); font-weight: 400; }

/* Words for the device in hand: "drop here" to a mouse, "tap to choose" to a touch screen. */
@media (pointer: coarse) { .on-pointer { display: none !important; } }
@media not (pointer: coarse) { .on-touch { display: none !important; } }
/* Every typed field, not only type=text — the sign-in page's e-mail and password fields too. */
.field input:not([type=checkbox], [type=radio], [type=file], [type=hidden]), .field select {
  font: inherit; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.switch { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--text-2); }
.upload-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.upload-summary { color: var(--text-3); font-size: .86rem; }

.queue { display: flex; flex-direction: column; gap: 10px; }
.upload-to-event { margin: 20px 0 0; text-align: center; }
.queue__item {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.queue__thumb { width: 74px; height: 74px; object-fit: cover; border-radius: 2px; background: var(--paper-edge); }
.queue__main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.queue__top { display: flex; align-items: baseline; gap: 10px; }
.queue__name { font-size: .86rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue__fields { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 8px; }
.queue__fields label { color: var(--text-3); font-size: .74rem; font-weight: 600; }
.queue__fields input {
  width: 100%; margin-top: 3px;
  font: inherit; font-size: .86rem; color: var(--text);
  padding: 7px 9px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg);
}
.queue__actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.queue__bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; }
.queue__bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.queue__state { font-size: .78rem; color: var(--text-3); }
.queue__state.ok { color: var(--success-text); }
.queue__state.err { color: var(--accent); }

/* ---------- Auth pages --------------------------------------------------- */
.auth { min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: 14px; padding: 24px; }
.auth__card {
  width: min(420px, 100%); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-mount); padding: 30px;
}
.auth__wordmark { margin-bottom: 18px; }
.auth__card h1 { font-family: 'Fraunces', serif; font-weight: 500; margin: 0 0 4px; font-size: 1.7rem; }
.auth__card p.lead { color: var(--text-2); margin: 0 0 20px; }
.auth .field { margin-bottom: 14px; }
.auth .switch { margin: 6px 0 2px; }
.auth .btn { width: 100%; justify-content: center; margin-top: 6px; }
.auth__alt { text-align: center; margin-top: 16px; font-size: .9rem; color: var(--text-2); }
.auth__alt a { color: var(--accent); font-weight: 600; }
.auth__hint {
  text-align: center; margin-top: 18px; padding: 10px; border-radius: var(--radius);
  border: 1px dashed var(--border); background: var(--bg); color: var(--text-3); font-size: .8rem;
}
.validation { color: var(--accent); font-size: .85rem; margin-top: 4px; }
.validation-summary ul { margin: 0 0 14px; padding-left: 18px; color: var(--accent); font-size: .88rem; }

/* ---------- Admin table -------------------------------------------------- */
.admin-panel {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; margin-bottom: 18px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.admin-panel h2 { font-size: 1rem; margin: 0 0 2px; }
.admin-panel p { color: var(--text-3); margin: 0; font-size: .88rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); }
table.data th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600; }
table.data tr:last-child td { border-bottom: 0; }

/* Between the phone's bar and a wide screen the header's menu tightens rather than wrapping onto a second row. */
@media (min-width: 821px) and (max-width: 1180px) {
  .site-nav .navlink { padding-left: 8px; padding-right: 8px; }
  .wordmark small { display: none; }
}
@media (min-width: 821px) and (max-width: 960px) {
  .site-nav .navlink { padding-left: 6px; padding-right: 6px; font-size: .86rem; }
}

/* On a phone a wide table becomes a card per row, each cell under its own small heading (data-label), instead of a
   table to scroll sideways. */
@media (max-width: 820px) {
  table.data--stack thead { display: none; }
  table.data--stack, table.data--stack tbody, table.data--stack tr, table.data--stack td { display: block; width: 100%; }
  table.data--stack tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
  table.data--stack tr:last-child { border-bottom: 0; }
  table.data--stack td { padding: 5px 14px; border-bottom: 0; }
  table.data--stack td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600;
  }
}
.pill { padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.pill--yes { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success-text); }
.pill--no  { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.pill--family { background: color-mix(in srgb, var(--spruce-dk) 15%, transparent); color: var(--spruce-dk); }
.pill--departed { background: color-mix(in srgb, var(--text-3) 22%, transparent); color: var(--text-2); }
.admin-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* ---------- Toast -------------------------------------------------------- */
.toast-host { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--spruce-dk); color: #fff; padding: 11px 16px; border-radius: var(--radius);
  box-shadow: var(--shadow-lift); font-size: .9rem; animation: rise .2s ease;
}
.toast.err { background: var(--lingon-deep); }

/* ---------- Small button variant ---------------------------------------- */
.btn--sm { padding: 6px 11px; font-size: .82rem; }

/* ---------- Like button (grid card + lightbox share it) ----------------- */
.print__foot { display: flex; align-items: center; padding: 8px 3px 2px; }

.like {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-weight: 600; font-size: .82rem;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  cursor: pointer; transition: color .15s, border-color .15s, background .15s, transform .1s;
}
.like:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.like:active { transform: scale(.96); }
.like[disabled] { opacity: .6; cursor: default; }
.like__heart { font-size: 1rem; line-height: 1; color: var(--text-3); transition: color .15s, transform .2s; }
.like__count { font-variant-numeric: tabular-nums; }
.like.is-liked { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.like.is-liked .like__heart { color: var(--accent); }
.like.just-liked .like__heart { animation: pop .45s cubic-bezier(.2,.8,.2,1); }
.like--lg { padding: 8px 14px; font-size: .9rem; }
.like--lg .like__heart { font-size: 1.15rem; }
@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* ---------- Lightbox: actions + caption editing ------------------------- */
.lightbox__actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.lightbox__actions .lightbox__cat { margin-top: 0; }
.lightbox__caption.is-placeholder { color: var(--text-3); font-style: italic; }
.caption-edit { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.caption-edit textarea {
  font: inherit; resize: vertical; min-height: 60px; padding: 9px 11px;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.caption-edit__row { display: flex; gap: 8px; justify-content: flex-end; }
.metadata-edit { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.metadata-edit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metadata-edit label {
  display: flex; flex-direction: column; gap: 4px;
  color: var(--text-3); font-size: .74rem; font-weight: 700;
}
.metadata-edit select, .metadata-edit input {
  width: 100%; min-width: 0;
  font: inherit; font-size: .86rem; color: var(--text);
  padding: 7px 9px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg);
}
.metadata-edit__row { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- Leaderboard (Topplistor) ------------------------------------ */
.board-windows { margin-bottom: 24px; }
.boards { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.board {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 18px 10px; box-shadow: var(--shadow-mount);
}
.board__title {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.25rem;
}
.board__icon { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; font-size: 15px; }
.board__icon--like { background: color-mix(in srgb, var(--lingon) 16%, transparent); color: var(--lingon); }
.board__icon--comment { background: color-mix(in srgb, var(--ochre) 20%, transparent); }
.board__empty { color: var(--text-3); padding: 18px 4px; }

.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rank__row {
  display: grid; grid-template-columns: 28px 52px 1fr auto; align-items: center; gap: 12px;
  padding: 8px 4px; border-top: 1px solid var(--border); cursor: pointer; border-radius: 2px;
  transition: background .12s;
}
.rank__row:first-child { border-top: 0; }
.rank__row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.rank__row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rank__pos {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem;
  color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums;
}
.rank__pos--1 { color: var(--medal-gold); }
.rank__pos--2 { color: var(--medal-silver); }
.rank__pos--3 { color: var(--medal-bronze); }
.rank__thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 2px; background: var(--paper-edge); }
.rank__meta { min-width: 0; display: flex; flex-direction: column; }
.rank__cap { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__by { color: var(--text-3); font-size: .78rem; }
.rank__score { font-weight: 700; font-size: .92rem; color: var(--accent); white-space: nowrap; }
.rank__num { font-variant-numeric: tabular-nums; }

/* ---------- Members & profile ------------------------------------------- */
.album-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.album-card {
  display: grid; grid-template-rows: 170px auto; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-mount); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.album-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-lift); }
.album-card img { width: 100%; height: 100%; object-fit: cover; background: var(--paper-edge); }
.album-card__meta { display: flex; flex-direction: column; gap: 2px; padding: 12px 13px; }
.album-card__meta strong { font-size: 1rem; }
.album-card__meta span { color: var(--text-2); font-size: .86rem; }
.album-card__meta small { color: var(--text-3); font-size: .76rem; font-variant-numeric: tabular-nums; }

.curation-stats {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: -6px 0 22px;
}
.curation-stats span {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-2); font-size: .86rem;
}
.curation-stats strong { color: var(--accent); font-variant-numeric: tabular-nums; }
.curation-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  align-items: start;
}
.curation-item {
  display: flex; flex-direction: column; gap: 8px;
}
.curation-item .gallery__item { margin-bottom: 0; }
.issue-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px; }
.issue-chip {
  padding: 4px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--ochre) 18%, transparent);
  color: var(--text); border: 1px solid color-mix(in srgb, var(--ochre) 35%, var(--border));
  font-size: .76rem; font-weight: 700;
}

.member-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.member-card {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s;
}
.member-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.member-card__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.member-card__name { font-weight: 700; }
.member-card__count { color: var(--text-3); font-size: .82rem; }
.member-card__memorial { margin-left: 6px; font-size: .9em; opacity: .85; }
.member-card__hidden {
  margin-left: 8px; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  background: color-mix(in srgb, var(--text-3) 22%, transparent); color: var(--text-2);
}
/* Only rendered for insiders (admins and family) — see MemberService.ListAsync. */
.member-card__family {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; white-space: nowrap;
  margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--spruce-dk) 14%, transparent);
  color: var(--spruce-dk); font-size: .7rem; font-weight: 600;
}

/* "Mina relationer": set how you relate to each member (partner / family / friend). */
.relations { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.relation {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.relation__name { font-weight: 600; }
.relation__kind {
  font: inherit; font-size: .9rem; color: var(--text);
  padding: 6px 10px; border-radius: var(--radius);
  border: 1px solid var(--border); background: transparent; cursor: pointer;
}
.relation__kind:hover { border-color: var(--accent); }

/* Profile pictures (_Avatar, and the comments in the lightbox): the picture in a circle, or the name's first letter. */
.avatar {
  display: inline-grid; place-items: center; flex: none; overflow: hidden; border-radius: 50%; object-fit: cover;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent);
  font-weight: 700; line-height: 1; user-select: none;
}
.avatar--sm { width: 26px; height: 26px; font-size: .75rem; }
.avatar--md { width: 48px; height: 48px; font-size: 1.15rem; }
.avatar--lg { width: 112px; height: 112px; font-family: 'Fraunces', serif; font-weight: 500; font-size: 2.8rem; }

.profile-head { display: flex; align-items: center; gap: 20px; }
.profile-head h1 { margin-bottom: 4px; }
.profile-head p { margin: 0; }

/* Choosing one's profile picture: a photo in a round frame, dragged and zoomed until the right part shows (avatar.js). */
.avatar-editor {
  max-width: 720px; margin: 0 0 24px; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.avatar-editor > summary { cursor: pointer; font-weight: 600; }
.avatar-editor[open] > summary { margin-bottom: 10px; }
.avatar-editor form { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
.avatar-editor__stage { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.avatar-crop {
  display: grid; place-items: center; width: min(240px, 70vw); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--border); background-color: color-mix(in srgb, var(--text-3) 12%, var(--surface));
  background-repeat: no-repeat; touch-action: none;
}
.avatar-crop.has-photo { cursor: grab; }
.avatar-crop.is-dragging { cursor: grabbing; }
.avatar-crop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.avatar-crop__hint { color: var(--text-3); font-size: .85rem; }
.avatar-crop.has-photo .avatar-crop__hint { display: none; }
.avatar-editor__zoom { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--text-2); }
.avatar-editor__file:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.avatar-choices {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px;
  width: 100%; margin: 0; padding: 0; border: 0;
}
.avatar-choices legend { margin-bottom: 8px; padding: 0; font-size: .85rem; color: var(--text-2); }
.avatar-choice { cursor: pointer; border-radius: var(--radius); outline: 2px solid transparent; outline-offset: 1px; }
.avatar-choice img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.avatar-choice:has(input:checked) { outline-color: var(--accent); }
.avatar-choice:has(input:focus-visible) { outline-color: var(--accent); outline-style: dashed; }

.profile-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 340px) 1fr; align-items: start; }
.profile-block h2 { font-size: 1rem; margin: 0 0 12px; color: var(--text-2); }
.profile-block .gallery { grid-template-columns: 1fr; max-width: 320px; }
.backlink { display: inline-block; margin-bottom: 8px; color: var(--text-3); text-decoration: none; font-size: .85rem; }
.backlink:hover { color: var(--accent); }
.muted { color: var(--text-3); }

/* ---------- Family stewards --------------------------------------------- */
.steward-block { margin-bottom: 28px; }
.steward-block h2 { font-size: 1rem; margin: 0 0 12px; color: var(--text-2); }
.steward-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.steward-list__item {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.steward-list__name { font-weight: 600; }
.steward-list__actions { margin-left: auto; display: flex; gap: 6px; }
.steward-remove { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.steward-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.steward-remove input[type=text], .steward-add select {
  font: inherit; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}

.latest-comment {
  display: flex; gap: 12px; padding: 12px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .15s;
}
.latest-comment:hover { border-color: var(--accent); }
.latest-comment img { width: 72px; height: 72px; object-fit: cover; border-radius: 2px; flex: none; }
.latest-comment__text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.latest-comment__body { color: var(--text); font-size: .92rem; }
.latest-comment__when { color: var(--text-3); font-size: .76rem; }

/* ---------- Motion & responsive ----------------------------------------- */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }

/* ---------- Events ------------------------------------------------------- */
.shell--narrow { max-width: 760px; }
.page-intro--with-action { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.eyebrow { margin: 0 0 4px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.eyebrow a { color: inherit; text-decoration: none; }
.event-description { white-space: pre-line; margin-top: 8px; }
.event-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: .88rem; color: var(--text-3); }

.event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.event-list__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .14s;
}
.event-list__item:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.event-list__name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.event-list__meta { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--text-3); white-space: nowrap; }

.panel { padding: 18px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.panel h2 { font-family: 'Fraunces', serif; font-weight: 500; margin: 0 0 12px; font-size: 1.25rem; }
.panel > p { color: var(--text-2); margin: 0 0 12px; }
.panel .btn--primary { margin-top: 14px; }
.status-note { padding: 10px 14px; margin: 0 0 18px; border-radius: var(--radius); background: color-mix(in srgb, var(--success) 14%, var(--surface)); }

/* ---------- Notices from the admins, at the top of every page ------------ */
.site-notices { display: flex; flex-direction: column; }
.site-notice {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--ochre) 18%, var(--surface)); color: var(--text);
}
.site-notice__text { flex: 1; min-width: 0; margin: 0; max-width: var(--maxw); white-space: pre-line; overflow-wrap: anywhere; }
.site-notice__close {
  flex: none; border: 0; background: transparent; color: var(--text-2); cursor: pointer;
  font-size: 1.25rem; line-height: 1; padding: 0 4px;
}
.site-notice__close:hover { color: var(--text); }
.notice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.notice-list__item { border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.notice-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.notice-list__item.is-over { opacity: .65; }
.notice-list__text { margin: 0 0 6px; white-space: pre-line; overflow-wrap: anywhere; }
.notice-list__meta { margin: 0 0 8px; color: var(--text-3); font-size: .86rem; }
.hint-text { color: var(--text-3); font-size: .86rem; margin: 6px 0 0; }

.form-stack { display: flex; flex-direction: column; gap: 12px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.field textarea {
  font: inherit; padding: 10px 12px; border-radius: var(--radius); resize: vertical;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}

/* A checkbox dressed as a chip: lit when ticked, still a real checkbox for keyboards and screen readers. */
.circles { border: 0; padding: 0; margin: 16px 0 0; }
/* "Eventet tar emot bilder" off: the circles don't apply — greyed, but kept as chosen (a disabled field wouldn't be
   sent, and the choice would be lost) — and the note says so. */
.policy-closed { display: none; margin: 8px 0 0; }
form:has(input[name="Policy.AcceptsUploads"]:not(:checked)) .policy-closed { display: block; }
form:has(input[name="Policy.AcceptsUploads"]:not(:checked)) .circles { opacity: .45; }
.circles legend { font-weight: 600; font-size: .9rem; margin-bottom: 8px; padding: 0; }
.chip-check { position: relative; display: inline-flex; align-items: center; user-select: none; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check:has(input:checked) { background: var(--accent-fill); border-color: transparent; color: #fff; }
.chip-check:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.explain { margin: 16px 0 0; font-size: .9rem; color: var(--text-2); }
.explain summary { cursor: pointer; font-weight: 600; color: var(--text); }
.explain ul { margin: 8px 0; padding-left: 20px; }

.join-guest form { display: flex; flex-direction: column; gap: 12px; max-width: 360px; margin: 18px auto; text-align: left; }
.join-guest .hint-text { max-width: 420px; margin-inline: auto; }
/* Signing in and creating an account side by side, as visible as each other. */
.join-guest__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.join-guest__account { max-width: 420px; margin: 22px auto 0; padding-top: 18px; border-top: 1px solid var(--border); }

.invites { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.invite { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.invite form { display: inline; }
.invite__link {
  flex: 1 1 260px; min-width: 0; font: inherit; font-size: .85rem; padding: 8px 10px;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.invite__qr { flex: 0 0 auto; display: block; line-height: 0; }
.invite__qr img { width: 56px; height: 56px; border-radius: 4px; background: #fff; }

/* The printable invitation card. Always black on white — a QR code in dark mode's colours scans badly. */
.invite-card {
  margin: 24px auto 0; max-width: 460px; padding: 32px 28px; text-align: center;
  background: #fff; color: #111; border: 1px solid var(--border); border-radius: var(--radius);
}
.invite-card .wordmark { color: #111; }
.invite-card__title {
  margin: 10px 0 18px; font-family: 'Fraunces', serif; font-weight: 500;
  font-size: clamp(1.5rem, 4vw, 2rem); overflow-wrap: anywhere;
}
.invite-card__qr { display: block; width: min(100%, 320px); aspect-ratio: 1; margin: 0 auto; }
.invite-card__lead { margin: 16px 0 6px; font-size: 1.1rem; font-weight: 600; }
.invite-card__link { margin: 0; font-size: .8rem; color: #555; overflow-wrap: anywhere; }

@media print {
  .site-header, .site-footer, .tabbar, .no-print, .toast-host { display: none !important; }
  body { background: #fff; }
  .shell { padding: 0; }
  .invite-card { border: 0; margin-top: 10mm; max-width: none; }
  .invite-card__qr { width: 90mm; }
}

.people { list-style: none; margin: 0; padding: 0; }
.people__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.people__row:last-child { border-bottom: 0; }
.people__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* the actions stay together on the right */
.people__role select {
  font: inherit; padding: 6px 8px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}

/* ---------- About: the card pins explained ------------------------------ */
.about-legend { max-width: 640px; display: flex; flex-direction: column; gap: 14px; }
.about-legend > div { display: flex; align-items: center; gap: 14px; }
.about-legend .badge, .about-legend .like, .about-legend .comment-tag, .about-legend .play-tag { flex: 0 0 auto; }
/* On a card these sit on the photo; here they stand in the line. */
.about-legend .comment-tag, .about-legend .play-tag { position: static; transform: none; }
.about-rule { border: 0; border-top: 1px solid var(--border); margin: 34px 0 30px; max-width: 640px; }
.about-news { max-width: 640px; color: var(--text-2); line-height: 1.7; padding-left: 18px; }
.about-outro { max-width: 640px; color: var(--text-2); margin-top: 22px; }

/* ---------- Support ------------------------------------------------------ */
.nav-badge {
  display: inline-block; min-width: 1.4em; padding: 0 .4em; margin-left: .35em;
  border-radius: 999px; background: var(--accent-fill); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 1.4em; text-align: center; font-variant-numeric: tabular-nums;
}
.site-footer {
  max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 3vw, 28px) 40px; font-size: .86rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px;
}
.site-footer a { color: var(--text-3); }
.site-footer a:hover { color: var(--accent); }
/* Which build this is (_BuildStamp): on a line of its own under the footer's links, and under the sign-in card. */
.build-stamp { flex-basis: 100%; text-align: center; color: var(--text-3); font-size: .74rem; }
.support-message__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; }
.support-message__meta { color: var(--text-3); font-size: .86rem; }
.support-message__body { white-space: pre-line; margin: 0 0 6px; }
.support-message.is-handled { opacity: .7; }

/* ---------- Admin: storage per member --------------------------------- */
.quota-cell { white-space: nowrap; }
.quota-cell__use { display: block; font-variant-numeric: tabular-nums; }
.quota-cell__form { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: .85rem; color: var(--text-3); }
.quota-cell__form input {
  width: 5.5em; font: inherit; padding: 4px 6px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}

/* ---------- Admin: correcting a member's sign-in address -------------- */
.email-cell__edit summary { cursor: pointer; font-size: .85rem; color: var(--text-3); margin-top: 2px; }
.email-cell__edit summary:hover { color: var(--accent); }
.email-cell__edit form { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.email-cell__edit input {
  width: 16em; max-width: 100%; font: inherit; font-size: .85rem; padding: 4px 6px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}

/* ---------- Photo rows: the trash, an event's waiting photos ------------- */
.photo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.photo-row {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.photo-row__thumb { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius); background: var(--border); }
.photo-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .9rem; color: var(--text-2); }
.photo-row__text strong { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-row__note { color: var(--text-3); font-size: .82rem; }
.photo-row__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.photo-row__actions form { display: inline; }
@media (max-width: 520px) {
  .photo-row { grid-template-columns: 56px minmax(0, 1fr); }
  .photo-row__thumb { width: 56px; height: 56px; }
  .photo-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- An event's photos ------------------------------------------- */
.event-photos__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.event-photos__head h2 { margin: 0; }
.gallery--event { columns: 3 200px; }
.event-photos h3 { font-size: 1rem; margin: 20px 0 10px; }

@media (max-width: 820px) {
  /* The photo takes the top of the screen; beneath it the details, the comments and the comment box scroll as one.
     (Sized by its content, the details row used to squeeze the photo to a strip and spill out past its own box.) */
  .lightbox__panel { grid-template-columns: 1fr; grid-template-rows: minmax(0, 56%) minmax(0, 1fr); height: min(92vh, calc(100dvh - 24px)); }
  .lightbox__stage { padding: 10px; }
  .lightbox__side { border-left: 0; border-top: 1px solid var(--border); overflow-y: auto; }
  .lightbox__side .comments { flex: none; overflow: visible; }
  .lightbox__nav { top: 28%; width: 38px; height: 50px; font-size: 30px; } /* the middle of the photo */
  .lightbox__nav--prev { left: 10px; }
  .lightbox__nav--next { right: 10px; }
  /* The header keeps just the wordmark; the menu moves to the bar at the bottom (see "Phone menu" below). */
  .site-header__inner { padding-block: 10px; }
  .site-nav { display: none; }
  .tabbar { display: grid; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .toast-host { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .sort { margin-left: 0; }
  .searchbox { order: 3; flex-basis: 100%; }
  .home-intro { align-items: center; flex-direction: row; justify-content: space-between; }
  .home-actions { justify-content: flex-end; }
  .wide-only { display: none !important; } /* what the phone's bar already offers */
  .home-columns { grid-template-columns: 1fr; }
  .mini-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .queue__item { grid-template-columns: 58px minmax(0, 1fr); }
  .queue__thumb { width: 58px; height: 58px; }
  .queue__actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
  .queue__fields { grid-template-columns: 1fr; }
  .metadata-edit__grid { grid-template-columns: 1fr; }
  .admin-panel { align-items: flex-start; flex-direction: column; }
  .profile-grid { grid-template-columns: 1fr; }
}

/* Phones: two prints side by side rather than one per screen, and the filter and sort chips as one scrolling row
   each, so the first photos show without scrolling past the controls. */
@media (max-width: 520px) {
  .gallery, .gallery--home, .gallery--event { columns: 2; column-gap: 10px; }
  .profile-block .gallery { columns: 1; } /* a profile's single latest photo keeps its width */
  .home-intro__lead { display: none; }
  .home-intro h1 { font-size: 1.7rem; margin: 0; }
  .gallery__item { margin-bottom: 10px; }
  .print { padding: 6px 6px 8px; }
  .print__mounts { inset: 6px 6px 8px; }
  .print__meta { flex-wrap: wrap; gap: 0 6px; }
  .print__date { margin-left: 0; }
  .badges { top: 10px; right: 10px; }
  .badge { width: 24px; height: 24px; font-size: 13px; }
  .comment-tag { top: 10px; left: 10px; }
  .controlbar .chips, .controlbar .sort {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%;
  }
  .controlbar .chips::-webkit-scrollbar, .controlbar .sort::-webkit-scrollbar { display: none; }
  .controlbar .chip, .sort__label { flex: 0 0 auto; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

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