/*
  "Whose land is this" page: a full-screen map with a slim top bar and a card at the bottom.
  Everything draws from tokens.css, so the page follows the same light/dark palette as the app.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

.parcel-page {
  position: relative;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.parcel-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: calc(var(--space-2) + var(--safe-top)) calc(var(--space-2) + var(--safe-right)) var(--space-2)
    calc(var(--space-2) + var(--safe-left));
  background: var(--surface-inverse);
  color: var(--text-inverse);
  z-index: var(--z-map-ui);
}

.parcel-topbar h1 {
  flex: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.parcel-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.parcel-icon-btn:active {
  background: rgba(255, 255, 255, 0.12);
}

.parcel-icon-btn svg,
.parcel-locate svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.parcel-map {
  flex: 1;
  z-index: var(--z-map);
}

/* The card's rounded top overlaps the map; keep the attribution above it. */
.parcel-map .leaflet-bottom {
  bottom: var(--radius-lg);
}

.parcel-locate {
  position: absolute;
  right: calc(var(--space-4) + var(--safe-right));
  bottom: calc(var(--parcel-card-height, 180px) + var(--space-3));
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  z-index: var(--z-fab);
}

.parcel-locate.is-busy svg {
  animation: parcel-pulse 1s ease-out infinite;
}

@keyframes parcel-pulse {
  50% {
    opacity: 0.35;
  }
}

/* In the flow below the map rather than over it, so the map (and its attribution) ends where the
   card begins and a fitted parcel is never hidden behind it. */
.parcel-card {
  position: relative;
  flex: none;
  margin-top: calc(-1 * var(--radius-lg));
  padding: var(--space-4) calc(var(--space-4) + var(--safe-right)) calc(var(--space-3) + var(--safe-bottom))
    calc(var(--space-4) + var(--safe-left));
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-3);
  z-index: var(--z-sheet);
}

.parcel-card p {
  margin: 0;
}

.parcel-card__hint {
  font-size: 15px;
  color: var(--text-muted);
}

.parcel-card__hint.is-error {
  color: var(--on-danger-tint);
}

.parcel-card [hidden] {
  display: none !important;
}

.parcel-card__body {
  display: grid;
  gap: var(--space-2);
}

.parcel-card__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.parcel-card__label {
  font-size: 22px;
  font-weight: 700;
}

.parcel-card__area {
  font-family: var(--font-numeric);
  color: var(--text-muted);
  white-space: nowrap;
}

.parcel-card__place {
  color: var(--text-muted);
}

.parcel-card__owner {
  width: 100%;
  margin-top: var(--space-2);
}

.parcel-card__note {
  font-size: 13px;
  color: var(--on-amber-tint);
  background: var(--amber-100);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.parcel-card__note:empty {
  display: none;
}

.parcel-card__foot {
  margin-top: var(--space-3) !important;
  font-size: 12px;
  color: var(--text-muted);
}

.parcel-card__cookies {
  color: inherit;
  margin-left: var(--space-2);
}

.parcel-card__version {
  font-family: var(--font-numeric);
  float: right;
}

/* The user's position: a dot with a halo, drawn as a Leaflet divIcon. */
.parcel-me {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--info-500);
  border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(31, 122, 224, 0.25);
  box-sizing: border-box;
}