/* Screening room, not book club: true white and near-black, posters and
   gold stars carrying all the color. Chrome stays quiet and square. */
:root {
  --paper: #FFFFFF;
  --ink: #15130F;
  --muted: #706B63;
  --faint: #B4AFA6;
  --hairline: rgba(21, 19, 15, 0.13);
  --green: #157A5B;
  --green-tint: #E8F0E8;
  --gold: #B8922A;
  --card: #F7F6F4;
  /* One voice, everywhere you read: SF (system sans), confident and tight
     at display sizes. No serif — posters and gold stars carry the color. */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}
/* Dark: quiet warm-neutral night (not theatrical). Applied by time of day
   or by choice (data-theme set in app.js), not by system preference. */
:root[data-theme="dark"] {
  --paper: #1A1815;
  --ink: #ECE9E2;
  --muted: #9C978D;
  --faint: #6C685F;
  --hairline: rgba(236, 233, 226, 0.14);
  --green: #4CAE8C;
  --green-tint: #21302A;
  --gold: #CBAA63;
  --card: #24221E;
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}
#app { max-width: 560px; margin: 0 auto; padding: calc(12px + env(safe-area-inset-top)) 18px 24px; }

h1 { font-family: var(--sans); font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin: 10px 0 16px; }
h2 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); margin: 22px 0 6px; }

a { color: inherit; text-decoration: none; }
button {
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: transparent; border: 1px solid var(--ink);
  border-radius: 0; padding: 9px 14px; cursor: pointer;
}
button:active { transform: scale(0.97); }
button.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
button.small { font-size: 13px; padding: 5px 10px; border-radius: 0; }
input, textarea {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: 0; padding: 11px 12px; width: 100%;
  -webkit-appearance: none;
}
input:focus, textarea:focus { outline: none; border-color: var(--green); }
/* herd scope chip: static, plain ellipsis when the name runs long —
   full names live in the picker sheet. */
.herd-chip { flex-shrink: 0; max-width: 45%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* overlapping member faces in the herd picker */
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar { margin-left: -7px; border: 1.5px solid var(--paper); box-sizing: content-box; }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* friends-of-friends: present, but a whisper */
.fof-item { opacity: 0.78; }

/* consensus events: group news gets the loud (for Moo) treatment */
.feed-item.consensus-item { background: var(--green-tint); border-radius: 0; padding: 14px 12px; margin: 8px 0; border-bottom: none; }
.feed-item.consensus-item .phrase.big { font-size: 19.5px; }

/* comment threads (film page) */
.thread { margin: 2px 0 14px 14px; padding-left: 12px; border-left: 2px solid var(--hairline); }
.comment { display: flex; align-items: baseline; gap: 7px; padding: 5px 0; font-size: 14px; }
.comment .avatar { align-self: flex-start; margin-top: 2px; }
.c-name { font-weight: 600; }
.c-time { color: var(--faint); font-size: 12px; }
.c-edit { border: none; background: none; padding: 0 2px; font-size: 12px; color: var(--green); }
.heart { border: none; background: none; padding: 2px 3px; font-size: 14px; color: var(--faint); line-height: 1; flex-shrink: 0; }
.heart.on { color: #C0392B; }
.heart-n { font-size: 12px; color: var(--muted); min-width: 10px; }
.reply-input { margin-top: 4px; padding: 7px 11px; font-size: 14px; border-radius: 0; }

/* Filmhouse movie-detail sheet: poster + title pinned at top, synopsis
   scrolls between them and the pinned action row; drag top region to close. */
.cinema-sheet { display: flex; flex-direction: column; overflow: hidden; }
.csheet-drag { flex-shrink: 0; cursor: grab; }
.csheet-head { display: flex; gap: 14px; }
.csheet-poster { width: 96px; height: 144px; object-fit: cover; border-radius: 0; flex-shrink: 0; }
.csheet-facts { flex: 1; min-width: 0; }
.csheet-title { font-size: 20px; font-weight: 600; line-height: 1.15; }
.csheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; margin: 14px 0; font-size: 14px; line-height: 1.5; }
.csheet-foot { flex-shrink: 0; display: flex; gap: 10px; }

/* Filmhouse shelf (Singapore) — cards top-aligned, posters uniform,
   titles reserve two lines so the times row lines up across cards. */
.cinema-row { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding: 4px 0 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; }
.cinema-row::-webkit-scrollbar { display: none; }
.cinema-card { display: flex; flex-direction: column; align-items: stretch; width: 124px; flex-shrink: 0; border: none; background: none; padding: 0; text-align: left; vertical-align: top; scroll-snap-align: start; }
.cinema-card img { width: 124px; height: 184px; object-fit: cover; border-radius: 0; display: block; }
.cinema-title { font-size: 13.5px; font-weight: 600; margin-top: 6px; line-height: 1.25; min-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cinema-city { border: none; background: none; padding: 0; margin: -2px 0 2px; font-size: 15px; font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.cinema-city .chev { font-size: 11px; line-height: 1; color: var(--faint); position: relative; top: 1px; }
.cinema-venue { font-size: 13px; font-weight: 600; color: var(--muted); margin: 4px 0 8px; min-height: 16px; }
.csheet-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.cinema-noposter { width: 124px; height: 184px; border-radius: 0; background: var(--card); border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; font-family: var(--sans); font-size: 14px; color: var(--muted); box-sizing: border-box; }
.cinema-times { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* pull-to-refresh indicator (sits in the gap revealed as content pushes down) */
.ptr { position: fixed; top: calc(env(safe-area-inset-top) + 6px); left: 50%; margin-left: -16px; width: 32px; height: 32px; z-index: 25; display: flex; align-items: center; justify-content: center; transform: translateY(-40px); pointer-events: none; }
.ptr.anim { transition: transform .25s ease, opacity .25s ease; }
.ptr-spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--hairline); border-top-color: var(--green); transition: transform .15s ease; }
.ptr.ready .ptr-spin { transform: rotate(180deg); }
.ptr.spinning .ptr-spin { animation: ptr-rot .7s linear infinite; }
@keyframes ptr-rot { to { transform: rotate(360deg); } }

/* feed filters */
.filter-row { display: flex; gap: 10px; align-items: center; margin: 10px 0 2px; }
.filter-row input { padding: 7px 11px; font-size: 14px; border-radius: 0; }
.star-filter { display: flex; align-items: center; flex-shrink: 0; }
.star-btn { border: none; background: none; padding: 3px 2px; font-size: 19px; line-height: 1; color: var(--faint); opacity: 0.55; }
.star-btn.on { color: var(--gold); opacity: 1; }

/* clear (×) button inside search inputs */
.search-wrap { position: relative; }
.search-wrap input { padding-right: 40px; }
.search-clear { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 50%; background: var(--hairline); color: var(--muted); font-size: 12px; line-height: 1; }
.search-clear[hidden] { display: none; }
label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 5px; }

/* ---------- tab bar ---------- */
#tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-around;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  z-index: 10;
}
#tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--faint); font-size: 10px; padding: 3px 14px; }
#tabbar a.active { color: var(--green); }
#tabbar svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- feed ---------- */
.feed-item { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--hairline); align-items: flex-start; }
.feed-item:last-child { border-bottom: none; }
.phrase { font-size: 16.5px; line-height: 1.4; }
.phrase.big { font-weight: 600; }
.phrase i { font-style: italic; }
.feed-meta { font-size: 12.5px; color: var(--faint); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stars { color: var(--gold); letter-spacing: 1px; font-size: 13px; }
.stars .off { color: var(--hairline); }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 0; background: var(--green-tint); color: var(--green); font-weight: 500; }
.feed-actions { margin-left: auto; flex-shrink: 0; }

