/* The look, from the design canvas. docs/design-reference/README.md says where each value comes from. */

/* Figtree, served from this site so no other site sees who's looking (docs/decisions.md). One variable file
   covers every weight; the browser fetches the Latin Extended one only for letters such as č or ř.
   From @fontsource-variable/figtree 5.3.0, under the SIL Open Font License (fonts/OFL-Figtree.txt). */
@font-face {
  font-family: Figtree;
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("../fonts/figtree-latin-ext-wght-normal.eca8d8b337ff.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Figtree;
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("../fonts/figtree-latin-wght-normal.202cfb54d4e6.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Night light (canvas, Brand page, chosen 11 Nov 2026): dark everywhere, so the photos are the
     brightest thing on screen. One set of colours for every page, the viewer included. */
  color-scheme: dark;

  --ground: #0e0e10;
  --raised: #18181b;
  --raised-soft: #141417;
  --control: #27272a;
  --border: #2a2a30;
  --border-strong: #3a3a42;

  --text: #f4f4f5;
  --text-soft: #d4d4d8;
  --text-muted: #a1a1aa;
  --dim: #71717a;

  --sun: #ffc857;
  --heart: #fb7185;
  --banner: #262013;
  --avatar: #2a2a30;
  --avatar-ink: #ffc857;

  --warning: #2a2210;
  --warning-track: #4a3a18;
  --warning-ink: #fde68a;
  --warning-bar: #ffc857;
  --error: #f87171;
  --success: #86efac;

  --radius-small: 4px;
  --radius-control: 10px;
  --radius-card: 14px;
  --radius-large: 16px;

  --tabbar-height: 64px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: Figtree, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
}

.brand, .auth-brand, .guest-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; }
/* The mark's sun is HDR: always shown at full brightness, whatever the photo settings say. */
.mark { display: block; flex-shrink: 0; border-radius: 25%; dynamic-range-limit: no-limit; }
.brand { font-size: 26px; letter-spacing: -0.6px; }
.guest-brand { font-size: 17px; letter-spacing: -0.3px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }

.layout { display: flex; align-items: flex-start; }
.sidebar { display: none; }
.content { flex: 1; min-width: 0; padding: 0 0 calc(var(--tabbar-height) + 24px); }

.tabbar {
  position: fixed;
  inset: auto 0 0;
  height: var(--tabbar-height);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  background: var(--ground);
}

.tabbar .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-muted);
}

.tabbar .nav-item[aria-current="page"] { color: var(--text); font-weight: 600; }
.nav-item-later { opacity: 0.45; }

.page-title { font-size: 30px; font-weight: 650; letter-spacing: -0.7px; }

@media (max-width: 767px) {
  .desktop-only { display: none !important; }
}

@media (min-width: 768px) {
  .phone-only { display: none !important; }
}

.empty-state { padding: 48px 20px; text-align: center; color: var(--text-muted); }
.empty-state h2 { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 6px; }

@media (min-width: 768px) {
  .topbar { padding: 14px 24px; }
  .brand { font-size: 19px; letter-spacing: -0.4px; }
  .tabbar { display: none; }

  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 216px;
    padding: 20px 16px;
  }

  .sidebar .nav-item {
    height: 44px;
    padding: 0 12px;
    border-radius: var(--radius-control);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    color: var(--text-soft);
  }

  .sidebar .nav-item svg { width: 20px; height: 20px; }
  .sidebar .nav-item { border-radius: 22px; }
  .sidebar .nav-item[aria-current="page"] { background: var(--raised); font-weight: 600; color: var(--text); }
  .content { padding: 40px 32px 48px 24px; }
  .page-title { font-size: 36px; letter-spacing: -0.9px; }
}

/* Buttons */

.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 15px Figtree, system-ui, sans-serif;
  cursor: pointer;
}

.button-primary { height: 50px; padding: 0 20px; border: 0; border-radius: 25px; background: var(--text); color: var(--ground); }
.button-secondary { height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--border-strong); background: var(--ground); color: var(--text); }
.button-small { height: 36px; padding: 0 14px; border-radius: 18px; font-size: 14px; }
.button-secondary:focus-within { outline: 2px solid var(--text); outline-offset: 2px; }

.icon-link { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.top-upload { display: none; }

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--avatar);
  color: var(--avatar-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Upload */

.upload-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; }
.upload-header h1 { font-size: 17px; font-weight: 600; }
.upload-header-balance { width: 44px; }
.close-link { min-width: 44px; height: 44px; margin-left: -10px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }

.upload-page { display: flex; flex-direction: column; gap: 18px; padding: 0 20px 28px; }
.upload-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.upload-aside { display: flex; flex-direction: column; gap: 14px; }

.drop-zone { padding: 18px; border: 2px dashed var(--dim); border-radius: var(--radius-large); background: var(--raised-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.drop-zone.is-over { border-color: var(--text); background: var(--raised); }
.drop-zone-text { flex: 1 1 240px; }
.drop-zone-title { font-size: 17px; font-weight: 600; }
.drop-zone-note { font-size: 14px; color: var(--text-muted); margin-top: 2px; }
.drop-zone-buttons { display: flex; gap: 8px; }

.upload-progress { display: flex; flex-direction: column; gap: 8px; }
.upload-progress[hidden], .upload-problems[hidden] { display: none; }
.upload-headline { font-size: 22px; font-weight: 700; }
.upload-subline { font-size: 13px; color: var(--text-muted); }
.progress-track { height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.progress-fill { width: 0; height: 100%; background: var(--text); transition: width 0.2s; }

.upload-problems { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.upload-problem { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-card); display: flex; align-items: center; gap: 12px; }
.upload-problem-text { flex: 1; min-width: 0; }
.upload-problem-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-problem-reason { font-size: 13px; line-height: 1.35; color: var(--text-muted); }
.upload-problem-reason.is-retryable { color: var(--error); }

.upload-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 0 -20px; }
.upload-tile { aspect-ratio: 1 / 1; background: var(--raised); overflow: hidden; }
.upload-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload-tile[data-state="waiting"] { opacity: 0.45; }
.upload-tile[data-state="uploading"] { background: var(--border-strong); }
.upload-tile[data-state="failed"] { background: rgba(248, 113, 113, 0.25); }
.upload-tile[data-state="rejected"] { background: var(--border); opacity: 0.5; }

.storage-warning { padding: 14px; border-radius: var(--radius-card); background: var(--warning); color: var(--warning-ink); display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.4; }
.storage-warning-title { font-size: 15px; font-weight: 600; }
.storage-track { height: 6px; border-radius: 3px; background: var(--warning-track); overflow: hidden; }
.storage-fill { height: 100%; background: var(--warning-bar); }

.keep-own-standard { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-card); display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.keep-own-standard input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--text); }
.keep-own-standard-text { display: flex; flex-direction: column; gap: 3px; }
.keep-own-standard-title { font-size: 15px; font-weight: 600; }
.keep-own-standard-help { font-size: 13px; line-height: 1.45; color: var(--text-soft); }

