/* =====================================================================
   ESSENTIALS
   The few rules the page scripts need to work: hiding and showing
   things, and making the Find the Guest pieces draggable. Everything
   about the look lives in theme.css, which you can rewrite freely.
   This file loads after the theme so a new theme can't break these.

   Class names the scripts look for or create, for styling in a theme:
   - Itinerary: .day-tab, .day, [data-countdown], .reveal (+ .is-visible)
   - Packing: .checklist, .progress, .progress-bar span, [data-reset]
   - Bingo: .bingo-grid, .bingo-tile (+ .is-free, .is-marked,
     .is-winning), .bingo-free-label, .bingo-status, .bingo-toast
     (+ .is-showing), .bingo-nudge
   - Trivia and advice: .trivia-form, .trivia-submit, .trivia-error,
     .trivia-draft, .trivia-done, .note-card
   - Find the Guest: .find-board (+ .is-picking, .is-dragging,
     .is-checked), .find-fact (+ .is-right, .is-wrong), .find-slot
     (+ .is-filled, .is-over), .find-slot-hint, .find-chip
     (+ .is-selected, .is-dragging), .find-ghost, .find-result,
     .find-dock (+ .is-empty), .find-tray, .find-status, .find-picker,
     .find-pick (+ .is-current), .find-pick-name, .find-pick-note
   - Home screen popup: dialog.home-tip, .home-tip-close, .home-tip-icon
   ===================================================================== */

/* hidden for the eye, still read by screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* things the scripts hide and show */
.day[hidden],
.bingo-nudge[hidden],
.bingo-toast[hidden],
.trivia-error[hidden],
.trivia-done[hidden],
.trivia-form[hidden],
.find-actions [hidden],
.find-picker-actions [hidden] { display: none; }

/* the bingo celebration floats above the page without blocking taps */
.bingo-toast {
  position: fixed;
  pointer-events: none;
}

/* Find the Guest: pieces drag instead of scrolling or selecting text */
.find-chip {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.find-chip img,
.find-chip span { pointer-events: none; }

.find-chip img { -webkit-touch-callout: none; }

/* the copy that follows your finger while dragging */
.find-ghost {
  position: fixed;
  z-index: 50;
  left: 0;
  top: 0;
  margin: 0;
  pointer-events: none;
}

.find-slot.is-filled .find-slot-hint { display: none; }
.find-hint-tap { display: none; }

.find-dock.is-empty .find-hint,
.find-dock.is-empty .find-tray { display: none; }

/* the page stays put while the guest picker is open */
html.find-locked { overflow: hidden; }

/* phones and tablets: no dragging. Tap a fact to pick its guest */
@media (max-width: 560px), (hover: none) and (pointer: coarse) {
  .find-tray { display: none; }
  .find-hint-drag { display: none; }
  .find-hint-tap { display: inline; }
  .find-chip { touch-action: manipulation; }
}