/* ---------- posters ---------- */
.poster { flex-shrink: 0; border-radius: 0; background: var(--hairline); overflow: hidden; display: flex; align-items: flex-end; }
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster.ph span { font-size: 8px; font-weight: 600; color: var(--muted); padding: 4px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; }
.poster.sm { width: 44px; height: 66px; }
.poster.md { width: 64px; height: 96px; }
.poster.lg { width: 104px; height: 156px; border-radius: 0; }
.poster.lg.ph span { font-size: 12px; padding: 8px; }

/* ---------- rows (search results, watchlist, lists) ---------- */
.row { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.row:last-child { border-bottom: none; }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-size: 16px; }
.row .sub { font-size: 13px; color: var(--muted); margin-top: 1px; }
.row .overview { font-size: 13px; color: var(--muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row .actions { display: flex; gap: 7px; flex-shrink: 0; }
/* Quiet by design: one crisp bordered button per row is enough — the
   bookmark toggle stays an unboxed icon, distinguished only by color. */
.icon-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; color: var(--muted); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.on { color: var(--green); }
.icon-btn.on svg { fill: var(--green); }
/* "seen" marker: same footprint as icon-btn, but quiet — no border. */
.seen-check { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--green); flex-shrink: 0; }
.seen-check svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- log sheet ---------- */
.sheet-back { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 20; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21;
  background: var(--paper); border-radius: 0;
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto; max-height: 86vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.sheet .grabber { width: 36px; height: 4px; border-radius: 2px; background: var(--hairline); margin: 0 auto 14px; }
.rate-stars { display: flex; gap: 6px; font-size: 34px; color: var(--gold); margin: 8px 0 4px; }
.rate-stars span { cursor: pointer; padding: 2px; }
.rate-stars .off { color: var(--hairline); }
.rate-hint { font-size: 13.5px; color: var(--muted); min-height: 20px; }
.top10-note { background: var(--green-tint); color: var(--green); font-size: 13.5px; border-radius: 0; padding: 9px 12px; margin-top: 10px; line-height: 1.45; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.chip { border: 1px solid var(--hairline); border-radius: 0; padding: 6px 15px; font-size: 14px; background: transparent; color: var(--ink); }
.chip.on { background: var(--green-tint); border-color: var(--green); color: var(--green); }

/* ---------- film page ---------- */
.film-head { display: flex; gap: 16px; margin: 6px 0 14px; }
.film-head .facts { min-width: 0; }
.film-title { font-family: var(--sans); font-size: 24px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.15; }
.film-sub { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.film-actions { display: flex; gap: 8px; margin-top: 12px; }
.overview { font-size: 15px; line-height: 1.55; color: var(--ink); margin: 4px 0 6px; }
.consensus { font-size: 15px; font-weight: 600; line-height: 1.4; margin: 4px 0 10px; }
.friend-row { padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.friend-row:last-child { border-bottom: none; }
.with-line { font-size: 12.5px; color: var(--muted); margin-top: 2px; padding-left: 30px; }
.invite-chip { color: var(--green); border-style: dashed; }
/* your own rating, inline with the others but unmistakably yours */
.friend-row.mine { background: var(--green-tint); border-radius: 0; padding: 9px 10px; border-bottom: none; margin: 3px 0; }
.friend-row.mine .name { font-weight: 600; }
.friend-line { display: flex; align-items: center; gap: 7px; }
.friend-line .name { font-size: 15px; }
.friend-line .note-glyph { color: var(--faint); }
.friend-line .note-glyph svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.friend-line .stars { margin-left: auto; }
.friend-note { display: none; font-size: 14px; color: var(--muted); font-style: italic; margin-top: 6px; line-height: 1.5; }
.friend-row.open .friend-note { display: block; }
.your-line { font-size: 14px; color: var(--muted); margin-top: 8px; }

/* ---------- inbox / from friends ---------- */
.rec-card { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.rec-card:last-child { border-bottom: none; }
.rec-why { font-size: 13.5px; color: var(--muted); margin: 2px 0 9px; }
.rec-actions { display: flex; gap: 8px; }

/* ---------- profile ---------- */
.tmdb-note { font-size: 11px; color: var(--faint); text-align: center; margin-top: 18px; }

/* ---------- swipe to delete (films logged) ---------- */
.swipe-wrap { position: relative; overflow: hidden; }
.swipe-del { position: absolute; top: 0; right: 0; bottom: 0; width: 80px; border: none; border-radius: 0; background: #B3402F; color: #fff; font-size: 14px; }
.swipe-content { position: relative; background: var(--paper); touch-action: pan-y; }
.swipe-wrap .row { border-bottom: 1px solid var(--hairline); }
.swipe-wrap:last-child .row { border-bottom: none; }

/* ---------- avatars ---------- */
.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-block; }
.avatar.ph { background: var(--card); border: 1px solid var(--hairline); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-weight: 500; }

/* ---------- google sign-in ---------- */
.gsi-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 18px 0 4px; }
.divider { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--faint); font-size: 12px; }
.divider::before, .divider::after { content: ''; flex: 1; border-top: 1px solid var(--hairline); }

.stat-row { display: flex; gap: 10px; margin: 12px 0 4px; }
.stat { flex: 1; background: var(--card); border: 1px solid var(--hairline); border-radius: 0; padding: 12px; }
.stat .n { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.stat .l { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* consistent "go to a subpage" link — intentional nav, not stray muted text */
.navlink { display: block; font-size: 14px; font-weight: 500; color: var(--ink); margin: 12px 2px 0; }
.navlink .chev { color: var(--faint); font-weight: 400; }
.shelf { display: flex; gap: 10px; overflow-x: auto; padding: 6px 0 10px; -webkit-overflow-scrolling: touch; }
.shelf .poster { flex-shrink: 0; }

/* ---------- misc ---------- */
.empty { color: var(--faint); font-size: 14.5px; padding: 18px 0; text-align: center; line-height: 1.5; }
.error { color: #B03A2E; font-size: 14px; margin-top: 10px; }
#toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(20px);
  bottom: calc(78px + env(safe-area-inset-bottom));
  background: var(--ink); color: var(--paper);
  font-size: 14px; padding: 10px 18px; border-radius: 0;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
  max-width: 86vw; text-align: center; z-index: 30;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.auth-wrap { max-width: 360px; margin: 12vh auto 0; padding: 0 6px; }
.auth-wrap .logo { font-family: var(--sans); font-size: 40px; font-weight: 800; letter-spacing: -0.02em; text-align: center; margin-bottom: 4px; }
.auth-wrap .tag { text-align: center; color: var(--muted); font-size: 14px; margin-bottom: 28px; }
.auth-switch { text-align: center; font-size: 14px; color: var(--muted); margin-top: 18px; }
.auth-switch a { color: var(--green); }
.spin { text-align: center; color: var(--faint); padding: 30px 0; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}