.privacy-note { padding: 16px; border-radius: var(--radius-card); background: var(--raised); font-size: 14px; line-height: 1.45; color: var(--text-soft); }

@media (min-width: 768px) {
  .upload-header { padding: 14px 24px; border-bottom: 1px solid var(--border); }
  .upload-header h1 { font-size: 18px; }
  .close-link { order: 3; height: 40px; margin: 0; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: 20px; }
  .close-link svg, .upload-header-balance { display: none; }
  .upload-page { flex-direction: row; align-items: flex-start; gap: 24px; padding: 24px; }
  .upload-main { flex: 1; }
  .upload-aside { flex: 0 0 320px; }
  .upload-tiles { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px; margin: 0; }
  .upload-tile { border-radius: var(--radius-small); }
  .top-upload { display: inline-flex; height: 40px; padding: 0 16px; border-radius: 20px; background: var(--text); color: var(--ground); font-size: 14px; font-weight: 600; align-items: center; gap: 8px; }
  .top-upload-icon { display: none; }
}

/* Library. Tiles stay free of `position` and `transform`, which have upset HDR images on some browsers. */

.day { margin-bottom: 18px; }
.day-label { padding: 0 20px; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.tile { display: block; aspect-ratio: 1 / 1; background: var(--raised); overflow: hidden; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sorting by date taken or date added (§9 2.6). */
.sort-switch { margin: 0 20px 16px; display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-muted); }
.sort-switch span { margin-right: 6px; }
.sort-choice { height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--border-strong); display: flex; align-items: center; font-weight: 600; color: var(--text-soft); }
.sort-choice[aria-current="true"] { background: var(--text); border-color: var(--text); color: var(--ground); }
.upload-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.upload-label h2 { font-size: inherit; font-weight: 600; }
.upload-label span { font-size: 14px; font-weight: 400; color: var(--text-muted); }
.upload-label a { font-size: 14px; font-weight: 400; color: var(--text-muted); text-decoration: underline; }
/* The last upload, above the days (§9 2.6). Its photos are in their own days as well. */
.just-added { margin: 0 8px 22px; padding: 14px 8px 8px; border-radius: var(--radius-card); background: var(--raised); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.just-added-heading { padding: 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.just-added-text { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.just-added-text h2 { font-size: 16px; font-weight: 600; }
.just-added-text p { font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.just-added-actions { display: flex; align-items: center; gap: 8px; }
.just-added-hide { height: 36px; padding: 0 10px; border: 0; background: none; color: var(--text-muted); font: 500 14px Figtree, system-ui, sans-serif; cursor: pointer; }
.just-added .tile { background: var(--control); }
.tile-message { display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
/* Album photos at their own shape (§9 5.12). Each tile grows in proportion to its width over height, so the
   photos in a row share one height; the empty ::after soaks up a short last row so it isn't stretched. */
.tiles.rows { display: flex; flex-wrap: wrap; align-items: flex-start; --row-height: 100px; }
.tiles.rows::after { content: ""; flex: 999 1 0; }
.rows .tile { flex: var(--shape) 1 calc(var(--shape) * var(--row-height)); min-width: 0; aspect-ratio: var(--shape); }
/* A described photo and its note sit together as one item in the row. On a phone they fill a row of their
   own, the photo at about the row height and the note beside it. On a wide screen the item's weight is the
   photo's shape plus 1.4 for the note (plus the 4 px gap), so the photo comes out exactly as tall as the
   rest of its row. The note shows the start of a long description; the photo page has all of it. */
.tile-group { flex: 1 1 100%; display: flex; gap: 2px; }
.tile-group .tile { flex: 0 0 auto; width: calc(var(--shape) * var(--row-height) * 1.2); max-width: 60%; aspect-ratio: var(--shape); }
.tile-note { flex: 1 1 0; min-width: 0; background: var(--raised); display: flex; }
.tile-note-body { flex: 1; min-width: 0; box-sizing: border-box; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.tile-note svg { flex-shrink: 0; color: var(--sun); }
.tile-note-text { font-size: 14px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.tile-note-meta { margin-top: auto; font-size: 12px; color: var(--text-muted); }
.notes-hidden .tile-group { flex: var(--shape) 1 calc(var(--shape) * var(--row-height)); }
.notes-hidden .tile-group .tile { flex: 1 1 0; width: auto; max-width: none; }
.notes-hidden .tile-note { display: none; }
/* The note says it already; the mark is for when the notes are hidden. */
.rows:not(.notes-hidden) .tile-described { display: none; }
/* On a phone the switch is a round icon button, so it fits beside the tabs; the label shows from 768 px. */
.notes-switch { margin-left: auto; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 18px; background: var(--raised); color: var(--dim); display: flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.notes-switch[hidden] { display: none; }
.notes-switch[aria-pressed="true"] { color: var(--sun); }
.notes-switch-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Settings */

.settings { max-width: 640px; padding: 0 20px; display: flex; flex-direction: column; gap: 16px; }
.settings-intro, .settings-note { color: var(--text-muted); }
.settings-note { font-size: 14px; }
.settings form { display: flex; flex-direction: column; gap: 20px; }
.choices { margin: 0; padding: 0; border: 0; }
.choices legend { padding: 0; margin-bottom: 8px; font-size: 18px; font-weight: 600; }
.choice-list { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.choice { min-height: 64px; padding: 12px 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; }
.choice + .choice { border-top: 1px solid var(--raised); }
.choice:has(input:checked) { background: var(--raised-soft); }
.choice input { width: 20px; height: 20px; margin: 0; flex-shrink: 0; accent-color: var(--text); }
.choice-text { display: flex; flex-direction: column; gap: 2px; }
.choice-label { font-weight: 600; }
.choice-help { font-size: 14px; line-height: 1.4; color: var(--text-muted); }

@media (min-width: 768px) {
  .day-label { padding: 0; font-size: 16px; margin-bottom: 10px; }
  .day { margin-bottom: 22px; }
  .just-added { margin: 0 0 28px; padding: 18px; gap: 14px; }
  .sort-switch { margin: 0 0 20px; justify-content: flex-end; }
  .just-added-heading { padding: 0; }
  .just-added .tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .library-title { margin-bottom: 22px; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
  .tile { border-radius: var(--radius-small); }
  .tiles.rows { --row-height: 220px; }
  .notes-switch { width: auto; padding: 0 14px 0 12px; color: var(--text-soft); }
  .notes-switch svg { color: var(--dim); }
  .notes-switch[aria-pressed="true"] { color: var(--text); }
  .notes-switch[aria-pressed="true"] svg { color: var(--sun); }
  .notes-switch-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .tile-group { flex: calc(var(--shape) + 1.4) 1 calc((var(--shape) + 1.4) * var(--row-height) + 4px); gap: 4px; }
  .tile-group .tile { flex: var(--shape) 1 0; width: auto; max-width: none; }
  .tile-note { flex: 1.4 1 0; border-radius: var(--radius-small); }
  .tile-note-body { padding: 14px 16px; gap: 8px; }
  .tile-note-text { font-size: 15px; line-height: 1.45; -webkit-line-clamp: 5; line-clamp: 5; }
  .settings { padding: 0; }
}

.sign-out { align-items: flex-start; }

/* Sign in */

.auth { min-height: 100vh; display: flex; flex-wrap: wrap; }
.auth-collage { flex: 1 1 420px; padding: 24px; background: var(--raised); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: center; }
.auth-collage div { aspect-ratio: 1 / 1; border-radius: var(--radius-control); }
.auth-collage div:nth-child(1) { background: linear-gradient(180deg, #9cc3d5 0 55%, #3f6e7d 55% 100%); }
.auth-collage div:nth-child(2) { background: linear-gradient(180deg, #f2c9a0 0 55%, #b5654a 55% 100%); }
.auth-collage div:nth-child(3) { background: linear-gradient(180deg, #c9d6b8 0 55%, #5e7550 55% 100%); }
.auth-collage div:nth-child(4) { background: linear-gradient(180deg, #e8d9c4 0 55%, #8c7a63 55% 100%); }
.auth-collage div:nth-child(5) { background: linear-gradient(180deg, #a7b8e0 0 55%, #2e3f66 55% 100%); }
.auth-collage div:nth-child(6) { background: linear-gradient(180deg, #f4b9a8 0 55%, #7a3b2e 55% 100%); }
.auth-collage div:nth-child(7) { background: linear-gradient(180deg, #d7e3e8 0 55%, #6b8a94 55% 100%); }
.auth-collage div:nth-child(8) { background: linear-gradient(180deg, #ebc98f 0 55%, #9a6b2f 55% 100%); }
.auth-collage div:nth-child(9) { background: linear-gradient(180deg, #bfd4c9 0 55%, #41675a 55% 100%); }

.auth-panel { flex: 1 1 480px; padding: 64px 24px 34px; display: flex; justify-content: center; align-items: flex-start; }
.auth-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; }
.auth-brand { font-size: 22px; letter-spacing: -0.5px; }
.auth-card h1 { margin-top: 24px; font-size: 30px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.15; }
.auth-intro { margin-top: 10px; line-height: 1.45; color: var(--text-muted); }
.auth-form { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.auth-field { display: flex; flex-direction: column; gap: 8px; }
.auth-field label { font-size: 14px; font-weight: 600; }
.auth-field input { height: 52px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--ground); font: 16px Figtree, system-ui, sans-serif; color: var(--text); }
.auth-field input:focus { outline: 2px solid var(--text); outline-offset: -1px; }
.auth-field-help { font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.auth-field-error, .auth-error { font-size: 14px; line-height: 1.4; color: var(--error); }
.auth-form .button-primary { height: 54px; border: 0; border-radius: 27px; font-size: 16px; }
.auth-note { margin-top: 16px; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.auth-note a { color: var(--text); text-decoration: underline; }

@media (min-width: 768px) {
  .auth-panel { align-items: center; padding: 48px 24px; }
  .auth-card h1 { margin-top: 32px; font-size: 32px; }
  .auth-brand { font-size: 24px; }
}

/* Albums. Anything over an image is layered with grid, so nothing needs `position` near it. */

.stack { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.stack > * { grid-area: 1 / 1; min-width: 0; min-height: 0; }

.album-strip { padding: 0 20px; margin-bottom: 22px; }
.album-strip-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.album-strip-heading h2 { flex: 1; font-size: 18px; font-weight: 600; }
.album-strip-link { font-size: 14px; font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.album-strip-cards { display: flex; gap: 10px; overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
.album-strip-cards .album-card { flex: 0 0 140px; }
.album-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.album-card-cover { aspect-ratio: 1 / 1; border-radius: var(--radius-control); background: var(--raised); overflow: hidden; display: block; }
.album-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-card-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album-card-meta { font-size: 13px; color: var(--text-muted); }

.albums-page { padding: 0 20px; display: flex; flex-direction: column; gap: 16px; }
.albums-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.album-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.album-nav { display: flex; justify-content: space-between; padding: 8px 12px 0; }
.round-button { width: 44px; height: 44px; border-radius: 22px; background: var(--raised); display: flex; align-items: center; justify-content: center; color: var(--text); }
.album-intro { padding: 24px 20px 12px; display: flex; flex-direction: column; gap: 10px; }
.album-title { font-size: 34px; font-weight: 650; letter-spacing: -0.8px; line-height: 1.1; }
.album-meta { font-size: 14px; color: var(--text-muted); margin-top: 2px; }
.album-actions { display: flex; gap: 4px; margin-top: 2px; }
.album-action { flex: 1; height: 56px; border-radius: var(--radius-control); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 500; }
.album-action:hover { background: var(--raised); }
.album-action { border-radius: 20px; }
.album-fill { padding: 28px 20px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; max-width: 480px; }
.album-fill h2 { font-size: 20px; font-weight: 700; }
.album-fill p { color: var(--text-muted); line-height: 1.45; }
.album-fill .button-primary { height: 52px; border-radius: 26px; }

@media (max-width: 767px) {
  body.album-screen .topbar { display: none; }
}

@media (min-width: 768px) {
  .album-strip { padding: 0; }
  .album-strip-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .albums-page { padding: 0; }
  .album-cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .album-intro { padding: 24px 0 22px; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
  .album-title { font-size: 44px; letter-spacing: -1.2px; }
  .album-actions { align-items: center; margin: 0; }
  .album-action { flex: none; flex-direction: row; height: 40px; padding: 0 12px; gap: 8px; font-size: 14px; }
  /* Share is the album's main action, so it's the one filled button. */
  .album-action-main, .album-action-main:hover { margin-left: 6px; padding: 0 16px; background: var(--text); color: var(--ground); font-weight: 600; }
  .album-fill { padding: 12px 0; }
}

/* Tabs and the Grid/Story switch share one line over the photos: text tabs, then two icons. */
.album-bar { margin: 0 20px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.album-tabs { display: flex; gap: 8px; }
.tile-described { align-self: end; justify-self: end; margin: 6px; width: 24px; height: 22px; border-radius: 11px; background: rgba(0, 0, 0, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; }
@media (min-width: 768px) {
  .album-bar { margin: 0 0 16px; }
}
.album-tabs a { height: 36px; padding: 0 14px; border-radius: 18px; background: var(--raised); display: flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--text-soft); white-space: nowrap; }
.album-tabs a[aria-current="page"] { background: var(--text); color: var(--ground); }
.tile-counts { align-self: end; justify-self: start; margin: 6px; height: 22px; padding: 0 7px; border-radius: 11px; background: rgba(0, 0, 0, 0.55); color: #fff; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.tile-count { display: flex; align-items: center; gap: 3px; }
.welcome { max-width: 480px; padding: 28px 20px 16px; display: flex; flex-direction: column; gap: 16px; }
.welcome h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.2; }
.welcome-lead { margin-top: -8px; font-size: 15px; line-height: 1.45; color: var(--text-muted); }
.welcome-card { padding: 16px; border-radius: 16px; border: 1px solid var(--border); display: flex; align-items: center; gap: 14px; }
.welcome-card-main, .welcome-card-main:hover { background: var(--text); border-color: var(--text); color: var(--ground); }
.welcome-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--raised); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.welcome-card-main .welcome-icon { background: rgba(0, 0, 0, 0.08); }
.welcome-card-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-muted); }
.welcome-card-text strong { font-size: 16px; font-weight: 600; color: var(--text); }
.welcome-card-main .welcome-card-text { color: #3f3f46; }
.welcome-card-main .welcome-card-text strong { color: var(--ground); }
.welcome-promises { margin: 8px 0 0; padding: 16px 16px 16px 34px; border-radius: 16px; background: var(--raised); display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.4; }
.edit-links { display: flex; flex-direction: column; gap: 4px; }
.edit-links a { min-height: 44px; display: flex; align-items: center; font-weight: 500; }
.edit-links .danger, .danger-button { color: var(--error); }
.confirm { max-width: 480px; margin: 48px auto; padding: 0 20px; display: flex; flex-direction: column; gap: 14px; }
.confirm h1 { font-size: 24px; font-weight: 700; }
.confirm p { color: var(--text-muted); line-height: 1.45; }
.confirm-buttons { display: flex; gap: 10px; margin-top: 8px; }
.danger-button { height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--error); background: var(--ground); font: 600 15px Figtree, system-ui, sans-serif; cursor: pointer; }

/* The photo viewer. Controls are layered over the photo with a grid, because anything
   positioned or transformed over an HDR image can stop the browser showing it as HDR. */
.viewer { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.viewer-main { display: flex; flex-direction: column; min-width: 0; }
.viewer-header { padding: 8px; display: flex; align-items: center; gap: 8px; }
.viewer-back { height: 44px; min-width: 44px; padding: 0 8px 0 6px; display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; flex-shrink: 0; max-width: 40%; }
.viewer-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-title { flex: 1; min-width: 0; text-align: center; }
.viewer-title-main { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-title-position { font-size: 12px; color: var(--text-muted); }
.viewer-icon-button { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.viewer-later { opacity: 0.4; }
/* The photo's box hugs the photo, so its HDR badge and arrows sit on it and the description follows
   straight under it on a phone. Width and height stay auto so the browser keeps the photo's shape. */
.viewer-stage { display: flex; justify-content: center; align-items: flex-start; min-width: 0; }
.viewer-photo { max-width: 100%; }
.viewer-photo > img { width: auto; height: auto; max-width: 100%; max-height: 70vh; display: block; }
.viewer-layer { padding: 8px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; pointer-events: none; }
.viewer-layer > * { pointer-events: auto; }
.viewer-badge { grid-area: 1 / 1; height: 44px; padding: 0 2px; display: flex; align-items: center; justify-self: start; }
.viewer-badge .hdr-badge { background: rgba(0, 0, 0, 0.35); }
.viewer-arrow { grid-row: 2; align-self: center; width: 44px; height: 44px; border-radius: 22px; background: rgba(0, 0, 0, 0.45); color: #fff; display: flex; align-items: center; justify-content: center; }
.viewer-arrow[rel="prev"] { grid-column: 1; }
.viewer-arrow[rel="next"] { grid-column: 3; }
.viewer-description { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 16px; }
.description-text { font-size: 17px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.description-text[data-clamped] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.description-by { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.description-by .comment-avatar { width: 22px; height: 22px; font-size: 9px; }
.description-byline { flex: 1; min-width: 0; }
.description-link { height: 36px; padding: 0 8px; border: 0; background: transparent; color: var(--text); display: flex; align-items: center; font: 600 13px Figtree, system-ui, sans-serif; cursor: pointer; }
.description-link[hidden] { display: none; }
.description-add { align-self: flex-start; min-height: 36px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.description-add:hover { color: var(--text); }
.description-add svg { flex-shrink: 0; }
.description-form { display: flex; flex-direction: column; gap: 8px; }
.description-form label { font-size: 13px; color: var(--text-muted); }
.description-form textarea { width: 100%; box-sizing: border-box; border-radius: 12px; border: 1px solid #52525b; background: var(--raised); color: var(--text); padding: 12px; font: 16px/1.45 Figtree, system-ui, sans-serif; resize: vertical; }
.description-actions { display: flex; justify-content: flex-end; gap: 8px; }
.description-actions > * { height: 40px; padding: 0 16px; border-radius: 20px; display: flex; align-items: center; font: 600 14px Figtree, system-ui, sans-serif; }
.description-cancel { border: 1px solid var(--control); color: var(--text); }
.description-actions button { border: 0; background: var(--text); color: var(--ground); cursor: pointer; }
.viewer-heart-row { display: flex; align-items: center; gap: 8px; }
.heart-button { height: 44px; padding: 0 12px 0 8px; border-radius: 10px; border: 1px solid var(--control); background: transparent; color: var(--text); display: flex; align-items: center; gap: 6px; font: 600 15px Figtree, system-ui, sans-serif; cursor: pointer; }
.heart-button svg { fill: none; stroke: currentColor; }
.heart-button[aria-pressed="true"] svg { fill: var(--heart); stroke: var(--heart); }
.viewer-heart-names { flex: 1; min-width: 0; font-size: 13px; color: var(--text-muted); }
.viewer-filmstrip { padding: 8px 16px 20px; display: flex; justify-content: center; gap: 6px; }
.viewer-frame { width: 64px; height: 48px; flex-shrink: 0; border-radius: 6px; border: 2px solid transparent; opacity: 0.5; overflow: hidden; }
.viewer-frame[aria-current="true"] { border-color: var(--text); opacity: 1; }
.viewer-frame:hover { opacity: 1; }
.viewer-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viewer-side { padding: 8px 20px 24px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.viewer-side h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted); }
.viewer-comments { display: flex; flex-direction: column; gap: 12px; }
.viewer-no-comments { font-size: 14px; color: var(--text-muted); }
.comment { display: flex; gap: 10px; }
.comment-avatar { width: 28px; height: 28px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; background: var(--control); color: var(--text); }
.comment-body { font-size: 14px; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.comment-text { color: var(--text-soft); }
.comment-when { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* One soft field for every comment box: the field is the form, with Post inside it. Dark in the viewer;
   the activity panel and page use the page's own text colours. */
.comment-form { min-height: 44px; box-sizing: border-box; padding: 0 4px 0 14px; border-radius: 12px; background: var(--control); color: var(--text); display: flex; align-items: center; gap: 8px; }
.comment-form:focus-within { outline: 2px solid var(--text-muted); outline-offset: 1px; }
.comment-form input { flex: 1; min-width: 0; height: 44px; box-sizing: border-box; border: 0; background: transparent; padding: 0; font: 16px Figtree, system-ui, sans-serif; color: inherit; outline: none; }
.comment-form button { height: 36px; padding: 0 10px; border-radius: 8px; border: 0; background: transparent; color: inherit; font: 600 14px Figtree, system-ui, sans-serif; cursor: pointer; }
/* Post stays quiet until something is typed. */
.comment-form:has(input:placeholder-shown) button { color: var(--text-muted); }
.comment-error { font-size: 14px; color: #fca5a5; }
.viewer-side section > h2 + .viewer-info { margin-top: 10px; }
.viewer-info { display: flex; flex-direction: column; gap: 10px; }
.viewer-info-row { font-size: 14px; line-height: 1.4; }
.viewer-info-row-sub { font-size: 13px; color: var(--text-muted); }
.viewer-info-row .info-icon { display: none; }
.viewer-header-button { height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--control); display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.info-sheet { width: 100%; max-width: 100%; margin: auto 0 0; padding: 10px 20px 34px; border: 0; border-radius: 20px 20px 0 0; background: var(--ground); color: var(--text); box-sizing: border-box; }
.info-sheet::backdrop { background: rgba(0, 0, 0, 0.5); }
.info-sheet-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.info-sheet h2 { font-size: 20px; font-weight: 700; }
.info-sheet .viewer-info { gap: 12px; }
.info-sheet .viewer-info-row { display: flex; gap: 12px; align-items: flex-start; }
.info-sheet .viewer-info-row-main { font-size: 15px; font-weight: 600; }
.info-sheet .viewer-info-row-sub { color: var(--text-muted); }
.info-sheet .info-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--raised); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
/* A notice after a change covers the header's title for a few seconds, then fades, so the photo never
   moves and the header's buttons stay usable. It stays in the header rather than over the photo, which
   could stop it showing as HDR. */
.viewer-title { position: relative; }
.viewer-notice { position: absolute; inset: 0; margin: 0; padding: 0 12px; line-height: 1.25; border-radius: 22px; background: var(--banner); color: var(--text); font-size: 14px; display: flex; align-items: center; justify-content: center; text-align: center; animation: viewer-notice-out 0.4s ease 4s forwards; }
@keyframes viewer-notice-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .viewer-notice { animation-duration: 0s; } }
/* The photo's ... menu: a sheet from the bottom on a phone, a dropdown under the button on desktop. */
.photo-menu { width: 100%; max-width: 100%; margin: auto 0 0; padding: 10px 12px 28px; border: 0; border-radius: 20px 20px 0 0; background: var(--raised); color: var(--text); box-sizing: border-box; }
.photo-menu::backdrop { background: rgba(0, 0, 0, 0.5); }
.photo-menu form { margin: 0; }
.photo-menu-item { width: 100%; min-height: 48px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; display: flex; align-items: center; gap: 12px; font: 15px Figtree, system-ui, sans-serif; text-align: left; cursor: pointer; }
button.photo-menu-item:hover, button.photo-menu-item:focus-visible { background: var(--control); }
.photo-menu-note { color: var(--text-muted); cursor: default; }
.photo-menu-danger { color: var(--error); }
.photo-menu-divider { height: 1px; margin: 4px 8px; border: 0; background: var(--border); }
.photo-menu-cancel { width: 100%; height: 44px; margin-top: 8px; border: 0; border-radius: 22px; background: var(--control); color: var(--text); font: 600 15px Figtree, system-ui, sans-serif; cursor: pointer; }
/* A question before a change that loses something: a sheet on a phone, a centered box on desktop. */
.confirm-dialog { width: 100%; max-width: 100%; margin: auto 0 0; padding: 24px 20px 28px; border: 0; border-radius: 20px 20px 0 0; background: var(--raised); color: var(--text); box-sizing: border-box; }
.confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.confirm-dialog h2 { font-size: 20px; font-weight: 650; }
.confirm-dialog p { margin: 12px 0 0; font-size: 15px; line-height: 1.45; color: var(--text-muted); }
.confirm-dialog .confirm-buttons { flex-wrap: wrap; margin-top: 20px; }
.confirm-dialog form { margin: 0; }
.confirm-albums { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--ground); font-size: 14px; line-height: 1.45; }
.confirm-albums p { margin: 0; font-size: 14px; color: var(--text); }
.confirm-albums ul { margin: 4px 0 0; padding: 0; list-style: none; color: var(--text-soft); }
@media (min-width: 768px) {
  .confirm-dialog { width: 460px; margin: auto; padding: 24px; border: 1px solid var(--border); border-radius: 16px; }
  /* Right under the ... button: the side panel's 340 px plus the header's 16 px of padding. */
  .photo-menu { width: 280px; margin: 64px 356px auto auto; padding: 6px; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
  .photo-menu::backdrop { background: transparent; }
}
@media (min-width: 768px) {
  .viewer { grid-template-columns: minmax(0, 1fr) 340px; min-height: 100vh; align-content: stretch; }
  .viewer-main { height: 100vh; }
  .viewer-header { height: 68px; box-sizing: border-box; padding: 12px 16px; }
  .viewer-stage { flex: 1; min-height: 0; padding: 16px 16px 8px; }
  /* The photo is centred at the top of its area, so the panel starts level with it (canvas, Caption B).
     168 px is the header (68), the filmstrip (76) and the stage's own top and bottom padding (24). */
  .viewer-photo > img { max-height: calc(100vh - 168px); }
  .viewer-layer { padding: 16px; }
  .viewer-side { padding: 84px 32px 24px 0; }
  .viewer-description { padding-bottom: 20px; border-bottom: 1px solid var(--border); }
  .description-text { font-size: 22px; }
  .description-text[data-clamped] { -webkit-line-clamp: 6; line-clamp: 6; }
}

/* Choosing photos. Selection marks are layered with grid, so nothing needs `position` near an image. */

.picker-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 8px; }
.picker-header h1 { font-size: 17px; font-weight: 600; }
.picker-cancel { height: 44px; display: flex; align-items: center; font-weight: 500; }
.picker-header-balance { width: 52px; }
.picker-page { display: flex; flex-direction: column; }
.picker-main { display: flex; flex-direction: column; gap: 14px; padding: 8px 20px 12px; min-width: 0; }
.picker-aside { position: sticky; bottom: 0; padding: 12px 20px 20px; background: var(--ground); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; }
.picker-aside .button-primary { width: 100%; border: 0; }
.picker-aside .button-primary:disabled { opacity: 0.45; cursor: default; }
/* Arrange photos (§9 5.15). Tiles can't be selected or long-pressed into the phone's image menu. */
.arrange-status { font-size: 14px; color: var(--text-muted); }
.arrange-tiles { list-style: none; margin: 0 -20px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.arrange-tile { aspect-ratio: 1 / 1; background: var(--raised); overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.arrange-tile > img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.arrange-tile:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.arrange-tile.is-picked { outline: 3px solid var(--sun); outline-offset: -3px; }
.arrange-tile.is-placeholder { opacity: 0.25; }
.arrange-preparing { height: 100%; padding: 8px; box-sizing: border-box; display: flex; align-items: center; font-size: 12px; color: var(--text-muted); }
.arrange-ghost { position: fixed; z-index: 10; margin: 0; pointer-events: none; overflow: hidden; border-radius: 6px; outline: 3px solid var(--sun); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6); transform: scale(1.06) rotate(-2deg); cursor: grabbing; }
.arrange-ghost > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edit-link-detail { margin-left: 8px; font-size: 13px; color: var(--text-muted); }
.album-name-field { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.album-name-field label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.album-name-field input { height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border-strong); font: 600 18px Figtree, system-ui, sans-serif; color: var(--text); }
.form-error { font-size: 14px; color: var(--error); }
.trip-suggestion { padding: 12px 14px; border-radius: 12px; background: var(--banner); display: flex; align-items: center; gap: 12px; }
.trip-suggestion svg { flex-shrink: 0; color: var(--sun); }
.trip-text { flex: 1; font-size: 14px; line-height: 1.4; }
.trip-button { height: 36px; padding: 0 12px; border-radius: 18px; border: 0; background: var(--text); color: var(--ground); font: 600 13px Figtree, system-ui, sans-serif; cursor: pointer; flex-shrink: 0; }
.picker-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text-muted); }
.picker-heading .select-all-button { margin-left: auto; height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--border-strong); background: var(--ground); color: var(--text); font: 600 13px Figtree, system-ui, sans-serif; cursor: pointer; flex-shrink: 0; }
.picker-heading h2 { font-size: 15px; font-weight: 600; color: var(--text); }
.picker-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 0 -20px; }
.picker-tile { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); aspect-ratio: 1 / 1; background: var(--raised); cursor: pointer; overflow: hidden; }
.picker-tile > img, .picker-tile > .picker-check { grid-area: 1 / 1; }
.picker-tile > img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.8; }
.picker-tile:has(input:checked) > img { opacity: 1; }
.picker-tile:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: -2px; }
.picker-check { justify-self: end; align-self: start; margin: 6px; width: 22px; height: 22px; border-radius: 11px; border: 2px solid #fff; color: var(--ground); background: rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: center; }
.picker-check svg { visibility: hidden; }
.picker-tile:has(input:checked) .picker-check { background: var(--text); }
.picker-tile:has(input:checked) .picker-check svg { visibility: visible; }
/* Just added first, or one group per upload when sorted by date added (§9 2.6). */
.picker-sort { margin: 0; }
.picker-group { display: flex; flex-direction: column; gap: 10px; }
.picker-group + .picker-group { margin-top: 8px; }
.picker-group-heading { display: flex; align-items: center; gap: 12px; }
.picker-group-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.picker-group-text h3 { font-size: 15px; font-weight: 600; }
.picker-group-text p { font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.picker-group-boxed { margin: 0 -12px; padding: 12px; border-radius: var(--radius-card); background: var(--raised); border: 1px solid var(--border); }
.picker-group-boxed .picker-tiles { margin: 0 -4px; }
.picker-empty { grid-column: 1 / -1; padding: 32px 20px; text-align: center; color: var(--text-muted); }

@media (min-width: 768px) {
  .picker-header { padding: 14px 24px; border-bottom: 1px solid var(--border); }
  .picker-header h1 { font-size: 18px; }
  .picker-page { flex-direction: row; align-items: flex-start; gap: 24px; padding: 24px; }
  .picker-main { flex: 1; padding: 0; gap: 18px; }
  .picker-aside { flex: 0 0 320px; position: sticky; top: 24px; bottom: auto; padding: 0; border: 0; }
  .picker-tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px; margin: 0; }
  .arrange-tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px; margin: 0; }
  .arrange-tile { border-radius: 4px; }
  .picker-tile { border-radius: var(--radius-small); }
  .picker-group-boxed { margin: 0; padding: 16px; }
  .picker-group-boxed .picker-tiles { margin: 0; }
  .trip-text { font-size: 15px; }
}

/* The HDR view. Dark so highlights stand out, and with no `position` or `transform` on the images. */

body.night { background: var(--ground); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; }

.photo-header { padding: 12px 8px; display: flex; align-items: center; gap: 12px; }
.photo-back { min-width: 44px; height: 44px; padding: 0 12px 0 6px; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.photo-title { flex: 1; min-width: 0; text-align: center; padding-right: 44px; }
.photo-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-time { font-size: 12px; color: var(--text-muted); }

.mode-switch { padding: 3px; border-radius: 12px; background: var(--control); display: flex; gap: 2px; }
.mode-switch.phone-only { width: 240px; margin: 18px auto 0; }
.mode-switch button { flex: 1; height: 38px; white-space: nowrap; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--text-soft); font: 600 14px Figtree, system-ui, sans-serif; cursor: pointer; }
.mode-switch button[aria-checked="true"] { background: var(--text); color: var(--ground); }

.photo-stage { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.photo-pane { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1 1 600px; max-width: 100%; }
.photo-pane img { display: block; max-width: 100%; width: auto; height: auto; max-height: calc(100vh - 240px); }
.photo-pane figcaption { display: none; font-size: 14px; color: var(--text-soft); }

.photo-stage[data-mode="hdr"] [data-pane="standard"],
.photo-stage[data-mode="standard"] [data-pane="hdr"] { display: none; }
.photo-stage[data-mode="side"] .photo-pane { flex: 1 1 420px; }
.photo-stage[data-mode="side"] figcaption { display: block; }

/* Browsers that can't show HDR on this screen report it reliably; a report that it can isn't trusted,
   so the note appears only on a "no". "not all and" keeps older browsers from showing it. */
.standard-screen-note { display: none; margin: 0 auto 12px; padding: 10px 14px; width: fit-content; max-width: min(860px, calc(100% - 32px)); text-align: center; border-radius: 10px; background: var(--control); font-size: 14px; line-height: 1.45; color: var(--text-soft); }
@media not all and (dynamic-range: high) {
  .standard-screen-note { display: block; }
  .photo-note.hdr-screen-note { display: none; }
}
.photo-notes { width: 100%; max-width: 860px; margin: 18px auto 24px; padding: 0 16px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.photo-note { display: flex; justify-content: center; gap: 12px; align-items: center; font-size: 14px; line-height: 1.45; color: var(--text-soft); }
.photo-note-secondary { font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.hdr-badge { height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.7); font-size: 11px; font-weight: 700; letter-spacing: 0.6px; display: flex; align-items: center; flex-shrink: 0; color: var(--text); }

@media (min-width: 768px) {
  .photo-header { padding: 12px 16px; }
  .photo-title { padding-right: 0; }
  .photo-stage { padding: 16px 24px; }
  .mode-switch.desktop-only { display: flex; }
}

/* Sharing (§9, stage 6). */
.share-page { max-width: 600px; margin: 0 auto; padding: 8px 20px 32px; display: flex; flex-direction: column; gap: 18px; }
.share-title { font-size: 22px; font-weight: 700; }
.share-intro { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.share-link { display: flex; gap: 8px; }
.share-link input { flex: 1; min-width: 0; height: 50px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--raised); font: 500 15px Figtree, system-ui, sans-serif; color: var(--text); }
.share-link .button-primary { border: 0; flex-shrink: 0; }
.share-notice { padding: 14px; border-radius: var(--radius-card); background: var(--raised); font-size: 15px; line-height: 1.45; }
.share-mode { font-size: 15px; font-weight: 500; }
.share-row { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 8px 0; }
.share-row-label { font-size: 15px; font-weight: 500; }
.share-row-help { font-size: 13px; color: var(--text-muted); }
.share-actions .button-primary { border: 0; }
.switch { width: 52px; height: 32px; padding: 3px; border: 0; border-radius: 16px; background: var(--dim); display: flex; justify-content: flex-start; flex-shrink: 0; cursor: pointer; }
.switch span { width: 26px; height: 26px; border-radius: 13px; background: var(--ground); display: block; }
.switch[aria-checked="true"] { background: var(--text); justify-content: flex-end; }
.share-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.share-links a, .settings-link { font-size: 15px; font-weight: 600; text-decoration: underline; }
.settings-link { display: inline-block; margin-top: 16px; }
.link-list { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.link-card { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-card); display: flex; align-items: center; gap: 12px; }
.link-card.is-off .link-card-album { opacity: 0.6; }
.link-card-album { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.link-card-cover { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-control); background: var(--raised); overflow: hidden; }
.link-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.link-card-text { min-width: 0; display: flex; flex-direction: column; }
.link-card-name { font-size: 16px; font-weight: 600; }
.link-card-meta { font-size: 13px; color: var(--text-muted); }
.preview-banner { margin: 0; padding: 10px 20px; background: var(--raised); font-size: 14px; }
.preview-banner a { font-weight: 600; text-decoration: underline; }
.guest-header { max-width: 1200px; margin: 0 auto; padding: 8px 20px 0; display: flex; align-items: center; justify-content: space-between; }
.guest-sign-in { height: 44px; display: flex; align-items: center; flex-shrink: 0; white-space: nowrap; font-size: 15px; font-weight: 500; }
.guest-page { max-width: 1200px; margin: 0 auto; }
.guest-empty { padding: 20px; color: var(--text-muted); }
.closed-link { max-width: 520px; margin: 0 auto; padding: 72px 24px 34px; display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.45; color: var(--text-muted); }
.closed-link h1 { margin: 12px 0 0; font-size: 28px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.2; color: var(--text); }
.closed-link a { color: var(--text); font-weight: 600; text-decoration: underline; }
.closed-link-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--raised); display: flex; align-items: center; justify-content: center; color: var(--text-soft); }
@media (min-width: 768px) {
  .guest-shell .guest-header, .guest-shell .album-intro { padding-left: 24px; padding-right: 24px; }
  .guest-shell .album-bar { margin-left: 24px; margin-right: 24px; }
  .guest-shell .tiles { padding: 0 24px 40px; }
  .content .preview-banner { margin-bottom: 14px; border-radius: var(--radius-control); }
}
.guest-name { margin: 0 20px 14px; padding: 12px 14px; border-radius: 12px; background: var(--banner); display: flex; flex-direction: column; gap: 8px; }
.guest-name label { font-size: 14px; font-weight: 600; }
.guest-name-row { display: flex; gap: 8px; }
.guest-name-row input { flex: 1; min-width: 0; height: 44px; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--border); background: var(--ground); padding: 0 12px; font: inherit; font-size: 16px; color: var(--text); }
.guest-name-row button { height: 44px; padding: 0 16px; }
.guest-name-help { margin: 0; font-size: 13px; color: var(--text-muted); }
.viewer-comments .guest-name { margin: 12px 0 0; }
.guest-named { margin: 0 20px 14px; font-size: 14px; color: var(--text-muted); }
.guest-named summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; list-style: none; }
.guest-named summary::-webkit-details-marker { display: none; }
.guest-named summary span { color: var(--text); font-weight: 600; text-decoration: underline; }
.guest-named .guest-name { margin: 6px 0 0; }
.guest-save button { width: 100%; height: 48px; }
.shared-intro { margin: 0 0 16px; font-size: 15px; color: var(--text-muted); }
.shared-from { display: flex; align-items: center; gap: 6px; }
.shared-from .comment-avatar { width: 20px; height: 20px; font-size: 10px; }
.album-card-closed .album-card-cover { opacity: 0.35; }
.album-card-closed .album-card-name { color: var(--text-muted); }
.album-card-closed form { margin-top: 6px; }
@media (min-width: 768px) {
  .guest-save button { width: auto; padding: 0 20px; }
}
.comment-action { margin-left: 10px; padding: 0; border: none; background: none; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; cursor: pointer; }
.comment-delete { display: inline; }
.comment-edit { margin-top: 0; }
.comment-cancel { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; text-decoration: underline; color: inherit; }
/* Album activity: a panel beside the photos on a wide screen, the Activity page otherwise (§9, 6.5). */
.activity-panel { display: none; }
/* The heading sits level with the photo tabs, so space alone separates the two columns. */
.activity-panel h2 { height: 40px; margin: 0; display: flex; align-items: center; font-size: 15px; font-weight: 600; }
.activity-panel-head { display: flex; align-items: center; justify-content: space-between; }
.activity-hide { height: 36px; padding: 0 12px; border: 0; border-radius: 18px; background: none; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.activity-hide:hover { background: var(--raised); color: var(--text); }
.activity-hide[hidden] { display: none; }
.activity-panel .comment-form { margin-top: 2px; }
.activity-all { font-size: 14px; font-weight: 600; text-decoration: underline; }
.activity-empty { margin: 0; font-size: 14px; color: var(--text-muted); }
/* Activity sits on the page rather than the viewer's side panel: brighter text, fields on the raised colour. */
.activity-panel .comment-text, .activity-page .comment-text { color: var(--text); }
.activity-panel .comment-avatar, .activity-page .comment-avatar { background: var(--raised); color: var(--text-soft); }
.activity-panel .comment-when, .activity-page .comment-when { color: var(--text-muted); }
.activity-panel .comment-form, .activity-page .comment-form { background: var(--raised); color: var(--text); }
.activity-panel .comment-form:focus-within, .activity-page .comment-form:focus-within { outline-color: var(--text); }
.activity-panel .comment-form:has(input:placeholder-shown) button, .activity-page .comment-form:has(input:placeholder-shown) button { color: var(--dim); }
.activity-photo-link { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); }
.activity-page { max-width: 640px; margin: 0 auto; padding: 4px 20px 40px; display: flex; flex-direction: column; gap: 14px; }
.activity-album { margin: 0; font-size: 14px; color: var(--text-muted); }
.activity-page .guest-name { margin: 0; }
.guest-actions { display: flex; gap: 8px; }
.guest-actions .guest-save { flex: 1; }
.guest-actions .activity-link { height: 48px; padding: 0 14px; border-color: transparent; }
.guest-actions .activity-link:hover { background: var(--raised); }
.home-banner { margin: 0 20px 16px; padding: 12px 14px; border-radius: var(--radius-card); background: var(--banner); display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.4; }
.home-banner span { flex: 1; }
@media (min-width: 768px) {
  .home-banner { margin: 0 0 20px; }
  .guest-actions .activity-link { height: 40px; }
}
@media (min-width: 1100px) {
  .album-body { display: flex; align-items: flex-start; gap: 40px; }
  .album-body-photos { flex: 1; min-width: 0; }
  .activity-panel { flex: 0 0 300px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }
  .guest-shell .activity-panel { margin-right: 24px; }
  /* Beside the panel the Activity button isn't needed, until the panel is hidden; then it brings it back. */
  html:not(.activity-hidden) .activity-link.beside-panel { display: none; }
  .activity-hidden .activity-panel { display: none; }
}