/* ============================================================================
   style.css — whatdoyouwannawatch.com
   ============================================================================
   All visual styling for the app. Mobile-first — the base styles target a
   phone in portrait orientation (~375px wide). Desktop overrides are at the
   bottom in a @media block.

   No frameworks, no preprocessors, no CSS-in-JS. Just plain CSS.

   The HTML is minimal (index.html is just named containers). app.js builds
   all the inner HTML dynamically. So every class name referenced here is
   created by app.js, not written in index.html.

   LAYOUT (top to bottom on a phone):
     #app              — full-width container, centered on desktop
     #search-area      — sticky at top so you can always add movies
     #search-box       — text input, full width
     #search-results   — dropdown overlay below the search box
     #tab-bar          — horizontal scroll of visitor tabs
     #movie-list       — main scrolling area, fills remaining height
     .entry            — one movie row: rank | poster | title | comments | remove
     #copy-paste-btn   — fixed bottom-left button
     #copy-paste-modal — fullscreen overlay
     #movie-popup      — floating info card
   ============================================================================ */


/* ============================================================================
   SECTION 1: RESET AND BASE
   ============================================================================
   Kill default margins/padding. Set a clean base font. Use border-box so
   padding doesn't add to element widths (critical for mobile layouts).
   ============================================================================ */

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

html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  background: #1a1a2e;
  color: #e0e0e0;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}


/* ============================================================================
   SECTION 2: APP CONTAINER
   ============================================================================
   On phones: full width, no padding needed (entries go edge to edge).
   On desktop: max-width of 600px, centered. A movie list doesn't need to
   be wider than that — it just looks silly stretched across a big monitor.
   ============================================================================ */

#app {
  max-width: 600px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


/* ============================================================================
   SECTION 3: SEARCH AREA
   ============================================================================
   Sticky at the top of the page so the user can always search without
   scrolling back up. The search box is a simple text input. The results
   dropdown appears below it as an absolute-positioned overlay so it
   doesn't push the list down.
   ============================================================================ */

#search-area {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #1a1a2e;
  padding: 12px 12px 0;
}

#search-box {
  width: 100%;
  padding: 10px 14px;
  font-size: 16px;
  border: 1px solid #444;
  border-radius: 8px;
  background: #16213e;
  color: #e0e0e0;
  outline: none;
}

#search-box:focus {
  border-color: #e94560;
}

#welcome-msg {
  padding: 10px 14px;
  font-size: 14px;
  color: #999;
  text-align: center;
}

#search-box::placeholder {
  color: #777;
}

/* --- Search Results Dropdown ---
   Positioned absolutely so it overlays the list below without pushing
   content down. Each result row has a tiny poster thumbnail + title.
   ============================================================================ */

#search-results {
  position: absolute;
  top: 100%;
  left: 12px;
  right: 12px;
  background: #16213e;
  border: 1px solid #444;
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 101;
  display: none;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #2a2a4a;
}

.search-result:last-child {
  border-bottom: none;
}

.search-result:hover {
  background: #2a2a4a;
}

.search-thumb {
  width: 30px;
  height: 45px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}


/* ============================================================================
   SECTION 4: TAB BAR
   ============================================================================
   A horizontal row of tabs that scrolls sideways if there are too many
   visitors to fit. Each tab shows a visitor's name + a small color swatch.
   The active tab is highlighted. Dimmed tabs (toggled out of the Couch vote)
   are faded.

   On the far right: either a name input field (if the visitor hasn't
   entered a name yet) or a hidden color picker.
   ============================================================================ */

#tab-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

/* hide the scrollbar on the tab bar — it's ugly, users swipe instead */
#tab-bar::-webkit-scrollbar {
  display: none;
}
#tab-bar {
  scrollbar-width: none;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  border-radius: 17px;
  background: #2a2a4a;
  color: #ccc;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  height: 34px;
}

.tab-couch {
  padding: 0 16px;
  color: #ccc;
}

.tab-user {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}

.tab-active {
  box-shadow: 0 0 0 2px #1a1a2e, 0 0 0 4px #e94560;
}

.tab-dimmed {
  opacity: 0.45;
}

/* Left circle on a user tab: same color as the tab background, so it's
   essentially invisible until hovered. Clicking your own opens the native
   <input type="color"> picker. */
.tab-color-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.2);
}

.tab-mine .tab-color-dot {
  cursor: pointer;
}

.tab-mine .tab-color-dot:hover {
  filter: brightness(1.12);
  border-color: rgba(255,255,255,0.6);
}

.tab-name {
  padding: 0 4px;
  font-weight: 500;
}

.tab-name-input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font: inherit;
  font-weight: 500;
  padding: 0 4px;
  width: 66px;
  text-align: center;
  text-shadow: inherit;
}

.tab-name-input::placeholder {
  color: rgba(255,255,255,0.7);
}

