/* Check-in page: the form as a full page, built for phones first. Shares tokens.css and
   wheres-watts.css with the map, and only overrides what differs. */

/* The map page pins the body to the window height for its full-bleed map; this page scrolls. */
.page-checkin { display: block; height: auto; min-height: 100%; }

.page-checkin header { gap: var(--plg-space-4); }
.page-checkin .brand { color: var(--plg-on-surface); text-decoration: none; }
.page-checkin .brand:hover { text-decoration: none; color: var(--plg-on-surface); }
.page-checkin .brand .eyebrow { display: block; }
.page-checkin .brand .title {
  display: block; font-family: var(--plg-font-display); font-weight: var(--plg-weight-heading);
  font-size: var(--plg-text-xl); line-height: 1.1; letter-spacing: -0.02em;
}
.back-link { margin-left: auto; }

.checkin-main { padding: var(--plg-space-6) var(--plg-space-4) var(--plg-space-12); }
.card {
  max-width: 600px; margin: 0 auto; background: var(--plg-surface);
  border: 1px solid var(--plg-border); border-radius: var(--plg-radius-xl); box-shadow: var(--plg-shadow-md);
}
section.card { padding: var(--plg-space-8); }
.card h1 {
  margin: var(--plg-space-2) 0; font-family: var(--plg-font-display); font-weight: 700;
  font-size: var(--plg-text-lg); letter-spacing: -0.01em;
}
.card .sub { margin: 0 0 var(--plg-space-4); color: var(--plg-on-surface-mut); font-size: var(--plg-text-xs); line-height: 1.5; }
.card .actions { justify-content: flex-start; flex-wrap: wrap; }
form.card .actions .btn { min-width: 180px; }

.pick-wrap { margin-top: var(--plg-space-2); }
.pick-wrap[hidden] { display: none; }
.pick-help {
  display: flex; align-items: center; justify-content: space-between; gap: var(--plg-space-3);
  font-size: var(--plg-text-xs); color: var(--plg-ink-700); margin-bottom: var(--plg-space-2);
}
.pick-help .btn { padding: var(--plg-space-2) var(--plg-space-4); font-size: var(--plg-text-xs); }
#pickArea { height: 340px; border: 1px solid var(--plg-border); border-radius: var(--plg-radius-md); cursor: crosshair; }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--plg-space-2); margin-bottom: var(--plg-space-2); }
.thumbs[hidden], .drop[hidden] { display: none; }
.thumb-item { position: relative; margin: 0; }
.thumb-item canvas { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--plg-radius-md); display: block; background: var(--plg-ink-050); }
.thumb-rm {
  position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(26, 26, 26, .72); color: #fff; font-size: 18px; line-height: 28px; cursor: pointer;
}
.thumb-rm:hover { background: rgba(26, 26, 26, .9); }
.photo-note { color: var(--plg-ink-700); }

@media (max-width: 640px) {
  .page-checkin .brand img { width: 96px; }
  .page-checkin .brand .title { font-size: var(--plg-text-md); }
  .page-checkin .brand .divider { display: none; }
  .back-link { padding: var(--plg-space-2) var(--plg-space-3); font-size: var(--plg-text-xs); }
  .checkin-main { padding: 0 0 var(--plg-space-8); }
  .card { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  form.card, section.card { padding: var(--plg-space-5) var(--plg-space-4); }
  form.card .actions .btn { width: 100%; }
  #pickArea { height: 60vh; }
}