/* cheapshots – plain CSS, no build step. Colours follow the system theme. */

:root {
  --bg: #ffffff;
  --panel: #f6f7fb;
  --text: #1c1d22;
  --muted: #6b6f7b;
  --line: #e3e5ec;
  --accent: #4250af;
  --accent-soft: #e6e9fb;
  --stage: #111214;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15161a;
    --panel: #1d1f25;
    --text: #e8e9ee;
    --muted: #9a9eab;
    --line: #2c2f38;
    --accent: #adb6ff;
    --accent-soft: #272c4d;
    --stage: #000000;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 15px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--panel); padding: 1px 6px; border-radius: 6px; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 24px;
  padding: 12px 24px; background: var(--bg); border-bottom: 1px solid var(--line);
}
.brand { display: block; line-height: 0; }
.brand img { height: 40px; width: auto; }
.search { flex: 1; max-width: 720px; }
.search input {
  width: 100%; padding: 10px 16px; font-size: 15px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
}
.search input:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* Overview */
.layout { display: grid; grid-template-columns: 220px 1fr; min-height: 80vh; }
.facets {
  display: flex; flex-direction: column;
  padding: 20px 16px; border-right: 1px solid var(--line);
  /* Stays in view while scrolling, so the storage display is always visible. */
  position: sticky; top: 65px; align-self: start;
  height: calc(100vh - 65px); overflow-y: auto;
}
/* Storage display at the bottom of the sidebar */
.storage { margin-top: auto; padding: 24px 8px 0; font-size: 13px; }
.facets .storage h2 { margin: 0 0 8px; }
.storage p { margin: 6px 0 0; }
.storage .muted { color: var(--muted); }
.meter { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--accent); }
.storage.over .meter span { background: #c0392b; }
.storage .warning { color: #c0392b; font-weight: 600; }
.facets h2 {
  margin: 20px 8px 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
}
.facets ul { list-style: none; margin: 0; padding: 0; }
.facets li a {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 5px 8px; border-radius: 8px; color: var(--text);
}
.facets li a:hover { background: var(--accent-soft); text-decoration: none; }
.reset { display: block; padding: 6px 8px; font-size: 14px; }
.facets-head { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.facets-head .reset { margin-right: auto; white-space: nowrap; }
.icon.fold-all {
  width: 30px; height: 30px; margin-left: auto;
  color: var(--muted); background: none;
}
.icon.fold-all:hover { background: var(--accent-soft); color: var(--text); }
.icon.fold-all svg { width: 16px; height: 16px; }
/* Sidebar sections fold (<details>); folded, the head shows what is chosen. */
.facet summary {
  display: flex; align-items: center; gap: 6px; list-style: none;
  margin: 14px 0 4px; padding: 4px 8px; border-radius: 8px; cursor: pointer;
}
.facet summary::-webkit-details-marker { display: none; }
.facet summary:hover { background: var(--accent-soft); }
.facets .facet h2 { margin: 0; }
.facet .chevron {
  width: 14px; height: 14px; margin-left: auto; flex: none; fill: none;
  stroke: var(--muted); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .15s;
}
.facet:not([open]) .chevron { transform: rotate(-90deg); }
.facet .pills { display: none; gap: 4px; flex-wrap: wrap; min-width: 0; }
.facet:not([open]) .pills { display: flex; }
.facet .pill {
  padding: 0 7px; border-radius: 999px; background: var(--accent); color: var(--bg);
  font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap;
}
/* A chosen value: a click removes the filter again. */
.facets li a.chosen { background: var(--accent-soft); font-weight: 600; }
.facets li a.chosen .count { color: var(--accent); font-size: 16px; line-height: 1; }
.facets ul.collections { margin-bottom: 8px; }
.collections .label { display: flex; align-items: center; gap: 8px; }
.collections svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.collections .heart svg { fill: #ff4d6d; stroke: #ff4d6d; }
.collections .trash svg { stroke: #c0392b; }
.collections .pencil svg { stroke: var(--accent); }
.facets li a.current { background: var(--accent-soft); font-weight: 600; }
.count { color: var(--muted); font-size: 13px; font-weight: 400; }

.content { padding: 16px 24px 40px; }
.summary { color: var(--muted); margin: 4px 0 8px; }
.summary-bar { display: flex; align-items: center; justify-content: space-between; }
.view-actions { display: flex; gap: 8px; }
.view-actions .icon { color: var(--text); background: var(--panel); }
.view-actions .icon:hover { background: var(--accent-soft); }
/* Sidebar switch: on wide screens it hides the sidebar, on phones it opens
   the sidebar as a drawer over the photos. */
.icon.sidebar-toggle { position: relative; flex: none; color: var(--text); background: var(--panel); }
.icon.sidebar-toggle:hover { background: var(--accent-soft); }
.sidebar-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.sidebar-toggle:has(input:focus-visible) { outline: 2px solid var(--accent); }
.sidebar-toggle.alert::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: #c0392b; border: 2px solid var(--panel);
}
.backdrop { display: none; }
@media (min-width: 761px) {
  body:has(#sidebar:checked) .layout { grid-template-columns: 1fr; }
  body:has(#sidebar:checked) .facets { display: none; }
}
/* Switch between gallery and map; the current view is not a link. */
.view-switch { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--panel); }
.view-actions .view-switch .icon { width: 34px; height: 34px; background: transparent; color: var(--muted); }
.view-actions .view-switch .icon:hover { background: var(--accent-soft); }
.view-actions .view-switch .current,
.view-actions .view-switch label:has(input:checked) {
  background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.view-switch input { position: absolute; opacity: 0; pointer-events: none; }
.view-switch label:has(input:focus-visible) { outline: 2px solid var(--accent); }

/* Map view: the map stays in place, the photos of its area scroll beside it. */
.mapview { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
.photo-map {
  position: sticky; top: 81px; height: calc(100vh - 97px);
  border-radius: 12px; background: var(--panel);
}
.map-photos .grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.map-photos .month:first-child h2 { margin-top: 0; }
.summary .muted { color: var(--muted); }
.map-group { position: relative; }
/* Leaflet sizes marker images itself; this selector is more specific. */
.photo-map .leaflet-marker-pane .map-group img {
  width: 52px; height: 52px; object-fit: cover; display: block;
  border: 3px solid #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.map-group span {
  position: absolute; top: -10px; right: -12px; min-width: 22px; padding: 2px 6px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font: 600 12px/18px system-ui, sans-serif; text-align: center;
}
.position {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); margin: 0;
  padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 13px;
}

/* Second view: photos in their aspect ratio. layout.js scales each row to
   the full width (never above --row-height); without JavaScript the height
   stays fixed and rows end unevenly on the right. Nothing is cropped. */
.content { --row-height: 220px; }
.content:has(#justified:checked) .grid { display: flex; flex-wrap: wrap; }
.content:has(#justified:checked) .tile {
  aspect-ratio: auto; height: var(--row-height);
  flex: 0 0 auto; width: min(100%, calc(var(--ratio) * var(--row-height)));
}
/* Places above the gallery (_places.html): crumbs and the next level as
   cards; the sidebar's place tree shows the same filter. */
.place-bar { margin: 4px 0 18px; padding: 12px 14px 14px; border-radius: 12px; background: var(--panel); }
.place-bar-head { display: flex; align-items: center; gap: 10px; }
.crumbs {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0;
  margin: 0; font-size: 18px; font-weight: 650;
}
.crumbs a { font-weight: 400; }
.crumbs .sep { color: var(--muted); font-weight: 400; }
.place-bar .icon.close-bar { width: 30px; height: 30px; flex: none; background: none; color: var(--muted); }
.place-bar .icon.close-bar:hover { background: var(--accent-soft); color: var(--text); }
.place-bar .icon.close-bar svg { width: 16px; height: 16px; }
.place-bar .level { color: var(--muted); font-size: 13px; margin: 10px 0 8px; }
.place-bar .cards { display: grid; gap: 12px 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.place-bar .card { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--text); }
.place-bar .card:hover { text-decoration: none; }
.place-bar .cover {
  position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--line);
}
.place-bar .cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s; }
.place-bar .card:hover .cover img { transform: scale(1.04); }
.place-bar .cover .n {
  position: absolute; right: 6px; bottom: 6px; padding: 1px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.place-bar .name { font-weight: 600; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.place-bar .meta { color: var(--muted); font-size: 12px; margin-top: -3px; }
.place-bar .card.current .cover { outline: 3px solid var(--accent); outline-offset: -3px; }
.place-bar .card.current .name { color: var(--accent); }
.place-bar .card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.more-places > summary { margin-top: 10px; color: var(--accent); font-size: 13px; cursor: pointer; }
.more-places[open] > summary { margin-bottom: 10px; }
.collections .pin svg { stroke: var(--accent); }
/* The sidebar's place tree: states and cities below their country. */
.facets li.depth-1 a { padding-left: 22px; }
.facets li.depth-2 a { padding-left: 36px; }
.month h2 { font-size: 17px; font-weight: 600; margin: 24px 0 10px; }
.grid {
  display: grid; gap: 4px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.tile {
  display: block; aspect-ratio: 1; overflow: hidden; background: var(--panel);
  scroll-margin-top: 90px; /* keep a tile reached by #anchor below the top bar */
}
.tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .15s;
}
.tile:hover img { transform: scale(1.04); }
.more {
  display: inline-block; margin-top: 24px; padding: 8px 18px;
  border: 1px solid var(--line); border-radius: 999px;
}
.toolbar { margin: 4px 0 8px; }
.button {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  font: inherit; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
}
.button:hover { text-decoration: none; border-color: var(--muted); }
.button.danger { color: #fff; background: #c0392b; border-color: #c0392b; }
.button svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.notice {
  padding: 10px 14px; border-radius: 10px; background: var(--accent-soft);
}
.confirm { max-width: 900px; }
.confirm .buttons { display: flex; gap: 12px; margin: 20px 0; }
/* Progress of a long action (job.html). */
.job .job-state { font-size: 17px; }
/* Drawn by hand: browsers show a native bar in pale blue or grey. */
.job .job-bar {
  appearance: none; width: 100%; max-width: 560px; height: 14px;
  border: 1px solid var(--accent); border-radius: 7px; overflow: hidden;
  background: var(--accent-soft); color: var(--accent);
}
.job .job-bar::-webkit-progress-bar { background: var(--accent-soft); }
.job .job-bar::-webkit-progress-value { background: var(--accent); }
.job .job-bar::-moz-progress-bar { background: var(--accent); }
.job .muted { color: var(--muted); }
.job .job-file code { font-size: 13px; }
.changes { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.changes li { display: flex; gap: 12px; align-items: center; }
.changes img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; }
.changes p { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.changes span { padding: 1px 8px; border-radius: 999px; }
.changes .added { background: #e3f4e8; color: #1e6b3a; }
.changes .rating { background: #fff4cc; color: #6b5200; }
.changes .removed { background: #fbe4e2; color: #9b2c22; text-decoration: line-through; }
@media (prefers-color-scheme: dark) {
  .changes .added { background: #1c3a26; color: #9fe0b4; }
  .changes .removed { background: #45201d; color: #f3aaa3; }
}
.grid.small { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
.grid.small img { width: 100%; aspect-ratio: 1; object-fit: cover; opacity: .6; }
.empty, .error { padding: 40px 0; color: var(--muted); }
.error { color: #c0392b; }

/* Detail view */
.viewer { display: grid; grid-template-columns: 1fr 400px; height: calc(100vh - 65px); }
.stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--stage); overflow: hidden;
}
.stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.back {
  position: absolute; top: 12px; left: 12px; padding: 6px 12px;
  color: #fff; background: rgba(0, 0, 0, .45); border-radius: 999px;
}
.actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; }
.actions form { margin: 0; }
.icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer;
  color: #fff; background: rgba(0, 0, 0, .45); border-radius: 999px;
}
.icon:hover { background: rgba(0, 0, 0, .7); }
.icon svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon.favourite.active svg { fill: #ff4d6d; stroke: #ff4d6d; }
.icon.trash.active { background: #c0392b; }
span.icon { cursor: default; }
span.icon:hover { background: rgba(0, 0, 0, .45); }
.icon.tag:not(.active) { color: rgba(255, 255, 255, .45); }
.icon.tag.active { background: var(--accent); }
.stage img.trashed { opacity: .45; }
/* Videos: as large as the stage allows, never beyond their size. */
.stage .player {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000;
}
.stage .player.trashed { opacity: .45; }
.stage .step { z-index: 2; }
.icon.play .pause-icon, .icon.play.playing .play-icon { display: none; }
.icon.play.playing .pause-icon { display: block; }
.icon.mute .muted-icon, .icon.mute.muted .sound-icon { display: none; }
.icon.mute.muted .muted-icon { display: block; }
.icon.play svg path:first-child { fill: currentColor; }
.icon.play .pause-icon path { fill: none; stroke-width: 3; }
/* Zoom: fit (as large as the stage allows, at most at 100 %) or 100 %. */
.canvas {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.canvas .zoom-target { display: contents; }
.canvas .fit {
  width: 100%; height: 100%; object-fit: contain;
  max-width: var(--w); max-height: var(--h); cursor: zoom-in;
}
.canvas.at-full .fit { cursor: default; }
/* The full photo is loaded only once shown (loading="lazy"). */
.canvas .full { display: none; }
/* Flex with auto margins: centred while the photo is smaller than the
   stage, scrollable from its edge once it is larger. */
.viewer:has(#zoom:checked) .canvas {
  align-items: flex-start; justify-content: flex-start; overflow: auto;
}
.viewer:has(#zoom:checked) .canvas .fit { display: none; }
.viewer:has(#zoom:checked) .canvas .full {
  display: block; flex: none; width: var(--w); height: var(--h);
  max-width: none; max-height: none; margin: auto; cursor: zoom-out;
  /* The preview stands in until the full photo has loaded. */
  background: var(--preview) center / 100% 100% no-repeat;
}
.back, .actions, .step, .position { z-index: 2; }
.zoom-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.zoom-toggle:has(input:checked) { background: var(--accent); }
.zoom-toggle:has(input:focus-visible) { outline: 2px solid #fff; }
.zoom-toggle:has(input:disabled) { opacity: .4; cursor: default; }
.zoom-toggle .zoom-out, .zoom-toggle:has(input:checked) .zoom-in { display: none; }
.zoom-toggle:has(input:checked) .zoom-out { display: block; }
.info-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.info-toggle:has(input:checked) { background: var(--accent); }
.info-toggle:has(input:focus-visible) { outline: 2px solid #fff; }
.viewer:has(#hide-info:checked) { grid-template-columns: 1fr; }
.viewer:has(#hide-info:checked) .info { display: none; }
#shortcuts {
  padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: var(--text);
}
#shortcuts::backdrop { background: rgba(0, 0, 0, .4); }
#shortcuts h2 { margin: 0 0 10px; font-size: 16px; }
#shortcuts th { padding: 4px 16px 4px 0; text-align: left; font-weight: 400; }
kbd {
  padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--panel); font-family: inherit;
}

/* Marks on gallery tiles */
.tile { position: relative; }
.tile.trashed img { opacity: .4; }
.badges { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.badge {
  display: flex; padding: 4px; border-radius: 999px;
  background: rgba(0, 0, 0, .45); color: #fff;
}
.badge svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.badge.favourite svg { fill: #ff4d6d; stroke: #ff4d6d; }
.badge.trash { background: #c0392b; }
.badge.tag { background: var(--accent); }
/* Bottom right: the stars of a rated photo and the length of a video; on a
   narrow tile the length moves above the stars. */
.tile-meta {
  position: absolute; right: 6px; bottom: 6px; z-index: 1;
  display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 4px;
  max-width: calc(100% - 56px); pointer-events: none;
}
.tile-stars, .tile-duration {
  padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .55);
  color: #ffc83d; font-size: 12px; line-height: 16px; letter-spacing: 1px;
}
.tile-duration { color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .5px; }
.step {
  position: absolute; top: 50%; transform: translateY(-50%);
  padding: 10px 16px; font-size: 32px; line-height: 1;
  color: #fff; background: rgba(0, 0, 0, .35); border-radius: 999px;
}
.step:hover { background: rgba(0, 0, 0, .6); text-decoration: none; }
.step.previous { left: 12px; }
.step.next { right: 12px; }
.info { overflow-y: auto; padding: 20px 22px 40px; border-left: 1px solid var(--line); }
.info h1 { font-size: 18px; margin: 0 0 8px; word-break: break-all; }
.info h2 { font-size: 14px; margin: 26px 0 8px; }
.description { color: var(--muted); }
.core { display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px; margin: 16px 0; }
.core dt { color: var(--muted); }
.core dd { margin: 0; }
.map {
  height: 220px; margin: 4px 0 8px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel);
}
.path { word-break: break-all; color: var(--muted); font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.chips a {
  display: block; padding: 4px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}
.hint { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
/* Keyword editor in the detail view (keywords.js adds the suggestions). */
.chips.editable li {
  display: flex; align-items: center; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}
.chips.editable a { padding: 4px 4px 4px 12px; background: none; color: inherit; }
.chips.editable form, .hidden-keywords form { display: contents; }
.chips.editable button.remove {
  border: 0; background: none; color: inherit; cursor: pointer; opacity: .6;
  font: inherit; font-size: 16px; line-height: 1; padding: 4px 10px 4px 4px;
}
.chips.editable button.remove:hover,
.chips.editable button.remove:focus-visible { opacity: 1; }
/* Added in cheapshots, not in the file: outlined. */
.chips.editable li.added { background: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
/* The first ⌫ in the empty field marks the keyword the second one removes. */
.chips.editable li.armed { background: #c62f2f; color: #fff; box-shadow: none; }
.keyword-add { position: relative; display: flex; gap: 6px; margin: 10px 0 6px; }
.keyword-add input[type=text] {
  flex: 1; min-width: 0; padding: 7px 12px; border-radius: 999px; font: inherit;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
}
.keyword-add input[type=text]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.icon.add { flex: none; width: 36px; height: 36px; background: var(--accent); color: var(--bg); }
.icon.add:hover { background: var(--accent); opacity: .85; }
.suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10;
  list-style: none; margin: 0; padding: 4px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}
.suggestions li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
}
.suggestions li[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.suggestions .count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.suggestions .group { color: var(--muted); font-size: 12px; padding: 6px 10px 2px; cursor: default; }
.suggestions mark { background: none; color: inherit; font-weight: 700; }
.suggestions .new { border-top: 1px solid var(--line); margin-top: 4px; border-radius: 0 0 8px 8px; }
.hidden-keywords { font-size: 13px; color: var(--muted); margin: 4px 0; }
.hidden-keywords s { color: var(--text); }
.hidden-keywords > span { white-space: nowrap; }
.hidden-keywords > span:not(:last-child) button::after { content: ","; color: var(--muted); }
.hidden-keywords button.add {
  display: inline-flex; align-items: center; padding: 0; border: 0;
  background: none; color: var(--accent); cursor: pointer; font: inherit;
}
.hidden-keywords svg {
  width: 13px; height: 13px; margin-right: 3px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Star rating in the detail view: hovering a star previews that rating. */
.stars { display: flex; align-items: center; gap: 2px; margin: 0 0 8px; }
.stars form { display: contents; }
.stars button {
  display: flex; padding: 2px; border: 0; background: none; cursor: pointer; color: #e0a800;
}
.stars svg {
  width: 26px; height: 26px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linejoin: round;
}
.stars .star.on svg, .stars:has(.star:hover) .star svg { fill: currentColor; }
.stars form:has(.star:hover) ~ form .star svg { fill: none; }
.stars .unrate { color: var(--muted); margin-left: 6px; }
.stars .unrate svg { width: 18px; height: 18px; stroke-width: 2; }
.stars .unrate:hover, .stars .unrate:focus-visible { color: var(--text); }
.keyword-editor .saved { font-size: 13px; color: #2e8b57; margin: 0 0 8px; }
.keyword-editor .saved:empty { display: none; }
details { border-top: 1px solid var(--line); padding: 6px 0; }
summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.fields { width: 100%; border-collapse: collapse; font-size: 13px; }
.fields th {
  width: 45%; padding: 3px 8px 3px 0; text-align: left; vertical-align: top;
  font-weight: 400; color: var(--muted); word-break: break-word;
}
.fields td { padding: 3px 0; word-break: break-word; }
.fields pre { margin: 0; white-space: pre-wrap; font-size: 12px; }
.footer { padding: 16px 24px; color: var(--muted); font-size: 12px; }

/* Phones */
@media (max-width: 760px) {
  .topbar { gap: 12px; padding: 10px 12px; }
  .layout { grid-template-columns: 1fr; }
  .facets {
    display: none; position: fixed; top: 0; bottom: 0; left: 0; z-index: 30;
    width: min(80vw, 300px); height: 100vh; height: 100dvh; padding: 16px; background: var(--bg);
  }
  body:has(#sidebar:checked) .facets { display: flex; }
  body:has(#sidebar:checked) .backdrop {
    display: block; position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .45);
  }
  .content { padding: 12px; }
  .mapview { grid-template-columns: 1fr; }
  /* Leaflet makes the map position: relative, so the offset must go too. */
  .photo-map { position: static; top: auto; height: 45vh; }
  .map-photos .grid { grid-template-columns: repeat(3, 1fr); }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .content { --row-height: 120px; }
  .viewer { grid-template-columns: 1fr; height: auto; }
  .stage { height: 60vh; }
  .info { border-left: 0; }
}

/* Multi-selection in the gallery (selection.js). The circle is faint at
   rest, clear on hover and while selecting; touch screens have no hover. */
.tile .pick {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid #fff; background: rgba(0, 0, 0, .25);
  display: flex; align-items: center; justify-content: center;
  opacity: .55; transition: opacity .12s;
}
.tile .pick svg {
  width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0;
}
.tile:hover .pick, .tile:focus-visible .pick, .selecting .tile .pick { opacity: 1; }
@media (hover: none) {
  .tile .pick { opacity: .9; }
  /* No link preview on a long press, which selects instead. */
  .tile { -webkit-touch-callout: none; }
}
.tile.selected .pick { background: var(--accent); border-color: var(--accent); }
.tile.selected .pick svg { opacity: 1; }
.tile.selected { background: var(--accent-soft); }
.tile.selected img { transform: scale(.88); border-radius: 8px; }
.selecting .tile:hover img { transform: none; }
.selecting .tile.selected:hover img { transform: scale(.88); }
/* The photo the arrow keys are on (selection.js). */
.tile.cursor { outline: 4px solid var(--accent); outline-offset: 2px; z-index: 3; }
.tile.cursor::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 2px #fff;
}
.tile:focus:not(.cursor) { outline: none; }

/* The selection bar covers the top bar while photos are selected. */
.selection-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; padding: 0 24px;
  background: var(--bg); border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.selection-bar[hidden], .selection-bar .icon[hidden] { display: none; }
.selection-bar .count { font-weight: 600; font-size: 17px; white-space: nowrap; }
.selection-bar .clear {
  display: inline-flex; align-items: center; gap: 6px; margin-right: auto;
  height: 40px; padding: 0 14px 0 10px; border: 1px solid var(--line); border-radius: 999px;
  background: none; color: inherit; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.selection-bar .clear:hover { background: var(--accent-soft); }
.selection-bar .clear svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.selection-bar .clear .short { display: none; }
.selection-bar .icon { color: var(--text); background: var(--panel); }
.selection-bar .icon:hover { background: var(--accent-soft); }
.selection-bar [data-act="favourite"].active svg { fill: #ff4d6d; stroke: #ff4d6d; }
.selection-bar [data-act="trash"].active { background: #c0392b; color: #fff; }
.tile.selected .tile-meta { right: calc(6% + 6px); bottom: calc(6% + 6px); }
/* File type bottom left, in the style of the stars. */
.tile-type {
  position: absolute; left: 6px; bottom: 6px; z-index: 1;
  padding: 1px 6px; border-radius: 999px; background: rgba(0, 0, 0, .55);
  color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; letter-spacing: .5px;
  pointer-events: none;
}
.tile.selected .tile-type { left: calc(6% + 6px); bottom: calc(6% + 6px); }
/* Stars for all selected photos: a small popover below the star icon. */
.star-pop {
  position: fixed; z-index: 25; width: 260px; box-sizing: border-box; padding: 12px 14px;
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.star-pop[hidden] { display: none; }
.star-pop .mix { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.star-pop .stars-row { display: flex; align-items: center; gap: 2px; }
.star-pop [data-stars] {
  display: flex; padding: 2px; border: 0; background: none; cursor: pointer; color: #e0a800;
}
.star-pop svg {
  width: 28px; height: 28px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linejoin: round;
}
.star-pop .on svg, .star-pop .preview svg { fill: currentColor; }
.star-pop .stars-row:hover .on:not(.preview) svg { fill: none; }
.star-pop .none {
  margin-left: auto; padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--text); font: inherit; font-size: 13px;
}
.star-pop .none:hover { background: var(--accent-soft); }
/* The question before a download of photos with changes not in their
   files: below the button in the gallery, a centred popover in the detail view. */
.download-control { display: contents; }
.download-pop {
  position: fixed; z-index: 25; width: 340px; max-width: calc(100vw - 16px);
  box-sizing: border-box; padding: 14px 16px;
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.download-pop[hidden] { display: none; }
.download-pop::backdrop { background: rgba(0, 0, 0, .25); }
.download-pop h2 { margin: 0 0 6px; font-size: 15px; }
.download-pop .question { margin: 0 0 8px; font-size: 14px; line-height: 1.4; }
.download-pop .hint:empty { display: none; }
.download-pop .choices { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.download-pop .button { padding: 6px 12px; font-size: 14px; }
.download-pop .button kbd { background: none; border-color: currentColor; color: inherit; font-size: 11px; opacity: .8; }
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 30;
  margin: 0; padding: 10px 16px; border-radius: 10px; background: #1c1d22; color: #fff;
  font-size: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.toast:empty { display: none; }

/* Keywords of several photos: solid on all of them, dashed on some. */
dialog.bulk-keywords {
  width: min(560px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line);
  border-radius: 14px; background: var(--bg); color: var(--text);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
dialog.bulk-keywords::backdrop { background: rgba(10, 12, 20, .45); }
dialog.bulk-keywords header { display: flex; align-items: center; gap: 12px; padding: 16px 20px 0; }
dialog.bulk-keywords h2 { font-size: 17px; margin: 0; }
dialog.bulk-keywords .strip { display: flex; gap: 4px; margin-left: auto; }
dialog.bulk-keywords .strip img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
dialog.bulk-keywords .strip span { font-size: 12px; color: var(--muted); align-self: center; margin-left: 4px; }
dialog.bulk-keywords .body { padding: 8px 20px 16px; }
dialog.bulk-keywords h3 { font-size: 13px; color: var(--muted); font-weight: 600; margin: 14px 0 6px; }
.legend { font-size: 12px; color: var(--muted); margin: -2px 0 8px; }
.chips.bulk li {
  display: flex; align-items: center; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 14px;
}
.chips.bulk .name { padding: 4px 2px 4px 12px; }
.chips.bulk .share { font-size: 11px; opacity: .75; margin-left: 6px; }
.chips.bulk button {
  border: 0; background: none; color: inherit; cursor: pointer; font: inherit;
  padding: 4px 8px 4px 4px; opacity: .65; font-size: 15px; line-height: 1;
}
.chips.bulk button:hover, .chips.bulk button:focus-visible { opacity: 1; }
.chips.bulk li.partial { background: none; outline: 1.5px dashed var(--accent); outline-offset: -1.5px; }
.chips.bulk li.added { background: #e3f4e8; color: #1e6b3a; }
.chips.bulk li.removed {
  background: none; color: var(--muted); text-decoration: line-through;
  outline: 1.5px dashed var(--line); outline-offset: -1.5px;
}
.chips.bulk li.none { background: none; color: var(--muted); }
@media (prefers-color-scheme: dark) { .chips.bulk li.added { background: #1c3a26; color: #9fe0b4; } }
.bulk-add { position: relative; display: flex; gap: 6px; margin-top: 12px; }
.bulk-add input {
  flex: 1; min-width: 0; padding: 8px 12px; border-radius: 999px; font: inherit;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
}
.bulk-add input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.bulk-add .suggestions { right: 42px; }
.bulk-summary { font-size: 13px; color: var(--muted); margin: 14px 0 0; min-height: 1.4em; }
dialog.bulk-keywords footer {
  display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px 16px;
  border-top: 1px solid var(--line); background: var(--panel); border-radius: 0 0 14px 14px;
}
.button.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.button.primary:disabled { opacity: .45; cursor: default; }
@media (max-width: 760px) {
  .selection-bar { gap: 4px; padding: 0 10px; }
  .selection-bar [data-act="all"], .selection-bar [data-act="help"] { display: none; }
  .selection-bar .count { font-size: 15px; }
  .selection-bar .clear { padding: 0 10px 0 8px; }
  .selection-bar .clear .long { display: none; }
  .selection-bar .clear .short { display: inline; }
  /* A sheet from the bottom on phones. */
  dialog.bulk-keywords { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  dialog.bulk-keywords .strip img { width: 28px; height: 28px; }
  dialog.bulk-keywords footer { border-radius: 0; }
}
/* --- albums ----------------------------------------------------------- */
.collections .album svg { stroke: var(--accent); }
.icon.album:not(.active) { color: rgba(255, 255, 255, .45); }
.icon.album.active { background: var(--accent); }
.albums-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 16px; }
.albums-head h1 { margin: 0; font-size: 22px; }
.albums-head .spacer { flex: 1; }
.albums-head .icon { color: var(--text); background: var(--panel); }
.album-cards { display: grid; gap: 18px 14px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.album-card { display: flex; flex-direction: column; gap: 5px; color: var(--text); min-width: 0; }
.album-card:hover { text-decoration: none; }
.album-card .cover {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--panel); color: var(--muted);
}
.album-card .cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s; }
.album-card:hover .cover img { transform: scale(1.04); }
.album-card .cover svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.album-card .name { font-weight: 600; overflow-wrap: anywhere; }
.album-card .meta { color: var(--muted); font-size: 13px; margin-top: -3px; }
.album-head { display: grid; gap: 4px; margin: 4px 0 14px; }
.album-head .to-albums { font-size: 14px; justify-self: start; }
.album-head .title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.album-head h1 { margin: 0; font-size: 24px; overflow-wrap: anywhere; }
.album-head .meta { color: var(--muted); }
.album-head .desc { margin: 2px 0 0; max-width: 65ch; line-height: 1.45; white-space: pre-line; }
.album-head .icon { width: 34px; height: 34px; color: var(--text); background: var(--panel); }
.album-head .icon:hover { background: var(--accent-soft); }
.album-head .icon svg { width: 17px; height: 17px; }
.album-head .icon.danger:hover { background: #c0392b; color: #fff; }
.album-form {
  width: min(440px, calc(100vw - 32px)); box-sizing: border-box; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--text);
}
.album-form::backdrop { background: rgba(0, 0, 0, .4); }
.album-form h2 { margin: 0 0 12px; font-size: 17px; }
.album-form label { display: grid; gap: 4px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.album-form input, .album-form textarea {
  font: inherit; font-size: 15px; color: var(--text); background: var(--bg);
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
}
.album-form .buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
/* "Zu Album hinzufügen" for a selection: a list with a search field. */
.album-pop {
  position: fixed; z-index: 25; width: 300px; box-sizing: border-box; padding: 10px;
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.album-pop[hidden] { display: none; }
.album-pop h2 { font-size: 14px; margin: 2px 4px 8px; }
.album-pop input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text);
}
.album-pop ul { list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.album-pop li.empty { padding: 6px; color: var(--muted); font-size: 13px; }
.album-pop li button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border: 0; border-radius: 8px;
  background: none; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.album-pop li button .cover { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; flex: none; background: var(--panel); }
.album-pop li button .n { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.album-pop li button.active, .album-pop li button:hover { background: var(--accent-soft); }
.album-pop li.create button { color: var(--accent); font-weight: 600; }
.album-pop li.create .plus {
  width: 34px; height: 34px; border-radius: 6px; border: 2px dashed var(--accent); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 18px; box-sizing: border-box;
}
.album-pop .hint { margin: 8px 4px 0; color: var(--muted); font-size: 12px; }
.album-editor .cover-form { margin: 10px 0 8px; }
.album-editor .set-cover { font-size: 14px; padding: 6px 12px; }
.album-editor .set-cover.active { box-shadow: inset 0 0 0 1.5px var(--accent); }
.albums .to-photos { display: inline-block; margin-top: 4px; font-size: 14px; }
.albums .hint { margin-top: 20px; color: var(--muted); }
/* --- Entdecken: the tag cloud above the gallery --------------------------- */
.collections .compass svg { stroke: var(--accent); }
.discover { margin: 4px 0 18px; padding: 12px 16px 14px; border-radius: 12px; background: var(--panel); }
.discover-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.discover-head h1 { margin: 0; font-size: 20px; }
.discover-head .spacer { flex: 1; }
.discover .tag-filter { position: relative; display: flex; align-items: center; margin: 0; }
.discover .tag-filter-label { position: absolute; left: 9px; display: flex; color: var(--muted); cursor: text; }
.discover .tag-filter-label svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.discover .tag-filter input {
  width: 190px; max-width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 6px 10px 6px 30px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text);
}
.discover .tag-filter input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.sort-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font-size: 13px; }
.sort-switch a, .sort-switch span { padding: 5px 11px; background: var(--bg); color: var(--muted); }
.sort-switch a:hover { text-decoration: none; color: var(--text); }
.sort-switch .on { background: var(--accent); color: var(--bg); }
.discover .icon.close-bar { width: 30px; height: 30px; flex: none; background: none; color: var(--muted); }
.discover .icon.close-bar:hover { background: var(--accent-soft); color: var(--text); }
.discover .icon.close-bar svg { width: 16px; height: 16px; }
.chosen-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; font-size: 14px; }
.chosen-row .label { color: var(--muted); }
.chosen-row a.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 11px; border-radius: 999px;
  background: var(--accent); color: var(--bg); font-weight: 600;
}
.chosen-row a.chip:hover { text-decoration: none; filter: brightness(1.1); }
.chosen-row a.chip span { opacity: .8; }
.chosen-row .discover-clear { font-size: 13px; margin-left: 4px; }
.cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; line-height: 1.25; }
.cloud a { color: var(--text); white-space: nowrap; }
.cloud a[hidden] { display: none; }
.cloud a:hover { color: var(--accent); text-decoration: none; }
.cloud a .n { font-size: 11px; color: var(--muted); margin-left: 2px; vertical-align: super; }
.cloud a.hit { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.cloud .empty { margin: 0; color: var(--muted); }
.cloud-all { position: absolute; opacity: 0; pointer-events: none; }
.cloud.capped { max-height: 9.5em; overflow: hidden; mask-image: linear-gradient(#000 70%, transparent); }
.cloud-all:checked + .cloud.capped, .cloud.capped.typing { max-height: none; mask-image: none; }
.cloud-foot { display: flex; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.cloud-foot .cloud-more { color: var(--accent); cursor: pointer; }
.cloud-foot .cloud-more .hide, .discover:has(.cloud-all:checked) .cloud-foot .cloud-more .show { display: none; }
.discover:has(.cloud-all:checked) .cloud-foot .cloud-more .hide { display: inline; }

/* Duplicates (duplicates.html, duplicate_review.html) */
:root { --keep: #1e8a4a; --keep-soft: #e3f4e8; --drop: #c0392b; --diff: #fff4cc; }
@media (prefers-color-scheme: dark) {
  :root { --keep: #5fd38d; --keep-soft: #1c3a26; --drop: #f07a6e; --diff: #3a3216; }
}
.collections .twins svg { stroke: var(--accent); }
.duplicates .to-photos { display: inline-block; margin-top: 4px; font-size: 14px; }
.kinds { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 14px; }
.kinds a {
  display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text); font-size: 14px;
}
.kinds a:hover { text-decoration: none; border-color: var(--muted); }
.kinds a.on { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.kinds a.on .count { color: inherit; opacity: .8; }
.kind-help { margin: -4px 0 14px; color: var(--muted); font-size: 14px; max-width: 760px; }
.groups { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.group-card {
  display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 12px;
  background: var(--panel); color: var(--text); border: 1px solid transparent;
}
.group-card:hover { text-decoration: none; border-color: var(--line); }
.group-card .strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 5px; }
.group-card .strip > span { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--bg); }
.group-card .strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.group-card .strip .drop img { opacity: .4; }
.group-card .strip .drop::after {
  content: ""; position: absolute; right: 4px; top: 4px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--drop);
}
.group-card .strip .rest { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.group-card .name { font-weight: 600; }
.group-card .meta { font-size: 13px; color: var(--muted); }
.group-card .suggest { font-size: 13px; }
.tagline {
  display: inline-block; padding: 0 7px; margin-right: 4px; border-radius: 999px; font-size: 12px;
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.review-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.review-nav .spacer { flex: 1; }
.review-nav .where { color: var(--muted); font-size: 14px; }
.review-nav .where i { font-style: normal; }
.review-nav .icon { color: var(--text); background: var(--panel); }
.review-nav .icon:hover { background: var(--accent-soft); }
.review-nav .icon.off { opacity: .35; }
.review h1 { margin: 6px 0 2px; font-size: 20px; }
.review-meta { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.compare {
  display: grid; gap: 12px; padding-bottom: 90px;
  /* auto-fit: two or three photos share the whole width, so they are large
     enough to compare. */
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.cand { border-radius: 12px; border: 3px solid var(--keep); background: var(--bg); overflow: hidden; }
.cand:has(.drop-box:checked) { border-color: var(--drop); }
.cand .pic {
  position: relative; display: block; aspect-ratio: 4 / 3; max-height: 75vh; width: 100%;
  background: var(--stage); cursor: pointer;
}
.cand .pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* The grid (R) to check whether the horizon is level: lines every eighth
   of the box, light with a dark edge so they show on any photo. */
.grid-toggle { position: relative; }
.grid-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.grid-toggle:has(input:focus-visible) { outline: 2px solid var(--accent); }
.review-nav .grid-toggle:has(input:checked) { background: var(--accent); color: var(--bg); }
.review:has(#grid:checked) .cand .pic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 calc(12.5% - 1px), rgba(255, 255, 255, .7) calc(12.5% - 1px) 12.5%),
    repeating-linear-gradient(to right, transparent 0 calc(12.5% - 1px), rgba(255, 255, 255, .7) calc(12.5% - 1px) 12.5%);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .8));
}
.cand .num, .cand .verdict, .cand .best { z-index: 1; }
/* No veil here, unlike the gallery: the photos are compared, so the red
   frame and badge mark those for the trash. */
.cand .pic:has(.drop-box:focus-visible) { outline: 3px solid var(--accent); outline-offset: -3px; }
.drop-box { position: absolute; opacity: 0; pointer-events: none; }
.cand .num {
  position: absolute; left: 8px; top: 8px; min-width: 26px; height: 26px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  font-weight: 700; font-size: 14px; color: #fff; background: rgba(0, 0, 0, .55);
}
.cand .verdict {
  position: absolute; right: 8px; top: 8px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: #fff; background: var(--keep);
}
.cand .verdict.drop { background: var(--drop); }
.cand .verdict svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.cand .pic:has(.drop-box:checked) .verdict.keep,
.cand .pic:not(:has(.drop-box:checked)) .verdict.drop { display: none; }
@media (prefers-color-scheme: dark) { .cand .verdict { color: #111; } }
.cand .best {
  position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; color: #fff; background: rgba(0, 0, 0, .6);
}
.facts { width: 100%; border-collapse: collapse; font-size: 13px; }
.facts th, .facts td { padding: 4px 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.facts th { width: 1%; white-space: nowrap; font-weight: 400; color: var(--muted); }
.facts tr.diff td { background: var(--diff); }
.facts td.top { font-weight: 700; }
/* The tally counts the marks with CSS counters, without JavaScript. */
.dup-form { counter-reset: keep drop; }
.drop-box:checked { counter-increment: drop; }
.drop-box:not(:checked) { counter-increment: keep; }
.tally::before { content: counter(keep) " behalten · " counter(drop) " in den Papierkorb"; }
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 24px; background: var(--bg); border-top: 1px solid var(--line);
}
.actionbar .tally { font-size: 14px; }
.actionbar label, .confirm .dup-merge { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; cursor: pointer; }
.actionbar .spacer { flex: 1; }
.actionbar .warn { color: var(--drop); font-size: 13px; }
.dup-form:has(.drop-box:not(:checked)) .warn { display: none; }
.dup-form:not(:has(.drop-box:not(:checked))) .dup-apply { opacity: .45; pointer-events: none; }
.dup-form:has(.drop-box:checked) .dup-apply .if-none,
.dup-form:not(:has(.drop-box:checked)) .dup-apply .if-drop { display: none; }
@media (max-width: 760px) {
  .groups { grid-template-columns: 1fr; }
  .compare { grid-template-columns: repeat(2, 1fr); gap: 8px; padding-bottom: 150px; }
  .facts { font-size: 12px; }
  .facts th, .facts td { display: block; width: auto; padding: 3px 6px; }
  .facts th { padding-bottom: 0; }
  .cand .verdict span, .review-nav .where i { display: none; }
  .actionbar { padding: 10px 12px; }
  .actionbar .spacer { display: none; }
  .actionbar .button { flex: 1; justify-content: center; padding: 8px 10px; }
}

/* Content search (content.py): the switch in the search field (K), the
   chip above the results, and the suggested tags. */
.search { position: relative; }
.search:has(.ai-toggle) input[type=search] { padding-left: 48px; }
.ai-toggle {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.ai-toggle:hover { background: var(--accent-soft); color: var(--text); }
.ai-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ai-toggle:has(input:checked) { background: var(--accent); color: var(--bg); }
.ai-toggle:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
svg.filled { fill: currentColor; stroke: none; }
.ai-toggle svg { width: 18px; height: 18px; }
.content-chip {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; padding: 2px 10px;
  border-radius: 999px; background: var(--accent); color: var(--bg); font-weight: 600;
}
.content-chip:hover { text-decoration: none; }
.content-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.content-chip svg.filled { fill: currentColor; stroke: none; }
.view-actions .sort-switch { align-self: center; }
.suggest-head { display: flex; align-items: center; gap: 6px; margin: 12px 0 6px; font-size: 13px; color: var(--muted); }
.suggest-head svg, .bulk-suggested h3 svg { width: 14px; height: 14px; fill: var(--accent); vertical-align: -2px; }
.suggest-head form { margin-left: auto; }
.suggest-head button, .bulk-suggested .take-all {
  border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--accent); cursor: pointer;
}
.bulk-suggested .take-all { margin-left: 8px; font-weight: 400; }
.chips.suggested li { display: flex; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); }
.chips.suggested form { display: contents; }
.chips.suggested button {
  border: 0; background: none; color: var(--text); cursor: pointer; font: inherit;
  padding: 4px 12px 4px 10px;
}
.chips.suggested button:hover, .chips.suggested button:focus-visible { color: var(--accent); }
.sort-switch { white-space: nowrap; }
@media (max-width: 760px) {
  .summary-bar:has(.content-chip) { flex-wrap: wrap; gap: 8px; }
}

/* People (people.py): the page "Personen", "Wer ist das?", the head of a
   person above the gallery, and the faces in the detail view. */
.collections .people svg { stroke: var(--accent); }
.people .to-photos { display: inline-block; margin-top: 4px; font-size: 14px; }
.albums-head .icon.on { background: var(--accent); color: var(--bg); }
.people-title { font-size: 16px; margin: 22px 0 10px; display: flex; gap: 8px; align-items: baseline; }
.people-title .count { font-weight: 400; }
.people-grid { display: grid; gap: 14px 10px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.people-grid form { display: contents; }
.person-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px;
  border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit;
  text-align: center; cursor: pointer;
}
.person-card:hover { text-decoration: none; background: var(--panel); }
.person-card .face {
  display: flex; align-items: center; justify-content: center; width: 96px; height: 96px;
  border-radius: 50%; overflow: hidden; background: var(--panel); color: var(--muted);
}
.person-card .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-card .face svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.person-card .name { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.person-card .meta { color: var(--muted); font-size: 12px; }
.person-card.unnamed .name { color: var(--muted); font-weight: 400; }
.person-card.hidden-group .face img { filter: grayscale(1); opacity: .6; }
.people-numbers { margin-top: 26px; }
.people pre { background: var(--panel); padding: 10px 14px; border-radius: 8px; overflow-x: auto; }

.who { display: flex; gap: 10px; align-items: center; margin: 8px 0 2px; }
.who h1 { margin: 0; }
.who .face { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; background: var(--panel); }
.who .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.name-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; max-width: 680px; margin-bottom: 6px; }
.name-row .name-focus { color: var(--muted); font-size: 14px; cursor: pointer; }
.name-row input {
  flex: 1; min-width: 200px; font: inherit; font-size: 17px; padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
}
.name-row input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.name-row .icon { color: var(--bg); background: var(--accent); flex: none; }
.guess {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px;
  border: 1px dashed var(--accent); background: var(--accent-soft); color: var(--text);
  font: inherit; font-size: 14px; cursor: pointer;
}
.guess img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.face-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top: 12px; padding-bottom: 110px; }
.face-card {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; cursor: pointer;
  border: 3px solid var(--keep, #1e8a4a); border-radius: 12px; background: var(--panel);
}
.face-card input { position: absolute; opacity: 0; pointer-events: none; }
.face-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face-card:has(input:checked) { border-color: var(--drop, #c0392b); }
.face-card:has(input:checked) img { opacity: .35; }
.face-card:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.face-card .num {
  position: absolute; left: 5px; top: 5px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; color: #fff; background: rgba(0, 0, 0, .55);
}
.face-card .x {
  position: absolute; right: 5px; top: 5px; width: 22px; height: 22px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  color: #fff; background: var(--drop, #c0392b); font-weight: 700;
}
.face-card:has(input:checked) .x { display: flex; }
.face-card .when {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; font-size: 11px; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .6));
}
/* The tally counts the faces with CSS counters, without JavaScript. */
.face-form { counter-reset: keep drop; }
.face-card input:checked { counter-increment: drop; }
.face-card input:not(:checked) { counter-increment: keep; }
.face-tally { font-size: 14px; }
.face-tally::before { content: counter(keep) " bekommen den Namen · " counter(drop) " nicht"; }
.face-form:not(:has(.face-card input:not(:checked))) .face-apply { opacity: .45; pointer-events: none; }

.person-head .title-row .face { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; }
.person-head .title-row .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-head .to-people { font-size: 14px; justify-self: start; }
.person-head .maybe-link {
  padding: 5px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: 14px; font-weight: 600;
}

/* The face boxes lie exactly over the fitted photo: as wide as the stage
   allows at the photo's ratio, never above 100 %. */
.canvas { container-type: size; }
.face-layer {
  position: absolute; inset: 0; margin: auto; z-index: 1; pointer-events: none;
  width: min(100cqw, 100cqh * var(--ratio), var(--w));
  height: min(100cqh, 100cqw / var(--ratio), var(--h));
}
.face-box {
  position: absolute; display: none; pointer-events: auto; border: 2px solid #ffd34d;
  border-radius: 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); cursor: pointer;
}
.face-box.unknown { border-style: dashed; }
.viewer:has(#faces:checked) .face-box, .face-box.lit { display: block; }
.face-box.lit { border-color: #fff; border-width: 3px; }
.viewer:has(#zoom:checked) .face-layer { display: none; }
.face-box .tag {
  position: absolute; left: -2px; top: calc(100% + 4px); white-space: nowrap; padding: 1px 8px;
  border-radius: 999px; font-size: 12px; font-weight: 600; color: #111; background: #ffd34d;
}
.face-box:hover { text-decoration: none; }
.faces-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.faces-toggle:has(input:checked) { background: var(--accent); }
.faces-toggle:has(input:focus-visible) { outline: 2px solid #fff; }
.people-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.people-chips li {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 3px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); font-size: 14px;
}
.people-chips li.unknown { border-style: dashed; }
.people-chips img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.people-chips form { display: contents; }
.people-chips a { color: var(--text); }
.people-chips button.remove {
  width: 22px; height: 22px; border: 0; border-radius: 50%; background: none;
  color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1;
}
.people-chips button.remove:hover { background: var(--line); color: var(--text); }
.people-chips .name-face { color: var(--accent); cursor: pointer; padding-right: 4px; }
.people-chips .face-name input {
  width: 9em; font: inherit; font-size: 13px; padding: 3px 8px; margin-right: 2px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text);
}
@media (max-width: 760px) {
  .people-grid { grid-template-columns: repeat(3, 1fr); gap: 10px 4px; }
  .person-card .face { width: 80px; height: 80px; }
  .face-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; padding-bottom: 150px; }
}
/* Phones: the icons of the detail view get their own row below "Zurück". */
@media (max-width: 760px) {
  .stage .actions { top: 52px; left: 8px; right: 8px; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
  .stage .actions .icon { width: 36px; height: 36px; }
}

/* Signing in (auth.py): the account button in the top bar and its menu. */
.account { margin-left: auto; flex: none; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--bg); font: inherit; font-weight: 700; font-size: 14px;
}
.avatar.small { width: 30px; height: 30px; font-size: 12px; cursor: default; }
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.role-member { background: #2e8b57; color: #fff; }
.avatar.role-guest { background: #7b5cc4; color: #fff; }
.avatar.role-waiting, .avatar.role-blocked { background: var(--muted); color: var(--bg); }
.account-menu {
  position: fixed; inset: 64px 16px auto auto; margin: 0; width: 280px; padding: 8px;
  color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.account-menu .who {
  display: flex; gap: 10px; align-items: center; padding: 6px 6px 10px;
  margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.account-menu .who b { display: block; overflow-wrap: anywhere; }
.account-menu .who div > span { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.account-menu form { margin: 0; }
.account-menu a, .account-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 6px;
  border: 0; border-radius: 8px; background: none; color: var(--text);
  font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover { background: var(--accent-soft); text-decoration: none; }
.account-menu kbd { margin-left: auto; }
.account-menu svg {
  width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.role {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
}
.role.role-member { color: #1f6b41; background: #def3e6; }
.role.role-guest { color: #5b3c99; background: #ece4fb; }
.role.role-waiting { color: #7a5600; background: #fff1c9; }
.role.role-blocked { color: #9b2c20; background: #f6dcd9; }
@media (prefers-color-scheme: dark) {
  .role.role-member { color: #8fdcae; background: #1f3a2b; }
  .role.role-guest { color: #c9b3f5; background: #2e2445; }
  .role.role-waiting { color: #f1cf73; background: #3d3216; }
  .role.role-blocked { color: #f0a59b; background: #42201c; }
}

/* The sign-in page and the page for accounts that wait. */
.login {
  min-height: calc(100vh - 60px); display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(circle at 30% 20%, var(--accent-soft), transparent 60%), var(--bg);
}
.login-card {
  width: min(420px, 100%); padding: 32px 28px; display: grid; gap: 14px; text-align: center;
  background: var(--bg); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
}
.login-card img { height: 44px; width: auto; }
.login-card h1 { margin: 0; font-size: 21px; }
.login-card p { margin: 0; color: var(--muted); line-height: 1.45; }
.login-card form { margin: 0; }
.login-card .button { justify-content: center; width: 100%; padding: 11px 16px; font-size: 16px; }
.login-card .button kbd { font-size: 11px; background: none; border-color: currentColor; color: inherit; opacity: .8; }
.login-card .fine { font-size: 12px; }
.login-card .notice { color: var(--text); }
.login-error { color: #c0392b !important; background: #fbe9e7; padding: 8px 10px; border-radius: 8px; }
@media (prefers-color-scheme: dark) { .login-error { color: #f0a59b !important; background: #42201c; } }

/* "Nutzer und Freigaben" */
.users-page { max-width: 980px; }
.users-page h2 { margin: 24px 0 8px; font-size: 15px; }
.users-page .lead { margin: 0 0 8px; color: var(--muted); max-width: 70ch; }
.users-page .muted { color: var(--muted); }
.pending {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.pending .person { flex: 1; min-width: 180px; }
.pending .since { color: var(--muted); font-size: 13px; }
.pending form { margin: 0; }
.pending .button kbd { font-size: 11px; background: none; border-color: currentColor; color: inherit; opacity: .8; }
.person { display: flex; align-items: center; gap: 10px; }
.person div > span { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table.users { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
table.users th {
  padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 600; color: var(--muted);
  border-bottom: 1px solid var(--line);
}
table.users td { padding: 10px 12px; vertical-align: middle; border-bottom: 1px solid var(--line); }
table.users tr:last-child td { border-bottom: 0; }
table.users tr.changed td { background: var(--accent-soft); }
.role-switch { display: inline-flex; margin: 0; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.role-switch button {
  padding: 4px 10px; border: 0; background: none; color: var(--muted);
  font: inherit; font-size: 13px; cursor: pointer;
}
.role-switch button + button { border-left: 1px solid var(--line); }
.role-switch button:hover { background: var(--panel); color: var(--text); }
.role-switch button.on { background: var(--accent); color: var(--bg); font-weight: 600; }
.role-switch button.on.role-blocked { background: #c0392b; color: #fff; }
/* Sharing an album with guests */
.shared { display: inline-flex; gap: 5px; align-items: center; color: var(--muted); font-size: 13px; }
.shared svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.album-card .shared { margin-top: -3px; font-size: 12px; }
a.shared:hover { color: var(--text); }
.share-row.changed { background: var(--accent-soft); }
.share-row .toggle {
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: none;
  color: var(--muted); font: inherit; font-size: 13px; cursor: pointer;
}
.share-row .toggle:hover { color: var(--text); background: var(--bg); }
.share-row .toggle.on { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }
.share-row .unshare { width: 32px; height: 32px; color: var(--muted); background: none; }
.share-row .unshare:hover { color: #fff; background: #c0392b; }
.share-add .choices { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 10px; font-size: 14px; }
.share-add .choices label { display: inline-flex; gap: 6px; align-items: center; }
.share-add .button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.legend { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.legend dd { margin: 0; }
@media (max-width: 760px) {
  .account-menu { inset: 60px 8px auto auto; }
}

/* Memories: "An diesem Tag" above the gallery, a card per earlier year. */
.layout > .content { min-width: 0; }
.collections .history svg { stroke: var(--accent); }
.memories { min-width: 0; margin: 4px 0 18px; padding: 12px 14px 14px; border-radius: 12px; background: var(--panel); }
.memories-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.memories-head h1 { margin: 0 6px 0 0; font-size: 20px; }
.memories-head .day { color: var(--muted); font-size: 14px; }
.memories-head .spacer { flex: 1; }
.memories-head .icon { width: 30px; height: 30px; flex: none; background: none; color: var(--muted); }
.memories-head .icon:hover { background: var(--accent-soft); color: var(--text); }
.memories-head .icon svg { width: 16px; height: 16px; }
.memories-head .memories-today {
  font-size: 13px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text);
}
.memories-head .memories-today:hover { text-decoration: none; background: var(--accent-soft); }
.memory-cards { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.memory-card {
  position: relative; flex: none; width: 150px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden;
  scroll-snap-align: start; color: #fff; background: var(--line);
}
.memory-card:hover { text-decoration: none; }
.memory-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.memory-card:hover img { transform: scale(1.04); }
.memory-card .shade { position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0, 0, 0, .65)); }
.memory-card .ago { position: absolute; left: 10px; right: 8px; bottom: 26px; font-weight: 700; font-size: 16px; }
.memory-card .meta { position: absolute; left: 10px; bottom: 8px; font-size: 12px; opacity: .9; }
.memory-card kbd {
  position: absolute; top: 7px; left: 7px; font-size: 11px; padding: 1px 5px; border: 0; border-radius: 5px;
  background: rgba(0, 0, 0, .45); color: #fff;
}
.memory-card.current { outline: 3px solid var(--accent); outline-offset: -3px; }
.memories .empty { color: var(--muted); margin: 4px 0; }
@media (max-width: 700px) { .memory-card { width: 118px; } .memories-head h1 { font-size: 18px; } }