.tab-name-input:focus {
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
}

/* Right circle: ready-toggle. Replaces the old long-press gesture. */
.tab-ready-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  flex-shrink: 0;
  color: #fff;
  letter-spacing: 0.3px;
  text-shadow: none;
  border: 1px solid rgba(0,0,0,0.25);
}

.tab-ready-btn.ready {
  background: #2a9d3f;
}

.tab-ready-btn.not-ready {
  background: #c0392b;
}

/* Brand-new visitor tab: no color / buttons yet, just the name entry. */
.tab-new {
  background: #16213e;
  padding: 3px 10px;
  border: 1px solid #444;
}

.tab-new .tab-name-input {
  color: #e0e0e0;
  text-shadow: none;
  width: 140px;
}

.tab-new .tab-name-input::placeholder {
  color: #777;
}

#name-warning {
  color: #e94560;
  font-size: 12px;
  margin-left: 6px;
}


/* ============================================================================
   SECTION 5: MOVIE LIST AND ENTRIES
   ============================================================================
   The main content area. Each .entry is one movie row.

   Entry layout (left to right):
     .entry-rank     — rank number + optional drag handle + optional tie label
     .entry-poster   — small poster image (92px wide from TMDB)
     .entry-title    — movie title + year
     .entry-comments — horizontal row of comment boxes
     .remove-btn     — small X button (only if you added this movie)

   On a phone, the entry wraps: poster + title on the first line, comments
   below. The rank number is always on the left.
   ============================================================================ */

#movie-list {
  flex: 1;
  padding: 0 4px;
}

.entry {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid #2a2a4a;
  position: relative;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* --- Rank number column ---
   Layout when arrows are shown (your own tab):
     [▲]        [▲▲]
     [▼]  rank  [▼▼]
   Single arrows on the left swap one position.
   Double arrows on the right jump to top/bottom. */

.entry-rank {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 36px;
  min-height: 69px;
  flex-shrink: 0;
}

.rank-number {
  font-size: 32px;
  font-weight: bold;
  color: #e94560;
  min-width: 34px;
  text-align: center;
}

/* --- Arrow columns (single and double) --- */

.rank-arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.arrow-up, .arrow-down, .arrow-top, .arrow-bottom {
  font-size: 14px;
  color: #666;
  cursor: pointer;
  user-select: none;
  text-align: center;
  padding: 6px 4px;
  line-height: 1;
}

.arrow-top, .arrow-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.6;
}

.arrow-up:active, .arrow-down:active,
.arrow-top:active, .arrow-bottom:active {
  color: #e94560;
}

.tie-label {
  font-size: 9px;
  color: #888;
  white-space: nowrap;
}

/* --- Poster thumbnail --- */

.entry-poster {
  flex-shrink: 0;
  cursor: pointer;
}

.entry-poster img {
  width: 46px;
  height: 69px;
  object-fit: cover;
  border-radius: 4px;
}

.no-poster {
  width: 46px;
  height: 69px;
  background: #2a2a4a;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 20px;
}

/* --- Title --- */

.entry-title {
  flex: 1;
  font-size: 14px;
  padding-top: 4px;
  cursor: pointer;
  min-width: 0;
}

/* --- Comment boxes --- */

.entry-comments {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 2;
  min-width: 0;
}

.comment-box {
  font-size: 12px;
  padding: 4px 6px;
  background: #16213e;
  border-radius: 6px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid #2a2a4a;
}

/* --- Comment expanded state ---
   When you tap a comment, it grows to ~2/3 screen height.
   If it's yours, a textarea + Done button appear inside.
   If it's someone else's, it becomes scrollable read-only.
   ============================================================================ */

.comment-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 199;
}

.comment-expanded {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  max-width: 400px;
  height: auto;
  min-height: 270px;
  max-height: 60vh;
  white-space: normal;
  overflow-y: auto;
  z-index: 200;
  background: #16213e;
  border: 2px solid #e94560;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.comment-edit {
  flex: 1;
  width: 100%;
  font-size: 18px;
  padding: 8px;
  border: 1px solid #444;
  border-radius: 6px;
  background: #1a1a2e;
  color: #e0e0e0;
  resize: none;
  margin-top: 8px;
  font-family: inherit;
}

.comment-done-btn {
  align-self: flex-end;
  margin-top: 8px;
  padding: 8px 20px;
  background: #e94560;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

.comment-readonly {
  white-space: normal;
  overflow-y: auto;
}

/* --- Remove button --- */

.remove-btn {
  background: none;
  border: none;
  color: #666;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

.remove-btn:hover {
  color: #e94560;
}

/* (drag styles removed — replaced by arrow buttons) */


/* ============================================================================
   SECTION 6: COPY / PASTE BUTTON AND MODAL
   ============================================================================
   The button is fixed to the bottom-left corner, always visible.
   The modal is a fullscreen overlay with sections for ID management,
   export, and import.
   ============================================================================ */

#copy-paste-btn {
  position: fixed;
  bottom: 16px;
  left: 16px;
  padding: 8px 16px;
  background: #2a2a4a;
  color: #ccc;
  border: 1px solid #444;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  z-index: 90;
}

#copy-paste-btn:hover {
  background: #3a3a5a;
}

