/* ==========================================================================
   Shamwari Guide PWA - css/sightings.css
   Sightings feature: feed/review maps, photo capture grid, gallery + full-
   screen viewer, draft rows. Tokens come from css/app.css (:root).
   ========================================================================== */

/* ---------- maps (Leaflet, inventory 5.3) -------------------------------- */
.sg-sight-map {
  width: 100%;
  height: 200px;
  border-radius: var(--sg-r-md);
  overflow: hidden;
  border: 1px solid var(--sg-border);
  background: var(--sg-surface-variant);
}
.sg-sight-map--flush { border: 0; border-radius: 0; }
.sg-sight-map--picker { height: 240px; margin-top: var(--sg-s-sm); }
.sg-sight-map--detail { height: 180px; margin-top: var(--sg-s-sm); }
.sg-sight-map--admin { height: 340px; }

/* Leaflet's own default marker images are not vendored - divIcon + CSS dot. */
.sg-mappin { background: transparent; border: none; }
.sg-mappin__dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  background: var(--sg-muted);
}
.sg-mappin--approved .sg-mappin__dot { background: var(--sg-success); }
.sg-mappin--pending .sg-mappin__dot { background: var(--sg-warning); }
.sg-mappin--rejected .sg-mappin__dot { background: var(--sg-danger); }
.sg-mappin--draft .sg-mappin__dot { background: var(--sg-muted); }
.sg-mappin--pick .sg-mappin__dot { background: var(--sg-primary); width: 18px; height: 18px; }

.leaflet-container { font-family: var(--sg-font-sans); }

/* ---------- thumbnails / list rows ---------------------------------------*/
.sg-sight-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--sg-r-sm);
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--sg-surface-variant);
}
.sg-sight-thumb--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sg-muted);
}

.sg-sight-draftrow {
  display: flex;
  align-items: center;
  gap: var(--sg-s-sm);
  padding: var(--sg-s-md) var(--sg-s-lg);
}
.sg-sight-draftrow + .sg-sight-draftrow { border-top: 1px solid var(--sg-border); }
.sg-sight-draftrow__text { flex: 1 1 auto; min-width: 0; cursor: pointer; }

/* ---------- photo capture grid (log form) ---------------------------------*/
.sg-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sg-s-sm);
}
.sg-photo-tile {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: var(--sg-r-sm);
  overflow: hidden;
  background: var(--sg-surface-variant);
  border: 1px solid var(--sg-border);
  flex: 0 0 auto;
}
.sg-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-photo-tile__spinner {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.sg-photo-tile__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.sg-photo-tile__badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}
.sg-photo-tile__remove::after { content: ""; position: absolute; inset: -8px; }
.sg-photo-tile__badge--error { background: var(--sg-danger); }
.sg-photo-add {
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  border-radius: var(--sg-r-sm);
  border: 1px dashed var(--sg-border);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--sg-muted);
  font-size: 12px;
  cursor: pointer;
}
.sg-photo-add:active { background: var(--sg-surface-variant); }

