/* ---------- album cover / summary chips ---------- */
.cover-preview {
  margin-top: 18px; display: none; align-items: center; gap: 16px; max-width: 460px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(var(--wash-rgb), .03);
  backdrop-filter: blur(8px); padding: 14px 18px;
}
.cover-preview.visible { display: flex; }
.cover-preview img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line-strong); flex-shrink: 0; }
.cover-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cover-found { color: var(--accent); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
/* The album's name on two lines at most: on one, a 26-letter name was cut after 21 on a phone 320 px wide. */
.cover-info strong { font-size: 1rem; color: var(--ink); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cover-info small { color: var(--muted); font-size: .82rem; }
/* The album link's error: only its icon and first sentence are red; how to recover reads as plain text. */
#album-error.error { color: var(--ink) !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px;
  margin-top: .45rem; }   /* one group with the hint above it */
#album-error:empty { display: none; }   /* no reserved blank line under the hint */
#album-error .error-icon::before { content: "!"; display: inline-grid; place-items: center; width: 1.15em; height: 1.15em;
  border-radius: 50%; background: var(--danger); color: var(--on-danger); font-weight: 800; font-size: .85em; }
#album-error .error-lead { color: var(--danger); font-weight: 600; flex: 1 1 0; min-width: 0; }
#album-error .error-next { flex-basis: 100%; white-space: normal; margin-top: 6px; color: var(--muted); }   /* its own line, not a blank one above it */
.album-summary { display: none; align-items: center; gap: 16px; margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.album-summary.visible { display: flex; }
.album-summary img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line-strong); flex-shrink: 0; }
.album-summary .cover-info strong { color: var(--ink); }
.album-summary .cover-info small { color: var(--muted); }
/* The album's service as a badge on its cover (app-service-icon.js), on every screen that shows the cover. */
.album-cover { position: relative; display: inline-flex; flex-shrink: 0; }
.album-summary .album-cover .service-icon { position: absolute; inset-inline-start: auto; top: auto; inset-inline-end: -7px; bottom: -7px; width: 26px; height: 26px; padding: 4px;
  border: 0; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); transform: none;
  animation: none; }
/* A service's icon standing in for a cover (photos picked at a service have none): whole, on white, not cropped. */
.album-cover img:not(.service-icon)[src*=".svg"] { object-fit: contain; padding: 12px; background: #fff; box-sizing: border-box; }
/* The format page's: one slim line between its title and the choice, not a section of its own. */
#step2-album-summary { gap: 12px; margin: 2px 0 4px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(var(--wash-rgb), .03); }
#step2-album-summary img { width: 40px; height: 40px; border-radius: 8px; }
#step2-album-summary .album-cover .service-icon { inset-inline-end: -5px; bottom: -5px; width: 20px; height: 20px; padding: 3px; }
#step2-album-summary .cover-info { gap: 1px; }
#step2-album-summary .cover-info strong { font-size: .95rem; -webkit-line-clamp: 1; }
#step2-album-summary .cover-info small { font-size: .78rem; }

.album-warning {
  margin: 10px 0 0; max-width: 460px; font-size: .82rem; line-height: 1.5; color: var(--accent);
  background: rgba(240, 177, 85, .1); border: 1px solid rgba(240, 177, 85, .3); border-radius: var(--r-md);
  padding: 10px 14px;
}


/* The header's one menu (header-menu.js): three dots, and under them New album and the theme (theme.js shows the
   current choice's icon in its row). The language chip beside it stays out of the menu on purpose. */
.header-menu { position: relative; flex: none; }
.header-menu-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer; color: var(--ink-dim);
  background: transparent; border: 1px solid var(--line-strong); border-radius: 50%; transition: background .15s ease, color .15s ease; }
