:root {
  color-scheme: dark;
  --black: #090a0a;
  --black-soft: #111313;
  --black-raised: #191b1b;
  --white: #fffef7;
  --paper: #f4f1e9;
  --paper-deep: #e7e1d5;
  --ink: #0b0c0c;
  --muted: #a7aaa4;
  --paper-muted: #676a65;
  --line-dark: rgba(255, 255, 255, 0.14);
  --line-paper: rgba(11, 12, 12, 0.13);
  --acid: #d8ff3e;
  --acid-deep: #b9e900;
  --coral: #ff6447;
  --blue: #5eb8ff;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  --shadow-small: 0 10px 28px rgba(0, 0, 0, 0.22);
  --radius-control: 12px;
  --radius-card: 20px;
  --radius-sheet: 28px;
  --z-map: 0;
  --z-overlay: 10;
  --z-header: 30;
  --z-detail: 60;
  --z-modal: 80;
  --z-toast: 90;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}
#map:not([data-basemap-status]), #map[data-basemap-status="loading"] { background:var(--black-raised); }
#map[data-basemap-status="loading"] canvas { opacity:0; }
#map canvas { transition:opacity 160ms ease-out; }
[role="dialog"] :is(h1,h2,h3)[tabindex="-1"]:focus { outline:none; }

button,
input,
select {
  font: inherit;
}

button,
select,
input[type="checkbox"] {
  cursor: pointer;
  touch-action: manipulation;
}

button {
  border: 0;
}

button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 3px;
}

svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

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

.loading-screen {
  display: grid;
  min-height: 100vh;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: var(--black);
}

.loading-screen p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.loading-mark,
.brand-mark {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #f6f1e7;
  color: var(--black);
  font-weight: 950;
}

.loading-mark {
  width: 56px;
  height: 56px;
  font-size: 24px;
}

.brand-mark img,
.loading-mark img {
  display: block;
  width: 92%;
  height: auto;
}

.atlas-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  width: 100vw;
  height: 100vh;
  min-height: 620px;
  background: var(--black);
  transition: grid-template-columns 220ms ease-out;
}

.atlas-shell.rail-collapsed {
  grid-template-columns: minmax(0, 1fr) 0;
}

.atlas-shell.rail-collapsed .atlas-rail {
  transform: translateX(100%);
}

.map-pane {
  --map-actions-bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px));
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #d8ddd3;
}

.map-pane::before,
.map-pane::after {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  pointer-events: none;
  content: "";
}

.map-pane::before {
  top: 0;
  height: 330px;
  background: linear-gradient(180deg, rgba(9, 10, 10, 0.94) 0%, rgba(9, 10, 10, 0.7) 42%, rgba(9, 10, 10, 0) 100%);
}

.map-pane::after {
  bottom: 0;
  height: 150px;
  background: linear-gradient(0deg, rgba(9, 10, 10, 0.48), rgba(9, 10, 10, 0));
}

.map-canvas {
  position: absolute;
  z-index: var(--z-map);
  inset: 0;
  background: #d8ddd3;
}

.leaflet-container {
  font: inherit;
}

.leaflet-control-attribution {
  margin: 0 !important;
  padding: 2px 8px !important;
  max-width: 100%;
  border-radius: 0 6px 0 0;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #383b36;
  font-size: 11px;
  line-height: 1.4;
  backdrop-filter: blur(8px);
}

.leaflet-bottom.leaflet-left {
  left: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  max-width: 100%;
}

.leaflet-control-attribution a {
  color: #30342f;
}

.leaflet-bottom.leaflet-right {
  right: 18px;
  bottom: 62px;
}

.leaflet-control-zoom {
  overflow: hidden;
  border: 1px solid rgba(9, 10, 10, 0.22) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-small) !important;
}

.leaflet-control-zoom a {
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  place-items: center;
  border-bottom-color: rgba(9, 10, 10, 0.15) !important;
  background: var(--white) !important;
  color: var(--black) !important;
  font-size: 24px !important;
  line-height: 44px !important;
}

.topbar {
  position: absolute;
  z-index: var(--z-header);
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: max(16px, env(safe-area-inset-top)) 24px 10px;
}

.brand-lockup,
.topbar-actions,
.map-access-panel,
.map-locate,
.map-caption,
.rail-heading,
.section-label,
.privacy-card-head,
.detail-kicker,
.detail-title-row,
.modal-header,
.privacy-list-head,
.import-schema {
  display: flex;
  align-items: center;
}

.brand-lockup {
  min-width: 0;
  gap: 11px;
}

.brand-mark {
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  border: 0;
  box-shadow: none;
  font-size: 18px;
}

.brand-name,
.brand-subtitle,
.eyebrow,
.intro-copy,
.data-card-copy p,
.privacy-card p,
.import-note,
.detail-title-row p,
.modal-copy {
  margin: 0;
}

.brand-name {
  color: var(--white);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.4px;
}

/* Our Where option 02: outlined wordmark only; existing page typography stays. */
.brand-wordmark {
  display: block;
  width: 144px;
  height: 28px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
}
.brand-lockup:has(.brand-wordmark) { height: 43px; }
.brand-wordmark-owner { width: 120px; height: 24px; }
.brand-wordmark-modal { width: 88px; height: 16px; }
.loading-wordmark { width: 168px; height: 56px; background: transparent; }
.loading-wordmark img { width: 100%; height: 32px; object-fit: contain; }
@media (max-width:820px), (max-height:500px) {
  .map-controls .brand-lockup:has(.brand-wordmark) { height: 32px; }
  .map-controls .brand-wordmark { width: 88px; height: 22px; }
}

.brand-subtitle {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  color: rgba(255, 254, 247, 0.67);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15px;
}

.brand-dot,
.sync-dot,
.caption-dot,
.note-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acid);
}

.topbar-actions {
  gap: 9px;
}

.sync-status {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 0 13px;
  background: rgba(9, 10, 10, 0.55);
  color: rgba(255, 254, 247, 0.8);
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(12px);
}

.sync-dot {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 4px rgba(216, 255, 62, 0.13);
}

.button,
.icon-button,
.map-locate,
.allowed-members-button,
.login-chip,
.text-button,
.inline-link {
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.button:active,
.icon-button:active,
.map-locate:active,
.allowed-members-button:active,
.login-chip:active,
.roll-item:active {
  transform: scale(0.97);
}

.button:disabled,
.icon-button:disabled,
.text-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  pointer-events: none;
}

.button-acid {
  border: 1px solid var(--acid);
  background: var(--acid);
  color: var(--black);
  box-shadow: 0 10px 28px rgba(216, 255, 62, 0.18);
}

.button-acid:hover {
  background: #e2ff70;
  box-shadow: 0 12px 34px rgba(216, 255, 62, 0.24);
}

.button-dark {
  width: 100%;
  justify-content: space-between;
  border: 1px solid var(--black);
  background: var(--black);
  color: var(--white);
}

.button-outline {
  border: 1px solid var(--line-dark);
  background: transparent;
  color: var(--white);
}

.button-outline:hover,
.icon-button:hover {
  background: rgba(255, 255, 255, 0.11);
}

.button-outline.is-danger {
  border-color: rgba(255, 100, 71, 0.55);
  color: #ff9b87;
}

.button-danger {
  border: 1px solid var(--coral);
  background: var(--coral);
  color: var(--black);
  box-shadow: 0 10px 28px rgba(255, 100, 71, 0.16);
}

.button-danger:hover {
  background: #ff8068;
  box-shadow: 0 12px 32px rgba(255, 100, 71, 0.22);
}

.button-remove {
  grid-column: 1 / -1;
  border: 1px solid rgba(255, 100, 71, 0.44);
  background: rgba(255, 100, 71, 0.07);
  color: #ff9b87;
}

.button-remove:hover {
  border-color: var(--coral);
  background: rgba(255, 100, 71, 0.14);
}

.icon-button {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  background: rgba(9, 10, 10, 0.62);
  color: var(--white);
  backdrop-filter: blur(12px);
}

.map-intro {
  position: absolute;
  z-index: var(--z-overlay);
  top: 92px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  pointer-events: none;
}

.eyebrow {
  color: var(--acid);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 1.5px;
}

.map-intro h1 {
  max-width: 650px;
  margin: 6px 0 5px;
  color: var(--white);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 950;
  line-height: 0.96;
  letter-spacing: -2.7px;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
}

.intro-copy {
  max-width: 560px;
  color: rgba(255, 254, 247, 0.72);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}

.intro-count {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 9px;
  padding-bottom: 3px;
  color: var(--white);
}

.intro-count strong {
  color: var(--acid);
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -2px;
}

.intro-count span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.map-toolbar {
  position: absolute;
  z-index: var(--z-header);
  top: 204px;
  left: 24px;
  display: flex;
  max-width: calc(100% - 48px);
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.search-field,
.select-field {
  display: flex;
  min-height: 44px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(9, 10, 10, 0.78);
  color: var(--white);
  box-shadow: var(--shadow-small);
  backdrop-filter: blur(16px);
}

.search-field {
  width: min(285px, 34vw);
  gap: 9px;
  padding: 0 13px;
}

.search-field svg {
  width: 17px;
  height: 17px;
  color: rgba(255, 255, 255, 0.62);
}

.search-field input,
.select-field select {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--white);
  font-size: 12px;
  font-weight: 750;
}

.search-field input {
  width: 100%;
}

.search-field input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.select-field {
  min-width: 105px;
  padding: 0 4px 0 12px;
}

.select-field select {
  width: 100%;
  min-height: 42px;
  padding-right: 8px;
}

.region-select {
  min-width: 122px;
}

.toolbar-button {
  width: 44px;
  height: 44px;
}

.map-overlay {
  position: absolute;
  z-index: var(--z-overlay);
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.map-overlay-top {
  top: 265px;
}

.map-overlay-bottom {
  bottom: 18px;
}

.map-caption {
  min-height: 32px;
  gap: 7px;
  border: 1px solid rgba(9, 10, 10, 0.14);
  border-radius: 999px;
  padding: 0 11px;
  background: rgba(255, 254, 247, 0.88);
  color: var(--black);
  box-shadow: var(--shadow-small);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.map-caption-muted {
  color: #4e514c;
}

.caption-dot {
  width: 6px;
  height: 6px;
  background: var(--coral);
}

.map-locate {
  min-height: 38px;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(9, 10, 10, 0.76);
  color: rgba(255, 254, 247, 0.84);
  box-shadow: var(--shadow-small);
  font-size: 10px;
  font-weight: 850;
  backdrop-filter: blur(14px);
  pointer-events: auto;
}

.map-locate {
  color: var(--white);
}

.map-locate:hover {
  background: rgba(9, 10, 10, 0.9);
}

.map-access-panel {
  min-width: 0;
  max-width: min(540px, calc(100% - 104px));
  min-height: 50px;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 4px;
  background: rgba(9, 10, 10, 0.8);
  box-shadow: var(--shadow-small);
  color: var(--white);
  backdrop-filter: blur(14px);
  pointer-events: auto;
}

.allowed-members-button,
.login-chip {
  display: flex;
  min-height: 42px;
  align-items: center;
  border-radius: 999px;
  color: var(--white);
}

.allowed-members-button {
  min-width: 0;
  flex: 1;
  gap: 10px;
  padding: 0 8px;
  background: transparent;
}

.allowed-members-button:hover {
  background: rgba(255, 255, 255, 0.075);
}

.member-avatar-stack {
  display: flex;
  flex: 0 0 auto;
  padding-left: 8px;
}

.member-avatar {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid var(--black);
  border-radius: 50%;
  color: var(--black);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.member-avatar-stack .member-avatar {
  margin-left: -8px;
}

.member-avatar-acid {
  background: var(--acid);
}

.member-avatar-blue {
  background: var(--blue);
}

.member-avatar-coral {
  background: var(--coral);
}

.member-avatar-white,
.member-avatar-more {
  background: var(--white);
}

.member-avatar-more {
  color: var(--black);
  font-size: 8px;
}

.map-access-copy {
  display: block;
  min-width: 0;
  text-align: left;
}

.map-access-copy strong,
.map-access-copy > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-access-copy strong {
  font-size: 10px;
  font-weight: 900;
}

.map-access-copy > span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
}

.login-chip {
  flex: 0 0 auto;
  gap: 7px;
  padding: 0 12px 0 7px;
  border: 1px solid rgba(216, 255, 62, 0.32);
  background: rgba(216, 255, 62, 0.09);
  font-size: 9px;
  font-weight: 950;
}

.login-chip:hover {
  border-color: var(--acid);
  background: rgba(216, 255, 62, 0.16);
}

.login-icon {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 50%;
  background: var(--acid);
  color: var(--black);
}

.login-icon svg {
  width: 16px;
  height: 16px;
}

.login-avatar {
  width: 29px;
  height: 29px;
}

.map-empty,
.map-error {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
}

.map-empty {
  display: flex;
  width: min(340px, calc(100% - 32px));
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-card);
  padding: 28px;
  background: rgba(9, 10, 10, 0.9);
  box-shadow: var(--shadow);
  color: var(--white);
  text-align: center;
  backdrop-filter: blur(18px);
}

.map-empty.is-hidden {
  display: none;
}

.map-empty.has-guide-close {
  padding-top: 48px;
}

.guide-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
}

.map-empty > span:not(.empty-mark),
.map-empty > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.empty-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--acid);
  color: var(--black);
}

.map-error {
  width: min(440px, calc(100% - 32px));
  border: 1px solid rgba(255, 100, 71, 0.48);
  border-radius: var(--radius-control);
  padding: 15px;
  background: rgba(60, 13, 8, 0.92);
  color: #ffd8d0;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.photo-marker-icon,
.photo-cluster-icon {
  background: transparent;
  border: 0;
}

.photo-marker-icon,
.photo-marker-icon * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.photo-marker img {
  -webkit-user-drag: none;
}

.photo-marker {
  position: relative;
  display: block;
  width: 58px;
  height: 58px;
  border: 3px solid var(--black);
  border-radius: 50%;
  background: var(--black);
  box-shadow: 0 0 0 3px var(--white), 0 10px 26px rgba(0, 0, 0, 0.36);
  transform-origin: center 72px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.photo-marker::before,
.photo-marker::after {
  content: "";
  position: absolute;
  top: 55px;
  left: 50%;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}

.photo-marker::before {
  width: 22px;
  height: 14px;
  background: var(--white);
}

.photo-marker::after {
  width: 14px;
  height: 9px;
  background: var(--black);
}

.photo-marker:hover {
  transform: scale(1.07);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--acid), 0 14px 32px rgba(0, 0, 0, 0.42);
}

.photo-marker-crop {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
}

.photo-marker img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.025);
}

.marker-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  display: none;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--coral);
  color: var(--white);
  font-size: 8px;
  font-weight: 950;
}

.marker-badge:not(:empty) {
  display: grid;
}

.photo-cluster {
  position: relative;
  display: grid;
  width: 66px;
  height: 66px;
  place-content: center;
  border: 3px solid var(--black);
  border-radius: 50%;
  background: var(--acid);
  color: var(--black);
  box-shadow: 0 0 0 3px var(--white), 0 12px 30px rgba(0, 0, 0, 0.3);
  text-align: center;
  transition: transform 180ms ease;
}

.photo-cluster:hover {
  transform: scale(1.07);
}