#copy-paste-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 300;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: 20px;
}

.modal-content {
  background: #16213e;
  border-radius: 12px;
  padding: 20px;
  max-width: 500px;
  width: 100%;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: none;
  color: #999;
  font-size: 20px;
  cursor: pointer;
}

.modal-section {
  margin-bottom: 20px;
}

.modal-section h3 {
  font-size: 14px;
  color: #e94560;
  margin-bottom: 8px;
}

.modal-section input[type="text"],
.modal-section textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid #444;
  border-radius: 6px;
  background: #1a1a2e;
  color: #e0e0e0;
  font-family: inherit;
}

.modal-section textarea {
  min-height: 80px;
  resize: vertical;
}

.modal-section button {
  margin-top: 6px;
  padding: 6px 14px;
  background: #e94560;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.modal-hint {
  font-size: 11px;
  color: #777;
  margin-top: 4px;
}

/* Details modal: welcome text + big editable blob + Copy/Apply buttons. */
.details-modal {
  max-width: 640px;
}

.modal-welcome {
  font-size: 12px;
  color: #bbb;
  line-height: 1.45;
  margin-bottom: 12px;
}

.modal-welcome p { margin: 0 0 6px 0; }
.modal-welcome strong { color: #e94560; }

#details-blob {
  width: 100%;
  min-height: 60vh;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  color: #e0e0e0;
  background: #1a1a2e;
  border: 1px solid #444;
  border-radius: 6px;
  resize: vertical;
  white-space: pre;
}

.modal-buttons {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.modal-buttons button {
  flex: 1;
  padding: 8px 14px;
  background: #e94560;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.modal-buttons button:hover { background: #f05a74; }

.modal-footnote {
  font-size: 11px;
  color: #888;
  line-height: 1.4;
  margin: 10px 2px 0 2px;
}

/* How-to button mirrors the Details button but pinned to the bottom-right. */
#how-to-btn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  padding: 8px 16px;
  background: #2a2a4a;
  color: #ccc;
  border: 1px solid #444;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  z-index: 90;
}

#how-to-btn:hover { background: #3a3a5a; }

#how-to-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 300;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: 20px;
}

.howto-modal {
  max-width: 560px;
  line-height: 1.5;
}

.howto-modal h2 {
  font-size: 18px;
  color: #e94560;
  margin: 0 0 12px 0;
}

.howto-modal h3 {
  font-size: 13px;
  color: #e94560;
  margin: 14px 0 4px 0;
}

.howto-modal p {
  font-size: 13px;
  color: #d0d0d0;
  margin: 0 0 4px 0;
}

.howto-modal strong { color: #fff; }


/* ============================================================================
   SECTION 7: MOVIE INFO POPUP
   ============================================================================
   Floating card that appears on hover (desktop) or long-press (phone).
   Shows the large poster, director, cast, and plot summary from TMDB.
   Positioned absolutely by app.js near the element that triggered it.
   ============================================================================ */

#movie-popup {
  display: none;
  position: absolute;
  z-index: 250;
  background: #16213e;
  border: 1px solid #444;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  max-width: 400px;
  overflow: hidden;
}

.popup-content {
  display: flex;
  gap: 12px;
  padding: 12px;
}

.popup-poster {
  width: 120px;
  height: auto;
  border-radius: 6px;
  flex-shrink: 0;
}

.popup-info {
  flex: 1;
  min-width: 0;
}

.popup-info h3 {
  font-size: 15px;
  margin-bottom: 6px;
  color: #fff;
}

.popup-info p {
  font-size: 12px;
  color: #bbb;
  margin-bottom: 6px;
}


/* ============================================================================
   SECTION 8: DESKTOP OVERRIDES
   ============================================================================
   On screens wider than 700px, give the app a bit of breathing room.
   The layout doesn't change much — the max-width on #app already handles
   centering. These are just small tweaks for mouse-based interaction.
   ============================================================================ */

@media (min-width: 700px) {
  html, body {
    font-size: 20px;                                               /* 25% bigger base (16→20) */
  }

  #app {
    padding: 20px 0;
    max-width: 750px;                                              /* a bit wider to fit larger text */
  }

  .entry {
    padding: 10px 12px;
  }

  .entry-title {
    font-size: 18px;
  }

  .comment-box {
    font-size: 16px;
    max-width: 320px;
  }

  .comment-expanded {
    max-width: 550px;
    min-height: 320px;
    font-size: 18px;
  }

  .comment-edit {
    font-size: 22px;
  }
}