.header-menu-btn svg { width: 20px; height: 20px; fill: currentColor; }
.header-menu-btn:hover, .header-menu-btn[aria-expanded="true"] { background: var(--surface-hover); color: var(--ink); }
.header-menu-list { position: absolute; z-index: 60; inset-inline-end: 0; top: calc(100% + 6px); min-width: min(240px, calc(100vw - 32px));
  margin: 0; padding: 6px; list-style: none; border-radius: var(--r-md); background: var(--surface-2);
  border: 1px solid var(--line-strong); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.header-menu-list[hidden] { display: none; }
.header-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0;
  border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: .95rem; text-align: start; cursor: pointer; }
.header-menu-item:hover { background: var(--surface-hover); }
.header-menu-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.header-menu-value { min-width: 0; margin-inline-start: auto; color: var(--muted); font-size: .82rem; text-align: end; }
/* The language picker: the button carries the language's own two letters beside a globe, and the list names each
   language in itself. Logical sides, so in a language read right to left the list opens from the other edge. */
.language-pick { position: relative; flex: none; }
.language-pick-now { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 8px; cursor: pointer;
  color: var(--ink-dim); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px;
  font: inherit; font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  transition: background .15s ease, color .15s ease; }
.language-pick-now:hover, .language-pick-now[aria-expanded="true"] { background: var(--surface-hover); color: var(--ink); }
.language-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.language-pick-list { position: absolute; z-index: 60; inset-inline-end: 0; top: calc(100% + 6px); min-width: 170px;
  margin: 0; padding: 6px; list-style: none; border-radius: var(--r-md); background: var(--surface-2);
  border: 1px solid var(--line-strong); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.language-pick-list a { display: block; padding: 10px 12px; min-height: 24px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: .95rem; }
.language-pick-list a:hover { background: var(--surface-hover); }
.language-pick-list a[aria-current] { color: var(--accent); font-weight: 600; }
.theme-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: none; }
:root:not([data-theme-choice]) .theme-ico-system, [data-theme-choice="system"] .theme-ico-system,
[data-theme-choice="light"] .theme-ico-light, [data-theme-choice="dark"] .theme-ico-dark { display: block; }
/* The note that names the pick for a few seconds (theme.js), under the header, at the side the button is on. */
.theme-note { position: fixed; top: 72px; inset-inline-end: 16px; z-index: 60; max-width: calc(100% - 32px); padding: 10px 14px;
  border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-strong);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35); font-size: .9rem; pointer-events: none; }

/* Labels drawn as pills or badges: a tap or a click on one looks like pressing a button, so it must never select its text. */
.showcase-places li, .preview-tag, .trail-badge, .trail-chip, .tile-number, .slide-member-number, .snippet-badge, .video-badge, .pill {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* A page script that did not arrive (app-errors.js sayPartMissing): the one thing the page can still say. It sits in the page's
   flow, first in the body, never fixed: a fixed strip at the bottom covered the review's fixed Next button (a tap on the button
   reached the strip), and a fixed one at the top would cover the sticky header. */
.part-missing { position: static; display: flex; gap: 12px; flex-wrap: wrap;
  align-items: center; justify-content: center; padding: 14px 16px; background: var(--danger); color: var(--on-danger);
  font-weight: 600; text-align: center; }
.part-missing button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: #fff;
  color: #1a1206; font: inherit; font-weight: 700; cursor: pointer; }
/* One of the review's own scripts is missing: the review is half built (the flat grid is the old editor, Your film has no
   controls), so none of it is shown as ready. The reload reopens the same film's review from its saved draft. */
body[data-part-missing="review"] #review-panel, body[data-part-missing="review"] #reopening-review { display: none; }

/* A tap that landed before the page's scripts had run (app-errors.js sayStillOpening). */
.still-opening { position: fixed; inset-inline: 0; bottom: 0; z-index: 9998; padding: 12px 16px;
  background: var(--surface-2); color: var(--ink); text-align: center; font-weight: 600;
  box-shadow: 0 -6px 18px -12px rgba(0, 0, 0, .8); }