.photo-cluster-icon.is-pressing .photo-cluster {
  transform: scale(.96);
}
.photo-cluster-icon.is-pressing .photo-cluster::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 3px solid var(--black);
  border-radius: 50%;
  pointer-events: none;
  animation: photo-cluster-hold 650ms ease-out forwards;
}
@keyframes photo-cluster-hold {
  from { opacity: .15; transform: scale(.92); }
  to { opacity: 1; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-cluster-icon.is-pressing .photo-cluster::after { animation: none; }
}

.photo-cluster strong,
.photo-cluster span {
  display: block;
}

.photo-cluster strong {
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
}

.photo-cluster span {
  margin-top: 2px;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.photo-tooltip {
  overflow: hidden;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 0 !important;
  background: var(--black) !important;
  box-shadow: var(--shadow-small) !important;
  color: var(--white) !important;
}

.photo-tooltip::before {
  border-top-color: var(--black) !important;
}

.hover-preview {
  display: grid;
  grid-template-columns: 62px 1fr;
  min-width: 175px;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 7px;
}

.hover-preview img {
  width: 62px;
  height: 50px;
  border-radius: 9px;
  object-fit: cover;
}

.hover-preview strong,
.hover-preview small {
  display: block;
}

.hover-preview strong {
  font-size: 12px;
}

.hover-preview small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.atlas-rail {
  position: relative;
  z-index: 35;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--paper);
  color: var(--ink);
  transition: transform 220ms ease-out;
}

.rail-scroll {
  flex: 1;
  overflow-y: auto;
  padding: max(24px, env(safe-area-inset-top)) 22px 24px;
}

.rail-heading {
  justify-content: space-between;
}

.rail-heading .eyebrow {
  color: #657700;
}

.rail-heading h2,
.modal-header h2,
.detail-title-row h2 {
  margin: 4px 0 0;
  font-weight: 950;
  letter-spacing: -1.1px;
}

.rail-heading h2 {
  font-size: 29px;
}

.rail-close {
  border-color: var(--line-paper);
  background: transparent;
  color: var(--ink);
}

.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 21px 0 27px;
  border-top: 1px solid var(--line-paper);
  border-bottom: 1px solid var(--line-paper);
}

.stats-strip div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  padding: 14px 8px 14px 0;
}

.stats-strip div + div {
  border-left: 1px solid var(--line-paper);
  padding-left: 14px;
}

.stats-strip strong {
  font-size: 23px;
  font-weight: 950;
  letter-spacing: -1px;
}

.stats-strip span {
  color: var(--paper-muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.section-label {
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--paper-muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.section-count {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-deep);
  color: var(--ink);
}

.roll-list {
  display: grid;
  gap: 5px;
}

.roll-item {
  display: grid;
  min-height: 62px;
  grid-template-columns: 51px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 5px 5px 5px 6px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.roll-item:hover,
.roll-item.is-selected {
  border-color: var(--line-paper);
  background: rgba(255, 255, 255, 0.64);
}

.roll-item.is-selected {
  box-shadow: inset 3px 0 0 var(--acid-deep);
}

.roll-thumb {
  width: 51px;
  height: 51px;
  overflow: hidden;
  border-radius: 11px;
  background: var(--paper-deep);
}

.roll-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.roll-copy {
  min-width: 0;
}

.roll-copy strong,
.roll-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roll-copy strong {
  font-size: 13px;
  font-weight: 900;
}

.roll-copy span {
  margin-top: 4px;
  color: var(--paper-muted);
  font-size: 9px;
  font-weight: 700;
}

.roll-copy b {
  color: #a1a49d;
  font-weight: 700;
}

.roll-arrow {
  color: #7a7d77;
}

.roll-arrow svg {
  width: 16px;
  height: 16px;
}

.rail-empty {
  border: 1px dashed var(--line-paper);
  border-radius: 14px;
  padding: 22px;
  color: var(--paper-muted);
  font-size: 12px;
  text-align: center;
}

.data-card,
.privacy-card {
  margin-top: 20px;
  border-radius: var(--radius-card);
}

.data-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line-paper);
  padding: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.data-card-icon,
.privacy-icon,
.note-icon,
.schema-check {
  display: grid;
  place-items: center;
}

.data-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--black);
  color: var(--acid);
}

.data-card-copy strong {
  font-size: 12px;
  font-weight: 900;
}

.data-card-copy p {
  margin-top: 3px;
  color: var(--paper-muted);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.45;
}

.data-card-actions {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 7px;
}

.text-button-muted {
  color: var(--paper-muted);
  font-size: 8px;
}

.text-button,
.inline-link {
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-size: 10px;
  font-weight: 950;
}

.text-button:hover,
.inline-link:hover {
  color: #687a00;
}

.privacy-card {
  padding: 16px;
  background: var(--acid);
  color: var(--ink);
}

.privacy-card-head {
  gap: 8px;
  font-size: 12px;
  font-weight: 950;
}

.privacy-icon {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--black);
  color: var(--acid);
}

.privacy-icon svg {
  width: 14px;
  height: 14px;
}

.privacy-live {
  margin-left: auto;
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(9, 10, 10, 0.1);
  font-size: 8px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.privacy-card p {
  margin: 12px 0 15px;
  color: rgba(9, 10, 10, 0.7);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}

.privacy-card .button-dark {
  min-height: 42px;
  font-size: 11px;
}

.import-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  color: var(--paper-muted);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.5;
}

.note-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--coral);
}

.inline-link {
  font-size: inherit;
  text-decoration: underline;
}

.rail-footer {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line-paper);
  padding: 0 22px max(0px, env(safe-area-inset-bottom));
  color: var(--paper-muted);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.detail-scrim,
.modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(2px);
}

.detail-scrim {
  z-index: calc(var(--z-detail) - 1);
}

.detail-sheet {
  position: fixed;
  z-index: var(--z-detail);
  top: 18px;
  bottom: 18px;
  right: 408px;
  display: flex;
  width: min(430px, calc(100vw - 440px));
  min-width: 360px;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sheet);
  background: var(--black-soft);
  box-shadow: var(--shadow);
  animation: sheet-in 240ms ease-out both;
}

.sheet-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  background: rgba(9, 10, 10, 0.65);
}

.detail-image-wrap {
  width: min(74%, 310px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  align-self: center;
  overflow: hidden;
  margin: 24px auto 2px;
  border: 3px solid var(--black);
  border-radius: 24px;
  background: #1f2121;
  box-shadow: 0 0 0 3px var(--white), 0 18px 42px rgba(0, 0, 0, 0.34);
}

.detail-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.detail-image-button { position:relative; }
.detail-image-button .detail-preview { position:absolute; inset:0; filter:blur(2px); }
.detail-image-button img[data-detail-full] { position:relative; z-index:1; }

.detail-body {
  padding: 21px;
}

.detail-kicker {
  gap: 7px;
  color: var(--acid);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

.detail-id {
  margin-left: auto;
  color: var(--muted);
}

.detail-title-row {
  justify-content: space-between;
  gap: 16px;
  margin-top: 9px;
}

.detail-title-row h2 {
  font-size: 28px;
}

.detail-title-row p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.detail-year {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--white);
  font-size: 11px;
  font-weight: 950;
}

.detail-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.detail-meta-grid > div {
  min-width: 0;
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  padding: 12px;
  background: var(--black-raised);
}

.meta-label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.detail-meta-grid strong {
  display: block;
  overflow: hidden;
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.detail-actions .button {
  padding: 0 12px;
  font-size: 10px;
}

.detail-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.45;
}

.note-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(216, 255, 62, 0.12);
  color: var(--acid);
}

.note-icon svg {
  width: 14px;
  height: 14px;
}

.modal-scrim {
  z-index: calc(var(--z-modal) - 1);
}

.modal {
  position: fixed;
  z-index: var(--z-modal);
  top: 50%;
  left: 50%;
  width: min(620px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  overflow-y: auto;
  transform: translate(-50%, -50%);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sheet);
  padding: 24px;
  background: var(--black-soft);
  color: var(--white);
  box-shadow: var(--shadow);
  animation: modal-in 220ms ease-out both;
}

.modal-header {
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.modal-header h2 {
  max-width: 470px;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1;
}

.modal-copy {
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.55;
}

.privacy-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 18px 0 12px;
}

.privacy-summary div {
  border: 1px solid var(--line-dark);
  border-radius: 15px;
  padding: 13px;
  background: var(--black-raised);
}

.privacy-summary strong,
.privacy-summary span {
  display: block;
}

.privacy-summary strong {
  color: var(--acid);
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.8px;
}

.privacy-summary span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.toggle-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 44px;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(216, 255, 62, 0.24);
  border-radius: 15px;
  padding: 13px 14px;
  background: rgba(216, 255, 62, 0.07);
}

.toggle-row strong,
.toggle-row small {
  display: block;
}

.toggle-row strong {
  font-size: 12px;
}

.toggle-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.toggle-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.toggle-ui {
  position: relative;
  width: 44px;
  height: 26px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: #303333;
  transition: background-color 180ms ease;
}

.toggle-ui::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  content: "";
  transition: transform 180ms ease;
}

.toggle-row input:checked + .toggle-ui {
  background: var(--acid);
}

.toggle-row input:checked + .toggle-ui::after {
  transform: translateX(18px);
  background: var(--black);
}

.privacy-list {
  margin-top: 13px;
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  overflow: hidden;
}

.privacy-list-head {
  min-height: 44px;
  justify-content: space-between;
  padding: 0 13px;
  background: var(--black-raised);
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.privacy-list-head .text-button {
  color: var(--acid);
}

.privacy-photo {
  position: relative;
  display: grid;
  min-height: 54px;
  grid-template-columns: 22px 40px 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-top: 1px solid var(--line-dark);
  transition: opacity 180ms ease, background-color 180ms ease;
}

.privacy-photo:hover {
  background: rgba(255, 255, 255, 0.035);
}

.privacy-photo.is-hidden {
  opacity: 0.48;
}

.privacy-photo input {
  position: absolute;
  opacity: 0;
}

.privacy-check {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  color: transparent;
}

.privacy-photo input:checked + .privacy-check {
  border-color: var(--acid);
  background: var(--acid);
  color: var(--black);
}

.privacy-check svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.5;
}

.privacy-photo img {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  object-fit: cover;
}

.privacy-photo strong,
.privacy-photo small {
  display: block;
}

.privacy-photo strong {
  font-size: 11px;
}

.privacy-photo small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.manage-toolbar {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  padding: 0 13px;
  background: var(--black-raised);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.manage-toolbar strong {
  color: var(--acid);
  font-size: 15px;
}

.manage-toolbar .text-button {
  min-width: 44px;
  min-height: 44px;
  color: var(--acid);
}

.manage-list {
  max-height: min(430px, 48vh);
  margin-top: 10px;
  overflow-y: auto;
  border: 1px solid var(--line-dark);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.015);
}

.manage-photo {
  position: relative;
  display: grid;
  min-height: 66px;
  grid-template-columns: 24px 48px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-dark);
  cursor: pointer;
  content-visibility: auto;
  contain-intrinsic-size: 66px;
  transition: background-color 180ms ease;
}

.manage-photo:last-child {
  border-bottom: 0;
}

.manage-photo:hover,
.manage-photo.is-selected {
  background: rgba(216, 255, 62, 0.065);
}

.manage-photo input {
  position: absolute;
  opacity: 0;
}

.manage-photo input:focus-visible + .privacy-check {
  outline: 3px solid var(--acid);
  outline-offset: 3px;
}

.manage-photo input:checked + .privacy-check {
  border-color: var(--acid);
  background: var(--acid);
  color: var(--black);
}

.manage-photo img {
  width: 48px;
  height: 48px;
  border: 2px solid var(--black);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.32);
  object-fit: cover;
}

.manage-photo-copy,
.manage-photo-copy strong,
.manage-photo-copy small {
  display: block;
  min-width: 0;
}

.manage-photo-copy strong,
.manage-photo-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manage-photo-copy strong {
  font-size: 11px;
}

.manage-photo-copy small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px;
}

.manage-empty {
  display: flex;
  min-height: 220px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  color: var(--white);
  text-align: center;
}

.manage-empty > span:not(.empty-mark) {
  color: var(--muted);
  font-size: 10px;
}

.confirm-modal {
  width: min(470px, calc(100vw - 32px));
  text-align: center;
}

.confirm-remove-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: var(--coral);
  color: var(--black);
  box-shadow: 0 0 0 5px rgba(255, 100, 71, 0.12);
}

.confirm-remove-icon svg {
  width: 25px;
  height: 25px;
}

.confirm-modal h2 {
  margin: 7px 0 0;
  font-size: clamp(25px, 5vw, 34px);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -1.1px;
}

.confirm-modal .modal-copy {
  max-width: 360px;
  margin-right: auto;
  margin-left: auto;
}

.confirm-thumbs {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
}

.confirm-thumbs img,
.confirm-thumbs span {
  width: 68px;
  height: 68px;
  margin-left: -10px;
  border: 3px solid var(--black-soft);
  border-radius: 18px;
  object-fit: cover;
}

.confirm-thumbs img:first-child {
  margin-left: 0;
}

.confirm-thumbs span {
  display: grid;
  place-items: center;
  background: var(--acid);
  color: var(--black);
  font-size: 13px;
  font-weight: 950;
}

.login-fields {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.login-fields label,
.login-fields label > span {
  display: block;
}

.login-fields label > span {
  margin: 0 0 7px 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.login-fields input {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  padding: 0 14px;
  background: var(--black-raised);
  color: var(--white);
  font-size: 16px;
  font-weight: 750;
  outline: 0;
}

.login-fields input:focus {
  border-color: var(--acid);
  box-shadow: 0 0 0 3px rgba(216, 255, 62, 0.12);
}

.login-error {
  margin: 11px 0 0;
  border: 1px solid rgba(255, 100, 71, 0.38);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 100, 71, 0.08);
  color: #ffb3a4;
  font-size: 10px;
  font-weight: 750;
}

.access-list {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 17px;
}

.access-member {
  display: grid;
  min-height: 70px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line-dark);
  background: rgba(255, 255, 255, 0.018);
}

.access-member:last-child {
  border-bottom: 0;
}

.access-member .member-avatar {
  width: 38px;
  height: 38px;
  font-size: 10px;
}

.access-member-copy,
.access-member-copy strong,
.access-member-copy small {
  display: block;
  min-width: 0;
}

.access-member-copy strong,
.access-member-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-member-copy strong {
  font-size: 12px;
}

.access-member-copy small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px;
}

.access-you,
.access-ready,
.access-blocked {
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 8px;
  font-weight: 950;
  text-transform: uppercase;
}

.access-you {
  background: var(--acid);
  color: var(--black);
}

.access-ready {
  border: 1px solid var(--line-dark);
  color: var(--muted);
}

.access-blocked {
  border: 1px solid rgba(255, 100, 71, 0.34);
  color: #ff9b87;
}

.logout-button {
  margin-right: auto;
}

.access-owner-button {
  margin-top: 12px;
}

.owner-shell {
  --paper: var(--black);
  --paper-deep: var(--black-raised);
  --ink: var(--white);
  --paper-muted: var(--muted);
  --line-paper: var(--line-dark);
  color-scheme: dark;
  width: 100%;
  height: 100dvh;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
}

.owner-topbar {
  position: sticky;
  z-index: var(--z-header);
  top: 0;
  display: grid;
  min-height: 74px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line-paper);
  padding: max(12px, env(safe-area-inset-top)) 28px 12px;
  background: var(--black-soft);
  backdrop-filter: blur(18px);
}