/* ---------- gallery (detail screen) ---------------------------------------*/
.sg-sight-cover {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--sg-r-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--sg-surface-variant);
}
.sg-sight-cover img { width: 100%; height: 220px; object-fit: cover; display: block; }
.sg-sight-strip {
  display: flex;
  gap: var(--sg-s-sm);
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.sg-sight-strip__item {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--sg-r-sm);
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--sg-surface-variant);
}
.sg-sight-strip__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- full-screen photo viewer --------------------------------------*/
.sg-photo-viewer {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 8, 0.94);
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sg-photo-viewer__img { max-width: 92vw; max-height: 78vh; object-fit: contain; }
.sg-photo-viewer__close,
.sg-photo-viewer__delete {
  position: absolute;
  top: calc(var(--sg-s-lg) + var(--sg-safe-top));
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.sg-photo-viewer__close { right: var(--sg-s-lg); }
.sg-photo-viewer__delete { right: calc(var(--sg-s-lg) + 52px); }
.sg-photo-viewer__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.sg-photo-viewer__nav--prev { left: var(--sg-s-lg); }
.sg-photo-viewer__nav--next { right: var(--sg-s-lg); }

/* ---------- MOB-006 linked booking picker -------------------------------- */
.sg-link-error {
  border-left: 4px solid var(--sg-danger);
  background: var(--sg-danger-container);
  color: var(--sg-on-danger-container);
  border-radius: var(--sg-r-sm);
  padding: var(--sg-s-md);
  margin-bottom: var(--sg-s-sm);
}
.sg-radio-row.is-disabled { opacity: 0.6; cursor: default; }

/* ==========================================================================
   One-screen sighting - DESIGN-2 §5.C. The band heights here are the budget
   in §5.C.2: at 360 px the happy path must fit without scrolling, which is
   why the page gap drops to 8 px and the species grid clamps its own rows.
   ========================================================================== */
.sg-page--fast {
  gap: var(--sg-s-sm);
  padding-top: var(--sg-s-md);
  /* the sticky footer (.sg-sight-footer) carries its own safe-bottom padding */
  padding-bottom: var(--sg-s-sm);
}

/* hidden camera input parked at document level (same-gesture launch) */
.sg-camera-input { position: fixed; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* --- photo strip (88 px band, 72 px tiles) ------------------------------- */
.sg-sight-strip-row {
  display: flex;
  gap: var(--sg-s-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 80px;
}
.sg-sight-tile {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: var(--sg-r-sm);
  overflow: hidden;
  background: var(--sg-surface-variant);
  border: 1px solid var(--sg-border);
  padding: 0;
}
.sg-sight-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-sight-tile--add {
  border-style: dashed;
  background: transparent;
  color: var(--sg-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  min-width: 72px;
}
.sg-sight-tile__label { font-size: 12px; line-height: 14px; text-align: center; padding: 0 2px; }

/* --- location pill (32 px pill, 48 px tap target) ------------------------ */
.sg-locpill {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sg-locpill__inner {
  display: flex;
  align-items: center;
  gap: var(--sg-s-sm);
  width: 100%;
  height: 32px;
  padding: 0 var(--sg-s-md);
  border-radius: var(--sg-r-pill);
  font-size: 13px;
  font-weight: 600;
}
.sg-locpill__inner--success { background: var(--sg-success-container); color: var(--sg-on-success-container); }
.sg-locpill__inner--warning { background: var(--sg-warning-container); color: var(--sg-on-warning-container); }
.sg-locpill__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- species grid -------------------------------------------------------- */
.sg-species-grid { display: grid; gap: var(--sg-s-sm); }
.sg-species-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sg-s-xs);
  min-height: 92px;
  padding: var(--sg-s-sm) var(--sg-s-xs);
  border-radius: var(--sg-r-md);
  border: 2px solid transparent;
  background: var(--sg-surface);
  color: var(--sg-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow: hidden;
}
.sg-species-tile:active { background: var(--sg-surface-variant); }
.sg-species-tile.is-selected {
  border-color: var(--sg-primary);
  background: var(--sg-surface-variant);
}
.sg-species-tile {
  position: relative;
}
.sg-species-tile__icon {
  width: 52px;
  height: 52px;
  display: block;
  color: var(--sg-primary);
}
/* Photos fill a circle; the ring is an outline so the layout never shifts. */
img.sg-species-tile__icon {
  border-radius: 50%;
  object-fit: cover;
  background: var(--sg-surface-variant);
  outline: 3px solid transparent;
  outline-offset: 1px;
}
.sg-species-tile.is-selected img.sg-species-tile__icon { outline-color: var(--sg-primary); }
/* Tick badge so the selection reads without relying on colour. */
.sg-species-tile.is-selected::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sg-primary)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}
.sg-species-tile__icon--glyph { display: flex; align-items: center; justify-content: center; }
.sg-species-tile__label {
  max-width: 100%;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg-species-tile--more { border-style: dashed; border-color: var(--sg-border); color: var(--sg-muted); }
.sg-species-other .sg-field { margin: 0; }

/* --- linked experience row ---------------------------------------------- */
.sg-sight-linkrow {
  display: flex;
  align-items: center;
  gap: var(--sg-s-sm);
  width: 100%;
  min-height: 52px;
  padding: 0 var(--sg-s-md);
  border-radius: var(--sg-r-sm);
  border: 1px solid var(--sg-border);
  background: var(--sg-surface);
  color: var(--sg-text);
  text-align: left;
}
.sg-sight-linkrow--action { cursor: pointer; }
.sg-sight-linkrow--warn {
  background: var(--sg-warning-container);
  color: var(--sg-on-warning-container);
  border-color: var(--sg-warning);
}
.sg-sight-linkrow__text { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; }

/* --- notes row ----------------------------------------------------------- */
.sg-sight-notes { display: flex; flex-direction: column; gap: var(--sg-s-sm); }
.sg-sight-noterow { display: flex; align-items: center; gap: var(--sg-s-sm); }
.sg-sight-noterow__open {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sg-s-sm);
  min-height: 52px;
  padding: 0 var(--sg-s-md);
  border-radius: var(--sg-r-sm);
  border: 1px solid var(--sg-border);
  background: var(--sg-surface);
  color: var(--sg-muted);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sg-sight-mic {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: var(--sg-r-sm);
  border: 1px solid var(--sg-border);
  background: var(--sg-surface-variant);
  color: var(--sg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sg-sight-mic.is-on { background: var(--sg-primary); color: var(--sg-on-primary); }

/* --- more details / send ------------------------------------------------- */
.sg-sight-more-link {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--sg-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  align-self: flex-start;
  padding: 0;
}
.sg-sight-more { padding-top: var(--sg-s-xs); }

/* Send/Save stay reachable no matter how far Notes / More details push the
   form down - sticky to the bottom of the scrolling .sg-main, above the
   bottom nav (which sits after .sg-main in the shell's own flex column). */
.sg-sight-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--sg-s-xs) calc(-1 * (var(--sg-gutter) + var(--sg-safe-left))) 0 calc(-1 * (var(--sg-gutter) + var(--sg-safe-right)));
  padding: var(--sg-s-sm) calc(var(--sg-gutter) + var(--sg-safe-left)) calc(var(--sg-s-md) + var(--sg-safe-bottom)) calc(var(--sg-gutter) + var(--sg-safe-right));
  background: var(--sg-surface);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.12);
}
.sg-sight-send { min-height: 56px; font-size: 17px; }
.sg-sight-later { align-self: center; }

/* --- success card (replaces the form in place) --------------------------- */
.sg-sight-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sg-s-sm);
  padding: var(--sg-s-xxl) var(--sg-s-lg);
  text-align: center;
  background: var(--sg-surface);
  border: 1px solid var(--sg-card-border);
  border-radius: var(--sg-r-md);
}
.sg-sight-success__icon { color: var(--sg-success); }
.sg-sight-success__actions {
  display: flex;
  gap: var(--sg-s-sm);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sg-s-sm);
}
.sg-sight-success__actions .sg-btn { min-width: 140px; }


/* X13: every new tappable control is at least 48 px tall. */
.sg-sight-more-link { min-height: 48px; }
.sg-sight-later.sg-btn--text { min-height: 48px; }

/* §5.C.3 step 3: "the expansion is animated, does not navigate". Vue reuses
   the tiles that were already on screen (they are keyed by species name), so
   only the newly revealed ones play this. */
@keyframes sg-species-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.sg-species-tile { animation: sg-species-in 0.18s ease both; }
@media (prefers-reduced-motion: reduce) {
  .sg-species-tile { animation: none; }
}

/* The `Change` affordance on the linked-experience row is a real tap target. */
.sg-sight-linkrow .sg-btn { min-height: 48px; }

/* ---------- 2026-10-04 UX review ----------------------------------------- */
.sg-sight-map--strip { height: 120px; }
.sg-sight-gallery { align-self: flex-start; min-height: 48px; }
/* The location pill reads in sunlight: solid fills, 14px text. */
.sg-locpill__inner { font-size: 14px; }
.sg-locpill__inner--success { background: var(--sg-success); color: var(--sg-on-primary); }
.sg-locpill__inner--warning { background: var(--sg-warning); color: #20221A; }