/* Общие панели «О фотографии» и «Где это» для новых стилей. Стиль задаёт только переменные:
   --p-bg, --p-ink, --p-dim, --p-line, --p-accent, --p-radius, --p-font, --p-title-font, --p-title-weight,
   --p-btn-bg, --p-btn-ink, --g-bg, --g-ink, --g-line, --g-accent. */
.ui-panel {
  left: 10px; right: 10px; bottom: calc(10px + var(--sab));
  max-height: calc(100svh - 80px - var(--sat)); overflow: auto; overscroll-behavior: contain;
  padding: 22px 22px 20px; border-radius: var(--p-radius, 20px);
  background: var(--p-bg, #fff); color: var(--p-ink, #111);
  font: 400 15px/1.45 var(--p-font, system-ui, sans-serif);
  box-shadow: 0 30px 90px -24px rgba(0, 0, 0, .45);
}
.ui-panel .p-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; font: 300 26px/1 var(--p-font, sans-serif); color: var(--p-dim, #777); }
.ui-panel .p-close:hover { background: var(--p-line, rgba(0, 0, 0, .06)); }
.ui-panel .p-kick { margin: 0 46px 8px 0; font: 600 11.5px/1.2 var(--p-font, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--p-accent, #888); }
.ui-panel .p-title { margin: 0 46px 8px 0; font: var(--p-title-weight, 600) 26px/1.08 var(--p-title-font, var(--p-font, sans-serif)); letter-spacing: -.02em; }
.ui-panel .p-lead { margin: 0 0 4px; font-weight: 600; }
.ui-panel .p-small { margin: 0 0 12px; color: var(--p-dim, #666); font-size: 14px; }
.ui-panel .p-list { display: grid; grid-template-columns: 112px 1fr; gap: 7px 12px; margin: 12px 0 16px; font-size: 14px; }
.ui-panel .p-list dt { color: var(--p-dim, #888); }
.ui-panel .p-list dd { margin: 0; }
.ui-panel .p-list a { color: inherit; }
.ui-panel .p-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--p-btn-bg, #111); color: var(--p-btn-ink, #fff); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.ui-panel.ui-where { text-align: center; }
.ui-panel.ui-where canvas { width: min(240px, 64vw); margin: 6px auto 10px; --globe-bg: var(--g-bg, #10131c); --globe-ink: var(--g-ink, rgba(255, 255, 255, .9)); --globe-line: var(--g-line, rgba(255, 255, 255, .14)); --globe-accent: var(--g-accent, #ff7a59); }
.ui-panel.ui-where .p-title { margin: 6px 0 4px; }
.ui-panel .p-coords { font-size: 12.5px; margin-bottom: 0; }
@media (min-width: 760px) {
  .ui-panel { left: auto; right: var(--p-right, 24px); top: var(--p-top, 80px); bottom: auto; width: 420px; }
  .ui-panel.ui-where { width: 340px; }
}