.owner-back {
  width: max-content;
  justify-self: start;
  border: 1px solid var(--line-paper);
  background: var(--black-raised);
  color: var(--ink);
}

.owner-back svg {
  transform: rotate(180deg);
}

.owner-brand,
.owner-account,
.owner-card-heading,
.moderation-heading,
.moderation-stats,
.share-link-row {
  display: flex;
  align-items: center;
}

.owner-brand {
  gap: 11px;
  justify-self: center;
}

.owner-brand .brand-mark {
  width: 38px;
  height: 38px;
  border: 0;
  box-shadow: none;
  font-size: 15px;
}

.owner-brand strong,
.owner-brand small,
.owner-account strong,
.owner-account small {
  display: block;
}

.owner-brand strong {
  font-size: 14px;
  font-weight: 950;
}

.owner-brand small,
.owner-account small {
  margin-top: 2px;
  color: var(--paper-muted);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.owner-account {
  justify-self: end;
  gap: 9px;
  text-align: right;
}

.owner-account strong {
  font-size: 11px;
}

.owner-main {
  width: min(1220px, calc(100% - 40px));
  margin: 0 auto;
  padding: 48px 0 80px;
}

.owner-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
}

.owner-hero .eyebrow,
.owner-card .eyebrow {
  color: var(--acid);
}

.owner-hero h1 {
  margin: 8px 0 12px;
  font-size: clamp(38px, 6vw, 70px);
  font-weight: 950;
  line-height: 0.94;
  letter-spacing: -4px;
}

.owner-hero p:not(.eyebrow) {
  max-width: 690px;
  margin: 0;
  color: var(--paper-muted);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.6;
}

.owner-copy-link {
  border-color: var(--line-dark);
  background: var(--black-raised);
  color: var(--white);
  width: auto;
  flex: 0 0 auto;
}

.owner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.owner-card {
  min-width: 0;
  border: 1px solid var(--line-paper);
  border-radius: var(--radius-card);
  padding: 22px;
  background: var(--black-soft);
  box-shadow: none;
}

.owner-card-heading {
  gap: 12px;
}

.owner-card-heading h2 {
  margin: 4px 0 0;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -0.8px;
}

.owner-card-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  background: var(--black);
  color: var(--acid);
}

.access-options {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}

.access-option {
  position: relative;
  display: grid;
  min-height: 78px;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line-paper);
  border-radius: 17px;
  padding: 12px 14px;
  background: var(--black-raised);
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.access-option.is-selected {
  border-color: var(--acid);
  background: var(--black-raised);
  box-shadow: 0 0 0 1px var(--acid);
}

.access-option input {
  position: absolute;
  opacity: 0;
}

.access-radio {
  width: 20px;
  height: 20px;
  border: 2px solid var(--muted);
  border-radius: 50%;
}

.access-option input:checked + .access-radio {
  border: 6px solid var(--acid);
  background: var(--on-accent);
}

.access-option input:focus-visible + .access-radio {
  outline: 3px solid var(--acid);
  outline-offset: 3px;
}

.access-option strong,
.access-option small {
  display: block;
}

.access-option strong {
  font-size: 12px;
}

.access-option small {
  margin-top: 4px;
  color: var(--paper-muted);
  font-size: 9px;
  line-height: 1.45;
}

.access-option b {
  border-radius: 999px;
  padding: 7px 9px;
  background: var(--paper-deep);
  font-size: 8px;
  text-transform: uppercase;
}

.owner-toggle {
  position: relative;
  display: grid;
  min-height: 70px;
  grid-template-columns: 1fr 44px;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  border: 1px solid var(--line-paper);
  border-radius: 17px;
  padding: 12px 14px;
  background: var(--paper-deep);
}

.owner-toggle strong,
.owner-toggle small {
  display: block;
}

.owner-toggle strong {
  font-size: 11px;
}

.owner-toggle small {
  margin-top: 4px;
  color: var(--paper-muted);
  font-size: 9px;
}

.owner-toggle input {
  position: absolute;
  opacity: 0;
}

.owner-toggle input:checked + .toggle-ui {
  background: var(--black);
}

.owner-toggle input:checked + .toggle-ui::after {
  transform: translateX(18px);
  background: var(--acid);
}

.share-link-row {
  gap: 9px;
  margin-top: 12px;
  border: 1px solid var(--line-paper);
  border-radius: 14px;
  padding: 7px 10px;
  background: var(--black-raised);
}

.share-link-row > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: var(--black);
  color: var(--acid);
}

.share-link-row > span svg {
  width: 15px;
}

.share-link-field {
  min-width: 0;
  margin-top: 16px;
}

.share-link-field > label {
  display: block;
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
}

.share-link-field .share-link-row {
  align-items: flex-start;
  margin-top: 8px;
  padding: 12px;
  border-color: var(--line-dark);
}

.share-link-row textarea {
  display: block;
  width: 100%;
  min-width: 0;
  flex: 1;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-all;
  resize: none;
  -webkit-user-select: text;
  user-select: text;
}

.share-link-row .button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 12px;
  gap: 6px;
}

.share-link-row .button svg {
  width: 18px;
  height: 18px;
}

.owner-hero .share-link-field {
  flex: 0 1 360px;
  width: 100%;
  margin-top: 0;
}

.owner-hero .share-link-row {
  flex-direction: column;
  align-items: stretch;
}

.owner-hero .share-link-row .button {
  align-self: flex-end;
}

@media (max-width: 900px) {
  .owner-hero .share-link-field { flex-basis: auto; }
}

.owner-card .text-button {
  color: var(--ink);
}

.owner-count {
  color: var(--on-accent);
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  margin-left: auto;
  border-radius: 50%;
  background: var(--acid);
  font-size: 11px;
  font-weight: 950;
}

.owner-name-card { grid-column: 1 / -1; }
.space-name-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 20px;
  max-width: 640px;
}
.space-name-form input {
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line-paper);
  border-radius: 16px;
  background: var(--black-raised);
  color: var(--ink);
  font-size: 16px;
}
.space-name-form input:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
@media (max-width: 480px) {
  .space-name-form { grid-template-columns: 1fr; }
  .space-name-form .button { width: 100%; }
}

.invite-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 20px;
}

.invite-form input {
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--line-paper);
  border-radius: 999px;
  padding: 0 16px;
  background: var(--black-raised);
  color: var(--ink);
  font-size: 16px;
  outline: 0;
}

.invite-form input:focus {
  border-color: var(--acid);
  box-shadow: 0 0 0 2px var(--acid);
}

.invite-error {
  margin: 9px 0 0;
  color: var(--coral);
  font-size: 10px;
  font-weight: 800;
}

.owner-member-list {
  max-height: 355px;
  margin-top: 12px;
  overflow-y: auto;
  border: 1px solid var(--line-paper);
  border-radius: 17px;
  background: var(--black-raised);
}

.owner-member {
  display: grid;
  min-height: 66px;
  grid-template-columns: 38px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--line-paper);
}

.owner-member:last-child {
  border-bottom: 0;
}

.owner-member .member-avatar {
  width: 38px;
  height: 38px;
}

.owner-member > span:nth-child(2),
.owner-member > span:nth-child(2) strong,
.owner-member > span:nth-child(2) small {
  display: block;
  min-width: 0;
}

.owner-member > span:nth-child(2) strong,
.owner-member > span:nth-child(2) small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-member > span:nth-child(2) strong {
  font-size: 11px;
}

.owner-member > span:nth-child(2) small {
  margin-top: 3px;
  color: var(--paper-muted);
  font-size: 8px;
}

.owner-member select {
  min-height: 38px;
  border: 1px solid var(--line-paper);
  border-radius: 999px;
  padding: 0 28px 0 11px;
  background-color: var(--black-raised);
  color: var(--ink);
  font-size: 9px;
  font-weight: 850;
}

.owner-member select:disabled {
  opacity: 0;
  pointer-events: none;
}

.owner-badge {
  border: 1px solid var(--line-dark);
  grid-column: 3 / 5;
  justify-self: end;
  border-radius: 999px;
  padding: 7px 10px;
  background: var(--black);
  color: var(--white);
  font-size: 8px;
  font-weight: 950;
  text-transform: uppercase;
}

.member-remove {
  width: 44px;
  height: 44px;
  border-color: var(--line-paper);
  background: transparent;
  color: var(--paper-muted);
  backdrop-filter: none;
}

.member-remove:hover {
  background: rgba(255, 100, 71, 0.1);
  color: var(--coral);
}

.owner-moderation-card {
  grid-column: 1 / -1;
}

.moderation-heading {
  justify-content: space-between;
  gap: 24px;
}

.moderation-stats {
  gap: 7px;
}

.moderation-stats > span {
  border: 1px solid var(--line-paper);
  border-radius: 999px;
  padding: 9px 11px;
  background: var(--black-raised);
  color: var(--paper-muted);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.moderation-stats strong {
  color: var(--ink);
  font-size: 12px;
}

.moderation-filters {
  display: flex;
  gap: 7px;
  margin-top: 20px;
  overflow-x: auto;
}

.filter-pill {
  min-height: 40px;
  border: 1px solid var(--line-paper);
  border-radius: 999px;
  padding: 0 15px;
  background: transparent;
  color: var(--paper-muted);
  font-size: 9px;
  font-weight: 900;
}

.filter-pill.is-active {
  border-color: var(--acid);
  background: var(--acid);
  color: var(--on-accent);
}

.moderation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.moderation-photo {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-paper);
  border-radius: 18px;
  background: var(--black-raised);
  content-visibility: auto;
  contain-intrinsic-size: 330px;
}

.moderation-image {
  position: relative;
  aspect-ratio: 1.18;
  overflow: hidden;
  background: var(--paper-deep);
}

.moderation-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.moderation-status {
  position: absolute;
  top: 9px;
  left: 9px;
  border: 2px solid var(--white);
  border-radius: 999px;
  padding: 6px 8px;
  background: var(--black);
  color: var(--white);
  font-size: 7px;
  font-weight: 950;
  text-transform: uppercase;
}

.status-pending {
  background: var(--blue);
  color: var(--black);
}

.status-removed {
  background: var(--coral);
  color: var(--black);
}

.moderation-photo-body {
  padding: 13px;
}

.moderation-photo-body > strong,
.moderation-photo-body > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moderation-photo-body > strong {
  font-size: 11px;
}

.moderation-photo-body > span {
  margin-top: 4px;
  color: var(--paper-muted);
  font-size: 8px;
}

.moderation-photo-body > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.moderation-photo-body .button {
  min-height: 40px;
  padding: 0 10px;
  font-size: 9px;
}

.moderation-photo-body .button:only-child {
  grid-column: 1 / -1;
}

.owner-card .button-outline {
  border-color: var(--line-paper);
  color: var(--ink);
}

.owner-remove-photo {
  border-color: rgba(255, 100, 71, 0.5) !important;
  color: var(--coral) !important;
}

.moderation-empty {
  display: flex;
  min-height: 260px;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;
  flex-direction: column;
  gap: 9px;
  border: 1px dashed var(--line-paper);
  border-radius: 18px;
  color: var(--ink);
  text-align: center;
}

.moderation-empty > span:not(.empty-mark) {
  color: var(--paper-muted);
  font-size: 9px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.drop-zone {
  display: flex;
  min-height: 210px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  margin-top: 18px;
  border: 1px dashed rgba(216, 255, 62, 0.52);
  border-radius: var(--radius-card);
  background: rgba(216, 255, 62, 0.045);
  color: var(--white);
  text-align: center;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.drop-zone:hover,
.drop-zone.is-dragging {
  border-color: var(--acid);
  background: rgba(216, 255, 62, 0.11);
}

.drop-zone.is-processing {
  cursor: progress;
  border-style: solid;
  border-color: rgba(216, 255, 62, 0.68);
  background: rgba(216, 255, 62, 0.085);
  pointer-events: none;
}

.drop-zone.is-processing .drop-icon {
  animation: import-pulse 1.15s ease-in-out infinite alternate;
}

.drop-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.import-source-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.import-source {
  position: relative;
  min-height: 44px;
  cursor: pointer;
}

.import-modal { display:flex; flex-direction:column; max-height:calc(100dvh - 48px); }
.import-modal .drop-zone { padding:16px !important; flex-shrink:0; }
#upload-queue { min-height:0; flex:1; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
#upload-queue { contain:layout paint; }
.import-modal > .modal-header,.import-modal > .queue-status,.import-modal > #queue-storage { flex-shrink:0; }
.queue-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }
.queue-toolbar > div { display:flex; gap:12px; }
.queue-toolbar .text-button { min-height:44px; color:var(--paper); }
.queue-toolbar .text-button.queue-remove { color:#ff8585; }
.queue-toolbar { position:sticky; top:0; z-index:1; background:var(--black-soft); }
.queue-list { list-style:none; padding:0; margin:8px 0; }
.queue-row { display:grid; grid-template-columns:40px 56px minmax(0,1fr) 48px; align-items:start; gap:10px; padding:14px 0; border-top:1px solid var(--line-paper); }
.queue-check { display:grid; place-items:center; min-height:48px; cursor:pointer; }
.queue-check input { width:20px; height:20px; accent-color:var(--black); }
.queue-thumbnail { width:56px; height:56px; display:grid; place-items:center; background:var(--paper); border-radius:8px; overflow:hidden; }
.queue-thumbnail img { width:100%; height:100%; object-fit:cover; }
.queue-thumbnail svg { width:24px; height:24px; }
.queue-info { min-width:0; }
.queue-info > strong { display:block; overflow-wrap:anywhere; font-size:14px; }
.queue-info > small { display:block; color:var(--muted); margin:5px 0; font-size:12px; }
.queue-badges { display:flex; flex-wrap:wrap; gap:5px; }
.queue-badge { display:inline-block; border-radius:5px; padding:4px 7px; font-size:12px; line-height:1.4; }
.badge-neutral { color:#333; background:#eee; }
.badge-warning { color:#755000; background:#fff0c7; }
.badge-success { color:#21542c; background:#e3f2df; }
.badge-error { color:#a32020; background:#ffeded; }
.queue-remove { color:#b72b2b; min-width:44px; min-height:48px; }
.queue-error { color:#ff8585; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.queue-status { min-height:20px; font-size:13px; line-height:1.5; margin:10px 0 0; }
.queue-empty { padding:20px 0; color:var(--muted); font-size:14px; }
.import-modal .import-footer { margin-top:12px; flex-shrink:0; }
.import-modal.has-queue .drop-zone { min-height:0; }
.import-modal.has-queue .drop-title { display:none; }
.import-modal.has-queue .import-source-actions { margin-top:0; }
.import-modal.has-queue .drop-zone small { display:none; }
@media (max-width:600px) {
  .modal.import-modal.has-queue { top:0; bottom:auto; height:var(--visual-height,100dvh); max-height:var(--visual-height,100dvh); overflow:hidden; border-radius:0; transform:none; animation:none; }
  .import-modal { max-height:calc(100dvh - 24px); overflow-y:auto; }
  .queue-row { grid-template-columns:32px 44px minmax(0,1fr) 48px; gap:6px; }
  .queue-thumbnail { width:44px; height:44px; }
  .queue-toolbar { flex-wrap:wrap; gap:0; }
}

.import-source:focus-within {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

.import-picker-hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.drop-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--acid);
  color: var(--black);
}

.drop-zone strong {
  font-size: 15px;
  font-weight: 950;
}

.drop-zone > span:not(.drop-icon) {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.drop-zone small {
  margin-top: 7px;
  color: rgba(255, 254, 247, 0.48);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.report-preview {
  display: grid;
  grid-template-columns: 86px 86px 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  border: 1px solid var(--line-dark);
  border-radius: 15px;
  padding: 10px 12px;
  background: var(--black-raised);
}

.report-preview > div {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.report-number {
  color: var(--white);
  font-size: 20px;
  font-weight: 950;
}

.report-copy {
  justify-self: end;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.import-progress {
  margin-top: 12px;
  border: 1px solid rgba(216, 255, 62, 0.22);
  border-radius: 15px;
  padding: 12px;
  background: rgba(216, 255, 62, 0.06);
}

.import-progress.is-error {
  border-color: rgba(255, 100, 71, 0.38);
  background: rgba(255, 100, 71, 0.07);
}

.import-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.import-progress-head strong {
  font-size: 11px;
  line-height: 1.35;
}

.import-progress-head span,
.import-progress p {
  color: var(--muted);
  font-size: 8px;
  font-weight: 750;
}

.import-progress-head span {
  flex: 0 0 auto;
}

.progress-track {
  display: block;
  height: 5px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}

.progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--acid);
  transition: width 180ms ease;
}

.import-progress.is-error .progress-track > span {
  background: var(--coral);
}

.import-progress p {
  margin: 8px 0 0;
  line-height: 1.45;
}

.import-footer {
  grid-template-columns: auto;
}

.import-schema {
  gap: 10px;
  margin-top: 12px;
  border-radius: 14px;
  padding: 11px 12px;
  background: rgba(94, 184, 255, 0.08);
}

.schema-check {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--black);
}

.schema-check svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

.import-schema strong,
.import-schema small {
  display: block;
}

.import-schema strong {
  font-size: 10px;
}

.import-schema small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.toast {
  position: fixed;
  z-index: var(--z-toast);
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  min-width: 190px;
  max-width: calc(100vw - 32px);
  transform: translate(-50%, 18px);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 12px 18px;
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

@keyframes sheet-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes modal-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes import-pulse {
  from { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(216, 255, 62, 0.2); }
  to { transform: scale(1); box-shadow: 0 0 0 10px rgba(216, 255, 62, 0); }
}

@media (max-width: 1100px) {
  .atlas-shell {
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  .detail-sheet {
    right: 356px;
    width: min(400px, calc(100vw - 390px));
  }

  .map-intro h1 {
    font-size: 38px;
  }

  .intro-count {
    display: none;
  }
}

@media (max-width: 820px), (max-height: 500px) {
  body {
    overflow: hidden;
  }

  .atlas-shell,
  .atlas-shell.rail-collapsed {
    display: block;
    min-height: 100dvh;
  }

  .map-pane {
    width: 100%;
    height: 100dvh;
  }

  .atlas-rail {
    display: none;
  }

  .topbar {
    min-height: 74px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .map-intro {
    top: 88px;
    right: 16px;
    left: 16px;
  }

  .map-intro h1 {
    max-width: 520px;
    font-size: clamp(29px, 8vw, 42px);
  }

  .intro-copy {
    max-width: 460px;
  }

  .map-toolbar {
    top: 194px;
    right: 16px;
    left: 16px;
    display: grid;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) 104px 44px;
  }

  .search-field {
    width: 100%;
  }

  .region-select {
    display: none;
  }

  .map-overlay {
    right: 16px;
    left: 16px;
  }

  .map-overlay-top {
    top: 250px;
  }

  .detail-sheet {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-width: 0;
    max-height: 88dvh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 26px 26px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation-name: sheet-up;
  }

  .detail-image-wrap {
    min-height: 280px;
    max-height: 46dvh;
  }

  .modal {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 92dvh;
    transform: none;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 26px 26px 0 0;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
    animation-name: modal-up;
  }

  @keyframes sheet-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes modal-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 560px) {
  .topbar {
    padding-right: 12px;
    padding-left: 12px;
  }

  .map-pane::before {
    height: 330px;
  }

  .brand-mark {
    width: 35px;
    height: 35px;
    font-size: 16px;
  }

  .brand-name {
    font-size: 14px;
  }

  .brand-subtitle {
    display: none;
  }

  .sync-status {
    display: none;
  }

  .topbar-actions {
    gap: 4px;
  }

  .topbar-actions .icon-button,
  .topbar-actions .button-acid {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .topbar-actions .button-acid {
    padding: 0;
  }

  .topbar-actions .button-acid span {
    display: none;
  }

  .map-intro {
    top: 83px;
  }

  .map-intro h1 {
    max-width: 330px;
    margin-top: 4px;
    font-size: 31px;
    letter-spacing: -1.8px;
  }

  .intro-copy {
    max-width: 330px;
    font-size: 11px;
  }

  .map-toolbar {
    top: 190px;
    grid-template-columns: minmax(0, 1fr) 96px 44px;
  }

  .search-field,
  .select-field {
    min-height: 42px;
  }

  .search-field {
    padding: 0 11px;
  }

  .search-field input,
  .select-field select {
    font-size: 16px;
  }

  .map-overlay-top {
    top: 242px;
  }

  .map-caption-muted {
    display: none;
  }

  .map-overlay-bottom {
    justify-content: space-between;
    bottom: max(16px, env(safe-area-inset-bottom));
  }

  .map-access-panel {
    max-width: calc(100% - 54px);
    min-height: 46px;
    padding: 2px;
  }

  .allowed-members-button,
  .login-chip {
    min-height: 44px;
  }

  .allowed-members-button {
    gap: 7px;
    padding: 0 5px;
  }

  .member-avatar {
    width: 27px;
    height: 27px;
    font-size: 8px;
  }

  .member-avatar-stack .member-avatar {
    margin-left: -7px;
  }

  .map-access-copy strong {
    font-size: 8px;
  }

  .map-access-copy > span {
    display: none;
  }

  .login-chip {
    max-width: 88px;
    padding: 0 8px 0 5px;
  }

  .login-chip > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .login-icon,
  .login-avatar {
    width: 27px;
    height: 27px;
  }

  .map-locate {
    width: 44px;
    padding: 0;
  }

  .map-locate span {
    display: none;
  }

  .leaflet-bottom.leaflet-right {
    right: 8px;
    bottom: 68px;
  }

  .detail-image-wrap {
    min-height: 250px;
  }

  .detail-body {
    padding: 18px 16px;
  }

  .detail-title-row h2 {
    font-size: 24px;
  }

  .detail-meta-grid,
  .detail-actions {
    grid-template-columns: 1fr;
  }

  .modal {
    padding: 21px 16px max(20px, env(safe-area-inset-bottom));
  }

  .modal-header h2 {
    font-size: 29px;
  }

  .privacy-summary {
    gap: 6px;
  }

  .privacy-summary div {
    padding: 10px;
  }

  .privacy-summary strong {
    font-size: 18px;
  }

  .modal-footer {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
  }

  .modal-footer .button {
    width: 100%;
    padding: 0 12px;
    font-size: 10px;
  }

  .modal-footer.import-footer {
    grid-template-columns: 1fr;
  }

  .drop-zone {
    min-height: 180px;
  }

  .report-preview {
    grid-template-columns: 72px 72px 1fr;
  }
}

@media (max-height: 720px) and (orientation: landscape) {
  .map-intro {
    top: 76px;
  }

  .map-intro h1 {
    font-size: 29px;
  }

  .intro-copy {
    display: none;
  }

  .map-toolbar {
    top: 142px;
  }

  .map-overlay-top {
    top: 194px;
  }

  .detail-body {
    padding: 14px 18px;
  }
}

@media (max-width: 900px) {
  .owner-main {
    width: min(100% - 28px, 720px);
    padding-top: 34px;
  }

  .owner-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .owner-hero h1 {
    font-size: clamp(38px, 9vw, 58px);
  }

  .owner-grid {
    grid-template-columns: 1fr;
  }

  .owner-moderation-card {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .owner-topbar {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .owner-back {
    width: 44px;
    padding: 0;
    font-size: 0;
  }

  .owner-brand {
    justify-self: start;
  }

  .owner-brand .brand-mark {
    display: none;
  }

  .owner-account > span {
    display: none;
  }

  .owner-main {
    width: calc(100% - 24px);
    padding: 26px 0 48px;
  }

  .owner-hero {
    gap: 20px;
    margin-bottom: 22px;
  }

  .owner-hero h1 {
    font-size: 38px;
    letter-spacing: -2.5px;
  }

  .owner-hero p:not(.eyebrow) {
    font-size: 12px;
  }

  .owner-copy-link {
    width: 100%;
  }

  .owner-card {
    border-radius: 20px;
    padding: 16px;
  }

  .access-option {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .access-option b {
    display: none;
  }

  .invite-form {
    grid-template-columns: 1fr;
  }

  .invite-form .button {
    width: 100%;
  }

  .owner-member {
    grid-template-columns: 38px minmax(0, 1fr) 44px;
  }

  .owner-member select {
    width: 100%;
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .owner-badge {
    grid-column: 2 / 4;
  }

  .moderation-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .moderation-stats {
    width: 100%;
    flex-wrap: wrap;
  }

  .moderation-stats > span {
    flex: 1;
    text-align: center;
  }

  .filter-pill {
    min-height: 44px;
  }

  .moderation-grid {
    grid-template-columns: 1fr;
  }

  .moderation-photo-body .button {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Shared Spaces reuse the atlas type, borders and accent. */
.space-toolbar { display:flex; align-items:center; gap:12px; padding:0 32px 14px; font-size:11px; color:var(--muted, #797a73); }
.space-toolbar > .text-button { margin-left:auto; }
.space-switcher { display:flex; align-items:center; gap:8px; border:1px solid #d9dcd3; border-radius:12px; padding:9px 12px; background:#fff; font:inherit; font-weight:700; color:#18221b; max-width:65%; min-height:44px; }
.space-switcher span:first-of-type { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.space-switcher svg,.space-symbol svg,.space-row > svg,.member-location-count svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; flex-shrink:0; }
.space-people { display:flex; align-items:center; gap:12px; min-width:0; }
.members-label { border:0; background:none; text-align:left; cursor:pointer; padding:6px 0; min-height:44px; font:inherit; }
.member-filter { border:2px solid transparent; padding:4px; background:none; cursor:pointer; border-radius:50%; min-width:44px; min-height:44px; }
.member-filter.is-selected { border-color:#16231b; background:#d8ff3e; }
.member-filter:focus-visible,.space-switcher:focus-visible,.space-row:focus-visible,.member-row:focus-visible { outline:2px solid #16231b; outline-offset:3px; }
.member-avatar { position:relative; overflow:hidden; }
.member-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.member-filter-summary { display:flex; align-items:center; gap:9px; margin:0 32px 12px; padding:9px 12px; border:1px solid #d9dcd3; border-radius:12px; font-size:12px; background:#f2f5ed; }
.member-filter-summary .member-avatar { width:24px; height:24px; font-size:10px; }
.member-filter-summary .text-button { margin-left:auto; white-space:nowrap; }
.member-row { width:100%; border:0; background:none; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.member-row:hover { background:#f5f6ef; }
.member-location-count { display:flex; align-items:center; gap:5px; font-size:11px; white-space:nowrap; }
.space-list { display:grid; gap:8px; max-height:220px; overflow:auto; padding:4px; }

/* Read-only photo browsing keeps the map and moderation tools separate. */
.library-modal { width:min(920px,calc(100vw - 24px)); height:min(900px,calc(var(--visual-height,100dvh) - 32px)); max-height:calc(var(--visual-height,100dvh) - 32px); display:flex; flex-direction:column; overflow:hidden; padding:24px; }
.library-modal .modal-header { flex:none; margin-bottom:12px; }
.library-tools { display:flex; flex:none; gap:12px; align-items:center; justify-content:space-between; margin-bottom:12px; }
.library-modes { display:flex; gap:6px; }
.library-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; flex:none; }
.library-filters label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--text-muted,#b1b1ad); min-width:0; }
.library-filters input,.library-filters select { width:100%; min-width:0; height:44px; padding:8px 10px; color:inherit; background:#202222; border:1px solid #444; border-radius:10px; color-scheme:dark; font:inherit; font-size:14px; }
.library-filters .library-search { grid-column:1/-1; }
.library-filter-actions { display:flex; grid-column:1/-1; gap:12px; align-items:center; }
.library-filter-actions .button { min-height:44px; padding:8px 14px; }
.library-summary { flex:none; margin:12px 0; color:#b8b9b2; font-size:13px; }
.library-list { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:4px; scroll-padding-block:12px; }
.library-day + .library-day { margin-top:24px; }
.library-day h3 { display:flex; align-items:center; justify-content:space-between; font-size:16px; margin:0 0 12px; }
.library-day h3 span { color:#b8b9b2; font-size:12px; }
.library-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.library-photo { display:flex; flex-direction:column; padding:0; overflow:hidden; background:#202222; border:1px solid #444; border-radius:12px; color:inherit; text-align:left; min-width:0; cursor:pointer; }
.library-image { display:block; position:relative; width:100%; aspect-ratio:1; background:#303232; }
.library-image img { width:100%; height:100%; object-fit:cover; }
.library-location-badge { position:absolute; bottom:6px; left:6px; max-width:calc(100% - 12px); border-radius:6px; padding:4px 6px; background:#101212e6; color:#fafafa; font-size:11px; }
.library-photo-copy { display:flex; flex-direction:column; gap:4px; padding:10px; min-width:0; width:100%; }
.library-photo-copy strong { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.library-photo-copy small { color:#b8b9b2; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.library-empty { padding:24px 8px; text-align:center; }
.library-empty small { display:block; margin-top:8px; color:#b8b9b2; line-height:1.5; }
.library-load-more { width:100%; margin-top:20px; min-height:48px; }
.library-detail-navigation { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 12px; }
.library-detail-navigation span { color:#b8b9b2; font-size:13px; }
.library-detail-navigation .icon-button svg { transform:rotate(180deg); }
.library-detail-navigation .library-next svg { transform:none; }
.library-photo:focus-visible,.library-filters input:focus-visible,.library-filters select:focus-visible,.library-list:focus-visible { outline:2px solid #d9ff43; outline-offset:2px; }
@media (max-width:600px) {
  .library-modal { padding:16px; width:calc(100vw - 16px); height:calc(var(--visual-height,100dvh) - 24px); max-height:calc(var(--visual-height,100dvh) - 24px); }
  .library-filters { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .library-filters label { font-size:11px; }
  .library-filters label:last-of-type { grid-column:1/-1; }
  .library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .library-photo-copy { padding:8px; }
  .library-photo-copy strong { font-size:12px; }
}
.space-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; border:1px solid var(--line-dark); border-radius:12px; background:var(--black-raised); overflow:hidden; }
.space-item.is-selected { border-color:var(--acid); background:#222819; }
.space-item .space-row { min-width:0; gap:8px; border:0; border-radius:0; background:transparent; }
.space-item .space-row strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.space-item .space-row small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.space-actions { display:flex; align-items:center; gap:4px; padding:8px 8px 8px 0; }
.space-exit-button { min-height:48px; min-width:48px; padding:8px; border:1px solid var(--line-dark); border-radius:10px; background:var(--black); color:var(--white); font:inherit; font-size:13px; cursor:pointer; touch-action:manipulation; }
.space-owner-transfer { width:48px; min-width:48px; min-height:48px; }
.space-exit-button:hover,.space-exit-button:active { border-color:var(--danger, #ef7777); color:var(--danger, #ef7777); }
.space-exit-button:focus-visible { outline:2px solid var(--acid); outline-offset:2px; }
.space-actions button:disabled { opacity:.45; cursor:default; }
.space-action-field { display:grid; gap:8px; margin:16px 0; color:var(--white); font-size:13px; }
.space-action-field input,.space-action-field select { width:100%; min-height:48px; padding:12px; border:1px solid var(--line-dark); border-radius:10px; background:var(--black-raised); color:var(--white); font:inherit; font-size:16px; }
.space-copy-link { display:inline-flex; align-items:center; justify-content:center; width:48px; min-width:48px; min-height:48px; padding:8px; border:1px solid var(--line-dark); border-radius:10px; background:var(--black); color:var(--white); font:inherit; font-size:13px; cursor:pointer; touch-action:manipulation; }
.space-delete-button { display:inline-flex; align-items:center; justify-content:center; width:48px; color:var(--danger, #ef7777); }
.space-delete-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; }
.settings-updates { display:grid; gap:10px; padding-bottom:16px; border-bottom:1px solid var(--line-dark); }
.update-versions { display:grid; gap:6px; }
.update-versions small,.update-status small { color:var(--muted); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.update-status { display:grid; gap:10px; font-size:13px; }
.update-status:empty { display:none; }
.update-status p { margin:0; line-height:1.5; }
.space-copy-link svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; }
.space-copy-link:hover,.space-copy-link:active { border-color:var(--acid); color:var(--acid); }
.space-copy-link:focus-visible { outline:2px solid var(--acid); outline-offset:2px; }
@media(max-width:420px) {
  .space-item .space-symbol { display:none; }
  .space-item .space-row { padding:10px 8px; gap:4px; }
  .space-copy-link { gap:4px; padding:8px; font-size:12px; }
  .space-copy-link svg { width:18px; height:18px; }
}
.space-link-fallback { grid-column:1 / -1; width:calc(100% - 24px); margin:0 12px 12px; border:1px solid var(--line-dark); border-radius:8px; padding:8px; background:var(--black); color:var(--white); font:inherit; font-size:16px; resize:vertical; }
.space-row { width:100%; display:flex; align-items:center; gap:12px; border:1px solid #dedfd8; border-radius:12px; padding:12px; background:#fff; text-align:left; font:inherit; color:#18221b; min-height:64px; cursor:pointer; }
.space-row.is-selected { border-color:#18221b; background:#f3f7e9; }
.space-row > span:nth-child(2) { flex:1; min-width:0; }
.space-row strong { display:block; overflow-wrap:anywhere; font-size:14px; }
.space-row small { display:block; margin-top:5px; color:#767b70; font-size:11px; }
.space-symbol { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#eff2e8; flex-shrink:0; }
.space-form { margin-top:22px; }
.space-form label { display:block; font-size:13px; font-weight:700; margin-bottom:8px; }
.space-form > div { display:flex; gap:8px; }
.space-form input { flex:1; min-width:0; border:1px solid #d9dcd3; border-radius:10px; padding:12px; font:inherit; font-size:14px; }
.space-form small { display:block; font-size:11px; color:#767b70; margin-top:8px; }
@media (max-width: 700px) {
  .space-toolbar { padding:0 18px 12px; gap:8px; }
  .space-toolbar > span { display:none; }
  .member-filter-summary { margin:0 18px 10px; flex-wrap:wrap; }
  .space-people { gap:5px; }
  .space-people .member-avatar-stack { gap:0; }
  .member-filter { padding:3px; min-width:44px; }
  .map-access-panel { flex-wrap:wrap; gap:5px; }
  .member-location-count { font-size:10px; }
  .member-row .access-member-copy { min-width:0; }
}
.space-toolbar { position:absolute; z-index:var(--z-header); top:80px; left:24px; right:24px; padding:0; }
.space-switcher { color:var(--white); border-color:var(--line-dark); background:rgba(9,10,10,.82); border-radius:999px; }
.space-toolbar .text-button { color:var(--white); }
.map-pane:has(.space-toolbar) .map-intro { top:144px; }
.map-pane:has(.space-toolbar) .map-toolbar { top:258px; }
.map-pane:has(.space-toolbar) .map-overlay-top { top:312px; }
.map-pane:has(.space-toolbar)::before { height:390px; }
.member-filter-summary { position:absolute; z-index:var(--z-overlay); top:352px; left:24px; right:24px; margin:0; width:fit-content; max-width:calc(100% - 48px); border-color:var(--line-dark); background:rgba(9,10,10,.84); color:var(--white); }
.member-filter-summary .text-button { color:var(--acid); }
.member-filter.is-selected { border-color:var(--acid); background:rgba(216,255,62,.15); }
.space-people .member-avatar-stack { padding-left:0; }
.space-people .member-avatar-stack .member-avatar { margin-left:0; }
.members-label { color:var(--white); }
.member-row:hover { background:var(--black-raised); }
.space-row { background:var(--black-raised); color:var(--white); border-color:var(--line-dark); }
.space-row.is-selected { border-color:var(--acid); background:#222819; }
.space-symbol { background:var(--black-soft); }
.space-row small,.space-form small { color:var(--muted); }
.space-form input { background:var(--black-raised); border-color:var(--line-dark); color:var(--white); }
.member-filter:focus-visible,.space-switcher:focus-visible,.space-row:focus-visible,.member-row:focus-visible { outline-color:var(--acid); }
@media (max-width:700px) {
 .space-toolbar { top:78px; left:16px; right:16px; padding:0; }
 .map-pane:has(.space-toolbar) .map-intro { top:135px; }
 .map-pane:has(.space-toolbar) .map-toolbar { top:242px; }
 .map-pane:has(.space-toolbar) .map-overlay-top { top:294px; }
 .member-filter-summary { top:337px; left:16px; right:16px; max-width:calc(100% - 32px); }
 .map-access-panel { border-radius:22px; }
 .space-people { flex:1; }
 .space-people .member-avatar-stack { max-width:176px; overflow:auto; }
 .space-people .members-label { padding-right:8px; }
 .space-form input { font-size:16px; }
}
.space-form .button { width:auto; flex:0 0 auto; min-width:64px; }
.space-form input { width:0; }
.owner-invite-hint { margin:10px 0; color:var(--paper-muted); font-size:11px; line-height:1.6; }

/* Content-driven headers: both locales use the same layout, without fixed text offsets. */
html { -webkit-text-size-adjust: 100%; }
.map-controls { position:relative; z-index:var(--z-header); display:flex; flex-direction:column; gap:16px; padding:20px 24px 0; pointer-events:none; }
.map-controls > * { pointer-events:auto; }
.map-controls .topbar { position:static; padding:0; min-height:44px; gap:12px; flex-wrap:wrap; }
.map-controls .space-toolbar { position:static; padding:0; gap:10px; min-height:44px; }
.map-controls .map-intro { position:static; gap:16px; pointer-events:none; }
.map-controls .map-intro h1 { line-height:1.12; letter-spacing:-.035em; font-size:clamp(28px,3.4vw,46px); }
.map-controls .map-intro p { margin:4px 0 0; }
.map-controls .map-intro[hidden] { display:none; }
.map-summary-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.map-summary-row .map-overlay-top { flex:1; min-width:0; gap:8px; justify-content:flex-start; }
.intro-toggle { display:inline-flex; align-items:center; justify-content:center; gap:5px; flex-shrink:0; min-height:44px; padding:0 8px; border:0; border-radius:12px; background:rgba(9,10,10,.7); color:var(--white); font-size:13px; cursor:pointer; }
.intro-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.intro-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.intro-toggle:hover { background:rgba(9,10,10,.9); }
.intro-toggle:focus-visible { outline:2px solid var(--acid); outline-offset:3px; }
.map-controls .intro-toggle { pointer-events:auto; }
.map-locate:disabled { opacity:.45; cursor:default; }
.map-controls .map-toolbar { position:static; max-width:100%; width:100%; }
.map-controls .map-overlay-top { position:static; }
.map-controls .member-filter-summary { position:static; margin:0; max-width:100%; font-size:14px; }
.map-controls .space-switcher { max-width:55%; }
.language-switch { display:inline-flex; align-items:center; justify-content:center; gap:6px; margin-left:auto; flex-shrink:0; min-height:44px; min-width:64px; padding:8px 12px; border:1px solid var(--line-dark); border-radius:999px; background:rgba(9,10,10,.82); color:var(--white); font-size:14px; font-weight:700; }
.space-toolbar > .text-button { margin-left:auto; min-height:44px; }
.space-toolbar:has(.space-switcher) .language-switch { margin-left:0; }
.topbar-actions { flex-shrink:0; }
.button svg,.icon-button svg { flex-shrink:0; }
.button { white-space:normal; line-height:1.35; }
.modal-header > div { min-width:0; flex:1; }
.modal-header .icon-button { flex:0 0 44px; }
.modal-header h2 { line-height:1.15; letter-spacing:-.025em; overflow-wrap:break-word; }
.modal-copy { line-height:1.65; }
.space-form input { width:0; }
.owner-topbar { grid-template-columns:auto minmax(0,1fr) auto auto; }
.owner-member strong,.access-member-copy strong { overflow-wrap:anywhere; }
.member-row { min-height:64px; }
.member-row .access-member-copy { min-width:0; }
.member-location-count { font-size:13px; }
.owner-hero h1 { letter-spacing:-.035em; line-height:1.12; }
.modal,.detail-sheet { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
@media (max-width:820px), (max-height:500px) {
  .atlas-shell { height:100dvh; min-height:0; }
  .map-controls { padding:12px 16px 0; gap:12px; }
  .map-controls .topbar { flex-wrap:nowrap; gap:8px; }
  .brand-lockup { min-width:0; gap:8px; }
  .brand-name { font-size:14px; }
  .brand-subtitle,.sync-status { display:none; }
  .topbar-actions { gap:2px; }
  .topbar-actions .icon-button,.topbar-actions .button-acid { width:44px; height:44px; padding:0; }
  .topbar-actions .button-acid span { display:none; }
  .map-controls .space-toolbar { gap:8px; }
  .space-toolbar > span { display:none; }
  .space-toolbar .text-button { font-size:13px; }
  .map-controls .space-switcher { flex:1; max-width:none; min-width:0; font-size:14px; padding:8px 10px; }
  .language-switch { min-width:60px; padding:8px 10px; }
  .map-controls .map-intro h1 { max-width:none; font-size:30px; }
  .intro-copy { font-size:13px; line-height:1.5; }
  .intro-count { display:none; }
  .map-controls .map-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 116px 44px; gap:6px; }
  .map-controls .search-field,.map-controls .select-field { min-height:44px; min-width:0; }
  .map-controls .search-field input,.map-controls .select-field select { font-size:16px; }
  .map-controls .member-filter-summary { flex-wrap:wrap; gap:8px; border-radius:16px; }
  .member-filter-summary > span:nth-child(2) { flex:1; min-width:0; }
  .member-filter-summary .text-button { min-height:44px; margin-left:auto; }
  .map-caption { font-size:12px; }
  .map-overlay-bottom { bottom:max(20px,env(safe-area-inset-bottom)); gap:8px; align-items:flex-end; }
  .map-access-panel { min-height:48px; max-width:calc(100% - 52px); padding:4px 8px; gap:4px; border-radius:20px; }
  .space-people { gap:6px; flex:1; min-width:0; }
  .space-people .member-avatar-stack { max-width:132px; flex-shrink:1; }
  .member-filter { flex-shrink:0; }
  .member-avatar { width:32px; height:32px; font-size:12px; }
  .map-access-copy strong { font-size:13px; white-space:nowrap; }
  .login-chip { width:44px; max-width:none; padding:0; justify-content:center; }
  .login-chip > span:last-child { display:none; }
  .login-avatar,.login-icon { width:32px; height:32px; }
  .map-locate { width:44px; height:48px; padding:0; }
  .map-locate span { display:none; }
  .modal { max-height:calc(100dvh - 12px - env(safe-area-inset-top)); padding:20px 20px max(24px,env(safe-area-inset-bottom)); }
  .modal-header h2 { font-size:28px; }
  .modal-copy,.toggle-row small,.space-form small,.space-row small,.import-picker-hint,.owner-invite-hint { font-size:14px; }
  .modal .button,.detail-actions .button { min-height:48px; font-size:15px; padding:10px 14px; }
  .modal-footer { display:flex; flex-wrap:wrap; gap:10px; }
  .modal-footer .button { flex:1 1 140px; width:auto; }
  .modal-footer.import-footer .button { width:100%; }
  .import-source-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
  .import-source-actions .button { width:100%; }
  .drop-zone { padding:20px 16px; }
  .drop-meta { font-size:13px; line-height:1.5; }
  .space-form .button { min-width:76px; }
  .report-preview { grid-template-columns:1fr 1fr; }
  .report-copy { grid-column:1 / -1; }
  .access-member { flex-wrap:wrap; gap:10px; }
  .member-row .access-member-copy { flex:1; }
  .member-location-count { margin-left:42px; }
  .owner-main { padding-bottom:max(40px,env(safe-area-inset-bottom)); }
  .owner-hero h1 { font-size:34px; }
  .owner-hero p:not(.eyebrow),.owner-toggle small,.access-option small { font-size:14px; }
  .owner-member select { font-size:16px; min-height:44px; }
  .owner-topbar { gap:8px; }
  .owner-topbar .language-switch { margin:0; }
  .owner-back { font-size:0; width:44px; }
  .owner-account { display:none; }
  .owner-topbar { grid-template-columns:44px minmax(0,1fr) auto; }
}
@media (max-width:360px) {
  .map-controls { padding-left:12px; padding-right:12px; }
  .brand-mark { display:none; }
  .map-controls .map-intro h1 { font-size:27px; }
  .map-controls .map-toolbar { grid-template-columns:minmax(0,1fr) 112px 44px; }
  .space-toolbar .text-button { font-size:12px; }
  .modal { padding-left:16px; padding-right:16px; }
}
@media (max-height:500px) and (orientation:landscape) {
  .map-controls { gap:6px; }
  .map-controls .map-intro,.map-controls .map-overlay-top { display:none; }
  .map-controls .map-summary-row { display:none; }
  .map-controls .space-toolbar { min-height:44px; }
  .map-controls .member-filter-summary { padding:0 10px; }
}
.map-pane::before,.map-pane:has(.space-toolbar)::before { height:calc(var(--controls-height, 320px) + 90px); background:linear-gradient(180deg,rgba(9,10,10,.94) 0%,rgba(9,10,10,.8) calc(100% - 90px),rgba(9,10,10,0) 100%); }
.map-empty { top:calc(var(--controls-height, 300px) + 16px); left:50%; transform:translateX(-50%); max-height:calc(100% - var(--controls-height, 300px) - 104px); overflow-y:auto; }
.map-empty .button { flex-shrink:0; }
.button,.text-button { font-size:14px; }
.map-access-copy strong { font-size:13px; }
.map-access-copy > span { font-size:11px; }
.language-switch svg { width:16px; height:16px; }
@media (max-width:820px), (max-height:500px) {
  .map-empty { padding:20px; gap:6px; }
  .map-empty.has-guide-close { padding-top:48px; }
  .map-empty .empty-mark { display:none; }
  .map-empty > p { font-size:14px; line-height:1.5; }
  .map-empty > strong { font-size:20px; line-height:1.25; }
  .map-empty .button { min-height:44px; }
}
@media (max-width:820px), (max-height:500px) {
  .owner-topbar .owner-back { font-size:0; width:44px; min-width:44px; padding:0; }
}
@media (max-width:820px), (max-height:500px) {
  .login-fields label > span { font-size:14px; letter-spacing:0; text-transform:none; }
  .login-fields input,.space-form input { font-size:16px; min-height:48px; }
  .modal { bottom:var(--keyboard-offset,0px); max-height:calc(var(--visual-height,100dvh) - 16px); }
  .detail-sheet { bottom:var(--keyboard-offset,0px); max-height:calc(var(--visual-height,100dvh) - 16px); }
}

/* Account editing shares the existing modal and touch targets. */
.profile-modal { width:min(520px,calc(100% - 32px)); }
.profile-avatar-row { display:flex; align-items:center; gap:20px; margin:20px 0 12px; }
.profile-avatar { position:relative; display:grid; place-items:center; overflow:hidden; width:88px; height:88px; flex:0 0 88px; border-radius:50%; background:var(--acid); color:var(--black); font-size:28px; font-weight:800; }
.profile-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.profile-avatar-actions { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.profile-avatar-actions .text-button { min-height:44px; }
.profile-hint,.profile-modal .login-fields small { color:var(--muted); font-size:13px; line-height:1.6; }
.profile-modal .login-fields select { width:100%; min-height:48px; padding:10px 14px; border:1px solid var(--line-dark); border-radius:var(--radius-control); background:var(--black-raised); color:var(--white); font-size:16px; color-scheme:dark; }
.profile-modal .login-fields input { border-radius:var(--radius-control); }
.profile-modal .login-fields select:focus-visible { outline:2px solid var(--acid); outline-offset:2px; }
.profile-account { display:flex; flex-direction:column; gap:5px; margin:18px 0; overflow-wrap:anywhere; }
.profile-account > span,.profile-account small { font-size:13px; color:var(--muted); }
.profile-account strong { font-size:15px; }
.profile-notice { padding:10px 14px; border-radius:12px; background:rgba(129,162,105,.15); color:var(--white); font-size:14px; line-height:1.5; }
.profile-session-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; margin-top:8px; }
.profile-session-actions .text-button { min-height:44px; font-size:14px; }
.apple-login-button { width:100%; min-height:48px; margin:0 0 18px; background:#000; color:#fff; border:1px solid #000; justify-content:center; font-size:16px; font-weight:600; letter-spacing:0; }
.apple-login-button svg { width:24px; height:24px; }
@media (max-width:820px), (max-height:500px) { .profile-modal { width:100%; } .profile-hint,.profile-modal .login-fields small { font-size:14px; } }

.profile-modal .text-button { color:var(--white); }
.profile-avatar-row { margin:12px 0; gap:16px; }
.profile-avatar-actions { display:grid; grid-template-columns:auto auto; gap:0 8px; min-width:0; }
.profile-avatar-actions .button { grid-column:1 / -1; justify-self:start; }
.profile-avatar-actions .text-button { font-size:14px; text-align:left; white-space:normal; }
@media (max-width:360px) { .profile-avatar-actions { grid-template-columns:1fr; } }
/* Keep WKWebView's language field on the same surface and control geometry. */
.profile-modal .login-fields select { appearance:none; -webkit-appearance:none; padding-right:40px; }
.profile-modal .login-fields label:has(select) { position:relative; }
.profile-modal .login-fields label:has(select)::after { content:""; position:absolute; right:18px; bottom:21px; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); pointer-events:none; }

/* Map first: persistent space navigation and separate filter/settings actions. */
.map-controls-panel { display:flex; flex-direction:column; gap:12px; }
.map-controls-panel[hidden] { display:none; }
.map-controls .topbar { flex-wrap:nowrap; gap:12px; }
.map-controls .brand-lockup { flex:0 0 auto; }
.map-controls .space-switcher { display:flex; flex:1; min-width:0; max-width:280px; min-height:48px; padding:0 14px; gap:8px; background:var(--black-raised); border:1px solid rgba(255,254,247,.24); }
.space-switcher > span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.space-switcher > svg { flex:0 0 18px; width:18px; height:18px; }
.map-controls .topbar-actions { gap:8px; margin-left:auto; }
.map-controls .topbar-actions .icon-button { width:48px; height:48px; min-height:48px; padding:0; display:grid; place-items:center; background:var(--black-raised); border:1px solid rgba(255,254,247,.24); }
.map-controls .topbar-actions svg { width:22px; height:22px; }
.map-controls .controls-toggle { position:relative; }
.map-controls .controls-toggle.has-filters,.map-controls .controls-toggle[aria-expanded="true"] { border-color:var(--acid); color:var(--acid); }
.filter-count { position:absolute; right:-3px; top:-3px; display:grid; place-items:center; min-width:20px; height:20px; border-radius:50%; background:var(--acid); color:var(--black); font-size:12px; }
.map-controls .map-toolbar { grid-template-columns:minmax(0,1fr) 116px; }
.map-controls .map-summary-row { min-height:28px; }
.map-controls .map-caption { background:transparent; padding:0; color:var(--muted); }
.map-pane.controls-collapsed::before { height:calc(var(--controls-height,64px) + 44px); background:linear-gradient(180deg,rgba(9,10,10,.86),rgba(9,10,10,0)); }
.map-floating-actions { display:flex; flex-direction:column; align-items:center; gap:12px; pointer-events:auto; }
.map-locate { display:grid; place-items:center; width:48px; height:48px; min-height:48px; gap:0; padding:0; }
.map-locate svg { display:block; width:22px; height:22px; margin:0; }
.map-upload-fab { display:grid; place-items:center; width:56px; height:56px; min-height:56px; padding:0; border-radius:50%; box-shadow:var(--shadow-small); }
.map-upload-fab svg { width:28px; height:28px; }
.map-overlay-bottom { align-items:flex-end; bottom:var(--map-actions-bottom); }
.map-access-panel { max-width:calc(100% - 72px); }
.leaflet-bottom.leaflet-right { right:24px; bottom:calc(var(--map-actions-bottom) + 188px); }
.settings-list { display:flex; flex-direction:column; gap:12px; }
.settings-list > .button,.settings-language { display:flex; align-items:center; justify-content:flex-start; gap:12px; min-height:56px; padding:12px 16px; border:1px solid var(--line-dark); border-radius:var(--radius-control); background:var(--black-raised); font-size:16px; }
.settings-list > .button > span { flex:1; text-align:left; }
.settings-language { justify-content:space-between; }
.settings-language .language-switch { margin:0; min-height:48px; }
.manage-photo.is-readonly { cursor:default; }
.manage-photo.is-readonly .privacy-check { opacity:.3; }
.profile-avatar-row { align-items:flex-start; }
.profile-avatar-actions { display:flex; flex-direction:column; flex:1; align-items:stretch; gap:8px; }
.profile-avatar-actions .button { justify-self:auto; width:100%; min-height:44px; padding:10px 12px; border-radius:var(--radius-control); border-color:rgba(255,254,247,.24); background:var(--black-raised); justify-content:flex-start; text-align:left; font-size:14px; }
.profile-avatar-actions .button svg { width:18px; height:18px; flex:0 0 18px; }
.profile-session-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line-dark); }
.profile-session-actions .button { min-height:48px; padding:10px 12px; border-radius:var(--radius-control); background:var(--black-raised); border-color:rgba(255,254,247,.24); }
.profile-session-actions .is-danger { border-color:rgba(255,100,71,.4); }
.profile-session-actions svg { width:18px; height:18px; flex:0 0 18px; }
@media (max-width:820px), (max-height:500px) {
  .map-controls { padding:12px 16px 0; gap:12px; }
  .map-controls .topbar { gap:8px; }
  .map-controls .brand-mark { width:32px; height:32px; }
  .map-controls .brand-name { display:none; }
  .map-controls .space-switcher { max-width:none; padding:0 10px; font-size:14px; }
  .map-controls .topbar-actions { gap:8px; }
  .map-controls .map-toolbar { grid-template-columns:minmax(0,1fr) 112px; gap:8px; }
  .map-controls .map-toolbar .region-select { display:flex; grid-column:1 / -1; }
  .map-overlay-bottom { left:16px; right:16px; }
  .leaflet-bottom.leaflet-right { right:22px; }
  .profile-avatar { width:72px; height:72px; flex-basis:72px; }
  .profile-session-actions .button { font-size:14px; }
}
@media (max-width:360px) {
  .map-controls .brand-lockup { display:none; }
  .map-controls .space-switcher { padding:0 8px; }
}

.owner-shell :is(button, select, .share-link-row textarea):focus-visible,
.owner-toggle input:focus-visible + .toggle-ui {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}
/* Photo workspace: shared surfaces, clear selection/detail targets. */
.manage-photo { grid-template-columns:48px minmax(0,1fr); gap:4px; padding:4px 8px; }
.manage-select { position:relative; display:grid; place-items:center; width:48px; min-height:64px; cursor:pointer; }
.manage-select input { inset:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.manage-open { display:grid; grid-template-columns:48px minmax(0,1fr) 20px; align-items:center; gap:12px; min-height:70px; text-align:left; border:0; border-radius:12px; padding:8px; background:transparent; color:var(--white); cursor:pointer; }
.manage-open > svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; }
.manage-photo-copy small { white-space:normal; line-height:1.5; }
.modal-footer.manage-footer { flex-wrap:nowrap; }
.modal-footer .button.icon-only,.detail-actions .button.icon-only { flex:0 0 56px; min-width:56px; width:56px; height:56px; padding:0; display:grid; place-items:center; }
.icon-only svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; }
.detail-navigation { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; background:var(--black); }
.detail-back { min-height:48px; }
.detail-back svg { transform:rotate(180deg); }
.detail-sheet { overflow-y:auto; }
.detail-title-row { align-items:flex-start; }
.detail-title-row h2 { overflow-wrap:anywhere; font-size:clamp(22px,5vw,32px); }
.photo-edit-form,.photo-address { display:grid; gap:14px; margin-top:20px; }
.photo-edit-form label,.location-coordinates label { display:grid; gap:8px; color:var(--muted); font-size:14px; }
.photo-edit-form input,.photo-edit-form textarea,.location-coordinates input { width:100%; min-width:0; min-height:48px; padding:12px; border:1px solid var(--line-dark); border-radius:12px; background:var(--black); color:var(--white); font:inherit; font-size:16px; color-scheme:dark; }
.photo-edit-form textarea { resize:vertical; }
.photo-edit-actions,.photo-location-actions { display:flex; gap:12px; }
.photo-edit-actions > .button { flex:1; }
.photo-address { padding:16px 0; border-top:1px solid var(--line-dark); }
.photo-address p { margin:0; line-height:1.5; }
.photo-address small { color:var(--muted); line-height:1.6; }
.photo-notes { white-space:pre-wrap; overflow-wrap:anywhere; }
.location-bar { position:fixed; z-index:1100; bottom:max(14px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(480px,calc(100% - 24px)); padding:18px; border:1px solid var(--line-dark); border-radius:24px; color:var(--white); background:var(--black); box-shadow:0 10px 40px #0008; }
.location-bar p { color:var(--muted); font-size:14px; line-height:1.5; margin:8px 0 14px; }
.location-coordinates { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.is-positioning .map-overlay-bottom,.is-positioning .leaflet-control-zoom { visibility:hidden; }
.capture-pin { display:grid; place-items:center; background:var(--acid); color:var(--black); border-radius:50%; border:3px solid var(--black); box-shadow:0 4px 16px #0005; }
.capture-pin svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; }
.photo-marker-icon.is-location-editable { touch-action:none; }
.photo-marker-icon.is-moving { transform-origin:center; filter:drop-shadow(0 0 10px var(--acid)); }
.detail-image-wrap { max-height:35dvh; }
.detail-body { padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
@media(max-width:600px) { .detail-sheet { top:12px; bottom:12px; max-height:calc(var(--visual-height,100dvh) - 24px); border-radius:24px; } .detail-actions { display:flex; flex-wrap:wrap; } .photo-location-actions { flex-wrap:wrap; } }

/* Keep the editor scrollable in WKWebView; prevent flex children shrinking. */
.detail-navigation,.detail-body { flex:0 0 auto; }
.detail-navigation { position:sticky; top:0; z-index:3; }
.detail-sheet.is-editing .detail-image-wrap { width:120px; min-height:0; height:120px; margin-top:16px; }

.detail-title-actions { display:flex; gap:4px; flex:0 0 auto; }
.detail-title-row > div:first-child { min-width:0; }

.camera-modal video { width:100%; max-height:55dvh; min-height:160px; object-fit:contain; border-radius:20px; background:#000; margin:16px 0; }

.workflow-row { grid-template-columns:minmax(0,1fr) auto auto; }
.workflow-row > span { min-width:0; }
.workflow-row > span strong,.workflow-row > span small { display:block; overflow:hidden; text-overflow:ellipsis; }
.workflow-row > span small { color:var(--muted); font-size:13px; margin-top:4px; }
.workflow-row .button { min-height:44px; padding:10px 14px; }
.workflow-invite { grid-template-columns:minmax(0,1fr) auto; }
@media (max-width:480px) {
  .workflow-row:not(.workflow-invite) { grid-template-columns:1fr 1fr; }
  .workflow-row:not(.workflow-invite) > span { grid-column:1 / -1; }
}

.settings-refresh { display: grid; gap: 10px; }
.settings-refresh .profile-hint { margin: 0; }

.detail-image-button { display:block; padding:0; cursor:zoom-in; touch-action:pan-y; -webkit-touch-callout:none; user-select:none; }
.detail-image-button img { -webkit-touch-callout:none; user-select:none; }
.detail-image-button:focus-visible { outline:3px solid var(--acid); outline-offset:5px; }
.detail-image-button[aria-busy="true"] { opacity:.6; }
.photo-viewer .pswp__top-bar { padding-top:env(safe-area-inset-top); padding-right:env(safe-area-inset-right); padding-left:env(safe-area-inset-left); align-items:center; }
.photo-viewer .pswp__button { width:56px; height:56px; }
.photo-viewer .pswp__photo-name { flex:1; min-width:0; padding:0 16px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#fff; font-size:14px; }
.photo-viewer .pswp__photo-hint { position:absolute; left:16px; right:16px; bottom:calc(20px + env(safe-area-inset-bottom)); color:#fff; text-align:center; font-size:13px; pointer-events:none; opacity:1; transition:opacity 180ms; }
.photo-viewer.pswp--ui-hidden .pswp__photo-hint { opacity:0; }
@media (prefers-reduced-motion:reduce) { .photo-viewer .pswp__photo-hint { transition:none; } }
.photo-viewer { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.detail-image-button, .detail-image-button img { -webkit-user-select:none; }

.photo-cluster-icon.is-location-editable { touch-action:none; }
.photo-cluster-icon.is-moving { filter:drop-shadow(0 0 10px var(--acid)); cursor:grabbing; }
.location-confirm-modal { width:min(480px,calc(100% - 24px)); }

.map-pane.has-location-undo .leaflet-bottom.leaflet-right { bottom:calc(var(--map-actions-bottom) + 264px); }
.offline-status {position:absolute;z-index:var(--z-overlay);left:12px;right:12px;top:calc(env(safe-area-inset-top) + 82px);display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-radius:16px;background:#111;color:#fff;font-size:12px;box-shadow:0 4px 18px #0003;}
.offline-status strong {color:#c6ff45;}
.offline-status .text-button {margin-left:auto;color:#c6ff45;min-height:36px;}
.offline-settings {padding:12px;border:1px solid #ffffff30;border-radius:16px;}
.offline-settings p {font-size:13px;line-height:1.5;opacity:.85;}
.offline-settings>div {display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.map-pane[data-offline="true"] .leaflet-container {background:repeating-linear-gradient(0deg,transparent,transparent 49px,#7772 50px),repeating-linear-gradient(90deg,#deded3,#deded3 49px,#7772 50px);}

.offline-settings .text-button {color:var(--white);min-height:44px;}
.offline-missing {display:grid;place-items:center;min-height:200px;padding:24px;text-align:center;color:var(--white);}

/* Browsing controls share the existing dark modal palette and touch sizes. */
.library-modal .text-button { color:var(--white); min-height:48px; }
.library-modal .filter-pill { color:var(--muted); min-height:48px; font-size:14px; }
.library-modal .filter-pill.is-active { color:var(--on-accent); }
.library-filters input,.library-filters select { min-height:48px; color:var(--white); font-size:16px; }
.library-detail-navigation .icon-button { min-width:48px; min-height:48px; }
.library-tools > .text-button { text-align:right; }

@media (max-width:600px) {
  .import-modal.has-queue > .modal-copy,
  .import-modal.has-queue > .import-picker-hint:not(#queue-storage) { display:none; }
  .import-modal.has-queue #queue-storage { margin-block:10px; font-size:13px; }
}

/* Photo-first library: filters occupy a separate screen, including in native WebViews. */
.library-modal .modal-header { align-items:center; gap:8px; margin-bottom:12px; }
.library-heading { min-width:0; flex:1; }
.library-heading .eyebrow { margin:0 0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.library-modal .modal-header h2 { font-size:26px; line-height:1.1; }
.library-modal .library-header-actions { display:flex; flex:0 0 auto; gap:4px; }
.library-header-actions .icon-button { min-width:48px; min-height:48px; }
.library-tools { gap:8px; margin:0; }
.library-modes { gap:0; padding:2px; border-radius:12px; background:var(--black-raised); }
.library-modal .filter-pill { border:0; border-radius:10px; padding:0 14px; }
.library-filter-toggle { display:flex; align-items:center; justify-content:center; gap:6px; min-height:48px; border:1px solid var(--line-dark); border-radius:12px; padding:0 12px; background:var(--black-raised); color:var(--white); font:inherit; font-size:14px; cursor:pointer; }
.library-filter-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.library-filter-toggle.is-active { border-color:var(--acid); }
.library-filter-toggle b { display:grid; place-items:center; min-width:20px; height:20px; border-radius:50%; background:var(--acid); color:var(--on-accent); font-size:11px; }
.library-summary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:40px; margin:0; font-size:12px; }
.library-summary .text-button { min-height:44px; padding:0 4px; font-size:12px; }
.library-filter-screen { flex:1; min-height:0; display:flex; flex-direction:column; }
.library-filters { flex:1; min-height:0; overflow-y:auto; align-content:start; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; padding:8px 2px 16px; }
.library-filters label { font-size:13px; gap:8px; }
.library-filters input[type="date"] { display:block; appearance:none; max-width:100%; overflow:hidden; }
.library-filters input[type="date"]::-webkit-date-and-time-value { min-width:0; text-align:left; }
.library-filters label:last-of-type { grid-column:1/-1; }
.library-filter-error { flex:none; margin:0; color:var(--acid); font-size:13px; }
.library-filter-error:not(:empty) { padding-block:12px; }
.library-filter-actions { flex:none; padding-top:12px; border-top:1px solid var(--line-dark); }
.library-filter-actions .button { flex:1; min-height:48px; }
.library-filter-actions .text-button { padding-inline:12px; }
.library-list { padding:2px; }
.library-day h3 { font-size:14px; margin-bottom:10px; }
.library-grid { gap:8px; }
@media (max-width:820px), (max-height:500px) {
  .modal.library-modal { top:0; right:0; bottom:auto; left:0; transform:none; width:100%; height:var(--visual-height,100dvh); max-height:var(--visual-height,100dvh); border:0; border-radius:0; padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  .library-modal .modal-header { margin-bottom:8px; }
  .library-modal .modal-header h2 { font-size:24px; }
  .library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .library-photo { border:0; border-radius:8px; }
  .library-photo-copy { padding:7px; gap:3px; }
  .library-photo-copy strong { font-size:12px; }
  .library-photo-copy small { font-size:11px; }
}
@media (max-height:500px) and (min-width:600px) {
  .library-modal:not(.is-filtering) { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto minmax(0,1fr); column-gap:16px; }
  .library-modal:not(.is-filtering) .library-summary,.library-modal:not(.is-filtering) .library-list { grid-column:1/-1; }
  .library-heading .eyebrow { display:none; }
  .library-modal .modal-header { margin-bottom:0; }
  .library-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .library-filters { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .library-filters label:last-of-type { grid-column:auto; }
}

/* Invitations and first steps are readable phone screens with reachable actions. */
.onboarding-modal { width:min(520px,calc(100vw - 32px)); height:min(760px,calc(var(--visual-height,100dvh) - 32px)); max-height:calc(var(--visual-height,100dvh) - 32px); display:flex; flex-direction:column; overflow:hidden; }
.onboarding-modal .modal-header { flex:none; align-items:center; margin-bottom:8px; }
.onboarding-modal .modal-header .eyebrow { margin:0; }
.onboarding-modal .icon-button { min-height:48px; min-width:48px; }
.onboarding-content { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:8px 2px 16px; }
.onboarding-symbol { display:grid; place-items:center; width:48px; height:48px; margin-bottom:16px; border:1px solid var(--line-dark); border-radius:20px; background:var(--black-raised); color:var(--acid); }
.onboarding-symbol svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; }
.onboarding-content h2 { margin:0; font-size:30px; line-height:1.15; letter-spacing:-.035em; }
.onboarding-space-name { margin:12px 0 0; font-size:20px; font-weight:800; overflow-wrap:anywhere; }
.onboarding-copy { color:var(--muted); font-size:14px; line-height:1.55; margin-top:12px; }
.onboarding-facts { display:grid; gap:0; margin:16px 0 0; border:1px solid var(--line-dark); border-radius:14px; background:var(--black-raised); }
.onboarding-facts>div { display:grid; gap:4px; padding:10px 14px; }
.onboarding-facts>div+div { border-top:1px solid var(--line-dark); }
.onboarding-facts dt { color:var(--muted); font-size:12px; }
.onboarding-facts dd { margin:0; font-size:14px; font-weight:700; overflow-wrap:anywhere; }
.onboarding-note,.onboarding-login-context { padding:14px; border:1px solid var(--line-dark); border-radius:12px; font-size:14px; line-height:1.5; color:var(--muted); }
.onboarding-login-context { margin-top:12px; color:var(--white); }
.onboarding-actions { display:flex; flex:none; flex-direction:column; gap:10px; padding-top:16px; border-top:1px solid var(--line-dark); }
.onboarding-actions .button { width:100%; min-height:48px; justify-content:center; font-size:15px; }
.onboarding-actions .text-button { min-height:48px; color:var(--muted); font-size:14px; }
.onboarding-modal .invite-error { font-size:14px; line-height:1.5; }
.onboarding-invite-link { margin-top:16px; }
@media (max-width:820px), (max-height:500px) {
  .modal.onboarding-modal { top:0; left:0; right:0; bottom:auto; transform:none; border:0; border-radius:0; width:100%; height:var(--visual-height,100dvh); max-height:var(--visual-height,100dvh); padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
  .onboarding-content h2 { font-size:28px; }
  .onboarding-content { padding-top:8px; }
}
@media (max-height:580px) {
  .onboarding-symbol { width:44px; height:44px; margin-bottom:12px; border-radius:12px; }
  .onboarding-symbol svg { width:24px; height:24px; }
  .onboarding-content h2 { font-size:24px; }
  .onboarding-actions { gap:6px; padding-top:8px; }
}

/* Data tools use the same full-screen mobile shell as the photo library. */
.data-modal { display:flex;flex-direction:column;width:min(640px,calc(100vw - 24px));height:min(880px,calc(var(--visual-height,100dvh) - 32px));max-height:calc(var(--visual-height,100dvh) - 32px);overflow:hidden; }
.data-modal .modal-header { flex:none;align-items:center;margin-bottom:12px; }
.data-modal .modal-header h2 { font-size:26px;line-height:1.15; }
.data-body { flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain; }
.data-body p { font-size:14px;line-height:1.6;margin:12px 0; }
.data-body h3 { font-size:18px;margin:16px 0 8px; }
.data-note { color:var(--muted); }
.data-promise { border:1px solid var(--line-dark);border-radius:16px;padding:16px; }
.data-links { display:grid;gap:10px;margin:20px 0; }
.data-links .button { justify-content:flex-start;text-align:left;white-space:normal;min-height:76px; }
.data-links .button span { flex:1; }
.data-links small { display:block;color:var(--muted);font-size:12px;margin-top:4px; }
.data-location { display:grid;gap:8px;font-weight:700;font-size:14px;margin-top:16px; }
.data-location select { width:100%;height:48px;min-height:48px;padding:0 12px;border:1px solid var(--line-dark);border-radius:12px;background:var(--black-raised);color:var(--white);font-size:16px; }
.data-selection { display:flex;align-items:center;justify-content:space-between;min-height:48px;border-bottom:1px solid var(--line-dark);font-size:14px; }
.data-modal .text-button { color:var(--white);min-height:48px; }
.data-photo { display:flex;align-items:center;gap:12px;min-height:76px;padding:10px 4px;border-bottom:1px solid var(--line-dark);cursor:pointer; }
.data-photo input { flex:none;width:24px;height:24px;accent-color:var(--acid); }
.data-photo img { width:56px;height:56px;object-fit:cover;border-radius:8px; }
.data-photo span { flex:1;min-width:0; }
.data-photo strong { display:block;font-size:14px;overflow-wrap:anywhere; }
.data-photo small { display:block;font-size:12px;color:var(--muted);margin-top:4px; }
.data-footer { flex:none;padding-top:12px;border-top:1px solid var(--line-dark); }
.data-footer .button { width:100%;min-height:48px; }
.data-footer p,.data-footer small { display:block;line-height:1.4;font-size:13px;margin:0 0 10px; }
.data-confirm { padding:16px;border:1px solid var(--acid);border-radius:16px;display:grid;gap:12px; }
.data-recovery-local { border-bottom:1px solid var(--line-dark);padding-bottom:20px;display:grid;gap:12px; }
.data-recovery-local p,.data-recovery-local h3 { margin:0; }
@media(max-width:700px) {
 .modal.data-modal { top:0;right:0;bottom:auto;left:0;transform:none;width:100%;height:var(--visual-height,100dvh);max-height:var(--visual-height,100dvh);border:0;border-radius:0;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
 .data-modal .modal-header h2 { font-size:24px; }
}

/* Collections keep photos central; metadata, selection and management are separate screens. */
.collection-modal {display:flex;flex-direction:column;width:min(920px,calc(100vw - 24px));height:min(900px,calc(var(--visual-height,100dvh) - 32px));max-height:calc(var(--visual-height,100dvh) - 32px);overflow:hidden;}
.collection-modal .modal-header{flex:none;align-items:center;margin-bottom:12px;gap:8px;}
.collection-modal .modal-header>div:first-child{min-width:0;flex:1;}
.collection-modal .modal-header h2{font-size:24px;line-height:1.15;overflow-wrap:anywhere;}
.collection-modal .eyebrow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.collection-modal .collection-header-actions{display:flex;gap:4px;flex:0 0 auto;}
.collection-header-actions .icon-button{width:48px;height:48px;}
.collection-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;}
.collection-footer{flex:none;border-top:1px solid var(--line-dark);padding-top:12px;}
.collection-footer>.button{width:100%;min-height:48px;}
.collection-footer p{font-size:14px;line-height:1.45;margin:0 0 10px;}
.collection-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.collection-modal .text-button{color:var(--white);min-height:48px;font-size:14px;}
.collection-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.collection-card{text-align:left;border:1px solid var(--line-dark);background:var(--black-raised);color:var(--white);border-radius:16px;padding:0 0 14px;overflow:hidden;min-width:0;cursor:pointer;}
.collection-card>strong,.collection-card>small,.collection-card>span:not(.collection-cover){display:block;margin:8px 12px 0;overflow-wrap:anywhere;}
.collection-card>strong{font-size:16px;line-height:1.3;}
.collection-card>small,.collection-card>span:not(.collection-cover){font-size:12px;color:var(--muted);}
.collection-cover{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));width:100%;aspect-ratio:1.25;background:var(--black-soft);}
.collection-cover img{width:100%;height:100%;object-fit:cover;}
.collection-cover img:only-child{grid-column:1/-1;grid-row:1/-1;}
.collection-cover.is-empty{display:flex;align-items:center;justify-content:center;color:var(--acid);}
.collection-cover svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.5;}
.collection-card:active,.collection-choice:active{opacity:.8;}
.collection-empty{padding:40px 12px;text-align:center;}
.collection-empty>span{display:inline-flex;color:var(--acid);}
.collection-empty>span svg{width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:1.5;}
.collection-empty h3{font-size:22px;margin:20px 0 12px;}
.collection-empty p,.collection-note{font-size:14px;color:var(--muted);line-height:1.6;}
.collection-empty .button{margin-top:20px;}
.collection-suggestions,.collection-management{display:grid;gap:12px;}
.collection-suggestions .button{justify-content:space-between;min-height:76px;text-align:left;}
.collection-suggestions small{display:block;font-size:12px;color:var(--muted);margin-top:4px;}
.collection-form{display:grid;gap:20px;padding-bottom:12px;}
.collection-form label{min-width:0;display:grid;gap:8px;font-size:14px;font-weight:700;}
.collection-form input,.collection-form textarea{width:100%;min-height:48px;padding:12px;border:1px solid var(--line-dark);border-radius:12px;color:var(--white);background:var(--black-raised);font-size:16px;min-width:0;}
.collection-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.collection-selection{display:flex;align-items:center;justify-content:space-between;min-height:48px;font-size:14px;}
.collection-date-select{width:100%;margin:8px 0;}
.collection-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.collection-choice{position:relative;min-width:0;display:block;cursor:pointer;}
.collection-choice input{position:absolute;z-index:1;left:8px;top:8px;width:24px;height:24px;accent-color:var(--acid);}
.collection-choice img{display:block;aspect-ratio:1;object-fit:cover;width:100%;border-radius:10px;}
.collection-choice strong{display:block;font-size:12px;line-height:1.4;margin:6px 0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.collection-choice input:checked+span img{outline:3px solid var(--acid);outline-offset:-3px;}
.collection-date{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin:0 0 16px;}
.collection-description{margin-bottom:16px;font-size:14px;line-height:1.6;}
.collection-description summary{cursor:pointer;min-height:48px;padding:12px 0;}
.collection-description p{white-space:pre-wrap;overflow-wrap:anywhere;}
.collection-gallery .collection-empty{grid-column:1/-1;}
@media(max-width:700px){
 .modal.collection-modal{top:0;right:0;bottom:auto;left:0;transform:none;width:100%;height:var(--visual-height,100dvh);max-height:var(--visual-height,100dvh);border:0;border-radius:0;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));}
 .collection-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
 .collection-modal .modal-header h2{font-size:24px;}
 .collection-form input[type=date]{padding:8px;font-size:16px;}
}

.collection-form input[type=date]{appearance:none;-webkit-appearance:none;max-width:100%;box-sizing:border-box;}
.collection-form input[type=date]::-webkit-date-and-time-value{text-align:left;}

.collection-cover img:first-child:nth-last-child(2),.collection-cover img:first-child:nth-last-child(2)~img{grid-row:1/-1;}
.collection-cover img:first-child:nth-last-child(3)~img:last-child{grid-column:1/-1;}

/* Activity is opened from the member panel, leaving map and library controls intact. */
.activity-indicator{display:inline-flex;align-items:center;gap:4px;margin-left:8px;border-radius:12px;padding:3px 7px;background:var(--acid);color:var(--black);font-size:11px;line-height:1.25;white-space:nowrap;}
.access-activity{width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.access-activity>svg{width:20px;height:20px;}
.modal.activity-modal{display:flex;flex-direction:column;width:min(760px,calc(100vw - 24px));height:min(850px,calc(var(--visual-height,100dvh) - 32px));max-height:calc(var(--visual-height,100dvh) - 32px);overflow:hidden;}
.activity-modal .modal-header{flex:none;gap:12px;align-items:center;margin-bottom:8px;}
.activity-modal .modal-header>div{min-width:0;}
.activity-modal .modal-header h2{font-size:24px;}
.activity-modal .eyebrow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.activity-modal .icon-button{width:48px;height:48px;flex:none;}
.activity-list{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;}
.activity-toolbar{display:flex;align-items:center;gap:12px;justify-content:space-between;min-height:48px;font-size:14px;}
.activity-toolbar label,.activity-preferences label{display:flex;align-items:center;gap:8px;min-height:48px;cursor:pointer;font-size:16px;}
.activity-toolbar input,.activity-preferences input{width:24px;height:24px;accent-color:var(--acid);flex:none;}
.activity-toolbar>span{color:var(--muted);white-space:nowrap;}
.activity-preferences{font-size:14px;border-bottom:1px solid var(--line-dark);margin-bottom:12px;}
.activity-preferences summary{min-height:48px;padding:12px 0;cursor:pointer;}
.activity-preferences p,.activity-window-note{color:var(--muted);font-size:13px;line-height:1.55;}
.activity-window-note{margin-bottom:16px;}
.activity-items{display:grid;gap:12px;}
.activity-photo{display:flex;gap:12px;align-items:center;width:100%;min-height:108px;text-align:left;border:1px solid var(--line-dark);border-radius:14px;padding:12px;background:var(--black-raised);color:var(--white);}
.activity-photo>img{width:80px;height:80px;object-fit:cover;border-radius:8px;flex:none;}
.activity-photo-copy{display:grid;gap:6px;flex:1;min-width:0;}
.activity-photo-copy strong{font-size:16px;line-height:1.3;overflow-wrap:anywhere;}
.activity-photo-copy>span{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.activity-photo-copy small{font-size:12px;color:var(--muted);}
.activity-new{font-size:11px;white-space:nowrap;color:var(--acid);font-weight:700;}
.activity-photo:active{opacity:.8;}
.activity-empty{padding:36px 12px;text-align:center;}
.activity-empty h3{font-size:22px;}
.activity-empty p{font-size:14px;color:var(--muted);line-height:1.6;}
.activity-footer{flex:none;border-top:1px solid var(--line-dark);padding-top:12px;}
.activity-footer>.button{width:100%;min-height:48px;}
.activity-footer p{font-size:14px;color:var(--acid);line-height:1.5;margin-bottom:10px;}
@media(max-width:700px){
 .modal.activity-modal{top:0;right:0;bottom:auto;left:0;transform:none;width:100%;height:var(--visual-height,100dvh);max-height:var(--visual-height,100dvh);border:0;border-radius:0;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));}
}

/* Shared photo discussion: phone content and composer stay above system keyboard. */
.detail-discussion{width:100%;min-height:48px;margin:12px 0;justify-content:center;}
.modal.discussion-modal{display:flex;flex-direction:column;width:min(720px,calc(100vw - 24px));height:min(850px,calc(var(--visual-height,100dvh) - 32px));max-height:calc(var(--visual-height,100dvh) - 32px);overflow:hidden;}
.discussion-modal .modal-header{flex:none;gap:12px;align-items:center;margin-bottom:8px;}
.discussion-modal .modal-header>div{min-width:0;}
.discussion-modal h2{font-size:22px;line-height:1.2;}
.discussion-modal .icon-button{height:48px;width:48px;flex:none;}
.discussion-photo{display:flex;align-items:center;gap:12px;flex:none;min-height:48px;margin-bottom:8px;}
.discussion-photo img{width:40px;height:40px;object-fit:cover;border-radius:8px;}
.discussion-photo strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;}
.discussion-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;margin-bottom:8px;}
.discussion-tools .button{min-height:48px;padding:10px 14px;}
.discussion-tools>span{font-size:13px;color:var(--muted);}
.discussion-like.is-liked{border-color:var(--acid);color:var(--acid);}
.discussion-like.is-liked svg{fill:var(--acid);}
.discussion-list{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;}
.discussion-message{padding:12px;border:1px solid var(--line-dark);background:var(--black-raised);border-radius:12px;margin:8px 0;}
.discussion-message>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.discussion-message strong{font-size:15px;overflow-wrap:anywhere;}
.discussion-message small{font-size:11px;color:var(--muted);white-space:nowrap;}
.discussion-message p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:1.5;margin:10px 0;}
.discussion-message-actions{display:flex;gap:12px;flex-wrap:wrap;}
.discussion-modal .text-button{min-height:48px;padding:8px 4px;font-size:13px;color:var(--white);}
.discussion-removed{display:block;margin-left:auto;}
.discussion-more{width:100%;min-height:48px;}
.discussion-empty{padding:24px 12px;text-align:center;color:var(--muted);font-size:15px;line-height:1.5;}
.discussion-help{color:var(--muted);font-size:13px;line-height:1.5;margin:8px 0;}
.discussion-footer{flex:none;border-top:1px solid var(--line-dark);padding-top:8px;max-height:65%;overflow:auto;}
.discussion-footer>p{font-size:13px;line-height:1.5;margin:0 0 8px;}
.discussion-error{color:var(--acid);}
.discussion-footer label{display:block;font-size:14px;margin-bottom:6px;}
.discussion-footer textarea{width:100%;display:block;min-height:56px;max-height:100px;resize:none;font-size:16px;padding:10px;line-height:1.4;color:var(--white);background:var(--black-raised);border:1px solid var(--line-dark);border-radius:10px;}
.discussion-composer-actions{display:flex;align-items:center;gap:12px;justify-content:flex-end;margin-top:8px;}
.discussion-composer-actions small{margin-right:auto;font-size:12px;color:var(--muted);}
.discussion-composer-actions .button{min-height:48px;padding:10px 16px;}
.discussion-confirm{padding:8px;border:1px solid var(--line-dark);border-radius:10px;margin:8px 0;display:flex;flex-wrap:wrap;gap:8px;}
.discussion-confirm p{width:100%;font-size:14px;line-height:1.5;margin:0;}
.discussion-confirm .button{min-height:48px;flex:1;padding:8px;font-size:14px;}
.discussion-message button:active,.discussion-like:active{opacity:.8;}
@media(max-width:700px){
 .modal.discussion-modal{inset:0 auto auto 0;transform:none;width:100%;height:var(--visual-height,100dvh);max-height:var(--visual-height,100dvh);border:0;border-radius:0;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));}
}
@media(max-height:480px){.discussion-photo{display:none;}.discussion-modal .eyebrow{display:none;}.discussion-modal h2{font-size:18px;}.discussion-footer textarea{min-height:48px;}.discussion-footer{max-height:70%;}}
.share-modal .data-body { min-height:0; }
.share-selection { display:flex;justify-content:space-between;align-items:center;margin-bottom:16px; }
.share-modal .text-button { color:var(--white);min-height:48px; }
.share-choice-grid,.share-preview-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
.share-choice { position:relative;cursor:pointer;min-width:0; }
.share-choice input { position:absolute;top:8px;left:8px;width:24px;height:24px;accent-color:var(--acid);z-index:1; }
.share-choice span { display:block;border:2px solid transparent;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.06); }
.share-choice input:checked+span { border-color:var(--acid); }
.share-choice input:focus-visible+span { outline:3px solid #fff;outline-offset:2px; }
.share-choice img,.share-preview-grid img { width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px; }
.share-choice strong { display:block;font-size:12px;padding:8px;overflow-wrap:anywhere; }
.share-options { margin-top:24px;border-top:1px solid var(--line-dark);padding-top:8px; }
.share-options summary { cursor:pointer;min-height:48px;padding:12px 0; }
.share-options label { display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-height:48px; }
.share-options select { appearance:none;-webkit-appearance:none;width:100%;height:48px;min-height:48px;padding:0 40px 0 12px;border:1px solid var(--line-dark);border-radius:12px;background:var(--black-raised);color:var(--white);font-size:16px;margin:8px 0; }
.share-options label:has(select) { display:block;position:relative; }
.share-options label:has(select)::after { content:"";position:absolute;right:18px;bottom:29px;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);pointer-events:none; }
.share-options input { width:24px;height:24px;accent-color:var(--acid); }
.share-text { font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;padding:16px;border:1px solid var(--line-dark);border-radius:16px;background:rgba(255,255,255,.04); }
.share-summary { font-weight:700; }
.share-modal .data-footer { flex-shrink:0;padding-bottom:max(16px,env(safe-area-inset-bottom)); }
@media(max-width:600px){.library-header-actions {gap:2px;}.library-header-actions .icon-button{width:48px;height:48px;}.share-choice strong{line-height:1.4;}}
@media(max-height:480px){.share-modal .modal-header .eyebrow{display:none;}.share-modal .modal-header h2{font-size:20px;}.share-preview-grid,.share-choice-grid{grid-template-columns:repeat(5,minmax(0,1fr));}.share-modal .data-body{padding-top:8px;}.share-modal .data-footer{padding-top:8px;}}

/* Place search keeps the map visible; coordinates are a read-only summary. */
.location-bar {bottom:calc(var(--keyboard-offset,0px) + max(12px,env(safe-area-inset-bottom)));max-height:calc(var(--visual-height,100dvh) - 24px);overflow:auto;overscroll-behavior:contain;padding:14px;}
.location-bar .location-help {margin:6px 0 10px;font-size:14px;}
.location-search-input {display:flex;gap:8px;align-items:center;}
.location-search-input input {flex:1;min-width:0;min-height:48px;padding:12px;border:1px solid var(--line-dark);border-radius:12px;background:var(--black);color:var(--white);font:inherit;font-size:16px;color-scheme:dark;}
.location-search-input .icon-button {flex:none;width:48px;height:48px;border:1px solid var(--line-dark);border-radius:12px;color:var(--white);}
#location-search-feedback:empty {display:none;}
#location-search-feedback:not(:empty) {height:min(176px,26dvh);overflow:auto;overscroll-behavior:contain;}
#location-search-feedback ul {list-style:none;padding:0;margin:8px 0 0;}
#location-search-feedback li+li {border-top:1px solid var(--line-dark);}
#location-search-feedback li button {display:flex;align-items:flex-start;gap:10px;width:100%;min-height:56px;padding:12px 4px;text-align:left;border:0;background:transparent;color:var(--white);font:inherit;cursor:pointer;}
#location-search-feedback li button:hover,#location-search-feedback li button:focus-visible {background:#ffffff15;border-radius:8px;outline:2px solid var(--acid);outline-offset:-2px;}
#location-search-feedback li svg {width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;}
#location-search-feedback li span:last-child {min-width:0;overflow-wrap:anywhere;}
#location-search-feedback strong {display:block;font-size:16px;}
#location-search-feedback small {display:block;color:var(--muted);font-size:13px;line-height:1.5;}
#location-search-feedback .place-search-credit {margin-top:4px;font-size:11px;}
.location-bar .location-picked {color:var(--white);font-size:14px;margin:10px 0 4px;overflow-wrap:anywhere;}
.location-bar .location-coordinates {display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;color:var(--muted);font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums;}
.location-bar .photo-edit-actions {position:sticky;bottom:-14px;background:var(--black);padding:10px 0 4px;margin-top:4px;}
.location-bar .photo-edit-actions .button {min-height:48px;}
.location-bar .text-button {color:var(--white);min-height:48px;}

/* Date filtering stays in the map panel; the grid itself owns range drags. */
.map-date-field { min-width:0; }
.map-controls .map-date-trigger { width:100%; min-height:48px; padding:10px 12px; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:12px; }
.map-date-trigger svg { width:16px; height:16px; flex:none; }
.map-date-calendar[hidden] { display:none; }
.map-date-calendar { width:min(100%,390px); max-height:calc(var(--visual-height,100dvh) - 200px); overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--line-dark); border-radius:20px; background:#131515; color:var(--white); padding:12px; box-shadow:0 12px 28px #0004; }
.calendar-navigation,.calendar-navigation>div,.calendar-actions { display:flex; align-items:center; gap:8px; }
.calendar-navigation { justify-content:space-between; }
.calendar-navigation select { min-width:0; min-height:44px; border:0; border-radius:10px; padding:4px; background:#202323; color:var(--white); font:inherit; font-size:14px; }
.calendar-navigation>div { min-width:0; }
.calendar-help,.calendar-selected { margin:8px 0; font-size:12px; line-height:1.5; color:#bfc3bd; }
.calendar-weekdays,.calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); text-align:center; }
.calendar-weekdays span { padding:8px 0; color:#bfc3bd; font-size:12px; }
.calendar-days { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.calendar-days button { min-width:0; min-height:48px; border:0; background:transparent; color:var(--white); font:inherit; font-size:14px; border-radius:0; }
.calendar-days button.is-in-range { background:#d5ff3f29; }
.calendar-days button.is-start,.calendar-days button.is-end { border-radius:50%; background:var(--acid); color:#111; font-weight:700; }
.calendar-days button:focus-visible { outline:2px solid white; outline-offset:-3px; }
.calendar-actions { justify-content:flex-end; }
.calendar-actions .button { min-height:44px; padding:10px 16px; }
.capture-location-alternatives { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.capture-location-alternatives .button,.capture-location-alternatives .text-button { min-height:48px; }
@media (max-width:820px) { .map-controls .map-toolbar { grid-template-columns:minmax(0,1fr) minmax(118px,.8fr); } }
.calendar-actions .text-button { color:#e4e8e0; min-height:44px; padding:10px 12px; }
.capture-location-alternatives .text-button { color:var(--white); }
@media (max-width:360px) {
  .map-date-calendar { width:calc(100% + 32px); max-width:none; margin-inline:-16px; padding-inline:5px; }
  .calendar-days button { min-width:44px; }
}